Tutoriel : Bien démarrer avec le framework web Flask dans Visual Studio

Flask est un framework Python léger pour les applications web, qui fournit les éléments de base pour le routage d’URL et le rendu de page.

Flask est appelée une « micro-infrastructure », car elle ne fournit pas directement des fonctionnalités comme validation de formulaire, l’abstraction des bases de données, l’authentification, etc. Au lieu de cela, ces fonctionnalités sont fournies par des packages Python spéciaux, appelés des extensions Flask. Les extensions s’intègrent de façon fluide à Flask, elles s’affichent donc comme si elles en faisaient partie. Par exemple, Flask ne fournit pas lui-même un moteur de modèle de page. La création de modèles est fournie par des extensions comme Jinja et Jade, comme illustré dans ce tutoriel.

Dans ce tutoriel, vous allez apprendre à :

• Créer un projet Flask de base dans un référentiel Git en utilisant le modèle « Projet web Flask vide » (étape 1).
• Créer une application Flask d’une page et l’afficher en utilisant un modèle (étape 2).
• Servir des fichiers statiques, ajouter des pages et utiliser l’héritage du modèle (étape 3).
• Utiliser le modèle Projet web Flask pour créer une application comprenant plusieurs pages et une conception réactive (étape 4).

Au cours de ces étapes, vous créez une solution Visual Studio unique qui contient deux projets distincts. Vous créez le projet en utilisant différents modèles de projet Flask qui sont inclus dans Visual Studio. Conserver les projets dans la même solution vous pouvez permet de basculer facilement entre différents fichiers pour effectuer des comparaisons.

Prerequisites

Les modèles de projet Flask sont inclus dans toutes les versions antérieures de Python Tools pour Visual Studio. Toutefois, si des détails peuvent varier par rapport à ce tutoriel.

Le développement Python n’est pas pris en charge dans Visual Studio pour Mac actuellement. Sur Mac et Linux, utilisez le tutoriel Extension Python dans Visual Studio Code.

Étape 1-1 : créer un projet et une solution Visual Studio

Étape 1-2 : examiner les contrôles Git et publiez sur un référentiel distant

Question : Quels sont les avantages de l’utilisation du contrôle de code source dès le début d’un projet ?

Réponse : le contrôle de code source utilisé dès le début, en particulier si vous utilisez également un référentiel distant, assure une sauvegarde hors site régulière de votre projet. Contrairement au maintien d’un projet uniquement sur un système de fichiers local, le contrôle de code source fournit également un historique complet des modifications et permet de revenir facilement à un état précédent d’un seul fichier ou de tout le projet. L’historique des modifications aide à déterminer la cause des régressions (échecs de test). Le contrôle de code source est essentiel si plusieurs personnes travaillent sur un projet, car il gère les remplacements et permet la résolution des conflits. Le contrôle de code source est essentiellement une forme d’automatisation. Il vous prépare à l’automatisation des builds, des tests et de la gestion des mises en production. Il s’agit de la première étape de l’utilisation de DevOps pour un projet. Étant donné qu’il y a peu d’obstacles, il n’existe vraiment aucune raison de ne pas utiliser le contrôle de code source dès le début.

Pour poursuivre la discussion sur le contrôle de code source comme méthode d’automatisation, consultez Pour obtenir des informations supplémentaires sur le contrôle de code source en tant qu’automation, consultez La Source de vérité : le rôle des référentiels dans DevOps, un article de MSDN Magazine écrit pour les applications mobiles qui s’applique également aux applications web.

Question : Puis-je empêcher Visual Studio de valider automatiquement un nouveau projet ?

Réponse : Oui. Pour désactiver la validation automatique, accédez à la page Paramètres dans Team Explorer, sélectionnez Git>Paramètres globaux, désactivez l’option intitulée Valider les modifications après une fusion par défaut, puis sélectionnez Mise à jour.

Étape 1-3 : créer l’environnement virtuel et l’exclure du contrôle de code source

Maintenant que vous avez configuré le contrôle de code source pour votre projet, vous pouvez créer l’environnement virtuel avec les packages Flask nécessaires pour le projet. Vous pouvez ensuite utiliser Team Explorer pour exclure le dossier de l’environnement du contrôle de code source.

