Ionic - Configurazione dell'ambiente

Questo capitolo ti mostrerà come iniziare con Ionic Framework. La tabella seguente contiene l'elenco dei componenti necessari per iniziare con Ionic.

Sr.No. Software e descrizione
1

NodeJS

Questa è la piattaforma di base necessaria per creare app mobili utilizzando Ionic. Puoi trovare dettagli sull'installazione di NodeJS nella nostra Configurazione dell'ambiente NodeJS . Assicurati di installare anche npm durante l'installazione di NodeJS.
2

Android SDK

Se hai intenzione di lavorare su una piattaforma Windows e stai sviluppando le tue app per la piattaforma Android, dovresti avere la configurazione di Android SDK sul tuo computer. Il collegamento seguente contiene informazioni dettagliate sulla configurazione dell'ambiente Android .
3

XCode

Se hai intenzione di lavorare sulla piattaforma Mac e stai sviluppando le tue app per la piattaforma iOS, dovresti avere la configurazione XCode sulla tua macchina. Il collegamento seguente contiene informazioni dettagliate sulla configurazione dell'ambiente iOS .
4

cordova and Ionic

Questi sono i principali SDK necessari per iniziare a lavorare con Ionic. Questo capitolo spiega come configurare Ionic in un semplice passaggio, supponendo che tu abbia già la configurazione richiesta come spiegato nella tabella sopra.

Installazione di Cordova e Ionic

Useremo il prompt dei comandi di Windows per questo tutorial. Gli stessi passaggi possono essere applicati al terminale OSX. Apri la finestra di comando per installare Cordova e Ionic -

C:\Users\Username> npm install -g cordova ionic

Creazione di app

Durante la creazione di app in Ionic, puoi scegliere tra le seguenti tre opzioni per iniziare:

  • App per schede
  • App vuota
  • App menu laterale

Nella finestra dei comandi, apri la cartella in cui desideri creare l'app e prova una delle opzioni indicate di seguito.

App per schede

Se desideri utilizzare il modello di schede Ionic, l'app verrà costruita con il menu delle schede, l'intestazione e un paio di schermate e funzionalità utili. Questo è il modello Ionic predefinito. Apri la finestra dei comandi e scegli dove desideri creare la tua app.

C:\Users\Username> cd Desktop

Questo comando cambierà la directory di lavoro. L'app verrà creata sul desktop.

C:\Users\Username\Desktop> ionic start myApp tabs

Ionico Start Il comando creerà una cartella denominata myApp e imposta file e cartelle Ionic.

C:\Users\Username\Desktop> cd myApp

Ora vogliamo accedere al file myAppcartella che abbiamo appena creato. Questa è la nostra cartella principale.

Aggiungiamo ora il progetto Cordova per la piattaforma Android e installiamo anche i plug-in Cordova di base. Il codice seguente ci consente di eseguire l'app sull'emulatore Android o su un dispositivo.

C:\Users\Username\Desktop\myApp> ionic platform add android

Il prossimo passo è creare l'app. Se si verificano errori di creazione dopo aver eseguito il comando seguente, probabilmente non hai installato Android SDK e le sue dipendenze.

C:\Users\Username\Desktop\myApp> ionic build android

L'ultimo passaggio del processo di installazione consiste nell'eseguire la tua app, che avvierà il dispositivo mobile, se connesso, o l'emulatore predefinito, se non c'è alcun dispositivo connesso. L'emulatore predefinito di Android è lento, quindi ti suggerisco di installare Genmony o qualche altro emulatore Android popolare.

C:\Users\Username\Desktop\myApp> ionic run android

Questo produrrà il risultato seguente, che è un'app Ionic Tabs.

App vuota

Se vuoi iniziare da zero, puoi installare il modello vuoto Ionic. Useremo gli stessi passaggi che sono stati spiegati sopra con l'aggiunta diionic start myApp blank invece di ionic start myApp tabs come segue.

C:\Users\Username\Desktop> ionic start myApp blank

Lo ionico Start Il comando creerà una cartella denominata myApp e imposta i file e le cartelle di Ionic.

C:\Users\Username\Desktop> cd myApp

Aggiungiamo il progetto Cordova per la piattaforma Android e installiamo i plug-in Cordova di base come spiegato sopra.

C:\Users\Username\Desktop\myApp>ionic platform add android

Il prossimo passo è creare la nostra app -

C:\Users\Username\Desktop\myApp> ionic build android

Infine, avvieremo l'App come con il seguente codice:

C:\Users\Username\Desktop\myApp> ionic run android

Questo produrrà il seguente risultato, che è un'app Ionic Blank.

App menu laterale

Il terzo modello che puoi utilizzare è il modello del menu laterale. I passaggi sono gli stessi dei due modelli precedenti; ci limiteremo ad aggiungeresidemenu all'avvio della nostra app come mostrato nel codice sottostante.

