PhoneGap From Scratch Introducere

Doriți să aflați cum să utilizați PhoneGap, dar nu știți de unde să începeți? Alăturați-vă nouă pe măsură ce am pus împreună "Sculder", nu numai un tribut adus unei serii excelente de televiziune science fiction, ci o aplicație mobilă nativă pentru credinciosul în tine!

În această serie, vom construi o aplicație mobilă utilizând câteva dintre funcțiile din PhoneGap. Vom merge de la instalarea SDK-ului la implementarea în magazinele de aplicații ale celor două platforme majore: iOS și Android. Conceptele acoperite de această serie vor include accesarea camerei aparatului, stocarea locală și localizarea geografică.

În această primă parte, vom examina rapid ce este de fapt TelefonulGap și la ce îl puteți utiliza și apoi uitați-vă la instalarea cadrului PhoneGap și a SDK-urilor pe care le solicită pentru testarea pe OS X, Windows și Linux medii. Apoi vom construi și rula aplicația foarte simplă "Hello World" PhoneGap pentru a ne asigura că totul rulează corect.


Ce este PhoneGap?

Până acum aveți probabil o idee bună despre ce este PhoneGap și probabil că ați folosit-o, dar dacă nu, iată o scurtă prezentare.

PhoneGap sa născut din iPhoneDevCamp în 2008, unde a fost creat pur și simplu pentru că nu erau mulți dezvoltatori de obiecte C în comparație cu dezvoltatorii web. Provocarea a fost aceea de a crea un cadru care să permită dezvoltatorilor web să utilizeze HTML, CSS și JavaScript pentru a codifica aplicații care ar putea profita de funcționalitatea nativă a dispozitivului mobil, cum ar fi caracteristicile Camera, Storage și GeoLocation. Inițial construit pentru a lucra cu iPhone, în decurs de un an, PhoneGap creștea și începea să susțină și Android. Acum, aproape 4 ani, PhoneGap este unul dintre cele mai discutate instrumente de dezvoltare a aplicațiilor mobile și oferă o gamă mult mai largă de dispozitive mobile, inclusiv iOS, Android, BlackBerry, Symbian, webOS, WP7 și Bada.

În momentul publicării (de exemplu, ianuarie 2012), cadrul în prezent acceptă API-urile dispozitivelor de stocare Accelerometru, Cameră, Compass, Contacte, Fișier, Geolocație, Media, Rețea, Notificări (Alertă, Sunet și Vibrare). Există suport complet pentru toate aceste caracteristici în noile dispozitive iOS (3GS +) și Android. Pentru mai multe detalii privind asistența pentru dispozitivele BlackBerry, WP7, Sybian, webOS și Bada, verificați tabela oficială de compatibilitate.

În ciuda crezului contrar, PhoneGap nu este o singură dată, să implementeze soluția de pretutindeni (deși se apropie de ea). Este cu siguranță un cadru cross-platform capabil să ruleze pe multe dispozitive suportate, dar pentru a implementa cu succes va trebui probabil să testați și să vă optimizați codul pe fiecare dintre dispozitivele țintă.


Instalați & Hello World pentru iOS

Dacă doriți să vă dezvoltați pentru iOS, veți avea nevoie de un calculator bazat pe Intel care rulează MAC OS X versiunea 10.6 sau o versiune ulterioară. Veți avea nevoie și de cea mai recentă versiune a Xcode (versiunea 4 la momentul redactării) și SDK-ul iOS pentru testare. Pentru a descărca Xcode, va trebui să vă înscrieți ca membru al Programului de Dezvoltare al Apple.

Treceți la www.phonegap.com și în colțul din stânga sus veți vedea un buton pentru a descărca cea mai recentă versiune a PhoneGap. Dacă faceți clic pe aceasta, veți solicita descărcarea unui fișier ZIP care conține tot ce aveți nevoie pentru a începe.