Question : Pourquoi créer un environnement virtuel ?

Réponse : Un environnement virtuel est un excellent moyen d’isoler les dépendances exactes de votre application. Cette isolation évite les conflits dans un environnement Python global et facilite les tests et la collaboration. Au fil du temps, quand vous développez une application, vous introduisez invariablement de nombreux packages Python très utiles. En conservant les packages dans un environnement virtuel spécifique au projet, vous pouvez facilement mettre à jour le fichier requirements.txt du projet qui décrit cet environnement, ce qui est inclus dans le contrôle de code source. Quand le projet est copié vers d’autres ordinateurs, dont des serveurs de builds, des serveurs de déploiement et d’autres ordinateurs de développement, il est facile de recréer l’environnement uniquement avec requirements.txt (c’est la raison pour laquelle l’environnement n’a pas besoin d’être dans le contrôle de code source). Pour plus d’informations, consultez Utiliser des environnements virtuels.

Question : Comment supprimer un environnement virtuel déjà validé par le contrôle de code source ?

Réponse : tout d’abord, modifiez votre fichier .gitignore pour exclure le dossier : recherchez la section à la fin avec le commentaire # Python Tools for Visual Studio (PTVS) et ajoutez une nouvelle ligne pour le dossier d’environnement virtuel, par exemple /BasicProject/env. (Étant donné que Visual Studio n’affiche pas le fichier dans l’Explorateur de solutions, ouvrez-le directement avec la commande de menu Fichier>Ouvrir> Fichier. Vous pouvez également ouvrir le fichier à partir de Team Explorer : dans la page Paramètres, sélectionnez Paramètres du dépôt, accédez à la sectionIgnorer et fichiers d’attributs, puis sélectionnez le lien Modifier situé en regard de .gitignore.)

Ensuite, ouvrez une fenêtre Commande, accédez au dossier, par exemple BasicProject, qui contient le dossier d’environnement virtuel, par exemple env, et exécutez git rm -r env. Validez ensuite ces modifications depuis la ligne de commande (git commit -m 'Remove venv'), ou depuis la page Modifications de Team Explorer.

Étape 1-4 : examiner le code réutilisable

1. Une fois la création du projet terminée, vous voyez la solution et le projet dans l’Explorateur de solutions, où le projet contient seulement deux fichiers, app.py et requirements.txt :

   

2. Comme indiqué précédemment, le fichier requirements.txt spécifie la dépendance du package Flask. C’est ce fichier qui vous invite à créer un environnement virtuel lors de la création du projet.

3. Le fichier requirements.txt contient trois parties. Il y a d’abord une instruction import pour Flask, la création d’une instance de la classe Flask, qui est affectée à la variable app, puis l’affectation d’une variable wsgi_app (utile lors du déploiement sur un hôte web, mais non utilisée actuellement) :

   from flask import Flask
   app = Flask(__name__)
   
   # Make the WSGI interface available at the top level so wfastcgi can get it.
   wsgi_app = app.wsgi_app
   

4. La deuxième partie, à la fin du fichier, est du code facultatif qui démarre le serveur de développement Flask avec des valeurs d’hôte et de port spécifiques provenant de variables d’environnement (les valeurs par défaut sont : localhost:5555) :

   if __name__ == '__main__':
       import os
       HOST = os.environ.get('SERVER_HOST', 'localhost')
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
       app.run(HOST, PORT)
   

5. La troisième partie est constituée de code qui affecte une fonction à une route d’URL, ce qui signifie que la fonction fournit la ressource identifiée par l’URL. Vous définissez des routes avec le décorateur @app.route de Flask, dont l’argument est l’URL relative à partir de la racine du site. Comme vous pouvez le voir dans le code, la fonction retourne ici une chaîne de texte, ce qui est suffisant pour être rendu dans un navigateur. Dans les étapes qui suivent, vous affichez des pages plus riches avec du code HTML.

   @app.route('/')
   def hello():
       """Renders a sample page."""
       return "Hello World!"
   

Question : À quoi sert l’argument name de la classe Flask ?

