Vision i din React Native App med Expo

I en verden, hvor mobilapplikationer konstant stræber efter at tilbyde mere intuitive og kraftfulde oplevelser, er integrationen af kunstig intelligens og maskinlæring blevet en afgørende faktor. Forestil dig en app, der ikke blot viser billeder, men forstår dem – en app, der kan identificere objekter, læse tekst, genkende ansigter eller endda opdage landemærker. Dette er ikke længere science fiction, takket være værktøjer som Google Cloud Vision API. Denne guide vil føre dig gennem processen med at integrere denne kraftfulde API i din React Native-applikation, ved hjælp af det brugervenlige Expo-framework. Vi vil udforske, hvordan du sætter dit projekt op fra bunden, konfigurerer de nødvendige tjenester fra Google Firebase og Google Cloud Platform, og endelig bygger applikationslogikken, der bringer disse avancerede billedanalysefunktioner til live. Gør dig klar til at tilføje et nyt niveau af intelligens til din mobile app.

Hvad er Google Cloud Vision API?

Google Cloud Vision API er et avanceret maskinlæringsværktøj, der giver udviklere mulighed for at forstå indholdet af billeder. Ved at udnytte Googles omfattende viden inden for billedanalyse kan denne API klassificere detaljer fra et indtastet billede i tusindvis af forskellige kategorier ved hjælp af prætrænede API-modeller. Det betyder, at du ikke behøver at træne dine egne modeller fra bunden; Google har allerede gjort det tunge løft for dig. API'en tilbyder forskellige funktioner, herunder:

• Etiketdetektion (Label Detection): Identificerer generelle objekter, steder og handlinger i et billede.
• Tekstdetektion (Text Detection): Genkender og udtrækker tekst fra billeder, herunder håndskrift og trykt tekst (OCR).
• Ansigtsdetektion (Face Detection): Lokaliserer ansigter i billeder og kan give information om ansigtsudtryk.
• Landemærkdetektion (Landmark Detection): Identificerer populære naturlige og menneskeskabte landemærker.
• Logo-detektion (Logo Detection): Opdager populære produktlogoer.
• Sikker søgning (Safe Search Detection): Bestemmer sandsynligheden for, at et billede indeholder upassende indhold (voksen, voldelig, medicinsk osv.).
• Billedegenskaber (Image Properties): Analyserer farvepaletten og billedets generelle æstetik.

Disse kapaciteter gør Vision API til et utroligt alsidigt værktøj for en bred vifte af applikationer, fra sociale medier-apps, der automatisk tagger billeder, til sikkerhedsapps, der screener indhold, eller endda detailapps, der hjælper med at identificere produkter. Hele magien sker via simple HTTP-anmodninger, hvilket gør det nemt at integrere i næsten enhver udviklingsstak, herunder React Native.

Hvorfor React Native med Expo?

Valget af React Native, kombineret med Expo, giver en række fordele, når du skal bygge mobilapplikationer, især når du integrerer tredjeparts-API'er som Google Cloud Vision. React Native giver dig mulighed for at skrive kode én gang og implementere den på både iOS- og Android-platforme, hvilket sparer betydelig tid og ressourcer. Den bruger JavaScript, et sprog mange webudviklere allerede er fortrolige med, hvilket mindsker indlæringskurven for at komme i gang med mobiludvikling.

Expo bygger videre på React Native ved at levere et sæt værktøjer og tjenester, der forenkler hele udviklingsprocessen. Expo abstraherer mange af de komplekse native moduler og byggekonfigurationer, som ofte kan være frustrerende i ren React Native-udvikling. Med Expo kan du hurtigt prototype, udvikle og udgive din app uden at skulle håndtere Xcode eller Android Studio direkte. Dette er især fordelagtigt for udviklere, der er nye inden for mobiludvikling, eller for projekter, hvor hurtig iteration er afgørende. Expo inkluderer indbyggede API'er til kamera, fillagring, tilladelser og mange andre enhedsfunktioner, hvilket gør det nemt at interagere med hardwaren og systemtjenesterne på din telefon. Dets CLI (Command Line Interface) og Expo Go-applikation muliggør realtidsudvikling og testning direkte på din enhed ved blot at scanne en QR-kode, hvilket strømliner udviklingsworkflowet markant. Samlet set giver kombinationen af React Native og Expo en effektiv, hurtig og udviklervenlig platform til at bygge moderne, intelligente mobilapps.

