ebSkola

9. tēma / 9.5

9.5 Interaktivitāte pārlūkprogrammā

Stundas uzdevums: Pievienot interaktivitāti, izmantojot session_state, callback-us un dinamisku satura atjauninājumu.

SR 2.4.7. Lietotāja saskarne SR 2.4.14. Vadības struktūras

70 min plāns: Teorija un paraugs (~10 min) · 1. uzdevums (~15 min) - saglabā skaitītāju ar session_state · 2. uzdevums (~25 min) - uzbūvē To-Do sarakstu ar formu · 3. uzdevums (~20 min) - pievieno dzēšanu un notīrīšanu. Papildu uzdevumu sāc tikai tad, ja pārējie trīs ir gatavi.

Pirms sāc: atver Streamlit projektu. Šajā stundā galvenais jēdziens ir st.session_state - bez tā lapa aizmirst visu pie katras pārlādes.

Teorija: session_state un interaktivitāte

st.session_state ir Streamlit galvenā funkcija interaktivitātei - datu glabāšana starp pārlādēm.

import streamlit as st

# Inicializācija (tikai pirmoreiz)
if "klikski" not in st.session_state:
    st.session_state.klikski = 0
if "saraksts" not in st.session_state:
    st.session_state.saraksts = []

# Atjaunināšana
if st.button("Klikšķini mani"):
    st.session_state.klikski += 1

st.write(f"Klikšķi: {st.session_state.klikski}")

# Forma - apkopo visus inputus pirms iesniegšanas
with st.form("speletajs"):
    vards = st.text_input("Vārds")
    punkti = st.number_input("Punkti")
    iesniegt = st.form_submit_button("Pievienot")

if iesniegt:
    st.session_state.saraksts.append({"vards": vards, "punkti": punkti})

st.dataframe(st.session_state.saraksts)

Praktiskie uzdevumi

1. uzdevums -

Saglabā skaitītāju ar session_state

Beigās tu redzēsi, kāpēc parasts mainīgais Streamlit lapā nestrādā.

  1. Ieraksti klikski = 0 un pogu, kas to palielina.
  2. Izdrukā vērtību un nospied pogu vairākas reizes.
  3. Pieraksti, kāpēc skaitlis nepieaug.
  4. Nomaini uz if "klikski" not in st.session_state: ar sākuma vērtību 0.
  5. Palielini pogas iekšpusē st.session_state.klikski += 1.
  6. Nospied pogu piecas reizes un pārbaudi skaitli.

Gatavs, kad: ar parastu mainīgo skaitlis vienmēr paliek 1, bet ar session_state tas sasniedz 5.

2. uzdevums -

Uzbūvē To-Do sarakstu ar formu

Beigās tavs saraksts saglabāsies starp klikšķiem.

  1. Izveido if "todo" not in st.session_state: ar tukšu sarakstu.
  2. Pievieno with st.form("forma", clear_on_submit=True):.
  3. Ieliec formā st.text_input("Jauns uzdevums").
  4. Ieliec formā st.form_submit_button("+ Pievienot").
  5. Pievieno ievadīto tekstu sarakstam, ja poga nospiesta un lauks nav tukšs.
  6. Izdrukā visu sarakstu ar ciklu.
  7. Pievieno trīs uzdevumus un pārbaudi, ka visi paliek redzami.

Gatavs, kad: pēc trim pievienošanām sarakstā ir trīs ieraksti, un ievades lauks katru reizi iztukšojas.

3. uzdevums -

Pievieno dzēšanu un notīrīšanu

Beigās lietotājs varēs arī izņemt uzdevumus, ne tikai pievienot.

  1. Pievieno katram uzdevumam pogu ar unikālu key parametru.
  2. Izdzēs attiecīgo elementu no saraksta, kad poga nospiesta.
  3. Palaid un izdzēs vidējo uzdevumu.
  4. Pārbaudi, vai pārējie palika savās vietās.
  5. Pievieno pogu Notīrīt visu, kas iztukšo sarakstu.
  6. Nospied to un pārbaudi, ka lapa neavarē ar tukšu sarakstu.
  7. Pieraksti vienu secinājumu: kāpēc katrai pogai vajag savu key.

Gatavs, kad: vidējā uzdevuma dzēšana neizjauc pārējos, un tukšs saraksts nerada kļūdu.

Papildu uzdevums - Pievieno atzīmi par izpildi

Ja pamatdarbs ir gatavs, ļauj atzīmēt uzdevumus kā pabeigtus.

  1. Nomaini saraksta elementus uz vārdnīcām ar atslēgām teksts un gatavs.
  2. Pievieno katram st.checkbox() ar unikālu key.
  3. Atjaunini vārdnīcas vērtību pēc atzīmēšanas.
  4. Izdrukā atsevišķi, cik uzdevumi pabeigti no kopējā skaita.
  5. Pārbaudi, ka atzīme saglabājas pēc lapas pārlādes.

Gatavs, kad: lapa rāda, piemēram, 2 no 3 pabeigti, un atzīmes nepazūd.

Biežākās kļūdas

  • session_state inicializācija katru reizi: Vienmēr if "x" not in st.session_state:.
  • Aizmirsts unique key: Vairākām pogām vienā lapā key="unik".
  • Mainās stāvokli ārpus formas: Forma apvieno visus ievades - bez tās katrs ievads pārlādē lapu.

Koda piemērs

import streamlit as st

st.title("▸ Mans To-Do")

if "todo" not in st.session_state:
    st.session_state.todo = []

with st.form("forma", clear_on_submit=True):
    jauns = st.text_input("Jauns uzdevums")
    ok = st.form_submit_button("+ Pievienot")

if ok and jauns:
    st.session_state.todo.append({"teksts": jauns, "izpildīts": False})

for i, t in enumerate(st.session_state.todo):
    col1, col2 = st.columns([10, 1])
    with col1:
        st.session_state.todo[i]["izpildīts"] = st.checkbox(
            t["teksts"], value=t["izpildīts"], key=f"cb{i}"
        )
    with col2:
        if st.button("✕", key=f"d{i}"):
            st.session_state.todo.pop(i)
            st.rerun()
Pievieno uzdevumus → atzīmē kā izpildītus → dzēš ar ✕.
Saraksts saglabājas starp lapas pārlādēm.