[JAVA] Hobby Web Engineer développe une application Web avec Vue.js + Flask (& GCP)

Déclencheur

Depuis environ un an, j'ai examiné diverses applications Web créées par moi-même qui ont été envoyées par diverses personnes sur SNS, telles que Twitter, j'ai donc une forte passion pour la technologie Web et le développement Web, et je veux faire quelque chose d'utile. J'ai un ressenti. Cependant, je n'ai pas beaucoup de connaissances à ce stade pour créer un serveur AP principal ou un serveur DB. Par conséquent, nous avons cherché "Est-il possible de créer rapidement une application Web sans serveur en codant autant que possible en se concentrant sur le front-end tel que HTML, JavaScript, CSS (et leurs frameworks) et en utilisant activement SaaS?" , J'ai en fait créé et publié l'application, donc j'écrirai la méthode ici.

Application Web à créer

En ce qui concerne l'application que je vais créer cette fois, j'ai eu une idée d'un ami et j'ai décidé de coopérer avec "une application qui recommande des travaux recommandés à partir du sentiment approximatif que je veux lire des mangas avec de tels contenus". Je pensais que la fonction était simple et bonne pour le moment, je vais donc la créer avec les exigences suivantes.

Technologie d'élément Web à utiliser

Sur la base des exigences, le langage [cadre] utilisé cette fois est décrit ci-dessous.

SaaS utilisé pour créer des applications Web

Voici un exemple de SaaS qui peut être utilisé pour créer une application Web avec cette exigence.

Configuration du système

Sur la base de l'histoire jusqu'à présent, le diagramme de configuration (exemple) de l'application Web qui utilise le framework / SaaS est le suivant. システム構成図.png

La partie qui expose l'API Web sur Flask, mais la structure de fichier téléchargée sur Google App Engine est la suivante. キャプチャ.PNG data_list.csv est la liste des données contenant le titre de l'œuvre et ses fonctionnalités (balises), main.py est le code python Flask et les autres sont les fichiers de paramètres préparés par la méthode App Engine. J'ai fait référence à l'article suivant lors de la création du fichier de configuration.

Le contenu de main.py est le suivant, et il est décrit que les données de résultat (json) sont renvoyées lorsque l'utilisateur lance les données de recherche de travail (json) à l'API Web. Je vais.

main.py


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


#Une variable qui contient le chemin absolu du répertoire où se trouve ce script
CWD = os.path.dirname(__file__)

#Nom du fichier de données de travail
DATA_LIST_FILE = "data_list.csv"
LEARN_DATA = None  #Objet de données utilisé pour la recommandation

#Recevoir et lire le chemin CSV
def loadStractualData(target_file):
    global LEARN_DATA  #Déclaration requise pour l'affectation à une variable globale
    csv_list = []  #Une liste qui convertit simplement CSV en liste
    with open(target_file, 'r', encoding='utf-8', newline="") as f:
        csv_list = [row for row in csv.reader(f)]  #Liste 2D
    output = []
    for row in csv_list:  #Traiter le CSV ligne par ligne
        #################################################
        #Traitement pour convertir les lignes CSV en données structurées et les stocker en sortie(Omis)
        #################################################
    print("file loading finished!")
    LEARN_DATA = output

###############################
##Paramètres de processus du serveur à partir d'ici##
###############################
loadStractualData(os.path.join(CWD, LEARNED_FILE)) #Lire le fichier CSV
app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False  #Paramètre pour empêcher les caractères japonais déformés dans la sortie JSON
CORS(app)  # Access-Control-Allow-Paramètres d'origine

#Avec HTTP POST/post_Traitement lorsqu'un tag de sélection d'utilisateur est envoyé aux tags
@app.route('/post_tags', methods=['POST'])
def post_tags():
    json = request.get_json()  #Obtenez JSON POSTÉ
    input_tags = json["tags"]  #Liste des balises saisies par l'utilisateur
    ###########################################################
    #Filtrer la liste de travail par le tag envoyé par l'utilisateur et sortant_Traitement pour stocker dans la liste(Omis)
    ###########################################################
    return jsonify({"title_num": len(out_list), "titles": out_list}) #Renvoie json

#Point d'entrée lors de l'exécution de python
if __name__ == "__main__":
    print(" * Flask starting server...")
    app.run()  #Démarrer le processus serveur

Axios est utilisé pour la partie qui fait une requête de Vue.js à l'API Web créée par Flask. J'ai fait référence à l'article suivant.

Application terminée

L'application terminée ressemble à ceci (emore | Recherche Manga par "Kimochi"). Il s'agit d'une application simple composée d'une page d'accueil, d'une page de recherche et d'une page de résultats de recherche, et a un design réactif basé sur les smartphones au besoin (grâce à Bootstrap). De plus, la page de recherche est conçue pour tirer parti du dessin dynamique côté navigateur par Vue.js (lorsque l'utilisateur sélectionne une balise, elle est envoyée à l'API Web et l'affichage des résultats est mis à jour un par un. Je pense, donc j'apprécierais si vous pouviez jeter un coup d'œil.

Impressions

Je pense que la technologie front-end et le SaaS dans le développement d'applications Web sont assez avancés, et il est maintenant possible de créer facilement certaines applications même dans le développement personnel. Même pour l'authentification utilisateur qui n'était pas incluse dans les exigences cette fois-ci, par exemple, si vous utilisez SaaS Firebase Authentication, vous pouvez utiliser la connexion multi-plateforme (connexion avec Twitter, (Connexion avec Facebook, etc.) peut être implémenté, et certaines bases de données qui stockent des données utilisateur peuvent être utilisées via des API Web telles que Firebase et FireStore. Vue.js et Flask ont tous deux un grand potentiel de développement technique si vous souhaitez créer un service Web haute performance.Nous continuerons donc à diffuser les connaissances que nous avons apprises de manière appropriée en tant que travail et à continuer à utiliser la technologie. (Pour l'instant, j'étudie Nuxt.js, qui est un framework de Vue.js, et Django, qui est plus sophistiqué que Flask).

Recommended Posts

Hobby Web Engineer développe une application Web avec Vue.js + Flask (& GCP)
Développement d'applications Web avec Flask
Application Web avec Python + Flask ④
Analyser et visualiser JSON (application Web ⑤ avec Python + Flask)
Créer une application Web avec Django
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 1
Créer une application Web avec Flask ②
Application Web réalisée avec Python + Flask (en utilisant VScode) # 1-Construction d'environnement virtuel-
Créer une application Web de type Flask / Bottle sur AWS Lambda avec Chalice
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 2
Créer une application Web avec Django
Créer une application Web avec Flask ①
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 4
Créer une application Web avec Flask ③
Créer une application Web avec Flask ④
Développement d'applications avec Docker + Python + Flask
Fonction de téléchargement d'image avec Vue.js + Flask
Essayez d'utiliser le framework d'application Web Flask
Vue.js + Mémorandum de construction de l'environnement Flask ~ avec Anaconda3 ~
[Python] Une application web rapide avec Bottle!
Créez une application Web simple avec Flask
Application Web facile avec Python + Flask + Heroku
Exécutez une application Web Python avec Docker
Créer un service Web avec Docker + Flask
Lancez l'application Flask avec Docker sur Heroku
J'ai fait une application WEB avec Django
Créons une application Web de conversion A vers B avec Flask! De zéro ...
Cours de production d'applications Web appris avec Flask of Python Partie 2 Chapitre 1 ~ Échange JSON ~
Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application
Lancer un serveur Web avec Python et Flask
Création d'une application Web qui mappe les informations sur les événements informatiques avec Vue et Flask