Codifica la tua prima app Ionic 2 come impostare

Con la recente versione di Ionic 2, potresti essere uno di quegli sviluppatori di app ibridi che vogliono provarlo. Ma forse sei sopraffatto dalla quantità di apprendimento necessaria per iniziare.

Ecco perché voglio darti un buon inizio camminando passo dopo passo nella creazione della tua prima app Ionic 2. Se hai già familiarità con Ionic, i concetti potrebbero facilmente "fare clic" con te. Ma se sei un principiante assoluto, non preoccuparti, non assumerò alcuna conoscenza preliminare del quadro.

Panoramica dell'app

In questo tutorial e nel prossimo, creerai un'applicazione per la condivisione di foto che consente agli utenti di scegliere un'immagine dal proprio dispositivo e condividerla su Instagram. Ecco come apparirà l'app:

Imposta il tuo ambiente

Prima di poter iniziare a sviluppare app con Ionic 2, devi prima configurare il tuo ambiente di sviluppo. Questo include i seguenti bit di software:

• Android SDK: le app create con Cordova e Ionic si basano sugli stessi strumenti di sviluppo utilizzati dagli sviluppatori di app native.
• Node.js: utilizzato principalmente da Ionic per gli strumenti: cose come la compilazione del codice e il controllo degli errori.
• Un dispositivo o emulatore Android per i test. Puoi installare l'emulatore Android predefinito con il programma di installazione di Android SDK.

Non ho intenzione di mostrarti come configurare il tuo ambiente di sviluppo. La guida alla piattaforma Cordova fa già un ottimo lavoro:

• Guida alla piattaforma Android
• Guida alla piattaforma iOS

Queste due pagine ti mostreranno tutto ciò che devi sapere sulla configurazione di Cordova per iOS o Android. Una volta impostato l'ambiente di sviluppo, possiamo passare al passaggio successivo.

Installa Cordova e Ionico 

Accidenti! Ora puoi installare Cordova e Ionic. Usa il seguente comando:

npm install -g cordova ionic

Una volta terminata l'installazione, supponendo che non si siano verificati errori, è possibile verificare se sono stati effettivamente installati con i seguenti comandi: cordova --version e ionico --versione. Questo ti mostrerà le versioni dei framework Cordova e Ionic installati sul tuo sistema. Per me, loro ritornano 6.4.0 e 2.2.1.

Se si desidera visualizzare informazioni sulla versione più dettagliate come la versione di Ionic Framework e la versione della CLI di Ionic, utilizzare invece quanto segue:

informazioni ioniche | grep "Versione"

Ecco un esempio di output:

Versione di Ionic Framework: 2.2.0 Versione CLI di Ionic: 2.2.1 Versione di Ionic App Lib: 2.2.0 Versione di Ionic App Scripts: 1.1.4 Versione di nodo: v6.7.0

Crea un nuovo progetto ionico

La CLI ionica fornisce il inizio ionico comando per creare facilmente un nuovo progetto:

ionic start photoSharer blank --v2 --id com.tutsplus.photosharer

Ecco un modello per aiutarti a capire cosa fa ogni singola opzione:

ionic start nome dell'app template iniziale da usare --v2 --id ID dell'app quando installata

Il modello di partenza che è stato utilizzato qui è vuoto. Questo contiene solo il minimo indispensabile per ottenere qualcosa mostrato sullo schermo. Ce ne sono altri, ma possono essere un po 'schiaccianti.

Ricordare che Ionic CLI si rivolge a entrambi i progetti Ionic 1 e Ionic 2, quindi è ancora necessario specificare il --v2 opzione per avviare un progetto Ionic 2 poiché Ionic 1 è ancora l'impostazione predefinita. Ma una volta all'interno di un progetto Ionic 2, la CLI Ionic è abbastanza intelligente da sapere quale versione utilizzare.

Aggiunta della piattaforma

Per impostazione predefinita, Ionic non viene fornito con alcuna piattaforma a cui è possibile eseguire il deployment. Puoi aggiungerne uno usando il piattaforma ionica aggiungere comando seguito dalla piattaforma che si desidera distribuire a:

piattaforma ionica aggiungere Android

Se si desidera distribuire su un'altra piattaforma, basta sostituire androide con qualsiasi piattaforma tu voglia.

Installare i plugin

Per questa app, avrai bisogno di due plugin: uno per selezionare un'immagine dalla libreria dell'utente e uno per condividere l'immagine con l'app di Instagram. 

Il primo è il plug-in Image Picker. Questo dà all'app la possibilità di selezionare le immagini dalla libreria fotografica dell'utente.

