Aplicații web: Introducere

  • Creați o aplicație web care afișează imagini și redă sunete
  • Aflați cum să realizați grafice de date în Python utilizând Jupyter Notebooks
  • Creați o aplicație web pentru tabloul de bord de date cu Streamlit

STREAMLIT

Realizarea unei aplicații web cu Streamlit și Python este simplă. La fel ca platformele de codare bazate pe blocuri, platforma Streamlit include multe componente și widget-uri care pot fi adăugate la aplicația dvs. cu o singură linie de cod. Cea mai mare parte a codului este deja scrisă și împachetată pentru dvs., astfel încât să vă puteți concentra pe obiectivele aplicației dvs., mai degrabă decât să vă împotmoliți în mult cod dificil. 

Pentru a exersa utilizarea Streamlit, vom lua unul dintre exemplele noastre de aplicații mobile din Thunkable și App Inventor și vom arăta cum aceeași aplicație poate fi construită sub formă de aplicație web utilizând Streamlit. 

ACTIVITATEA 1: APLICAȚIA SOUNDBOARD

Durată estimată: 30 de minute

Codarea unei aplicații web Streamlit

  1. Faceți clic pe butonul de mai jos pentru a descărca activele (imagini și fișiere de sunet) care vor fi necesare pentru a crea aplicația.
  2. Urmați una Unul din aceste videoclipuri pentru a crea o aplicație simplă Soundboard care redă sunete atunci când este apăsat un buton.
  3. Adăugați o a patra persoană la aplicația dvs. Găsiți o imagine și un fișier audio scurt pe care să le adăugați la aplicație. Iată un link către câteva discursuri celebre.
Descărcați fișierele de active

LUCRUL CU DATELE

Limbajul Python lucrează bine cu datele. Python are multe biblioteci special create pentru a permite programatorilor să citească, să manipuleze și să traseze date. Atunci când sunt combinate cu platforma Streamlit, programatorii pot crea cu ușurință aplicații care analizează și afișează date pentru utilizatori. Și puteți face pasul următor pentru a încorpora seturi de date și modele de învățare automată într-o aplicație.

data graphs

Majoritatea programatorilor și cercetătorilor de date lucrează cu date în Python folosind un software numit Notebooks. Una dintre cele mai populare interfețe de Notebook este Jupyter Notebook. Conform rezultatelor sondajului Kaggle 2022, Jupyter Notebooks este cel mai popular mediu de dezvoltare interactivă (IDE) pentru știința datelor, utilizat de peste 80% dintre respondenți. 

Jupyter Notebook rulează într-un browser, deși există și alte interfețe. De exemplu, se poate integra direct în Visual Studio Code. 

Motorul din spatele caietului care rulează codul se numește kernel. Pentru Python, veți utiliza kernel ipython. 

Caietele vă permit să scrieți text, precum și cod Python . Textul este scris folosind un limbaj markdown, cu comenzi simple pentru a formata textul. Este o modalitate bună de a adăuga antete și explicații ale codului inclus în caiet.

De asemenea, puteți executa cod Python direct în caiet. 

jupyter notebook screenshot of code cells

Similar cu un caiet fizic pe care l-ați putea folosi la școală, Jupyter Notebooks reprezintă o modalitate excelentă de a lua notițe, de a vă organiza gândurile cu un proiect de date și de a explora informații. Funcția suplimentară de executare a codului vă permite să experimentați cu codul Python într-un mod controlat și organizat. 

Jupyter Notebooks vă ajută să planificați și să testați diferite aspecte ale aplicației dvs. web înainte de a trece la Visual Code Editor pentru a crea aplicația efectivă.

BIBLIOTECI PYTHON

Există multe biblioteci pe care va trebui să le utilizați în codul dvs. pentru a vă construi aplicația web. A bibliotecă este o colecție de coduri pre-scrise care efectuează anumite sarcini. Bibliotecile de programare sunt foarte puternice și înseamnă că aplicația dvs. poate face lucruri puternice cu doar câteva linii de cod. 

Pentru Python, majoritatea bibliotecilor necesită ca mai întâi să le instalați pe computer, apoi, în fișierul script Python , veți importa bibliotecile de care aveți nevoie. 

Un exemplu de biblioteci de care veți avea nevoie pentru utilizarea datelor sunt numpy și pandas.

Pandas permite aplicației dvs. să lucreze cu ușurință cu cantități mari de date. Pandas pune datele în ceva numit cadru de date, iar aplicația dvs. lucrează cu cadrul de date. Numpy are multe funcții pentru efectuarea de operații numerice asupra datelor din cadrul de date.

În plus, există multe biblioteci de trasare și grafică, care permit utilizatorilor să vizualizeze datele. Cele mai populare biblioteci de vizualizare în Python sunt matplotlib, plotly, și seaborn

Următoarea activitate va utiliza toate aceste biblioteci. Activitatea va lua un set de date dintr-un sondaj privind muzica și sănătatea mintală pentru a crea o aplicație de tablou de bord care să afișeze datele în diferite moduri pentru ca utilizatorul să poată interacționa cu ele.

ACTIVITATEA 2: DASHBOARD DE DATE

Timp estimat: 90 de minute

Construiți o aplicație web Streamlit

În funcție de faptul dacă codificați pe computerul dvs. sau în cloud, urmați setul de videoclipuri corespunzător.
  • Pe computerul dvs:
    1. Urmați acest videoclip(partea 1) pentru a instala și rula Jupyter Notebook. Faceți clic pe linkul de mai jos pentru a descărca fișierul notebook.
    2. Urmăriți acest videoclip(partea 2) pentru a crea aplicația tablou de bord cu date utilizând Streamlit.
  • În cloud:
    1. Urmați acest videoclip(partea 1) pentru a rula Jupyter Notebook în Github Codespaces.
    2. Urmați acest videoclip(partea 2) pentru a construi aplicația de tablou de bord cu date utilizând Streamlit.io.
E rândul tău: Adăugați încă un grafic la tabloul dvs. de bord cu date. Puteți alege din unele dintre celelalte grafice din caietul Jupyter original sau puteți crea un nou grafic în caietul Jupyter și apoi puteți integra codul în Streamlit pentru a-l adăuga în tabloul de bord.
Descarcă Notebook

REFLECȚIE

Felicitări, ați creat două aplicații web în Streamlit! Puneți-vă aceste întrebări:

reflection
Ați întâmpinat probleme la instalarea sau rularea Jupyter Notebook sau Streamlit?
Cum ați depășit problemele atunci când v-ați confruntat cu ele?
Cum puteți utiliza ideile din această lecție în proiectul dumneavoastră?

REVIZUIREA TERMENILOR CHEIE

  • Jupyter Notebook - mediu popular de dezvoltare interactivă în domeniul științei datelor pentru a lucra cu date prin codare Python
  • Kernel - un proces care rulează și acționează ca motor în spatele Jupyter Notebooks
  • Limbajul Markdown - un limbaj care vă permite să formatați textul cu ușurință, astfel încât acesta să fie mai ușor de citit
  • Bibliotecă - colecție de coduri pre-scrise care efectuează anumite sarcini

RESURSE SUPLIMENTARE

Notebook-uri Jupyter

 

Streamlit