Introducere în dezvoltarea PhoneGap

PhoneGap este un framework open source pentru construirea de aplicații mobile pe mai multe platforme cu HTML, CSS și JavaScript. Aceasta este o soluție ideală pentru dezvoltatorii de web interesați de dezvoltarea mobilă, deoarece le permite să abiliteze abilitățile existente, mai degrabă decât să înceapă prin zgârieturi cu un limbaj compilat specific dispozitivului. Aceasta este, de asemenea, o soluție ideală pentru cei interesați de crearea unei aplicații care poate rula pe mai multe dispozitive cu aceeași bază de coduri. În acest tutorial, veți învăța cum să configurați mediul de dezvoltare PhoneGap și să aflați câteva dintre aspectele fundamentale ale dezvoltării platformei.

Introducerea PhoneGap

Aplicațiile create cu PhoneGap nu sunt doar site-uri web normale mobile. Aplicațiile PhoneGap pot interacționa cu hardware-ul dispozitivului mobil, cum ar fi accelerometrul sau GPS-ul, în moduri care nu sunt disponibile pentru aplicațiile web normale. Aplicațiile PhoneGap sunt, de asemenea, construite și ambalate ca aplicații native, ceea ce înseamnă că pot fi distribuite prin Apple App Store sau Android Market.

PhoneGap acceptă o serie de platforme mobile diferite, printre care:

  • Android
  • iPhone
  • mure
  • Symbian
  • palmier

Setul de instrumente PhoneGap SDK oferă un API care este un strat de abstractizare care oferă dezvoltatorului acces la caracteristici hardware și de platformă. Dat fiind faptul că PhoneGap abstractează platforma mobilă nativă, același cod poate fi folosit pe mai multe platforme mobile, cu mici sau fără modificări, făcând aplicația dvs. la dispoziția unui public mai larg.

Funcțiile specifice hardware-ului acceptate de API-ul PhoneGap includ:

  • Localizarea geografică
  • vibrație
  • Accelerometru
  • Sunet

cerinţe:

Pentru a crea aplicații cu PhoneGap, va trebui să instalați mai întâi SDK standard pentru platformele mobile pe care doriți să le vizați pentru aplicația dvs. Acest lucru se datorează faptului că PhoneGap va utiliza de fapt aceste SDK-uri atunci când vă compilați aplicația pentru acea platformă.

Deci, dacă sunteți în curs de dezvoltare pentru Android, veți avea nevoie de:

  • Android NDK
  • Android SDK

Există, de asemenea, câteva cerințe suplimentare pentru PhoenGap pentru dezvoltarea Android, inclusiv:

  • Eclipse IDE
  • Plugin ADT pentru Eclipse
  • Apache Ant
  • Rubin
  • Git Bash (numai pentru Windows)

Documentația PhoneGap Android oferă lista completă a cerințelor cu instrucțiuni de instalare pentru fiecare.

Dacă sunteți în curs de dezvoltare pentru iPhone, veți avea nevoie de:

  • Un calculator Apple pe bază de date
  • iPhone SDK
  • Xcode
  • Mac OS X Snow Leopard

Citiți Introducerea noastră în ghidul de dezvoltare iPhone pentru mai multe informații despre crearea unui mediu de dezvoltare iPhone.

Odată ce ați descărcat și dezarhivat telefonul, veți vedea că acesta conține un director separat pentru fiecare platformă acceptată de PhoneGap:

PhoneGap vine cu o aplicație implicită care poate fi utilizată pentru a prezenta funcționalitatea puternică a SDK. Restul acestui tutorial va fi dedicat pentru a vă arăta cum să configurați această aplicație implicită atât pentru Android cât și pentru iPhone.

Construirea aplicației implicite PhoneGap pentru Android

Pentru a crea un spațiu de lucru pentru aplicația dvs. PhoneGap pe Android, accesați folderul "phonegap-android" de pe linia de comandă sau pe terminal.

Rulați următoarea comandă:

  ruby ./droidgap "[android_sdk_path]" [nume] [numele pachetului] "[www]" "[calea]"
  • android_sdk_path - Calea în care ați instalat SDK-ul Android.
  • Nume - Numele pentru a da noua aplicație.
  • numele pachetului - Numele pe care doriți să-l acordați aplicației dvs..
  • www - Dosarul de unde doriți să copiați fișierele aplicației dvs. PhoneGap. Lăsați acest lucru gol pentru moment.
  • cale - Spațiul de lucru al aplicației pentru proiectul dvs..

Odată ce această comandă rulează cu succes spațiul de lucru al aplicației va fi generat în calea pe care ați dat-o. Apoi, puteți să vă deschideți Eclipse și să alegeți mai întâi "New Android Project" și apoi să alegeți "Creare dintr-o sursă existentă" și să selectați spațiul de lucru al aplicației care a fost creat cu comanda anterioară.

După ce ați terminat, copiați următoarele fișiere din folderul phonegap / phonegap-android / example în folderul www din spațiul de lucru:

  • index.html
  • Master.css