Opsætning af dit React Native-projekt med Expo

Før vi kan begynde at integrere Google Cloud Vision, skal vi have et fungerende React Native-projekt klar. Expo gør denne proces utrolig ligetil. Hvis du ikke allerede har Expo CLI installeret globalt på dit system, skal du starte der:

npm install -g expo-cli

Denne kommando installerer Expo's kommandolinjegrænseflade, som er dit primære værktøj til at oprette og administrere Expo-projekter. Når installationen er fuldført, kan du initialisere et nyt React Native-projekt:

expo-cli init google-vision-rn-demo

Du vil blive bedt om at vælge en skabelon. Vælg 'blank' skabelonen, da vi kun har brug for en enkelt skærm til demonstrationen. Derefter bliver du bedt om at navngive dit projekt; indtast et navn og tryk Enter. Expo CLI vil derefter begynde at installere de nødvendige afhængigheder for dit projekt. Dette kan tage et par minutter.

Når projektet er oprettet, naviger ind i projektmappen:

cd google-vision-rn-demo

Nu er dit grundlæggende React Native-projekt sat op og klar til yderligere konfiguration. Du kan starte appen med npm start eller expo start for at se den i aktion i din browser eller på din telefon via Expo Go-appen.

Opsætning af Firebase for Billedlagring

For at håndtere billedoverførsel og -lagring, før billederne sendes til Google Cloud Vision API, vil vi bruge Firebase. Firebase er Googles mobil- og webudviklingsplatform, der tilbyder en række bagendtjenester, herunder en realtidsdatabase og fillagring (Firebase Storage). Dette sparer os for at skulle skrive en brugerdefineret backend og lader os fokusere på kernefunktionaliteten.

Opret et Firebase-projekt

1. Besøg Firebase og log ind med din Google-konto.
2. Klik på 'Tilføj projekt' (eller 'Go to console' og derefter 'Add project').
3. Giv dit projekt et navn (f.eks. 'GoogleVisionRNDemo') og klik 'Fortsæt'.
4. Følg trinene for at oprette projektet.

Konfigurer Firebase Database-regler

For at tillade vores app at uploade billeder, skal vi justere Firebase Storage-reglerne. I en produktionsapplikation ville du implementere mere restriktive regler, men for demonstrationens skyld vil vi gøre det offentligt tilgængeligt:

1. I Firebase-konsollen, naviger til 'Storage' i venstre sidebjælke.
2. Vælg fanen 'Regler' (Rules).
3. Ændr reglerne til følgende. Bemærk, at dette giver læse- og skrivetilladelser til alle, og bør kun bruges til udvikling/testning:

service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write; } } }

Installer Firebase SDK i din React Native-app

Nu skal vi installere Firebase SDK i vores React Native-app:

npm install --save firebase

Opret konfigurationsfiler

Vi opretter to filer i en ny config-mappe i roden af dit projekt: environment.js og firebase.js.

config/environment.js

Denne fil vil indeholde dine API-nøgler og andre Firebase-konfigurationsdetaljer. Det er afgørende at tilføje denne fil til din .gitignore for at forhindre, at dine hemmelige nøgler bliver offentliggjort i et kodelager som GitHub.

// environment.js var environments = { staging: { FIREBASE_API_KEY: 'DIN_FIREBASE_API_NØGLE', FIREBASE_AUTH_DOMAIN: 'DIN_AUTH_DOMÆNE', FIREBASE_DATABASE_URL: 'DIN_DATABASE_URL', FIREBASE_PROJECT_ID: 'DIT_PROJEKT_ID', FIREBASE_STORAGE_BUCKET: 'DIN_STORAGE_BUCKET', FIREBASE_MESSAGING_SENDER_ID: 'DIN_MESSAGING_SENDER_ID', GOOGLE_CLOUD_VISION_API_KEY: 'DIN_GOOGLE_CLOUD_VISION_API_NØGLE' // Denne udfyldes senere }, production: { // Advarsel: Denne fil inkluderes stadig i din native binær og er ikke en sikker måde at gemme hemmeligheder på, hvis du bygger til app-butikker. // Detaljer: https://github.com/expo/expo/issues/83 } }; function getReleaseChannel() { let releaseChannel = Expo.Constants.manifest.releaseChannel; if (releaseChannel === undefined) { return 'staging'; } else if (releaseChannel === 'staging') { return 'staging'; } else { return 'staging'; } } function getEnvironment(env) { console.log('Release Channel: ', getReleaseChannel()); return environments[env]; } var Environment = getEnvironment(getReleaseChannel()); export default Environment;

