2012-11-20, 02:27
#1
I denna guiden tänkte jag förklara grunderna för att utveckla en applikation till Firefox som även kommer kunna användas i Firefox OS, Firefox for Android och förhoppningsvis även andra webbläsare i framtiden. Som ett exempel kommer vi göra en väldigt dålig och simpel "Att göra" applikation. Applikationen som vi kommer utveckla kommer vara en Open Web App vilket innebär att den fungerar för hela Mozilla-familjen och tanken är att det ska bli en standard för webbapplikationer i framtiden.
Applikationerna är byggda helt i HTML, CSS och Javascript vilket gör det simpelt för en webbutvecklare att hoppa in och skapa applikationer. Se detta som en kickstart för ditt utvecklande om du gillar webben. Notera att fokusen i denna guide inte ligger på själva kodningen utan workflowet för att utveckla en Open Web App för Firefox med hjälp av verktyget volo.
Vi kommer använda oss av Mozillas egna bootstrap (kallat Mortar) för att snabbt kunna komma igång med själva utvecklandet och vi kommer även använda volo som är ett verktyg för att lätt kunna testa, optimera och distribuera dina applikationer.
Vad man behöver:
Jag använder Linux som utvecklingsmiljö och du får inte glömma att anpassa instruktionerna för din egen miljö.
Ladda ner Mortar
Packa upp, byt namn och rör dig in i mappen
Skapa en git repository, lägg till alla filer och gör första commit
Installera volo (Missa inte -g för global och att vara root/använda sudo)
Med alla förberedelser färdiga kan vi börja utveckla våran applikation. Själva applikationen ligger i mappen www/ och resten är verktyg för att göra tester och distribution, något vi kommer till senare.
Öppna upp index.html och börja med att sätt title och meta description. Lägg sedan till din HTML under raden där det står:
Lägg till följande
Exempel på hur man lägger till nytt bibliotek till applikationen:
Öppna nu upp css/app.css och avkommentera båda raderna om bootstrap (rad 5 och 6) då vi vill ha snabb utveckling och även responsiv design.
Innan vi börjar tänka på distribution så måste vi tänka på att vi visar vem som har gjort applikationen och lite annan bas-information så öppna upp manifest.webapp som ligger i www/
Notera att du måste ändra launch_path till /appens-namn/ om du vill att folk ska kunna använda din applikation direkt från Github. Jag lägger till /att_gora/ i mitt fall.
Du har nu en www-built/ mapp som innehåller hela applikationen fast optimerad och minifierad för att ta så lite plats som möjligt.
Om du vill testa att köra din byggda version kan du köra följande:
Och slutligen vill vi ladda upp applikationen på Github så att vi kan dela med av oss applikationen och källkoden till alla
Det är en simpel genomgång av hur man kan utveckla en Open Web applikation. Saken med webben är att man får och uppmuntras att testa saker på sitt sätt så försök hitta det som passar dig bäst när du gör webbsidor och applicera det i applikationer för Firefox OS.
Introduction till Firefox OS: http://www.mozilla.org/en-US/firefoxos/
Simulator för Firefox OS: http://people.mozilla.org/~myk/r2d2b2g/
Design principer och mönster för UI: https://marketplace.firefox.com/developers/docs/purpose
Guider hur man skapar applikationer: https://developer.mozilla.org/en-US/docs/Apps/Tutorials
Mozillas Wiki för Firefox OS: https://developer.mozilla.org/en-US/...lla/Firefox_OS
Såattde... Har ni några tips på hur man kan göra det ännu lättare och smidigare?
Applikationerna är byggda helt i HTML, CSS och Javascript vilket gör det simpelt för en webbutvecklare att hoppa in och skapa applikationer. Se detta som en kickstart för ditt utvecklande om du gillar webben. Notera att fokusen i denna guide inte ligger på själva kodningen utan workflowet för att utveckla en Open Web App för Firefox med hjälp av verktyget volo.
Vi kommer använda oss av Mozillas egna bootstrap (kallat Mortar) för att snabbt kunna komma igång med själva utvecklandet och vi kommer även använda volo som är ett verktyg för att lätt kunna testa, optimera och distribuera dina applikationer.
1. Installation och förberedelse
Vad man behöver:
Jag använder Linux som utvecklingsmiljö och du får inte glömma att anpassa instruktionerna för din egen miljö.
Ladda ner Mortar
Kod:
$ wget http://mozilla.github.com/mortar/builds/app-stub.zip
Packa upp, byt namn och rör dig in i mappen
Kod:
$ unzip app-stub.zip $ mv app-stub/ att_gora/ $ cd att_gora
Skapa en git repository, lägg till alla filer och gör första commit
Kod:
$ git init $ git add -A $ git commit -m 'Första commit'
Installera volo (Missa inte -g för global och att vara root/använda sudo)
Kod:
# npm install -g volo
2. Utveckling
Med alla förberedelser färdiga kan vi börja utveckla våran applikation. Själva applikationen ligger i mappen www/ och resten är verktyg för att göra tester och distribution, något vi kommer till senare.
Öppna upp index.html och börja med att sätt title och meta description. Lägg sedan till din HTML under raden där det står:
Kod:
<!-- Add your site or application content here -->
Lägg till följande
Kod:
<div class="container">
<div class="span12" style="text-align: center; margin-top: 1em;">
<span style="font-size: 3em;">Att Göra</span>
<button class="install-btn">Installera</button>
<div class="row" style="margin-top: 2em;">
<div class="input-append">
<input type="checkbox" value="done">
<input id="appendedInputButtons" type="text" placeholder="Jag måste komma ihåg att...">
<button class="btn" type="button">Kasta</button>
</div>
</div>
</div>
</div>
Se ändring i commit #7f0a9695c2Öppna sen upp js/app.js. Detta är hjärnan av din applikation och app.js bär på din kod. Som du ser längst upp i app.js så använder Mortar require.js för att ladda andra bibliotek och skript. Använd aldrig script-taggar utan använd require.js istället.
Exempel på hur man lägger till nytt bibliotek till applikationen:
Kod:
Eller$ volo add underscore
Kod:
$ volo add https://github.com/documentcloud/underscore/raw/master/underscore-min.js
Se ändring i commit #66293f7f00Gå sen ner till rad 29 i app.js som innehåller "define("app", function(require) {" och lägg till följande.
Kod:
var _ = require('underscore');
Se ändring i commit #52e9ba10c9Nu är underscore tillagt och laddas när vi laddar applikationen.
Öppna nu upp css/app.css och avkommentera båda raderna om bootstrap (rad 5 och 6) då vi vill ha snabb utveckling och även responsiv design.
Se ändring i commit #a15bdfbeedGå nu tillbaka till root-mappen av projektet och kör följande
Kod:
Du kan nu besöka http://localhost:8008 för att köra din applikation. Nu är det meningen att du ska fortsätta utveckla applikationen, bygga ut den, bygga in den och sen ska vi testa att distributera den.$ volo serve
3. Distribution
Innan vi börjar tänka på distribution så måste vi tänka på att vi visar vem som har gjort applikationen och lite annan bas-information så öppna upp manifest.webapp som ligger i www/
Notera att du måste ändra launch_path till /appens-namn/ om du vill att folk ska kunna använda din applikation direkt från Github. Jag lägger till /att_gora/ i mitt fall.
Se ändring i commit #58df749307Nu är vi färdiga att bygga applikationen så kör följande:
Kod:
$ volo build
Du har nu en www-built/ mapp som innehåller hela applikationen fast optimerad och minifierad för att ta så lite plats som möjligt.
Om du vill testa att köra din byggda version kan du köra följande:
Kod:
$ volo build base=www-built
Och slutligen vill vi ladda upp applikationen på Github så att vi kan dela med av oss applikationen och källkoden till alla
Kod:
Ovanstående kommando skapar en Github repo åt dig med grenen gh-pages som Github automatiskt levererar som vanliga sidor. När volo är färdigt kommer du kunna komma åt din app på http://användarnamn.github.com/projektnamn vilket i mitt fall blir http://victorbjelkholm.github.com/att_gora$ volo ghdeploy
4. Outro och vidare läsning
Det är en simpel genomgång av hur man kan utveckla en Open Web applikation. Saken med webben är att man får och uppmuntras att testa saker på sitt sätt så försök hitta det som passar dig bäst när du gör webbsidor och applicera det i applikationer för Firefox OS.
Introduction till Firefox OS: http://www.mozilla.org/en-US/firefoxos/
Simulator för Firefox OS: http://people.mozilla.org/~myk/r2d2b2g/
Design principer och mönster för UI: https://marketplace.firefox.com/developers/docs/purpose
Guider hur man skapar applikationer: https://developer.mozilla.org/en-US/docs/Apps/Tutorials
Mozillas Wiki för Firefox OS: https://developer.mozilla.org/en-US/...lla/Firefox_OS
Såattde... Har ni några tips på hur man kan göra det ännu lättare och smidigare?
__________________
Senast redigerad av DigGaN 2012-11-20 kl. 02:27. Anledning: typo
Senast redigerad av DigGaN 2012-11-20 kl. 02:27. Anledning: typo
