perjantai 1. marraskuuta 2013

Näin teet yksinkertaisen sovelluksen Firefox OS:lle

Firefox OS on Mozilla-säätiön ylläpitämä mobiilialusta eli siis älypuhelinkäyttöjärjestelmä. Koska Firefox OS -pohjaisia puhelimia on hieman vaikea saada Suomesta (eBay:sta niitä saa), kannattaa kokeilla Firefox-selaimen lisäosaa Firefox OS Simulatoria. Sen voi ladata osoitteesta https://addons.mozilla.org/fi/firefox/addon/firefox-os-simulator/ .

Itse simulaattori käynnistetään napsauttamalla Firefox-selaimessa vasemmassa ylälaidassa Firefox-painiketta, Www-kehitystyökalut, Firefox OS Simulator. Koska kysymyksessä on Alfa-vaiheen lisäosa, mitä vaan voi tapahtua käytön aikana. Kannattaa siis olla tarkkana ja toisaalta kärsivällinen.

Pieni ja yksinkertainen sovellus on itse asiassa www-sivu, joka toimii simulaattorin (ja myös aidon Firefox OS -puhelimen) sisällä. Sovellus koostuu useasta tiedostosta. Lähdetään keräämään tiedostot ja tallennetaan ne niille kuuluville paikoille.

Ensin kirjoitetaan yksinkertainen www-sivu. Liitä ao. koodi johonkin tekstieditoriin ja tallenna nimellä index.html kansioon hello. Kansion nimellä ei ole merkitystä. Se voi olla mikä vaan. Tärkeitä sen sijaan ovat rivit, jotka alkavat <script -tagilla. Hae verkosta *uusin stabiili* jquery. Kokeile täältä: http://jquery.com/download/ . Tallenna tiedosto (tuossa alla se on jquery-1.10.2.min.js) hellon alikansioon nimeltä js. Luo siis samalla kansio js. Muista muuttaa ao. koodiin hakemasi paketin versionumero!

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div></div>
  </body>
</html>

(Vinkki: Firefox-selaimessa on mahdollista kokeilla omia www-sivuja mobiilikoossa ilman simulaatto
riakin. Se tapahtuu niin, että ensin avataan index.html www-selaimeen ja sitten painetaan Control-Shift-M. Näin pääsee määrittelemään selainikkunan koon. Pois pääsee samalla näppäinyhdistelmällä.)

Sitten luodaan toiminnallisuus Javascript-koodin avulla. Ao. koodi sanoo, että "Hello World!" ja sijoittaa tekstin index.html-tiedoston <div></div> -tagien väliin. Kopioi koodi tiedostoon app.js ja tallenna tiedosto hellon alikansioon js.

$(function() {
  $("div").text("Hello World!");
});


Lopuksi pitää luoda tiedosto nimeltä manifest.webapp. Sen koodi on alla. Kyseinen tiedosto määrittelee, millainen sovellus on kysymyksessä, kuka sen on luonut, mikä tiedosto avataan ensimmäisenä (tässä tapauksessa index.html). Jälleen kopioi koodi tekstieditoriin ja tallenna samaan kansioon index.html -tiedoston kanssa.

{
  "name": "Hello World",
  "description": "Testisovellus",
  "version": "1.0",
  "launch_path": "/index.html",
  "developer": {
    "name": "Sakari Castrén",
    "url": "http://sakarinkurssit.blogspot.fi"
  }
}


Nyt tulee olla koossa kansiossa hello tiedostot index.html ja manifest.webapp. Tämän lisäksi alikansiossa js ovat tiedostot app.js ja jquery-1.10.2.min.js. Sitten vain painetaan Simulaattorin Dasboardissa Add Directory ja napsautetaan tiedostoa manifest.webapp. Mikäli kaikki menee hyvin, Validation Result on OK. Tämän jälkeen voikin kuikuilla itse virtuaalipuhelimen ruutua.

Yksi herja minulle sentään ilmestyi. Koska en ollut määrittänyt mitään ikonia, Firefox OS huomautti asiasta ja loi harmaan ja pyöreän kuvakkeen, jossa on raketti keskellä. Ikonin piirtäminen kuuluu asiaan, mikäli aikoo julkaista sovelluksen muiden käyttöön. Ikonin saattaminen mukaan sovellukseen ei ole vaikea rasti. En käy sitä tässä nyt läpi.



Ei kommentteja:

Lähetä kommentti