›_ ebskola.lv
← 9.2 9.4 →

9.3 Python pārvēršana tīmekļa saskarnē

Stundas uzdevums: Pārveidot terminālī darbojošos Python skriptu par tīmekļa lietotni ar Streamlit bibliotēku.

SR 2.4.7. Lietotāja saskarne (UI) SR 2.4.11. Standartizētas bibliotēkas

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un tikai beigās pieraksti vienu secinājumu. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

Teorija: Streamlit - Python kā web saskarne

Streamlit ir Python ietvars, kas pārvērš parastu Python kodu par interaktīvu web lietotni - bez HTML/CSS/JS rakstīšanas.

import streamlit as st

# Virsraksti
st.title("Mans projekts")
st.header("Apakšsadaļa")
st.write("Vienkāršs teksts")
st.markdown("**Treknrakstā** un *kursīvā*")

# Ievades elementi
vards = st.text_input("Tavs vārds:")
vecums = st.number_input("Vecums", min_value=1, max_value=120, value=18)
ir_skoleens = st.checkbox("Es piedalos")
limenis = st.slider("Grūtība", 1, 10, 5)

if st.button("Sākt"):
    st.success(f"Sveiks, {vards}! ({vecums} g.)")

# Datu attēlošana
import pandas as pd
df = pd.DataFrame({"Vārds": ["Anna", "Jānis"], "Punkti": [120, 95]})
st.dataframe(df)
st.bar_chart(df.set_index("Vārds"))

Palaiž ar streamlit run app.py. Lapa pati pārlādējas, kad maini kodu!

Praktiskie uzdevumi

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 9.3 Python pārvēršana tīmekļa saskarnē; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

import streamlit as st

# Virsraksti
st.title("Mans projekts")
st.header("Apakšsadaļa")
st.write("Vienkāršs teksts")
st.markdown("**Treknrakstā** un *kursīvā*")

# Ievades elementi
vards = st.text_input("Tavs vārds:")
vecums = st.number_input("Vecums", min_value=1, max_value=120, value=18)
ir_skoleens = st.checkbox("Es piedalos")
limenis = st.slider("Grūtība", 1, 10, 5)

if st.button("Sākt"):
    st.success(f"Sveiks, {vards}! ({vecums} g.)")

# Datu attēlošana
import pandas as pd
df = pd.DataFrame({"Vārds": ["Anna", "Jānis"], "Punkti": [120, 95]})
st.dataframe(df)
st.bar_chart(df.set_index("Vārds"))
  1. Atver darba failu vai rīku. Python fragmentu ievieto main.py failā un palaid no termināļa.
  2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
  3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
  4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
  5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
  6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
  7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, strādājošu projekta daļu.

  1. Izvēlies vienu vietu projektā: datu apstrādi, skatu, formu, API maršrutu, validāciju vai rezultāta izvadi.
  2. Nosauc funkcijas, mainīgos un failus pēc to lomas, piemēram, apstrada_gajienu(), rezultats vai routes.py.
  3. Uzraksti funkciju vai maršrutu, kas nolasa datus, apstrādā tos un atgriež rezultātu.
  4. Savieno šo kodu ar HTML formu, pogu, saiti, API pieprasījumu vai redzamu izvades vietu.
  5. Pievieno vienu īsu komentāru pie sarežģītākās apstrādes vietas.
  6. Pārbaudi, ka esošā projekta daļa joprojām darbojas.
  7. Salabo pirmo atrasto kļūdu pirms paplašini risinājumu.
  8. Veic Git commit ar īsu ziņu par pievienoto funkcionalitāti.

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami ar dažādiem datiem.

  1. Izveido trīs testa scenārijus: parastu ievadi, robežgadījumu un kļūdainu vai tukšu ievadi.
  2. Palaid parasto scenāriju un pārbaudi rezultātu pārlūkā, terminālī vai API atbildē.
  3. Palaid robežgadījumu ar mazāko, lielāko vai tukšāko vērtību, ko šis kods var saņemt.
  4. Palaid kļūdaino scenāriju un pārbaudi, vai lietotājs saņem saprotamu atbildi.
  5. Izlabo vienu konkrētu problēmu Python kodā, HTML sasaistē vai datu validācijā.
  6. Pārbaudi labojumu vēlreiz ar visiem trim scenārijiem.
  7. Beigās pieraksti vienu secinājumu: kura koda daļa vislabāk palīdzēja saprast tēmu 9.3 Python pārvēršana tīmekļa saskarnē.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

  1. Izvēlies vienu mazu papildinājumu, kas izmanto to pašu šīs stundas paņēmienu.
  2. Pievieno vienu jaunu ievades lauku, API atbildi, validāciju, datu elementu vai redzamu rezultātu.
  3. Savieno papildinājumu ar esošo projektu.
  4. Pārbaudi, ka pamatfunkcija un papildinājums darbojas kopā.
  5. Saglabā izmaiņas ar Git commit tikai pēc veiksmīgas pārbaudes.

Biežākās kļūdas

Koda piemērs

import streamlit as st
import random

st.title("▸ Skaitļu minētājs")

if "skaitlis" not in st.session_state:
    st.session_state.skaitlis = random.randint(1, 100)
    st.session_state.megi = 0

minejums = st.number_input("Min skaitli (1-100):", 1, 100, 50)

if st.button("Min!"):
    st.session_state.megi += 1
    if minejums == st.session_state.skaitlis:
        st.success(f"★ Trāpīts {st.session_state.megi}. mēģinājumā!")
    elif minejums < st.session_state.skaitlis:
        st.info("↑ Patiesais ir lielāks")
    else:
        st.info("↓ Patiesais ir mazāks")

if st.button("Jauna spēle"):
    del st.session_state.skaitlis
    st.rerun()
Web saskarne ar pogu un ievades lauku;
Pēc 'Min' tiek parādīts mājiens;
Pēc trāpījuma - uzvaras paziņojums.
⬅ Iepriekšējā stunda Nākamā stunda ➡