Créons une application Web de conversion A vers B avec Flask! De zéro ...

En premier

Un article qui a eu du mal à comprendre Flask. Je serais très heureux si vous pouviez commenter si vous aviez des conseils tels que le fait que ce n'est pas bien ici et que vous devriez l'interpréter comme ceci. Voici le produit fini. https://neutrino-converter.herokuapp.com/ OK, commençons.

Aperçu

--Créez une application Web basée sur ** qui convertit ** des chaînes de caractères sous la forme de A en B ――Lorsque vous travaillez avec NEUTRINO, il est difficile de mettre des espaces dans les caractères, utilisez-le donc pour éliminer les problèmes.

127.0.0.1_5000_.png

Partie 1 "Préparer le flacon"

Le langage que j'utilise est Python car je ne peux que l'utiliser. J'utilise un module appelé Flask, mais c'est en fait ma première expérience. Expliquons étape par étape à partir de 1.

Installer le flacon avec pip

J'ai utilisé pipenv pour ce développement, mais cet article sera expliqué avec pip. Exécutez la commande suivante pour installer Flask.

pip install Flask

Préparez le répertoire

--Créez des dossiers ʻapp, models dans le répertoire project. --__init __. pydans le dossiermodels --Créez des dossierstemplates, static dans le dossier ʻapp. --Créez ʻapp.py dans le dossier ʻapp. --Créez run.py dans le répertoire project.

Je pense que c'est ce que vous remarquez.

project
 ├app/
 │ ├templates/
 │ ├static/
 │ └app.py
 ├models/
 │ └__init__.py
 └run.py

Préparer du HTML

Préparez ʻindex.html dans le dossier ʻapp / templates. Le contenu est comme ça. C'est la devise de la page de sortie **. ** **

index.html


<!DOCTYPE html>
<html>
    <head>
        <title>Conversion de caractères Musescore pour verser</title>
    </head>
    <body>
        <h1>Voici l'index.C'est du HTML!</h1>
    </body>
</html>

Préparez un fichier Python

Je vais assembler le contenu du ~ .py que j'ai créé plus tôt.

run.py

Exécuté au démarrage du serveur. Appelez simplement l'application et exécutez-la.

run.py


from app.app import app

if __name__ == "__main__":
    app.run()

app.py

Il s'agit de la partie de base de l'application Web. Affichons "Hello World" pour le moment.

app.py


from flask import Flask, render_template, request

#Créer un objet Flask
app = Flask(__name__)

@app.route('/')
def index():
    #Affichez simplement la chaîne
    return 'hello world.'


# 〜/En cas d'accès à l'index, index.Dessiner html
@app.route('/index')
def post():
    return render_template('index.html')

J'expliquerai le contenu plus tard. Vous êtes maintenant prêt à partir.

Partie 2 "Faisons-le pour le moment"

La configuration minimale est terminée. Commençons une fois le serveur avec cette configuration. La façon de le démarrer est d'exécuter ** run.py dans un environnement où ** flask peut être exécuté.

python run.py

Lorsque vous l'exécutez, différents caractères apparaîtront dans le terminal, mais c'est le point à surveiller.

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Lorsque vous ouvrez l'URL affichée, vous devriez voir un écran comme celui-ci.

スクリーンショット 2020-11-03 2.04.56.png

Comparons cet écran avec le code Python.

app.py


@app.route('/')
def index():
    return 'Hello World'

La signification de ce code est la suivante. --Lorsque vous accédez à /, c'est-à-dire http: //127.0.0.1: 5000 /, la fonction est appelée.

L'avez-vous compris d'une manière ou d'une autre?

Vous avez certainement également entré un tel code.

app.py


# 〜/En cas d'accès à l'index, index.Dessiner html
@app.route('/index')
def post():
    return render_template('index.html')

La signification de ce code est la suivante. --Lorsque vous accédez à / index, c'est-à-dire http: //127.0.0.1: 5000 / index, la fonction est appelée.

C'est comme ça. Je pense que j'ai compris comment cela fonctionne. D'une certaine manière, ça va, parce que je ne connais pas la signification détaillée ...

Partie 3 "Créons une page"

la revue

Cette page est ce que je veux faire cette fois.

127.0.0.1_5000_.png

Construisons les éléments nécessaires pour cette page.

Construire index.html

Le html que je touchais plus tôt était un html normal, mais à partir de là, j'écrirai un html légèrement différent.

index.html


<!DOCTYPE html>
<html>
<head>
    <title>Conversion de caractères Musescore pour verser</title>
</head>
<body>
    <!-- form -->
    <form action="/" method="POST">
        <textarea name="before" rows="4" cols="40">Mettez le texte ici</textarea>
        <input type="submit" value="conversion">
        {% if body %}
        <textarea name="after" rows="4">{{body}}</textarea>
        {% else %}
        <textarea name="after" rows="4">Si vous appuyez sur le bouton, il sera affiché ici</textarea>
        {% endif %}
    </form>
    <!-- form -->
</body>
</html>

Certains personnages ne sont pas familiers, alors expliquons-les étape par étape.

--html entre {% if A%} et {% endif%} ne sera pas affiché à moins que la condition A ne soit remplie.