Du finder dine Firebase-nøgler ved at gå til din Firebase-konsol, klikke på tandhjulsikonet ved siden af 'Projekt oversigt' og vælge 'Projektindstillinger'. Under 'Dine apps' finder du din webapp-konfiguration, der indeholder alle de nødvendige nøgler, bortset fra GOOGLE_CLOUD_VISION_API_KEY, som vi henter i næste afsnit.

config/firebase.js

Denne fil vil initialisere Firebase-applikationen ved hjælp af nøglerne fra environment.js:

// firebase.js import * as firebase from 'firebase'; import Environment from './environment'; firebase.initializeApp({ apiKey: Environment['FIREBASE_API_KEY'], authDomain: Environment['FIREBASE_AUTH_DOMAIN'], databaseURL: Environment['FIREBASE_DATABASE_URL'], projectId: Environment['FIREBASE_PROJECT_ID'], storageBucket: Environment['FIREBASE_STORAGE_BUCKET'], messagingSenderId: Environment['FIREBASE_MESSAGING_SENDER_ID'] }); export default firebase;

Hent din Google Cloud Vision API-nøgle

For at kunne bruge Google Cloud Vision API skal du have en API-nøgle fra Google Cloud Platform. Dette kræver en Gmail-konto.

1. Besøg Google Cloud Console og log ind med din Google-konto.
2. Opret et nyt projekt: Klik på rullemenuen 'Vælg et projekt' øverst og derefter 'Nyt projekt'. Indtast et navn (f.eks. 'VisionAPIProject') og klik 'Opret'. Vælg dit nyoprettede projekt.
3. Aktiver Vision API:
   • I venstre sidemenu, naviger til 'API'er og tjenester' -> 'Bibliotek'.
   • Søg efter 'Vision API' og klik på det.
   • Klik på knappen 'Aktiver'.
4. Faktureringsoplysninger: Du skal sandsynligvis tilføje faktureringsoplysninger til din Google Cloud Platform-konto for at kunne aktivere Vision API-tjenesterne. Google tilbyder dog ofte en gratis prøveperiode og et generøst gratis niveau for mange af deres API'er, herunder Vision API, så du kan eksperimentere uden omkostninger i starten.
5. Opret en API-nøgle:
   • Når Vision API er aktiveret, naviger til 'API'er og tjenester' -> 'Legitimationsoplysninger' i venstre sidemenu.
   • Klik på knappen 'Opret legitimationsoplysninger' og vælg 'API-nøgle'.
   • Din nye API-nøgle vil blive vist. Kopier denne nøgle.

Indsæt nu denne kopierede API-nøgle i din config/environment.js-fil under GOOGLE_CLOUD_VISION_API_KEY.

Bygning af applikationen

Nu hvor al konfiguration er på plads, kan vi begynde at bygge selve applikationslogikken. Vi skal installere en sidste npm-pakke for at generere unikke ID'er til vores billeder, når de uploades til Firebase Storage.

Installer uuid

npm install --save uuid

App.js logik

Åbn din App.js-fil. Den vil indeholde det meste af applikationslogikken. Vi vil fokusere på de vigtigste dele.

Initialtilstand og tilladelser

Først definerer vi appens indledende tilstand og anmoder om de nødvendige tilladelser til at få adgang til enhedens kamera og kamerarulle. Dette gøres i componentDidMount-livscyklusmetoden.

state = { image: null, uploading: false, googleResponse: null }; async componentDidMount() { await Permissions.askAsync(Permissions.CAMERA_ROLL); await Permissions.askAsync(Permissions.CAMERA); }

Permissions.askAsync er en Expo-funktion, der beder brugeren om tilladelse til at bruge enhedens funktioner, i dette tilfælde kamerarullen og kameraet.

uploadImageAsync Funktion

