Applications Web : Plongée dans l'action

  • Créer une application web qui affiche des images et joue des sons
  • Apprendre à créer des graphiques de données en Python à l'aide de Jupyter Notebooks
  • Créer une application web de tableau de bord avec Streamlit

STREAMLIT

La création d'une application web avec Streamlit et Python est très simple. À l'instar des plateformes de codage par blocs, la plateforme Streamlit comprend de nombreux composants et widgets qui peuvent être ajoutés à votre application en une seule ligne de code. La plupart du code est déjà écrit et packagé pour vous, ce qui vous permet de vous concentrer sur les objectifs de votre application, plutôt que de vous embourber dans une multitude de codes difficiles. 

Pour nous entraîner à utiliser Streamlit, nous allons prendre l'un de nos exemples d'application mobile issus de Thunkable et App Inventor, et montrer comment la même application peut être construite sous forme d'application web à l'aide de Streamlit. 

ACTIVITÉ 1 : APPLICATION "SOUNDBOARD

Durée estimée : 30 minutes

Coder une application Web Streamlit

  1. Cliquez sur le bouton ci-dessous pour télécharger les ressources (images et fichiers sonores) nécessaires à la réalisation de l'application.
  2. Suivre un de ces vidéos pour créer une application Soundboard simple qui émet des sons lorsqu'on appuie sur un bouton.
  3. Ajoutez une quatrième personne à votre application. Trouvez une image et un court fichier sonore à ajouter à l'application. Voici un lien vers des discours célèbres.
Télécharger les fichiers d'actifs

TRAVAILLER AVEC DES DONNÉES

Le langage Python fonctionne bien avec les données. Python possède de nombreuses bibliothèques spécialement conçues pour permettre aux programmeurs de lire, manipuler et tracer des données. Associés à la plateforme Streamlit, les programmeurs peuvent facilement créer des applications qui analysent et affichent des données pour les utilisateurs. Vous pouvez également passer à l'étape suivante et intégrer des ensembles de données et des modèles d'apprentissage automatique dans une application.

graphiques de données

La plupart des programmeurs et des data scientists travaillent avec des données en Python en utilisant des logiciels appelés Notebooks. L'une des interfaces de bloc-notes les plus populaires est Jupyter Notebook. Selon les résultats de l'enquête Kaggle 2022, les Notebooks Jupyter sont l'environnement de développement interactif (IDE) le plus populaire dans le domaine de la science des données, utilisé par plus de 80 % des répondants. 

Jupyter Notebook fonctionne dans un navigateur, mais il existe d'autres interfaces. Par exemple, il peut s'intégrer directement dans Visual Studio Code. 

Le moteur derrière l'ordinateur portable qui exécute le code s'appelle un noyau. Pour Python, vous utiliserez le noyau ipython. 

Les carnets permettent d'écrire du texte ainsi que du code Python. Le texte est écrit à l'aide d'un langage langage markdownavec des commandes simples pour formater le texte. C'est un bon moyen d'ajouter des en-têtes et des explications sur le code inclus dans le carnet.

Vous pouvez également exécuter du code Python directement dans le carnet. 

Capture d'écran des cellules de code du notebook jupyter

Semblables à un cahier physique que vous pourriez utiliser à l'école, les carnets Jupyter sont un excellent moyen de prendre des notes, d'organiser vos idées dans le cadre d'un projet de données et d'explorer des informations. La fonction supplémentaire d'exécution du code vous permet d'expérimenter le code Python de manière contrôlée et organisée. 

Les carnets Jupyter vous aident à planifier et à tester les différents aspects de votre application web avant de passer à l'éditeur de code visuel pour créer l'application proprement dite.

BIBLIOTHÈQUES PYTHON

Il existe de nombreuses bibliothèques que vous devrez utiliser dans votre code pour construire votre application web. A bibliothèque est un ensemble de codes pré-écrits qui exécutent des tâches particulières. Les bibliothèques de programmation sont très puissantes et permettent à votre application de faire des choses puissantes avec seulement quelques lignes de code. 

Pour Python, la plupart des bibliothèques nécessitent que vous les installiez d'abord sur votre ordinateur, puis dans votre fichier de script Python, vous importerez les bibliothèques dont vous avez besoin. 

Les bibliothèques numpy et pandas sont des exemples de bibliothèques dont vous aurez besoin pour utiliser des données.

Pandas permet à votre application de travailler facilement avec de grandes quantités de données. Il place les données dans ce que l'on appelle un dataframe, et votre application travaille avec le dataframe. Numpy possède de nombreuses fonctions permettant d'effectuer des opérations numériques sur les données contenues dans le dataframe.

En outre, il existe de nombreuses bibliothèques de tracés et de graphiques qui permettent aux utilisateurs de visualiser les données. Les bibliothèques de visualisation les plus populaires en Python sont matplotlib, plotlyet seaborn

L'activité suivante utilisera toutes ces bibliothèques. L'activité prendra un ensemble de données provenant d'une enquête sur la musique et la santé mentale pour créer une application de tableau de bord qui affiche les données de différentes manières pour que l'utilisateur puisse interagir avec elles.

ACTIVITÉ 2 : TABLEAU DE BORD DES DONNÉES

Durée estimée : 90 minutes

Créer une application Web Streamlit

Selon que vous codiez sur votre ordinateur ou dans le nuage, suivez la série de vidéos appropriée.
  • Sur votre ordinateur :
    1. Suivez cette vidéo(Partie 1) pour installer et lancer le Notebook Jupyter. Cliquez sur le lien ci-dessous pour télécharger le fichier notebook.
    2. Suivez cette vidéo(partie 2) pour construire l'application de tableau de bord de données à l'aide de Streamlit.
  • Dans le nuage :
    1. Suivez cette vidéo(partie 1) pour exécuter le Jupyter Notebook dans Github Codespaces.
    2. Suivez cette vidéo(Partie 2) pour construire l'application de tableau de bord de données en utilisant Streamlit.io.
À vous de jouer : Ajoutez un graphique supplémentaire à votre tableau de bord. Vous pouvez choisir parmi les autres graphiques du carnet Jupyter original, ou créer un nouveau graphique dans le carnet Jupyter, puis intégrer le code à Streamlit pour l'ajouter au tableau de bord.
Télécharger le carnet de notes

RÉFLEXION

Félicitations, vous avez créé deux applications web dans Streamlit ! Posez-vous les questions suivantes :

réflexion
Avez-vous rencontré des problèmes lors de l'installation ou de l'exécution de Jupyter Notebook ou de Streamlit ?
Comment avez-vous surmonté les difficultés rencontrées ?
Comment pouvez-vous utiliser les idées de cette leçon dans votre projet ?

RÉVISION DES TERMES CLÉS

  • Jupyter Notebook - environnement de développement interactif populaire pour la science des données permettant de travailler avec des données en codant en Python
  • Noyau - un processus qui s'exécute et agit comme le moteur des blocs-notes Jupyter.
  • Langage Markdown - un langage qui permet de formater facilement un texte pour qu'il soit plus lisible
  • Bibliothèque - collection de codes pré-écrits qui exécutent des tâches particulières

RESSOURCES SUPPLÉMENTAIRES

Jupyter Notebooks

 

Éclairé par la lumière du jour