Vývoj aplikácií na Firefox OS
Vitajte u návodu na tvorbu aplikácií na operačný systém Ffos. V tomto návode si povieme, ako tento systém funguje. Ako fungujú aplikácie na tento systém a ako tieto aplikácie vyvíjať a testovať.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/ffos0.jpg)
Čo je to Ffos?
Firefox OS (čiže Ffos, Boot to Gecko, alebo B2G) je open source operačný systém založený na linuxovom jadre. Tento operačný systém je vyvíjaný na smartphony a tablety spoločnosťou Mozzila, ktorá okrem iného vyvíja aj rovnomenný internetový prehliadač Firefox. V poslednej dobe je tento operačný systém využitý aj v televíziách od firmy Panasonic. Ffos je navrhnutý tak aby HTML5 aplikácie komunikovali priamo s hardvérom zariadení pomocou JavaScriptu a WebAPI. Bol demonštrovaný na smartphonoch kompabitilních s Androidom a na Raspberry Pi. Tento operačný systém je navrhnutý tak, aby spoľahlivo pracoval na zariadeniach s nižšou hardvérovou výbavou. Tým je daná cena týchto zariadení, ktoré napr. V Indii začína na cene cca 500 Sk.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/ffos1.jpg)
Zariadenie s Ffos
V súčasnej dobe (máj 2015) vyrába smartphony s operačným systém spoločnosti: Alcatel, LG, ZTE, Huawei, Intex, Spice, Symphony, Zen, Cherry mobile a Orange. Tieto smartphony sú dostupné v 29 krajinách vrátane Českej republiky. V Českej republike predáva smartphony s Ffos mobilný operátor T-Mobile, konkrétne sa jedná o Alcatel One Touch Fire E.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/ffos2.jpg)
Základy vývoja aplikácií
Aplikácia na Ffos sa programujú v jazyku HTML5 + JavaScript, podobne ako webové stránky. Naša aplikácia je vlastne taká "malá webová stránka" ktorá beží v našom smartphonu. Funkčnosť tejto aplikácie zabezpečuje tzv. Manifest, ktorý riadi beh aplikácie, určuje, či je v aplikácii lišta, či je aplikácia vo fullscreen, meno aplikácie, ikonu aplikácie a mnoho ďalších vecí, ktoré si predstavíme v ďalších dieloch. Z tohto vyplíva, že pre tento návod je dobré mať aspoň základné znalosti HTML a Javascriptu. V tomto návode budem písať kód v programe PSPad, ale je to na vás použiť možno akýkoľvek editor HTML, či obyčajný poznámkový blok.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/html.jpg)
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/js.jpg)
Testovanie aplikácií
Pre testovanie aplikácií je navrhnutý tzv. Firefox OS simulátor ktorý je implementovaný do webového prehliadača Firefox. Tento simulátor môžeme otvoriť v table vývojár pod tlačidlom WebIDE, prácu s týmto simulátorom si vysvetlíme neskôr. Ďalšia možnosť testovanie aplikácií je vlastný smartphone s Ffos, tieto aplikácie inštalujeme do smartphonu taktiež pomocou WebIDE. Toto testovanie si ukážeme rovnako ako testovanie v simulátore neskôr.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos2.jpg)
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos3.jpg)
Základné manifest
Toto sú základné "príkazy", ktoré musia obsahovať každý manifest. V opačnom prípade naše aplikácie nebude fungovať.
- Name - Meno aplikácie
- Description - Popis aplikácie
- launch_path - Cesta k html súboru
- icons - Ikony aplikácie (štandardne 128 * 128 a 512 * 512 pixelov)
- Developer - Meno vývojárov
- default_locale - Štandardné jazyk aplikácie
- type - Typ aplikácie (web / certificated / privilegeded)
Náš prvý manifest
Teraz si pripravíme náš prvý manifest. Otvoríme náš textový editor a vytvoríme nový súbor s názvom 'manifest.webapp'. Do tohto súboru budeme písať nasledujúci kód manifestu.
{ "name": "Moje Aplikace", "description": "Toto je moje první aplikace", "launch_path": "/index.html", "icons": { "512": "/img/icon-512.png", "128": "/img/icon-128.png" }, "developer": { "name": "Moje jméno", "url": "http://můj_web.cz" }, "default_locale": "cz" }
Tento súbor si uložíme a neskôr ho použijeme na spustenie aplikácie.
Ďalšie užitočné príkazy pre manifest
- Chrome - Lišta s príkazmi späť, vpred, obnoviť atď.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/ffos5.jpg)
- Fullscreen - Aplikácia cez celú obrazovku (bez horného panelu s časom atď.)
- Locales - Ďalšie jazyky aplikácie
- Orientation - Orientácia (otočenie) displeja
- Version - Verzia aplikácie (pozor pri nahranie ďalšie verzie aplikácie musia mať väčšie číslo než predošlá)
Teraz do nášho manifestu pridáme ďalšie príkazy. Hotový manifest bude vyzerať napr. Nasledovne:
{ "version": "1", "name": "DEVBOOK", "description": "www.devbook.cz", "icons": { "128": "/icons/icon128.png" }, "launch_path": "/index.html", "developer": { "name": "David Strnad", "url": "[email protected]" }, "default_locale": "en", "type": "certified", "chrome": {"navigation": true}, "fullscreen": true }
Html súbor
Ako prvý krok si v našom textovom / HTML editore založíme novú HTML stránku, ktorú pomenujeme ako index.html a uložíme do zložky s manifestom, ktorý sme vytvorili v minulom diele.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos4.jpg)
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos5.jpg)
Teraz do nášho HTML súboru vložíme metatag, ktorým sa v našej aplikácii presmerujeme na adresu www.itnetwork.cz.
metatag:
<meta http-equiv="refresh" content="0;url=http://www.itnetwork.cz">
Náš HTML kód bude teda vyzerať nejako takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <meta http-equiv="refresh" content="0;url=http://www.itnetwork.cz"> <title></title> </head> <body> ITNETWORK </body> </html>
Hotový kód uložíme, aby sme ho mohli neskôr použiť.
Vytvorenie ikony
Teraz si povieme niečo o tvorbe ikon, ikona záleží len na vašej
fantázii, dôležité je len, aby mala predpísané rozmery, podľa manifestu.
Pre tento návod budeme teda potrebovať len ikonu s rozmermi 128 * 128 pixelov.
Ikona môže teda vyzerať nejako takto:
V priečinku s našim manifestom a HTML súborom si vytvoríme priečinok s názvom ikony a do tejto zložky uložíme našej ikonu, ktorú pomenujeme icon128.png.
Simulátor
Teraz si nainštalujeme simulátor. Pre spustenie simulátora je nutné mať nainštalovaný webový prehliadač Firefox, v ktorom sa náš simulátor spúšťa. Preto otvoríme prehliadač Firefox a v menu otvoríme okno vývojár a potom klikneme na WebIDE.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos6.jpg)
Otvorí sa nám okno prostredie WebIDE, kde otvoríme okno "Voľba runtime zariadení". Potrebujeme nainštalovať simulátor, a preto klikneme na "Inštalovať simulátor".
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos7.jpg)
Otvorí sa nám ďalšie okno kde sú zobrazené všetky dostupné simulátory, a kde máme možnosť nainštalovať ľubovoľný simulátor, my vyberieme posledný stabilný, čo je v toto chvíli verzie 2.0.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos8.jpg)
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos9.jpg)
Po nainštalovaní požadovanej verzie simulátore klikneme znovu na "Voľba runtime prostredie", a vyberieme nami nainštalovaný simulátor (FIREFOX OS 2.0)
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos10.jpg)
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos11.jpg)
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos12.jpg)
Pripojenie smartphone
Pripojenie vlastného smartphonu s Ffos je jednoduché, prakticky stačí pripojiť smartphone cez USB k nášmu PC, počkáme na nainštalovanie ovládačov a v rozhraní WebIDE klikneme na tlačidlo "Voľba runtime prostredie". Rozdiel je v tom že teraz klikneme miesto na FIREFOX OS 2.0 na vlastnú smartphone (meno sa líši podľa typu smartphonu).
Import do WebIDE
Teraz si v prostredí WebIDE klikneme na tlačidlo Otvoriť aplikáciu a ďalej v pod okne klikneme na "otvoriť zabalenú aplikáciu". Teraz už len stačí nájsť cestu k priečinku s našou aplikáciou (v tejto zložke máme manifest, index, a zložku s ikonami. Keď cestu potvrdíme, aplikácie sa nám nahrá do prostredia.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos13.jpg)
Spustení aplikácie
Teraz je čas spustiť našu aplikáciu, postup je teraz rovnaký pre obe možnosti (simulátor / smartphone) - stačí vybrať runtime prostredie. Teraz len klikneme na tlačidlo play uprostred prostredia WebIDE a aplikácie sa spustí.
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos15.jpg)
![Ďalšie vývojové nástroje pre tvorbu aplikácií](images/26056/ffos/offos14.jpg)
Záver
Teraz je naša aplikácia hotová a odskúšaná. Ďalej muža každý skúšať a experimentovať po svojom. Záleží len na vašej fantázii a znalostiach HTML + Javascriptu.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 21x (2.19 kB)
Aplikácia je vrátane zdrojových kódov