Denne asynkrone funktion er ansvarlig for at uploade det valgte billede til Firebase Storage. Den bruger uuid til at give billedet et unikt navn og en XMLHttpRequest (XHR) til at håndtere filoverførslen som en blob.

async function uploadImageAsync(uri) { const blob = await new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onload = function() { resolve(xhr.response); }; xhr.onerror = function(e) { console.log(e); reject(new TypeError('Network request failed')); }; xhr.responseType = 'blob'; xhr.open('GET', uri, true); xhr.send(null); }); const ref = firebase .storage() .ref() .child(uuid.v4()); // Unikt ID til billedet const snapshot = await ref.put(blob); blob.close(); return await snapshot.ref.getDownloadURL(); // Henter URL'en til det uploadede billede }

Funktionen returnerer en download-URL til billedet, som derefter kan bruges af Google Cloud Vision API.

submitToGoogle Funktion

Denne metode er kernen i integrationen. Den kaldes, når brugeren trykker på 'Analysér!'-knappen. Den konstruerer en HTTP POST-anmodning til Google Cloud Vision API's /v1/images:annotate-slutpunkt. Anmodningens 'body' er i JSON-format og specificerer, hvilke typer billedanalyse vi ønsker at udføre (f.eks. etiketdetektion, ansigtsdetektion osv.) og billedets URI.

submitToGoogle = async () => { try { this.setState({ uploading: true }); let { image } = this.state; let body = JSON.stringify({ requests: [ { features: [ { type: "LABEL_DETECTION", maxResults: 10 }, { type: "LANDMARK_DETECTION", maxResults: 5 }, { type: "FACE_DETECTION", maxResults: 5 }, { type: "LOGO_DETECTION", maxResults: 5 }, { type: "TEXT_DETECTION", maxResults: 5 }, { type: "DOCUMENT_TEXT_DETECTION", maxResults: 5 }, { type: "SAFE_SEARCH_DETECTION", maxResults: 5 }, { type: "IMAGE_PROPERTIES", maxResults: 5 }, { type: "CROP_HINTS", maxResults: 5 }, { type: "WEB_DETECTION", maxResults: 5 } ], image: { source: { imageUri: image } } } ] }); let response = await fetch( "https://vision.googleapis.com/v1/images:annotate?key=" + Environment["GOOGLE_CLOUD_VISION_API_KEY"], { headers: { Accept: "application/json", "Content-Type": "application/json" }, method: "POST", body: body } ); let responseJson = await response.json(); console.log(responseJson); this.setState({ googleResponse: responseJson, uploading: false }); } catch (error) { console.log(error); } };

Bemærk, hvordan Environment["GOOGLE_CLOUD_VISION_API_KEY"] bruges til at autentificere anmodningen. Svaret fra Vision API er også i JSON-format og indeholder de detekterede etiketter, scorer og andre relevante data, afhængigt af de funktioner, du har anmodet om. Dette svar logges til konsollen og gemmes i appens tilstand, så det kan vises i brugergrænsefladen.

For eksempel kan et svar se således ud:

"labelAnnotations": [ { "description": "water", "mid": "/m/0838f", "score": 0.97380537, "topicality": 0.97380537 }, { "description": "waterfall", "mid": "/m/0j2kx", "score": 0.97099465, "topicality": 0.97099465 }, { "description": "nature", "mid": "/m/05h0n", "score": 0.9594912, "topicality": 0.9594912 } ]

Dette viser de detekterede etiketter med en tilhørende sandsynlighedsscore. Hvis du besøger 'Storage'-sektionen i din Firebase-konsol, vil du også bemærke, at hvert uploadet billede gemmes med et unikt navn, der er genereret af uuid.

Afslutning af UI og test

Du skal selvfølgelig tilføje en knap, der kalder submitToGoogle, og en måde at vælge et billede på (f.eks. med ImagePicker fra Expo). Når du er klar til at teste, kan du køre din app med npm start, scanne QR-koden med Expo Go-appen på din rigtige enhed, og afprøve 'Tag et billeke'-funktionen. Dette giver dig den mest realistiske oplevelse af, hvordan Vision API fungerer i en mobil kontekst.

Sammenligning: Opsætning af Firebase vs. Google Cloud Vision API

