You are here

Add new comment

Error message

The spam filter installed on this site is currently unavailable. Per site policy, we are unable to accept new submissions until that problem is resolved. Please try resubmitting the form in a couple of minutes.

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

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.