Share
Cosa starai creandoCome sviluppatore prudente, potresti essere cauto nel creare applicazioni ibride che dipendono dalle API native di Android. Qualche anno fa, lo ero anche io, con Android che aveva così tante peculiarità specifiche della versione e specifiche del dispositivo. Oggi, tuttavia, possiamo affidarci a framework di sviluppo di applicazioni ibride per gestire in modo trasparente la maggior parte di questi quirk. Ionic 2, che si basa su Apache Cordova, è uno di questi framework.
Ionic 2 include wrapper per numerosi plug-in Cordova popolari che consentono di utilizzare facilmente le risorse native di Android, come fotocamere, sensori hardware e il file system. In questo tutorial, ti mostrerò come utilizzare questi wrapper accanto ai componenti dell'interfaccia utente Ionic 2 per creare una semplice app per fotocamera.
Per seguire, avrai bisogno di:
Sia Ionic che Cordova sono disponibili come moduli NPM, quindi il modo più semplice per installarli è utilizzare npm comando. Ecco come puoi installarli entrambi a livello globale:
npm install -g cordova ionic
Una volta completata l'installazione, digitare quanto segue per assicurarsi che l'interfaccia della riga di comando di Ionic, o CLI in breve, sia configurata correttamente.
informazioni ioniche | grep "Versione"
L'output del comando sopra dovrebbe apparire così:
Versione Ionic CLI: 2.2.1 Versione ION App Lib: 2.2.0 Versione nodo: v6.7.0
La CLI di Ionic rende molto semplice la creazione di nuovi progetti Ionic 2 con tutti i file di configurazione e il codice boiler necessari. Offre anche diversi modelli di partenza tra cui scegliere. Per ora, creiamo semplicemente un progetto usando il vuoto modello di partenza.
ionic start MyCameraApp blank --v2 --id com.tutsplus.mycameraapp
A questo punto, avrai una nuova directory chiamata MyCameraApp. Per il resto di questo tutorial, lavoreremo all'interno di questa directory.
cd MyCameraApp
Per impostazione predefinita, un progetto Ionic 2 non è configurato per il targeting di alcuna piattaforma mobile. Ecco come aggiungi il supporto per Android:
piattaforma ionica aggiungere Android
È inoltre necessario indicare manualmente Ionic 2 nella posizione in cui è stato installato Android SDK. Se stai usando Mac o Linux, usa il esportare comando di farlo.
export ANDROID_HOME = ~ / Android / Sdk /
La nostra app per fotocamera richiede l'accesso alla fotocamera e al file system del dispositivo, che sono entrambe risorse native. Se hai familiarità con Cordova, potresti essere consapevole che le applicazioni ibride di solito interagiscono con tali risorse tramite i plugin. Sebbene sia possibile utilizzare un plug-in Cordova direttamente in un progetto Ionic 2, è molto più semplice utilizzare il proprio wrapper Ionic Native.
Per accedere alla videocamera, useremo il Cordova-plugin-fotocamera-anteprima collegare. Ci consente non solo di scattare foto, ma anche di applicare diversi filtri di immagine. Ecco come puoi aggiungerlo al tuo progetto:
plug-in ionico aggiungi cordova-plugin-camera-preview
Ovviamente, dovremo salvare le immagini che utilizziamo su supporti di memorizzazione esterni, come le schede SD. Per farlo, useremo il Cordova-plugin file collegare.
plug-in ionico aggiungi file-plug-in cordova
Infine, per supportare i dispositivi Android con livello API 23 o superiore, avremo bisogno di cordova.plugins.diagnostic collegare.
plugin ionico aggiungi cordova.plugins.diagnostic
L'interfaccia utente della nostra app sarà composta dai seguenti componenti:
Creeremo la finestra di anteprima della fotocamera a livello di programmazione in un passaggio successivo. Per ora, creiamo un layout HTML contenente solo due pulsanti di azione mobili.
Poiché la nostra app vuota ha già una pagina, la useremo invece di crearne una nuova. Per modificare il suo layout, apri src / pages / home / home.html. Svuota il suo contenuto e aggiungi un nuovo
Per creare un pulsante di azione mobile, è possibile creare un pulsante HTML ordinario e aggiungere il ionico-fab attributo ad esso. Inoltre, avvolgendo il tag dentro un
Un pulsante di azione mobile di solito ha un'icona. Usando il
Di conseguenza, aggiungi quanto segue al tuo file di layout:
Come puoi vedere nel codice sopra, abbiamo aggiunto clic gestori di eventi per entrambi i pulsanti. Li definiremo più tardi.
Sui dispositivi con livello API Android 23 o versione successiva, è necessario chiedere esplicitamente all'utente le autorizzazioni per accedere alla telecamera e al file system durante il runtime. Per farlo nella tua app ibrida, puoi utilizzare i metodi disponibili in Diagnostico Involucro ionico nativo.
Inizia aprendo src / pagine / home / home.ts e importazione Diagnostico.
importare Diagnostic da 'ionic-native';
All'interno del costruttore del HomePage classe, aggiungi una chiamata a una nuova checkPermissions () metodo. Inoltre, aggiungere un ToastController oggetto alla classe usando l'iniezione di dipendenza. Lo useremo per visualizzare toast Ionic 2, che sono quasi identici agli snackbar nativi di Android.
Dopo aver apportato le modifiche precedenti, il tuo codice dovrebbe apparire così:
costruttore (public navCtrl: NavController, public toastCtrl: ToastController) this.checkPermissions (); checkPermissions () // Più codice va qui
Dentro il checkPermissions () metodo, usa il isCameraAuthorized () metodo del Diagnostico classe per verificare se l'app ha già le autorizzazioni per accedere sia alla telecamera che al file system. Perché il metodo restituisce a Promettere oggetto, è necessario utilizzare un callback per gestire il suo risultato.
Se l'app non ha le autorizzazioni necessarie, puoi utilizzare il requestCameraAuthorization () metodo per chiederli.
Se l'utente concede le autorizzazioni o se la nostra app le ha già, possiamo andare avanti e inizializzare l'anteprima della fotocamera all'interno initializePreview (), un metodo che creeremo nel passaggio successivo. Altrimenti, mostriamo semplicemente un brindisi contenente un messaggio di errore usando il creare() e presente() metodi del ToastController classe.
Di conseguenza, aggiungi il seguente codice all'interno di checkPermissions () metodo:
Diagnostic.isCameraAuthorized (). Then ((authorized) => if (autorizzato) this.initializePreview (); else Diagnostic.requestCameraAuthorization (). Then ((status) => if (status == Diagnostic.permissionStatus.GRANTED ) this.initializePreview (); else // Autorizzazioni non concesse // Pertanto, creare e presentare bruscamente this.toastCtrl.create (message: "Impossibile accedere alla telecamera", posizione: "bottom", durata: 5000) .present ();););
Ecco come appare la finestra di autorizzazione della telecamera su un dispositivo con Android Marshmallow:
Il CameraPreview Il wrapper Ionic Native ti consente di visualizzare un'anteprima live della videocamera all'interno della tua app ibrida. Tuttavia, poiché l'anteprima utilizza un frammento Android anziché un elemento HTML, aggiungerlo alla nostra pagina è leggermente complicato.
Prima di iniziare, assicurati di importarli entrambi CameraPreview e CameraPreviewRect.
import CameraPreview, CameraPreviewRect da 'ionic-native';
Usare un CameraPreviewRect oggetto, è possibile specificare la posizione e le dimensioni dell'anteprima della telecamera. Per ora, facciamo in modo che riempia completamente lo schermo del dispositivo.
initializePreview () // Rende la larghezza e l'altezza dell'anteprima // alla larghezza e all'altezza della finestra dell'app lascia previewRect: CameraPreviewRect = x: 0, y: 0, width: window.innerWidth, height: window. innerHeight; // Più codice va qui
A questo punto, abbiamo tutto ciò che serve per avviare l'anteprima della fotocamera. Pertanto, chiama il startCamera () metodo del CameraPreview classe e passare il CameraPreviewRect obiettare ad esso. Devi anche, ovviamente, specificare la videocamera che desideri utilizzare. In questo tutorial, useremo solo la fotocamera posteriore.
// Avvia l'anteprima CameraPreview.startCamera (previewRect, 'rear', false, false, true, 1);
L'anteprima della fotocamera verrà posizionata sotto la nostra pagina HTML e non sarà visibile a meno che non rendiamo trasparente lo sfondo della nostra app. Il modo più semplice per farlo è aggiungere una regola CSS all'interno di src / app / app.scss file.
ion-app, content-ion background-color: transparent! important;
Durante la definizione del layout della nostra pagina, abbiamo già aggiunto un clic gestore al pulsante che l'utente preme per scattare le foto. Cerchiamo ora di definire il gestore.
Scattare una foto con il CameraPreview Il wrapper Ionic Native è semplice come chiamare il fare una foto() metodo e specificando la risoluzione desiderata dell'immagine. Per ora, usiamolo 320 x 320 come le dimensioni massime della nostra immagine.
takePicture () CameraPreview.takePicture (maxWidth: 320, maxHeight: 320);
Vale la pena notare che la specifica di risoluzioni elevate può portare a errori di memoria insufficiente.
Il CameraPreview wrapper ti consente di applicare facilmente diversi effetti di immagine comuni, detti anche filtri di immagine, alle tue immagini in tempo reale. Abbiamo già aggiunto un clic gestore al pulsante che l'utente preme per applicare gli effetti dell'immagine. Pertanto, tutto ciò che dobbiamo fare ora è definirlo.
Per mantenere il nostro codice semplice, ogni volta che l'utente preme il pulsante, scegliamo un effetto casuale da una serie di effetti e applichiamo. Puoi usare il JavaScript Math.random () funzione per scegliere un effetto casuale, e il setColorEffect () metodo del CameraPreview classe per applicarlo.
changeEffect () // Crea un array con 5 effetti let effects: any = ['none', 'negative', 'mono', 'aqua', 'sepia']; let randomEffect: string = effects [Math.floor (Math.random () * effects.length)]; CameraPreview.setColorEffect (randomEffect);
È possibile eseguire l'app ora e toccare il FAB più volte per vedere i vari effetti di immagine applicati alla finestra di anteprima della fotocamera.
La nostra app posiziona tutte le immagini necessarie nella sua directory di archiviazione delle applicazioni, che è una directory di dati privata. Se si preferisce archiviare tali immagini su un supporto di memorizzazione esterno, rendendole così disponibili per le app di gallerie fotografiche di terze parti, è necessario spostarle manualmente. Per fare ciò, puoi usare il File Involucro ionico nativo.
Come sempre, importa il wrapper prima di usarlo. Inoltre, dichiarare Cordova come variabile globale inizializzata esternamente. Offre costanti che consentono di fare facilmente riferimento a tutte le directory utilizzate di frequente del file system Android.
importare File da 'ionic-native'; dichiara var cordova: any; // variabile globale per i percorsi
Dovremmo spostare le immagini nella directory di archiviazione esterna non appena vengono scattate. Pertanto, iscriviti al setOnPictureTakenHandler () metodo del CameraPreview classe. Il metodo restituisce una matrice contenente i percorsi assoluti dell'immagine e la sua miniatura. Per ora, sposteremo solo l'immagine.
Di conseguenza, aggiungere il seguente codice verso la fine del initializePreview () metodo:
CameraPreview.setOnPictureTakenHandler (). Subscribe ((result) => this.moveFileToExternalStorage (result [0]); // Move picture only);
Dentro il moveFileToExternalStorage () metodo, possiamo usare il MoveFile () metodo del File classe per spostare effettivamente l'immagine. Il MoveFile () il metodo si aspetta directory e nomi di file di origine e di destinazione come argomenti.
Per determinare il percorso della directory di archiviazione esterna dell'applicazione, utilizzare cordova.file.externalApplicationStorageDirectory costante. Allo stesso modo, per determinare il percorso della directory di archiviazione privata dell'applicazione, utilizzare cordova.file.applicationStorageDirectory costante.
Inoltre, per estrarre il nome file dell'immagine dal suo percorso assoluto, puoi semplicemente utilizzare JavaScript Diviso() e pop() metodi. Ti suggerisco di visualizzare un brindisi dopo che l'operazione di spostamento è stata completata.
Accentsconagua
moveFileToExternalStorage (fileName: string) // Determina i percorsi lascia externalStoragePath: string = cordova.file.externalApplicationStorageDirectory; let currentPath: string = cordova.file.applicationStorageDirectory + "files /"; // Estrai nomefile fileName = fileName.split ("/"). Pop (); // Sposta il file File.moveFile (currentPath, fileName, externalStoragePath, fileName) .then (_ => this.toastCtrl.create (message: "Saved one photo", position: "bottom", duration: 2000) .presente(); ); La nostra app fotocamera è ora completa. Puoi visualizzarne le foto utilizzando qualsiasi app di galleria fotografica presente sul tuo dispositivo.
In questo tutorial, hai imparato come utilizzare Ionic 2 e i wrapper di plugin disponibili in Ionic Native per creare un'app ibrida in grado di scattare foto, applicare effetti immagine a loro e archiviarli su supporti di archiviazione esterni. Sebbene oggi ci concentriamo solo sulla piattaforma Android, puoi essere certo che la nostra app funzionerà, con modifiche minime, anche sui dispositivi iOS.
Per saperne di più su Ionic 2, puoi fare riferimento alla sua ampia documentazione. Il nostro check-out del nostro corso Ionic 2 qui su Envato Tuts+!
