Så gör du din egen mobilapp med Phonegap

Det program som gör om webbsidor till mobilappar som vi valt för den här skolan heter Phonegap och är fritt att använda för alla som vill, både för hobbyverksamhet och professionellt.

 

Phonegap ägs av Adobe och används av över 400 000 utvecklare världen över. På Apples App Store och Googles Play finns det massor av Phonegap-appar att ladda ned – både gratis och mot betalning – så behärskar du Phonegap, html och javaskript ligger fältet öppet för dig som vill utveckla appar professionellt.

 

Har du i dag inte någon erfarenhet av vare sig webbsidesspråket html eller skriptspråket javaskript så får du räkna med en viss startsträcka innan du kan bygga din helt egna app i Phonegap. Dessbättre är html relativt enkelt att lära sig, och det finns gott om skolor och kurser på nätet som kan hjälpa dig att komma igång. Och inget hindrar dig från att följa med i den här skolan ändå, för att åtminstone se hur Phonegap kan användas den dag du har lärt dig html.
 

Smidig projekthanterare

Att komma igång med app-utveckling i Phonegap har sedan i december förra året blivit betydligt enklare. Då släppte nämligen Adobe en betaversion av ett fiffigt tillägg till Phonegap, en projekthanterare som heter Phonegap Desktop App och som sköter mycket av det tekniska arbetet bakom kulisserna åt dig.

 

Phonegap Desktop App är också gratis att använda, och du kan ladda ned det från surftips.se/hamtaphonegap. Installationen är den enklast tänkbara: öppna den nedladdade zip-filen och dra mappen Win till Skrivbordet på din dator. Öppnar du sedan mappen hittar du en samling filer varav en heter PhoneGap.exe. Dubbelklicka på den så startas programmet.

 

Start. För att skapa ett nytt ­Phonegap-projekt klickar du på plustecknet.

 

För att skapa ett nytt projekt klickar du på plus-tecknet i menyn på vänster sida (se bild). Välj sedan Create new Phonegap Project, välj var du vill spara ditt projekt och ge det ett namn. Du kan också ge din app ett id, men det kan du hoppa över just nu eftersom det bara är nödvändigt om du ska publicera appen på någon marknadsplats. Och vi är inte riktigt där än …

 

Vi har skrivit en liten ­exempelapp som du kan ladda ned koden till lite senare. Vårt exempel är ett enkelt spel som går ut på att så snabbt som möjligt peta på cirklar som dyker upp på skärmen. Vi har kallat spelet Snabbklick, och rekommenderar därför att även du ger ditt projekt det namnet. Klicka sedan på ­Create project för att gå vidare.
 

Ladda ned utvecklarappen

För att kunna se och testa din app medan du utvecklar den behöver du också ha en speciell utvecklarapp installerad på din telefon eller surfplatta. Utvecklarappen heter Phonegap Developer App och kan laddas ned – kostnadsfritt förstås – från:

• surftips.se/devappapple (Apple)
• surftips.se/devappandroid (Android)
• surftips.se/devappwindphone (Windows Phone).

När du laddat ned, installerat och startat utvecklarappen behöver den kopplas ihop med den server som finns inbyggd i Phonegap Desktop App som körs på din dator.

 

Det här gör du genom att på din telefon skriva in den ip-adress som visas i det gröna fältet längst ned i Desktop App på datorn (se bild).

 

Koppla ihop. Ip-adressen i den gröna rutan skriver du in i telefonen.

 

Klicka sedan på Connect för att koppla ­telefonen till Desktop App via ditt nätverk. Notera att din ­telefon måste vara ansluten till samma lokala nätverk för att kopplingen ska fungera. Är båda anslutna till samma radionät eller router så är det vanligtvis inga problem, då kommer de att kunna se varandra (se bild).

 

Hopkopplade. Phonegap ­Developer App på telefonen ­ansluter till din Phonegap Desktop App på datorn.

 

När telefonen och Desktop App är hopkopplade visas en bild av en robot med texten Device is ready pulserande under (se bild). Tro det eller ej, men det är faktiskt den app du just skapade som visas där, fast du hittills inte skrivit en enda rad kod!

 

