Úvod do vývoja aplikácií pre chytré zariadenia

Záznam z prednášky

Motivácia

• Jedným z najčastejšie používaných zariadení v súčasnosti je určite mobilný telefón. A keďže je vybavený množstvom senzorov, akčných členov, má možnosť komunikovať cez WiFi, Bluetooth alebo pomocou infra portu, je celkom ideálnym kandidátom na to, aby sa stal súčasťou nášho riešenia.

• Dnes sa teda pozrieme na to, aké možnosti máme, ak chceme vyvíjať aplikácie pre mobilné, ale hlavne chytré zariadenia.

Čo je to chytré zariadenie?

• (slide) Začneme otázkou - čo je to chytré zariadenie?

• (slide) Chytré zariadenia by sme mohli definovať ako elektronické zariadenie, ktoré je schopné pracovať samostatne, interagovať s jeho používateľom, ako aj s inými zariadeniami pomocou rozličných komunikačných technológií. Častokrát sa môže jednať o zariadenie umelej inteligencie.

• Chytré zariadenia sú častokrát veľmi malé, ale napriek tomu môžu poskytovať obrovský výkon, ktorý môže byť porovnateľný aj so súčasnými bežnými počítačmi.

• Príkladom takýchto zariadení môžu byť chytré autá, hodinky, telefóny, fitness náramky, zámky, termostaty, zariadenia bielej techniky, reproduktory, televízory alebo obecne zariadenia inteligentnej domácnosti.

• V tomto kurze sa budeme venovať konkrétne vývoju aplikácií pre chytré telefóny, pretože ich zastúpenie je na trhu zrejme najväčšie.

Tri typy vývoja mobilných aplikácií

• (slide) Keď sa na trhu objavili operačné systémy pre chytré zariadenia Android a iOS (okolo roku 2007) a chceli ste pre ne vyvíjať aplikácie, nemali ste veľa možností. V podstate to znamenalo, že pre vývoj aplikácií pre iOS ste používali XCode a aplikácie ste písali v jazyku Objective-C, a keď ste chceli písať aplikácie pre Android, písali ste ich v jazyku Java (tí náročnejší v C++) a používali ste s najväčšou pravdepodobnosťou vývojové prostredie Eclipse s Android SDK.

• Odvtedy sa však situácia diametrálne zmenila. Ako na úrovni jazykov, tak aj na úrovni nástrojov, ktoré môžete pre vývoj používať. Dnes je na výber obrovské množstvo rámcov, nástrojov, platforiem a ekosystémov pre komplexný vývoj aplikácií pre chytré zariadenia.

• Aj napriek tomu však vieme to množstvo možností zoskupiť do niekoľkých kategórií. Ešte skôr, ako sa začneme venovať samotným technológiám, si predstavíme 3 rozličné spôsoby vývoja aplikácií, resp. 3 rozličné typy aplikácií pre chytré zariadenia, a to (Research Guide portálu DZone):

  1. natívne aplikácie
  2. webové aplikácie
  3. hybridné aplikácie

• Na jednotlivé typy aplikácií sa pozrieme podrobnejšie.

Natívne aplikácie

• (slide) Prvú skupinu tvoria natívne aplikácie (z angl. native applications). Tieto aplikácie sú vyvíjané a cielené špeciálne pre konkrétnu platformu pomocou nástrojov, ktoré nám poskytol jej výrobca. Príkladom môže byť jazyk Kotlin (predtým jazyk Java) v prostredí Android Studio pre Android alebo jazyk Swift (predtým jazyk Objective-C) v prostredí XCode pre iOS. Ale aj C/C++, Python alebo React Native.

• Nasledujúci obrázok ilustruje architektúru natívnej aplikácie. Najspodnejšia vrstva označená ako Platform je operačný systém (platforma), ktorá komunikuje s hardvérom daného zariadenia. Natívna aplikácia s ňou komunikuje pomocou SDK danej platformy. Tu sa nachádza programové rozhranie, pomocou ktorého je možné pristupovať ku jednotlivým komponentom platformy, ako napr. posielať notifikácie, prehrávať multimediálne súbory, komunikovať s ostatnými zariadeniami alebo so senzormi a akčnými členmi samotného zariadenia. V prípade komunikácie s externými službami pre potreby získania údajov môže využiť potrebné komunikačné protokoly, ktorých podpora môže byť rovnako zabalená ako súčasť SDK platformy.

  

