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

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

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.

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.

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.

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

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

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.

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

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.

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)

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.

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

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.