← Přehled všech hodin

Finále — dokončení hry, nasazení na internet a prezentace

Cíl hodiny: Máš hotovou hru, která běží na internetu pod vlastním odkazem, a umí o ní dvě minuty mluvit.
Jak stránku používat: vpravo nahoře je tlačítko Prezentace — schová všechno kromě jednoho bloku a přepíná se šipkami. U ukázek a cvičení je kód vlevo editovatelný: uprav ho a klikni na Spustit (nebo Ctrl+Enter), výsledek se objeví vpravo. Běží to přímo v prohlížeči, bez instalace.

1. Vysvětlení a souvislosti

Poznámky pro učiteleJak hodinu rámovat1. Vysvětlení a souvislosti

Tohle je oslava, ne výuka. Řekněte to hned na začátku:

Dneska se nebudeš učit nic nového. Dneska svoji hru dokončíš, pustíš ji na internet a ukážeš ostatním. Do konce hodiny budeš mít odkaz, který můžeš poslat komukoli na světě a on si tvoji hru zahraje.

Zároveň je to hodina, kde se rozpojí rychlí a pomalí. Mějte plán: rychlí dodělávají rozšíření, pomalí dostávají hotové kusy kódu ke zkopírování. Nikdo nesmí odejít bez běžící hry. To je hlavní cíl.

Blok 1Definice hotového1. Vysvětlení a souvislosti

Napište na tabuli. Bez tohohle si každý bude myslet, že není hotový:

Hra je hotová, když: 1. jde spustit a nespadne, 2. má začátek (výběr hrdiny), průběh (výpravy) a konec (výhra nebo prohra), 3. dá se uložit a načíst, 4. má jméno a krátký popis, 5. běží na internetu.

Cokoli dalšího je bonus.

Blok 2st.tabs — konečně přehledné UI1. Vysvětlení a souvislosti

Jediná technická novinka hodiny, protože je zadarmo a vypadá skvěle:

Tři obrazovky, jeden soubor, žádné složité přepínání. Nemusíš dělat nic chytrého — jen dáš svoje části do with.

Doplňkově se hodí:

Blok 3Vyvažování hry — skrytá matematika1. Vysvětlení a souvislosti

Tohle tě bude bavit a nenápadně tě to učí přemýšlet o číslech:

Zahraj svoji hru pětkrát. Pokaždé vyhraješ? Je moc lehká. Pokaždé prohraješ? Je moc těžká. Dobrá hra je ta, kde vyhraješ tak dvakrát ze tří pokusů.

Nástroje na doladění:

Chci Změním
Snadnější hru Víc životů hrdiny, míň síly příšer, levnější lektvary
Těžší hru Silnější příšery, dražší léčení, méně zlata za výhru
Delší hru Víc životů na obou stranách
Napínavější hru Vyšší náhoda (větší rozptyl hodů)

Použij simulaci ze cvičení 2 — je to skutečné datové rozhodování.

Blok 4Ladění cizího kódu1. Vysvětlení a souvislosti

Vyzkoušej cvičení s rozbitým souborem. Postup je:

  1. Přečti si poslední řádek chyby. Tam je napsáno co.
  2. Podívej se na číslo řádku. Tam je napsáno kde.
  3. Vypiš si proměnnou přes st.write(promenna) těsně před chybou.
  4. Změň jednu věc a spusť. Ne pět věcí najednou.
Chyba Co znamená česky
NameError Používáš něco, co neexistuje. Překlep?
TypeError Míchej čísla s texty. Chybí int() nebo str()?
KeyError Ve slovníku takový klíč není
IndexError Seznam je kratší, než si myslíš
AttributeError Objekt tuhle věc neumí. Chybí super().__init__()?
IndentationError Špatné odsazení
Poznámky pro učiteleNasazení — přesný postup1. Vysvětlení a souvislosti

Připravte se, tohle je časově nejnáročnější část. Vyzkoušejte si to předem sami.

Předpoklady (řešte před hodinou, ne na ní): - účet na GitHubu (kvůli věku doporučte školní/rodičovský e-mail, GitHub vyžaduje 13+) - účet na share.streamlit.io — přihlášení přes GitHub

Postup:

  1. Do složky projektu přidat soubor requirements.txt: streamlit
  2. Na GitHubu vytvořit veřejný repozitář, např. pyquest
  3. Nahrát soubory — pro děti je nejjednodušší tlačítko „uploading an existing file" přímo ve webovém rozhraní GitHubu. Git z příkazové řádky tady neřešte.
  4. Na share.streamlit.io kliknout New app, vybrat repozitář, hlavní soubor app.py
  5. Deploy a počkat 2–3 minuty
  6. Odkaz zkopírovat a poslat do sdíleného dokumentu

Kritické upozornění pro děti:

Aplikace na internetu si nepamatuje uložené soubory. Když se restartuje, JSON soubor je pryč. To je normální — na internetu se data ukládají do databáze, ne do souboru. Doma na počítači ukládání funguje.

