Share
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 ultima parte a acestei serii, am primit aplicația noastră web cu o structură de bază și tranziții între pagini. În această parte, vom continua să lucrăm la completarea părților din aplicație care pot rula fără PhoneGap și pentru a configura proiectul nostru PhoneGap, gata pentru integrare.
Înainte de a începe, am vrut să acoperim o întrebare pe care am întrebat întotdeauna. Aceasta este o întrebare pe care am întrebat-o odată și, fără îndoială, ați fi întrebat de asemenea. Anume: Cum pot depana o aplicație web pe un dispozitiv mobil?
Există mai multe moduri de depanare într-un dispozitiv. Ai putea să mergi la școală veche și să o folosești alert (ceva);, dar având alerte peste tot este atât ineficientă, cât și în codul de producție (atât de enervant!). Ai putea utiliza consola de depanare în Safari pe un dispozitiv iOS, aflat în Settings -> Safari -> Developer, dar nu toate dispozitivele utilizează Safari sau au o consolă de depanare. De asemenea, această consolă oferă informații minime.
Dacă trebuie doar să folosesc o consolă JavaScript pentru a prinde o console.log (), sau poate executa unele JS pe dispozitiv pentru a verifica ceva, îmi place să folosesc jsconsole.com. Este una dintre cele mai ușoare metode de a utiliza o consolă pe dispozitiv și există chiar și o aplicație iOS disponibilă. Pentru a începe o sesiune pe jsconsole.com, tastați doar :asculta și veți obține apoi o ieșire de tag script care să fie inclusă în pagina dvs. Porniți aplicația și veți vedea că conexiunea are loc în consola. Acum puteți executa JS în consola și îl puteți vedea pe aparat sau pe jurnal în consola din codul dvs. și îl puteți vedea aici. Vedeți videoclipul de mai jos pentru o demonstrație a acestui lucru:
Pentru mai multe informații despre jsconsole, consultați aici.
O altă alternativă este WeInRe (Web Inspector Remote). În primul rând a început ca un proiect independent, WeInRe face parte acum din familia PhoneGap și poate fi găsit la debug.phonegap.com. Set-up-ul este foarte similar cu jsconsole, dar ceea ce obțineți de fapt este un inspector WebKit, la fel ca Chrome sau Safari. Vedeți videoclipul de mai jos pentru un exemplu:
O alta alternativa este Socketbug, care este minunat, insa necesita instalarea si setarea Node si socket.io, ceea ce, din pacate, este in afara scopului acestui tutorial. Dacă, totuși, vă simțiți aventuros și doriți să încercați Socketbug - merită.
Acestea sunt instrumentele de depanare pe care le folosesc. Acum putem începe adăugarea unor caracteristici!
Una dintre funcțiile pe care le putem implementa fără un API PhoneGap este feed-ul Twitter. Această caracteristică va lista pur și simplu un feed de tweet-uri care se potrivesc cu un anumit termen de căutare. Din fericire, Twitter poate returna datele în format JSON când executăm o interogare pe search.twitter.com. Dacă utilizați următoarea adresă URL http://search.twitter.com/search.json?q=ufo+spotted&rpp=4, veți primi un răspuns JSON umplut cu suficiente date pentru a completa o listă.
Pentru a obține datele noastre pe pagină și a le afișa într-un mod frumos, vom folosi template-ul. Există o mulțime de motoare șablon acolo și acestea sunt toate merită să se uite la, Mustache este un foarte popular și foarte puternic. jQuery are, de asemenea, unul care cred că este perfect pentru ceea ce vrem să realizăm.
În pagina tweet, voi avea un gol ul și a div container care este ascuns pe pagină. În interiorul containerului va fi codul pe care vreau să îl folosesc ca șablon. În acest caz, este simplu Li element cu unele markup de bază care va păstra informațiile de twitter pe care dorim să le afișăm. Va fi în scenariu bloc care are un ID unic și un tip de type = "text / x-jquery-tmpl", acest lucru este atât de browser-ul nu se execută ca JavaScript. Motorul templating pe Twitter utilizează $ ca substituent pentru datele pe care le vom primi de la noi JSON date. Pagina tweets acum arată cam așa:
Acum trebuie să ne scriem funcția care va fi apelată oricând vom încărca această pagină. Această funcție va ieși la Twitter și va primi feedul nostru:
Accentsconagua
funcția getTweets () var q = "ufo + reperat" rpp = 5, twurl = "http://search.twitter.com/search.json?q="; $ .getJSON (twurl + q + "& rpp =" + rpp + "& callback =?", funcția (date) $ ("# tmpl-tweets"). ;); Voi încărca mai întâi această pagină, așadar am setat clasa paginii la curent. Acum, trebuie doar să adăugăm un stil la tweets, astfel încât acestea sunt afișate un pic mai frumos.
/ ** Tweets Styling ** / #tweets stil-list: none; padding: 10px; #tweets li font-size: 12px; overflow: ascuns; margin-bottom: 20px; #tweets li h2 font-size: 14px; margin: 0; .avatar margin-right: 10px; #tweets li a, #tweets li span float: left; #tweets li span lățime: 70%;
Data viitoare când pornim aplicația ar trebui să obținem următoarele.
Cealaltă caracteristică pe care o putem implementa înainte de a face integrarea telefonului telefonic este caracteristica hărții. Vom utiliza API-ul Google Maps pentru a genera o hartă simplă și apoi să folosim câteva date de hartă pentru a renunța la marcatori. Fiecare marcator va indica vizionarea OZN.
Pentru aceasta vom folosi API-ul JavaScript, actualmente la versiunea 3. O introducere completă a API-urilor de hărți nu are obiect pentru acest tutorial, dar puteți găsi toată documentația care poate fi găsită aici, precum și mostre de implementare. Dacă urmați tutorialul găsit aici, veți vedea cum să implementați o hartă de bază. Putem folosi același cod pentru a implementa o hartă de bază și se încheie cu următoarele:
Acum putem să mergem la documentația care acoperă marcatorii găsiți aici. Acum putem să scăpăm niște marcatori de bază pe harta noastră la încărcare. Marcatorii ar reprezenta locațiile de observare cu datele de pe fotografiile care au fost preluate și încărcate de către utilizatorii aplicației. Am avea un serviciu care rulează pe un server care poate returna date prin Ajax, probabil în format JSON. Din nou, configurarea acestui serviciu este un tutorial întreg în sine, dar pentru fiecare intrare vom crea un marker pentru hartă utilizând codul furnizat în demo.
var marker = noul Google.maps.Marker (post: newLatlng, harta: harta, titlu: "New Sighting");
După încărcarea hărții, marcatorii vor fi adăugați. Dacă citiți documentația Google API, veți găsi alte opțiuni pentru marcatori - cum ar fi afișarea acestora cu imagini și note. Merită să explorăm celelalte opțiuni și să prezentăm diferite implementări.
Este cam la fel de mult ca putem face înainte de a ajunge la PhoneGap. Ultima noastră funcție presupune utilizarea camerei foto, așa că hai să mergem înainte și să începem să ne pregătim proiectul PhoneGap. Consultați introducerea la PhoneGap aici dacă nu ați făcut-o deja.
Icoanele reprezintă o parte foarte importantă a aplicației. Este imaginea care reprezintă aplicația dvs. peste tot și există anumite reguli pe care doriți să le urmați pentru a vă asigura că arată bine oriunde va fi văzută. Există un blog mare aici despre dimensiunile icoanelor și liniile directoare de urmat când creați o pictogramă. Eu, de obicei, iau o pictogramă de 512x512 și o scot în jos de acolo la toate dimensiunile necesare.
De asemenea, va trebui să creați o imagine de lansare / pornire pentru aplicația dvs..
Odată ce aplicația implicită PhoneGap rulează pe simulatorul nostru și / sau pe dispozitivul de testare. Putem trece prin pagina principală a rezumatului din șablonul Xcode pentru PhoneGap. Primul lucru pe care vreau să mă asigur este că meniul de dispozitive este setat pe iPhone. Am putea folosi și iPad, dacă vrem și noi, dar s-ar putea să apară unele modificări CSS pe care ar trebui să le facem mai întâi. Deocamdată am lipit numai de iPhone. Verificați toate orientările dispozitivului deoarece jQuery Mobile sortează aspectul nostru în funcție de orientare. Puteți să glisați și să aruncați fișierele imagine în sloturile alocate pe pagina rezumativă.
Acum, când porniți aplicația, veți fi întâmpinat cu noua pictogramă de aplicație și cu pagina de lansare. Copiați acum fișierele din care ați lucrat în www pliant. Porniți aplicația și verificați dacă totul funcționează OK.
După ce ați configurat proiectul în Eclipse (la fel cum am făcut și proiectul nostru de testare în prima parte aici), trebuie să aveți trei dimensiuni de pictograme pregătite pentru aplicația dvs. Densitate mare (72x72), densitate medie (48x48) și densitate scăzută (36x36). Aceste pictograme înlocuiesc pictogramele implicite care pot fi găsite în res pliant. Acronimele potrivite sunt hdpi, mdpi și ldpi, care sunt în mod corespunzător pentru High, Medium și Low. Imaginile pe care doriți să le utilizați ca ecran de pornire ar trebui să meargă și în aceste dosare.
Pentru ca ecranul de pornire să funcționeze pentru Android, trebuie să adăugăm și să ne modificăm DroidGap clasa pentru a include imaginea de stropire pe sarcină. Adăuga:
super.setIntergerProperty ("splashscreen", R.drawable.splash) Apoi, loadUrl are nevoie de un timeout adăugat la acesta.
super.loadUrl ("file: ///android_asset/www/index.html", 5000); Fișierul dvs. ar trebui să arate acum după cum urmează:
Rulați aplicația și asigurați-vă că totul funcționează OK.
Suntem acum la punctul în care suntem gata să implementăm ultimele două funcții: camera de dispozitiv și opțiunile de stocare locală. Acest lucru va fi acoperit în viitoarele tutoriale din această serie. Această serie va trece, de asemenea, prin trimiterea aplicației noastre la diferite magazine de aplicații, deci asigurați-vă că urmați!
