Share
Ce veți creaCa dezvoltator prudent, este posibil să fiți precaut să creați aplicații hibride care depind de API-urile native Android. Cu câțiva ani în urmă, am fost și eu, ceea ce cu Android are atât de multe versiuni specifice și dispozitive specifice quirks. Astăzi, cu toate acestea, putem avea încredere în cadrele de dezvoltare a aplicațiilor hibride pentru a gestiona în mod transparent cele mai multe dintre aceste ciudățenii. Ionic 2, care se bazează pe Apache Cordova, este un astfel de cadru.
Ionic 2 are împachetări pentru mai multe pluginuri populare Cordova care vă permit să utilizați cu ușurință resursele native ale Android, cum ar fi camerele, senzorii hardware și sistemul de fișiere. În acest tutorial, vă vom arăta cum să utilizați aceste impachetări alături de componentele Ionic 2 UI pentru a crea o aplicație simplă pentru camere.
Pentru a urmări, veți avea nevoie de:
Atât Ionic cât și Cordova sunt disponibile ca module NPM, astfel încât cel mai simplu mod de a le instala este de a utiliza NPM comanda. Iată cum puteți instala ambele la nivel global:
npm instalați -g cordova ionic
Odată ce instalarea este finalizată, introduceți următoarele pentru a vă asigura că interfața liniei de comandă Ionic sau CLI pe scurt este configurată corect.
informații ionice | grep "Versiunea"
Ieșirea comenzii de mai sus ar trebui să arate astfel:
Ionic CLI Versiune: 2.2.1 Ionic App Lib Versiune: 2.2.0 Nod Versiune: v6.7.0
Ionic CLI vă face foarte ușor pentru a crea noi proiecte Ionic 2 cu toate fișierele de configurare necesare și codul de boilerplate. De asemenea, oferă mai multe șabloane de pornire pentru a alege de la. Pentru moment, să creăm pur și simplu un proiect folosind gol starter șablon.
pornire ionică MyCameraApp martor --v2 --id com.tutsplus.mycameraapp
În acest moment, veți avea un nou director numit MyCameraApp. Pentru restul tutorialului, vom lucra în acest director.
cd MyCameraApp
Implicit, un proiect Ionic 2 nu este configurat să vizeze nicio platformă mobilă. Iată cum adăugați suport pentru Android:
platformă ionică adăugați android
De asemenea, trebuie să indicați manual adresa Ionic 2 în locul unde ați instalat SDK-ul Android. Dacă folosiți Mac sau Linux, utilizați export comanda pentru a face acest lucru.
export ANDROID_HOME = ~ / Android / Sdk /
Aplicația noastră pentru cameră are nevoie de acces la camera foto și la sistemul de fișiere al dispozitivului, ambele fiind resurse native. Dacă sunteți familiarizați cu Cordova, ați putea fi conștienți de faptul că aplicațiile hibride interacționează de obicei cu astfel de resurse prin intermediul pluginurilor. Deși puteți utiliza un plugin Cordova direct într-un proiect Ionic 2, este mult mai ușor să utilizați în schimb ambalajul său Ionic Native.
Pentru a accesa camera, vom folosi Cordova-plugin-aparat de fotografiat-previzualizare conecteaza. Ne permite să facem nu numai fotografii, ci și să le aplicăm mai multe filtre de imagine. Iată cum îl puteți adăuga la proiectul dvs.:
ionic plugin adăugați cordova-plugin-camera-preview
Desigur, trebuie să salvăm imaginile pe care le folosim pe suporturi externe de stocare, cum ar fi cardurile SD. Pentru a face acest lucru, vom folosi Cordova-plugin-fișier conecteaza.
ionic plugin adăugați cordova-plugin-file
În cele din urmă, pentru a sprijini dispozitive Android care rulează API nivel 23 sau mai mare, avem nevoie de cordova.plugins.diagnostic conecteaza.
ionic plugin adăugați cordova.plugins.diagnostic
Interfața de utilizator a aplicației noastre va fi compusă din următoarele componente:
Vom crea fereastra de previzualizare a camerei programat într-un pas mai târziu. Pentru moment, să creăm un aspect HTML care conține doar două butoane de acțiune plutitoare.
Deoarece aplicația noastră necompletată are deja o pagină, o vom folosi în loc să creați o pagină nouă. Pentru a modifica aspectul, deschideți src / pagini / home / home.html. Goliți conținutul și adăugați un nou
Pentru a crea un buton de acțiune plutitoare, puteți crea un buton obișnuit HTML și adăugați ion-fab să-i atribuiți. În plus, prin împachetarea eticheta în interiorul unui
Un buton de acțiune plutitoare are de obicei o pictogramă. Prin utilizarea funcției
În consecință, adăugați următoarele la fișierul de aspect:
După cum puteți vedea în codul de mai sus, am adăugat clic manipulatoare de evenimente pentru ambele butoane. Îi vom defini ulterior.
Pe dispozitive care rulează Android API nivel 23 sau mai mare, trebuie să solicitați în mod explicit utilizatorului permisiuni de acces la cameră și la sistemul de fișiere în timpul rulării. Pentru a face acest lucru în aplicația dvs. hibridă, puteți utiliza metodele disponibile în Diagnostic Ionic Native wrap.
Începeți prin deschidere src / pagini / home / home.ts și importul Diagnostic.
importă Diagnostic de la "ionic-nativ";
În interiorul constructorului Pagina principala , adăugați un apel la un nou checkPermissions () metodă. În plus, adăugați a ToastController obiect la clasă prin injecția de dependență. Îl vom folosi pentru a afișa toasterul Ionic 2, care este aproape identic cu snackbar-urile native ale Android.
După efectuarea modificărilor de mai sus, codul dvs. ar trebui să arate astfel:
constructor (public navCtrl: NavController, public toastCtrl: ToastController) this.checkPermissions (); checkPermissions () // Mai multe coduri sunt aici
În interiorul checkPermissions () utilizați metoda isCameraAuthorized () metodă a Diagnostic pentru a verifica dacă aplicația are deja permisiuni de accesare a camerei și a sistemului de fișiere. Deoarece metoda returnează a Promisiune obiect, trebuie să utilizați un apel invers pentru a gestiona rezultatul acestuia.
Dacă aplicația nu are permisiunile necesare, puteți utiliza funcția requestCameraAuthorization () pentru a le cere.
În cazul în care utilizatorul nu acordă permisiunile sau dacă aplicația noastră le are deja, putem să mergem și să inițializăm previzualizarea camerei înăuntru initializePreview (), o metodă pe care o vom crea în pasul următor. În caz contrar, hai să arătăm un toast care conține un mesaj de eroare folosind crea() și prezent() metode ale ToastController clasă.
În consecință, adăugați următorul cod în interiorul checkPermissions () metodă:
Diagnostic.isCameraAutorizare (), apoi ((autorizat) => if (autorizat) this.initializePreview (); altceva Diagnostic.requestCameraAuthorization () ) this.initializePreview (); altceva // Permisiunile nu sunt acordate // Prin urmare, creați și prezentați toastul acest.toastCtrl.create (message: "Nu se poate accesa camera", poziția: "bottom", duration: 5000 ();););
Iată ce arată dialogul de autorizare a camerelor pe un dispozitiv care rulează Android Marshmallow:
CameraPreview Ionic Native wrapper vă permite să afișați o previzualizare live a camerei în interiorul aplicației hibride. Cu toate acestea, deoarece previzualizarea utilizează un fragment Android în loc de un element HTML, adăugarea acestuia pe pagina noastră este puțin complicată.
Înainte de a începe, asigurați-vă că importați ambele CameraPreview și CameraPreviewRect.
import CameraPreview, CameraPreviewRect de la "ionic-native";
Folosind un CameraPreviewRect obiect, puteți specifica poziția și dimensiunea previzualizării camerei. Pentru moment, să facem să umple complet ecranul dispozitivului.
initializePreview () // Efectuati lățimea si înaltimea previzualii egalã // la lãțimea și înãlțimea ferestrei aplicației lăsați previewRect: CameraPreviewRect = x: 0, y: 0, lățimea: window.innerWidth, height: window. innerHeight; // Mai multe coduri aici
În acest moment, avem tot ce avem nevoie pentru a începe previzualizarea camerei. Prin urmare, sunați la startCamera () metodă a CameraPreview clasa și trece CameraPreviewRect obiectează la ea. De asemenea, trebuie, bineînțeles, să specificați camera pe care doriți să o utilizați. În acest tutorial, vom folosi numai camera din spate.
// Începeți previzualizarea CameraPreview.startCamera (previewRect, 'rear', false, false, true, 1);
Previzualizarea camerei va fi plasată sub pagina noastră HTML și nu va fi vizibilă decât dacă vom face transparența aplicației noastre. Cel mai simplu mod de a face acest lucru este să adăugați o regulă CSS în interiorul src / app / app.scss fişier.
ion-app, conținut de ioni background-color: transparent! important;
În timp ce definim aspectul paginii noastre, am adăugat deja o clic handler la butonul pe care utilizatorul îl va apăsa pentru a face fotografii. Să definim acum manipulatorul.
Luând o fotografie cu CameraPreview Ionic Native wrap este la fel de simplu ca apelarea fa poza() și specificând rezoluția dorită a imaginii. Pentru moment, să folosim 320 x 320 ca dimensiuni maxime ale imaginii noastre.
takePicture () CameraPreview.takePicture (maxWidth: 320, maxHeight: 320);
Este de remarcat faptul că specificarea rezoluțiilor mari poate duce la erori de memorie.
CameraPreview wrapper vă permite să aplicați cu ușurință mai multe efecte de imagine obișnuite, numite și filtre de imagine, în imagini în timp real. Am adăugat deja o clic handler la butonul pe care utilizatorul îl va apăsa pentru a aplica efectele imaginii. Prin urmare, tot ce trebuie să facem acum este definirea acesteia.
Pentru a ne păstra codul simplu, de fiecare dată când utilizatorul apasă butonul, să alegem un efect aleatoriu dintr-o serie de efecte și să îl aplicăm. Puteți utiliza JavaScript Math.random () funcția de a alege un efect aleator, și setColorEffect () metodă a CameraPreview clasa să o aplice.
changeEffect () // Crearea unei matrice cu 5 efecte lăsați efectele: any = ['none', 'negative', 'mono', 'aqua', 'sepia']; permite randomEffect: string = efecte [Math.floor (Math.random () * effects.length)]; CameraPreview.setColorEffect (randomEffect);
Puteți rula aplicația acum și atingeți de mai multe ori FAB pentru a vedea diferite efecte de imagine aplicate în fereastra de previzualizare a camerei.
Aplicația noastră plasează toate fotografiile din interiorul directorului de stocare al aplicației, care este un director de date privat. Dacă preferați să stocați aceste imagini pe medii de stocare externe, făcându-le astfel disponibile pentru aplicațiile de galerii foto terțe, trebuie să le mutați manual. Pentru a face acest lucru, puteți utiliza funcția Fişier Ionic Native wrap.
Ca întotdeauna, importați ambalajul înainte de al utiliza. În plus, declarați Cordova ca variabilă globală inițializată extern. Acesta oferă constante care vă permit să vă referiți cu ușurință la toate directoarele frecvent utilizate ale sistemului de fișiere Android.
import Fișier de la "ionic-native"; declare var cordova: orice; // variabila globală pentru căi
Ar trebui să mutăm fotografiile în directorul extern de stocare de îndată ce sunt luate. Prin urmare, abonați la setOnPictureTakenHandler () metodă a CameraPreview clasă. Metoda returnează o matrice care conține căile absolute ale imaginii și miniatură ei. Pentru moment, vom muta doar imaginea.
În consecință, adăugați următorul cod spre sfârșitul secțiunii initializePreview () metodă:
CameraPreview.setOnPictureTakenHandler (). Subscribe ((rezultat) => this.moveFileToExternalStorage (rezultat [0]); // Mutare doar imagine);
În interiorul moveFileToExternalStorage () metoda, putem folosi MoveFile () metodă a Fişier clasa pentru a muta imaginea. MoveFile () metoda se așteaptă ca directoarele sursă și destinație și numele de fișiere ca argumente.
Pentru a determina calea directorului de stocare extern al aplicației, utilizați cordova.file.externalApplicationStorageDirectory constant. În mod similar, pentru a determina calea directorului de stocare privat al aplicației, utilizați cordova.file.applicationStorageDirectory constant.
În plus, pentru a extrage numele de fișier al imaginii din calea sa absolută, puteți pur și simplu să utilizați JavaScript Despică() și pop () metode. Vă sugerez să afișați și un toast după terminarea operației de mutare.
Accentsconagua
moveFileToExternalStorage (nume_fișier: șir) // Determinați căile care permit externStoragePath: string = cordova.file.externalApplicationStorageDirectory; lasati currentPath: string = cordova.file.applicationStorageDirectory + "fisiere /"; // Extrage numele fișierului fileName = fileName.split ("/"). Pop (); // Mutați fișierul File.moveFile (currentPath, fileName, externalStoragePath, fileName) .then (_ => this.toastCtrl.create (message: "Salvată o fotografie", poziția: "bottom", duration: 2000) .prezent(); ); Aplicația noastră pentru camere este acum completă. Puteți să vizualizați fotografiile utilizând orice aplicație din galeria foto pe care o aveți pe dispozitiv.
În acest tutorial, ați învățat cum să utilizați Ionic 2 și plugin-urile disponibile în Ionic Native pentru a crea o aplicație hibridă care poate face fotografii, aplica efecte de imagine și le poate stoca pe medii de stocare externe. Deși ne-am concentrat astăzi numai pe platforma Android, puteți fi siguri că aplicația noastră va funcționa, cu modificări minime, și pe dispozitivele iOS.
Pentru a afla mai multe despre Ionic 2, vă puteți referi la documentația sa extinsă. Verificăm cursul nostru Ionic 2 de aici pe Envato Tuts+!
