• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    10 boss de jeux vidéo les plus hilarants involontairement

    10 boss de jeux vidéo les plus hilarants involontairement

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Analysis of dog breed diversity using a composite selection index

    Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

    Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

  • Astuces
    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Microsoft dévoile le nouveau plugin IndexNow pour les sites WordPress

    Comment créer un site Web WordPress

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Developpement web Language HTML5

Créez et déployez votre premier tableau de bord en temps réel avec Streamlit

Caleb by Caleb
mai 18, 2022
in Language HTML5
0
0
Créez et déployez votre premier tableau de bord en temps réel avec Streamlit
361
SHARES
2.1k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


UN tableau de bord est une sorte d’interface utilisateur graphique qui permet souvent un accès rapide aux indicateurs de performance clés (KPI) liés à un certain objectif ou à une activité commerciale. Dans d’autres contextes, « tableau de bord » fait référence à un « rapport d’avancement » ou « aide à résumer les progrès » et est un type d’affichage de données. Les tableaux de bord peuvent aider les chefs d’entreprise à gagner du temps et à prendre de meilleures décisions en donnant cette vue d’ensemble. Dans cet article, nous allons créer et déployer des tableaux de bord en python à l’aide de Streamlit.

Table des matières

  1. À propos de Streamlit
  2. Création d’un tableau de bord
  3. Déploiement d’un tableau de bord

Commençons par une brève introduction à Streamlit.

À propos de Streamlit

Streamlit est un framework gratuit, open source et entièrement Python qui permet aux data scientists de créer facilement des tableaux de bord interactifs et des applications Web d’apprentissage automatique sans aucune connaissance préalable du développement Web frontal. Si vous connaissez Python, vous pourrez utiliser Streamlit pour développer et distribuer des applications Web en quelques heures, et non en quelques semaines. Streamlit est un ensemble d’outils gratuits pour créer des tableaux de bord innovants.

Avantages

  • Tous ceux qui comprennent Python peuvent utiliser Streamlit. Il n’y a aucune exigence HTML ou CSS.
  • Il a un ensemble diversifié de composants d’interface utilisateur. Il comprend pratiquement tous les composants d’interface utilisateur standard, tels qu’une case à cocher, un curseur, une barre latérale pliable, des boutons radio, le téléchargement de fichiers, une barre de progression, etc. De plus, ces composants sont assez simples à utiliser.
  • Il prend en charge une variété de bibliothèques de visualisation interactives, y compris Latex, OpenCVVega-Lite et autres.

Désavantages

  • Bien qu’il ne soit pas difficile, l’apprentissage de la syntaxe de Streamlit prend un certain temps.
  • Streamlit n’est pas très adaptable. Il est exclusivement basé sur Python, possède un nombre restreint de widgets et ne se connecte pas aux Notebooks Python.
  • La taille maximale de téléchargement des données est de 50 Mo.
  • Il y a juste un support vidéo/animation limité.

Êtes-vous à la recherche d’un référentiel complet de bibliothèques Python utilisées en science des données, vérifier ici.

Création d’un tableau de bord

Commençons par installer le Streamlit.

! pip install streamlit -q

Importez certaines bibliothèques nécessaires pour la lecture, la manipulation et la visualisation des données

import pandas as pd
import numpy as np
import warnings 
warnings.filterwarnings('ignore')
import plotly.express as px

Lecture des données et prétraitement pour la visualisation

df =pd.read_csv("Real-Time_Traffic_Incident_Reports.csv")
df[:8]

Les données sont liées au crime, elles contiennent donc les identifiants des rapports, l’heure et la date à laquelle le crime s’est produit et la catégorisation du crime. Nettoyons les données et extrayons la date et l’année des données pour la visualisation.

df_utils=df.dropna(axis=0)
df_utils.reset_index(drop=True,inplace=True)
 
a=df_utils['Published Date'].str.split(" ")
b=[]
for i in range(0,len(a)):
 c=a[i][0]
 b.append(c)
 
d=df_utils['Status Date'].str.split(" ")
e=[]
for i in range(0,len(a)):
 f=d[i][0]
 e.append(f)
 
g=df_utils['pub_date'].str.split('/')
h=[]
for i in range(0,len(a)):
 f=g[i][2]
 h.append(f)
 
df_utils['pub_date']=b
df_utils['stat_date']=e
df_utils['pub_year']=h
 
df_utils[:5]

Les données sont prêtes à être utilisées pour la partie visualisation. Avant cela, créons un python pour l’application Web. Ce fichier d’application Web sera utilisé par streamlit pour héberger le tableau de bord sur le serveur local. Cet article est basé sur le bloc-notes Google Colab Python, il serait donc différent du noyau d’exécution local.