Selvom både Firebase og Google Cloud Vision er Google-produkter og integreres med Google Cloud Platform, har de forskellige formål og opsætningsprocesser. Her er en oversigt over de vigtigste trin for hver:

Ofte Stillede Spørgsmål (FAQ)

Hvorfor skal jeg bruge Expo i stedet for ren React Native CLI?

Expo forenkler udviklingsprocessen betydeligt ved at håndtere mange af de komplekse native byggekonfigurationer og moduler. Det giver et rigt sæt indbyggede API'er til enhedsfunktioner (kamera, filadgang, sensorer osv.) og en nem måde at teste din app på en rigtig enhed via Expo Go-appen uden at skulle kompilere native kode. For mange projekter, især dem der ikke kræver brugerdefinerede native moduler, er Expo et hurtigere og mere udviklervenligt valg.

Er det sikkert at gemme API-nøgler i environment.js?

At gemme API-nøgler direkte i environment.js er praktisk til udvikling, men det er ikke en sikker metode til produktionsapps. Når din app er bygget, vil disse nøgler være en del af den native binære fil, og en dygtig angriber kan potentielt udtrække dem via reverse engineering. For produktionsapps anbefales det at bruge en sikker backend til at håndtere alle API-kald, der kræver hemmelige nøgler, eller at bruge mere avancerede miljøvariabelsystemer, der er designet til at beskytte følsomme data. For denne guide er det tilstrækkeligt, men vær opmærksom på sikkerhedsrisikoen i et rigtigt produktionsmiljø.

Hvad hvis jeg ikke ser mine billeder i Firebase Storage efter upload?

Dette kan skyldes flere ting. Først og fremmest, tjek dine Firebase Storage-regler for at sikre, at de tillader skrivning (allow read, write;). Tjek også din uploadImageAsync-funktion for eventuelle fejl i konsollen. Sørg for, at firebase.js initialiserer Firebase korrekt med de rigtige nøgler fra environment.js. Endelig, hvis du får en 'Network request failed'-fejl, tjek din internetforbindelse eller eventuelle netværkskonfigurationsproblemer på din enhed.

Hvilke typer billeder kan Google Cloud Vision API behandle?

Google Cloud Vision API understøtter en række billedformater, herunder JPEG, PNG, GIF og BMP. Billederne kan leveres som Base64-kodede strenge, en offentligt tilgængelig URL eller via Google Cloud Storage-stier. API'en kan behandle billeder i forskellige størrelser, men der er begrænsninger for filstørrelse og opløsning, som du bør tjekke i Googles officielle dokumentation for at undgå fejl.

Er der omkostninger forbundet med at bruge Google Cloud Vision API og Firebase?

Ja, både Google Cloud Vision API og Firebase har gratis niveauer, som er meget generøse og ofte tilstrækkelige til udvikling og små projekter. Når din applikation vokser og overskrider det gratis niveau, vil der være omkostninger baseret på forbrug (f.eks. antal API-kald, mængde data lagret/overført). Det er vigtigt at gennemgå de aktuelle prisplaner for både Google Cloud Vision og Firebase på Googles officielle hjemmesider for at forstå de potentielle omkostninger, især for produktionsapps.

Konklusion

I denne dybdegående vejledning har vi udforsket, hvordan man integrerer kraftfulde maskinlæringstjenester fra Google Cloud Vision API og lagringstjenester fra Firebase i en React Native-applikation ved hjælp af Expo. Du har lært at sætte dit udviklingsmiljø op, konfigurere nødvendige API-nøgler og bygge applikationslogikken til billedoverførsel og -analyse. Ved at følge disse trin har du nu en funktionel app, der kan genkende og klassificere indhold i billeder, hvilket åbner op for en verden af muligheder for at skabe smartere og mere interaktive mobilapplikationer. Integrationen af disse avancerede teknologier er en game-changer for mobiludviklere, der ønsker at skabe næste generations app-oplevelser. Fortsæt med at eksperimentere med de forskellige funktioner i Vision API, og udforsk potentialet i maskinlæring for at løse reelle problemer og forbedre brugeroplevelsen i dine fremtidige projekter.

Hvis du vil læse andre artikler, der ligner Vision i din React Native App med Expo, kan du besøge kategorien Mobiludvikling.