Accentsconagua
Share
In questo articolo, daremo un'occhiata a Ionic 2, la versione più recente del framework di app per dispositivi mobili multipiattaforma Ionic. Per cominciare, ricapitoleremo su cosa sia Ionic e a cosa serve. Poi ci tufferemo in Ionic 2. Ti dirò cosa c'è di nuovo e in cosa differisce da Ionic 1, e ti aiuterò a decidere se dovresti usarlo sul tuo prossimo progetto o no.
Ionic è un framework per la creazione di app ibride utilizzando HTML, CSS e JavaScript. Viene fornito con una serie di componenti dell'interfaccia utente e funzioni che è possibile utilizzare per creare app mobili completamente funzionali e attraenti.
Ionic è costruito sullo stack Cordova. Non è possibile creare app mobili con Ionic da solo perché gestisce solo la parte dell'interfaccia utente. Ha bisogno di lavorare con Angular, che gestisce la logica dell'applicazione, e Cordova, il framework di app multipiattaforma che consente di compilare la tua app in un file installabile ed eseguirla all'interno della visualizzazione web del dispositivo mobile.
Le app create con Cordova e Ionic possono essere eseguite su dispositivi Android e iOS. È inoltre possibile installare plug-in Cordova per fornire funzionalità native come l'accesso alla telecamera e il funzionamento con dispositivi Bluetooth Low Energy.
Per ulteriori informazioni su Cordova, consulta alcuni dei nostri corsi e tutorial qui su Envato Tuts+.
Ionic è più di un semplice framework UI, però. La compagnia Ionic offre anche servizi che supportano Ionic UI Framework, tra cui Ionic Creator, Ionic View e Ionic Cloud.
In questa sezione, daremo un'occhiata ad alcune delle modifiche significative apportate a Ionic nella versione 2 e anche alle nuove funzionalità e strumenti introdotti in Ionic 2.
Ionic 1 è stato progettato pensando esclusivamente alle app mobili ibride. Ma Ionic 2 è stato progettato per supportare anche applicazioni web progressive e app Electron. Ciò significa che ora puoi creare non solo app Ionic che girano all'interno dell'ambiente Cordova ma anche applicazioni web progressive, che utilizzano le moderne funzionalità web per offrire agli utenti un'esperienza simile a un'app.
Puoi anche scegliere come target Electron, una piattaforma per la creazione di app desktop multipiattaforma utilizzando HTML, CSS e JavaScript. Electron è molto simile a Cordova, ma per sistemi operativi desktop come Windows, Ubuntu o macOS.
Ionic 2 ora utilizza Angular 2 per la logica di modelli e applicazioni. Ciò significa che gli sviluppatori dovranno imparare la nuova sintassi Angular 2 prima che possano diventare produttivi nella creazione di app Ionic 2. Non preoccuparti, però, perché i concetti sono ancora gli stessi di Angular 1. Ci sono anche risorse come ngMigrate che ti aiuteranno a convertire le tue abilità Angular 1 in Angular 2.
Oltre a Angular 2, Ionic 2 utilizza anche TypeScript. Per chi non lo conosce, TypeScript è un superset di JavaScript. Ciò significa che puoi ancora usare la sintassi di vanilla JavaScript per scrivere le tue app. Se si desidera utilizzare le funzionalità fornite con TypeScript, come la sintassi ES6 ed ES7, la tipizzazione statica e il completamento del codice intelligente, è possibile utilizzare la sintassi specifica di TypeScript. Ci sono plugin che puoi installare sul tuo editor di testo o IDE preferito per sfruttare i vantaggi delle funzionalità avanzate di completamento del codice di TypeScript.
Come ho già detto, la sintassi dei template in Ionic 2 è cambiata in modo significativo, in gran parte a causa del suo passaggio all'utilizzo di Angular 2. Si può anche arrivare a scoprire che la nuova sintassi è più semplice e concisa. Ecco alcuni esempi di sintassi Ionic 1 e Ionic 2 affiancate:
Ascoltando gli eventi:
Utilizzando un modello:
Looping attraverso una matrice e visualizzazione di ogni elemento:
Se confronti la struttura delle cartelle di un progetto Ionic 1 e un progetto Ionic 2, noterai che la maggior parte delle cartelle che sei abituato a vedere in un progetto Ionic 1 sono ancora presenti in Ionic 2. Questo perché il sottostante la piattaforma non è davvero cambiata: Ionic 2 utilizza ancora Cordova. Le uniche cose che sono cambiate sono le parti che hanno a che fare con i tuoi file sorgente. Ecco uno screenshot della struttura delle cartelle di un'app Ionic 1:
Ed ecco un'app realizzata con Ionic 2:
Se guardi più da vicino, noterai che ora c'è un src cartella. Ecco dove sono tutti i file sorgente del tuo progetto e ogni volta che apporti modifiche a un file in quella directory, il file modificato viene compilato e copiato sul www / build directory. In precedenza, i file di origine erano tutti nel wwwdirectory, e non hai richiesto un passo di compilazione extra.
La struttura delle directory è anche più organizzata. Se controlli il src / pagine directory, puoi vedere che ogni pagina ha una sua cartella, e all'interno di ognuna ci sono i file HTML, CSS e JavaScript per quella specifica pagina.
In precedenza, in Ionic 1, ti veniva assegnata una directory vuota e avevi la libertà di strutturare il tuo progetto come volevi. Ma questo è venuto con il lato negativo di non costringervi a fare le cose nel modo migliore. Potresti diventare pigro e attaccare a una struttura che raggruppava tutti i file, il che potrebbe rendere le cose difficili per i team più grandi che lavorano su app complesse.
A differenza della precedente versione di Ionic, che aveva solo un aspetto e una sensazione per tutte le piattaforme, Ionic 2 ora supporta tre modalità: Material Design, iOS e Windows. Ora Ionic corrisponde all'aspetto della piattaforma su cui è distribuito. Quindi, se la tua app è installata su Android, ad esempio, utilizzerà uno stile e un comportamento simile a quello delle app Android native.
C'è un supporto per la tematizzazione in ionico, sebbene al momento della stesura di questo articolo, venga fornito solo con il tema Light predefinito. Se si desidera modificare il tema, è possibile modificare il src / tema / variables.scss file.
Ionic 2 include anche nuovi strumenti che renderanno la gioia di creare app mobili. Ti mostrerò alcuni in questa sezione.
Ionic 2 ora fornisce un generatore che ti consente di creare pagine e servizi per la tua app:
pagina di contatto ionica pagina
Questo creerà i seguenti file nel tuo app / pagine cartella:
contact-page / contact-page.html contact-page / contact-page.ts contatto-pagina / contatto-pagina.scss
In ogni file è presente anche un codice di codice:
ContactPage
Questo serve anche come guida per i nuovi sviluppatori in modo che conoscano le migliori pratiche per strutturare il loro codice. Ecco il codice TypeScript generato che gestisce la logica per la pagina sopra:
//contact-page.js import Component da '@ angular / core'; import NavController, NavParams da 'ionico-angolare'; / * Classe generata per la pagina ContactPage. Vedi http://ionicframework.com/docs/v2/components/#navigation per maggiori informazioni sulle pagine ioniche e sulla navigazione. * / @Component (selector: 'page-contact-page', templateUrl: 'contact-page.html') classe di esportazione ContactPagePage costruttore (public navCtrl: NavController, public navParams: NavParams) ionViewDidLoad () console .log ('ionViewDidLoad ContactPagePage'); Ionic 2 ora viene fornito con uno strumento di segnalazione degli errori per il front-end. Ciò significa che ogni volta che si verifica un errore nel codice, Ionic aprirà una finestra modale direttamente nell'anteprima dell'app stessa. Questo rende molto facile agli sviluppatori scoprire gli errori mentre accadono all'interno dell'app.
Gli script app ionici sono una raccolta di script di build per i progetti ionici. In precedenza, Ionic utilizzava Gulp per gestire il suo processo di compilazione.
Ionic 2 viene fornito con alcuni di questi script per semplificare il completamento delle attività di sviluppo comuni. Ciò include cose come la trascrizione del codice TypeScript in ES5, l'utilizzo dell'app per il test nel browser o l'esecuzione su un dispositivo specifico.
Puoi trovare gli script predefiniti nel progetto package.json file:
"scripts": "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic: build": "ionic-app-scripts build", "ionic: serve ":" ionic-app-scripts serve ",
I componenti sono gli elementi costitutivi dell'interfaccia utente in Ionic. Gli esempi includono pulsanti, schede, elenchi e campi di input. Un sacco di nuovi componenti sono stati aggiunti a Ionic 2, e in questa sezione daremo un'occhiata ad alcuni di questi.
Se vuoi che la tua app abbia una panoramica per i nuovi utenti, il componente Diapositive rende facile crearne uno. Questo componente ti consente di creare layout basati su pagine che l'utente può scorrere per leggere tutto sulla tua app.
I fogli di azione sono menu che scorrono verso l'alto dalla parte inferiore dello schermo. Un foglio di azione è mostrato sul livello superiore dello schermo, quindi devi chiuderlo toccando su uno spazio o per selezionare un'opzione dal menu. Questo è comunemente usato per le conferme come quando si elimina un file sul proprio dispositivo iOS.
I segmenti sono come schede. Vengono utilizzati per raggruppare i contenuti correlati in modo tale che l'utente possa vedere solo i contenuti del segmento attualmente selezionato. I segmenti sono comunemente usati con gli elenchi per filtrare gli oggetti correlati.
I toast sono la versione sottile degli avvisi. Sono comunemente usati per informare l'utente che è successo qualcosa che non richiede alcuna azione da parte dell'utente. Sono spesso mostrati nella parte superiore o inferiore della pagina in modo da non interferire con il contenuto attualmente mostrato. Inoltre scompaiono dopo un numero specificato di secondi.
Una barra degli strumenti viene utilizzata come contenitore per informazioni e azioni che si trovano nell'intestazione o nel piè di pagina dell'app. Ad esempio, il titolo della schermata corrente, i pulsanti, i campi di ricerca e i segmenti sono spesso contenuti in una barra degli strumenti.
Il componente DateTime viene utilizzato per visualizzare un'interfaccia utente per il prelievo di date e orari. L'interfaccia utente è simile a quella generata quando si utilizza il datetime-locali elemento, l'unica differenza è che questo componente viene fornito con un'API JavaScript facile da usare. In precedenza, Ionic non aveva un componente per lavorare con date e orari. O dovevi utilizzare il selettore di date nativo del browser o installare un plug-in.
I Floating Action Buttons (FAB) sono pulsanti che vengono fissati in un'area specifica dello schermo. Se hai mai utilizzato l'app Gmail, il pulsante per comporre un nuovo messaggio è un pulsante di azione mobile. Non si limitano a una singola azione perché possono espandersi per mostrare altri pulsanti mobili quando toccati.
Per maggiori informazioni sui nuovi componenti, consultare la documentazione sui componenti.
Ionic 2 è anche ricco di nuove funzionalità e miglioramenti. Questi sono principalmente dovuti alla sua transizione a Angular 2 e TypeScript.
Uno dei vantaggi del passaggio ad Angular 2 è il nuovo sistema di animazione di Angular, costruito sopra l'API di Web Animations. Tieni presente che l'API delle animazioni web non è supportata in tutti i browser: è per questo che devi utilizzare Crosswalk per installare un browser supportato insieme alla tua app. L'unico lato negativo di questo è che renderà le dimensioni dell'installazione più grandi. Un'altra opzione è usare un polyfill.
Le app create con Ionic 2 sono più nitide di quelle create con Ionic 1. Ecco perché:
ionico-img componente. Usando questo componente al posto dello standard img elemento consente di delegare le richieste HTTP per il recupero delle immagini a un Web Worker. Questo rende più rapido il caricamento delle immagini, soprattutto all'interno di elenchi di grandi dimensioni. Il ionico-img il componente gestisce anche il caricamento lento, che richiederà e renderà l'immagine solo quando sarà visibile nella finestra dell'utente.Ionic Native è l'equivalente di ngCordova per Ionic 2. Entrambi fungono da wrapper per i plug-in Cordova per implementare funzionalità native (ad esempio Camera, GeoLocation). Puoi anche utilizzare Ionic Native nella tua app Ionic 1, se lo desideri. La principale differenza è che Ionic Native ti permette di scrivere il tuo codice usando le funzionalità ES6 e la sintassi TypeScript. Questo rende più facile lavorare con Ionic 2 poiché utilizza già TypeScript per impostazione predefinita. Ecco un esempio di come implementare il plug-in Cordova Camera in ngCordova:
$ cordovaCamera.getPicture (quality: 50). then (function (imageData) var image = "data: image / jpeg; base64," + imageData;, function (err) );
Ed ecco come è fatto usando Ionic Native:
importare Camera da 'ionic-native'; Camera.getPicture (options) .then ((imageData) => let base64Image = 'data: image / jpeg; base64,' + imageData;, (err) => );
La documentazione è migliorata molto. Mi piace soprattutto il fatto che ora ci siano diverse anteprime per ogni componente su ciascuna piattaforma. Ciò offre agli sviluppatori una buona idea di come apparirà la loro app. Tutto questo senza lo sviluppatore che scrive una singola riga di codice!
Al momento della stesura di questo articolo, Ionic 2 è stato rilasciato. Ciò significa che è pronto per essere utilizzato per le app di produzione. Considerando tutte le nuove funzionalità, strumenti e vantaggi offerti da Angular 2 e TypeScript, l'unica cosa che ti impedirà di utilizzare Ionic 2 è lo stato del tuo progetto.
Se stai appena iniziando un nuovo progetto, puoi comunque utilizzare Ionic 1 se tu e i tuoi compagni avete familiarità con Angular 1 e il vostro progetto deve essere completato il prima possibile. Ma se hai avuto tutto il tempo per il progetto, dovresti considerare l'utilizzo di Ionic 2. Ci sarà un po 'di una curva di apprendimento, e incontrerai anche alcuni problemi perché non è testato in battaglia come Ionic 1, ma è tutto merita lo sforzo grazie alle nuove funzionalità e miglioramenti di Ionic 2.
Se hai già iniziato il tuo attuale progetto con Ionic 1, probabilmente vorrai restare con Ionic 1 ed evitare una riscrittura maggiore. Non preoccuparti troppo di supporto, miglioramenti e correzioni di errori per gli sviluppatori Ionic 1-Ionic si sono impegnati a supportare Ionic 1 per molto tempo. Quanto a lungo non è chiaro. Per lo meno, sarà supportato per un paio d'anni dopo che la versione stabile di Ionic 2 sarà disponibile. Ma dobbiamo anche tenere presente che Ionic è un progetto open source con oltre 200 contributori. Quindi, finché le persone continueranno ad usarlo, possiamo sempre aspettarci qualche forma di supporto da parte della comunità.
Questo è tutto! In questo articolo hai imparato tutto su Ionic 2. In particolare, hai imparato a conoscere le differenze significative tra Ionic 2 e il suo predecessore. Abbiamo anche dato un'occhiata alle nuove funzionalità aggiunte a Ionic 2 e se dovresti usarlo per i tuoi progetti futuri o meno. In un futuro tutorial, metteremo queste conoscenze in pratica creando un'applicazione Ionic 2. Rimanete sintonizzati!
Se vuoi saperne di più su Ionic 2, assicurati di controllare le seguenti risorse:
E, naturalmente, abbiamo un corso Ionic 2 approfondito che puoi seguire, proprio qui su Envato Tuts+!
