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.

** On suppose que vous pouvez accéder et naviguer sur votre smartphone, mais vous pouvez également le voir sur votre PC ** En d'autres termes, il s'agit d'un design réactif axé sur le mobile.
** Aucune authentification de l'utilisateur dans l'application Web ** Tout le monde peut l'utiliser simplement en accédant à l'URL. Au lieu de cela, il ne conserve pas les données utilisateur dans le service (aucun serveur de base de données utilisé).
** Recherchez ce dont vous avez besoin et affichez-le sur le site en réponse à la saisie du mot clé de l'utilisateur ** Cependant, la recherche n'est pas effectuée sur la base de données mais sur celle codée en dur en HTML ou JS, ou sur l'API Web publiée pour la recherche de données, et les données de résultat sont acquises et affichées (serveur de base de données). Non utilisé).
** Construction de page dynamique côté client (navigateur) ** En utilisant JavaScript, l'utilisateur crée et affiche dynamiquement le html pour afficher les données acquises (sans utiliser le serveur AP).

Technologie d'élément Web à utiliser

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

HTML
CSS【Bootstrap】 Cliquez ici pour accéder à la page officielle (Bootstrap - La bibliothèque de composants frontaux les plus populaires au monde). Bootstrap facilite la création de designs bien organisés et réactifs.
JavaScript【Vue.js】 Cliquez ici pour la page officielle (Vue.js). Avec Vue.js, vous pouvez décrire assez intuitivement comment JavaScript exploite le html du côté client (navigateur) (lorsque les données sur JavaScript sont mises à jour par un mécanisme appelé liaison de données, le html est également mis à jour en même temps).
Python【Flask】 Cliquez ici pour accéder à la page officielle ([Bienvenue dans Flask - Documentation Flask v0.5.1](ttps: //a2c.bitbucket.io/flask/)). Avec Flask, vous pouvez écrire une API Web avec une description simple à l'aide de la syntaxe Python, donc si vous ne disposez pas d'une API Web qui expose les données nécessaires, vous pouvez la créer vous-même à l'aide de Flask. Cette fois, j'ai créé une API qui renvoie une liste de titres de travail basée sur des mots-clés.

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.

** Sakura Internet (le plan léger de serveur de location est disponible cette fois) ** Cliquez ici pour la page officielle (Serveur de location Sakura | WordPress haute vitesse et stable! Essai gratuit de 2 semaines). Un service d'hébergement Web qui vous permet de placer et de publier du HTML, du CSS, du JavaScript, etc. En outre, il existe également un service optionnel pour acquérir un domaine unique et définir un certificat SSL. Différents paramètres peuvent être utilisés avec l'interface Web de base, ce qui permet aux débutants de démarrer facilement. Après la période d'essai gratuite, des frais mensuels fixes s'appliquent. D'autres hébergements SaaS similaires sont Firebase Hosting (Official Page) et AWS ([Official Page](https: // aws) .amazon.com / jp / sites Web /)) etc. Ce sont des paiements à l'utilisation et il y a des emplacements gratuits, de sorte que le coût initial peut être supprimé.
Google App Engine Cliquez ici pour un aperçu du service (App Engine | Google Cloud). Il peut être utilisé pour déployer et publier l'API Web décrite dans Flask ci-dessus. Il évolue automatiquement en fonction de l'accès et de la charge, et la charge est payante.

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).

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