Multi-platform mobil alkalmazás készítése PhoneGap segítségével

Ha szeretnénk mobil alkalmazásokat készíteni, de csupán a webes technológiákat ismerjük - úgy mint HTML és JavaScript - akkor a PhoneGap jó választás lehet számunkra.

A PhoneGap segítségével HTML, CSS és JavaScript használatával (JavaScript keretrendszerek is használhatók, pl. jQuery és jQuery mobile) végezhetjük el a munkát és az alkalmazásukat számos okostelefon platform számára közzétehetjük, például Androidra, iOS-re, Windows mobile-ra, Blackberry-re, stb.

PhoneGap vagy Cordova?

A PhoneGap-et eredetileg a Nitobi fejlesztette, akiket megvett az Adobe. Az Adobe az Apache Software Foundation segítségével közzétette a PhoneGap forráskódját, létrehozva ezzel az Apache Cordova projektet. Az Apache Cordova nyílt forráskódú szoftver. A PhoneGap tulajdonképpen felfogható úgy, mint a Cordova projekt egy disztribúciója, amely kiegészíti a nyílt forráskódú szoftvert néhány extra funkcióval.

Talán a legfontosabb ilyen extra funkciót a https://build.phonegap.com weboldal szolgáltatja. Segítségével akármely támogatott platformra lefordíthatjuk alkalmazásainkat távolról. Máskülönben ha lokálisan fordítunk, telepítenünk kell a megcélzott platform fejlesztői környezetét (és ez nem is olyan egyszerű, mert például a Windows Mobile 8 fejlesztői környezet csak Windows 8 operációs rendszerre telepíthető, és az iOS-re történő fejlesztéshez is Mac OS-X-re van szükségünk).

Én jelenleg Android platformra fogom lefordítani az alkalmazásom lokálisan, az Adobe felhő alapú szolgáltatását és a távoli fordítást egy későbbi blogbejegyzésben fogom megvizsgálni.

A PhoneGap telepítése

A fejlesztés elkezdéséhez telepítenünk kell néhány eszközt. A projekt weboldalán kiválasztva az "Install PhoneGap" gombot, kiderül hogy először a NodeJS-t kell telepítenünk. Windows környezetben ez elég egyszerű, a http://nodejs.org/ weboldal kezdőlapján találunk egy msi telepítő készletet.

A NodeJS telepítése után indítsunk egy parancssort és navigáljunk a NodeJS telepítési mappájába (alapértelmezés szerint ez a C:\Program Files\nodejs mappa). A PhoneGap telepítéséhez futtassuk a következő parancsot:

npm install -g phonegap

A Cordova CLI (Comman Line Interface) telepítéséhez futtassuk a következő parancsot:

npm install -g cordova

Ellenőrizzük a PATH környezeti változó beállításait, tartalmaznia kell mind a NodeJS, mind a PhoneGap telepítési mappáját:

(Az útvonalak módosítása nincs hatással a már megnyitott ablakokra, ezért nyissunk új parancssor ablakot a továbbiakhoz.)

Ha minden a helyén van, akkor valami ehhez hasonlót kell látnunk a phonegap parancs futtatásakor:

Mivel lokálisan, Android platformra fogom lefordítani az alkalmazásomat, így telepítenem kell a Java fejlesztőkörnyezetet (JDK) és az  Android fejlesztőkörnyezetet (Android SDK) is.

Ellenőrizzük a rendszer környezeti változóit, és állítsuk be a JAVA_HOME változónak a feltelepített JDK mappáját (ha még nem létezik ilyen változó, hozzunk létre egyet).

A PATH környezeti változóba fel kell vennünk az Android SDK sdk\tools és sdk\platform-tools almappáit is.

Továbbá a PhoneGap alkalmazásunk fordításához szükségünk van az Apache Ant telepítésére is:

  • töltsük le az ant-ot innen: http://ant.apache.org/bindownload.cgi
  • tömörítsük ki egy mappába (például E:\dev\ant)
  • hozzunk létre egy új környezeti változót ANT_HOME néven és állítsuk be neki az ant telepítési mappáját:
    ANT_HOME=E:\dev\ant
  • adjuk hozzá az %ANT_HOME%\bin mappát a PATH környezeti változóhoz

 

Az első alkalmazásunk létrehozása

Csatlakoztassuk az Androidos telefonunkat a számítógéphez, és adjuk ki a következő parancsokat:

phonegap create hello
cd hello
phonegap run android

A következőt kell látnunk a telefon képernyőjén:

A példaalkalmazás forráskódját a www almappában találjuk.

Plain text

  • A HTML jelölők használata nem megengedett.
  • A sorokat és bekezdéseket a rendszer automatikusan felismeri.
Frissítés Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.