Come sviluppare applicazioni mobili con Ionic Framework?

Puoi sviluppare applicazioni ioniche su qualsiasi sistema operativo che preferisci. Ionic è stato sviluppato più volte su Mac OS X, Linux e Windows . Come sviluppare applicazioni mobili con Ionic Framework?

Innanzitutto, dobbiamo iniziare con una nota sui requisiti minimi per creare l’applicazione con l’attuale versione di Ionic. Puntare su dispositivi iPhone e Android (attualmente). Supporta fino a iOS 7+ e Android 4.1+.

Tuttavia, in questo momento dovrai utilizzare la riga di comando per seguire questa guida e devi avere OS X per sviluppare e distribuire applicazioni iPhone, quindi OS X è raccomandato se possibile.

Eseguirai i comandi in questa guida nelle finestre Git Bash o Console2 . Innanzitutto, installeremo l’ultima versione di Apache Cordova .

Ciò richiederà la nostra applicazione e la raggrupperà in un contenitore nativo per renderla un’applicazione nativa tradizionale.

Come sviluppare applicazioni mobili con Ionic Framework? 1

Come sviluppare applicazioni mobili con Ionic Framework?

Per installare Cordova, assicurati di aver installato Node.js

$ sudo npm installa -g cordova

Installa Ionic

Ionic viene fornito con una comoda utility da riga di comando per avviare, creare e impacchettare applicazioni Ionic. Per installarlo, esegui semplicemente:

$ sudo npm installa -g ionico

Crea il progetto

Ora, dobbiamo creare un nuovo progetto Cordova da qualche parte sul computer per il codice della nostra applicazione:

$ ionic avvia tutto vuoto - tipo ionico2

Ciò creerà una cartella chiamata tutto nella directory in cui è stato eseguito il comando. Successivamente, entreremo in quella directory ed elencheremo i contenuti.

Ecco come sarà la struttura esterna del tuo progetto ionico:

$ cd all && ls

├── bower.json // dipendenze del bower
├── config.xml // configurazione cordova
├── gulpfile.js // gulp task
├── hook // hook cordova personalizzati da eseguire su comandi specifici
├── ionic.project // configurazione ionica
├── package.json // dipendenze del nodo
├── Le piattaforme // Le build specifiche per iOS / Android risiederanno qui
├── plugins // dove verranno installati i plug-in cordova / ionici
├── scss // codice scss, che verrà trasmesso su www / css /
└── www // application - codice JS e librerie, CSS, immagini, ecc.

Come sviluppare applicazioni mobili con Ionic Framework? 2

Configura piattaforme

Ora, dobbiamo dire a ionic che vogliamo abilitare le piattaforme iOS e Android:

La piattaforma $ ionic cordova aggiunge iOS
La piattaforma $ ionic cordova aggiunge Android

Provalo

Solo per assicurarsi che il progetto predefinito abbia funzionato, prova a compilare ed eseguire il progetto ( sostituisci invece iOS con Android per compilare con Android ):

$ ionic cordova build ios
$ ionic cordova emulate ios

Avvio dell’applicazione

Ora che abbiamo tutto installato e creato un nuovo progetto Cordova , iniziamo a creare una vera applicazione.

Poiché ogni applicazione ionica è fondamentalmente una pagina Web, è necessario disporre di un file index.html nella nostra applicazione che definisca la prima pagina caricata nell’applicazione.

Creiamo www / index.html e inizializziamo con questo:

<! DOCTYPE html>
<Html>
<Head>
<meta charset = "utf-8">
<title> Tutto </title>
<meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1, user scalable = no, width = device-width">

<link href = "lib / ionic / css / ionic.css" rel = "stylesheet">

<script src = "lib / ionic / js / ionic.bundle.js"> </script>

<! - Necessario per Cordova / PhoneGap (sarà un 404 durante lo sviluppo) ->
<script src = "cordova.js"> </script>
</ Head>
<Body>
</ Body>
</ Html>

Come sviluppare applicazioni mobili con Ionic Framework? 3
Nella shell precedente, abbiamo incluso Ionic CSS e sia Ionic JS core che Ionic AngularJS nel file ionic.bundle.js.

Ionic viene fornito con ngAnimate e ngSanitize inclusi, ma per utilizzare altri moduli angolari è necessario includerli dalla directory lib / js / angular.

Per creare menu laterali in Ionico, possiamo usare i menu lato ionico. Sentiti libero di leggerlo, ma la marcatura necessaria è semplice. Modifica il file index.html e cambia il contenuto di <body> in questo modo:

<Body>
<Ion-side-menù>
<Ion-side-menu-content>
</ Ion-side-menu-content>
<ion-side-menu side = "left">
</ Ion-side-menù>
</ Ion-side-menù>
</ Body>

Nel codice precedente, abbiamo aggiunto il nostro controller <ion-side-menus> che controllerà il trascinamento e l’esposizione del menu laterale.

All’interno del controller abbiamo un <ion-side-menu-content> che è l’area del contenuto centrale dell’applicazione, e un <side-side-side side = “left”> che è un menu del lato sinistro, inizialmente nascosto.

Inizializzazione dell’applicazione

Innanzitutto, dobbiamo creare un nuovo modulo AngularJS e dire ad Angular di inizializzarlo. Creiamo un nuovo file che si trova in www / js / app.js . Inserisci questo codice nel file:

angular.module ('todo', ['ionic'])

Questo è il modo angolare di creare un’applicazione e stiamo dicendo ad Angular di includere il modulo ionico che include tutto il codice ionico che elaborerà le etichette precedenti e renderà viva la nostra applicazione.

Ora, torna a index.html e poco prima della riga <script src = “cordova.js”> </script> , aggiungi:

<script src = "js / app.js"> </script>

Questo include lo script che abbiamo appena creato.

E per far funzionare la nostra nuova applicazione, dobbiamo aggiungere l’attributo ng-app al tag body:

<body ng-app = "everything">

Test della tua applicazione

Esistono quattro modi per testare l’applicazione durante lo sviluppo: in un browser WebKit desktop, nel simulatore iOS o Android , in un browser mobile sul telefono o come applicazione nativa sul telefono.

 

Potrebbe interessarti

Lascia un commento