Je ne sais pas comment écrire ceci, mais si vous connaissez les applications Web, veuillez expliquer ... --Lorsque l'élément body est reçu du côté Flask, il est inséré dans {{body}}.

On a l'impression que vous y êtes habitué si vous avez été mordu par la programmation. Maintenant, prêtons attention aux points suivants.

Lorsque l'élément body est reçu du côté Flask, il est inséré dans {{body}}.

À quoi cela ressemble-t-il? Voici ʻapp.py qui transmet en fait le corps de l'élément du côté Flask.

app.py


@app.route('/', methods=['post'])
def post():
    body = 'hoge'
    return render_template('index.html', body=body)

C'est une histoire simple, préparez simplement body comme argument de la valeur de retour. Au contraire, lorsque vous passez un élément du «côté html» au «côté Flask», cela devient comme ça.

index.html


<form action="/" method="POST">
    <textarea name="before" rows="4" cols="40">Mettez le texte ici</textarea>
    <input type="submit" value="conversion">
</form>

app.py


body = request.form['before']

--Créez un formulaire POST et spécifiez la page où l'action se produira lorsque vous exécuterez ce formulaire avec ʻaction. --Définissez textarea sur nom =" avant ". --Définissez type =" submit " sur ʻinput. --Si vous appuyez sur le bouton dans cet état, la page sera affichée sous la forme ** Obtention de l'élément spécifié sur le côté Flask à partir de html **.

En d'autres termes

C'est スクリーンショット 2020-11-03 2.35.53.png

Ce sera comme ça スクリーンショット 2020-11-03 2.36.48.png

... Oh, la procédure est ignorée. Suivons les étapes rapides.

Partie 4 "Création d'un mécanisme de conversion de chaînes de caractères"

C'est vrai, la façon dont j'ai converti la chaîne est ignorée.

Mettez vos propres modules dans le dossier des modèles

Si vous souhaitez utiliser vos propres modules avec Flask, rassemblez-les dans le dossier models. Le contenu du dossier doit ressembler à ceci.

models/
 ├__init__.py
 └convert.py

En mettant «__init __. Py», vous pouvez importer des modèles.

Référence: Résumé de l'importation de fichiers en Python 3 \ -Qiita

Jouons maintenant avec convert.py.

Convertir une chaîne avec une expression régulière

Cette fois, je vais attaquer avec des expressions régulières. Je voulais les rassembler dans une fonction, mais honnêtement, cela ne semblait pas économiser le nombre de lignes, alors je les ai assemblées.

Quand j'explique la procédure, cela ressemble à ceci.

Je pense qu'il existe une manière plus intelligente de le faire, mais faites-le moi savoir.

convert.py


import re

def convert(arg: str):
    pattern_before = r'(.)'
    pattern_after = r'\1 '
    s = arg
    s = re.sub(pattern_before, pattern_after, s)

    pattern_before = r'\s(Ya|Shu|Yo|Ah|je|U|Eh|Mm|Turbocompresseur|Yu|Yo|UNE|je|U|E|Oh)'
    pattern_after = r'\1'
    s = re.sub(pattern_before, pattern_after, s)

    pattern_before = r'\s{2,}'
    pattern_after = r' '
    s = re.sub(pattern_before, pattern_after, s)

    return s

Appelez convert.py avec app.py

Appelons maintenant convert.py depuis ʻapp.py` et utilisons-le.

app.py


from models import convert

@app.route('/', methods=['post'])
def post():
    body = request.form['before']
    body = convert.convert(body)
    return render_template('index.html', body=body)

C'est comme ça.

En d'autres termes, c'est finalement

C'est スクリーンショット 2020-11-03 2.35.53.png

Sera comme ça スクリーンショット 2020-11-03 2.36.48.png

J'ai pu l'expliquer correctement.

Partie 5 "Une fois la fonction terminée, la prochaine apparition"

Il a l'air un peu moche, alors utilisez bootstrap pour ajuster l'apparence.

Il y a un dossier appelé «static» dans le dossier «app». CSS, JS, etc. sont placés ici. Cette fois, nous n'utiliserons que du CSS, donc nous ne préparerons pas de dossier JS.

app/
 └static/
   └css
     └bootstrap.min.css

Allons-y avec la configuration. Parce que vous jouez avec bootstrap ... ʻindex.html`, n'est-ce pas?

index.html


<!DOCTYPE html>
<html>

<head>
    <title>Conversion de caractères Musescore pour verser</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
    <div class="jumbotron text-center">
        <h1 class="display-4">Lyrics -> Musescore</h1>
        <p class="lead">for NEUTRINO</p>
        <hr class="my-4">
        <p>C'est un gars qui ajoute automatiquement un espace aux paroles à verser lors de la préparation de Musescore pour NEUTRINO.</p>
        <p>Aiue Okyakyukyo → Aiue Okyakyukyo</p>
    </div>

    <!-- form -->
    <form action="/" method="POST">
        <div class="container-fluid">
            <div class="row justify-content-around form-group">
                <textarea class="col-11 col-md-4 form-control" name="before" rows="4" cols="40">Mettez le texte ici</textarea>
                <div class="col-md-1 my-md-auto">
                    <input type="submit" class="btn btn-primary btn-lg" value="conversion">
                </div>
                {% if body %}
                <textarea class="col-11 col-md-4 form-control" name="after" rows="4">{{body}}</textarea>
                {% else %}
                <textarea class="col-11 col-md-4 form-control" name="after" rows="4">Si vous appuyez sur le bouton, il sera affiché ici</textarea>
                {% endif %}
            </div>
        </div>
    </form>o

    <!-- form -->
    <footer class="text-muted ">
        <div class="container">
            <p class="text-center">
