Programma la prima App con Ionic 2: Applicazione di condivisione foto

In questa serie di tutorial in due parti, imparerete come creare la prima app Ionic2. Ora che avete impostato il vostro ambiente di sviluppo e imparato il workflow di sviluppo in Ionic 2, è ora di sporcarvi le mani programmando l'applicazione.

Se non l'avete ancora fatto leggete il primo post per impostare il vostro ambiente di sviluppo e avviare il progetto.

• Ionic 2
  Code Your First Ionic 2 App: Getting Set Up
  Wernher-Bel Ancheta

Questa seconda parte riguarderà ciò che avete bisogno di conoscere quando arriva il momento di programmare applicazioni in Ionic 2. Imparerete come creare pagine per l'applicazione, come ottenere l'input utente e come usare plugins per accedere a funzionalità native. Una volta concluso avvierete l'app su un dispositivo o un emulatore. Prima di arrivarci prendiamoci un momento per parlare di ciò che svilupperete.

Cosa svilupperete

In questo tutorial realizzerete un'app di condivisione foto. Il flusso di base dovrebbe essere il seguente:

1. L'utente apre l'app ed esegue il login. Verrà dirottato verso la pagina da cui preleverà un'immagine da condividere.
2. L'utente clicca sul pulsante Pick Image. Il selettore di immagini appare e l'utente sceglie un'immagine. Verrà mostrata un'anteprima di quell'immagine.
3. L'utente inserisce una didascalia e clicca sul pulsante Share Image per passare l'immagine all'applicazione Instagram.

Questo tutorial mostrerà soltanto come avviare l'app su un dispositivo Android, ma Cordova (il framework su cui gira Ionic) è multi-piattaforma. Ionic 2 ha temi pre-costruiti per Android, iOS e Windows, così risulterà facile creare una versione dell'applicazione per quei dispositivi nello stesso modo.

Ecco come apparirà la nostra applicazione:

Setup del Progetto

Se avete seguito il precedente tutorial avrete già impostato l'ambiente di sviluppo e strutturato il vostro progetto. Abbiamo usato le seguenti istruzioni CLI per creare la struttura di cartelle del progetto e prepararci alla distribuzione su Android:

ionic start photoSharer blank --v2 --id com.tutsplus.photosharer
ionic platform add android

Abbiamo inoltre installato un paio di utili plugins:

ionic plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker
ionic plugin add cordova-instagram-plugin

Programmare l'Home Page

