Tvorba mobilních aplikací pro geografická data I.

Mgr. Michal Jakl

LS 2025

Obsah lekce

1. Představení předmětu
2. Představení vyučujícího
3. Představení studentů
4. Historie mobilních aplikací
5. Architektura mobilních aplikací
6. UI/UX principy v mobilním vývoji
7. Vývojová prostředí a nástroje

​

Praktické cvičení: Zprovoznění softwaru pro práci v dalších lekcích

1. Představení předmětu

• Tvorba mobilních aplikací pro geografická data
• Prezenční/distanční forma
• LS 2025, pátky v čase 16:00 až (+/-) 19:00
• Konzultace dle potřeby individuálně
• Dokumentace -> https://mjakl.cz + Moodle
• Zápočet -> 4 kredity
• Vlastní NTB (Windows/Mac)!

„Mám nadrceno!“ vs. „Umím (o tom) přemýšlet“

1. Cíle a obsah

​

1. Historie a filozofie chytrých mobilních zařízení. Základní principy a postupy při tvorbě mobilní aplikace. Seznámení s jazykem Java a Swift.

2. Architektura a design mobilní aplikace. Práce s layouty a základními prvky, životní cyklus aplikací pro Android.

3. Tvorba mobilní aplikace pro Android a iOS od A do Z (návrh -> publikace). Emulátory a externí knihovny.

4. Seznámení s nejrozšířenějšími SDK pro tvorbu mobilních aplikací.

5. Propojení mobilní aplikace se vzdálenou databází a dalšími online prvky.

6. Webové mapy a další online prvky v prostředí mobilní aplikace, specifika vývoje aplikací pro iOS, multiplatformní vývoj aplikací.

7. Testování, publikace aplikace a práce s verzovacími systémy (GIT)

​

1. Podmínky pro absolvování předmětu

​

• Pro získání zápočtu:
• Aktivita na jednotlivých cvičeních a přednáškách
• Vytvoření semestrální práce dle zadání

1. Pravidla pro semestrální práci

​

• Termín odevzdání na mail včetně případných vracení a oprav je týden před poslední lekcí v semestru
• Semestrální práce bude v podobě komplexní rešerše, návrhu marketingové a vývojové strategie a průzkumu trhu pro mobilní aplikaci na zvolené téma. Rozsah práce je minimálně 8 plnohodnotných stran textu. Práce bude doplněna grafickými návrhy, tabulkami a schématy.
• Při kontrole a hodnocení bude kladen důraz zejména na následující prvky:
• Analýza a rešerše již existujících/konkurenčních řešení
• Teoretické návrh struktury aplikace včetně UI
• Časový odhad a rozpis jednotlivých úkonů v procesu tvorby aplikace
• Propracovaný plán testování
• Návrh následného marketingového a propagačního plánu a dlouhodobá strategie dalšího rozvoje aplikace
• Práce bude na poslední osobně odprezentována

2. Představení vyučujícího

mjakl.cz

povestialegendy.cz

3. Představení studentů

4. Historie mobilních aplikací

První mobilní telefony (80. a 90. léta)

• 80. a 90. léta: Mobilní telefony byly pouze pro volání a SMS.
• První jednoduché vestavěné aplikace jako kalkulačka, budík nebo kontakty.
• Nokia 6110 (1997) – první mobilní hra Snake se stala celosvětovým fenoménem.

Vznik smartphonů

• IBM Simon (1994) – první zařízení považované za „smartphone“ (dotykový displej, kalendář, e-mail).
• BlackBerry (1999) – revoluce pro podnikatele, e-mail v telefonu.
• 2007: Přelomový okamžik – představení iPhonu
• Plně dotykový displej, žádná fyzická klávesnice.
• První multitouch rozhraní.
• 2008: Google odpovídá Androidem
• Otevřený systém, rychlý rozvoj.

4. Zajímavosti z historie

📌 První mobilní aplikace byly extrémně jednoduché

