Aan de slag met Firefox OS App-ontwikkeling

Wat je gaat creëren

In deze tutorial leer je over Firefox OS, apparaten met Firefox OS die beschikbaar zijn op de markt, FxOS wordt uitgevoerd voor testen en het debuggen van apps op WebIDE, en het maken van een basisapp voor FxOS. Ten slotte leert u hoe u bestaande webtoepassingen kunt overbrengen naar FxOS door een manifestbestand te ontwikkelen.

Firefox OS

Firefox OS is ontwikkeld door Mozilla en is vooral bekend voor de Firefox-webbrowser en webmaker. Het is een gratis (vrij van eigen technologie) besturingssysteem dat geschikt is voor smartphones, tablets en zelfs televisies. De projectnaam is Boot to Gecko (B2G).

Firefox OS is gericht op het bieden van een webgebaseerde oplossing voor ontwikkelaars omdat de applicaties zijn gebouwd met HTML5, CSS en Javascript, samen met enkele open web-API's die een ontwikkelaar helpen bij het gebruiken van de hardware en services van het apparaat, zoals camera, batterijstatus en trillingen. Eigenlijk is de volledige gebruikersinterface van FxOS een webtoepassing met de naam Gaia, die andere webtoepassingen kan starten en weergeven.

WebIDE voor het uitvoeren van FxOS Simulator

U kunt Firefox OS uitvoeren door WebIDE te starten (beschikbaar in Firefox Developer Edition). Ik zal FxOS 2.2 gebruiken.

Als u eerder geneigd bent om uw apps te testen of het ontwikkelingswerk op een echt apparaat uit te voeren, kunt u de apparaatcatalogus bekijken.

Een basisapp bouwen voor FxOS

Laten we een eenvoudige Hello World-app voor FxOS samenstellen om de procedure voor het bouwen van een app voor het platform te beschrijven. Allereerst moeten we een manifestbestand ontwikkelen. Het zal worden genoemd manifest.webapp. Een manifestbestand ziet er als volgt uit:

"naam": "Hello World", "description": "Hello Tuts + App", "version": "1.0", "launch_path": "/index.html", "developer": "name": "Tanay Pant "," url ":" http://twitter.com/tanay1337 "," permissies ": 

Geweldig, omdat we nu het manifestbestand hebben gemaakt, kunnen we verder gaan met het ontwikkelen van onze index.html pagina.

   Hallo Tuts+   

Hallo Tuts+

En tot slot het app.js wat de kernmotor van onze app is en zich bevindt op js / app.js.

var-knop = document.getElementById ('myButton'); var txtInput = document.getElementById ('myTextInput'); button.addEventListener ('klik', functie () var text = txtInput.value; alert (text););

Dus onze zeer eenvoudige applicatie voor FxOS is gebouwd, en nu is het tijd om het in de simulator uit te voeren! Om dat te doen, eerst en vooral:

  1. Open WebIDE
  2. kiezen project.
  3. kiezen Open gehoste app

Er wordt om de URL van het manifest van uw app gevraagd. In mijn geval is dat zo http: //localhost/manifest.webapp, aangezien ik de codevoorbeelden op mijn lokale server ontvang. Als u dit doet, wordt uw app in de simulator geïnstalleerd!

Open nu de simulator en u zult zien dat uw Hello World-app tot de lijst met geïnstalleerde apps behoort.

Onze geïnstalleerde applicatie ziet er nu als volgt uit:

Porten van bestaande webapps naar FxOS

Voor het porteren van een bestaande webapplicatie naar FxOS, hoeft u slechts de volgende paar stappen uit te voeren:

  1. Bouw gewoon een standaard webtoepassing met behulp van uw favoriete tools.
  2. Identificeer dit als een installeerbare webapp door een manifest.webapp-bestand toe te voegen aan de hoofdmap van de webapp. Dit is voor het definiëren van de namen, pictogrammen, lokalisatiegegevens en vooral de machtigingen die uw app van de gebruiker vraagt ​​voor toegang tot de apparaat-API's.
  3. Maak elke gewenste functionaliteit die gebruikmaakt van speciale apparaat-API's zoals camera, sms, meldingen of alarmen en maak de activabestanden zoals pictogrammen.
  4. Pakket en distribueer uw applicatie. U kunt het op de marktplaats publiceren als een verpakte app of u kunt het publiceren als een door uzelf gehoste toepassing.

Hier is een illustratie van Mozilla Developer Network, die het bovenstaande proces schetst in de vorm van een stroomdiagram.

Conclusie

Het bouwen van applicaties voor Firefox OS is best interessant omdat het gebruikmaakt van de webtechnologieën waar we allemaal zo bekend mee zijn. De toevoeging van de apparaat-API's, waardoor we toegang hebben tot de hardware, maakt het proces van het bouwen van de toepassing echter nog boeiender. Met slechts een klein beetje onderzoek van de API's kunt u toepassingen maken zoals camera's, alarmen, notities en herinneringstoepassingen, en nog veel meer. Ben je enthousiast en zelfverzekerd? Je moet zeker proberen Gaia's repository op Github te hacken en bijdragen aan de ontwikkeling van de front-end en UI-ontwikkeling van Firefox OS.

Zelfs porten van bestaande web-apps naar FxOS kan in slechts vier eenvoudige stappen worden uitgevoerd, en Firefox's Marketplace, hoewel groot, is niet zo volledig als de App Store of Play Store, dus er zijn veel mogelijkheden voor geweldige toepassingen dat kan een hit zijn!