Vývoj aplikací na Firefox OS
Vítejte u návodu na tvorbu aplikací na operační systém FFOS. V tomto návodu si povíme, jak tento systém funguje. Jak fungují aplikace na tento systém a jak tyto aplikace vyvíjet a testovat.
Co je to FFOS?
Firefox OS (neboli FFOS, Boot to Gecko, nebo B2G) je open source operační systém založený na Linuxovém jádru. Tento operační systém je vyvíjen na smartphony a tablety společností Mozzila, která mimo jiné vyvíjí i stejnojmenný internetový prohlížeč Firefox. V poslední době je tento operační systém využit i v televizích od firmy Panasonic. FFOS je navržen tak aby HTML5 aplikace komunikovaly přímo s hardwarem zařízení pomocí JavaScriptu a webAPI. Byl demonstrován na smartphonech kompabitilních s Androidem a na Raspberry Pi. Tento operační systém je navržen tak, aby spolehlivě pracoval na zařízeních s nižší hardwarovou výbavou. Tím je dána cena těchto zařízení, která např. v Indii začíná na ceně cca 500 Kč.
Zařízení s FFOS
V současné době (květen 2015) vyrábí smartphony s operačním systém společnosti: Alcatel, LG, ZTE, Huawei, Intex, Spice, Symphony, Zen, Cherry mobile a Orange. Tyto smartphony jsou dostupné ve 29 zemích včetně České republiky. V České republice prodává smartphony s FFOS mobilní operátor T-Mobile, konkrétně se jedná o Alcatel One Touch Fire E.
Základy vývoje aplikací
Aplikace na FFOS se programují v jazyce HTML5 + JavaScript, podobně jako webové stránky. Naše aplikace je vlastně taková „malá webová stránka“ která běží v našem smartphonu. Funkčnost této aplikace zajišťuje tzv. manifest, který řídí běh aplikace, určuje, zda je v aplikaci lišta, zda je aplikace ve fullscreenu, jméno aplikace, ikonu aplikace a mnoho dalších věcí, které si představíme v dalších dílech. Z tohoto vyplívá, že pro tento návod je dobré mít alespoň základní znalosti HTML a Javascriptu. V tomto návodu budu psát kód v aplikaci PSPad, ale je to na vás použít lze jakýkoliv editor HTML, či pouhý poznámkový blok.
Testování aplikací
Pro testování aplikací je navržen tzv. Firefox OS simulátor který je implementován do webového prohlížeče Firefox. Tento simulátor můžeme otevřít v podokně vývojář pod tlačítkem WebIDE, práci s tímto simulátorem si vysvětlíme později. Další možnost testování aplikací je vlastní smartphone s FFOS , tyto aplikace instalujeme do smartphonu taktéž pomocí WebIDE. Toto testování si ukážeme stejně jako testování v simulátoru později.
Základní manifest
Toto jsou základní „příkazy“, které musí obsahovat každý manifest. V opačném případě naše aplikace nebude fungovat.
- Name - Jméno aplikace
- Description - Popis aplikace
- launch_path - Cesta k html souboru
- icons - Ikony aplikace (standardně 128*128 a 512*512 pixelů)
- Developer - Jméno vývojáře
- default_locale - Standardní jazyk aplikace
- type - Typ aplikace (web / certificated / privilegeded)
Náš první manifest
Nyní si připravíme náš první manifest. Otevřeme náš textový editor a vytvoříme nový soubor s názvem 'manifest.webapp'. Do tohoto souboru budeme psát následující 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 soubor si uložíme a později ho použijeme ke spuštění aplikace.
Další užitečné příkazy pro manifest
- Chrome - Lišta s příkazy zpět, vpřed , obnovit atd.
- Fullscreen - Aplikace přes celou obrazovku (bez horního panelu s časem atd.)
- Locales - Další jazyky aplikace
- Orientation - Orientace (otočení) displeje
- Version - Verze aplikace ( pozor při nahrání další verze aplikace musí mít větší číslo než předešlá)
Nyní do našeho manifestu přidáme další příkazy. Hotový manifest bude vypadat např. takto:
{ "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 soubor
Jako první krok si v našem textovém/HTML editoru založíme novou HTML stránku, kterou pojmenujeme jako index.html a uložíme do složky s manifestem, který jsme vytvořili v minulém díle.
Nyní do našeho HTML souboru vložíme metatag, kterým se v naší aplikaci přesměrujeme na adresu www.itnetwork.cz.
Metatag:
<meta http-equiv="refresh" content="0;url=http://www.itnetwork.cz">
Náš HTML kód bude tedy vypadat nějak 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, abychom ho mohli později použít.
Vytvoření ikony
Nyní si povíme něco o tvorbě ikon, ikona záleží jen na vaší fantasii, důležité je jen, aby měla předepsané rozměry, dle manifestu. Pro tento návod budeme tedy potřebovat jen ikonu o rozměrech 128*128 pixelů. Ikona může tedy vypadat nějak takto:
Ve složce s naším manifestem a HTML souborem si vytvoříme složku s názvem icons a do této složky uložíme naší ikonu, kterou pojmenujeme icon128.png.
Simulátor
Nyní si nainstalujeme simulátor. Pro spuštění simulátoru je nutné mít nainstalovaný webový prohlížeč Firefox, ve kterém se náš simulátor spouští. Proto otevřeme prohlížeč Firefox a v menu otevřeme okno vývojář a poté klikneme na WebIDE.
Otevře se nám okno prostředí WebIDE, kde otevřeme okno „Volba běhového zařízení“. Potřebujeme nainstalovat simulátor, a proto klikneme na „Instalovat simulátor“.
Otevře se nám další okno kde jsou zobrazeny všechny dostupné simulátory, a kde máme možnost nainstalovat libovolný simulátor, my vybereme poslední stabilní, což je v toto chvíli verze 2.0.
Po nainstalování požadované verze simulátoru klikneme znovu na „Volba běhového prostředí“, a vybereme námi nainstalovaný simulátor (FIREFOX OS 2.0)
Připojení smartphone
Připojení vlastního smartphonu s FFOS je jednoduché, prakticky stačí připojit smartphone přes USB k našemu PC, počkáme na nainstalování ovladačů a v rozhraní WebIDE klikneme na tlačítko „Volba běhového prostředí“. Rozdíl je v tom že nyní klikneme místo na FIREFOX OS 2.0 na vlastní smartphone (jméno se liší podle typu smartphonu).
Import do WebIDE
Nyní si v prostředí WebIDE klikneme na tlačítko Otevřít aplikaci a dále v pod okně klikneme na „otevřít zabalenou aplikaci“. Teď už jenom stačí najít cestu ke složce s naší aplikací (v této složce máme manifest, index, a složku s ikonami. Když cestu potvrdíme, aplikace se nám nahraje do prostředí.
Spuštění aplikace
Nyní je čas spustit naší aplikaci, postup je nyní stejný pro obě možnosti (simulátor / smartphone) - stačí vybrat běhové prostředí. Nyní jen klikneme na tlačítko play uprostřed prostředí WebIDE a aplikace se spustí.
Závěr
Nyní je naše aplikace hotová a odzkoušená. Dále muže každý zkoušet a experimentovat po svém. Záleží jen na vaší fantazii a znalostech HTML + Javascriptu.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 21x (2.19 kB)
Aplikace je včetně zdrojových kódů