• V porovnaní s ďalšími typmi aplikácií je dôležité spomenúť, že výsledná aplikácia sa obyčajne inštaluje z obchodu platformy a ukladá sa priamo do súborového systému daného zariadenia, kde zaberá miesto. Aplikácia sa spúšťa priamo operačným systémom a pre svoju činnosť nepotrebuje žiadne špeciálne behové prostredie.

• V prípade aktualizácie aplikácie sa táto znova sťahuje.

Výhody natívnych aplikácií

• (slide) Medzi výhody natívnych aplikácií patria:

  • Natívne aplikácie dosahujú v porovnaní s ostatnými typmi aplikácií najvyšší výkon. Preto sa často používajú napr. na vývoj hier.

  • Ponúkajú veľmi dobrý používateľský zážitok, nakoľko vývojári používajú natívne UI platformy, pre ktorú bola aplikácia vytvorená.

  • Ponúkajú priamy prístup k natívnemu API a teda aj ku všetkým vlastnostiam platformy a ku všetkým senzorom a akčným členom zariadenia, ako napr. zoznam kontaktov, kalendár, ale aj NFC, Bluetooth a pod.

  • Pri vývoji natívnych aplikácií sú k dispozícii aj veľmi dobré ladiace nástroje.

  • Sú distribuované pomocou obchodu danej platformy.

Nevýhody natívnych aplikácií

• (slide) Medzi nevýhody natívnych aplikácií patria:

  • Za najväčšiu nevýhodu je možné považovať to, že aplikácie nie sú platformovo nezávislé. To znamená, že v prípade distribúcie pre viaceré platformy je potrebné aplikáciu vytvoriť pre každú zvlášť. To častokrát znamená mať samostatných vývojárov pre každú platformu, nakoľko vývoj pre každú z nich je odlišný (odlišný jazyk, odlišné SDK, odlišné paradigmy, odlišné rámce, …).
  • Obyčajne je ich vývoj náročnejší a tým pádom aj drahší. To sa rovnako týka aj údržby už vytvorených aplikácií.

Webové aplikácie

• (slide) Druhým typom aplikácií sú webové aplikácie (z angl. web applications) známe tiež pod názvom Mobile Websites alebo Mobile Web Applications.

• Jednou zo základných aplikácií, ktorú nájdete na každom mobilnom zariadení, je určite webový prehliadač. Webové prehliadače už dávno neslúžia len na prehliadanie statických webových stránok, ale dnes fungujú ako isté kontajnery, v ktorých je možné spúšťať rozličné aplikácie. V prehliadači dnes viete spustiť rozličné kancelárske aplikácie (Google Docs, MS Office 365), ale rovnako sa v nich viete hrať aj hry a to častokrát aj náročné na FPS a celkový výkon zariadenia.

• Na sile webového prehliadača stavajú aj webové aplikácie. Tie sú napísané pomocou webových technológií HTML5 a spúšťa ich prehliadač a nie operačný systém. Architektúru takejto aplikácie ilustruje nasledujúci obrázok.

  

• Spôsob spustenia takejto aplikácie však môže byť rôzny:

  • môže sa jednať o URL adresu, ktorú treba do prehliadača napísať

  • môže sa jednať o odkaz, na ktorý je treba kliknúť a až tak sa spustí prehliadač s aplikáciou

  • môže byť zosnímaný QR kód s adresou aplikácie

  • aplikácia môže byť stiahnutá z obchodu platformy, pričom sa bude tváriť ako normálna aplikácia, ktorá nebude zobrazovať adresný riadok, ale na pozadí sa bude jednať len o WebView, v ktorom sa otvorí linka s adresou aplikácie

