Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - 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í.
C# week + discount 30

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.


 

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

 

Všetky články v sekcii
Ďalšie vývojové nástroje pre tvorbu aplikácií
Článok pre vás napísal David Strnad
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje vývoji her v herním enginu Unreal engine a vývoji aplikací na FFOS.
Aktivity

 

 

Komentáre

Avatar
David Novák
Tvůrce
Avatar
David Novák:1.6.2015 14:57

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

Odpovedať
1.6.2015 14:57
Chyba je mezi klávesnicí a židlí.
Avatar
David Novák
Tvůrce
Avatar
David Novák:1.6.2015 15:00

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ů.. ;)

Odpovedať
1.6.2015 15:00
Chyba je mezi klávesnicí a židlí.
Avatar

Člen
Avatar
:1.6.2015 17:29

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 :)

 
Odpovedať
1.6.2015 17:29
Avatar
David Novák
Tvůrce
Avatar
Odpovedá na
David Novák:1.6.2015 17:36

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 ;)

Odpovedať
1.6.2015 17:36
Chyba je mezi klávesnicí a židlí.
Avatar

Člen
Avatar
Odpovedá na David Novák
:1.6.2015 17:39

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.

 
Odpovedať
1.6.2015 17:39
Avatar
David Novák
Tvůrce
Avatar
Odpovedá na
David Novák:1.6.2015 17:51

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

Odpovedať
1.6.2015 17:51
Chyba je mezi klávesnicí a židlí.
Avatar
Libor Šimo (libcosenior):2.6.2015 7:51

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

Odpovedať
2.6.2015 7:51
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Neaktivní uživatel:3.6.2015 20:10

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

Odpovedať
3.6.2015 20:10
Neaktivní uživatelský účet
Avatar
David Strnad
Tvůrce
Avatar
Odpovedá na Neaktivní uživatel
David Strnad:4.6.2015 10:41

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

 
Odpovedať
4.6.2015 10:41
Avatar
Ondrca
Tvůrce
Avatar
Odpovedá na David Strnad
Ondrca:4.6.2015 17:03

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 :)

Odpovedať
4.6.2015 17:03
Zase jsem o něco chytřejší
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!