Auslösen

In den letzten Jahren habe ich mir verschiedene selbst erstellte Web-Apps angesehen, die auf SNS wie Twitter veröffentlicht wurden. Daher habe ich eine starke Leidenschaft für Web-Technologie und Web-Entwicklung und möchte etwas Nützliches machen. Ich habe ein Gefühl. Derzeit habe ich jedoch nicht viel Wissen, um einen Back-End-AP-Server oder einen DB-Server zu erstellen. Daher suchten wir: "Ist es möglich, schnell eine serverlose Webanwendung zu erstellen, indem so viel wie möglich codiert wird, wobei der Schwerpunkt auf dem Front-End wie HTML, JavaScript, CSS (und deren Frameworks) liegt und SaaS aktiv verwendet wird?" Ich habe die App tatsächlich erstellt und veröffentlicht, daher werde ich die Methode hier schreiben.

Web-App zu erstellen

In Bezug auf die App, die ich dieses Mal machen werde, bekam ich eine Idee von einem Freund und beschloss, mit "einer App zusammenzuarbeiten, die empfohlene Werke aus dem rauen Gefühl empfiehlt, Manga mit solchen Inhalten lesen zu wollen". Ich fand die Funktion vorerst einfach und gut, daher werde ich sie mit den folgenden Anforderungen erstellen.

** Es wird davon ausgegangen, dass Sie auf Ihr Smartphone zugreifen und es durchsuchen können, aber Sie können es auch auf Ihrem PC sehen ** Mit anderen Worten, es handelt sich um ein Mobile-First-Responsive-Design.
** Keine Benutzerauthentifizierung innerhalb der Web-App ** Jeder kann es nur durch Zugriff auf die URL verwenden. Stattdessen werden keine Benutzerdaten innerhalb des Dienstes gespeichert (kein DB-Server verwendet).
** Suchen Sie nach dem, was Sie benötigen, und zeigen Sie es auf der Website als Antwort auf die Keyword-Eingabe des Benutzers an ** Die Suche wird jedoch nicht in der Datenbank durchgeführt, sondern in der in HTML oder JS fest codierten oder in der für die Datensuche veröffentlichten Web-API, und die Ergebnisdaten werden erfasst und angezeigt (DB-Server). Nicht benutzt).
** Dynamische Seitenkonstruktion auf der Client- (Browser-) Seite ** Mit JavaScript erstellt der Benutzer dynamisch das HTML zur Anzeige der erfassten Daten und zeigt es an (ohne Verwendung des AP-Servers).

Zu verwendende Webelementtechnologie

Basierend auf den Anforderungen wird die diesmal verwendete Sprache [Framework] unten beschrieben.

