Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic 2
Code

Programma la prima App con Ionic 2: Impostazioni

by
Difficulty:BeginnerLength:ShortLanguages:

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Con il recente rilascio di Ionic 2, potreste essere uno degli sviluppatori di app ibride che vorrebbe testarlo. Ma forse siete sopraffatti dalla quantità di apprendimento necessario per iniziare.

Ecco perché vorremmo fornirvi un buon punto di partenza accompagnandovi passo passo nella creazione della vostra prima app Ionic 2. Se avete già familiarità con Ionic i concetti potrebbero già esservi "noti". Se invece siete dei completi principianti, non preoccupatevi — non daremo per scontata alcuna conoscenza preliminare del framework.

Panoramica dell'Applicazione

In questo tutorial e nel prossimo, svilupperete un'app di condivisione foto che consentirà agli utenti di prelevare un'immagine dai loro dispositivi e condividerli tramite Instagram. Ecco come apparirà l'applicazione:

Completed photo sharer app

Impostare l'ambiente di sviluppo

Prima di iniziare a sviluppare applicazioni con Ionic 2, dovrete impostare l'ambiente di sviluppo. Questo include il codice seguente:

  • Android SDK: applicazioni sviluppate con Cordova e Ionic si rifanno agli stessi strumenti di sviluppo usati dagli sviluppatori di app native.
  • Node.js: principalmente utilizzato da Ionic per la strumentazione — cose come la compilazione del codice e il controllo degli errori.
  • Un dispositivo Android o un emulatore per il testing. Potete installare l'emulatore di default di Android attraverso l'installer dell'SDK di Android.

Non abbiamo intenzione di mostrarvi come impostare l'ambiente di sviluppo. La guida della piattaforma Cordova fornisce informazioni più che sufficienti:

Le due pagine soprastanti vi mostreranno tutto ciò che avete bisogno di conoscere riguardo l'impostare Cordova per iOS e Android. Una volta che il vostro sistema di sviluppo è impostato possiamo procedere al passo successivo.

Installare Cordova e Ionic

Phew! Ora potete installare Cordova e Ionic. Usate i seguenti comandi:

Una volta terminata l'installazione, dando per scontato che non vi siano errori, potete verificare se sono stati installati con i comandi seguenti: cordova --version e ionic --version. Ciò vi mostrerà le versioni dei frameworks di Cordova e Ionic installate sul vostro sistema. Per noi, verranno restituiti i valori 6.4.0 e 2.2.1.

Se volete vedere informazioni di versione più dettagliate come la versione del Framework Ionic e la versione del CLI Ionic, usate l'istruzione seguente:

Ecco un esempio di output:

Creare un nuovo progetto Ionic

La CLI Ionic fornisce l'istruzione ionic start per creare facilmente un nuovo progetto:

Ecco un template per aiutarvi a capire cosa fa ogni singola opzione:

Il template di partenza che è stato utilizzato qui è blank. Questo contiene solo il minimo necessario per mostrare qualcosa a video. Ce ne sono altri, ma possono risultare un po' impegnativi.

Ricordate che la CLI Ionic si rivolge sia a progetti Ionic 1 che Ionic 2, così dovrete specificare l'opzione --v2 per il bootstrap di un progetto Ionic 2 dal momento che Ionic 1 è ancora di default. Una volta all'interno di un progetto Ionic 2, la CLI Ionic è abbastanza intelligente da capire quale versione utilizzare.

Aggiungere la Piattaforma

Per impostazione predefinita, Ionic non è dotato di piattaforme da usare per la distribuzione. È possibile aggiungerne una utilizzando l'istruzione ionic platform add seguita dalla piattaforma con cui si desidera distribuire l'applicazione:

Se volete cambiare piattaforma di distribuzione, sostituite android con qualsiasi piattaforma vogliate.

Installare i Plugins

Per questa applicazione avrete bisogno di due plugins: uno per selezionare un'immagine dalla libreria utente, e uno per condividere l'immagine con Instagram.

Per primo il plugin Image Picker. Questo fornisce all'applicazione l'abilità di selezionare le immagini dalla libreria delle foto dell'utente.

Poi è il momento del plugin Instagram. Questo consente di trasmettere l'immagine all'applicazione Instagram per la pubblicazione.

