Vývoj aplikací na Firefox OS

Ostatní jazyky 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": "david.strnad@post.cz"
 },
 "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://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://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ženo 8x (2.19 kB)
Aplikace je včetně zdrojových kódů

 

  Aktivity (1)

Článek pro vás napsal David Strnad
Avatar
Autor se věnuje vývoji her v herním enginu Unreal engine a vývoji aplikací na FFOS.

Jak se ti líbí článek?
Celkem (5 hlasů) :
4444 4


 


Miniatura
Předchozí článek
Scratch
Miniatura
Následující článek
Ostatní programovací jazyky

 

 

Komentáře
Zobrazit starší komentáře (6)

Avatar
David Novák
Tým ITnetwork
Avatar
David Novák:

Náhodou celkem často jo ;) :D

Problém s Fx je, že se to používá na spoustu věcí - ať už třeba při značení grafických karet jako něco "extra", tak třeba jako zkratka pro funkci.

Kdežto FFOS je naprosto jasný a jednoznačný a každý trochu zběhlý člověk si domyslí, o co jde..

Úroveň článků je samozřejmě důležitá.. Ale není zase dobré bazírovat na každé maličkosti - obzvlášť ne na zkratce, když ta oficiální ani není ustálená..

Odpovědět 1.6.2015 14:57
Chyba je mezi klávesnicí a židlí.
Avatar
David Novák
Tým ITnetwork
Avatar
David Novák:

Jo a udělal jsem teda krátký research ohledně zkratky.. A žádná oficiální neexistuje. Ten twitter je neoficiální a spravují ho nějací fanoušci.. A přímo na stránkách Mozzily, které jsi sdílel je:

FxOS
for internal usage, this is the official abbreviation of “Firefox OS,” but it should not be used in any external communications

Takže kdybychom v článku použili zkratku FxOS, tak dokonce porušíme politiku autorů.. ;)

Odpovědět  +1 1.6.2015 15:00
Chyba je mezi klávesnicí a židlí.
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:

Jako vždycky si porýpu:

  • PSPad je snad nejhorší editor, co můžeš používat hned po Notepadu a ty tu radíš oboje...
  • Máš naprosto domotané screeny s aplikací - jednou je to UNITY, podruhé DEVBOOK a potřetí ITnetwork...
  • Jak už ti vytýkali výše, používáš HTML 4.01
  • Firefox OS, ne FIREFOX OS
  • Firefox OS 3.0 je již v současné době velmi stabilní systém, kde vůbec není problém testovat
  • "Tento soubor si uložíme a později ho použijeme ke spuštění aplikace." - manifest se nepoužívá ke spuštění aplikace

Jinak super, že někdo začal psát :)

Odpovědět  +3 1.6.2015 17:29
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
David Novák
Tým ITnetwork
Avatar
Odpovídá na Michal Vašíček
David Novák:

Zajímalo by mě, proč je PSPad nejhorší editor.. Já osobně, když jsem občas na woknech, používám Notepad++, který je vcelku podobný, jen provedení je o něco lepší. PSPad jsem kdysi používal a neměl jsem žádný problém..

A co ti nedává smysl na screenech? Má aplikaci, co se jmenuje Devbook a její jediná funkce je přesměrování na itnetwork.cz :D Takže je vcelku pochopitelné, že na screenu aplikace se objeví ITnetwork.. ;)

A použití HTML 4 jsem nevytýkal. Zeptal jsem se, jestli k tomu je nějaký důvod - a důvod je ze zvyku.. U takové krátké ukázky? Proč ne ;)

Odpovědět  +1 1.6.2015 17:36
Chyba je mezi klávesnicí a židlí.
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na David Novák
Michal Vašíček:

Zkoušel jsi někdy WebStorm? Není nejhorší, ale pro vývoj aplikací, kde je potřeba velmi javascriptu je opravdu otřesný.

Na screenech mi nedává smysl to, že na prvním screenu ze souhrnu WebIDE se aplikace jmenuje UNITY a jako ikonu má Učko. Na ostatních screenech souhrnu se appka jmenuje DEVBOOK a má logo ITnetworku - míchá tři věci dohromady.

Odpovědět  +1 1.6.2015 17:39
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
David Novák
Tým ITnetwork
Avatar
Odpovídá na Michal Vašíček
David Novák:

Tak jestli to chápu dobře, tak to bude asi nějaký template nebo něco - ještě předtím než začal psát ten manifest..

Jak souvisí WebStorm s PSPadem? A ne.. nezkoušel..

Odpovědět 1.6.2015 17:51
Chyba je mezi klávesnicí a židlí.
Avatar
Libor Šimo (libcosenior):

Hlavne aby ste autora článku neodradili od písania ďalších...

Odpovědět  +3 2.6.2015 7:51
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Neaktivní uživatel:

Budou resp. bude nějaký seriál, se články o tomto specializovaném vývoji? :o chytilo mě to!
Aneb, další důvod, proč používát Mozillu Firefox

Odpovědět  +3 3.6.2015 20:10
Neaktivní uživatelský účet
Avatar
David Strnad
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
David Strnad:

Zatím nevím plánuji co bych mohl do dalších článků přesně napsat.

 
Odpovědět 4.6.2015 10:41
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na David Strnad
Ondrca:

Mohl by jsi třeba udělat článek o vytvoření něčeho jednoduchého - Tic Tac Toe
Přidat k tomu splash screen a responzivitu :)

Odpovědět 4.6.2015 17:03
Zase jsem o něco chytřejší
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 16. Zobrazit vše