• Aplikácie sú teda umiestnené na vzdialenom serveri a do prehliadača sa musia stiahnuť zakaždým (alebo takmer zakaždým), keď sa aplikácia spustí. Obyčajne sú to naozaj len webové stránky optimalizované pre zobrazovanie na mobilnom zariadení, napr. http://m.ebay.com, http://m.facebook.com a pod. Ale môže sa jednať aj o seriózne Single Page Applications (SPA), ktoré vedia v prípade potreby pracovať aj offline.

Výhody webových aplikácií

• (slide) Medzi výhody webových aplikácií patria:

  • Aplikácie sa neinštalujú na zariadenie, pretože sú umiestnené na vzdialenom serveri. Spustia sa len vo webovom prehliadači.

  • Jednoduchá správa a údržba aplikácií, nakoľko nevyžadujú od používateľa žiadne špecifické oprávnenia pre inštalovanie/aktualizáciu. Nová verzia sa distribuuje na webovom serveri a používatelia sa k nej dostanú automaticky, keď aplikáciu spustia.

  • Aplikácie sú prenositeľné aj na iné systémy, nakoľko pre ich spustenie postačuje len webový prehliadač.

Nevýhody webových aplikácií

• (slide) Medzi nevýhody webových aplikácií patria:

  • Pre ich spustenie a používanie je potrebné pripojenie do internetu.

  • Aplikácie sú silne závislé od schopností prehliadača.

  • Webové aplikácie nemajú prístup k natívnemu API a platforme. To znamená, že aplikácia nebude mať prístup napr. ku kontaktom, notifikáciám alebo ku lokálne uloženým údajom.

  • Aplikácie nemusia mať prístup ku hardvéru zariadenia, ako napr. ku kamere alebo GPS. Vzhľadom na to, že aj HTML5 technológie a prehliadače sa vyvíjajú, mnohé aj hardvérové komponenty zariadenia môžu byť dostupné cez vhodné volanie v prehliadači.

  • Obmedzené možnosti používateľského rozhrania, ktoré sú dané možnosťami technológií HTML5. To sa môže prejaviť napr. tak, že používateľské rozhranie webových aplikácií bude odlišné od natívnych aplikácií pre danú platformu. Existujú však CSS rámce, ktoré vedia práve tento dopad minimalizovať a vzhľad webových aplikácií dokáže byť takmer identický so vzhľadom natívnych aplikácií.

  • Pre spustenie je potrebné napísať adresu do prehliadača alebo si vytvoriť vlastný spúšťač.

  • (Nie) sú distribuované prostredníctvom obchodu danej platformy.

Progresívne webové aplikácie (PWA)

• (slide) Špeciálnym prípadom webových aplikácií sú Progresívne webové aplikácie (z angl. Progressive Web Applications), skrátene označované ako PWA. Tieto aplikácie vyzerajú a pracujú ako bežné webové stránky, ale ponúkajú funkcionalitu natívnych aplikácií. To znamená, že vedia napr. pracovať aj offline a majú prístup ku hardvéru zariadenia, na ktorom je aplikácia spustená.

• Progresívne aplikácie sa neinštalujú cez obchod platformy, ale dajú sa stiahnuť z webovej stránky, ktorá ponúka svoje funkcie aj vo forme PWA.

• PWA sú pomerne mladou technológiou. Za jej vznikom stoja ľudia zo spoločnosti Google, ktorí tento termín prvýkrát použili v roku 2015. Aj napriek tomu už dnes poskytujú svoje aplikácie vo forme PWA aplikácií mnohé veľké spoločnosti. Výnimkou je spoločnosť Apple, na ktorého zariadeniach sa síce PWA aplikácie dajú inštalovať a používať, ale tento proces je stále zbytočne komplikovaný. V tomto prípade sa dá len špekulovať, že ťažkopádna podpora je zrejme kvôli tomu, že inštalácia a distribúcia PWA aplikácií obchádza ich obchod s aplikáciami a teda spoločnosť Apple oberá o prípadný zisk z ich predaja a distribúcie.

Hybridné aplikácie

• (slide) Hybridné aplikácie (z angl. Hybrid Applications) predstavujú kombináciu oboch predchádzajúcich prístupov. Sú to vlastne webové aplikácie, ktoré vyzerajú a pracujú ako natívne aplikácie.