Apoi dați clic pe rulați pentru a vedea aplicația exemplu phonegap din simulatorul de android.

Construirea aplicației implicite PhoneGap pentru iPhone

Pentru a crea o aplicație PhoneGap pentru iPhone, accesați directorul phonegap-iphone unde ați dezarhivat fișierele PhoneGap.

Odată ce vă aflați în acel dosar din tipul terminalului "make" pentru a construi PhoneGapLibInstaller.pkg.

Apoi, va trebui să executați PhoneGapLibInstaller.pkg care va instala șablonul PhoneGapLib și PhoneGap în Xcode.

Apoi puteți lansa Xcode și creați un "New Project". Apoi alegeți șablonul de aplicație bazat pe PhoneGap.

Apoi, copiați următoarele fișiere în folderul www al spațiului dvs. de lucru:

  • index.html
  • Master.css

Rulați aplicația pentru a lansa aplicația Demo PhoneGap în Simulatorul iPhone.

În spatele scenelor (în cod)

Deci, acum aveți aplicația Demo PhoneGap care rulează pe simulatorul dumneavoastră. Puteți să jucați cu aplicația și să vedeți cum funcționează. Această aplicație de bază arată utilizarea generală a diferitelor API expuse
de către setul de instrumente PhoneGap SDK.

Mergeți și deschideți index.htm. În partea de sus a paginii veți vedea următorul cod:

 PhoneGap  

Primul lucru este un link către master.css care dă tot stilul butonului pe care l-ai văzut pe ecran.

A doua linie include phonegap.js care este generată când am creat un spațiu de lucru pentru aplicația noastră. Acest fișier face toate magia de a apela API-urile native prin JavaScript.

Acum, dacă parcurgeți până la sfârșitul index.html, veți vedea următorul cod:

  

Bun venit la PhoneGap!

acest fișier este localizat la active / index.html

Platformă:  

Versiune:  

UUID:  

X:
 
Y:
 
Z:
 
Urmăriți accelerometrul Obțineți o locație Apelați 411 Vibrați semnalul sonor Obțineți o imagine Obțineți contactele telefonului

Acest HTML creează link-urile care sunt afișate ca butoane pe ecranul dispozitivului dvs. mobil. Există handleri onclick atașate la aceste linkuri care numesc funcții JavaScript definite în același fișier care sunt responsabile pentru a apela API-ul PhoneGap pentru a interacționa cu hardware-ul nativ al dispozitivului.

Prima funcție care va fi apelată în JavaScript este init (). Aceasta va înregistra funcția JavaScript deviceInfo la evenimentul PhoneGap.

Evenimentul Deviceready

deviceready evenimentul este declanșat de PhoneGap când toate componentele SDK sunt încărcate corect. Este logic ca API-urile JavaScript ale PhoneGap să fie utilizate după incendierea evenimentului.

Puteți citi mai multe despre deviceready în documentația API.

Obiectul dispozitivului

Obiectul dispozitivului conține informații de bază despre dispozitivul pe care rulează aplicația, cum ar fi platforma, versiunea etc. Aceste valori pot fi utilizate pentru a efectua verificări specifice dispozitivului în codul dvs..

Puteți citi mai multe despre obiectul dispozitivului în documentația oficială API.

Accelerometru

Primul link din organism îl numește funcția watchAccel:

 Uita-te la accelerometru

Această parte a API urmărește și trimite notificări despre accelerarea dispozitivului la intervale regulate. Returnează accelerația actuală a dispozitivului trecând coordonatele x, y și z la callBackonSuccess funcția înregistrată. Valorile x, y, z pot fi apoi folosite în aplicație pentru a răspunde mișcării.

Citiți mai multe despre accelerometru aici.

GPS și poziționare

Al doilea link din organism este responsabil pentru colectarea locației actuale a dispozitivului:

 Obțineți locația

callBackonSuccesseste trecut un obiect care conține coordonatele GPS care pot fi utilizate în aplicația dvs. pentru a efectua procesarea bazată pe locație.

Puteți citi mai multe despre API-ul Geolocation.

Efectuand apeluri

A treia linie din corp va lansa dispozitivul de apelare cu numărul "411":

 Sunați 411

Notificări dispozitiv

Următoarele două linii din corp sunt utilizate pentru a beep sau a vibra un dispozitiv:

 Beep Vibrate

Citiți mai multe despre bip și vibrați în documentele oficiale.

Utilizarea camerei

Următoarea linie din corp solicită funcția show_pic a face o fotografie:

 Obțineți o imagine

Api lansează aplicația pentru aparate foto și așteaptă
pentru ca utilizatorul să capteze o imagine.

Citiți mai multe despre fotografierea în documentația oficială API.

Concluzie

PhoneGap este un cadru foarte puternic pentru dezvoltarea pe mai multe platforme. Dacă aveți deja un fond puternic de dezvoltare web și sunteți interesat să construiți aplicații pentru unul sau mai multe dispozitive, PhoneGap este cu siguranță un candidat puternic de luat în considerare!

Cod