Per la parte rimanente del tutorial, lavorerete principalmente dentro la cartella src, date quindi per scontato che la cartella src sarà la cartella principale ogni volta che vedrete il percorso di un file. (Se avete bisogno di rivedere i percorsi che vengono creati dal template iniziale di Ionic, date un'occhiata al precedente tutorial.)

Nella directory src sono presenti quattro cartelle:

• app: qui è dove viene definito il codice dell'intera applicazione. Se avete bisogno di eseguire codice specifico all'avvio, o volete aggiornare il CSS globale, questo è il posto in cui andare.
• assets: qui è dove finiscono gli assets quali le immagini usate come contenuto per l'app.
• pages: qui è dove finisce il codice usato per le pagine individuali. Ogni pagina ha la propria cartella, e dentro ogni cartella ci sono tre files che definiscono il template (HTML), lo stile (CSS) e lo script (TypeScript) dell'applicazione.
• themes: qui è dove andrete se vorrete modificare il tema di default di Ionic 2.

Home Page Template

Di default, il template starter di Ionic è già fornito di una home page. Così tutto ciò che dovrete fare sarà modificarla per mostrare il contenuto che volete. Aprite il file pages/home/home.html e cancellate il contenuto attuale. Aggiungete il codice seguente all'inizio della pagina:

<ion-header>
  <ion-navbar>
    <ion-title>
      Login
    </ion-title>
  </ion-navbar>
</ion-header>

Il codice soprastante è il boilerplate per l'header dell'app. Il componente <ion-navbar> serve come una barra degli strumenti di navigazione. Mostrerà automaticamente un pulsante back ogni volta che navigherete fuori dalla pagina di default. <ion-title> imposta il titolo della barra di navigazione.

Poi c'è il contenuto effettivo della pagina. Potrete definirlo all'interno del componente <ion-content>. Il padding di default può essere applicato specificando l'opzione padding. Dentro quel container create un nuovo elenco che contiene i campi di input per inserire username e password. Creare un elenco che contiene campi editabili è una pratica standard in Ionic - vi permetterà di mettere in pila ordinatamente ogni campo uno sull'altro.

<ion-content padding>

  <ion-list>
    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input type="text" [value]="username" [(ngModel)]="username"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input type="password" [value]="password" [(ngModel)]="password"></ion-input>
    </ion-item>
  </ion-list>

  <div padding>
    <button ion-button full (click)='login();'>Login</button>
  </div>
</ion-content>

Prendiamoci un momento per guardare il codice per inserire testo e cliccare un pulsante. In Ionic potete definire campi di input di testo usando il componente <ion-input>. Per legare il campo di testo a una proprietà di classe definita nello script della pagina, usate [(ngModel)]. Quindi il valore assegnato ad esso sarà il nome della proprietà di classe.

Per impostare il two-way data binding, potete impostare [value] allo stesso nome di proprietà usato per [(ngModel)]. Ciò consente di aggiornare il valore del campo di testo cambiando il valore del modello dallo script della pagina. Più tardi vedrete come definire una proprietà di classe dentro lo script della pagina.

<ion-input type="text" [value]="username" [(ngModel)]="username"></ion-input>

Per definire pulsanti usate l'elemento standard button in HTML. Se vi state chiedendo perché non usiamo <ion-button> sappiate che è dovuto a ragioni di accessibilità. I pulsanti sono un componente di interfaccia cruciale, così il team di Ionic ha deciso di attenersi ai pulsanti standard HTML per renderli accessibili. La direttiva ion-button viene invece aggiunta per fornire funzionalità aggiuntive.

Per aggiungere un click handler usate la direttiva (click) con un valore che specifica la funzione (definita nello script della pagina) da eseguire quando si presenta l'evento click.

<button ion-button full (click)='login();'>Login</button>

Home Page Script

Aprite il file pages/home/home.ts, cancellate il contenuto e aggiungete:

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

//import { PickerPage } from '../../pages/picker/picker';

@Component({
  templateUrl: 'home.html'
})
export class HomePage {

  username: string;
  password: string;

  readonly APP_USERNAME: string = 'me';
  readonly APP_PASSWORD: string = 'secret';

  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {

  }

  login() {
    let alert = this.alertCtrl.create({
      title: 'Login Failed',
      subTitle: 'The username or password you entered is incorrect.',
      buttons: ['OK']
    });

    if (this.username == this.APP_USERNAME && this.password == this.APP_PASSWORD) {
      this.navCtrl.push(PickerPage);
    } else {
      alert.present();
    }
    this.username = '';
    this.password = '';
  }

}

Controllando il codice soprastante importiamo prima la classe component di Angular che ha tutte le direttive Ionic già impostate.

import { Component } from '@angular/core';

Poi importiamo i controllers per la navigazione e gli alerts dal package ionic-angular. Qui è dove verranno inclusi tutti i controllers Ionic.

import { NavController, AlertController } from 'ionic-angular';

Dopo ciò importeremo PickerPage. Lo creerete dopo, lasciatelo quindi come commento per il momento. Ricordate di rimuovere il commento una volta che siete pronti a vederlo caricato.

//import { PickerPage } from '../../pages/picker/picker';

Dopo gli imports usate il decoratore @Component per specificare il template HTML che dovrà essere usato dallo script:

@Component({
  templateUrl: 'home.html'
})

Ora possiamo definire la classe per lo script della home page. Vorremo esportare questa classe in modo che possa essere importata da altri files nell'applicazione.

export class HomePage {
    ...
}

Rendete disponibili NavController e AlertController nella classe definendoli come parametri in constructor. Ciò vi consentirà di sfruttare this.navCtrl, per esempio, quando volete usare NavController per navigare su una pagina diversa.

constructor(public navCtrl: NavController, public alertCtrl: AlertController) {

}

Ora siamo pronti a definire le proprietà del nostro controller che possono essere prese come riferimento dal template. Queste proprietà conterranno il valore corrente del campo testo per username e password:

username: string;
password: string;

Per mantenere le cose semplici, useremo valori manuali per username e password. Ma per applicazioni reali, fareste una richiesta al server per autenticare l'utente.

readonly APP_USERNAME: string = 'me'; // constants in TypeScript are defined by specifying the property to be readonly
readonly APP_PASSWORD: string = 'secret';

All'interno della funzione login(), create un alert quando un utente inserisce username o password non corretti:

let alert = this.alertCtrl.create({
  title: 'Login Failed',
  subTitle: 'The username or password you entered is incorrect.',
  buttons: ['OK']
});

Se le credenziali non sono corrette, mostrate l'alert:

alert.present();

Se l'input di username e password inserito dall'utente corrisponde ai valori inseriti da noi, usate NavController per introdurre la Picker Page all'interno della navigazione. Qualsiasi pagina aggiungiate alla navigazione diventerà la pagina corrente, in caso contrario tornerete alla pagina precedente. Così funziona la navigazione in Ionic 2.

this.navCtrl.push(PickerPage);

Picker Page

Successivamente dovrete creare la picker page. Come già saprete lo standard consiste nel creare una cartella separata per ogni pagina, e ogni cartella avrà tre files al proprio interno. Fortunatamente la CLI di Ionic viene fornita con un'istruzione che consente di creare nuove pagine:

ionic g page pickerPage

Questa istruzione utilizza il comando generate che creerà la cartella della pagina con quei tre files all'interno. Ancora meglio, ogni file creato ha già del codice con cui potete iniziare.

Picker Page Template

Una volta fatto, aprite il file pages/picker/picker.html e sostituite il codice con il seguente:

<ion-header>
  <ion-navbar>
    <ion-title>Pick Image</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div padding>
    <button ion-button full (click)='pickImage();'>Pick Image</button>
  </div>

  <ion-card text-center>
    <img [src]="picked_image" />
  </ion-card>

  <div class="form-container" [hidden]="!has_picked_image">
    <ion-list>
      <ion-item>
        <ion-label stacked>Caption</ion-label>
        <ion-input type="text" [value]="caption" [(ngModel)]="caption"></ion-input>
      </ion-item>
    </ion-list>
    <div padding>
      <button ion-button full color="secondary" (click)='shareImage();'>Share Image</button>
    </div>
  </div>
</ion-content>

Nessuna parte di questo codice è davvero sconosciuta tranne la direttiva hidden e l'utilizzo di un componente <ion-card>.

La direttiva hidden permette di nascondere un elemento basato su un valore specifico definito nello script di pagina. Così solo quando has_picked_image sarà true questo div risulterà visibile.

<div class="form-container" [hidden]="!has_picked_image">
    ...
</div>

Il componente <ion-card> viene usato per creare cards. Le cards sono un ottimo modo per visualizzare immagini all'interno delle applicazioni.

Picker Page Style

Aprite il file pages/picker/picker.scss e aggiungete:

.form-container {
  padding-top: 20px;
}

Picker Page Script

Aprite il file pages/picker/picker.ts e aggiungete:

import { Component } from '@angular/core';
import { ImagePicker, Instagram } from 'ionic-native';

@Component({
  templateUrl: 'picker.html'
})
export class PickerPage {

  picked_image: string;
  has_picked_image: boolean = false;
  caption: string;
  readonly DEFAULT_IMAGE: string = 'http://placehold.it/500x500';

  constructor() {
    this.picked_image = this.DEFAULT_IMAGE;
  }

  pickImage() {
    var options = {
      maximumImagesCount: 1,
      width: 500,
      height: 500,
      quality: 50,
      outputType: 1
    };

    ImagePicker.getPictures(options).then((results) => {
      this.picked_image = 'data:image/jpeg;base64,' + results[0];
      this.has_picked_image = true;
    }, (err: any) => {
      console.log(err);
      this.has_picked_image = false;
    });

  }

  shareImage() {
    Instagram.share(this.picked_image, this.caption)
      .then(() => {
        this.picked_image = this.DEFAULT_IMAGE;
        this.has_picked_image = false;
      })
      .catch((error: any) => {
        console.error(error);
      });
  }

}

Analizzeremo questa parte. Prima importiamo i plugins che avete installato precedentemente. Notate che i plugins sono installati sotto lo stesso package (ionic-native). Questo è davvero molto utile perché, invece di dover importare ogni singolo plugin attraverso una linea di codice dedicata, è possibile farlo in una singola riga.

import { ImagePicker, Instagram } from 'ionic-native';

Quindi dichiariamo le proprietà di classe:

picked_image: string; // the image picked by the user
has_picked_image: boolean = false; // for easily determining whether there's currently an image picked by the user or not
caption: string; // the caption for the image
readonly DEFAULT_IMAGE: string = 'http://placehold.it/500x500'; // the default image

Quando il pulsante Pick Image viene cliccato definisce le opzioni per il selezionatore di immagini. Queste opzioni sono abbastanza auto-esplicative, ma abbiamo aggiunto alcuni commenti per chiarire cosa fa ognuna.

let options = {
  maximumImagesCount: 1, // the maximum number of images that the user can pick
  width: 500, // the maximum width in which the image will be in once it is picked 
  height: 500, // the maximum height in which the image will be in once it is picked 
  quality: 50, // the quality of the photo. The value can be up to 100 for 100% quality
  outputType: 1 // what format the results will be in once the user has picked an image. 
                // 0 is for file URIs while 1 is for data URIs. 
};

Specificare width e height non significa necessariamente che l'immagine risultante userà quell'esatta larghezza e altezza. Significa che Ionic userà quelle dimensioni come larghezza e altezza massime in modo che le proporzioni vengano mantenute.

Stiamo utilizzando dati URI come tipo di output perché il plugin Instagram accetta soltanto dati URI. Ciò significa che dovrete aggiustare larghezza, altezza e qualità al minimo dal momento che i dati URI possono essere molto lunghi se la qualità è alta—l'intera immagine viene codificata in stringa URI! Ciò potrebbe far terminare inaspettatamente l'applicazione, così è sempre buona pratica usare qualità basse e immagini più piccole lavorando con dati URI.

Successivamente, è possibile utilizzare il plugin Image Picker per attivare la schermata di selezione immagine. Dal momento che ci aspettiamo una singola immagine, possiamo semplicemente accedere al primo elemento nei risultati dell'array. Dobbiamo inoltre aggiungere il prefisso per i dati URI.

ImagePicker.getPictures(options).then((results) => {
  this.picked_image = 'data:image/jpeg;base64,' + results[0];
  this.has_picked_image = true;
}, (err: any) => {
  console.log(err);
  this.has_picked_image = false;
});

Infine, quando viene cliccato il pulsante Share Image, il metodo share fornito dal plugin Instagram attiverà la schermata di condivisione nell'applicazione Instagram da lanciare. Questa avrà già l'immagine pre-caricata.

La didascalia non verrà però copiata. L'applicazione Instagram disabilita le didascalie pre-caricate così il campo didascalia rimarrà vuoto una volta che viene aperta l'applicazione Instagram. Per risolvere il problema, il plugin Instagram copia la didascalia negli appunti. Ciò significa che l'utente potrà solo copiarla nel campo di testo della didascalia nell'applicazione Instagram.

Instagram.share(this.picked_image, this.caption)
  .then(() => {
    this.picked_image = this.DEFAULT_IMAGE;
    this.has_picked_image = false;
  })
  .catch((error: any) => {
    console.error(error);
  });

Uniamo tutti gli elementi

Il passaggio finale consiste nell'aprire il file app/app.module.ts. Questo è il modulo principale dell'applicazione dove definirete tutte le pagine e i providers (come il gestore di errori di default di Ionic) che userete nell'applicazione.

Assicuratevi che tutte le pagine che avete creato vengano definite, altrimenti riceverete un errore quando navigherete verso una pagina che non è stata definita. Di default HomePage è già stata definita, così dovrete solo aggiungere PickerPage. Importatela all'inizio del file e aggiungetela sotto gli array declarations e entryComponents. Notate che MyApp non è una pagina; è un componente che funge da guscio vuoto per le pagine da caricare.

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { PickerPage } from '../pages/picker/picker';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    PickerPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    PickerPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Se aprite il file app/app.components.ts vedrete:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

Qui è dove potrete definire la pagina principale—la pagina che l'utente vedrà una volta aperta l'applicazione. In questo caso, la pagina principale è HomePage. Questo è perfetto per eseguire il codice di inizializzazione, dal momento che il codice presente viene eseguito una volta che l'utente avvia l'applicazione. Quando inizializziamo qualcosa (per esempio chiedendo il permesso per abilitare Bluetooth), vorrete sempre aspettare fino a quando non viene eseguito l'evento platform.ready(). Solo una volta che l'evento è stato attivato potete essere sicuri che le funzioni native saranno pronte per essere chiamate.

Avviare l'applicazione

Ora siete pronti per eseguire l'applicazione su un dispositivo mobile o un emulatore. Potete farlo eseguendo l'istruzione:

ionic run android

Siate sicuri di avere un dispositivo collegato al computer o che abbiate un'istanza di un emulatore avviata quando eseguite il comando soprastante. Se non funziona ancora controllate di avere abilitato il debug USB sul vostro dispositivo ed eseguite adb devices. Ciò connetterà il computer al dispositivo. Approvate l'autorizzazione quando il prompt appare sul vostro dispositivo.

Se volete avere una copia del file APK da condividere con gli amici, potete generarne uno eseguendo:

ionic build android

Questo creerà un file android-debug.apk nella cartella platforms/android/build/outputs/apk.

Conclusione

Ecco fatto! In questo tutorial avete creato la prima app Ionic 2. È una semplice applicazione e potreste averla trovata facile. Ma avete imparato come impostare un ambiente per lo sviluppo di applicazioni Ionic 2, e avete imparato alcuni semplici concetti che potrete applicare quando svilupperete applicazioni in futuro. Questi includono ottenere il valore corrente da un campo di testo, rispondere agli eventi di click, collegare immagini e usare plugins per accedere a funzionalità native. Battetevi quindi una pacca sulla spalla! Avete fatto un buon lavoro fino a questo punto.

Nel frattempo, controllate alcuni degli altri tutorials su Ionic2!

• Ionic
  How to Create a Camera App With Ionic 2
  Ashraff Hathibelagal
• Ionic 2
  Introduction to Ionic 2
  Wernher-Bel Ancheta

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

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.