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

Come creare un'applicazione fotografica con Ionic 2

by
Difficulty:BeginnerLength:MediumLanguages:

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

Final product image
What You'll Be Creating

Come sviluppatore prudente, potresti essere davvero diffidente nel creare applicazioni ibride che dipendono dalle API native di Android. Pochi anni fa, lo ero molto, se consideri che Android ha così tante specifiche versioni e caratteristiche specifiche per dispositivo. Oggi, tuttavia, possiamo fidarci dei framework di sviluppo per le applicazioni ibride per gestire molte di queste parti in maniera trasparente. Ionic 2, costruito su Apache Cordova, è uno dei framework.

Ionic 2, ha un wrapper per diversi popolari plugin di Cordova che ti permette di usare facilmente le risorse native di Android, come la fotocamera, sensori hardware e il file system. In questo tutorial, ti mostrerò come usare questi wrapper insieme ai componenti grafici di Ionic 2 per creare una semplice applicazione fotografica.

Prerequisiti

Per proseguire, avrai bisogno di:

  • L'ultima versione dell'Android SDK
  • Node.js v.6.7.0 o successivo
  • Un dispositivo o simulatore che esegue Android 4.4 o successivo
  • Una conoscenza base di TypeScript e Angular 2

1. Installare Cordova e Ionic

Sia Ionic che Cordova sono disponibili come moduli NPM, quindi il modo più semplice per installarli è usare il comando npm. Così è come puoi installarli entrambi globalmente:

Una volta che l'installazione è completata, scrivi il seguente codice per assicurarti che l'interfaccia di linea di comando di Ionic, o in breve CLI, è configurata correttamente.

L'output del comando sopra dovrebbe essere come questo:

2. Creare un nuovo progetto

La CLI di Ionic è davvero semplice per creare nuovi progetti di Ionic 2 con tutti i file di configurazione necessari e del codice preimpostato. Offre anche diversi modelli di partenza per sceglierli. Per adesso creiamo un semplice progetto usando un modello di partenza blank.

A questo punto, avrai una nuova cartella chiamata MyCameraApp. Per il resto di questo tutorial, andremo a lavorare dentro questa cartella.

3. Configurare il progetto

Di base, un progetto Ionic 2 non è configurato per essere destinato per qualsiasi piattaforma mobile. Ecco come puoi aggiungere il supporto per Android:

Devi anche puntare manualmente Ionic 2 alla posizione dove hai installato l'Android SDK. Se stai usando il Mac o Linux, usa il comando export per farlo.

4. Installare i plugin di Ionic

La nostra applicazione fotografica ha bisogno di accedere alla fotocamera del dispositivo e al file system, di cui entrambi sono risorse native. Se sei familiare con Cordova, potresti essere consapevole che le applicazioni ibride di solito interagiscono con tali risorse attraverso i plugin. Sebbene puoi usare un plugin di Cordova direttamente in un progetto Ionic 2, è molto più facile invece di usare il wrapper di Ionic Native.

Per accedere alla fotocamera, andremo ad usare il plugin cordova-plugin-camera-preview. Ci permette non solo di scattare delle fotografie ma anche applicare diversi filtri delle immagini alle foto. Ecco come puoi aggiungerlo al tuo progetto:

Ovviamente, dovremo salvare le immagini che scattiamo su un dispositivo esterno come schede SD. Per fare ciò, andremo ad usare il plugin cordova-plugin-file.

Infine, per supportare i dispositivi Android che eseguono le API livello 23 in su, abbiamo bisogno del plugin cordova.plugins.diagnostic.

5. Definire il layout

La nostra interfaccia dell'applicazione sarà composta dai seguenti componenti:

  • Una finestra di anteprima della fotocamera
  • Un bottone fluttuante d'azione per scattare fotografie
  • Un bottone fluttuante d'azione per applicare filtri d'immagine

Andremo a creare una finestra di anteprima della fotocamera sotto forma di codice nel passaggio successivo. Per adesso, creiamo un layout HTML contenete solo due bottoni fluttuanti d'azione.

