Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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.

Další vývojové nástroje pro tvorbu aplikací

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

Další vývojové nástroje pro tvorbu aplikací

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.

Další vývojové nástroje pro tvorbu aplikací

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.

Další vývojové nástroje pro tvorbu aplikací Další vývojové nástroje pro tvorbu aplikací

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.

Další vývojové nástroje pro tvorbu aplikací
Další vývojové nástroje pro tvorbu aplikací

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.
Další vývojové nástroje pro tvorbu aplikací
  • 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.

Další vývojové nástroje pro tvorbu aplikací
Další vývojové nástroje pro tvorbu aplikací

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: Další vývojové nástroje pro tvorbu aplikací

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.

Další vývojové nástroje pro tvorbu aplikací

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

Další vývojové nástroje pro tvorbu aplikací

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.

Další vývojové nástroje pro tvorbu aplikací
Další vývojové nástroje pro tvorbu aplikací

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)

Další vývojové nástroje pro tvorbu aplikací
Další vývojové nástroje pro tvorbu aplikací
Další vývojové nástroje pro tvorbu aplikací

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

Další vývojové nástroje pro tvorbu aplikací

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

Další vývojové nástroje pro tvorbu aplikací
Další vývojové nástroje pro tvorbu aplikací

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ů

 

Všechny články v sekci
Další vývojové nástroje pro tvorbu aplikací
Článek pro vás napsal David Strnad
Avatar
Uživatelské hodnocení:
6 hlasů
Autor se věnuje vývoji her v herním enginu Unreal engine a vývoji aplikací na FFOS.
Aktivity