%%writefile app.py

Cette ligne de code créera un fichier python nommé ‘app’ et ‘%%writefile’ écrasera toutes les versions précédentes de app.py avec la nouvelle. Nous l’utilisons pour gagner du temps et de l’énergie en n’éditant pas un par un. Le code ci-dessus serait tel qu’il est, il suffit de le copier-coller et d’échapper à tous les codes d’impression. Ainsi, le code ressemblera à ceci.

%%writefile app.py
import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px
 
df = pd.read_csv("/content/drive/MyDrive/Datasets/Real-Time_Traffic_Incident_Reports.csv")
df_utils=df.dropna(axis=0)
df_utils.reset_index(drop=True,inplace=True)
a=df_utils['Published Date'].str.split(" ")
# for publish date
b=[]
for i in range(0,len(a)):
 c=a[i][0]
 b.append(c)
#for status date
d=df_utils['Status Date'].str.split(" ")
e=[]
for i in range(0,len(a)):
 f=d[i][0]
 e.append(f)
df_utils['pub_date']=b
df_utils['stat_date']=e
g=df_utils['pub_date'].str.split('/')
h=[]
for i in range(0,len(a)):
 f=g[i][2]
 h.append(f)
df_utils['pub_year']=h

Le fichier d’application est maintenant mis à jour avec des données prétraitées. Écrivons du code pour le frontal du tableau de bord.

st.header("Real-Time Dashboard")
chart_selector = st.sidebar.selectbox("Select the type of chart", ['Pie chart','Bar chart'])
col1, col2 = st.columns(2)

Si vous connaissez les balises et les éléments HTML, il vous serait beaucoup plus facile de comprendre le code streamlit. La balise créera un en-tête pour la page dans cet article, il s’agit de “Tableau de bord en temps réel”. De même, le composant de la barre latérale créera un menu déroulant et l’utilisateur pourra choisir parmi les options.

Le composant de colonne divisera l’écran de sortie en autant de colonnes que l’on définit. Ici, nous n’avons utilisé que deux colonnes. Il existe tout un tas de composants HTML et CSS qui pourraient être utilisés pour modifier le tableau de bord.

Ainsi, selon l’option sélectionnée dans le menu déroulant, nous devons afficher les graphiques en conséquence. Créons des graphiques et mettons à jour le fichier d’application.

if chart_selector=='Pie chart':
  pie_chart = px.pie(df_utils, values="pub_year", names="Issue Reported")
  col1.plotly_chart(pie_chart,use_container_width = True)
else:
  bar_chart = px.histogram(df_utils, x="Issue Reported", color="pub_year")
  col2.plotly_chart(bar_chart,use_container_width = True)

Déploiement d’un tableau de bord

Le fichier d’application est prêt à être déployé sur le serveur local. Comme dans cet article, google, colab notebook est utilisé, donc les choses seront différentes de l’hébergement d’exécution local. Généralement pour l’hébergement sur colab ‘Ngrok’ est utilisé ce qui est un peu complexe mais il existe une solution plus simple ‘tunnel local’. Dans cet article, le ‘tunnel local’ sera utilisé pour héberger l’application.

! streamlit run app.py & npx localtunnel --port 8501

Cela téléchargera le tunnel local et créera un lien Web pour l’application streamlit. A chaque exécution de ce code, il générera un nouveau lien.

Une fois l’URL générée, cliquez dessus et elle redirigera vers une page d’avertissement qui avertit du phishing, car on peut dupliquer n’importe quelle application Web et héberger cette application. La page ressemblera à ceci.

Cliquez simplement sur le bouton “Cliquez pour continuer” et l’application Web streamlit sera chargée. Parfois, cela prend du temps en fonction de la taille des données, de la connexion Internet, etc. Voici un exemple de l’apparence du tableau de bord ci-dessus.

Derniers mots

Streamlit est simple à utiliser et donne de bons résultats, même s’il n’est destiné qu’aux programmes de base. Les applications multi-pages avec des mises en page compliquées ne sont pas vraiment destinées à cela, ce qui est compréhensible. Avec cet article, nous avons compris comment concevoir un tableau de bord et le déployer sur un serveur à l’aide de Streamlit.

Références

— to analyticsindiamag.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5603 shares
    Share 2241 Tweet 1401
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1702 shares
    Share 681 Tweet 426
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    513 shares
    Share 205 Tweet 128
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    711 shares
    Share 284 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Découvrez comment ces fantastiques portraits ont été réalisés avec une seule lumière

Découvrez comment ces fantastiques portraits ont été réalisés avec une seule lumière

février 6, 2023
Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

février 5, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.