HTML
CSS【Bootstrap】 Klicken Sie hier, um zur offiziellen Seite zu gelangen (Bootstrap - Die weltweit beliebteste Frontend-Komponentenbibliothek). Mit Bootstrap können Sie auf einfache Weise gut organisierte und reaktionsschnelle Designs erstellen.
JavaScript【Vue.js】 Klicken Sie hier für die offizielle Seite (Vue.js). Mit Vue.js können Sie ziemlich intuitiv beschreiben, wie JavaScript HTML auf der Client- (Browser-) Seite arbeitet (wenn Daten in JavaScript durch einen Mechanismus namens Datenbindung aktualisiert werden, wird gleichzeitig auch HTML aktualisiert).
Python【Flask】 Klicken Sie hier für die offizielle Seite ([Willkommen bei Flask - Flask v0.5.1 Dokumentation](ttps: //a2c.bitbucket.io/flask/)). Mit Flask können Sie eine Web-API mit einer einfachen Beschreibung mithilfe der Python-Syntax schreiben. Wenn Sie also keine Web-API haben, die die erforderlichen Daten verfügbar macht, können Sie diese mithilfe von Flask selbst erstellen. Dieses Mal habe ich eine API erstellt, die eine Liste von Arbeitstiteln basierend auf Schlüsselwörtern zurückgibt.

SaaS wurde zum Erstellen von Web-Apps verwendet

Im Folgenden finden Sie ein Beispiel für SaaS, mit dem eine Web-App mit dieser Anforderung erstellt werden kann.

** Sakura Internet (Leuchtplan für Mietserver ist diesmal verfügbar) ** Klicken Sie hier für die offizielle Seite (Sakura-Mietserver | Hochgeschwindigkeits- und stabiles WordPress! Kostenlose 2-wöchige Testversion). Ein Webhosting-Dienst, mit dem Sie HTML, CSS, JavaScript usw. platzieren und veröffentlichen können. Darüber hinaus gibt es einen optionalen Dienst zum Erfassen einer eindeutigen Domäne und zum Festlegen eines SSL-Zertifikats. Mit der grundlegenden Weboberfläche können verschiedene Einstellungen vorgenommen werden, sodass Anfänger leicht loslegen können. Nach der kostenlosen Testphase wird eine feste monatliche Gebühr erhoben. Andere ähnliche SaaS-Hosting-Funktionen sind Firebase-Hosting (Offizielle Seite) und AWS ([Offizielle Seite](https: // aws)). .amazon.com / jp / sites /)) etc. Dies sind Pay-as-you-go-Systeme und es gibt auch freie Slots, sodass die anfänglichen Kosten unterdrückt werden können.
Google App Engine Klicken Sie hier, um eine Übersicht über den Dienst zu erhalten (App Engine | Google Cloud). Es kann zum Bereitstellen und Veröffentlichen der in Flask oben beschriebenen Web-API verwendet werden. Es wird automatisch nach Zugriff und Auslastung skaliert und die Gebühr wird nach dem Umtausch berechnet.

Systemkonfiguration

Basierend auf der bisherigen Geschichte sieht das Konfigurationsdiagramm (Beispiel) der Webanwendung, die das Framework / SaaS verwendet, wie folgt aus. システム構成図.png

Der Teil, der die Web-API in Flask verfügbar macht, aber die in Google App Engine hochgeladene Dateistruktur lautet wie folgt. キャプチャ.PNG data_list.csv sind die Listendaten, die den Titel der Arbeit und ihre Funktionen (Tags) enthalten, main.py ist der Flask-Python-Code und die anderen sind die von der App Engine-Methode erstellten Einstellungsdateien. Ich habe beim Erstellen der Einstellungsdatei auf den folgenden Artikel verwiesen.

Der Inhalt von main.py ist wie folgt und es wird beschrieben, dass die Ergebnisdaten (json) zurückgegeben werden, wenn der Benutzer die Arbeitssuchdaten (json) an die Web-API sendet. Ich werde.

`main.py`


from flask import Flask, jsonify, request
from flask_cors import CORS
import os
import csv


#Eine Variable, die den absoluten Pfad des Verzeichnisses enthält, in dem sich dieses Skript befindet
CWD = os.path.dirname(__file__)

#Name der Arbeitsdatendatei
DATA_LIST_FILE = "data_list.csv"
LEARN_DATA = None  #Datenobjekt zur Empfehlung verwendet

#CSV-Pfad empfangen und lesen
def loadStractualData(target_file):
    global LEARN_DATA  #Deklaration erforderlich, um einer globalen Variablen zuzuweisen
    csv_list = []  #Eine Liste, die CSV einfach in eine Liste konvertiert
    with open(target_file, 'r', encoding='utf-8', newline="") as f:
        csv_list = [row for row in csv.reader(f)]  #2D-Liste
    output = []
    for row in csv_list:  #CSV zeilenweise verarbeiten
        #################################################
        #Verarbeitung, um CSV-Zeilen in strukturierte Daten umzuwandeln und in der Ausgabe zu speichern(Ausgelassen)
        #################################################
    print("file loading finished!")
    LEARN_DATA = output

###############################
##Server Prozesseinstellungen von hier##
###############################
loadStractualData(os.path.join(CWD, LEARNED_FILE)) #CSV-Datei lesen
app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False  #Einstellung, um verstümmelte japanische Zeichen in JSON-Ausgabe zu verhindern
CORS(app)  # Access-Control-Allow-Ursprungseinstellungen

#Mit HTTP POST/post_Verarbeitung, wenn ein Benutzerauswahl-Tag an Tags gesendet wird
@app.route('/post_tags', methods=['POST'])
def post_tags():
    json = request.get_json()  #Holen Sie sich POSTed JSON
    input_tags = json["tags"]  #Liste der vom Benutzer eingegebenen Tags
    ###########################################################
    #Filtern Sie die Arbeitsliste nach dem vom Benutzer gesendeten Tag und aus_Verarbeitung zum Speichern in der Liste(Ausgelassen)
    ###########################################################
    return jsonify({"title_num": len(out_list), "titles": out_list}) #Gibt json zurück

#Einstiegspunkt beim Ausführen von Python
if __name__ == "__main__":
    print(" * Flask starting server...")
    app.run()  #Starten Sie den Serverprozess

Axios wird für den Teil verwendet, der eine Anforderung von Vue.js an die von Flask erstellte Web-API stellt. Ich habe auf den folgenden Artikel verwiesen.

App abgeschlossen

Die fertige App sieht so aus (emore | Manga-Suche nach "Kimochi"). Es ist eine einfache App, die aus einer Top-Seite, einer Suchseite und einer Suchergebnisseite besteht und je nach Bedarf ein ansprechendes Design basierend auf Smartphones aufweist (dank Bootstrap). Darüber hinaus nutzt die Suchseite die dynamische Zeichnung auf der Browserseite von Vue.js (wenn der Benutzer ein Tag auswählt, wird es an die Web-API gesendet und die Ergebnisanzeige wird nacheinander aktualisiert. Ich denke, also würde ich es begrüßen, wenn Sie einen Blick darauf werfen könnten.

Impressionen

Ich bin der Meinung, dass die Front-End-Technologie und SaaS in der Entwicklung von Webanwendungen ziemlich weit fortgeschritten sind und es jetzt möglich ist, einige Anwendungen auch in der persönlichen Entwicklung problemlos zu erstellen. Selbst für die Benutzerauthentifizierung, die diesmal nicht in den Anforderungen enthalten war, können Sie beispielsweise die plattformübergreifende Anmeldung verwenden (Anmeldung mit Twitter, wenn Sie SaaS Firebase-Authentifizierung verwenden (Anmelden mit Facebook usw.) kann implementiert werden, und einige DBs, in denen Benutzerdaten gespeichert sind, können über Web-APIs wie Firebase und FireStore verwendet werden. Sowohl Vue.js als auch Flask verfügen über ein großes technisches Entwicklungspotenzial, wenn Sie einen leistungsstarken Webdienst erstellen möchten. Daher werden wir das Wissen, das wir als Arbeit gelernt haben, weiterhin ausgeben und weiterhin mit der Technologie chatten. (Im Moment studiere ich Nuxt.js, ein Framework von Vue.js, und Django, das anspruchsvoller als Flask ist.)

[PYTHON] Hobby Web Engineer entwickelt Webanwendung mit Vue.js + Flask (& GCP)