# Créer une application web avec Streamlit > Page d'accueil de la compétence: [[Publier ses résultats]] >[!tip] Tags > #Streamlit #DataApp #WebApp #Python #Deployment #DataVisualization > [!note] Fil directeur > Dans ce deuxième cours, nous allons transformer un simple script Python en une application web interactive grâce à Streamlit. L'objectif est de construire une application simple qui affiche des données et des graphiques, puis de la déployer en ligne via GitHub pour que tout le monde puisse la voir. >[!example] Contenu de ce cours > - Installer et lancer une application Streamlit. > - Maîtriser les commandes de base pour afficher du texte, des données et des graphiques. > - Ajouter de l'interactivité avec les widgets (boutons, sliders). > - Déployer l'application sur le Streamlit Community Cloud. # Qu'est-ce que Streamlit ? Streamlit est une bibliothèque Python open-source qui permet de créer et de partager des applications web pour la data science en quelques minutes. > [!definition] Streamlit > Streamlit transforme des scripts Python en applications web interactives. Le principe est simple : chaque fois que vous modifiez votre code ou qu'un utilisateur interagit avec un widget, le script est ré-exécuté de haut en bas et l'interface est mise à jour. **Pourquoi Streamlit est génial pour les data scientists ?** - **Simple :** C'est juste du Python. Pas de HTML, CSS ou JavaScript à apprendre. - **Rapide :** On obtient un résultat visible en quelques lignes de code. - **Interactif :** Intégrez facilement des widgets (boutons, sliders, listes déroulantes) pour que les utilisateurs puissent explorer les données. # Démarrage Rapide # Installation Ouvrez votre terminal (avec votre environnement virtuel activé) et installez Streamlit : ```bash pip install streamlit pandas matplotlib ``` Nous installons `pandas` et `matplotlib` car ils sont presque toujours utilisés avec Streamlit. # Votre Première Application 1. Dans votre dossier de projet Git, créez un fichier nommé `app.py`. 2. Ouvrez-le et écrivez ce code : ```python import streamlit as st st.title("Mon Application Ultra Basique") st.write("Bonjour le monde, ceci est ma première application Streamlit !") ``` # Lancer l'Application Dans votre terminal, à la racine de votre projet, lancez cette commande : ```bash streamlit run app.py ``` Votre navigateur web va s'ouvrir sur une nouvelle page affichant votre titre et votre texte. Magique ! > [!tip] Le rechargement automatique > Gardez la page de l'application ouverte. Chaque fois que vous sauvegarderez une modification dans `app.py`, la page se mettra à jour automatiquement ! # Les Commandes Essentielles de Streamlit Toutes les commandes Streamlit commencent par `st.`. ## Afficher du Texte - `st.title("Titre principal")` - `st.header("En-tête de section")` - `st.subheader("Sous-en-tête")` - `st.write("Texte simple, peut aussi afficher des dataframes, des dictionnaires...")` - `st.markdown("Affiche du texte en **Markdown**, pour mettre du *gras* ou des listes.")` ## Afficher des Données Streamlit s'intègre parfaitement avec Pandas. ```python import pandas as pd import streamlit as st # Créer un exemple de DataFrame df = pd.DataFrame({ 'colonne 1': [1, 2, 3, 4], 'colonne 2': [10, 20, 30, 40] }) st.header("Affichage de Données") st.write("Voici un DataFrame :") st.dataframe(df) # Affiche une table interactive ``` ## Afficher des Graphiques Streamlit est compatible avec les principales bibliothèques de visualisation. ```python import matplotlib.pyplot as plt import numpy as np import streamlit as st st.header("Affichage de Graphiques") # Créer des données x = np.linspace(0, 10, 100) y = np.sin(x) # Créer une figure Matplotlib fig, ax = plt.subplots() ax.plot(x, y) st.pyplot(fig) # Affiche la figure dans l'app ``` ## Ajouter de l'Interactivité avec les Widgets Les widgets sont des éléments (boutons, sliders...) qui permettent à l'utilisateur d'interagir avec l'application. La valeur du widget est retournée dans une variable Python. ```python import streamlit as st st.header("Widgets Interactifs") # Un slider age = st.slider("Quel est votre âge ?", 0, 100, 25) st.write("Votre âge est :", age) # Une liste de sélection option = st.selectbox( 'Quelle est votre couleur préférée ?', ('Bleu', 'Rouge', 'Vert')) st.write('Votre couleur préférée est :', option) # Un bouton if st.button('Cliquez ici !'): st.write('Vous avez cliqué ! Bravo !') ``` # Projet Final : Notre Application de Visualisation Construisons une application simple qui charge un jeu de données, l'affiche et permet de visualiser une de ses colonnes. **Structure du projet :** ``` ma-premiere-app-streamlit/ ├── .gitignore ├── app.py ├── data/ │ └── penguins.csv (téléchargez un petit CSV, ex: le dataset Palmer Penguins) ├── README.md └── requirements.txt ``` **Contenu de `app.py` :** ```python import streamlit as st import pandas as pd import matplotlib.pyplot as plt # --- CONFIGURATION DE LA PAGE --- st.set_page_config(page_title="Analyse des Pingouins", layout="wide") # --- TITRE DE L'APPLICATION --- st.title("🐧 Application d'Analyse des Pingouins") st.markdown("Cette application permet d'explorer le jeu de données Palmer Penguins.") # --- CHARGEMENT DES DONNÉES --- # Utiliser un cache pour ne pas recharger les données à chaque interaction @st.cache_data def load_data(): data = pd.read_csv('data/penguins.csv') return data df = load_data() # --- CORPS DE L'APPLICATION --- st.header("Aperçu des Données") st.write("Voici les 5 premières lignes du jeu de données :") st.dataframe(df.head()) st.header("Visualisation des Données") # Créer une liste de sélection pour les colonnes numériques numeric_columns = df.select_dtypes(['float64', 'int64']).columns selected_col = st.selectbox("Sélectionnez une colonne pour voir sa distribution :", numeric_columns) # Créer l'histogramme st.subheader(f"Histogramme pour la colonne : {selected_col}") fig, ax = plt.subplots() ax.hist(df[selected_col].dropna(), bins=20, edgecolor='black') ax.set_title(f"Distribution de {selected_col}") ax.set_xlabel(selected_col) ax.set_ylabel("Fréquence") st.pyplot(fig) ``` # Déploiement sur le Cloud Maintenant, partageons notre chef-d'œuvre avec le monde ! **Étape 1 : Préparer le dépôt GitHub** 1. Assurez-vous que votre fichier `requirements.txt` est à jour. Il doit contenir au minimum : ``` streamlit pandas matplotlib ``` 2. Assurez-vous que tous vos fichiers (`app.py`, `requirements.txt`, le dossier `data/` avec le CSV) sont sur GitHub. Utilisez le workflow que nous avons appris : ```bash git add . git commit -m "Finalisation de l'application Streamlit" git push ``` **Étape 2 : Déployer avec Streamlit Community Cloud** 1. Rendez-vous sur [share.streamlit.io](https://share.streamlit.io). 2. Connectez-vous avec votre compte GitHub. 3. Cliquez sur "New app". 4. Sélectionnez votre dépôt (`ma-premiere-app-streamlit`). 5. La branche doit être `main` ou `master`. 6. Le fichier principal est `app.py`. 7. Cliquez sur "Deploy!". Attendez quelques instants... et voilà ! Votre application est en ligne, accessible via une URL publique que vous pouvez partager. # ➡️ C'est la fin ! - Cours précèdent: [[Cours 1 - Publier ses résultats]] - Prochain cours: [[Exercices - Publier ses résultats]] - Page d'accueil de la compétence: [[Publier ses résultats]] # 🗓️ Historique - Dernière MAJ: `20-Octobre-2025` - Rédigé par: [[Hamilton DE ARAUJO]]