CORE013 / Barbora Bühnová1
Přednáška 4
Algoritmické myšlení
CORE013 / Barbora Bühnová2
4. Algoritmické myšlení
̶ Algoritmické myšlení
̶ Programování jako koncept
̶ Jak vypadá práce programátora
̶ Programování prakticky
Domácí práce a příprava na tuto přednášku
̶ Proklikejte si portál iMyšlení
̶ Proklikejte si portál CS Unplugged
CORE013 / Barbora Bühnová3
ALGORITMICKÉ MYŠLENÍ
CORE013 / Barbora Bühnová4
Algoritmické myšlení
̶ Algoritmické (informatické) myšlení nám umožňuje
̶ vzít složitý problém,
̶ pochopit, v čem je jeho podstata, a
̶ vyvinout možná řešení.
̶ Tato řešení pak můžeme představit způsobem,
̶ kterému porozumí počítač, člověk nebo obojí.
̶ Programování říká počítači, co má dělat a jak to má dělat.
̶ Algoritmické myšlení vám umožní zjistit, co přesně chcete počítači říct.
CORE013 / Barbora Bühnová5
Pilíře algoritmického myšlení
̶ Rozklad (dekompozice)
̶ rozdělení složitého problému nebo systému na menší, lépe zvládnutelné části
̶ Rozpoznávání vzorů
̶ hledání podobností mezi problémy a v rámci každého z nich
̶ Abstrakce
̶ zaměřit se pouze na důležité informace, ignorovat nepodstatné detaily
̶ Algoritmy
̶ vývoj podrobného řešení problému nebo pravidla, která je třeba při řešení problému dodržovat
CORE013 / Barbora Bühnová6
Algoritmy
̶ Algoritmus je plán, sada podrobných
pokynů k vyřešení problému.
̶ Algoritmus musí být jasný.
Musí mít počáteční bod, konečný bod
a sadu jasných pokynů mezi nimi.
̶ Počítače jsou jen tak dobré, jak dobré
jsou algoritmy na pozadí.
https://www.bbc.co.uk/bitesize/guides/zpp49j6/revision/3
CORE013 / Barbora Bühnová7
Algoritmy v každodenním životě
̶ Vaření podle receptu
̶ Manuál na sestavení nábytku
̶ Vyhledávání pojmu ve slovníku
̶ Sčítání pod sebou
̶ Skládání puzzle
̶ Zavazování tkaniček
https://www.bbc.co.uk/bitesize/guides/zpp49j6/revision/1
CORE013 / Barbora Bühnová8
Řadící algoritmy
CORE013 / Barbora Bühnová9
Bubble Sort
̶ Vezmeme první prvek a
vyměňujeme jej za každý
následující prvek, dokud
jsou ve špatném pořadí.
Až “probublá” na svou
pozici, opakujeme postup
s dalším prvkem.
CORE013 / Barbora Bühnová10
Bubble Sort
818560 comparisons
CORE013 / Barbora Bühnová11
Insertion Sort
̶ Seřadíme první dva prvky,
poté bereme každý další
prvek a vkládáme jej na
správnou pozici v
seřazené části seznamu.
CORE013 / Barbora Bühnová12
Insertion Sort
CORE013 / Barbora Bühnová13
Quick Sort
̶ Vybereme náhodný prvek,
zbylé rozdělíme, jestli
patří nalevo nebo napravo
od něj. Toto opakujeme
nkrát, dokud nerozdělíme
seznam na malé podčásti,
které doseřadíme např.
insertion sortem.
CORE013 / Barbora Bühnová14
Quick Sort
1280 comparisons
=
CORE013 / Barbora Bühnová15
PROGRAMOVÁNÍ
CORE013 / Barbora Bühnová16
Základní pojmy
̶ Algoritmus
̶ série instrukcí vedoucí ke splnění určitého úkolu
̶ Program
̶ spustitelný software, který běží přímo v OS počítače
̶ Programovací jazyk
̶ sada příkazů, znaků a klíčových slov, má vlastní syntax
̶ Syntax
̶ pravidla jak psát a strukturovat kód v konkrétním programovacím jazyce
CORE013 / Barbora Bühnová17
Základní pojmy
̶ Zdrojový kód
̶ kód napsaný v nějakém programovacím jazyce
̶ Byte code
̶ mezistupeň mezi zdrojovým a strojovým kódem, jedná se o kód čitelný virtuálním strojem
̶ Strojový kód
̶ série instrukcí určená přímo pro procesor
̶ Překladač (kompilátor)
̶ software, který překládá zdrojový kód do strojového
Zdrojový kód, byte code, strojový kód
CORE013 / Barbora Bühnová19
Co musí umět počítač / programovací jazyk?
̶ Počítat
̶ procesor, grafická karta
̶ sekvence, podmínky, cykly
̶ Pamatovat si
̶ hard disk, RAM
̶ proměnné
̶ Komunikovat
̶ klávesnice, myš, síťová karta
̶ input a output
̶ Znovuvyužívat
̶ funkce, objekty, knihovny, moduly
CORE013 / Barbora Bühnová20
Základní prvky programovacích jazyků
̶ Proměnné
̶ Místa, kam můžeme ukládat data a výsledky v průběhu běhu programu
̶ Funkce
̶ Pojmenované skupiny příkazů, které můžeme používat opakovaně i v jiných částech kódu
̶ Datové typy
̶ Druhy hodnot používané v daném jazyce, definují jejich význam a operátory a funkce, které na
ně můžeme použít. Každý typ má svůj obor hodnot.
̶ Knihovny, moduly
̶ Sada již definovaných funkcí, které můžeme použít ve svém kódu.
CORE013 / Barbora Bühnová21
Proměnné
̶ Název proměnné
̶ Uložená hodnota
̶ Datový typ
CORE013 / Barbora Bühnová22
Proměnné
int x
5
datový
typ
jméno
proměnné
hodnota proměnné
0101
int cislo = 5;
int cislo;
cislo = 5;
CORE013 / Barbora Bühnová23
Základní datové typy
̶ Integer
̶ Celé číslo, např. 19
̶ Float (floating-point number)
̶ Číslo s plovoucí řádovou čárkou - znázorňuje reálná čísla, např. 3.14
̶ String
̶ Řetězec - znázorňuje posloupnost znaků (slovo, text, …), např. “Hello, World!”
̶ Boolean
̶ Pravdivostní hodnota, může nabývat pouze hodnot true a false
̶ Array
̶ Pole - struktura, která znázorňuje posloupnost hodnot, např. [1, 4, 19, 3, 800]
CORE013 / Barbora Bühnová24
Podmínky
̶ Příkaz if umožňuje větvení programu.
̶ V případě, že je splněna podmínka, spustí
se blok kódu v if struktuře. Pokud
splněna není, tento blok se přeskočí.
̶ if (is_raining):
print(“I’ll stay
home.”)
else:
print(“Let’s go
out!”)
podmínka
if
větev
else
větev
true false
CORE013 / Barbora Bühnová25
Cykly
̶ umožňují nám opakovat blok kódu
̶ while
̶ opakuje se dokud je splňena vstupní podmínka
̶ for
̶ opakuje se pro každou položku v sekvenci
podmínka
tělo while
cyklu
false true
CORE013 / Barbora Bühnová26
Compiler Explorer - odkaz na ukázku
CORE013 / Barbora Bühnová27
PŘÍSTUPY K PROGRAMOVÁNÍ
CORE013 / Barbora Bühnová28
Procedurální
̶ lineární přístup k programování, postavený na funkcích a
podprocesech
̶ má globálně oddělenou datovou část od funkční, která s těmito daty
pracuje
̶ např. C, Rust, Python, MATLAB, Go, ...
CORE013 / Barbora Bühnová29
Procedurální - Angry Birds
moveForward();
for (var count2 = 0; count2 < 6; count2++) {
for (var count = 0; count < 2; count++) {
moveForward();
}
turnRight();
}
moveForward();
turnLeft();
moveForward();
turnLeft();
for (var count3 = 0; count3 < 4; count3++) {
moveForward();
}
CORE013 / Barbora Bühnová30
Event-based
̶ na rozdíl od procedurálních neprobíhá lineárně, ale jako reakce na
různé události
̶ těmito událostmi mohou například být:
̶ akce uživatele (klikání myší, stisknutí klávesy)
̶ signály ze senzorů
̶ zprávy z jiných programů
̶ např. Visual Basic, Java, C#, ...
CORE013 / Barbora Bühnová31
Event-based - Flappy
CORE013 / Barbora Bühnová32
Object-oriented
̶ program je dělen do objektů, které obsahují datovou část a metody,
které s těmito daty mohou pracovat.
̶ např. C#, Java, C++, Ruby, Smalltalk, ...
https://devopedia.org/object-oriented-programming-concepts
CORE013 / Barbora Bühnová33
Object-oriented - Dance Party
CORE013 / Barbora Bühnová34
PŘÍSTUPY K PROGRAMOVÁNÍ
CORE013 / Barbora Bühnová35
Best practices v programování
̶ Čistý kód, pojmenování, konvence zarovnání, SOLID principy
̶ Code ownership, zodpovědnost za kód, který napíši, i do budoucna
̶ Průběžné testování
̶ Týmová spolupráce při psaní kódu, oprava kódu po ostatních
̶ Inkrementální přístup k programování, ať už píšu novou věc, rozvíjím
nebo dokonce předělávám starší věc, vždy je třeba postupovat po
malých inkrementálních krocích.
̶ Průběžná integrace kódu do společné code base
̶ Dokumentace a technical writing
̶ Refactoring a návrhové vzory
36
RefactoringGuru
CORE013 / Barbora Bühnová37
PROGRAMOVACÍ JAZYKY
CORE013 / Barbora Bühnová38
Diskuze
̶ Jaké programovací jazyky znáte? Na co se používají?
̶ Kolik programovacích jazyků je potřeba znát?
̶ Kolik programátorů jsou samouci?
̶ Jak dlouho je potřeba se programování učit než mohu začít
programovat reálnou aplikaci?
CORE013 / Barbora Bühnová39
Jazyky a frameworky
https://res.cloudinary.com/cybercoders/image/upload/c_scale,g_south_eas
t,l_cc_logo_bug_wenazs.png,w_40/v1557870077/Full_Stack_ebvf4s.png
CORE013 / Barbora Bühnová40
Frontend
https://res.cloudinary.com/cybercoders/image/upload/c_scale,g_south_eas
t,l_cc_logo_bug_wenazs.png,w_40/v1557870077/Full_Stack_ebvf4s.png
CORE013 / Barbora Bühnová41
Backend
https://res.cloudinary.com/cybercoders/image/upload/c_scale,g_south_eas
t,l_cc_logo_bug_wenazs.png,w_40/v1557870077/Full_Stack_ebvf4s.png
CORE013 / Barbora Bühnová42
Databáze
https://res.cloudinary.com/cybercoders/image/upload/c_scale,g_south_eas
t,l_cc_logo_bug_wenazs.png,w_40/v1557870077/Full_Stack_ebvf4s.png
CORE013 / Barbora Bühnová43
DevOps
https://res.cloudinary.com/cybercoders/image/upload/c_scale,g_south_eas
t,l_cc_logo_bug_wenazs.png,w_40/v1557870077/Full_Stack_ebvf4s.png
CORE013 / Barbora Bühnová44
Mobilní aplikace
https://res.cloudinary.com/cybercoders/image/upload/c_scale,g_south_eas
t,l_cc_logo_bug_wenazs.png,w_40/v1557870077/Full_Stack_ebvf4s.png
CORE013 / Barbora Bühnová45
46
CORE013 / Barbora Bühnová47
CORE013 / Barbora Bühnová48
CORE013 / Barbora Bühnová49
PRÁCE PROGRAMÁTORA
CORE013 / Barbora Bühnová50
Denvživotěprogramátora
https://www.pinterest.com/pin/426153183465817785/
CORE013 / Barbora Bühnová51
https://www.pinterest.com/pin/426153183465817785/
Denvživotěprogramátora
CORE013 / Barbora Bühnová52
Jaké nástroje využívám pri programování?
̶ IDE (Integrated Development Environment)
̶ Komplexní nástroj pro vývoj
̶ Obsahuje nejruznejší nástroje (vcetne analytických), ale je velmi nárocný na hardware
̶ Např. prostredí „Visual Studio“.
̶ Editor
̶ Nástroj, který stejne jako IDE dokáže podbarvovat kód a tím velmi zjednodušit programování.
̶ Je určen pro vývoj méne nárocných projektu, neobsahuje žádné pokrocilé nástroje
̶ Oproti IDE má velmi nízké nároky na hardware
̶ Např. editor „Visual Studio Code“.
Našeptávání s dokumentací
Textový editor
Chyby
Upozornění
Real-time sdílení
Automaticky generovaná
XML dokumentace
CORE013 / Barbora Bühnová54
IDE – Základní pohled na Visual Studio 2019
̶ Fialově ohraničené je okno, kde upravujeme kód.
̶ Uprostřed oranžově je krátká XML dokumentace, kterou dnešní IDE dokáží
samy generovat (vytáhnout z funkce název a parametry, vytvořit šablonu a
programátor jen vyplní obsah).
̶ Vpravo nahoře je Live Share - nástroj pro real-time spolupráci.
̶ Vlevo dole vidíme kolik chyb a upozornění je aktuálně v kódu.
̶ Uprostřed vidíme rozepsanou funkci, kterou se nám našeptávač snaží
doplnit.
Analýza kódu
Terminál
Breakpoint
Zmínky v kódu Souborová struktura
Verzovací systém
CORE013 / Barbora Bühnová56
IDE – Další funkcionalita ve Visual Studiu 2019
̶ Nahoře vidíme nabídku s čištěním a analýzou kódu.
̶ Napravo je okno se souborovou strukturou celého projektu s možným
překlikem do gitu.
̶ Uprostřed fialově reference (kolikrát se funkce vyskytuje ve zbytku kódu).
̶ Nalevo debuggovací breakpoint - místo, kde debugging zastaví, abychom
mohli zjistit stav programu a krokovat.
̶ Dole terminál - okno pro přímé příkazy operačnímu systému.
Real-time graf
spotřeby zdrojů
Aktuální proměnné v programu (zatím prázdné)
Spuštěný program
Zásobník volání metod (zatím prázdný)
CORE013 / Barbora Bühnová58
IDE – Úvodní stav debuggingu ve Visual Studiu 2019
̶ Uprostřed je okno se spuštěným programem - jedná se o konzolovou
aplikaci (šachový engine), která aktuálně zobrazuje úvodní nápovědu k
použití a čeká na svůj první příkaz.
̶ Proto je stack prázdný a nejsou v seznamu žádné proměnné.
̶ Napravo vidíme aktuální spotřebu procesoru a paměti, zároveň i délku
debuggingu.
Řádek, na
kterém nastala
chyba
Aktuální proměnné v programu
Chybová hláška
Zásobník volání metod
CORE013 / Barbora Bühnová60
IDE – Debugging (chyba) ve Visual Studiu 2019
̶ Program narazil na chybu -> zobrazí řádek, přes který nemůže pokračovat a
chybovou hlášku.
̶ Z té můžeme vyčíst, že se nebylo možné připojit k serveru s databází (příkaz
“best” má vracet nejlepší tah v pozici, kterou najde v databázi, ta ale během
pořizování screenshotu nebyla spuštěná)
̶ Z hlášky můžeme vyčíst o jakou databázi se jedná (Neo4j zmíněná pár
snímků zpět), přes jakou IP adresu a port se snažíme připojit.
̶ Na konci hlášky se nám snaží napovědět možné řešení “Please ensure ....”
CORE013 / Barbora Bühnová61
IDE – Debugging (chyba) ve Visual Studiu 2019
̶ V okně s proměnnými vidíme dvě, jeden je objekt Engine, na kterém
voláme metody pro hledání tahů. Druhý je result, kam se měl uložit
string s nejlepším tahem, ale jeho hodnota je null, protože se pouze
inicializoval, ale pak nastala chyba.
̶ Na zásobníku už taky vidíme volání metod.
̶ V diagnostic tools vpravo vidíme, že chyba nastala po minutě a 48
vteřinách běhu debuggingu.
CORE013 / Barbora Bühnová63
IDE – Základní pohled na Android Studio
̶ Vpravo simulátor mobilního telefonu, simulovat lze různá zařízení a
různé verze systému Android
̶ Uprostřed konfigurace grafického rozhranní, nastavení tlačítek, apod.
̶ Vlevo adresářová struktura
CORE013 / Barbora Bühnová64
CO NÁS ČEKÁ PŘÍŠTĚ
CORE013 / Barbora Bühnová65
5. Uživatelská přívětivost
̶ Uživatelské rozhranní vs. UX
̶ Uživatelský průzkum, modeloví uživatelé
̶ Modelování a mapy aplikace, wireframes
̶ Uživatelské testování
Domácí práce a příprava na příští přednášku
̶ Začátečníci – na https://code.org/ všechny základní úrovně Angry Birds,
Flappy, Dance Party
̶ Pokročilí – projít si Refactoring Guru a Compiler Explorer