Perché la nostra applicazione vuota ha già una pagina, andremo ad usarla invece di crearne una nuova. Per modificare il suo layout, apri src/pages/home/home.html. Cancella il suo contenuto e aggiungi il nuovo tag <ion-content>.

Per creare un bottone fluttuante d'azione, puoi creare un comune bottone HTML e aggiungergli l'attributo ion-fab. Inoltre, puoi posizionarlo racchiundendo il tag <button> all'interno del tag <ion-fab>.

Un bottone fluttuante d'azione solitamente ha un'icona. Usando il tag <ion-icon>, puoi aggiungerci qualsiasi Ionicon.

Di conseguenza, aggiungi quanto segue al file di layout:

Come puoi vedere nel codice sopra, abbiamo aggiunto un gestore per l'evento clic per entrambi i bottoni. Li definiremo dopo. 

6. Acquisire i permessi

Nei dispositivi che eseguono le API Android livello 23 o successivi, devi esplicitamente chiedere i permessi all'utente per accedere alla fotocamera e al file system durante l'esecuzione. Per farlo nella tua applicazione ibrida, puoi usare i metodi disponibili nel wrapper Diagnostic di Ionic Native.

Comincia aprendo src/pages/home/home.ts e importando Diagnostic.

All'interno del costruttore della classe HomePage, aggiungi una chiamata al nuovo metodo checkPermissions(). In più, aggiungi un oggetto ToastController alla classe usando una iniezione di dipendenza. Andremo ad usarlo per mostrare i toast di Ionic 2, in cui sono molto identici ai nativi snackbars di Android.

Dopo aver fatto le modifiche di sopra, il tuo codice dovrebbe assomigliare a questo:

All'interno del metodo checkPermissions(), usa il metodo isCameraAuthorized() della classe Diagnostic per controllare se l'applicazione ha già i permessi di accedere sia alla fotocamera che al file system. Proprio perché il metodo ritorna un oggetto Promise, devi usare un callback per gestire il suo risultato.

Se l'applicazione non ha i permessi richiesti, puoi usare il metodo requestCameraAuthorization() per richiederli.

Se l'utente autorizza i permessi, o se la nostra applicazione li ha già, possiamo andare avanti e inizializzare l'anteprima della fotocamera all'interno di initializePreview(), un metodo che andremo a creare nel prossimo step. Altrimenti, andiamo semplicemente a mostrare un toast contenere un messaggio di errore usando i metodi create() e present() della classe ToastController.

Perciò, aggiungi il seguente codice all'interno del metodo checkPermissions():

Ecco come appare l'autorizzazione alla fotocamera su un dispositivo che esegue Android Marshmallow:

Camera authorization dialog

7. Creare un'anteprima della fotocamera

Il wrapper CameraPreview ti permette di mostrare un'anteprima in tempo reale all'interno della tua applicazione ibrida. Comunque, proprio perché questa anteprima usa un fragment di Android invece di un elemento HTML, aggiungerlo nella nostra pagina è leggermente complicato.

Prima di cominciare, assicurati di aver importato sia CameraPreview e CameraPreviewRect.

Usando l'oggetto CameraPreviewRect, puoi specificare la posizione e la dimensione dell'anteprima della fotocamera. Per adesso, facciamogli riempire completamente lo schermo del dispositivo.

A questo punto, abbiamo tutto ciò di cui abbiamo bisogno per avviare l'anteprima della fotocamera. Perciò, chiama il metodo startCamera() della classe CameraPreview e passagli l'oggetto CameraPreviewRect. Ovviamente, devi anche specificare la fotocamera che vuoi usare. In questo tutorial, useremo soltanto la fotocamera posteriore.

L'anteprima della fotocamera sarà posizionata sotto alla nostra pagina HTML, e non sarà visibile a meno che rendiamo lo sfondo della nostra applicazione trasparente. Il modo più semplice per farlo è aggiungere una regola CSS all'interno del file src/app/app.scss.

8. Scattare fotografie

Durante la definizione del layout della nostra pagina, abbiamo già aggiunto un gestore del click per il bottone che l'utente premerà per scattare le foto. Cerchiamo ora di definire il gestore.

