Share
Ionic è un popolare framework per app per dispositivi mobili che consente di creare rapidamente app mobili ibride, utilizzando HTML, CSS e JavaScript. In questa serie, apprendi come configurare e creare le tue app mobili con Ionic creando insieme un'app mobile completamente funzionante. Iniziamo con un'introduzione a Ionic e impariamo come iniziare con gli strumenti.
In questo tutorial, copriamo:
Ionic è una serie di tecnologie che sono ordinatamente raggruppate e gestite insieme. Mi piace pensare a Ionic come una pila di diversi framework. L'interazione tra queste tecnologie è ciò che alla fine crea l'app risultante e fornisce una buona esperienza di sviluppo e utente.
Come base, Ionic utilizza Cordova come framework per le app ibride. In sostanza, consente a un'applicazione Web di essere raggruppata in un'app nativa che può essere installata su un dispositivo. Incorpora una visualizzazione Web, che è un'istanza del browser isolata che esegue le tue applicazioni web.
Fornisce inoltre un'API che è possibile utilizzare per comunicare con il dispositivo stesso, ad esempio per chiedere le coordinate GPS o accedere alla videocamera. Molte di queste funzionalità hardware aggiuntive sono attivate tramite il sistema di plugin Cordova, quindi è sufficiente installare e utilizzare le funzionalità necessarie. Ti presento più Cordova in un tutorial successivo.
Angular è un noto framework JavaScript per la creazione di applicazioni Web, e Ionic è costruito su di esso. Angular fornisce la logica dell'applicazione Web utilizzata per creare l'applicazione effettiva.
Se già lo conosci, sarai in grado di cogliere rapidamente le caratteristiche ioniche. Se sei nuovo di Angular, puoi continuare a leggere e inizierai a raccogliere alcuni Angular di base.
Non coprirò Angular in modo molto dettagliato, quindi ti consiglio di dedicare del tempo ad apprendere le basi leggendo la documentazione Angular.
La principale funzione di vendita di Ionic è un insieme pulito di componenti dell'interfaccia utente progettati per dispositivi mobili. Quando si crea un'app nativa, esistono SDK nativi che forniscono componenti dell'interfaccia, come schede e finestre di dialogo.
Ionic fornisce un insieme simile di componenti di interfaccia da utilizzare nelle app ibride. Ionic è appassionato di affermare che è l'SDK mancante per le app ibride e riempie abbastanza bene quel ruolo. Inoltre, Ionic ha una serie di altre caratteristiche importanti che lo rendono una scelta molto avvincente.
Ionic è più di un semplice insieme di componenti dell'interfaccia utente, è anche un insieme di strumenti per sviluppatori e un ecosistema per la creazione rapida di app mobili ibride. Mi piacerebbe capire perché le app ibride sono ideali per gli sviluppatori web, i dettagli sulla piattaforma e gli strumenti Ionic e quando Ionic potrebbe non essere adatto.
Esistono vecchi dibattiti sulla qualità dei diversi approcci alla creazione di app. Alcuni mesi fa, ho scritto un articolo dettagliato sui tre tipi di esperienze mobili. Ti consiglio di esaminarlo se non sei sicuro dei punti di forza e di debolezza di questi diversi approcci sui dispositivi moderni.
Le app ibride sono il punto ideale nel fornire agli sviluppatori web la possibilità di utilizzare le competenze che già conoscono per creare app mobili che possano sembrare app native.
Pochissimi dei framework mobili disponibili hanno strumenti che si avvicinano alla qualità degli strumenti di Ionic. Diamo uno sguardo più da vicino agli strumenti primari disponibili nel resto del tutorial, ma mi piacerebbe coprire alcune delle funzionalità che probabilmente troverai utili nel tempo.
Gli strumenti CLI di Ionic sono di prim'ordine e offrono molte funzionalità che consentono di avviare un progetto, visualizzarlo in anteprima e, infine, costruirlo.
Ionic offre una serie di funzionalità, alcune gratuite e altre a pagamento, utili per lo sviluppo professionale, come l'analisi delle app, le notifiche push e gli strumenti di distribuzione.
Ci sono un certo numero di componenti aggiuntivi gratuiti e a pagamento per Ionic che possono essere facilmente integrati nella tua app. Ci sono temi, componenti unici e altri plugin.
Ionic non è perfetto per ogni app mobile. Considera i seguenti casi per decidere se Ionic è adatto al tuo progetto.
In altre parole, se non si sta costruendo un'app per i vecchi dispositivi e non si ha la necessità di programmare molto a livello hardware, Ionic è più che capace di fornire un'esperienza di app di qualità per i propri utenti.
Ionic è dotato di una fantastica CLI (Command Line Interface) per aiutare a iniziare, costruire e distribuire le tue app. Utilizzerai la CLI pesantemente durante lo sviluppo. Anche Ionic si affida a Cordova, quindi lo userete indirettamente.
Devi avere Node.js installato per iniziare. Se non lo fai, prenditi un momento per installarlo sul tuo sistema. Io uso Node.js 5.6 per questo tutorial e consiglio di essere sull'ultima versione stabile.
Installare Ionic e Cordova è semplice come installare due moduli di nodi globali. Se lo hai già fatto, questo dovrebbe sembrare abbastanza familiare. Apri il tuo terminale ed esegui il seguente comando:
npm install -g [email protected] [email protected]
Questo potrebbe richiedere alcuni istanti, ma dovresti ottenere un messaggio di successo che dice che sono entrambi installati. È possibile verificare ciò eseguendo quanto segue per vedere l'output dei numeri di versione.
ionico -v && cordova -v
Dovrebbe produrre la versione di entrambi Ionic e Cordova. Per gli scopi di questo tutorial, sto usando la versione 1.7.14 di Ionic e la versione 6.0.0 di Cordova.
Ci sono alcune funzionalità nella CLI Ionic e puoi sempre ottenere un riferimento rapido eseguendo aiuto ionico. Puoi anche consultare la documentazione online per ulteriore supporto se necessario.
Ionic non raggruppa tutti gli strumenti necessari per creare un'app, si basa su alcuni SDK e software aggiuntivi forniti da Apple e / o Google. È bene leggere e seguire le guide della piattaforma fornite da Cordova per configurare per ogni piattaforma con cui si desidera lavorare.
Puoi farlo in un secondo momento, ma dovrai configurare gli strumenti della piattaforma prima di poter visualizzare in anteprima o emulare un'applicazione su un simulatore o dispositivo.
Esiste un insieme generale di passaggi che dovrai seguire durante lo sviluppo di un'app Ionic. Questi passaggi hanno i comandi CLI corrispondenti per aiutarti. Diamo un'occhiata ai comandi primari che rappresentano un tipico flusso di sviluppo per la creazione di app Ionic.
Supponendo che tu abbia già un'idea di base su cosa stai progettando di costruire, il primo passo è creare un nuovo progetto. I progetti ionici sono basati su Cordova e richiedono un'impalcatura per Cordova per capire in seguito il tuo progetto. Ionic ha diversi modelli predefiniti che puoi utilizzare per generare un progetto iniziale, ma puoi anche fornirne uno tuo.
Per avviare un progetto, eseguire il campione di inizio ionico comando. Genera una nuova cartella nella directory corrente in base al nome fornito (ad es. campione). Durante l'esecuzione del comando, scarica i file da GitHub necessari per il progetto e inizializza il progetto. Utilizza il progetto predefinito, che ha un'app di base con un'interfaccia di base delle schede.
Correre campione cdper navigare nella nuova directory. Quando ispezionate la directory, noterete alcuni file e directory. Non preoccuparti troppo di ogni singolo file al momento. Qui ci sono alcune cose con cui dovrai lavorare inizialmente.
Per il resto di questo tutorial, lavoreremo con il progetto appena generato e vediamo come sviluppare e visualizzare in anteprima l'app.
Hai iniziato un progetto, ora vuoi iniziare a sviluppare. Durante lo sviluppo iniziale, è probabile che l'anteprima del tuo lavoro in un browser. Dopotutto, un'app Ionic è in realtà solo un'applicazione web. Ionic viene fornito con un server di sviluppo locale che crea e serve la tua app.
Per avviare il server di sviluppo, eseguire servire ionico. Non appena viene eseguito, apre un'anteprima dell'app nel browser predefinito. A questo punto, è possibile utilizzare gli strumenti di sviluppo del browser per ispezionare l'applicazione, controllare gli errori e qualsiasi altra attività che si farebbe normalmente durante la creazione di un'applicazione Web.
Il server continua a funzionare in background e controlla il progetto per le modifiche ai file. Quando rileva che hai modificato e salvato un file, ricarica automaticamente il browser automaticamente.
Anteprima dell'applicazione Ionic in esecuzione in Chrome, utilizzando l'emulazione di dispositivo negli strumenti di sviluppoTi consiglio di utilizzare Chrome come browser a causa dei suoi fantastici strumenti per gli sviluppatori. Una caratteristica particolarmente utile è la capacità di emulare le dimensioni del dispositivo, che rende facile vedere come appare l'app su un particolare dispositivo. Non è un vero emulatore che esegue l'app come un vero dispositivo, ma imita le dimensioni dell'app.
Cordova supporta molti diversi tipi di dispositivi mobili, che sono chiamati piattaforme. Devi registrare le piattaforme che desideri utilizzare come target con la tua app e installare i file di progetto appropriati. Fortunatamente, questo è in gran parte gestito tramite la CLI ionica. Ionic supporta pienamente le piattaforme iOS e Android.
Per aggiungere una piattaforma, esegui piattaforma ionica aggiungere Android. Sostituire androide con ios per aggiungere invece iOS. Una volta aggiunto, vedrai una nuova cartella nella directory delle piattaforme del tuo progetto. Questa cartella contiene file specifici della piattaforma. In generale, è necessario evitare di apportare troppe modifiche ai file in questa directory.
In caso di problemi, puoi rimuovere la piattaforma e aggiungerla di nuovo. Per rimuovere una piattaforma, esegui piattaforma ionica rimuovere Android.
Ad un certo punto, vorrai avviare l'anteprima della tua app in un vero emulatore. Gli emulatori sono essenzialmente versioni software di un dispositivo reale. Questo è davvero utile per testare rapidamente come dovrebbe comportarsi l'app su un dispositivo reale. Si noti che gli emulatori non dispongono di tutte le funzionalità di un dispositivo fisico poiché sono solo dispositivi di emulazione software.
Parte del codice potrebbe non funzionare come previsto, ad esempio, se si prevede di utilizzare l'elenco dei contatti del dispositivo. In genere, solo le funzionalità che si integrano con l'hardware potrebbero non funzionare come previsto, ma per la maggior parte delle cose dovrebbe funzionare correttamente.
Configurare gli emulatori può essere un po 'un compito, a seconda del tipo di computer che si utilizza e di ciò che è necessario testare. L'emulazione di un iPhone può essere eseguita solo su un computer con OS X, ma Android può essere emulato su qualsiasi sistema operativo. Per impostare gli emulatori, fare riferimento alle guide della piattaforma I collegate in precedenza.
Una volta che hai fatto, puoi emulare usando emulare ionico android -c -l. Come prima, sostituisci androide con ios se scegli come target iOS. Questo crea, installa e avvia l'app nel simulatore. Questo può richiedere alcuni istanti, quindi potresti voler utilizzare alcune delle utili funzioni di live live come hai fatto in precedenza nel browser.
Puoi usare l'opzionale -l per far sì che l'app si attivi di nuovo nel simulatore (senza la necessità di ricostruire e reinstallare). Questo è fantastico finché non si modifica nulla relativo a come viene creata l'app (come le impostazioni Cordova). Puoi anche usare l'opzionale -c flag per far inoltrare i messaggi della console al log del terminale. Li uso quasi ogni volta.
Il modo migliore per visualizzare l'anteprima dell'app è installarlo ed eseguirlo effettivamente su un dispositivo. Ciò richiede che tu abbia configurato una piattaforma e che un dispositivo sia connesso al tuo computer. Per fare questo è necessaria una configurazione che varia in base al tipo di dispositivo che hai. È possibile fare riferimento alle guide della piattaforma sopra per collegare il dispositivo.
Una volta che hai un dispositivo connesso, è abbastanza semplice eseguire l'app su di esso dalla riga di comando. Uso correre ionico android -c -l e Ionic costruisce, distribuisce e avvia la tua app. Di nuovo, puoi sostituire ios per androide. Proprio come il comando emula, puoi usare l'opzionale -l e -c flag per abilitare il live ricaricamento e la registrazione della console sul terminale.
Una volta che l'app è sul tuo dispositivo, puoi disconnetterla e l'app rimarrà installata sul dispositivo. Ciò è utile se si desidera utilizzare l'app per un periodo di tempo per verificare come si comporta o semplicemente mostrarlo agli altri.
Spesso mi viene chiesto di Ionic 2 e se le persone dovrebbero usarlo. Al momento della stesura, all'inizio del 2016, non c'è ancora una risposta semplice. Ho lavorato con esso e ho creato alcuni prototipi, e conosco alcune persone che hanno creato app di produzione con esso, ma non è ancora pronto.
La buona notizia è che l'apprendimento di Ionic 1 oggi significa che l'apprendimento di Ionic 2 sarà abbastanza semplice. La maggior parte delle cose specifiche ioniche che imparerai in questa serie rimangono abbastanza coerenti tra le versioni. I maggiori cambiamenti si verificano a causa della costruzione di Ionic 2 su Angular 2.
Quindi, mentre oggi puoi creare app Ionic 2, non è ancora stato rilasciato ufficialmente. Non stai perdendo tempo imparando Ionic 1 ora. L'aggiornamento dovrebbe essere relativamente semplice una volta rilasciato ufficialmente Ionic 2.
In questo tutorial, abbiamo parlato molto di Ionic.
Nella parte successiva di questa serie, inizierai a creare un'app reale e funzionale utilizzando le tecniche descritte in questo tutorial.
Se sei già a tuo agio con il framework Ionic, allora potresti prendere in considerazione l'idea di inserire il concorso Most Wanted di Envato per i template ionici. Come? Crea un modello ionico unico e invialo al mercato Envato entro il 27 aprile 2016.
I cinque migliori modelli ricevono $ 1000. Interessato? Maggiori informazioni sul sito Web del concorso per dettagli sui requisiti e le linee guida del concorso.
Accentsconagua