Hello World app med PhoneGab og bootstrap from twitter


Tutorial til hvor de nødvendige certifikater til iOS test builds laves, samt hvordan PhoneGap opsættes

Hvad der hehøves

  • En konto til PhoneGap Build service. Kan oprettes her
  • En iOS developer konto ved Apple. Kan oprettes her
  • Allerede oprettet developer certificaqte på iOS developer kontoen.
  • Et Zip program.
  • En Mac til eksport af certifikat.


Step 1 : Development certificate (p12 format)

Hvis du ikke allerede har oprettet et Development certifikat, se

Hvis du allerede har installeret din development certifikat i Keychain på din Mac, gå til step 1.4


Step 1.1

Åben Apple Memeber Center (åben i nyt vindue)

Gå til "iOS Provisioning Portal"

Under"Certificates" ligger Development certifikatet.


Step 1.2

Download certifikatet.


Step 1.3

Installer certifikatet på Mac i Keychain (/Applications/Tools/Keychain)


Step 1.4

I Keychain vælg certifikatet, Exporter i File menuen, vælg Exporter.

Vælg p12 format.

Vælg hvor certifikatet skal gemmes.

Angiv en adgangskode til certifikatet. NB husk dette da det skal angives på PhoneGap

Step 2 : Provision Certificate


Step 2.1

Åben Apple Memeber Center (åben i nyt vindue)

Gå til "iOS Provisioning Portal"

Under "App ID" oprettes et nyt App ID.

Det angivede App ID Suffix skal senere bruges i PhoneGap


Step 2.2

Under Provisioning - Development Provisioning Profiles, oprettes en ny profile

Certifikates : Vælg dit development certifikat. (svarende til det fra step 1.2)

App ID : Vælg App ID'et fra foregående step.

Devices : Vælg de devices appen skal kunne testes på.


Step 2.3

Download den oprettede Provisioning Profile via Download i Action kolonnen.

Step 3 : Hello World App

Hvis der skal opsættes lokalt test af projektet kan der findes guides til dette her
Hvis dette ønskes, vil Step 3.1/3.2 mappen ligge i det oprettede projekts /assets/www/ mappe, og det vil da være denne mappe step 3.3 og 3.4 skal udføres på. (Det vil her være nødvendigt manuelt at tilføje bootstrap og jQuery til projektet)

De to metoder kan også kombineres ved at lægge indholdet fra step 3.1 i /assets/www/ mappen.


Step 3.1

Generer en html skabelon her


Step 3.2

Udpak den hentede fil, og Rediger index.html og indsæt

<script type="text/javascript" src="cordova-2.3.0.js"></script>

Note den rigtige platform udgave af cordova-x.x.x.js filen bliver automatisk indsat af PhoneGap Build Service for hver platform der buildes til og den skal derfor ikke ligge med i zip filen der senere bliver uploaded til PhoneGap


Step 3.2

Opret en config.xml fil i mappen på samme niveau som index.html. (en sample config kan hentes her) Note dette er konfigurationsfilen til PhoneGap

Tilret config.xml filen, det vigtigste her er <widget id="den app ID der blev oprettet i step 2.2">

Læs mere om config.xml filen her


Step 3.3

Zip mappen der indeholder de ændrede index.html og config.xml

Step 4 : PhoneGap Build Setup


Step 4.1

Login på build.phonegap.com (Åben i nyt windue)


Step 4.2

Gå til Edit Account


Step 4.3

Gå til "Signing Keys"


Step 4.4

Under iOS tryk "add a key..."

I title angives et navn for certifikat sættet.

I certifikate (p12) file vælges den oprettede p12 fil fra step 1.4

I provisioning profile vælges den oprettede fil fra step 2.3 (<profil navn>.mobileprovision)


Step 4.5

Klik på hængelås ikonet udfor det tilføjede nøgle sæt, du vil herefter blive spurgt om certifikat adgangskoden.

Angiv koden (Fra step 1.4).

Step 5 : PhoneGap Build


Step 5.1

Gå tilbage til apps siden på PhoneGap. (eller åben siden igen her)

Vælg "Upload a .zip file" og vælg filen fra step 3.4


Step 5.2

Klik "Ready to build"


Step 5.3

Vent på at den bliver færdig met at builde, dette kan tage fra et par minutter og opefter at få alle builds igennem.

Herefter kan der trykkes på iOS, Android etc. logoet og den buildede fil vil blive downloaded.

Det er til Android ikke nødvendigt at supplere key til build. Den buildede .apk fil kan uploades til telefonen via USB kabel samt Android SDK (adb.exe install somename.apk)