Tada! Första titten på din app utan att du skrivit en enda rad kod.
 

Utveckla på pc – se på mobil

Nu är det hög tid att kavla upp ärmarna och sätta igång! I mappen på din dator där du valde att spara din app finns nu en samling undermappar, och det är i mappen www som koden till din app gömmer sig. Det som just nu visas på din telefons skärm finns i filen som heter index.html.

 

Så låt oss ta en titt på den filen! Öppna den i ditt favorittextredigeringsprogram. Har du inget favorittextredigeringsprogram kan vi rekommendera Notepad++.
 

• Missa inte! Kryptering gör din smartphone säkrare
•  

Som filnamnstillägget ”html” skvallrar om är det förstås html-kod i filen du just öppnade. Och tittar du på rad 37 i filen kommer du att se texten Device is ready som just nu pulserar på din telefonskärm. Så låt oss göra ett experiment: ändra texten till något annat, som exempelvis ditt namn. Spara sedan filen (Ctrl + S) och ta en titt på telefonen. Voila! Smidigt, eller hur? Utan att du behöver göra något mer än att spara dina ändringar så snappar telefonen upp dem, uppdaterar appen och visar resultatet.
 

Vi har förberett lite …

Appar byggda med hjälp av html består av samma tre beståndsdelar som de flesta moderna webb­sidor: filer med ändelsen html som innehåller sidans struktur, texter och bilder, filer med ändelsen css (cascading style sheets) som innehåller styrkoder för hur sidan ska visas upp (färger, textstorlekar och liknande) och filer med ändelsen js (javaskript) som innehåller programkod som sidan eller appen använder sig av.

 

Cirkelklick. Snabbklick är ett spel du lär dig ganska snabbt …

 

Exempelappen Snabbklick som vi skapat är byggd precis så. Html-filen innehåller spelets texter och den grundläggande strukturen. Css-filen innehåller beskrivningar av hur de olika elementen ska se ut, och javaskript-filen innehåller den programkod som körs när användaren petar på olika saker på skärmen. Vill du ladda ned koden till appen finns den i form av ett zip-fil som du kan hämta här. När du laddat ned den och öppnat zip-filen markerar du alla filer och mappar och drar dem från zip-filen till ditt projekts www-mapp. Svara ja på alla frågor om du vill skriva över existerande filer och slå ihop mappar. Du kommer då alldeles strax se i din telefon att robotbilden byts ut mot en svart sida med text och en knapp. Det är appen Snabbklick det!

 

Syftet med den här skolan är inte egentligen att gå igenom hur utveckling i html och java­skript går till utan snarare att se hur Phonegap används. Men
låt oss ändå ta en kort titt på koden till Snabbklick, så att du själv kan testa att ändra i koden och se dina ändringar dyka upp på telefonskärmen.
 

En snabb titt på koden

Om du öppnar filen index.html i ett textredigeringsprogram ser du att den är ganska kort, mindre än 50 rader. Det beror på att det faktiskt inte behövs så mycket statisk text och strukturer för ett spel, det mesta av det som syns på skärmen skapas i stället dynamiskt av java­skript. Det som behövs i strukturväg är instruktionstexter och en knapp att klicka på för att starta spelet.

Olika information. Texten finns i html-filen, styrkoderna för ­utseendet i css-filen.

 

Öppnar du filen index.css som finns i undermappen css så ser du något fler rader text, drygt 100. Här finns alla de styrkoder som berättar för webbläsaren (ja, din app körs faktiskt i en inbyggd webb­läsare på telefonen) hur du vill att den ska visa upp texter och bilder. Exempelvis innebär styrkoden ”text-align: center” att texten som visas upp ska vara centrerad, och ”color: #fff” innebär att texten kommer visas upp med vit färg.

 

Men det riktigt roliga händer alltså i filen index.js, som finns i mappen js! Det är den längsta av filerna, nästan 175 rader kod. Öppnar du den filen så ser du att de olika kodsektionerna är kommenterade för att det ska vara lättare att förstå vad de gör och när de körs. Här kan du exempelvis justera hur länge en spelomgång ska pågå, eller hur lång tid spelaren som längst ska ha på sig att klicka på en cirkel.

 