Réponse : L’argument est le nom du module ou du package de l’application, et il indique à Flask où rechercher les modèles, les fichiers statiques et d’autres ressources qui appartiennent à l’application. Pour les applications contenues dans un seul module, __name__ est toujours la valeur appropriée. Il est également important pour les extensions qui ont besoin d’informations de débogage. Pour plus d’informations et des arguments supplémentaires, consultez la documentation sur la classe Flask (flask.pocoo.org).

Question : Une fonction peut-elle avoir plusieurs décorateurs de routes ?

Réponse : Oui, vous pouvez utiliser autant de décorateurs que vous le souhaitez si la même fonction sert plusieurs routes. Par exemple, pour utiliser la fonction hello à la fois pour « / » et pour « /hello », utilisez le code suivant :

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

Question : Comment Flask fonctionne-t-il avec les routes d’URL et les paramètres de requête des variables ?

Réponse : dans un itinéraire, vous marquez toutes les variables avec <variable_name>, et Flask transmet la variable à la fonction en utilisant un argument nommé dans le chemin d’URL. Par exemple, un itinéraire au format /hello/<name> génère un argument de chaîne appelé name à la fonction. Les paramètres de requête sont disponibles via la propriété request.args, plus précisément via la méthoderequest.args.get.

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

Pour changer the type, préfixez la variable avec int, float, path (qui accepte des barres obliques pour délimiter les noms de dossier) et uuid. Pour plus d’informations, consultez Règles des variables dans la documentation de Flask.

Question : Est-ce que Visual Studio peut générer un fichier requirements.txt à partir d’un environnement virtuel après l’installation d’autres packages ?

Réponse : Oui. Développez le nœud Environnements Python, cliquez avec le bouton droit sur votre environnement virtuel, puis sélectionnez la commande Générer requirements.txt. Il est bon d’utiliser régulièrement cette commande quand vous modifiez l’environnement, et d’envoyer les modifications à requirements.txt pour le contrôle de code source ainsi que d’autres modifications de code qui dépendent de cet environnement. Si vous configurez l’intégration continue sur un serveur de builds, vous devez générer le fichier et valider les modifications chaque fois que vous modifiez l’environnement.

Étape 1-5 : Exécuter le projet

1. Dans Visual Studio, sélectionnez Déboguer>Démarrer le débogage (F5) ou utilisez le bouton Serveur web dans la barre d’outils (le navigateur affiché peut varier) :

   

2. Les deux commandes affectent un numéro de port aléatoire à la variable d’environnement PORT, puis exécute python app.py. Le code démarre l’application en utilisant ce port dans le serveur de développement de Flask. Si Visual Studio indique Impossible de démarrer le débogueur avec un message informant de l’absence d’un fichier de démarrage, cliquez avec le bouton droit sur app.py dans l’Explorateur de solutions et sélectionnez Définir comme fichier de démarrage.

3. Quand le serveur démarre, une fenêtre de console s’ouvre et affiche le journal du serveur. Visual Studio ouvre alors automatiquement un navigateur sur http://localhost:<port>, où vous devez normalement voir le message rendu par la fonction hello :

   

4. Lorsque vous avez terminé, arrêtez le serveur en fermant la fenêtre de console, ou à l’aide de la commande Déboguer>Arrêter le débogage dans Visual Studio.

Question : Quelle est la différence entre les commandes de menu Déboguer et les commandes de serveur dans le sous-menu Python du projet ?

Réponse : en plus des commandes de menu Déboguer et des boutons de barre d’outils, vous pouvez également lancer le serveur avec les commandes Python>Exécuter le serveur ou Python>Exécuter le serveur de débogage dans le menu contextuel du projet. Les deux commandes ouvrent une fenêtre de console dans laquelle vous voyez l’URL locale (localhost:port) du serveur en cours d’exécution. Toutefois, vous devez ouvrir manuellement un navigateur avec cette URL. L’exécution du serveur de débogage ne démarre pas automatiquement le débogueur Visual Studio. Vous pourrez attacher un débogueur au processus en cours d’exécution plus tard si vous le souhaitez, avec la commande Déboguer>Attacher au processus.

Étapes suivantes

À ce stade, le projet Flask de base contient le code de démarrage et le code de page dans le même fichier. Il est préférable de séparer ces deux problèmes, et également de séparer le code HTML et les données en utilisant des modèles.