Záložní plán, když nasazení selže: - lokální síť: streamlit run app.py --server.address 0.0.0.0 a sdílet IP adresu - prostě jen ukázka na projektoru - nasazení jako domácí úkol s vaší pomocí přes chat

Poznámky pro učitelePrezentace projektů1. Vysvětlení a souvislosti

Dvě minuty na dítě, pevný formát, jinak to nestihnete:

  1. Jak se tvoje hra jmenuje a o čem je? (15 s)
  2. Ukaž, jak se hraje. (45 s)
  3. Co je v ní nejlepšího a proč? (30 s)
  4. Co bylo nejtěžší naprogramovat? (30 s)

Pravidla pro publikum: po každé prezentaci jedna pochvala a jedna otázka. Nikdy kritika. Tohle nastavte hned u prvního prezentujícího a držte.

Pro ostýchavé: nechte je ukázat hru bez mluvení, vy se doptáváte.

Poznámky pro učiteleTechnické pozadí pro učitele1. Vysvětlení a souvislosti
  • Streamlit Community Cloud je zdarma, ale aplikace po ~7 dnech nečinnosti „usne" a první načtení pak trvá půl minuty. Dětem to řekněte, ať se neděsí.
  • Souborový systém na Cloudu je efemérní. Skutečné řešení by bylo st.connection + databáze, případně streamlit-gsheets. Nad rámec kurzu.
  • requirements.txt bez verzí je pro výuku v pořádku. V produkci by tam patřilo streamlit==1.50.0.
  • Alternativy nasazení: Hugging Face Spaces (taky zdarma, funguje i bez GitHubu), Render, Railway. Streamlit Cloud je nejjednodušší.
  • Kdyby GitHub kvůli věku nešel: založte jeden školní účet a nahrajte projekty jako podsložky. Není to ideální, ale funguje.
Blok 5Časté chyby při nasazení1. Vysvětlení a souvislosti
Chyba Příčina Řešení
ModuleNotFoundError na Cloudu Chybí requirements.txt Vytvořit ho v kořeni
App se nespustí Špatně zvolený hlavní soubor Musí být app.py
Chybějící modul postavy Nenahrané všechny .py Zkontrolovat repozitář
Uložená hra po čase zmizí Efemérní disk Vysvětlit, nezkoušet opravit
Rozsypaná diakritika Chybí encoding="utf-8" Doplnit u open()
Repozitář je privátní Cloud na něj nevidí Přepnout na veřejný
Blok 6Zakončení kurzu1. Vysvětlení a souvislosti

Zopakuj si, co ses za rok naučil/a:

Proměnné. Datové typy. Vstupy. Podmínky. Paměť aplikace. Seznamy. Řetězce. Slovníky. Cykly. Funkce. Náhoda. Soubory a JSON. Třídy. Dědičnost. Moduly. Nasazení.

To je celý základ programování. Ne „dětský základ" — základ, se kterým se dělají skutečné programy. Rozdíl mezi tebou a někým, kdo tohle dělá v práci, je hlavně počet hodin.

Kam dál: - Python dál: pygame na hry, pandas na data, requests na weby - jiné jazyky: JavaScript pro web, C# pro Unity, GDScript pro Godot - procvičování: umimeinformatiku.cz, Advent of Code, Codewars


2. Ukázky pro projekci

Blok 7Ukázka 1 — Záložky a hezčí vzhled2. Ukázky pro projekci
demo/demo1_zalozky.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Blok 8Ukázka 2 — Vyvažování hry pomocí simulace2. Ukázky pro projekci
demo/demo2_vyvazovani.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Blok 9Ukázka 3 — Ladění: najdi pět chyb2. Ukázky pro projekci
demo/demo3_ladeni.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

3. Cvičení na hodinu

Blok 10Cvičení 1 — Rozdělení do záložek (15 min)3. Cvičení na hodinu

Zadání:

  1. Přidej na začátek st.set_page_config s názvem a ikonou hry
  2. Vytvoř tři záložky: Výprava, Batoh, Deník
  3. Přesuň existující části hry do správných záložek
  4. Přidej čtvrtou záložku Nápověda s vysvětlením, jak se hraje
  5. V Nápovědě použij st.expander pro každou část pravidel
Úroveň Co má zvládnout
Minimum Body 1–3
Rozšíření Bod 4
Výzva Bod 5 + st.container(border=True) kolem míst
cviceni/cviceni1_zalozky.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Na co si dát pozor

Očekávaný výsledek: hra vypadá jako skutečná aplikace, ne jako dlouhý seznam.

Řešení 1 — jedna z možných variant
reseni/reseni1_zalozky.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Blok 11Cvičení 2 — Vyvážení obtížnosti (20 min)3. Cvičení na hodinu

Zadání:

  1. Napiš funkci souboj(hz, hs, pz, ps), která simuluje jeden souboj
  2. Spusť ji tisíckrát a spočítej, kolikrát hrdina vyhrál
  3. Zobraz úspěšnost v procentech
  4. Doluď čísla ve své hře tak, aby úspěšnost byla mezi 60 a 75 %
  5. Otestuj takhle všechny příšery ve svém bestiáři