Vår exempelapp är ett enkelt spel, men hade egentligen kunnat vara precis vad som helst. Allt som en webbsida kan göra kan också en Phonegap-app göra. Det innebär att den kan ladda ned saker från internet, spela video, kommunicera med andra telefoner och andra användare som kör samma app. Men en Phonegap-app kan också göra många saker som en webbsida inte kan, som att läsa av telefonens inbyggda gps, skapa kontakter eller använda kameran.

 

Samma bas. Phonegap-appar är som webbsidor, de bygger på språket html.

 

Just det här är en av Phonegaps främsta styrkor: Du kan använda de verktyg du redan (förhoppningsvis) kan, men på ett nytt sätt och med tillgång till alla de nya saker, sensorer och funktioner som moderna smarta telefoner och surfplattor innehåller. En annan styrka är att Phonegap gör apputveckling plattformsoberoende. Den kod du skriver och som fungerar på en Iphone kommer fungera på exakt samma sätt på en ­Samsung-mobil som kör Android.

 

Byggherre. Phonegap Build har nu byggt appen och du kan ladda ned och köra den.
 

Artikeln fortsätter på nästa sida.

---

 

Så gör du när du vill publicera ditt alster

Att publicera en app är en aning komplicerat, inte minst för att du måste ha diverse olika så kallade certifikat för att kunna sprida din app via de marknadsplatser för appar som finns. Dessutom finns det andra ­klurigheter att ta hänsyn till. Exempelvis kan en Iphone-app bara skapas, eller ”byggas” som det brukar kallas, med hjälp av Apples utvecklingsverktyg Xcode, och det verktyget kan bara köras på en Mac. Och för att bygga en Android-app behöver du ett helt annat utvecklingsverktyg. Och samma sak gäller Windows Phone.

 

Rörigt, eller hur? Som tur är har Phonegap en lösning på även detta problem: Phonegap Build. Phonegap Build är en molnbaserad lösning som tar hand om allt det tekniska trasslet åt dig. Allt du behöver göra är att skapa ett Adobe-konto, om du inte redan har ett, och ladda upp koden till din app, så bygger de appen för alla plattformar inom några minuter och utan att det kostar något. Allt du sedan behöver göra är att ladda ned den ­färdigbyggda appen och distribuera den. Du hittar Phonegap Build på build.phonegap.com.

 

Smidigt. Phonegap Build anpassar din app så att den fungerar för olika mobiler.

---

 

Vad innebär signering?

För att du ska kunna sprida din app via marknadsplatser som Google Play och Apple Appstore krävs att de är signerade. ­Signering är en process som gör att det går att bevisa vem som är upphovsman, och att appen inte ändrats av någon sedan upphovsmannen signerade den. Det här är främst en säkerhetsdetalj som används som skydd mot skadlig kod: lusten att medvetet sprida skadlig kod minskar ju rimligen om det går enkelt att visa vem skurken är.

 

Signering kräver en del ganska krånglig teknik. Som tur är ­hanteras krånglet numera förhållandevis automatiskt av ut­vecklingsverktyg och tjänster som exempelvis Phonegap Build. Du behöver dock själv först bli medlem i de utvecklarprogram som finns för de olika plattformar du vill att din app ska finnas på. För de tre största, Android, Apple och Windows, finns mer information här:
surftips.se/developerandroid (Android)
surftips.se/developerapple (Apple)
surftips.se/developerwindphone (Windows Phone)

---

 

Phonegap är egentligen Cordova – och tvärtom

Om rätt ska vara rätt, och det ska det ju, kan styrkorna för ­programmet i artikeln inte egentligen tillskrivas Phonegap, utan i stället ett så kallat ramverk som heter Cordova och som numera ges ut av organisationen Apache Software Foundation som ­hanterar massor av olika öppen källkod-projekt. Men det som i dag är Cordova var från början en del av Phonegap, och det var först när Adobe köpte Phonegaps utvecklare Nitobi Software som projektet delades upp och Adobe gav Apache källkoden för vidare utveckling i form av öppen källkod.

• Missa inte! Så enkelt gör du en egen uppslagsbok att ha i mobilen