Jeden zdrojový kód pre 4 rôzne platformy?

favicon-wame
banner jeden zdrojovy kod pre 4 rozne platformy
Áno, čítate správne, túto mágiu dokáže jedine hybridná aplikácia. Ako to je vôbec možné? Skúste si spustiť svoju vlastnú aplikáciu sami pomocou týchto 3 skvelých krokov, ktoré vám predstavíme v našom článku. Je to úplne jednoduché.

Á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:

Node.js

GIT

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

appka_desktop

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č.

wame logo

Tvoríme e-shopy, aplikácie a informačné systémy

Mohlo by Vás zaujímať

Ako býva zvykom, doba ide dopredu a s ňou aj grafické prvky či e-commerce trendy, a vy preto rozmýšľate nad redizajnom webu či eshopu? Kedy je vhodný čas a načo si dávať pozor? V tomto článku sa dozviete 7 tipov kedy pristúpiť k redizajnu.
S tímom WAME sme sa v máji zúčastnili dvoch významných veľtrhov. Pozrite sa, ako vyzerala naša prezentácia tvorby e-shopov v Magento 2 a aplikácie pre servisných technikov, čo všetko sme stihli, aké projekty nás v budúcnosti čakajú a ako sme sa vo voľnom čase zabavili.
Čo to vlastne je API rozhranie a prečo je potrebné ho zabezpečiť? Nikdy ste o tom nepočuli? Nevadí, v tomto článku sa dozviete viac.