Úroveň Co má zvládnout
Minimum Body 1–2
Rozšíření Body 3–4
Výzva Bod 5 + tabulka všech příšer se svou úspěšností
cviceni/cviceni2_vyvazeni.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Na co si dát pozor

Očekávaný výsledek: hra, která není ani nudná, ani frustrující.

Řešení 2 — jedna z možných variant
reseni/reseni2_vyvazeni.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Blok 12Cvičení 3 — Oprava rozbité hry (20 min)3. Cvičení na hodinu

Zadání:

  1. Spusť přiložený soubor a přečti si první chybu
  2. Oprav ji a spusť znovu
  3. Opakuj, dokud aplikace nenaběhne — je tam pět chyb
  4. Ke každé opravě napiš komentář, co bylo špatně
  5. Najdi šestou chybu, která program neshodí, ale hra kvůli ní funguje divně
Úroveň Co má zvládnout
Minimum Body 1–2
Rozšíření Bod 3
Výzva Body 4–5
cviceni/cviceni3_oprava_hry.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Na co si dát pozor

Očekávaný výsledek: běžící hra a pochopení, že chyby jsou normální.

Řešení 3 — jedna z možných variant
reseni/reseni3_oprava_hry.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Blok 13Cvičení 4 — Vlastní podpis hry (20 min)3. Cvičení na hodinu

Zadání:

  1. Vymysli hře vlastní název a ikonu, nastav je v set_page_config
  2. Přidej úvodní obrazovku s příběhem, proč hrdina vyráží
  3. Přidej vlastní příšeru, vlastní místo a vlastní předmět
  4. Přidej obrazovku vítězství, když hrdina nasbírá dost zlata
  5. Do patičky napiš „Vytvořil: tvoje jméno" a rok
Úroveň Co má zvládnout
Minimum Body 1–2
Rozšíření Body 3–4
Výzva Bod 5 + st.balloons() při vítězství a vlastní barvy
cviceni/cviceni4_podpis.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Na co si dát pozor

Očekávaný výsledek: hra, kterou nikdo jiný ve třídě nemá.

Řešení 4 — jedna z možných variant
reseni/reseni4_podpis.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Blok 14Cvičení 5 — PyQuest 1.0 a nasazení (25 min)3. Cvičení na hodinu

Zadání:

  1. Projdi kontrolní seznam „hra je hotová" a doplň, co chybí
  2. Vytvoř soubor requirements.txt s jediným řádkem streamlit
  3. Nahraj projekt na GitHub jako veřejný repozitář
  4. Na share.streamlit.io nasaď aplikaci a počkej na odkaz
  5. Odkaz vlož do sdíleného dokumentu a vyzkoušej hru někoho jiného
Úroveň Co má zvládnout
Minimum Body 1–2
Rozšíření Body 3–4
Výzva Bod 5 + napsat README.md s popisem hry
cviceni/cviceni5_pyquest_finale.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Na co si dát pozor

Očekávaný výsledek: veřejný odkaz na vlastní hru.


Řešení 5 — jedna z možných variant
reseni/reseni5_pyquest_finale.py
Tenhle kód potřebuje ukládat soubory, což v prohlížeči nejde — spusť ho na počítači příkazem streamlit run.


4. Domácí úkol

Blok 15Domácí úkol na příští hodinu4. Domácí úkol

Není. Máš hotovou hru běžící na internetu.

Jestli chceš pokračovat: přidej druhého hrdinu, kterého ovládá počítač, vlastní obrázky přes st.image, nebo žebříček nejlepších výsledků. A hlavně — ukaž hru někomu, kdo o programování nic neví. Ať vidí, co umíš.

Zobrazit ukázkové řešení domácího úkolu

Toto je jedna z možných variant, jak mohl úkol dopadnout. Tvoje řešení se může lišit a to je v pořádku.

domaci/domaci_ukol16.py
Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.
Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.
Blok 16Oficiální dokumentace4. Domácí úkol

Oficiální dokumentace se hodí, když PyQuest dokončuješ, ladíš vzhled a chystáš jeho nasazení na internet. U Streamlitu se vyplatí vracet hlavně k API referenci a k návodu pro Community Cloud.

Co jsme použili Oficiální dokumentace Co tam najdeš
st.tabs st.tabs záložky a rozdělení aplikace do více pohledů
st.set_page_config st.set_page_config nastavení názvu stránky, ikony a rozložení
st.expander st.expander schování nápovědy nebo delšího textu
Streamlit Community Cloud Community Cloud přehled účtu, nasazení a sdílení aplikace
nasazení aplikace Deploy your app krok za krokem, jak vystavit aplikaci na internet
requirements.txt a závislosti App dependencies kam dát requirements.txt a jak Cloud instaluje balíčky

5. Umíme informatiku

Cvičení Odkaz Proč se hodí
Programování v Pythonu umimeinformatiku.cz Celkové zopakování
Týmovka umimeinformatiku.cz Závěrečná soutěž třídy
Logika a řešení problémů umimeinformatiku.cz Ladění a hledání chyb
Algoritmické myšlení umimeinformatiku.cz Kam pokračovat dál