Dezarhivarea fișierului vă va oferi numeroase dosare, fiecare etichetate cu sistemul de operare vizat. Pe măsură ce instalam pentru iOS, deschideți folderul iOS și montați dmg fişier. dmg conține a PKG fişier. Faceți clic pe acesta și treceți prin procesul de instalare. După ce ați terminat instalarea, puteți continua și porniți Xcode și atunci când veniți să creați un nou proiect, ar trebui să puteți alege PhoneGap ca șablon.

Acum putem seta opțiunile pentru proiectul nostru și locația fișierelor noastre. După ce am făcut acest lucru, proiectul nostru este construit în directorul specificat și Xcode ne prezintă pagina de rezumat. Aici putem să adăugăm cu ușurință icoane pentru aplicații și să schimbăm câteva setări atunci când aplicația noastră este gata să fie împachetată și trimisă la magazinul de aplicații - pentru moment, vom merge mai departe și vom lovi RUN în colțul din stânga sus. Aceasta va compila aplicația și va declanșa simulatorul iOS.

Dacă încercați acest lucru acum, după ecranul de start ar trebui să primiți o eroare care să ateste că index.html fișierul nu a putut fi găsit. Nu trebuie să vă faceți griji, de fapt, acest lucru ar trebui să se întâmple. Trebuie să mergem în directorul de lucru al proiectului (Faceți clic dreapta pe proiect în Xcode și faceți clic pe Show în Finder) și acolo vom vedea www director în rădăcina proiectului.

Acum trebuie să tragem directorul INTO Xcode și să îl adăugăm la proiect.

În opțiunile pentru aceste fișiere trebuie să vă asigurați că selectăm "Creare referință folder pentru orice dosare adăugate", apoi faceți clic pe Finalizare. Al nostru www directorul este acum adăugat la proiect. Acum putem face clic pe rulați din nou și veți primi baza de date "Hello World" pentru PhoneGap.

www directorul va fi acum directorul nostru rădăcină pentru aplicație. Aici vom păstra orice cod HTML, CSS sau JavaScript care va fi utilizat de aplicația noastră, la fel cum v-ați aștepta pentru orice altă aplicație web. phonegap.js fișierul este fișierul JavaScript care va acționa ca API-ul nostru, oferindu-ne acces la API-urile native pe care am putea să le folosim mai târziu în aplicația noastră.


Instalați & Hello World pentru Android

Spre deosebire de dezvoltarea pentru iOS, vă puteți dezvolta pentru Android pe orice platformă. Deși este recomandat să utilizați Eclipse IDE cu câteva pluginuri, există o modalitate alternativă de a utiliza PhoneGap (prin Linia de comandă), dar este bine dacă începeți să o faceți mai întâi cu un IDE și apoi încercați linia de comandă și a vedea ce preferați. În acest tutorial vom folosi metoda IDE.

În primul rând, va trebui să vă îndreptați spre site-ul Eclipse și să descărcați IDE-ul pentru platforma aleasă. Versiunea clasică este bine pentru ceea ce avem nevoie. După descărcare, porniți Eclipse și trebuie să instalați pluginul ADT. Trebuie să te duci Help => Instalați software-ul nou și faceți clic pe adăugați în colțul din dreapta.

Apoi, puteți introduce pluginul ADT pentru numele pluginului și introduceți următoarele pentru adresa URL a repozitorului.

 https://dl-ssl.google.com/android/eclipse/

Pluginul se va descărca și va instala, iar Eclipse vă va solicita să reporniți. După ce reporniți, puteți crea un nou proiect Android.

Apoi, veți trece prin expertul proiectului, unde veți da aplicației dvs. un nume și va configura spațiul său de lucru. veți selecta, de asemenea, SDK-ul dvs. de a construi țintă - puteți selecta cea mai recentă (4.0.3 la momentul scrisului). Treceți prin restul expertului și configurați informațiile rămase pentru aplicație.

Veți fi întrebat dacă doriți să descărcați și să instalați SDK-urile Android necesare în acest moment. Dacă le aveți deja pe aparat, mergeți mai departe și răsfoiți la dosar. Dacă nu, puteți să-i descărcați pe Eclipse pentru dvs..

