Share
Hva du skal skapeSom en forsiktig utvikler kan du være forsiktig med å lage hybridapplikasjoner som er avhengige av Android's native APIer. For noen år siden var jeg også, hva med Android med så mange versjonsspesifikke og enhetsspesifikke quirks. I dag kan vi imidlertid stole på at bruksområder for hybridapplikasjonsutvikling for å håndtere de fleste av dem krenker transparent. Ionic 2, som bygger på Apache Cordova, er et slikt rammeverk.
Ionic 2 har wrappers for flere populære Cordova plugins som lar deg enkelt utnytte Androids innfødte ressurser, for eksempel kameraer, maskinvaresensorer og filsystemet. I denne opplæringen vil jeg vise deg hvordan du bruker de pakkene sammen med Ionic 2 UI-komponenter for å lage en enkel kameraprogram.
Å følge med, du trenger:
Både Ionic og Cordova er tilgjengelig som NPM moduler, så den enkleste måten å installere dem er å bruke NPM kommando. Slik kan du installere dem begge globalt:
npm installere -g cordova ionic
Når installasjonen er fullført, skriv inn følgende for å forsikre deg om at det joniske kommandolinjegrensesnittet, eller CLI for kort, er konfigurert riktig.
ionisk info | grep "Versjon"
Utgangen av kommandoen ovenfor burde se slik ut:
Ionisk CLI Versjon: 2.2.1 Ionisk App Lib Versjon: 2.2.0 Knutep. Versjon: v6.7.0
Ionic's CLI gjør det veldig enkelt for deg å lage nye Ionic 2-prosjekter med alle nødvendige konfigurasjonsfiler og boilerplate-kode. Det tilbyr også flere startmaler å velge mellom. For nå, la oss bare lage et prosjekt ved hjelp av blank startmaler.
ionisk start MyCameraApp blank --v2 --id com.tutsplus.mycameraapp
På dette tidspunktet vil du ha en ny katalog kalt MyCameraApp. For resten av denne opplæringen jobber vi i denne katalogen.
cd MyCameraApp
Som standard er et Ionic 2-prosjekt ikke konfigurert til å målrette mot en hvilken som helst mobilplattform. Slik legger du til støtte for Android:
ionisk plattform legge android
Du må også manuelt peke Ionic 2 til stedet der du installerte Android SDK. Hvis du bruker Mac eller Linux, bruker du eksport beordre å gjøre det.
eksporter ANDROID_HOME = ~ / Android / Sdk /
Vår kamera app trenger tilgang til enhetens kamera og filsystem, som begge er innfødte ressurser. Hvis du er kjent med Cordova, kan du være klar over at hybridprogrammer vanligvis samhandler med slike ressurser gjennom plugins. Selv om du kan bruke en Cordova-plugin direkte i et ionisk 2-prosjekt, er det mye lettere å bruke sin ioniske Native wrapper istedenfor.
For å få tilgang til kameraet bruker vi Cordova-plugin-kamera-preview plugg inn. Det tillater oss å ikke bare ta bilder, men også bruke flere bildefiltre til dem. Slik kan du legge til prosjektet ditt:
ionisk plugin legg til Cordova-plugin-kamera forhåndsvisning
Vi må selvfølgelig lagre bildene vi tar på eksterne lagringsmedier, for eksempel SD-kort. For å gjøre det, bruker vi Cordova-plugin-fil plugg inn.
ionisk plugin legg til cordova-plugin-filen
Til slutt, for å kunne støtte Android-enheter som kjører API-nivå 23 eller høyere, trenger vi cordova.plugins.diagnostic plugg inn.
ionisk plugin legg til cordova.plugins.diagnostic
Appens brukergrensesnitt består av følgende komponenter:
Vi vil skape forhåndsvisningsvinduet for kameraet programmatisk i et senere trinn. For nå, la oss lage et HTML-layout som inneholder bare to flytende handlingsknapper.
Fordi vår tomme app allerede har en side, bruker vi den i stedet for å lage en ny. For å endre utformingen, åpne src / sider / home / home.html. Tøm innholdet og legg til nytt
Hvis du vil opprette en flytende handlingsknapp, kan du opprette en vanlig HTML-knapp og legge til ion-Fab tilskrive den. I tillegg, ved å pakke inn tag inne en
En flytende handlingsknapp har vanligvis et ikon. Ved å bruke
Følg deretter følgende til layoutfilen din:
Som du kan se i koden ovenfor, har vi lagt til klikk hendelseshåndterer til begge knappene. Vi definerer dem senere.
På enheter som kjører Android API nivå 23 eller høyere, må du spørre brukeren om tillatelser for å få tilgang til kameraet og filsystemet i løpet av kjøretiden. For å gjøre det i hybridapp, kan du bruke metoder som er tilgjengelige i diagnose~~POS=TRUNC Jonisk Native wrapper.
Begynn med å åpne src / sider / home / home.ts og import diagnose~~POS=TRUNC.
importer Diagnostic fra 'ionic-native';
Inne i konstruktøren til Homepage klasse, legg til et anrop til en ny checkPermissions () metode. I tillegg legger du til en ToastController Motta klassen ved hjelp av avhengighetsinjeksjon. Vi bruker den til å vise Ionic 2 toasts, som nesten er identiske med morsomme Android-snackbars.
Etter at du har gjort de ovennevnte endringene, må koden din se slik ut:
konstruktør (offentlig navCtrl: NavController, offentlig toastCtrl: ToastController) this.checkPermissions (); sjekk Tillatelser () // Mer kode går her
Inne i checkPermissions () metode, bruk isCameraAuthorized () metode av diagnose~~POS=TRUNC klassen for å sjekke om appen allerede har tillatelser for å få tilgang til både kameraet og filsystemet. Fordi metoden returnerer a Love objekt, du må bruke tilbakering til å håndtere resultatet.
Hvis appen ikke har de nødvendige tillatelsene, kan du bruke requestCameraAuthorization () metode for å be om dem.
Hvis brukeren gir tillatelsene, eller hvis vår app allerede har dem, kan vi fortsette og initialisere forhåndsvisning av kameraet inni initializePreview (), en metode vi skal skape i neste trinn. Ellers, la oss bare vise en skål som inneholder en feilmelding ved hjelp av skape() og nåværende() metoder for ToastController klasse.
Følgelig legger du til følgende kode inne i checkPermissions () metode:
Diagnostic.isCameraAuthorized (). Then ((autorisert) => hvis (autorisert) this.initializePreview (); ellers Diagnostic.requestCameraAuthorization (). Deretter ((status) => if (status == Diagnostic.permissionStatus.GRANTED ) this.initializePreview (); else // Tillatelser ikke gitt // Derfor lag og present toast this.toastCtrl.create (melding: "Kan ikke få tilgang til kamera", posisjon: "bunn", varighet: 5000). ();););
Slik ser kameraautentiseringsdialogen ut på en enhet som kjører Android Marshmallow:
De CameraPreview Ionisk Native wrapper lar deg vise en levende kamera forhåndsvisning i hybrid app. Men fordi forhåndsvisningen bruker et Android-fragment i stedet for et HTML-element, er det litt komplisert å legge det til vår side.
Før du begynner, sørg for at du importerer begge deler CameraPreview og CameraPreviewRect.
importer CameraPreview, CameraPreviewRect fra 'ionic-native';
Bruker en CameraPreviewRect objekt, kan du angi posisjon og størrelse på forhåndsvisning av kameraet. For nå, la oss få det til å fylle enhetens skjerm helt.
initiererPreview () // Gjør bredden og høyden av forhåndsvisningen lik // til bredden og høyden til appens vindu, la forhåndsviseRekt: CameraPreviewRect = x: 0, y: 0, width: window.innerWidth, height: window. indreHet; // Mer kode går her
På dette tidspunktet har vi alt vi trenger for å starte forhåndsvisning av kameraet. Derfor ring startCamera () metode av CameraPreview klasse og passere CameraPreviewRect protestere mot det. Du må selvsagt spesifisere kameraet du vil bruke. I denne opplæringen bruker vi bare det bakre kameraet.
// Start forhåndsvisning CameraPreview.startCamera (forhåndsvisningRect, 'rear', false, false, true, 1);
Forhåndsvisning av kameraet blir plassert under vår HTML-side, og vil ikke være synlig, med mindre vi gjør bakgrunnen til vår app gjennomsiktig. Den enkleste måten å gjøre det på er å legge til en CSS-regel inni src / app / app.scss fil.
ion-app, ion-innhold bakgrunnsfarge: gjennomsiktig! viktig;
Mens vi har definert utformingen av siden vår, har vi allerede lagt til en klikk Handler til knappen som brukeren vil trykke for å ta bilder. La oss nå definere handleren.
Tar et bilde med CameraPreview Jonisk Native wrapper er like enkelt som å kalle ta bilde() metode og spesifisere ønsket oppløsning av bildet. For nå, la oss bruke 320 x 320 som maksimale dimensjoner av bildet vårt.
takePicture () CameraPreview.takePicture (maxWidth: 320, maxHeight: 320);
Det er verdt å merke seg at spesifisering av store oppløsninger kan føre til feil i minnet.
De CameraPreview wrapper gjør at du enkelt kan bruke flere vanlige bildeeffekter, også kalt bildefiltre, til bildene dine i sanntid. Vi har allerede lagt til en klikk Handler til knappen som brukeren vil trykke for å bruke bildeeffekter. Derfor er alt vi trenger å gjøre nå, definer det.
For å holde koden vår enkel, hver gang brukeren trykker på knappen, la oss velge en tilfeldig effekt fra en rekke effekter og bruke den. Du kan bruke JavaScript Math.random () funksjon for å velge en tilfeldig effekt, og setColorEffect () metode av CameraPreview klasse for å bruke den.
changeEffect () // Lag en matrise med 5 effekter la effekter: any = ['none', 'negative', 'mono', 'aqua', 'sepia']; la randomEffect: string = effects [Math.floor (Math.random () * effects.length)]; CameraPreview.setColorEffect (randomEffect);
Du kan kjøre appen nå og trykke på FAB flere ganger for å se at ulike bildeeffekter blir brukt på forhåndsvisningsvinduet for kameraet.
Vår app plasserer alle bildene det tar i sin applikasjonslagringskatalog, som er en privat datakatalog. Hvis du foretrekker å lagre bildene på eksternt lagringsmedium, og dermed gjøre dem tilgjengelige for tredjeparts fotogalleri-apper, må du manuelt flytte dem. For å gjøre det kan du bruke Fil Jonisk Native wrapper.
Som alltid, importer innpakningen før du bruker den. I tillegg erklærer cordova som en eksternt initialisert global variabel. Den tilbyr konstanter som lar deg enkelt referere til alle de ofte brukte katalogene i Android-filsystemet.
importer File fra 'ionic-native'; erklære var cordova: noen; // global variabel for stier
Vi bør flytte bildene til den eksterne lagringsmappen så snart de blir tatt. Derfor abonnere på setOnPictureTakenHandler () metode av CameraPreview klasse. Metoden returnerer en matrise som inneholder de absolutte stiene til bildet og dens miniatyrbilde. For nå skal vi bare flytte bildet.
Følgelig legger du til følgende kode mot slutten av initializePreview () metode:
CameraPreview.setOnPictureTakenHandler (). Abonner ((resultat) => this.moveFileToExternalStorage (resultat [0]); // Flytt bilde bare);
Inne i moveFileToExternalStorage () metode, kan vi bruke moveFile () metode av Fil klasse for å faktisk flytte bildet. De moveFile () Metoden forventer at kilden og destinasjonsmapper og filnavn som sine argumenter.
For å bestemme banen til programmets eksterne lagringskatalog, bruk cordova.file.externalApplicationStorageDirectory konstant. På samme måte, for å bestemme banen til søknadens private lagringskatalog, bruk cordova.file.applicationStorageDirectory konstant.
I tillegg, for å trekke ut filnavnet på bildet fra den absolutte banen, kan du bare bruke JavaScript dele() og pop () metoder. Jeg foreslår at du også viser en skål etter at bevegelsesoperasjonen er fullført.
Accentsconagua
moveFileToExternalStorage (filnavn: streng) // Bestem stier la externalStoragePath: string = cordova.file.externalApplicationStorageDirectory; la currentPath: string = cordova.file.applicationStorageDirectory + "files /"; // Utdrag filnavn filnavn = filnavn.split ("/"). Pop (); // Flytt filen File.moveFile (currentPath, fileName, externalStoragePath, filnavn) .then (_ => this.toastCtrl.create (melding: "Lagret ett bilde", posisjon: "bunn", varighet: 2000) .nåværende(); ); Vår kamera app er nå fullført. Du kan se bildene sine ved hjelp av et bildegalleri-app du har på enheten din.
I denne opplæringen lærte du hvordan du bruker Ionic 2 og plugin wrappers tilgjengelig i ionisk Native for å lage en hybrid app som kan ta bilder, bruke bildeeffekter til dem og lagre dem på eksterne lagringsmedier. Selv om vi bare fokuserte på Android-plattformen i dag, kan du være sikker på at vår app vil fungere, med minimal endring, også på iOS-enheter.
For å lære mer om ionisk 2, kan du se på den omfattende dokumentasjonen. Vår sjekk ut vår Ionic 2-kurs her på Envato Tuts+!