• Hybridné aplikácie sa vytvárajú pomocou HTML5 technológií a majú prístup k natívnemu API. Tým pádom sa vedia dostať ku špecifickým funkcionalitám platformy, ako aj ku hardvéru zariadenia.

• Architektúra hybridnej aplikácie je zobrazená na nasledujúcom obrázku. Aplikácia obsahuje tzv. Web View (izolovanú inštanciu prehliadača), ktorý umožňuje spustiť webovú aplikáciu vo vnútri natívnej aplikácie. Tento Web View využíva wrapper, pomocou ktorého dokáže webová aplikácia komunikovať s natívnou platformou a mať tak prístup ku zdrojom zariadenia (napr. GPS, databáza, súbory atď.). Tento wrapper nie je súčasťou natívnej platformy, ale sú to produkty tretích strán (napr. Apache Cordova alebo Ionic).

  

• V prípade inštalácie, spúšťania a aj aktualizácie sa aplikácia správa ako natívna aplikácia. Inštaluje sa z obchodu danej platformy, sťahuje sa do zariadenia a spúšťa ju operačný systém. Pri aktualizácii sa aplikácia znova sťahuje.

Výhody hybridných aplikácií

• (slide) Medzi výhody hybridných aplikácií patria:

  • Aplikácie sú cross-platformové, čo znamená, že rovnakú aplikáciu je možné spustiť na viacerých platformách. V špeciálnych prípadoch je samozrejme možné vytvoriť aj platformovo závislý kód, ktorý sa použije len na príslušnej platforme.

  • Je potrebné udržiavať len jeden kód.

  • Aplikácie majú prístup ku samotnému zariadeniu a jeho hardvéru.

  • Vývoj je relatívne rýchly, jednoduchý a lacný. Na tvorbu hybridných aplikácií stačia znalosti a nástroje potrebné pre tvorbu webových stránok/aplikácií.

  • Sú distribuované pomocou obchodu danej platformy.

  • Pracujú aj offline.

  • Hybridné aplikácie môžu slúžiť aj ako Minimal Viable Product na overenie nápadu pred jeho napísaním ako natívnej aplikácie.

Nevýhody hybridných aplikácií

• (slide) Medzi nevýhody hybridných aplikácií patria:

  • Hybridné aplikácie neposkytujú rovnaký výkon ako natívne aplikácie. Sú teda typy aplikácií, pre ktoré sa hybridné aplikácie vyslovene nehodia.

  • Wrapper nemusí mať implementovanú podporu všetkých možností natívneho API. Obyčajne však poskytuje podporu pre tvorbu rozširujúcich modulov (plugin-ov), pomocou ktorých je možné chýbajúcu funkcionalitu doimplementovať.

  • Hybridné aplikácie, podobne ako webové aplikácie, nemusia vyzerať rovnako ako natívne aplikácie. Je to však záležitosť dostupných CSS rámcov. Dokonca sa môže stať, že tá istá aplikácia môže vyzerať ináč na dvoch rozličných platformách.

  • obmedzenie vzhľadom na možnosti Web View-u

Native? Web? Hybrid? Which one to Choose?

• (slide) Takže chcete vytvoriť mobilnú aplikáciu a tá má byť… natívna? Alebo stačí webová? Alebo to bude hybrid?

  

• Na otázku “Ktorý prístup je najlepší?” neexistuje univerzálna odpoveď. Toto rozhodnutie záleží od viacerých faktorov a v prípade, že ste len obyčajný vývojár, nemusí zálažeť ani od vás.

• Často však rozhodnutie môže závisieť od mnohých faktorov, resp. požiadaviek, ako napr.:

  • beh na konkrétnej platforme
  • výkon aplikácie
  • cena vývoja aplikácie
  • multiplatformnosť
  • práca s konkrétnym hardvérom zariadenia
  • prístup ku konkrétnej súčasti platformy

Výročný prieskum Stack Overflow medzi vývojármi