• IBM Simon (1994) byl první „smartphone“, ale měl jen telefonní seznam, kalendář a jednoduché poznámky.
• Dnes by se tyto aplikace daly naprogramovat za pár hodin, tehdy šlo o revoluci!

📌 Nokia 6110 a revoluce mobilních her 🎮

• Snake (1997) – první opravdu populární mobilní hra.
• Byla tak úspěšná, že ji Nokia začala instalovat do všech svých telefonů.
• Dnes existuje více než 300 variant této hry.

📌 První placená aplikace na App Store?

• „I Am Rich“ (2008) – aplikace za 999,99 USD, která neudělala vůbec nic!
• Měla jen obrázek drahého diamantu, aby ukázala, že uživatel „má peníze“.
• Apple ji za pár dní smazal, ale 8 lidí si ji mezitím koupilo. 🤯

📌 Android začal jako OS pro fotoaparáty 📷

• Android nebyl původně určen pro telefony!
• Google ho koupil v roce 2005 a přizpůsobil ho smartphonům.
• První telefon s Androidem: HTC Dream (2008) – měl výsuvnou klávesnici!

4. Obchody s aplikacemi

• 2008 – Apple spouští App Store
• První možnost oficiálně prodávat aplikace.
• Monetizace skrze jednorázové platby, reklamy, předplatné.
• Počet aplikací: Přesný aktuální počet není uveden, ale App Store je známý pro svůj přísný schvalovací proces, což vede k vyšší kvalitě aplikací.
• Google Play (2008, původně Android Market)
• Otevřená platforma pro vývojáře, nižší poplatky než u Applu.
• Počet aplikací: Přibližně 1,68 milionu aplikací.
• Očekávané stahování: Do roku 2026 se očekává nárůst na 143 miliard stažení ročně, což je nárůst o téměř 30 % oproti 111 miliardám v roce 2021.

Současný stav

• Miliony aplikací, monetizace skrze reklamy, nákupy v aplikaci
• Vývojářské ekosystémy (Android, iOS, multiplatformní řešení)

4. Zajímavosti o mobilních aplikacích

📌 Nejstahovanější aplikace všech dob?