Questi due plugins che avete appena installato sono parte di un set ES6 e TypeScript dedicato ai plugins Cordova denominato Ionic Native. Il compito principale è facilitare l'interazione con i plugins Cordova inserendo callbacks ai plugins in Promises e Observables

Workflow di sviluppo

Ora siete pronti a programmare l'applicazione. Però prima di arrivarci, diamo un'occhiata al workflow di sviluppo di Ionic 2 e alla struttura delle cartelle.

In Ionic 2 gran parte del lavoro di sviluppo viene svolto all'interno della cartella src. Questi files vengono ricompilati ogni volta che eseguite aggiornamenti ai files nella cartella. A differenza di Ionic 1 la compilazione è necessaria perché i files sorgente sono scritti in TypeScript (compilato in codice ES5) e Sass (compilato in codice CSS). Ogni volta che eseguite modifiche il codice viene analizzato per trovare errori che vengono restituiti allo sviluppatore attraverso la console o l'anteprima dell'applicazione. Una volta eseguita la compilazione i files risultanti vengono copiati nella cartella www, e le modifiche vengono mostrate nell'anteprima dell'applicazione.

Struttura delle cartelle

Per essere a proprio agio lavorando con un progetto Ionic 2, è necessario acquisire familiarità con la struttura delle cartelle. Per cominciare, dovete conoscere per cosa viene utilizzata ogni cartella in modo da sapere dove inserire i files sorgente e dove cercare i files che vi occorrono.

  • node_modules: qui è dove vengono archiviate le dipendenze Ionic 2. Gran parte del tempo non dovrete toccare questa cartella a meno che non ci siano problemi con una delle dipendenze e dovete re-installarle.
  • platforms: qui è dove risiede il codice specifico della piattaforma e dove l'installer dell'applicazione viene collocato quando sviluppate l'applicazione per eseguirla su dispositivo o emulatore. Ciò significa che tutti i files nelle cartelle www e plugins vengono copiate qui ogni volta che eseguite la build dell'applicazione.
  • plugins: in questo posto sono collocati i plugins, ovviamente — sia i plugins Ionic di default che qualsiasi altro plugin installato.
  • resources: qui è dove metterete le risorse dell'applicazione come icone e splash screen.
  • src: qui è dove svilupperete la maggior parte del tempo. Tutti i templates, fogli di stile e files TypeScript sono collocati qui.
  • www: qui finiscono i files compilati. I files vengono forniti all'anteprima dell'applicazione.
  • hooks: qui vengono archiviati gli hook scripts di sviluppo di Cordova. Vengono usati se avete scripts personalizzati che desiderate eseguire durante una parte del ciclo di sviluppo (ad esempio quando una piattaforma o plugin viene aggiunto).

Eseguire il Server di Sviluppo

Mentre sviluppate un'applicazione, è utile vedere un'anteprima live dell'applicazione che viene aggiornata mentre modificate il codice. Per avviare il server di sviluppo usate la seguente istruzione:

Avvierà il processo di monitoraggio dei cambiamenti nei files sorgente e inizierà a compilarli in tempo reale. Di default Ionic fornirà l'anteprima in http://localhost:8100/. Vedrete qualcosa di simile a ciò che segue, poi potrete proseguire e visualizzare l'anteprima dell'app nel browser all'URL indicato.

ionic serve output

Prossimi passi

Ora che l'ambiente di sviluppo è impostato siamo pronti a passare alla programmazione! Rimanete sintonizzati domani per il prossimo post, dove vi mostreremo come programmare l'applicazione, sviluppando l'UI e le funzionalità di condivisione foto. Sarà divertente!

Nel frattempo, controllate alcuni degli altri tutorials su Ionic 2!

Se volete un'introduzione approfondita e pratica al framework Ionic 2, provate il nostro corso Getting Started With Ionic 2.

In questo corso, Reggie Dawson insegnerà tutto ciò che riguarda il framework Ionic e vi mostrerà come sviluppare un'applicazione mobile da zero. Strada facendo, affronterete la libreria di componenti Ionic, la programmazione JavaScript a tipo statico grazie a TypeScript, e come integrare un'app Ionic 2 con un'API ricca di contenuti media.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.