• Pozrime sa však na to, ako vyzerajú aktuálne trendy v oblasti vývoja aplikácií pre chytré zriadenia. V rokoch 2015 a 2016 portál DZone urobil na túto tému prieskum, ktorého sa zúčastnilo vyše 500 (v roku 2015) a 400 (v roku 2016) IT profesionálov, ktorí sú nejakým spôsobom zahrnutí v oblasti mobilných technológií. Ich výsledky zverejnili vo svojich DZone’s Guide to Mobile Development 2015 a DZone’s Guide to Mobile Development 2016. Odvtedy však podobný prieskum neurobili :-/

• (slide) Každý rok však portál Stack Overflow robí svoj vlastný prieskum. Nie je síce zameraný výlučne na vývojárov mobilných aplikácií, ale z mnohých otázok sa dajú aktuálne trendy vyčítať. Posledný je z roku 2022 a zúčastnilo sa ho cez 70000 vývojárov z celého sveta.

  

  Poznámka

  Keďže položiek vo výsledkoch bolo pomerne veľa, nadbytočné položky som odstránil, aby sa mi do prezentácie zmestili len tie zaujímavé veci ;)

• (slide) Jedna zo štandardných otázok sa týka popularity programovacích jazykov. Už niekoľko rokov sa na prvom mieste drží jazyk JavaScript. Samozrejme - prieskum sa týka technológií celkovo nehľadiac na typ projektov. Ale v prieskume sa nachádzajú aj jazyky, ktoré sú takmer výlučne určené pre tvorbu mobilných aplikácií, ako napr. Swift, Kotlin a Dart.

• (slide) V ďalších otázkach sa pýtali vývojárov na používané rámce vo vývoji webových aplikácií a ostatných aplikáciách. Nás budú zaujímať tie ostatné, kde sa ocitli aj rámce pre vývoj mobilných aplikácií, kde tento rok dominoval Flutter. Za ním nasledoval React Native a s odstupom Ionic.

• (slide) Ak by sme mali z tohto prieskumu vyvodiť záver, tak by sme mohli povedať, že:

  • Tento rok sa do prieskumu nedostala otázka ohľadom platforiem, kde by sa zobrazili mobilné platformy, takže nevieme povedať, vývoju ktorej platformy sa oplatí venovať viac. Vzhľadom na dnešnú tému je to však bezpredmetné.

  • Vzhľadom na popularitu jazykov a rámcov sa dá povedať, že sa určite stretnete s jazykom JavaScript, o čom svedčí aj popularita rámca React Native priamo v prieskume, aj keď ho tento rok predbehol rámec Flutter.

• My sa v rámci predmetu budeme venovať vývoju PWA aplikácií primárne pre OS Android.

Aplikácia baterka

• (slide) Miesto štandardnej Killer App s názvom Hello world sa pustíme rovno do niečoho použiteľnejšieho. Vytvoríme si aplikáciu, ktorá nemôže chýbať v žiadnej aplikácii typu švajčiarsky nožík (z angl. Swiss Knife) - flashlight (baterku). My ju však nazveme poetickejšie - Torch.

  Poznámka

  Táto aplikácia nás bude sprevádzať väčšou časťou kurzu. Aj napriek tomu, že je dosť jednoduchá, si na nej ilustrujeme väčšinu preberanej problematiky. Jej jednoduchosť nakoniec bude výhodou.

• (slide) Aby sme si ukázali, ako táto aplikácia bude vyzerať a ako sa bude správať, jednoduché demo sa nachádza na nasledujúcom slajde.

Kostra aplikácie

• vytvoríme základnú kostru aplikácie, ktorá sa bude dať stiahnuť a fungovať offline

• Projekt sa musí skladať:

  • index.html - hlavná stránka
  • manifest.json alebo manifest.webmanifest - metaúdaje o aplikácii
  • sw.js - service worker
  • js/app.js -
  • assets/ - priečinok s multimediálnymi súbormi (obrázky a ikony)

Súbor index.html

• najprv vytvoríme index.html súbor s čistou kostrou pre HTML dokument

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>PWA Torch App</title>
  </head>
  <body>
      <img src="assets/bulb_off.png"/>
      <br/>
      <button type="button">Turn On</button>
  </body>
  </html>

