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.

Notes

Ce tutoriel diffère de Flask - Démarrage rapide en cela que vous en apprenez plus sur Flask et que vous découvrez comment utiliser les différents modèles de projet Flask qui constituent un point de départ plus avancé pour vos propres projets. Par exemple, les modèles de projet installent automatiquement le package Flask lors de la création d’un projet, ce qui vous évite de devoir l’installer manuellement, comme expliqué dans le guide de démarrage rapide.

Prerequisites

• Visual Studio 2022 sur Windows avec les options suivantes :
  • La charge de travail Développement Python (onglet Charge de travail dans le programme d’installation). Pour obtenir des instructions, consultez Installer la prise en charge de Python dans Visual Studio.
  • Git pour Windows dans l’onglet Composants individuels sous Outils de code.

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

1. Dans Visual Studio, sélectionnez Fichier>Nouveau>Projet et recherchez « Flask ». Sélectionnez ensuite le modèle Projet web Flask vide et sélectionnez Suivant.

   

2. Configurez votre nouveau projet en entrant les informations suivantes, puis sélectionnez Créer :

   • Nom : définissez le nom du projet Visual Studio sur BasicProject. Ce nom est également utilisé pour le projet Flask.
   • Emplacement : spécifiez un emplacement où créer la solution et le projet Visual Studio.
   • Nom de la solution : défini sur LearningFlask, qui convient pour la solution en tant que conteneur pour plusieurs projets de ce tutoriel.

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

À cette étape, vous vous familiarisez avec les contrôles Git de Visual Studio et la fenêtre Team Explorer dans laquelle vous travaillez avec le contrôle de code source.

1. Pour valider le projet dans votre contrôle de code source local, sélectionnez la commande Ajouter au contrôle de code source dans le coin inférieur de la fenêtre principale de Visual Studio et sélectionnez l’option Git. Cette action vous permet d’accéder à la fenêtre Créer un référentiel Git, où vous pouvez créer et envoyer (push) un nouveau référentiel.

   

2. Après avoir créé un référentiel, un ensemble de nouveaux contrôles Git s’affiche en bas. De gauche à droite, ces contrôles montrent les validations qui n’ont pas été envoyées (pushed), les modifications non validées, la branche actuelle et le nom du référentiel :

   

3. Sélectionnez le bouton Modifications Git et Visual Studio ouvre sa fenêtre Team Explorer à la page Modifications. Étant donné que le projet nouvellement créé est déjà automatiquement validé dans le contrôle de code source, vous ne voyez pas de modifications en attente.

   

4. Dans la barre d’état de Visual Studio, sélectionnez le bouton des validations n’ayant pas fait l’objet d’un Push (flèche haut avec 2) pour ouvrir la page Synchronisation dans Team Explorer. Étant donné que vous avez uniquement un référentiel local, la page fournit des options simples pour publier le référentiel sur les différents référentiels à distance.

   

   Vous pouvez sélectionner le service de votre choix pour vos propres projets. Ce tutoriel montre comment utiliser GitHub. L’exemple de code terminé est conservé dans le dépôt Microsoft/python-sample-vs-learning-django.

5. Lors de la sélection d’un des contrôles Publication, Team Explorer vous invite à obtenir plus d’informations. Lors de la publication de l’exemple de ce tutoriel, le référentiel lui-même doit être créé en premier. Dans ce cas, l’option Envoyer (push) vers le référentiel distant a été utilisée avec l’URL du référentiel.

   

   Si vous n’avez pas de dépôt existant, les options Publier sur GitHub et Envoyer (push) sur Azure DevOps vous permettent d’en créer un directement dans Visual Studio.

6. Au cours de ce tutoriel, prenez l’habitude d’utiliser périodiquement les contrôles dans Visual Studio pour valider et envoyer des modifications. Ce tutoriel vous le rappelle de manière appropriée.

Conseil

Pour naviguer rapidement dans Team Explorer, sélectionnez l’en-tête (qui s’appelle Modifications ou Push dans les images ci-dessus) pour afficher un menu contextuel des pages disponibles.

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.

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud Environnements Python et sélectionnez Ajouter un environnement.

   

2. Sélectionnez Créer pour accepter les valeurs par défaut dans la boîte de dialogue Ajouter un environnement virtuel. (Vous pouvez modifier le nom de l’environnement virtuel si vous le souhaitez, ce qui modifie uniquement le nom du sous-dossier, mais env est une convention standard.)

   

3. Consentez aux privilèges d’administrateur si vous y êtes invité, puis patientez quelques minutes pendant que Visual Studio télécharge et installe les packages. Pendant ce temps, des milliers de fichiers sont transférés vers autant de sous-dossiers. Vous pouvez consulter la progression dans la fenêtre Sortie de Visual Studio. Pendant que vous patientez, réfléchissez aux sections de questions ci-dessous.

4. Sur les contrôles Git de Visual Studio (dans la barre d’état), sélectionnez l’indicateur de modifications (qui indique 99*), ce qui ouvre la page Modifications dans Team Explorer.

   La création de l’environnement virtuel a entraîné des milliers de modifications, mais il n’est pas nécessaire de les inclure dans le contrôle de code source, car vous (ou toute autre personne clonant le projet) pouvez toujours recréer l’environnement à partir de requirements.txt.

   Pour exclure l’environnement virtuel, cliquez avec le bouton droit sur le dossier env et sélectionnez Ignorer ces éléments locaux.

   

5. Après l’exclusion de l’environnement virtuel, les seules modifications restantes sont dans le fichier projet et dans .gitignore. Le fichier .gitignore contient une entrée ajoutée pour le dossier de l’environnement virtuel. Vous pouvez double-cliquer sur le fichier pour voir la différence.

6. Entrez un message de validation et sélectionnez le bouton Valider tout, puis envoyez (push) les validations à votre référentiel distant.

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.

Créer une application Flask avec des vues et des modèles de pages