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.

app phonegap
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:

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

app phonegap
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).

app phonegap
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!

app phonegap
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++.

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.

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

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

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

Artikeln fortsätter på nästa sida.

Sida 1 / 2

Innehållsförteckning

Fakta

Svårighetsnivå: Medel.
Program: Phonegap.
Tid: 30 minuter.
Det här behöver du:

  • Dator (Windows eller Mac OS), ansluten till ett lokalt nätverk.
  • Smartphone eller surf-platta (Android, Apple eller Windows Phone) ansluten till samma lokala nätverk.
  • Textredigeringsprogram (Notepad++ rekommenderas, men Windows Anteckningar fungerar om du inte har något annat).
  • Programmet Phonegap Desktop App i datorn.
  • Appen Phonegap Developer App installerad på telefonen eller surfplattan.

Det här lär du dig:

  • Att komma igång med apputveckling i Phonegap.
  • Hur Phonegap-appar är uppbyggda.
  • Att läsa och ändra i kod.
  • Hur du bygger din app och sedan publicerar den när den är färdig.

Fotnot: I den här skolan lär du dig inte hur du programmerar din egen app, utan hur du använder Phonegap för att köra appar på telefonen medan de utvecklas. Vill du lära dig själva programmeringen också kan det vara bra att veta att Phonegap-appar bygger på html, css och java­skript.