C:\Users\Username\Desktop> ionic start myApp sidemenu

Lo ionico Start Il comando creerà una cartella denominata myApp e imposta i file e le cartelle di Ionic.

C:\Users\Username\Desktop> cd myApp

Aggiungiamo il progetto Cordova per la piattaforma Android e installiamo i plug-in Cordova di base con il codice indicato di seguito.

C:\Users\Username\Desktop\myApp> ionic platform add android

Il passaggio successivo consiste nel creare la nostra app con il codice seguente.

C:\Users\Username\Desktop\myApp> ionic build android

Infine, avvieremo l'App con il codice riportato di seguito.

C:\Users\Username\Desktop\myApp> ionic run android

Questo produrrà il seguente risultato, che è un'app Ionic Side Menu.

Prova l'app nel browser

Poiché stiamo lavorando con JavaScript, puoi pubblicare la tua app su qualsiasi browser web. Ciò accelererà il tuo processo di creazione, ma dovresti sempre testare la tua app su emulatori e dispositivi nativi. Digita il codice seguente per pubblicare la tua app nel browser web.

C:\Users\Username\Desktop\myApp> ionic serve

Il comando precedente aprirà la tua app nel browser web. Google Chrome fornisce la funzionalità della modalità dispositivo per i test di sviluppo mobile. stampaF12 per accedere alla console per sviluppatori.

Nell'angolo superiore sinistro del clic della finestra della console è presente l'icona "Attiva / disattiva modalità dispositivo". Il prossimo passo sarà fare clic sull'icona "Dock to Right" nell'angolo in alto a destra. Una volta aggiornata la pagina, dovresti essere pronto per il test sul browser web.

Struttura delle cartelle del progetto

Ionic crea la seguente struttura di directory per tutti i tipi di app. Questo è importante per qualsiasi sviluppatore Ionic per comprendere lo scopo di ogni directory e dei file menzionati di seguito -

Cerchiamo di avere una rapida comprensione di tutte le cartelle e i file disponibili nella struttura delle cartelle del progetto mostrata nell'immagine sopra.

  • Hooks- Gli hook sono script che possono essere attivati ​​durante il processo di compilazione. Di solito vengono utilizzati per la personalizzazione dei comandi Cordova e per la creazione di processi automatizzati. Non useremo questa cartella durante questo tutorial.

  • Platforms- Questa è la cartella in cui vengono creati i progetti Android e IOS. Potresti incontrare alcuni problemi specifici della piattaforma durante lo sviluppo che richiederanno questi file, ma dovresti lasciarli intatti per la maggior parte del tempo.

  • Plugins- Questa cartella contiene i plugin Cordova. Quando crei inizialmente un'app Ionic, verranno installati alcuni plugin. Ti mostreremo come installare i plugin Cordova nei nostri capitoli successivi.

  • Resources - Questa cartella viene utilizzata per aggiungere risorse come icona e schermata iniziale al progetto.

  • Scss- Poiché il core Ionic è costruito con Sass, questa è la cartella in cui si trova il tuo file Sass. Per semplificare il processo, non useremo Sass per questo tutorial. Il nostro stile verrà eseguito utilizzando i CSS.

  • www- www è la cartella di lavoro principale per gli sviluppatori Ionic. Trascorrono la maggior parte del loro tempo qui. Ionic ci fornisce la loro struttura di cartelle predefinita all'interno di "www", ma gli sviluppatori possono sempre cambiarla per soddisfare le proprie esigenze. Quando questa cartella è aperta, troverai le seguenti sottocartelle:

    • Il css cartella, dove scriverai il tuo stile CSS.

    • Il img cartella per la memorizzazione delle immagini.

    • Il jscartella che contiene il file di configurazione principale delle app (app.js) e i componenti AngularJS (controller, servizi, direttive). Tutto il tuo codice JavaScript sarà all'interno di queste cartelle.

    • Il libs cartella, dove verranno posizionate le tue librerie.

    • Il templates cartella per i file HTML.

    • Index.html come punto di partenza per la tua app.

  • Other Files - Poiché questo è un tutorial per principianti, menzioneremo solo alcuni degli altri file importanti e anche i loro scopi.

    • .bowerrc è il file di configurazione della pergola.

    • .editorconfig è il file di configurazione dell'editor.

    • .gitignore viene utilizzato per indicare quale parte dell'app deve essere ignorata quando si desidera inviare la propria app al repository Git.

    • bower.json conterrà i componenti e le dipendenze di bower, se scegli di utilizzare il gestore di pacchetti bower.

    • gulpfile.js viene utilizzato per creare attività automatizzate utilizzando il task manager gulp.

    • config.xml è il file di configurazione di Cordova.

    • package.json contiene le informazioni sulle app, le loro dipendenze e i plug-in installati utilizzando il gestore di pacchetti NPM.

Nel prossimo capitolo, discuteremo i diversi colori disponibili nel framework Ionic open source.