Contactez nous ici:<a href="https://twitter.com/_Sotono">@_Sotono</a>
            </p>
        </div>
    </footer>


</body>

</html>

Maintenant, ça ressemble à ça.

127.0.0.1_5000_.png

C'était un long voyage ... Après cela, vous pouvez le gérer librement en le publiant, en le faisant bouillir ou en le cuisant.

Édition supplémentaire "Endroit bouché et solution"

--Q. J'exécute ʻapp.py dans le test, mais il dit Aucun module nommé app` "et cela ne fonctionne pas ...

――Q. Je crache une longue erreur que je ne comprends pas ... jinja2.exceptions.TemplateNotFound est écrit à la fin ... --A. ʻIndex.html et ʻapp.py peuvent ne pas bien se mailler, vérifions le code correctement. Appelez-vous un élément qui n'existe pas?

en conclusion

C'est devenu une longue phrase. J'ai fait ça cette fois parce que quand je composais comme passe-temps, je me suis dit "Amendokuse !!!". Je pense que NEUTRINO est une technologie incroyable, donc j'attends avec impatience les développements futurs. fin.

Recommended Posts

Créons une application Web de conversion A vers B avec Flask! De zéro ...
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 1
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 2
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 3
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 4
Créez un framework Web avec Python! (1)
Créez un framework Web avec Python! (2)
Je souhaite créer une application Web en utilisant React et Python flask
WEB grattage avec python et essayez de créer un nuage de mots à partir des critiques
J'ai essayé de créer une application OCR avec PySimpleGUI
Développement d'applications Web avec Flask
Les débutants essaient de créer une application Web de combat en ligne Othello avec Django + React + Bootstrap (1)
Application Web avec Python + Flask ② ③
[Mémo d'apprentissage] Comment créer une application avec Django ~ De l'environnement virtuel au push vers github ~
Application Web avec Python + Flask ④
Comment déployer une application Web créée avec Flask sur Heroku
Comment créer un BOT Cisco Webex Teams à l'aide de Flask
Comment convertir un tableau en dictionnaire avec Python [Application]
Créer une application Web avec Flask ②
Faisons une interface graphique avec python.
Faisons une rupture de bloc avec wxPython
Créer une application Web avec Django
Créer une application Web avec Flask ①
Faisons un graphe avec python! !!
Faisons un spacon avec xCAT
Créer une application Web avec Flask ③
Créer une application Web avec Flask ④
Créer une application Web de type Flask / Bottle sur AWS Lambda avec Chalice
Re: La vie d'Heroku à partir de zéro avec Flask ~ PhantomJS à Heroku ~
Essayez d'extraire une chaîne de caractères d'une image avec Python3
Essayez de créer un type de service Web avec un langage de balisage 3D
J'ai essayé de créer une application de notification de publication à 2 canaux avec Python
J'ai essayé de créer une application todo en utilisant une bouteille avec python
Faisons une discussion WEB en utilisant WebSocket avec AWS sans serveur (Python)!
Faisons un jeu de shiritori avec Python
Comment créer un bot LINE à intelligence artificielle avec l'API de messagerie Flask + LINE
Les débutants en Python ont décidé de créer un bot LINE avec Flask (commentaire approximatif de Flask)
Créez un simulateur de gacha rare avec Flask
J'ai trouvé un moyen de créer un modèle 3D à partir d'une photo.
Faisons la voix lentement avec Python
Faisons un langage simple avec PLY 1
[Python] Une application web rapide avec Bottle!
Créez une application Web simple avec Flask
[GCP] Procédure de création d'une application Web avec Cloud Functions (Python + Flask)
[Streamlit] Je déteste JavaScript, donc je crée une application Web uniquement avec Python
J'ai créé une API Web
Exécutez une application Web Python avec Docker
Créer un service Web avec Docker + Flask
Faisons une IA à trois yeux avec Pylearn 2
Faisons un bot Twitter avec Python!
Comment créer une application à partir du cloud à l'aide du framework Web Django
J'ai fait une application WEB avec Django
Implémentez une application simple avec Python full scratch sans utiliser de framework web.
(Remarque) Une application Web qui utilise TensorFlow pour déduire les noms de morceaux recommandés [Créer un environnement d'exécution avec docker-compose]
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 3] ~ Implémentation de la faiblesse nerveuse ~
J'ai fait une application d'envoi de courrier simple avec tkinter de Python
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 6] ~ Authentification utilisateur 2 ~
J'ai essayé d'extraire le dessin au trait de l'image avec Deep Learning