Scattare una fotografia con il wrapper CameraPreview di Ionic Native è semplice come chiamare il metodo takePicture() e specificando la risoluzione desiderata della fotografia. Per adesso, andiamo ad usare 320 x 320 come massima dimensione della nostra fotografia.

Vale la pena notare che specificando grandi risoluzioni può portare ad errori di memoria esaurita.

9. Applicare effetti d'immagine

Il wrapper CameraPreview ti permette di applicare facilmente diversi comuni effetti d'immagine, anche chiamato filtri d'immagine, alle tue fotografie in tempo reale. Abbiamo già aggiunto il gestore di click al bottone che l'utente premerà per applicare gli effetti delle immagini. Pertanto, quello che dobbiamo fare adesso è definirlo.

Per mantenere il nostro codice semplice, ogni volta che l'utente preme il bottone, scegliamo in maniera casuale un effetto da una lista di effetti e lo applichiamo. Puoi anche usare la funzione JavaScript Math.random() per scegliere un effetto casuale e, il metodo setColorEffect() della classe CameraPreview per applicarlo.

Puoi adesso eseguire l'applicazione e premere il FAB (ndr. bottone fluttuante) diverse volte per vedere i diversi effetti d'immagine che vengono applicati alla finestra di anteprima della fotocamera.

Camera preview with the mono effect

10. Spostare le fotografie alla memoria di archiviazione esterna

La nostra applicazione posizione tutte le fotografie fatte all'interno della sua cartella d'archivio che è una cartella con dati privati. Se preferisci salvare queste fotografie su un dispositivo d'archiviazione esterno, così per renderli disponibili per le applicazioni di galleria foto di terze parti, devi spostarli manualmente. Per farlo, puoi usare il wrapper File di Ionic Native.

Come sempre, importa il wrapper prima di usarlo. In più, dichiara cordova come una variabile esterna globale inizializzata. Offre costanti che ti permettono di fare un riferimento semplice a tutte le cartelle usate frequentemente nel file system di Android.

Dovremmo muovere le fotografie in una cartella d'archiviazione esterna non appena sono state scattate. Perciò, sottoscrivi al metodo setOnPictureTakenHandler() della classe CameraPreview. Il metodo ritorna una lista contenente i percorsi assoluti dell'immagine e della sua miniatura. Per adesso, andremo a spostare soltanto l'immagine.

Quindi, aggiungi il seguente codice verso la fine del metodo initializePreview():

All'interno del metodo moveFileToExternalStorage(), possiamo usare il metodo moveFile() della classe File per muovere realmente l'immagine. Il metodo moveFile() si aspetta una cartella sorgente e di destinazione e i nomi del file come suoi argomenti.

Per determinare il percorso della cartella d'archiviazione esterna della tua applicazione, usa la costante cordova.file.externalApplicationStorageDirectory. Allo stesso modo, per determinare il percorso della cartella privata d'archiviazione della tua applicazione, usa la costante cordova.file.applicationStorageDirectory.

Inoltre, per estrarre il nome del file dell'immagine dal suo percorso assoluto, puoi semplicemente usare i metodi split() e pop() di JavaScript. Ti suggerisco anche di mostrare un toast dopo che l'operazione di spostamento è stato completata.

La nostra applicazione fotografica è ora completata. Puoi vedere le sue immagini usando qualsiasi applicazione di galleria fotografica che hai sul tuo dispositivo.

Conclusione

In questo tutorial, hai imparato come usare Ionic 2 e i wrapper dei plugin disponibili in Ionic Native per creare un'applicazione ibrida che può scattare fotografie, applicare effetti d'immagine e salvarli su una cartella esterna. Anche se oggi ci siamo concentrati solamente sulla piattaforma Android, puoi essere sicuro che la nostra applicazione funzionerà, con piccoli cambiamenti, anche su dispositivi iOS.

Per saperne di più su Ionic 2, puoi fare riferimento alla sua estensiva documentazione. O guarda il nostro corso di Ionic 2 qui su Envato Tuts+!

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.