În directorul rădăcină al aplicației trebuie să creați un director numit capace și în cadrul directorului de active crea un alt director numit www. Acum, înapoi la fișierul original PhoneGap care a fost descărcat și în dosarul Android trebuie să copiați phonegap.jar fișier la libs directorul pe care l-am creat și apoi copiați phonegap.js la www director.

Structura dvs. ar trebui să arate după cum urmează:

În cadrul nostru www director, creați un index.html fișier și introduceți codul de mai jos:

    mobiletuts phonegap     

Bun venit la PhoneGap

Modificați active / www / index.html

Acum trebuie să facem câteva modificări în fișierul Java principal care poate fi găsit în src pliant. În primul rând, trebuie să schimbăm clasa " extinde din Activitate la DroidGap.. Apoi trebuie să înlocuim setContentView (R.layout.main); cu super.loadUrl ( "fișier: ///android_asset/www/index.html"); și apoi adăugați import com.phonegap. *; după primele două importuri. Fișierul Java după finalizare ar trebui să arate cam așa:

 pachet com.shaundunneTest; importă android.app.Activity; import android.os.Bundle; import com.phonegap. *; clasa publica TestActivity extinde DroidGap / ** Numit cand activitatea este creata pentru prima data. * / @Override publică void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); super.loadUrl ( "fișier: ///android_asset/www/index.html"); 

Eclipse va fi, probabil, aruncarea unor erori acum, doar faceți clic dreapta pe dosarul libs și du-te la Cale de construcție => Configurați calea de construire apoi în fila biblioteci, faceți clic pe adăugați JAR și continuați și includeți phonegap.jar fişier. Acest lucru ar trebui să clarifice erorile. Acum, trebuie să adăugăm unele permisiuni în fișierul manifest pentru a vă asigura că PhoneGap va funcționa corect.

Deschideți AndroidManifest.xml fișier și adăugați următoarele înaintea cerere intrare:

               

În eticheta de activitate, adăugați următorul atribut:

 Android: configChanges = "orientare | keyboardHidden"

Acest lucru asigură că aplicația nu reîncărcă index.html oricând aceste evenimente se întâmplă.

Ultimul lucru pe care trebuie să-l faceți este să copiați xml folder din descărcarea PhoneGap către res director în proiect. Acum sunteți gata să rulați acest lucru în emulator.

Puteți să faceți clic dreapta pe proiectul dvs. acum și alerga ca o aplicație Android. Dacă nu ați configurat încă un dispozitiv, vi se va cere să faceți acest lucru, dacă aveți nevoie de ajutor în acest sens, consultați aici documentația

Și tot ce aveți nevoie pentru a începe Android!


Ce despre toate celelalte platforme?

Până acum, am acoperit numai două dintre platformele mobile pentru aplicația noastră, dar este foarte probabil că vom dori să distribuim pe toate platformele pe care PhoneGap le suportă, nu? Ei bine, mai degrabă decât să treceți prin instalarea câtorva SDK-uri, un alt IDE cu câteva pluginuri suplimentare și să configurați o mașină virtuală pentru testare, această serie va utiliza serviciul PhoneGap: Build atunci când vine vorba de distribuirea aplicației.

PhoneGap: Construiți, așa cum afirmă pe site, este un serviciu bazat pe cloud, care va prelua o aplicație în format HTML / CSS / JS și vă va trimite înapoi aplicația, compilată și pregătită pentru a fi distribuită (un avertisment: pentru Android, iOS , și BB veți avea nevoie de certificatele necesare pentru Distribuție). PhoneGap: Build este în prezent în BETA și în timp ce există opțiuni plătite (care merită să ai dacă o vei folosi în mod regulat), există o opțiune gratuită care va permite o aplicație privată. Asta e tot ce avem nevoie pentru proiectul nostru în acest moment, deci mergeți mai departe și înscrieți-vă acum, deoarece vom folosi serviciul Build la sfârșitul seriei.


Concluzii finale

Acum avem mediul înconjurător pregătit pentru dezvoltare cu PhoneGap. În următoarea parte a acestei serii, vom începe să ne uităm la API-urile pe care PhoneGap le permite să le accesăm și cum să le folosim în aplicația noastră.

Cod