• aby veci fungovali, tak vytvoríme priečinok assets/ a do neho nahráme tieto dva súbory:

  

Manifest

• manifest musí obsahovať minimálne tieto kľúče:

  • short_name a/alebo name - You must provide at least the short_name or name property. If both are provided, short_name is used on the user’s home screen, launcher, or other places where space may be limited. name is used when the app is installed.

  • icons - When a user installs your PWA, you can define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and so on. Ikony sú reprezentované ako zoznam, pričom každá položka je objekt pozostávajúci z kľúčov src, sizes a type. For Chromium, you must provide at least a 192x192 pixel icon, and a 512x512 pixel icon

    Ikonu aplikácie si môžeme pripraviť z tejto ikony:

    

  • start_url -

  • display - Určuje, ako bude aplikácia zobrazená. Hodnota môže byť jedna z fullscreen, standalone, minimal-ui alebo browser.

• manifest našej aplikácie môže vyzerať napr. takto:

  {
      "name": "PWA Torch",
      "short_name": "pwatorch",
      "description": "Mega supa torch app",
      "icons": [
          {
              "src": "/assets/icons/icon_192x192.png",
              "sizes": "192x192",
              "type": "image/png"
          },
          {
              "src": "/assets/icons/icon_512x512.png",
              "sizes": "512x512",
              "type": "image/png"
          }
      ],
      "start_url": "/index.html",
      "display": "standalone",
      "orientation": "portrait",
      "background_color": "#3367D6",
      "theme_color": "#3367D6"
  }

Pridanie manifestu

• manifest pridáme do hlavičky index.html súboru:

  <link rel="manifest" href="manifest.json">

Nástroje pre vývojárov

• na vývoj budem používať prehliadač postavený na jadre Chromium

• to, že veci pracujú ako majú, si môžeme pozrieť cez nástroje pre vývojárov - v konzole môžeme overiť, že je všetko v poriadku a v karte Application sa dozvieme viac o samotnej aplikácii. Keď si klikneme na Manifest, mali by sa nám zobraziť informácie z manifestu aplikácie.

• Dozvieme sa však, že nemáme žiadny Service Worker.

Service Worker

• vytvoríme prázdny súbor /sw.js

• Service Worker zaregistrujeme v súbore app.js:

  // register service worker
  if ("serviceWorker" in navigator) {
      navigator.serviceWorker
          .register("/sw.js")
          .then(function (reg) {
              console.log("service worker was registered", reg);
          })
          .catch(function (err) {
              console.error(
                  "service worker was not registered due to error",
                  err
              );
          });
  }

• aby všetko fungovalo, musíme skript app.js nahrať v našej aplikácii - pred uzatvorením elementu <body>:

  <script src="/js/app.js"></script>

• môžeme sa opäť pozrieť do vývojárskych nástrojov, kde problém s chýbajúcim Service Worker-om zmizol, ale objavila sa správa, že stránka sa nedá používať v režime offline.

Offline aplikácia

• lighthouse -> PWA

• najprv budeme počúvať na udalosť install:

  // install service worker
  self.addEventListener("install", function (event) {
      console.log("service worker has been installed.");
  });

• potom budeme počúvať udalosť activate:

  // activate service worker
  self.addEventListener("activate", function (event) {
      console.log("service worker has been activated.");
  });

• to by malo stačiť na to, aby sme aplikáciu vedeli nainštalovať. aby bol však spokojný aj Lighthouse, ešte treba počúvať na udalosť fetch:

  // fetch event
  self.addEventListener("fetch", function (event) {
      console.log("fetch event registered...", event);
  });

Záver

• Dnes sme si predstavili typy mobilných aplikácií, pozreli sme si aktuálne trendy v oblasti vývoja aplikácií pre chytré zariadenia. Urobili sme si jednoduchú offline PWA aplikáciu.pracovať.

• Nabudúce náš vývoj rozpútame naplno ;)

Ďalšie zdroje

• Add a web app manifest
• Web app manifests
• MDN: Progressive web apps (PWAs)
• MDN: Making PWAs work offline with Service workers
• What PWA Can Do Today - A showcase of what is possible with Progressive Web Apps today.