Share
Vuoi imparare come usare PhoneGap, ma non sai da dove iniziare? Unisciti a noi mentre mettiamo insieme "Sculder", non solo un tributo ad una serie televisiva di fantascienza eccellente, ma un'applicazione mobile nativa a tutti gli effetti per il credente in te!
Abbiamo interrotto l'ultimo tutorial di questa serie subito dopo aver inserito la nostra applicazione nel framework Phonegap e in attesa di aggiungere la nostra ultima funzionalità: la fotocamera del dispositivo. L'idea alla base di questo tutorial è di consentire all'utente di scattare una foto con la fotocamera e quindi di caricarla su un server. Non copriremo l'effettivo caricamento dell'immagine, ma lasceremo lo spazio per la funzionalità da aggiungere. Puoi trovare numerosi esempi di varie implementazioni per il caricamento di immagini tramite PHP, Ruby e altre lingue lato server altrove online. Invece, questo tutorial si concentrerà su come scattare la foto, visualizzare la foto scattata e dare all'utente un avviso che l'immagine è stata caricata (la funzione che il server potrebbe attivare quando restituisce un messaggio di caricamento riuscito).
La prima cosa che dobbiamo fare è aggiungere un pulsante sulla nostra pagina:
Successivamente, abbiamo bisogno di aggiungere un po 'di stile per il pulsante per renderlo un po' più bello. Poiché stiamo sviluppando per browser decenti, possiamo trarre vantaggio da alcuni stili CSS3.
button.camera-control background-color: # f3f3f3; background-image: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # f3f3f3), color-stop (50%, #dddddd), color-stop (50%, # d2d2d2), color-stop (100%, #dfdfdf)); background-image: -webkit-linear-gradient (in alto, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); background-image: linear-gradient (in alto, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); border-right: 1px solid #dfdfdf; border-bottom: 1px solid # b4b4b4; border-right: 1px solid #dfdfdf; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 1px 0 0 bianco, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; colore: # 666; blocco di visualizzazione; font: grassetto 16px "helvetica neue", helvetica, arial, sans-serif; margine: 10px auto; imbottitura: 7px 0; text-shadow: 0 1px 1px #fff; larghezza: 150 px; button.camera-control: hover background-color: # e5e5e5; background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0%, # e5e5e5), color-stop (50%, # d1d1d1), color-stop (50%, # c4c4c4), color-stop (100%, # b8b8b8)); background-image: -webkit-linear-gradient (in alto, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); background-image: linear-gradient (in alto, # 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; button.camera-control: active -webkit-box-shadow: inset 0 0 30px 0 # 999999, 0 1px 0 0 bianco; box-shadow: inset 0 0 30px 0 # 999999, 0 1px 0 0 bianco;
Se ora esegui e provi la tua app (sia sul simulatore che su un dispositivo) dovresti avere una pagina come questa:
Ora abbiamo bisogno di legare la funzionalità. Innanzitutto, iniziamo con capturePhoto () funzione che avvierà la videocamera:
function capturePhoto () navigator.camera.getPicture (uploadPhoto, null, sourceType: 1, quality: 60);
La funzione di successo, carica una foto, è il prossimo ad essere scritto. Questa funzione caricherà la foto sul nostro server, visualizzerà l'immagine sullo schermo e darà anche all'utente la notifica che l'immagine è stata caricata. Iniziamo trasmettendo l'immagine sullo schermo:
function uploadPhoto (data) // questo è il punto in cui invierai il file immagine al server // restituisci l'immagine allo schermo cameraPic.src = "data: image / jpeg; base64," + data;
Una delle API di Phonegap che non abbiamo mai visto prima, ma useremo qui, è l'API di notifica. L'API di notifica serve per avvisare l'utente di un'azione eseguita, come la mettere in guardia() Funzionalità Javascript, ma su misura per il dispositivo specifico in cui è in esecuzione. Ha anche la possibilità di emettere un segnale acustico, vibrare, o semplicemente semplicemente pop-up e avvisare un messaggio di dialogo. Per questa app, useremo il notification.alert (), che è una finestra di dialogo che può accettare alcune opzioni personalizzabili. L'utilizzo di base è:
navigator.notification.alert (message, alertCallback, [title], [buttonName])
All'interno del nostro carica una foto funzione, useremo il notification.alert () per visualizzare un messaggio che la foto è stata caricata sul server. Il nostro codice si presenta così:
Accentsconagua
navigator.notification.alert ('La tua foto è stata caricata', // messaggio okay, // richiamata 'Photo Uploaded', // title 'OK' // buttonName); Abbiamo anche bisogno di scrivere il va bene funzione per assicurarci di non incorrere in errori quando eseguiamo il nostro codice. Può fare tutto ciò che vuoi, ma è meglio usarlo quando è legato al server. Al momento, la funzione rimarrà vuota.
Nostro carica una foto() la funzione ora è simile a questa:
function uploadPhoto (data) // questo è il posto dove invierai il file immagine al server cameraPic.src = "data: image / jpeg; base64," + data; // Caricamento riuscito sul server navigator.notification.alert ('La tua foto è stata caricata', // messaggio ok, // callback 'Photo Uploaded', // title 'OK' // buttonName); // upload fallito Fail / * if (failedToUpload) navigator.notification.alert ('La tua foto non è riuscita a caricare', failedDismissed, 'Photo Not Uploaded', 'OK'); * / function okay () // Fai qualcosa Ora è necessario eseguire l'applicazione su un dispositivo, in quanto il simulatore non ha accesso a una telecamera. Dopo aver scattato una foto, riceverai il seguente avviso:
La nostra app è ora completa e siamo pronti per esportarla come applicazione funzionante e inviarla ai negozi!
Per poter distribuire un'applicazione nell'Apple App Store, è necessario disporre di un certificato per sviluppatori pagato da Apple.
L'esportazione per la piattaforma iOS può essere un po 'una sfida, ma se tutti i certificati sono preinstallati e sincronizzati con Xcode (che avresti dovuto fare prima di poter provare su un dispositivo) non dovrebbe essere troppo impegnativo dopo averlo fatto una volta. Se fai doppio clic sul tuo progetto in Xcode e vai alle Impostazioni di compilazione, assicurati che l'identità di firma del codice venga utilizzata per l'applicazione.
Ora devi andare a Prodotto => archivio e inviare l'app all'Archivio (che si trova nella finestra Organizer). È possibile che tu possa ricevere un errore sulla falsariga di NSAutomaticpool non è disponibile, questo è dovuto al conteggio dei riferimenti automatico (che è nuovo). Al momento, PhoneGap non lo supporta, quindi è sufficiente disattivarlo nelle impostazioni di creazione del progetto. Se vai alle impostazioni di build e cerchi -CLANG_ENABLE_OBJC_ARC lo troverai e lo cambierai in "no".
Una volta fatto, puoi andare su iTunes Connect e iniziare a configurare la tua app lì. Una volta effettuato l'accesso, fai clic su "Gestisci applicazioni" e "Aggiungi una nuova app". Passare attraverso la procedura guidata, aggiungere l'icona di iTunes (dimensione 512x512px) e almeno uno screenshot dell'applicazione. Ci sono altri campi obbligatori come un numero di SKU (questo è un numero di tracciamento per te stesso, io personalmente uso 0001 per iniziare e continuare da lì) e una descrizione. Una volta completato il modulo, fai clic su Invia.
Una volta terminato, ti verrà presentato quanto segue
All'inizio, lo stato delle applicazioni sarà "Prepara per il caricamento", quindi devi fare clic su "Visualizza dettagli" e quindi su "Caricamento binario". Una volta completato questo, il tuo stato sarà "Pronto per il caricamento".
Di nuovo nell'Organizer di Xcode possiamo eseguire l'opzione di convalida per verificare che la nostra app sia valida per essere inviata all'App Store e speriamo che l'app vada avanti senza errori di validazione.
Nota: Saltare attraverso tutti i cerchi che Apple presenta non è un compito facile da padroneggiare. Se stai riscontrando vari errori relativi a fallimenti di build perché non è stato possibile trovare profili di provisioning, ecc., Fai una ricerca rapida su Google e troverai la soluzione. Esistono 100 diversi scenari con certificati di corrispondenza mancata che ho dovuto affrontare durante il tentativo di creare un'app per iOS, il tutto risolto utilizzando Google. Se riscontri costantemente problemi, sentiti libero di lasciare un commento qui sotto e cercherò di aiutarti!
Ora che la nostra app è valida, possiamo inviarla all'App Store. Facciamo clic su Invia, controlla che la nostra applicazione e identità siano corrette, quindi attendi il caricamento.
Una volta terminato, puoi accedere a iTunes Connect e vedere che l'app è "In attesa di revisione". Spesso possono essere necessari fino a 14 giorni prima che l'app si trovi nell'App Store, quindi aspettati di aspettare un po '.
Per fortuna, dopo tutto il possibile dolore che potresti aver attraversato con l'esportazione iOS, Android è leggermente più facile. Supponendo che si stia utilizzando Eclipse per lo sviluppo di Android, è sufficiente rimuovere tutte le funzionalità inutilizzate dal file manifest e quindi fare clic con il tasto destro del mouse sul progetto e scendere a Strumenti Android => Esporta pacchetto di applicazioni con firma. Dopo aver completato la procedura guidata per esportare il pacchetto, è necessario assicurarsi di creare un keystore. Finirai con un .apk file, che è quello che verrà caricato sul mercato Android.
Vai qui al sito del publisher Android Market ed esegui l'accesso. Se è la prima volta qui, devi registrare un account (utilizzando il tuo account Google esistente), pagare $ 25 e configurare un account Google Wallet. Una volta registrato e connesso, puoi andare avanti e caricare il tuo .apk file. È un processo molto più diretto rispetto alla rotta iOS. Se ritieni che la forma sia travolgente o non sei troppo sicuro di qualcosa, dai un'occhiata al tutorial di Shane Conder e Lauren Darcey qui su Mobiletuts mentre lo esaminano passo dopo passo. La loro intera serie su sviluppo Android è degna di lettura se siete interessati a portare avanti il vostro sviluppo!
Una volta che hai finito, non ci vuole tempo prima che la tua app sia sul mercato e pronta per essere venduta.
Come affermato nel primo tutorial di questa serie, stiamo per trarre vantaggio dal sistema di cloud building di PhoenGap che si trova su build.phonegap.com. A lungo termine, l'utilizzo di questo servizio costa, ma l'altra possibilità di eseguire diversi SDK su vari sistemi operativi e quindi di trasferire l'app su ciascuno di essi potrebbe richiedere più tempo e problemi dei costi aggiuntivi necessari per utilizzare il servizio vale la pena.
Tutto ciò di cui abbiamo bisogno è a cerniera lampo file contenente il nostro HTML, CSS e JavaScript. Caricalo sul servizio e verrai indirizzato alla schermata "Le tue app" in cui vedrai la tua app disponibile nei suoi vari formati:
È un semplice click e download per ottenere la giusta build. Per iniziare per Blackberry, dobbiamo inviare la nostra app al loro "App World". Vai qui all'App World e fai clic su "Inizia". Compila il modulo piuttosto semplice e poi aspetta.
NOTA: Sfortunatamente, al momento (2/8/2012), Blackberry apparentemente ha un arretrato di applicazioni "Vendor". Ho aspettato fin dall'inizio di gennaio per essere approvato, ma finora non ho avuto molta fortuna. Attualmente stanno pubblicando una promozione Playbook per coloro che desiderano convertire le proprie app Android, causando il backlog. Se sei interessato a registrarti come fornitore Blackberry, registrati il prima possibile.
Per gli altri dispositivi supportati dal servizio di cloud build di PhoneGap, vale la pena iscriversi ai relativi siti di sviluppo: Nokia e webOS. Sono molto simili e pieni di documentazione per il caricamento di applicazioni nei loro mercati rilevanti. Seguono lo stesso tipo di processo (Iscriviti, Carica App, Carica materiali di marketing, Aspetta) e sono ragionevolmente semplici da seguire.
Ora abbiamo completato la nostra app, l'abbiamo esportata e caricata nell'App Store iOS e nel mercato Android. Abbiamo anche utilizzato il servizio di build di PhoneGap per ottenere una versione della nostra app sulle altre piattaforme che potremmo voler supportare.
Phonegap sta passando da un punto di forza al momento e continua a crescere (la versione 1.4 è stata appena rilasciata). Vale la pena conoscere questo SDK se si è appena agli inizi nello sviluppo mobile e non si ha alcuna comprensione dei linguaggi di programmazione nativi dietro le piattaforme Android o iOS. Speriamo che questa serie di tutorial ti abbia mostrato come fare proprio questo!
