TNPW2-2014-07
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

TNPW2-2014-07

on

  • 469 views

Mobile application, web technology

Mobile application, web technology

Statistics

Views

Total Views
469
Views on SlideShare
346
Embed Views
123

Actions

Likes
0
Downloads
1
Comments
0

3 Embeds 123

http://tnpw2.webnode.cz 121
http://cms.tnpw2.webnode.cz 1
http://m.tnpw2.webnode.cz 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

TNPW2-2014-07 Presentation Transcript

  • 1. Mobilní aplikace Mgr. Lukáš Vacek lukas.vacek@uhk.cz TNPW2 2013/2014
  • 2. 2 Now that it's 2014, the question isn't „should I build a mobile site?“ It's „how do I build a good mobile site?“ – Kristina Kledzik
  • 3. Agenda • Mobilní zařízení? • Komunikační standardy • Výrobci, mobilní platformy • Typy mobilních aplikací • Návrh a vývoj mobilní aplikace • Mobilní business • Internet, doporučená literatura 3
  • 4. Mobilní zařízení?
  • 5. • Mobilita je jedním z aktuálních trendů! (Gartner) • Přístup ke službám 24/7, odkudkoliv – tzv. Internet v kapse • Post-PC éra… prodá se více mobilních zařízení, než stolních počítačů • Významnou roli na straně serveru hraje cloud computing • Objem dat přenášených přes mobilní zařízení exponenciálně roste! • Mění se role telco operátorů: • Hlasové služby ustupují, budou doplňkem ICT služeb (v USA už jsou) • Dojde ke spojování telco operátorů (je jich prostě moc ) • Existuje riziko, že firmy nabízející obsah nabídnou vlastní konektivitu pro mobilní Internet (satelity) Fakta 5
  • 6. • Malý počítač • Přenosné zařízení, umožňuje být neustále v pohybu • Interaktivní • Snadno ovladatelné • Multifunkční • Moderní informační médium, které uživateli nahrazuje noviny, knihy, TV, rádio, walkman, počítač… • S čím dál lepším HW se mobilní zařízení postupně staly nejpoužívanějším osobním počítačem, jaký kdy byl vytvořen • Podle ITU (únor 2013) – 6,8 mld. uživatelů mobilních zařízení, 96 % populace Mobilní zařízení? 6
  • 7. • Hloupý mobilní telefon + • Připojení k Internetu • Operační systém a webový prohlížeč • Umožňuje instalaci aplikací • Multitasking, uživatelská práva • Odpovídající HW – (1-n core) CPU, RAM, úložiště dat • Není podmínkou – dotykové ovládání, kamera + fotoaparát, GPS, wifi, NFC, paměťové karty • Jsou čím dál levnější = získávají stále větší podíl na trhu • Zřejmě největším problémem (všech mobilních zařízení) je výdrž baterie! Smartphone? 7 Zdroj: Alza.cz
  • 8. • Pojem smartphone je často spojován s Apple iPhone. Ale… • Koncepty chytrých mobilních telefonů vznikaly už dříve, takhle si jej představoval Nathan Myhrvold (1991, Microsoft)… a Star Trek známe všichni  Historie smartphone 8
  • 9. Zdroj: http://www.technology-digital.com/smart_phones/apple-actually-created-the-iphone-in-1983 Apple iPhone prototyp (1983) 9
  • 10. • Dotyková obrazovka! • Kalendář, kalkulačka • Adresáře • Mail, Textové zprávy • Fax • QWERTY klávesnice • Žádná fyzická tlačítka • Představen 1992 (COMDEX) • Jen v USA (1993, BellSouth) • Cena $899 První smartphone – IBM Simon 10 Zdroj: cloudcentrics.com
  • 11. 11
  • 12. • Je větší než mobilní telefon  • Přenosný počítač ve tvaru desky s dotykovou obrazovkou • Nemusí umět telefonovat, podporuje připojení k Internetu (Wi-Fi, 3G) • Operační systém a webový prohlížeč • Umožňuje instalaci aplikací, multitasking • Odpovídající HW – (1-n core) CPU, RAM, úložiště dat • Zajímavá historie… • 1968 – Dynabook concept – navrhl Alan Kay • 2001 – Microsoft TabletPC – neujal se • 2010 – všechno změnil Apple iPad • Zajímavá budoucnost  Tablet? 12 Zdroj: Alza.cz
  • 13. • Speciální druh tabletu se specifickým využitím (čtecí zařízení pro e-booky) • Jiná technologie než běžné tablety – většinou elektronický papír (electronic ink) • Lepší čitelnost • Větší výdrž na jedno nabití • HW klávesy, dotyková obrazovka (podle verze) • Konektivita přes Wi-Fi, 3G • Amazon Kindle (různé verze) – přímý nákup multimediálního obsahu (knihy…) • Pozor! Amazon Kindle Fire je tablet! (IPS displej, modifikovaný Android) • Další výrobci: Barnes & Noble Nook, Sony Reader… • Dnešní čtečky dobře plní svůj účel, ale bude to (do budoucna) stačit? Čtečka elektronických knih? 13
  • 14. Komunikační standardy
  • 15. • Moderní mobilní telefon musí umět komunikovat  (hlas, data) • Je k dispozici celá řada standardů, které telco operátoři aktuálně v různé míře ve své síti podporují (liší se i podle regionů), např. • GPRS (2. generace) • EDGE (někdy jako 2.5 nebo 2.75 generace) – v ČR je na většině BTS • 3G (UMTS, HSPDA, HSUPA , CDMA) – 3G v ČR máme, pokrytí není moc dobré • LTE (3. generace, LTE Advance 4. generace) – v ČR si počkáme • Mobilní zařízení podporují ještě další datové komunikační standardy, např. • Bluetooth • Wi-Fi • NFC – bezdrátová komunikace na krátkou vzdálenost Komunikační standardy 15
  • 16. Výrobci, mobilní platformy
  • 17. • Výrobce není vždy to samé, co mobilní platforma  • Top Five Smartphone Operating Systems, Shipments, and Market Share, 2013 (Units in Millions) – zdroj: IDC (únor 2014) Mobilní platformy (market share) 17 Operating System 2013 Shipment Volumes 2013 Market Share 2012 Shipment Volumes 2012 Market Share Year-Over- Year Change Android 793.6 78.6% 500.1 69.0% 58.7% iOS 153.4 15.2% 135.9 18.7% 12.9% Windows Phone 33.4 3.3% 17.5 2.4% 90.9% BlackBerry 19.2 1.9% 32.5 4.5% -40.9% Others 10.0 1.0% 39.3 5.4% -74.6% Total 1009.6 100.0% 725.3 100.0% 39.2%
  • 18. • Google Android (aktuální verze 4.4, KitKat) • Otevřený systém, velmi svobodný • Několik stovek zařízení od různých výrobců s různou konfigurací (výkon HW, DPI rozlišení displeje, ovládání touch/klávesy apod.) • Výrobci HW „vylepšují“ Android o grafické nadstavby (Sense, TouchWiz…) • Jazyk Java (Dalvik – upravené prostředí pro mobily), soud s Oracle • Libovolné IDE (např. Eclipse) s SDK, včetně simulátoru • Volně šiřitelné aplikace nebo Google Play (800k+) • Jednorázový poplatek $25 • Úložiště Google Drive • Rychlý vývoj platformy • Google umí vzdáleně zlikvidovat závadnou aplikaci na mobilním zařízení Mobilní platformy – Android 18
  • 19. • Apple iOS je uzavřený systém (SW a HW pod jednou značkou), • Aktuální verze 7.1 • High-end zařízení (iPhone, iPad), vyšší cena • Malý počet modelů • Lepší přehlednost pro zákazníky • Jednodušší kompatibilita (vývojáři) • Jazyk ObjectiveC, vývojové prostředí Xcode (Mac only), iOS Simulator • iOS Developer Program je licencovaný – $99/rok • Distribuce přes Apple Store (800k+) – podléhá schválení • Úložiště iCloud • Silná značka, výborný marketing • Inovace, např. hlasové ovládání Siri • Fanoušci jsou ochotní platit  Mobilní platformy – iOS 19
  • 20. • Windows Phone (aktuální verze 8.1) • Uzavřený systém • Nekompatibilní s předchůdcem Windows Mobile! • XNA framework pro hry nebo běžné mobilní aplikace v Silverlight (C#, VB.NET) • Vývojové nástroje jsou k dispozici zdarma! SDK + VS Express • Dlaždicové GUI – uživatelské rozhraní Metro (* nesmí se mu tak říkat ) • Dobrá integrace populárních sociálních sítí • Hlasové ovládání TellMe • Cloud úložiště SkyDrive • Integrace s kancelářským SW (Office365, Exchange, Sharepoint, Skype…) • Windows Phone Store (145k+) • Vývojářský účet je licencovaný – $99/rok • Přednáška WUG o vývoji pro Windows Phone, nebo MSDN • https://dev.windowsphone.com/ Mobilní platformy – Windows Phone 20
  • 21. • BlackBerry 10 (jádro QNX) • Uzavřený systém, nově možnost používat Android aplikace • Zaměření na firemní klientelu, etalon pro „mobilní kancelář“ • Bezpečné protokoly, government protestuje • Zařízení s charakteristickou HW klávesnicí (existují i dotykové varianty) • Výborná práce s mailem = mobilní kancelář • Java ME (+ RIM API), možné použít Adobe AIR • BlackBerry World (120k+) • Blackberry Enterprise Server ve firemní síti (vazba na mail server) • BlackBerry Playbook používá BlackBerry Tablet OS (jádro QNX) Mobilní platformy – Blackberry 21
  • 22. • Symbian (Nokia, historický leader trhu) • Kdysi neprodávanější OS pro smartphony (cca 85 % trhu!) • Aktuálně Symbian Belle, hlavně mobily nižší třídy fy Nokia • Jazyk C++, QT, Java ME • Volná distribuce aplikací nebo Nokia (Ovi) Suit • Ostatní platformy s malým podílem na trhu (aspoň zatím) • Jolla – ex Nokia zaměstnanci • Nokia Asha – low-end segment, slušné prodeje • WebOS • Bada (Samsung) • Firefox OS • UbuntuTouch (Canonical) Mobilní platformy – další mobilní platformy 22
  • 23. Typy mobilních aplikací
  • 24. Tři základní typy mobilních aplikací 24 • Nativní aplikace (pro konkrétní OS) • Webové aplikace (univerzální) • Hybridní aplikace (něco mezi)
  • 25. Nativní mobilní aplikace 25 • Přístup k systémovým funkcím zařízení (kontakty, sms, hlasové funkce) • Přístup k senzorům (mikrofon, kamera…), kompas, gyroskop, proximity senzor (vzdálenost k předmětům) • GPS (location based service) • Práce s lokální databází • Komunikace client/server s aplikací nebo datovým úložištěm • HW akcelerace – aplikace umí využít výkon zařízení • Často využívají App store jako distribuční kanál
  • 26. Mobilní webové aplikace 26 • Jsou multiplatformní = je to trend! • Využívají webový prohlížeč + osvědčené technologie • Díky HTML5, CSS3 a JavaScriptu to je lépe použitelné než v minulosti • Adaptivní (responsive) web design hraje významnou roli! • Flexibilita s ohledem na zařízení (zobrazení, způsob ovládání) • Snížení objemu přenášených dat • Snížení počtu requestů • Progressive enhancement vs graceful degradation • Trend: Mobile first, progressive enhancement a responsive web design • Výhledově by mohly nahradit nativní mobilní aplikace • Univerzálnost použití pro téměř libovolné zařízení • Nižší náklady na vývoj • Mobile Site Audit Checklist
  • 27. Hybridní mobilní aplikace 27 • Je to „něco mezi“ nativní mobilní a webovou aplikací • Tzv. lehký klient umí víc, než běžný webový prohlížeč • jádro je webové • tzv. native wraper má přístup k systémovým funkcím (úložiště, kontakty, senzory…) • Aplikace lze šířit přes nějaký AppStore
  • 28. Návrh a vývoj mobilní aplikace
  • 29. Návrh a vývoj mobilní aplikace 29 • Nápad, zadání • Návrh UI v prototypu • Identifikujte klíčové scénáře • Najděte nejjednodušší cestu • Klidně použijte papír  • Nechte si to zákazníkem/zadavatelem potvrdit! • Design aplikace • Aplikační logika • API, backend (včetně úložiště dat) • Dbejte na co nejnižší objem přenášených dat! Hlídejte si spotřebu paměti, RAM je omezená! • Grafický design aplikace je klíčová věc, obal prodává! • Implementace • K programování je potřeba vývojový nástroj (někdy s rozšířením) a SDK! • Testování (nepodcenit!) • Hodí se SW emulátory běhového prostředí (nemusíte mít „opravdový“ přístroj) • Nemáte vždy přístup ke všem funkcím mobilu (např. GPS, tel. hovory) – Google to umí (včetně např. identifikace lokace nebo pohybu zařízení, latence sítě, simulace volání, sms…) • Distribuce
  • 30. Mobilní frameworky 30 • Kromě vlastního vývoje je velmi důležité rychlé vytvoření prototypu aplikace! • Při návrhu není podstatný ani tak vzhled (barvičky!), ale způsob ovládání • Frameworky pro mobilní web: • jQuery Mobile • Kendo UI • Sencha Touch • PhoneGap • Appcelerator Titanium • Multiple phone web-based application Framework (wiki) • Telerik Launches New Development Platform For Web, Hybrid And Native Apps
  • 31. Mobilní business
  • 32. Mobilní business (M-commerce) 32 • Obrovský trh mobilních aplikací (odhad cca $40 mld. v roce 2015) • Má kam růst (Indie, Čína…) • Čím dál lepší a cenově dostupnější mobilní zařízení • Nové technologie… • QR kódy • Dvojrozměrný kód zapsaný do čtverce (od 21 do 177 bodů) • Umí opravit chyby (7-30 %) • Umožňuje uložení až 3 KB – URL adresy, iCalendar, vCard… • NFC (Near Field Communication) • Bezdrátová komunikace na krátkou vzdálenost (standard cca do 20 cm) • Výměna dat mezi dvěma zařízeními • Mikroplatby • Čtení/zápis dat
  • 33. Mobilní business (M-commerce) 33 • Mail, mobilní kancelář… prostě PDA (Personal Digital Assistant) • Webový klient má zhruba stejný podíl na trhu, mobilní získává na úkor desktopového • Mobilní platby = exponenciálně růst v nejbližší době • Celkem odhad 2015 cca $670 mld., z toho NFC cca $74 mld. • Velcí hráči (PayPal, VISA, MC, AmEx, Square…) + poskytovatelé obsahu (Facebook…) • Sociální sítě • Mobilní hry, často ve spojení se sociálními sítěmi (Zynga…) • Platba za obsah • Noviny, časopisy – např. New York Times • Multimedia (hudba, filmy, TV pořady) – Apple iTunes, Netflix • Prodej zboží a služeb (Amazon, eBay…) • Přes mobilní aplikaci eBay si někdo koupil tryskové letadlo za $4.9M  • Internetové obchody hlásí o 420 % více přístupů z mobilů a tabletů než v roce 2010 (zdroj H1.cz) • Mobilní banking, akcie, booking, check-in, mapy…
  • 34. Internetové odkazy, literatura
  • 35. Odkazy na internetu 35 • http://www.justit.cz/wordpress/2012/06/21/infografika-e-mail-se-presouva-na-mobilni- telefony/ • http://webovky.vse.cz/images/slides/2012LS/prednaska-vse-responsive.pdf • http://smartphone-guide.com/a-short-history-of-the-smartphone.html • http://multimedia.vse.cz/media/Viewer/?peid=08c9cd64cf744cc3bf38ab6386a017ac1d • http://www.manakmichal.cz/blog/jquery/prototypovani-mobilnich-aplikaci-s-jquery-mobile/ • http://liesdamnedliesstatistics.com/2012/06/want-to-make-your-qr-code-work-stick-it-in-a- magazine.html • http://www.zdrojak.cz/zpravicky/sablony-pro-mobilni-navrhovani-zdarma/ • http://www.justit.cz/wordpress/2012/08/04/infografika-responsivni-webdesign/ • http://www.vogella.com/articles/Android/article.html - Android Development Tutorial • http://www.zdrojak.cz/serialy/vyvijime-pro-android/ - Seriál Vyvíjíme pro Android • http://www.slideshare.net/machal/webov-frontend-ve-slubch-mobilnho-vvoje • http://en.wikipedia.org/wiki/Multiple_phone_web-based_application_framework • http://moz.com/blog/mobile-site-audit-checklist • Responsive, adaptive, mobile or native? What's the best option? • There is no such thing as UX strategy
  • 36. Doporučená literatura 36 • Velte, Anthony T.; Velte, Toby J.; Elsenpeter, Robert – Cloud Computing: Praktický průvodce, Computer Press 2011 • Zkuste Amazon.com… je toho tam spousta!
  • 37. Závěr, dotazy