eBook - ePub
Ionic 5
Guida completa per creare app per Android e iOS
Serena Sensini
This is a test
Partager le livre
- 256 pages
- Italian
- ePUB (adapté aux mobiles)
- Disponible sur iOS et Android
eBook - ePub
Ionic 5
Guida completa per creare app per Android e iOS
Serena Sensini
DĂ©tails du livre
Aperçu du livre
Table des matiĂšres
Citations
Ă propos de ce livre
In questo manuale lo sviluppatore si mette alla prova con il mondo delle app mobile, attraverso un framework molto versatile, che consente di creare delle applicazioni partendo da zero: dai concetti di base all'utilizzo dei diversi elementi per costruire un'app robusta, accattivante e cross-platform. Ionic Ăš uno strumento estremamente utile per chi ha giĂ sviluppato applicazioni web, ma anche per chi ha poche basi e vuole cimentarsi nello sviluppo di un'app senza dover gestire due diverse piattaforme
Foire aux questions
Comment puis-je résilier mon abonnement ?
Il vous suffit de vous rendre dans la section compte dans paramĂštres et de cliquer sur « RĂ©silier lâabonnement ». Câest aussi simple que cela ! Une fois que vous aurez rĂ©siliĂ© votre abonnement, il restera actif pour le reste de la pĂ©riode pour laquelle vous avez payĂ©. DĂ©couvrez-en plus ici.
Puis-je / comment puis-je télécharger des livres ?
Pour le moment, tous nos livres en format ePub adaptĂ©s aux mobiles peuvent ĂȘtre tĂ©lĂ©chargĂ©s via lâapplication. La plupart de nos PDF sont Ă©galement disponibles en tĂ©lĂ©chargement et les autres seront tĂ©lĂ©chargeables trĂšs prochainement. DĂ©couvrez-en plus ici.
Quelle est la différence entre les formules tarifaires ?
Les deux abonnements vous donnent un accĂšs complet Ă la bibliothĂšque et Ă toutes les fonctionnalitĂ©s de Perlego. Les seules diffĂ©rences sont les tarifs ainsi que la pĂ©riode dâabonnement : avec lâabonnement annuel, vous Ă©conomiserez environ 30 % par rapport Ă 12 mois dâabonnement mensuel.
Quâest-ce que Perlego ?
Nous sommes un service dâabonnement Ă des ouvrages universitaires en ligne, oĂč vous pouvez accĂ©der Ă toute une bibliothĂšque pour un prix infĂ©rieur Ă celui dâun seul livre par mois. Avec plus dâun million de livres sur plus de 1 000 sujets, nous avons ce quâil vous faut ! DĂ©couvrez-en plus ici.
Prenez-vous en charge la synthÚse vocale ?
Recherchez le symbole Ăcouter sur votre prochain livre pour voir si vous pouvez lâĂ©couter. Lâoutil Ăcouter lit le texte Ă haute voix pour vous, en surlignant le passage qui est en cours de lecture. Vous pouvez le mettre sur pause, lâaccĂ©lĂ©rer ou le ralentir. DĂ©couvrez-en plus ici.
Est-ce que Ionic 5 est un PDF/ePUB en ligne ?
Oui, vous pouvez accĂ©der Ă Ionic 5 par Serena Sensini en format PDF et/ou ePUB ainsi quâĂ dâautres livres populaires dans Informatique et Virtualisation. Nous disposons de plus dâun million dâouvrages Ă dĂ©couvrir dans notre catalogue.
Informations
Sujet
InformatiqueSous-sujet
Virtualisation1
Primi passi
Queste prime righe vi aiuteranno a delineare i contorni di questo volume, che vi guiderĂ passo dopo passo verso lo sviluppo di unâapp completa, con diverse funzionalitĂ e frammenti di codice spiegati progressivamente nei capitoli del libro. Vedremo infatti come Ionic risulti essere un framework che si presta perfettamente alla creazione di app semplici e veloci, soprattutto per chi ha giĂ dimestichezza con lo sviluppo web o con framework che derivano da TypeScript.
Come in ogni buon libro, Ăš giusto ripercorrere quelli che sono i passi fondamentali di questo framework: chi lâha progettato, comâĂš nato e come possiamo sfruttarlo al meglio.
Un poâ di storia
Se ne avete giĂ sentito parlare, probabilmente queste righe vi suoneranno familiari; se invece Ăš la prima volta che vi approcciate a Ionic, tutto ciĂČ che andremo a vedere di seguito vi sarĂ di grande aiuto.
Ionic Ăš un SDK open source che nasce dal lavoro di Max Lynch, Ben Sperry e Adam Bradley appena 6 anni fa. La prima versione di questo framework si basava su AngularJS e Cordova, libreria per applicazioni web sviluppata da una delle piĂč grandi industrie del settore, ideata soprattutto per lo sviluppo di applicazioni cosiddette single-page. Le ultime versioni di Ionic, quindi inclusa la 5.0.0, permettono la scelta tra diversi framework di front-end, come Vue.js, React e/o Angular.
PerchĂ© Ionic Ăš cosĂŹ diffuso? In particolar modo nellâultima versione, Ăš stato interamente ristrutturato, facendo in modo che ogni componente sia trattato come un web component, ovvero un insieme di strumenti che consentono di creare nuovi tag HTML personalizzati, riutilizzabili e incapsulati da sfruttare nelle pagine e nelle app web. Questo tipo di framework permette infatti la realizzazione di app ibride, ossia di app che possono essere distribuite sia su piattaforma Android sia iOS.
Se finora vi siete persi qualche pezzo, niente paura: alla fine di questo libro troverete un glossario con tutti i termini tecnici che possono tornarvi utili durante lo sviluppo. Questo libro Ăš infatti pensato per dare gli strumenti a chi vuole iniziare a programmare unâapp in Ionic, pur non avendo una base tecnica ben consolidata. Un prerequisito perĂČ câĂš: dal momento che Ionic Ăš basato su Angular e quindi su TypeScript, la conoscenza di questi â anche se basilare â Ăš fondamentale.
Se cosĂŹ non fosse, vi consiglio di dare unâocchiata alla documentazione ufficiale, oppure a questo repository:
https://github.com/sudheerj/angular-interview-questions
Si tratta di una raccolta di domande su Angular molto semplice, che vi permette di approcciarvi facilmente a questa libreria e di imparare i concetti chiave di questo framework. Nella parte pratica di questo manuale andremo infatti a utilizzare Angular, anziché Vue.js o React, anche se tutti i concetti che vedremo sono facilmente applicabili anche a queste altre tecnologie.
Ma procediamo per gradi: intanto, per darvi unâidea di che cosâĂš Ionic e come funziona, diamo unâocchiata al codice di seguito:
src/app/app.component.html
<ion-header [translucent]="true"> Â Â <ion-toolbar> Â Â Â Â <ion-buttons slot="start"> Â Â Â Â Â Â <ion-menu-button></ion-menu-button> Â Â Â Â </ion-buttons> Â Â Â Â <ion-title>Lista della spesa</ion-title> Â Â </ion-toolbar> </ion-header>
<ion-content [fullscreen]="true"> Â Â <ion-list> Â Â Â Â <ion-item>Pane</ion-item> Â Â Â Â <ion-item>Latte</ion-item> Â Â Â Â <ion-item>Uova</ion-item> Â Â </ion-list> </ion-content>
Con pochissimi tag, lâesempio sopra riportato creerĂ unâinterfaccia utente che si presenta e si comporta come una tipica pagina di app per dispositivi mobile, con un elenco a scorrimento che in questo caso rappresenta una lista della spesa.
I componenti forniti da Ionic sono in genere leggermente piĂč complessi dei semplici elementi HTML. I componenti web, cosĂŹ come in Angular, ci consentono di costruire una logica complessa negli elementi. A volte un componente in Ionic fornisce un risultato che presenta uno stile semplice per mostrare quello che ci si aspetterebbe di vedere in unâapplicazione iOS/Android (come un <ion-button>), mentre a volte i componenti avranno anche script piĂč complessi che possono essere incorporati in essi (come nel caso del componente <ion-datetime>, che fornisce un selettore di date a scorrimento).
Il risultato delle poche righe scritte in precedenza avrĂ un aspetto simile a quanto mostrato nella Figura 1.1.
Nellâesempio, allâinterno di un componente abbiamo creato unâintestazione con il titolo della nostra pagina, quindi abbiamo creato una lista di contenuti, che in questo caso sono i prodotti da comprare andando al supermercato.
Certo, questo Ăš un esempio molto semplice, ma alla fine di questo libro saremo in grado di creare applicazioni molto piĂč complesse, che permettano allâutente di scattare foto, oppure effettuare pagamenti o semplicemente farci sognare sulla nostra prossima meta di viaggio.
Figura 1.1 â Lista della spesa.
Perché usare Ionic
Quando creiamo applicazioni con Ionic, in genere non utilizziamo solo i componenti web forniti dal framework. Strumenti come Cordova ci consentono di creare unâapplicazione Ionic come se fosse unâapplicazione nativa per iOS o Android. La riga di comando di Ionic consentirĂ di creare una versione dellâapplicativo che puĂČ essere distribuita sul web, ma senza dover scrivere una riga di codice nativo per i due sistemi operativi. Cosa câĂš di piĂč sorprendente per uno sviluppatore che sfruttare le sue capacitĂ di sviluppo di applicazioni web nella creazione di unâapplicazione mobile multipiattaforma (in questo caso iOS e Android) e nel frattempo dare un aspetto attraente e responsive allâapplicazione stessa? Alcune delle caratteristiche che Ionic offre e che lo rendono uno strumento di sviluppo mobile davvero eccezionale sono elencate di seguito.
Gratuito e open source
Ionic Ăš un framework open source autorizzato dal MIT. CiĂČ implica che gli sviluppatori possono gestire efficacemente la struttura del codice, risparmiando sforzi, denaro e tempo. Hanno anche un forum di community in tutto il mondo, per aiutare a comunicare con altri sviluppatori di app Ionic, fare ricerche e aiutare gli altri.
Cross-platform e one-codebase
Ionic consente lo sviluppo coerente di applicazioni su sistemi operativi famosi, per esempio iOS, Android e Windows. Ha la caratteristica di avere un codice base, ossia le applicazioni vengono implementate tramite Apache Cordova con una base di codice stand-alone e lâapp si adatta di conseguenza al dispositivo su cui Ăš in esecuzione, senza che sia necessario saper programmare in codice nativo.
Invio di aggiornamenti in remoto
PoichĂ© le applicazioni ibride funzionano allâinterno di una visualizzazione web, gli sviluppatori possono indirizzare gli aggiornamenti alle loro applicazioni in remoto attraverso il web, piuttosto che con il metodo convenzionale di inserire gli aggiornamenti su App Store e lasciare allâutente la scelta di aggiornare lâapplicazione oppure no. Utilizzando strumenti come Ionic Deploy e PhoneGap ContentSync, le applicazioni possono essere aggiornate a livello web da remoto, al di fuori dellâApp Store, ma comunque in conformitĂ con gli standard Android e Apple. Lâinvio remoto degli aggiornamenti garantisce che lâutente lavori solo con unâapplicazione sempre aggiornata.
Pieno supporto di Angular, Vue.js e React
Sin dallâinizio Ionic ha sfruttato le direttive di AngularJS come meccanismo per costruire componenti basati su JavaScript, che potrebbero essere distribuiti come tag HTML. Quando AngularJS Ăš stato in seguito riscritto, Ionic Ăš stato convertito e ha iniziato a utilizzare Angular. Da allora, React e Vue.js sono cresciuti in popolaritĂ , ma gli utenti di questi strumenti non hanno potuto utilizzare Ionic, che invece sfruttava solo Angular. Ionic adesso Ăš invece supportato da tutte e tre le librerie. Inoltre, le estensioni fornite da Angular.js rendono semplice lâintegrazione di funzionalitĂ avanzate per lâapplicazione.
React Ăš stato rilasciato nel 2013, mentre Vue nel 2014; mentre il primo Ăš stato sviluppato dal team di Facebook, il secondo Ăš nato grazie al lavoro di alcuni ex dipendenti di Google. Entrambi i framework vantano comunque unâimportante diffusione, grazie alla versatilitĂ e semplicitĂ dâuso. Lâaspetto piĂč importante e comune a tutti i framework Ăš che sono distribuiti in maniera gratuita e con licenza MIT. Senza volerci soffermare troppo sui dettagli, possiamo dire che Angular Ăš un framework completo, mentre React e Vue sono essenzialmente una collezione di librerie e permettono una maggiore flessibilitĂ di utilizzo. Tutti e tre sono facilmente utilizzabili con Ionic, anche se in questo libro â come giĂ accennato â utilizzeremo lâapproccio basato su Angular, sia perchĂ© la community di Angular ha giĂ indicato il suo Long Term Support (LTS) a partire da determinate versioni del framework, sia perchĂ© fornisce unâottima documentazione. Angular Ăš inoltre un framework abbastanza âmonoliticoâ, quindi la gestione delle varie dipendenze serve per costruire componenti basati su JavaScript che potrebbero essere distribuiti come tag HTML.
UI ricca di componenti
Ionic accompagna segmenti precostruiti, che sono utilizzati per personalizzare elementi, e temi di design. Ă completamente basato su SASS UI, con funzionalitĂ avanzate per realizzare applicazioni robuste e interattive, con un aspetto e un tocco nativi.
FunzionalitĂ ad hoc
Come accennato in precedenza, Ionic Ăš supportato da Angular. LâAPI componente di Angular consente ai progettisti di realizzare applicazioni web e ibride interattive. Ă inoltre dotato di plugin Cordova, per lâaccesso a numerose funzionalitĂ native, come GPS, fotocamera e molto altro. Include inoltre una potente interfaccia CLI per lo sviluppo, il test e lâimplementazione di applicazioni su varie piattaforme.
CreativitĂ e sviluppo rapido
Il modo in cui lo sviluppo multipiattaforma Ăš abilitato da Ionic ovviamente chiarisce la strada per uno sviluppo piĂč rapido. Permette di risparmiare un sacco di tempo e sforzi che in qualche modo sarebbero stati necessari con tecniche di sviluppo nativo. Costruire applicazioni mobili dallâaspetto professionale in un tempo simile, mantenendo al contempo il vostro codice pulito oltre ogni dubbio, sembra divertente.
Ma ora basta chiacchiere, mettiamo mano al codice: iniziamo con la configurazione del sistema, cosĂŹ che si possa cominciare con un esempio semplice di app, per poi utilizzare la stessa come base per aggiungere i vari componenti, che saranno i nostri âmattonciniâ. Alla fine di questo percorso sarete in grado di padroneggiare la creazione della vostra app e anche di integrarla con alcuni dei plugin maggiormente utilizzati.
Ricordate! Se qualche parola non vi Ăš chiara, cercate nel Glossario alla fine, dove probabilmente troverete una spiegazione. Se cosĂŹ non fosse, per fortuna câĂš Google, che in molti casi puĂČ esserci di grande aiuto. La maggior parte del codice che vedremo utilizza Angular 7+ come base; se qualche riferimento ad Angular non fosse chiaro, potete partire dallâAppendice A per rivedere i concetti di base. Ci saranno alcune nozioni che verranno date per scontate durante i diversi esercizi, ma qualora vi servisse un veloce ripasso, alla fine di ogni sezione troverete una sezione in cui verrĂ indicato dove rivedere le singole parti.
2
Hello, world!
Cercando sul web le parole âHello, worldâ, potreste incorrere in migliaia di esempi di programmi in diversi linguaggi, ch...