Corso Ionic-Framework

Programma Corso Ionic Framework (32ore):

1

1. Introduzione a Ionic

• Cos’è Ionic: definizione ufficiale: “open-source UI toolkit per costruire app mobile multi-piattaforma con HTML, CSS, JavaScript” .

• Evoluzione: supporto Angular, React, Vue, uso di Web Components.

• Classificazione delle app mobile: native, ibrida, PWA; differenze e casi d’uso.

• Architettura “ibrida” / webview vs “native”: il ruolo del motore WebView nel contesto Ionic.

• Introduzione a Capacitor e a Apache Cordova: indicazione della tendenza a preferire Capacitor per nuovi progetti.

• Vantaggi e svantaggi nella scelta di Ionic-based: riuso del codice, cross-platform, limiti di performance rispetto al puro native.

2. Struttura del progetto Ionic

• Installazione ambiente di sviluppo: Node.js, npm, Ionic CLI. (ad esempio: npm install -g @ionic/cli)

• Creazione progetto con ionic start, scelta template (tabs, blank, sidemenu) e tipo Angular/React/Vue.

• Panoramica della struttura generata: cartelle principali (src/app, e2e, www, etc).

• Panoramica del CLI Ionic: comandi principali (ionic serve, ionic build, ionic capacitor add, etc) e integrazione con Capacitor.

• Template e scaffolding: utilizzo dei template Ionic e best practice di avvio.

3. Creazione di un’applicazione Ionic

• Avvio rapido: “-starter” app.

• Creazione della prima applicazione mobile con Ionic: seguendo il tutorial ufficial “Your First Ionic App: Angular” (o equivalente React/Vue) per coprire il flusso base.

• Esecuzione su browser, simulatore/emulatore e dispositivo fisico: configurazione Android / iOS.

• Uso del tool di live-reload e debug.

4. Theming e Sass nel contesto Ionic

• Panoramica del sistema di componenti UI di Ionic: più di 100 componenti ottimizzati mobile.

• Uso di Sass/SCSS per personalizzare stili: variabili, temi (light/dark mode), Theme variables di Ionic.

• Override degli stili dei componenti Ionic: best-practice e compatibilità cross-platform.

• Utilizzo dei componenti e stili modulari nel progetto.

5. Fondamenti di Angular (o altro framework prescelto) integrati in Ionic

N.B.: Se l’azienda usa Angular come framework front-end, questo modulo è centrato su Angular + Ionic (altrimenti può essere adattato a React/Vue).

• Panoramica del modulo Angular per Ionic: integrazione @ionic/angular.

• Componenti Angular, servizi, dependency injection, lifecycle hooks.

• Navigation e Routing in Ionic Angular: guida ufficiale “Angular Navigation”.

• Change-Detection Strategy, ViewEncapsulation e ShadowDOM: cenni per front-end esperto.

• Animazioni con @angular/animations, integrazione con Ionic transitions.

• Organizzazione delle “pages” in Ionic, best practice per Single Page Application mobile.

6. Integrazione con API esterne e architettura dati

• Chiamate REST / GraphQL da applicazioni Ionic: integrazione con back-end.

• Binding di componenti/pages e gestione degli stati.

• Esercitazione: consumare un’API esterna, visualizzare dati in una lista, gestione errore e loading spinner.

• Best practice per architettura dati front-end mobile: lazy loading, modularizzazione.

7. Accesso alle funzionalità native del dispositivo

• Plug-in e runtime: Capacitor come standard moderno per Ionic.

• Plugin comuni: geolocalizzazione, fotocamera, notifiche push (ad esempio via @capacitor/camera, @capacitor/geolocation, @capacitor/push-notifications).

• Uso della libreria @ionic-native (se ancora con Cordova) vs plugin Capacitor.

• Esercitazione: implementazione camera + filesystem (tutorial ufficial) oppure geolocalizzazione + mappa.

8. Architetture mobile con Ionic & testing

• Architettura applicativa: Componenti riutilizzabili, modulare, servizi condivisi, lazy-loaded modules.

• Test unitari e end-to-end: panoramica su testing in Ionic/Angular (Jasmine/Karma, Protractor o Cypress).

• Cenni alla creazione di plugin custom: se necessario, struttura base e integrazione con Ionic.

• Migrazione da Cordova a Capacitor (se applicabile) e considerazioni di plugin compatibilità.

9. Gesture, eventi e interazioni mobile

• Gestione delle gesture native nei componenti Ionic: tap, swipe, drag & drop, hold.

• Panoramica sull’API Gestures di Ionic (Ionic Gesture Controller) e best practice UX mobile.

• Esercizi pratici: costruzione di un’interazione personalizzata (es. carosello, drag list).

10. Deploy, release e piattaforme

• Processo di build per produzione: comando ionic build --prod, preparazione piattaforme Android/iOS con Capacitor.

• Procedura di deploy su Google Play Store e Apple App Store, requisiti e certificazioni.

• Progressive Web App (PWA) con Ionic: indicazioni e differenze rispetto mobile nativo.

• Manutenzione: aggiornamenti, versioning, plugin, supporto cross-platform.