plugin ionico aggiungi https://github.com/Telerik-Verified-Plugins/ImagePicker

Il prossimo è il plugin Instagram. Ciò consente di inoltrare l'immagine all'app Instagram per la pubblicazione.

plug-in ionico aggiungi plug-in cordova-instagram

Questi due plug-in che hai appena installato fanno parte di un set curato di wrapper ES6 e TypeScript per plugin Cordova chiamati Ionic Native. Il loro compito principale è rendere più facile l'interazione con i plugin Cordova inserendo i richiami dei plugin in promesse o osservabili. 

Flusso di lavoro di sviluppo

Ora sei pronto per iniziare davvero a scrivere l'app. Ma prima di arrivare a questo, diamo prima un'occhiata al flusso di lavoro di sviluppo di Ionic 2 e alla struttura delle cartelle. 

In Ionic 2, la maggior parte del lavoro di sviluppo viene svolto all'interno di src cartella. Questi file vengono ricompilati ogni volta che si apportano modifiche ai file in questa cartella. A differenza di Ionic 1, la compilazione è necessaria perché i file di origine sono scritti in TypeScript (compilato in codice ES5) e Sass (compilato nel codice CSS). Ogni volta che apporti una modifica, il codice viene anche controllato per gli errori, che vengono riportati allo sviluppatore tramite la console o l'anteprima dell'app. Una volta completata la compilazione, i file risultanti vengono copiati nel www cartella e le modifiche si riflettono nell'anteprima dell'app.

Struttura delle cartelle

Per sentirsi a proprio agio lavorando con un progetto Ionic 2, è necessario familiarizzare con la struttura delle cartelle. Per i principianti, devi sapere per cosa è utilizzata ciascuna cartella in modo da sapere dove mettere i tuoi file sorgente e dove cercare i file che ti servono. 

• node_modules:è qui che sono archiviate le dipendenze di Ionic 2. Il più delle volte non è necessario toccare questa cartella a meno che non ci sia un problema con una delle dipendenze e devi reinstallarla.
• piattaforme: è qui che viene posizionato il codice specifico della piattaforma e dove viene installato l'installer dell'app quando si crea l'app per l'esecuzione su un dispositivo o emulatore. Ciò significa che tutti i file nel tuo www e plugins le cartelle vengono copiate qui ogni volta che crei la tua app. 
• plugins: è qui che vengono archiviati i plug-in, ovviamente, sia i plug-in Ionic predefiniti che qualsiasi altro plug-in che installi.
• risorse: è qui che inserirai le risorse dell'app, come l'icona e la schermata iniziale.
• src: è qui che codifichi la maggior parte del tempo. Tutti i modelli, i fogli di stile e i file TypeScript che compongono la tua app sono archiviati qui.
• www: è qui che vanno i file compilati. I file qui sono serviti nell'anteprima dell'app.
• ganci: è qui che sono memorizzati gli script di hook di sviluppo Cordova. Questi vengono utilizzati se si dispone di script personalizzati che si desidera eseguire durante una parte del ciclo di vita dello sviluppo (ad esempio quando viene aggiunta una piattaforma o un plug-in).

Esecuzione del server di sviluppo

Durante lo sviluppo di un'app, è utile vedere un'anteprima live dell'app che viene aggiornata mentre si apportano modifiche al codice. Per avviare il server di sviluppo, utilizzare il seguente comando:

servire ionico

Ciò avvierà il processo di osservazione delle modifiche nei file di origine e inizierà a compilarli in tempo reale. Per impostazione predefinita, Ionic fornirà l'anteprima a http: // localhost: 8100 /. Vedrai qualcosa di simile al seguente e poi potrai andare avanti e visualizzare l'anteprima della tua app nel browser all'URL riportato.

Prossimi passi

Ora che il nostro ambiente di sviluppo è impostato, siamo pronti per passare alla codifica dell'applicazione! Resta sintonizzato domani per il prossimo post, in cui ti mostrerò come codificare effettivamente l'app, creando l'interfaccia utente e tutte le funzionalità di condivisione delle foto. Sarà divertente!

Nel frattempo, dai un'occhiata ad alcuni dei nostri tutorial su Ionic 2!

Se vuoi un'introduzione approfondita e pratica al framework Ionic 2, prova il nostro corso Getting Started With Ionic 2.

In questo corso, Reggie Dawson ti insegnerà tutto sul framework Ionic e ti mostrerà come costruire un'applicazione mobile da zero. Lungo la strada, imparerai a conoscere la libreria di componenti ionici, a programmare JavaScript con tipizzazione statica con TypeScript e a integrare un'app di Ionic 2 con un'API rich media.