• TikTok – více než 4 miliardy stažení.
• Překonal i Facebook a YouTube!
• Další hity: WhatsApp, Instagram, Subway Surfers (nejstahovanější

📌 Nejvýdělečnější aplikace?

• TikTok, Tinder, YouTube a Honor of Kings (mobilní hra).
• Roční zisky z mikrotransakcí přesahují miliardy dolarů.

📌 Mobilní aplikace generují více peněz než Hollywood! 🎬

• Celkové příjmy z mobilních aplikací jsou vyšší než tržby filmového průmyslu.
• Hry jako Candy Crush nebo Clash of Clans vydělávají víc než velké filmy.

📌 Největší „fail“ mobilních aplikací?

• Flappy Bird (2013) – hra, která vydělávala 50 000 USD denně, ale vývojář ji stáhl, protože mu „ničila život“.
• Facebook Home (2013) – pokus o Facebook launcher na Androidu. Totální propadák.

4. Android nebo iOS?

Globální trh mobilních operačních systémů je dominován dvěma hlavními hráči:

• Android: přibližně 73% podíl na trhu
• iOS: přibližně 26% podíl na trhu

4. Android nebo iOS?

Vývoj pro Android:

Výhody:

• Širší uživatelská základna: větší tržní podíl znamená potenciálně více uživatelů
• Flexibilita: otevřená platforma umožňuje větší přizpůsobení
• Nižší náklady na publikaci: jednorázový poplatek za registraci vývojáře

Nevýhody:

• Fragmentace: různorodost zařízení a verzí OS komplikuje optimalizaci
• Nižší výnosy z aplikací: uživatelé Androidu obecně méně utrácejí za aplikace

Vývoj pro iOS:

Výhody:

• Homogenní ekosystém: méně zařízení a verzí OS usnadňuje optimalizaci
• Vyšší výnosy z aplikací: uživatelé iOS jsou ochotnější platit za aplikace
• Silná podpora od Apple: kvalitní dokumentace a nástroje pro vývojáře

Nevýhody:

• Vyšší náklady na publikaci: ročný poplatek za registraci vývojáře
• Uzavřený ekosystém: přísnější pravidla pro schvalování aplikací

5. Architektura mobilních aplikací

Klient-server model

• Mobilní aplikace většinou nefungují izolovaně – komunikují se serverem.
• Příklad: Počasí – aplikace neobsahuje předem informace, ale získává je z API.
• Klient = uživatelské rozhraní aplikace
• Server = databáze, API, zpracování požadavků

5. Kdy má smysl dělat mobilní aplikaci?

5. Kdy má smysl dělat mobilní aplikaci?

✅ Když potřebuješ přístup k hardwaru telefonu

Např. GPS, Bluetooth, fotoaparát, senzory.

Příklad: Mapové aplikace, navigace, fitness trackery.

​

✅ Pokud uživatelé budou aplikaci používat často

Mobilní aplikace umožňuje notifikace, což pomáhá udržet uživatele aktivní.

Příklad: Messenger, sociální sítě, e-mailové aplikace.

​

✅ Pokud je důležitý výkon a rychlost

Webové aplikace jsou omezené výkonem prohlížeče.

Příklad: Hry, videoeditory, grafické aplikace.

​

✅ Když chceš monetizovat aplikaci přes App Store / Google Play

Mobilní aplikace umožňuje předplatné a in-app nákupy přímo v systému.

Příklad: Spotify, Tinder, Netflix.

5. Kdy raději vytvořit webovou aplikaci?

✅ Když potřebuješ dostupnost pro všechny platformy bez instalace

Webová aplikace funguje na mobilu, tabletu i desktopu bez nutnosti instalace.

Příklad: Online e-shopy, firemní CRM, rezervace hotelů.

​

✅ Pokud aplikace nebude často využívat mobilní funkce

Není potřeba přístup k GPS, foťáku, senzoru pohybu.

Příklad: Firemní dashboard, jednoduché databázové aplikace.

​

✅ Nižší náklady na vývoj a údržbu

Není potřeba dělat dvě verze (Android + iOS), stačí jeden web.

PWA (Progressive Web App) – umí notifikace a offline režim, ale ne vše.

5. Progressive Web App

= kompromis mezi mobilní a webovou aplikací, moderní webová aplikace, která vypadá jako mobilní aplikace, ale běží v prohlížeči

​

Výhody:

✅ Funguje offline.

✅ Umožňuje push notifikace.

✅ Nevyžaduje instalaci.

​

Nevýhody:

❌ Ne všechny mobilní funkce jsou dostupné (např. Bluetooth, senzory).

❌ Méně stabilní než nativní aplikace.

5. Shrnutí

• Mobilní aplikace je lepší, když potřebujeme přístup k hardwaru, vysoký výkon nebo monetizaci.
• Webová aplikace je lepší, když chceš levnější a univerzální řešení.
• PWA může být kompromisem, pokud nepotřebuješ plný přístup k mobilním funkcím.

​

💡 Zajímavost:

Google začal podporovat PWA v Google Play – některé aplikace už nepotřebují nativní vývoj a fungují jako „instalovatelné webovky“! Twitter (X) a Uber mají PWA verze, které jsou lehčí než klasické aplikace.

5. Nativní vs. multiplatformní aplikace

Multiplatformní aplikace

• React Native, Flutter, Kotlin Multiplatform
• ✅ Jedna aplikace pro obě platformy, levnější vývoj
• ❌ Horší přístup k některým funkcím (kamera, GPS, notifikace)

Nativní aplikace

• Android = Java/Kotlin
• iOS = Swift/SwiftUI
• ✅ Lepší výkon, přístup k hardwaru
• ❌ Vyšší náklady na vývoj – dvě samostatné verze aplikace

5. Struktura aplikace

Frontend (uživatelské rozhraní)

• Android – XML layouty, Jetpack Compose
• iOS – SwiftUI, Storyboardy

Backend (serverová část aplikace)

• Node.js, Django, Firebase, cloudové služby
• REST API / GraphQL – způsob komunikace mezi frontendem a backendem

Datové úložiště

• Lokální databáze: SQLite, CoreData, Room (Android)
• Cloudové databáze: Firebase Firestore, AWS DynamoDB

6. UI/UX principy v mobilním vývoji

6. Základní pravidla návrhu

✅ Minimalismus – méně prvků = lepší použitelnost

✅ Konzistence – stejné ovládání na všech stránkách

✅ Responzivita – přizpůsobení různým velikostem displejů

✅ Interaktivita – zpětná vazba, animace, mikrointerakce

6. Android vs. iOS design

​

• Material Design (Google)
• Plovoucí akční tlačítka, světlé barvy, stínování
• Důraz na interakce a přechody mezi obrazovkami

​

• Human Interface Guidelines (Apple)
• Minimalistické ikony, tenké linie, jednoduché prvky
• Zaměření na obsah (texty, obrázky, animace)

6. Důležité UX prvky

Důležité UX prvky

• Tlačítka musí být dostatečně velká pro snadné ovládání prstem
• Tmavý režim (dark mode) jako standard
• Hlasové ovládání a gesta – trend moderních aplikací

7. Vývojová prostředí a nástroje

Android Studio (oficiální IDE pro Android)

• Oficiální nástroj pro vývoj aplikací na Android
• Jazyky: Java, Kotlin
• Hlavní součásti:
• Emulátor – testování bez fyzického zařízení
• Gradle – správa závislostí a sestavení aplikace
• Layout Editor – vizuální návrh UI

IDE = (Integrated Development Environment) je integrované vývojové prostředí

7. Vývojová prostředí a nástroje

Xcode (oficiální IDE pro iOS)

• Oficiální nástroj pro vývoj iOS aplikací
• Jazyk: Swift, Objective-C (zastaralý)
• Hlavní součásti:
• Interface Builder – vizuální návrh aplikací
• TestFlight – testování aplikací před publikací
• SwiftUI Preview – okamžité zobrazení UI změn

7. Vývojová prostředí a nástroje

7. Než začneme kódovat

Než se pustíme do samotného programování mobilní aplikace, je klíčové pečlivě naplánovat její vývoj. Mnoho projektů selže ne kvůli špatnému kódu, ale kvůli nedostatečnému plánování. Než začneme psát první řádky kódu, měli bychom si položit několik klíčových otázek:

🔹 Pro koho je aplikace určena?

• Kdo bude typickým uživatelem? (věk, zájmy, technická zdatnost)
• Jaké problémy bude aplikace řešit?

🔹 Jak bude aplikace vydělávat?

• Bude zdarma s reklamami?
• Bude obsahovat nákupy v aplikaci (freemium model)?
• Bude placená?

🔹 Jaké funkce jsou klíčové?

• Co musí aplikace umět v první verzi?
• Jaké funkce můžeme přidat později?

🔹 Na jaké platformy bude určena?

• Vyvíjíme jen pro Android, jen pro iOS, nebo obojí?
• Má smysl zvolit multiplatformní řešení (např. Flutter, React Native)?

7. Analýza trhu a konkurence

Než začneme kódovat, musíme pochopit tržní prostředí a konkurenci. Chyby v této fázi mohou vést k tomu, že vyvineme aplikaci, kterou nikdo nepotřebuje.

📌 Kroky k analýze trhu:� 1️⃣ Zjistěte, zda už podobná aplikace existuje

• Hledejte v App Store a Google Play podobné aplikace.
• Projděte si recenze a stížnosti uživatelů.

2️⃣ Identifikujte unikátní hodnotu vaší aplikace (UVP - Unique Value Proposition)

• V čem bude vaše aplikace lepší než konkurence?
• Proč by si ji lidé měli stáhnout místo jiné?

3️⃣ Analyzujte cílové uživatele

• Jaké mají zvyklosti?
• Jak často používají podobné aplikace?
• Jsou ochotni za aplikaci platit?

💡 Tip: Použijte nástroje jako Google Trends, Sensor Tower, App Annie pro analýzu popularity aplikací a klíčových slov.

7. Návrh struktury aplikace

Před samotným programováním je vhodné si rozmyslet strukturu aplikace a vytvořit základní návrh UI/UX.

📌 Hlavní kroky návrhu:

1️⃣ Vytvoření wireframu (drátěného modelu aplikace)

• Nakreslete si základní schéma obrazovek aplikace.
• Můžete použít nástroje jako Figma, Adobe XD, Sketch, Balsamiq nebo klidně papír.

📌 Ukázka jednoduchého wireframu:

• 🏠 Domovská obrazovka → 📄 Seznam položek → 🖊 Detail položky

2️⃣ Definice hlavních funkcí

• Jaké tlačítko vede kam?
• Jak bude fungovat navigace mezi obrazovkami?
• Jak budou uživatelé interagovat s aplikací?

💡 Doporučení:

• Držte se principu KISS (Keep It Simple, Stupid) – jednoduché aplikace mají větší šanci na úspěch.
• Vždy testujte wireframy na reálných lidech, než začnete kódovat.

7. Časté chyby, kterým se vyhnout

❌ Předčasné kódování bez plánu

• Příliš mnoho vývojářů začne programovat bez jasné vize aplikace.
• Výsledkem je chaos v kódu a nutnost přepisovat aplikaci od nuly.

❌ Příliš mnoho funkcí v první verzi (tzv. scope creep)

• Největší chyba startupů je snaha nacpat do aplikace příliš mnoho funkcí hned od začátku.
• Řešení: Začněte s MVP (Minimum Viable Product) – první verzí aplikace s nezbytnými funkcemi.

❌ Špatná monetizační strategie

• Pokud si uživatelé na začátku zvyknou na zcela bezplatnou aplikaci, budou méně ochotní později platit.
• Řešení: Použijte freemium model, kdy základní verze aplikace je zdarma, ale pokročilé funkce jsou placené.

❌ Ignorování testování na reálných uživatelích

• Aplikace, která není testována skutečnými lidmi, často končí s nepoužitelným rozhraním.
• Řešení: Beta testování s reálnými uživateli před vydáním.

7. Shrnutí efektivní přípravy k vývoji

✅ Definujte jasně cíl aplikace – pro koho je určena a jaký problém řeší.�✅ Prozkoumejte trh – podívejte se na konkurenci, přečtěte si recenze uživatelů.�✅ Vytvořte drátěný model aplikace – nakreslete si základní rozložení obrazovek.�✅ Zvolte správnou technologii – Android, iOS nebo multiplatformní vývoj?�✅ Vyhněte se častým chybám – nepřidávejte příliš mnoho funkcí najednou a testujte aplikaci na uživatelích.

​

💡 Zajímavost:

• Instagram začínal jako aplikace na sdílení fotek s filtry. Až později přidali videa, Stories a další funkce. Začněte jednoduše!

Cvičení - Instalace aplikací

📌 Kroky k instalaci Android Studia:

1️⃣ Stáhni Android Studio z oficiální stránky: https://developer.android.com/studio

2️⃣ Spusť instalátor a postupuj podle instrukcí.

3️⃣ Po instalaci otevři Android Studio a stáhni doporučené součásti (SDK, emulátor).

💡 Tip: Pro vývoj je dobré mít nainstalovanou nejnovější verzi Javy (JDK 11 nebo novější).

📌Instalace Xcode

1️⃣ Otevři Mac App Store a vyhledej Xcode.

2️⃣ Klikni na Stáhnout a počkej na instalaci (~12 GB).

3️⃣ Po instalaci spusť Xcode a nainstaluj doplňkové nástroje.

💡 Tip: Xcode funguje pouze na macOS – na Windows lze použít cloudové řešení (např. MacStadium).

Děkuji za pozornost a těším se příště!��Prostor pro zpětnou vazbu

mail@mjakl.cz

Tel. 608 544 839

Web: mjakl.cz

Telegram: t.me/mjakl_cz