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!
Am rămas în ultimul tutorial din această serie imediat după ce am primit aplicația noastră în cadrul Phonegap și am așteptat să adăugăm ultima noastră bucată de funcționalitate: camera aparatului. Ideea din spatele acestui tutorial este de a permite utilizatorului să facă o fotografie cu aparatul foto și apoi să îl încarce pe un server. Nu vom acoperi încărcarea reală a imaginii, dar vom lăsa spațiul pentru funcționalitatea care trebuie adăugată. Puteți găsi o mulțime de exemple de implementări diferite pentru încărcarea imaginilor prin intermediul limbajului PHP, Ruby și a altor limbi de pe server în altă parte online. În schimb, acest tutorial se va concentra pe realizarea imaginii, afișarea imaginii realizate și dând utilizatorului o avertizare că imaginea a fost încărcată (funcția pe care serverul dvs. o poate declanșa atunci când returnează un mesaj de încărcare reușit).
Primul lucru pe care trebuie să-l facem este să adăugați un buton pe pagina noastră:
Apoi, trebuie să adăugăm un pic de stil pentru butonul pentru a face să pară un pic mai frumos. Pe măsură ce dezvoltăm browsere decente, putem profita de unele stiluri CSS3.
button.camera-control fundal-culoare: # f3f3f3; fundal-imagine: -webkit-gradient (50%, #dddddd), stop-color (50%, # d2d2d2) oprire culori (100%, #dfdfdf)); fundal-imagine: -webkit-gradient linear (top, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); fundal-imagine: gradient liniar (top, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); frontieră-dreapta: 1px solid #dfdfdf; frontieră-fund: 1px solid # b4b4b4; frontieră-dreapta: 1px solid #dfdfdf; -webkit-border-radius: 5px; raza de graniță: 5px; -webkit-box-shadow: inset 0 1px 0 0 alb, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; box-shadow: inset 0 1px 0 0 alb, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; culoare: # 666; afișare: bloc; font: bold 16px "helvetica neue", helvetica, arial, sans-serif; margine: 10 pixeli automat; umplutura: 7px 0; text-shadow: 0 1px 1px #fff; lățime: 150px; buton.camera-control: hover background-color: # e5e5e5; fundal-imagine: -webkit-gradient (50%, # d1d1d1), stop color (50%, # c4c4c4) oprire culori (100%, # b8b8b8)); fundal-imagine: -webkit-gradient liniar (top, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, #b8b8b8 100%); fundal-imagine: gradient linear (sus, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, #b8b8b8 100%); -webkit-box-shadow: inset 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; box-shadow: inset 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; buton.camera-control: activ -webkit-box-shadow: inset 0 0 30px 0 # 999999, 0 1px 0 0 alb; box-shadow: inset 0 0 30px 0 # 999999, 0 1px 0 0 alb;
Dacă rulați și testați acum aplicația (fie simulatorul, fie pe un dispozitiv), ar trebui să aveți o pagină ca aceasta:
Acum trebuie să legăm funcționalitatea. În primul rând, începem cu capturePhoto () care va porni camera:
captura de funcțiiPhoto () navigator.camera.getPicture (uploadPhoto, null, sourceType: 1, quality: 60);
Funcția de succes, încarcă fotografie, este următoarea de scris. Această funcție va încărca fotografia pe serverul nostru, va scoate imaginea pe ecran și, de asemenea, va da utilizatorului o notificare că imaginea a fost încărcată. Să începem prin afișarea imaginii pe ecran:
funcția uploadPhoto (date) // aici este locul unde ați putea trimite fișierul imagine către server // afișa imaginea pe ecranul camereiPic.src = "data: image / jpeg; base64" + data;
Unul dintre API-urile Phonegap la care nu ne-am uitat cu adevărat înainte, dar vom folosi aici este API-ul de notificare. API-ul Notificare este pentru alertarea utilizatorului despre o acțiune efectuată, cum ar fi alerta() Funcționalitate Javascript, dar adaptată pentru dispozitivul în care rulează. De asemenea, are capacitatea de a beep, de a vibra sau de a afișa doar un mesaj de dialog. Pentru această aplicație, vom folosi doar notification.alert (), care este o casetă de dialog care poate accepta unele opțiuni personalizabile. Utilizarea de bază este:
navigator.notificare.alert (mesaj, alertăCallback, [titlu], [butonNumăr])
În cadrul nostru încarcă fotografie funcția, vom folosi notification.alert () pentru a afișa un mesaj că fotografia a fost încărcată pe server. Codul nostru arată astfel:
Accentsconagua
navigator.notification.alert ("Fotografia ta a fost încărcată", // mesajul okay, // apelul "Photo Uploaded", // title "OK" // buttonName); De asemenea, trebuie să scriem bine pentru a ne asigura că nu ne confruntăm cu erori atunci când executăm codul nostru. Poate face orice doriți, dar este mai bine folosit când este legat în server. În prezent, funcția va rămâne goală.
Al nostru încarcă fotografie() Funcția acum arată astfel:
funcția uploadPhoto (data) // aici este locul unde ați trimite fișierul imagine pe serverul cameraPic.src = "data: image / jpeg; base64" + data; // încărcare reușită pe serverul navigator.notification.alert ("Fotografia ta a fost încărcată", // mesajul okay, // apelul "Photo Uploaded", // title "OK" // butonulNume); // încărcarea a eșuat Fail / * if (failedToUpload) navigator.notification.alert ("Fotografia ta nu a încărcat", failedDismissed, "Photo Not Uploaded", "OK"); * / funcționează bine () // Face ceva Veți avea nevoie acum să rulați aplicația pe un dispozitiv, deoarece simulatorul nu are acces la o cameră. După ce ați făcut o fotografie, veți primi următoarea alertă:
Aplicația noastră este acum completă și suntem gata să o exportăm ca aplicație de lucru și să o trimitem în magazine!
Rețineți că, pentru a distribui o aplicație în Apple App Store, trebuie să aveți un certificat de dezvoltator plătit de la Apple.
Exportarea pentru platforma iOS poate fi o provocare, dar atâta timp cât aveți toate certificatele preinstalate și sincronizate cu Xcode (pe care ar trebui să le fi făcut înainte de a putea testa pe un dispozitiv), nu ar trebui fie prea provocatoare după ce ați făcut-o o dată. Dacă faceți dublu clic pe proiectul dvs. în Xcode și mergeți la setările de configurare, asigurați-vă că identitatea dvs. de semnare a codului este utilizată pentru aplicație.
Acum trebuie să te duci Produs => Arhiva și trimiteți aplicația în fereastra Arhivă (găsită în Organizator). Este posibil să aveți o eroare la rândul lui NSAutomaticpool nu este disponibil, acest lucru se datorează numărării automate a referințelor (care este nouă). PhoneGap nu o acceptă în acest moment, așa că trebuie doar să o oprim în setările de construire pentru proiect. Dacă mergeți la setarea de construire și căutați -CLANG_ENABLE_OBJC_ARC îl veți găsi și veți trece la "nu".
După ce ați terminat, puteți să vă conectați la iTunes Connect și să începeți să configurați aplicația acolo. După ce v-ați conectat, faceți clic pe "Gestionați aplicațiile" și pe "Adăugați o aplicație nouă". Mergeți prin Wizard, adăugați pictograma iTunes (dimensiune de 512x512 px) și cel puțin o captură de ecran a aplicației. Există și alte câmpuri obligatorii, cum ar fi un număr SKU (acesta este un număr de urmărire pentru dvs. Personal, eu folosesc 0001 pentru a începe și continua de acolo) și o descriere. După ce ați terminat de completat formularul, faceți clic pe Trimiteți.
Odată terminat, vi se va prezenta următoarele
La început, starea Aplicațiilor va fi "Pregătiți pentru încărcare", deci trebuie să faceți clic pe "Vizualizare detalii" și apoi pe "Încărcare binară". Odată ce ați trecut prin aceasta, statutul dvs. va fi acum "Gata pentru încărcare".
Înapoi în Organizatorul Xcode putem rula opțiunea Validare pentru a verifica dacă aplicația noastră este bine să fie trimisă la App Store și sperăm că aplicația va ajunge fără erori de validare.
Notă: Sari peste toate cercurile pe care Apple le prezintă nu este o sarcină ușoară de a stăpâni. Dacă întâmpinați diverse erori legate de construirea eșecului, deoarece nu s-au găsit profiluri de provizionare etc., faceți o căutare rapidă pe Google și veți găsi soluția. Există 100 de scenarii diferite cu certificate cu potrivire nedorită cu care m-am confruntat în timp ce încercam să construiesc o aplicație pentru iOS, toate rezolvate prin utilizarea Google. Dacă vă confruntați în mod constant cu probleme, nu ezitați să lăsați un comentariu mai jos și voi încerca să vă ajut!
Acum că aplicația noastră este validă, o putem trimite la App Store. Faceți clic pe Trimiteți, verificați dacă aplicația și identitatea noastră sunt corecte și așteptați încărcarea.
După ce ați terminat, puteți să vă conectați la iTunes Connect și să vedeți că aplicația este "În așteptarea revizuirii". Adesea poate dura până la 14 zile înainte ca aplicația să se afle în App Store, deci așteptați puțin.
Din fericire, după toate posibilele dureri pe care le-ați fi putut trece prin exportul iOS, Android este ușor mai ușor. Presupunând că utilizați Eclipse pentru dezvoltarea Android, tot ce trebuie să faceți este să eliminați toate caracteristicile neutilizate din fișierul manifest și apoi să faceți clic dreapta pe proiect și să mergeți la Instrumente Android => Exportați pachetul de aplicații semnate. Odată ce ați trecut prin Expertul pentru a exporta pachetul, trebuie să vă asigurați că creați un Keystore. Veți sfârși cu un .apk fișier, ceea ce vom încărca pe piața Android.
Navigați pe site-ul editorului Android Market și conectați-vă. Dacă aceasta este prima dată aici, va trebui să vă înscrieți pentru un cont (utilizând contul Google existent), să plătiți 25 USD și să configurați un cont Google Wallet. După ce v-ați înscris și v-ați conectat, puteți continua și încărcați-vă .apk fişier. Este un proces mult mai simplu decât calea iOS. Dacă simțiți că forma este copleșitoare sau nu sunteți prea sigură despre ceva, consultați tutorialul lui Shane Conder & Lauren Darcey aici pe mobiletuts pe măsură ce treceți pas cu pas. Întreaga lor serie cu privire la dezvoltarea Android merită citită, dacă sunteți cu toții interesați să vă dezvoltați în continuare!
Odată ce ați terminat, nu este nevoie deloc de timp înainte ca aplicația dvs. să fie pe piață și gata să fie vândută.
Așa cum este menționat în primul tutorial din această serie, vom profita de sistemul de construire a cloud-ului PhoenGap găsit la build.phonegap.com. Pe termen lung, utilizarea acestui serviciu costă bani, dar cealaltă opțiune de a rula diferite SDK-uri diferite în diferite sisteme de operare și apoi de a porni aplicația peste fiecare poate avea mai mult timp și consumă mai mult decât banii pe care îi costă să utilizeze serviciul merita.
Tot ce avem nevoie este a zip fișier care conține HTML, CSS și JavaScript. Încărcați-l la serviciu și apoi veți fi dus la ecranul "Aplicațiile dvs." unde veți vedea disponibilă aplicația în diferite formate:
Este un simplu clic și descărcare pentru a obține dreptul de a construi. Pentru a începe cu Blackberry, trebuie să trimiteți aplicația noastră la "App World". Mergeți la App World aici și faceți clic pe "Începeți". Completați formularul simplu și apoi așteptați.
NOTĂ: Din păcate, în momentul de față (2/8/2012), Blackberry aparent are o întârziere de aplicații "Vendor". Am așteptat de la începutul lunii ianuarie să fie aprobat, dar până acum nu a avut nici un astfel de noroc. În prezent, rulează o promoție Playbook pentru cei care doresc să își convertească aplicațiile Android, ceea ce cauzează restanțele. Dacă sunteți cu toții interesați să vă înscrieți pentru a fi un furnizor de BlackBerry, înregistrați-vă cât mai repede posibil.
Pentru celelalte dispozitive suportate de serviciul de construire a norului PhoneGap, merită să vă înscrieți la site-urile lor de dezvoltare relevante: Nokia și webOS. Ele sunt foarte asemănătoare și complete de documentație pentru încărcarea aplicațiilor pe piețele lor relevante. Ele urmează același tip de proces (înregistrare, încărcare aplicație, încărcare materiale de marketing, așteptați) și sunt în mod rezonabil simplu de urmat.
Apoi am terminat aplicația, l-am exportat și am încărcat-o în App Store iOS, precum și pe piața Android. De asemenea, am folosit serviciul de configurare PhoneGap pentru a obține o versiune a aplicației noastre pe celelalte platforme pe care am putea să le sprijinim.
Phonegap merge de la putere la putere în momentul de față și continuă să crească (versiunea 1.4 a fost recent lansat). Mergeți bine să cunoașteți acest SDK dacă începeți doar în dezvoltarea telefonului mobil și nu aveți o înțelegere a limbajului de programare nativ din spatele platformelor Android sau iOS. Sperăm că această serie de tutorial ți-a arătat cum să faci asta!
