Áno, čítate správne, túto mágiu dokáže jedine hybridná aplikácia. Skúste si spustiť svoju vlastnú aplikáciu sami pomocou týchto 3 jednoduchých krokov.
Ako to je vôbec možné?
Je to úplne jednoduché. Vytvoríme aplikáciu použitím webových technológií a obalíme ju do knižnice PhoneGap, ktorá dokáže prepojiť nášu aplikáciu s potrebnými mobilnými funkciami (napr.: GPS, Fotoaparát, Snímač odtlačku prsta) a vytvoríme tak prázdnu aplikáciu ktorá má v sebe prehlidač zobrazujúci zdrojový kód.
Čo keď budem chcieť aplikáciu používať OFFLINE?
Aplikácia má v sebe celý zdrojový kód a tak nepotrebuje internetové pripojenie na to aby sa dokázala vykresliť.
Samozrejme ak v aplikácií využívame dáta ktoré ťaháme cez API alebo obrázky ktoré sú dostupné na nejakej URL vzniká problém že sa to nevykreslí, no pri správnom nastavení ukladania týchto dát do zariadenia dokážeme aj tieto dáta po prvom načítaní vykresliť OFFLINE.
Pri klasickom webe je naopak celý zdrojový kód uložený na serveri a bez internetu nemá prehliadač žiadnú šancu vykresliť obsah, dokonca ani vtedy keď sú všetky dáta v cache prehlidača.
1. Čo potrebujem nainštalovať?
Pre správne fungovanie sú potrebné tieto nástroje:
Po nainštalovaní týchto dvoch nástrojov spustíme príkaz, ktorý nainštaluje PhoneGap CLI:
npm install -g phonegap
2. Ako to spojazdním?
Pre tento návod sme sa rozhodli použiť vzorový projekt ktorý je postavený pomocou knižníc Vue.js a Framework 7. Celý projekt si nainštalujeme pomocou tohto jedného príkazu. Príkaz spúštame v priečinku do ktorého sa po spustení vytvorí priečinok s názvom projektu. „<nazov_appky>“ zameňte za vlastný názov.
phonegap create <nazov_appky> com.wame.<nazov_appky> <nazov_appky> --template phonegap-template-vue-f7-split-panel
Po úspešnom nainštalovaní sa v termináli presunieme do priečinka ktorý sa vytvoril a spustíme príkaz pre inštaláciu balíčkov Node.js.
cd <nazov_appky> npm install
Po vytvorení priečinka node_modules pridáme potrebné ikony spustením príkazu v roote projektu
npm install framework7-icons --save
Zdroj celej appky sa nachádza v priečinku src
Potom otvoríme súbor /src/main.js a hneď na začiatok súboru vložíme ikony a cestu k routeru:
import Framework7Icons from 'framework7-icons/css/framework7-icons.css';
import Routes from './routes';
A v roote spustíme develop server:
npm run dev
Automaticky sa otvorí nové okno v prehliadači, kde môžeme vidieť svoju aplikáciu.
Keď sa vám okno neotvorí, skúste ho otvoriť manuálne zadaním URL:
localhost:8080
Takto vyzerá naša aplikácia na desktope, primárnu mobilnú verziu zobrazíme zmenšením okna prehliadača alebo v DevTools prehliadača zapneme funkciu zobrazenia mobilného zariadenia
3. Ako appku dostanem do svojho mobilu?
Aplikácia, ktorá je v priečinku src nie je v stave aby sa dokázala bežne zobraziť v prehliadači a preto ju potrebujeme pred vložením do PhoneGapu buildnut
Buildnutá appka sa ukláda do priečinka www a buildi sa týmto príkazom spusteným v roote projektu:
node ./build-cmd/dev.js
Následne je potrebné do vygenerovaného priečinka www skopírovať priečinok res z rootu projektu.
Pozor! Opätovným spustením buildu sa priečinok res z priečinka www vymaže.
V tomto štádiu máme Appku zbuildenu pre developerské použitie, ak ju chceme spustiť v telefóne ako klasickú aplikáciu z Google Play alebo App Store potrebujeme ju buildnut ešte raz ale produkčne.
Čerstvou novinkou knižnice PhoneGap je buildenie pomocou cloudovej služby PhoneGap Build pri ktorej nepotrebujete SDK požadovanej platformy sťahovať. Takto dokážete vygenerovať iOS, Android a Windows aplikáciu naraz.
Pri tomto spôsobe buildenia využijeme PhoneGap CLI a pomocou toho nahrajeme náš developerský build z priečinka www na server PhoneGap Buildu a tam sa vykoná produkčný build ktorý vráti už len výsledný inštalačný súbor napr.:(nazov_appky.apk – pre android).
Najprv je potrebné sa zaregistrovať na stránke PhoneGap Buildu. Zadarmo môžete vlastniť len 1 privátnu appku.
Po registrácií sa prihlásime spustením tohto príkazu v roote projektu:
phonegap remote login
Po prihlásení môžeme začať build:
phonegap remote build android
Po vybuildení otvorte PhoneGap Build v prehliadači, kde po kliknutí na názov appky môžete vidieť detaily buildu ale taktiež aj stiahnuť inštalačný súbor, ktorý nahrajeme do zariadenia a nainštalujeme.
Pre build iOS aplikácie je potrebné vygenerovať kľúče vo vašom Apple developer účte.
Čo je 4 platforma?
Ak nahráte obsah priečinka www na webový server dokážete ju spustiť aj ako web, cez prehliadač.
