Share
Med Google Firebase, en av de kraftigste og allsidige serverløse plattformene som er tilgjengelige i dag, kan du enkelt legge til viktige funksjoner som brukeradministrasjon, krasjrapportering, analyse, sanntidsoppbevaring og jevn maskinlæring til mobilappene dine. For å kunne jobbe med plattformen mens du bruker Google Flutter-rammeverket, trenger du FlutterFire.
FlutterFire er en voksende samling av offisielle Flutter plugins for Firebase. I denne veiledningen viser jeg deg hvordan du bruker den til å legge til tre forskjellige Firebase-tjenester til en Flutter-app.
For å følge denne trinnvise opplæringen må du:
Hvis du ikke har flutter SDK eller flutter-pluginet, kan du lære å installere dem begge her:
Brann opp Android Studio og opprett et nytt Flutter-prosjekt. I prosjektopprettelsesveiviseren må du kontrollere at du velger Flutter applikasjon alternativ og tilknytt et gyldig pakke navn med den.
Du kan ikke bruke Firebase-tjenester i dette prosjektet før du registrerer det med Firebase-plattformen og kobler det til et Firebase-prosjekt. Selv om du kan gjøre det manuelt med en nettleser, kan du spare mye tid og krefter ved å bruke Android Studio's Firebase Assistant i stedet, som automatiserer de fleste trinnene for deg.
Start med å åpne det innfødte Android-prosjektet som er innebygd i Flutter-prosjektet ved å gå til Verktøy> Flutter> Åpne for redigering i Android Studio. Når du blir bedt om det, må du sørge for at du åpner prosjektet i et nytt vindu.
I det nye vinduet, gå til Verktøy> Brannbase å åpne brannbaseassistenten.
Så gå til Analytics> Logg på en Analytics-hendelse. På skjermen som åpnes neste, trykker du på Koble knapp.
Du vil nå se en dialogboks som ber deg om å spesifisere navnet på ditt nye Firebase-prosjekt. Skriv inn et navn du foretrekker, og trykk på Koble til Firebase knapp.
På dette tidspunktet vil Firebase Assistant automatisk fullføre registreringsprosessen og legge til en fil som heter google-services.json, som inneholder viktige konfigurasjonsdetaljer, til prosjektet ditt.
For å kunne lese JSON-filen trenger du pluginet for Google Services. Så åpne rotnivået build.gradle fil og legg til CLASSPATH av plugin inne i avhengig seksjon:
classpath 'com.google.gms: google-tjenester: 4.0.1'
Aktiver deretter pluginet ved å legge til følgende linje på slutten av app-nivået build.gradle fil:
bruk plugin: 'com.google.gms.google-tjenester'
Du kan nå lukke det nye vinduet og gå tilbake til Flutter-prosjektet.
FlutterFire har uavhengige Google Flutter-plugins for de fleste Firebase-tjenester. For å legge til pluginene som avhengigheter i Flutter-prosjektet, er alt du trenger å gjøre å nevne dem under avhengig nøkkel til pubspec.yaml fil.
Følgende kode viser hvordan du legger til avhengigheter for de nyeste versjonene av programtillegg knyttet til Analytics, Cloud Firestore og ML Kit-tjenestene:
firebase_analytics: ^ 1.0.3 cloud_firestore: ^ 0.7.3 firebase_ml_vision: ^ 0.2.0 + 1
I denne opplæringen lager du en app som kan skanne QR-koder og lagre dataene de inneholder i en sky-database. Som du kanskje har gjettet, bruker du ML Kit-plugin som en QR-kode dekoder og Cloud Firestore-plugin som et grensesnitt til databasen.
For å fange QR-kodene, trenger du imidlertid Image Picker, et plugin som lar deg kommunisere med kameraet. Slik kan du legge den til som en annen avhengighet:
image_picker: ^ 0.4.10
Etter å legge til avhengighetene, gå videre og trykk på Pakker får knappen for å installere alle pluginene.
Vanligvis trenger du ikke å skrive noen ekstra kode for å kunne bruke Firebase Analytics i Flutter app. Så lenge det tilhørende pluginet er installert, rapporterer appen automatisk brukerdata til Firebase. Du kan bekrefte dette ved å kjøre appen din med en gang og gå til Firebase-konsollen.
Hvis du ikke oppdaget noen konfigurasjonsfeil i de forrige trinnene, vil du kunne se hendelser som dukker opp i StreamView panelet i Analytics-dashbordet.
Firebase ML Kit er en nylig lansert Firebase-tjeneste som lar deg oppdage ansikter, skanne strekkoder og utføre optiske tegngjenkjenningsoperasjoner på et hvilket som helst bilde eller video. FlutterFire-plugin-modulen tilbyr en API som er veldig intuitiv og kortfattet. La oss nå bruke den til å dekode QR-koder.
Begynn med å lage en layout som inneholder en knapp, brukerne kan trykke for å ta bilder av QR-koder. Følgende kode viser hvordan du lager et materialdesignlayout med en RaisedButton widget plassert i midten:
Accentsconagua
void main () => runApp (nytt MaterialApp (home: new MyApp ())); klassen MyApp utvider StatelessWidget @override Widget build (BuildContext kontekst) returner ny Stillas (kropp: nytt senter (barn: ny RaisedButton (onPressed: () // Mer kode her, barn: ny tekst ("Capture QR Code" )))); Hvis du kjører appen nå, vil den se slik ut:
Merk at knappen har en på-presset hendelselytter tilknyttet den. Innenfor lytteren kan du bruke pickImage () metode av ImagePicker klasse for å fange et bilde. Fordi metoden går asynkront, må du knytte en lytter til den for å motta resultatet. Følgende kode viser deg hvordan:
ImagePicker.pickImage (kilde: ImageSource.camera) .then ((bilde) // Mer kode her);
Når du har tatt et bilde, kan du sende det til ML Kit BarcodeDetector klasse for å oppdage QR-koder det kan inneholde. For å få en forekomst av klassen, bruk barcodeDetector () metode av FirebaseVision klasse.
ML Kit støtter mange forskjellige typer strekkoder. For å gjøre deteksjonsprosessen mer effektiv, kan du bruke en BarcodeDetectorOptions protester mot å angi hvilken type strekkode du er interessert i. Slik gjør du det bare å opprette en detektor for kun QR-koder:
BarcodeDetector detector = FirebaseVision.instance.barcodeDetector (BarcodeDetectorOptions (barcodeFormats: BarcodeFormat.qrCode));
Fordi detektoren ikke kan håndtere bildefiler direkte, må du konvertere bildet til en FirebaseVisionImage objekt ved hjelp av sin fromFile () metode. Du kan da sende objektet til detectInImage () Metoden til detektoren for å få en liste over strekkoder detektert. Metoden går asynkront, så du må legge til en lytter til den.
detektor .detectInImage (FirebaseVisionImage.fromFile (foto)) .then ((strekkoder) // Mer kode her);
Innenfor lytteren har du tilgang til en liste over Barcode objekter. De rawValue feltet for hvert enkelt objekt inneholder rå dekodet data. For nå, for å holde ting enkelt, la oss bruke en AlertDialog widget for å vise de rå dataene som er tilstede i det første elementet i listen.
Følgende kode viser hvordan du lager en enkel AlertDialog widget har Tekst widgets for tittel og innhold, og a FlatButton widget som kan trykkes for å avvise det:
hvis (strekkoder. lengde> 0) var strekkode = strekkoder [0]; // Velg første strekkode // Opprett Alert Dialog showDialog (kontekst: Kontekst, byggmester: (kontekst) returner ny AlertDialog (tittel: Ny tekst ("QR Kode Innhold"), innhold: Ny tekst (barcode.rawValue), // Vis råverdighetshandlinger: [ny FlatButton (onPressed: () Navigator.of (kontekst) .pop ();, barn: ny tekst ("OK")));); ); Du kan kjøre appen nå og prøve å skanne noen få QR-koder.
Cloud Firestore er en NoSQL-database du kan bruke til å lagre appens data i skyen. FlutterFire-plugin tilbyr klasser som lar deg asynkront utføre CRUD-operasjoner på den.
Før du begynner å bruke den, må du aktivere Cloud Firestore-tjenesten manuelt i Firebase-konsollen. For å gjøre det, gå til database delen av konsollen og trykk på Opprett database knapp.
Når du blir bedt om å definere sikkerhetsreglene i databasen, velger du Start i testmodus alternativ. Denne modusen lar deg begynne å bruke databasen umiddelbart, men den er ikke veldig sikker og er ideell for testformål.
Til slutt trykker du på Aktiver knappen for å lage databasen.
Tilbake i Android Studio, kan du få en referanse til databasen ved å bruke forekomst feltet av Fire klasse. Følg deretter følgende kode til din statsløse widget:
var myDatabase = Firestore.instance;
Mens du bruker Cloud Firestore, må du lagre alle dataene dine inni dokumentene. Videre må hvert dokument tilhøre en samling. For å opprette eller referere til en samling, må du bruke samling() metode, som forventer en streng som angir navnet på samlingen.
Når du har tilgang til en samling, kan du ringe den Legg til() metode for å legge til et dokument for det.
Følgende kode, som du kan legge til rett før samtalen til showdialog () funksjonen, viser hvordan du lager et nytt dokument, en som inneholder QR-kodenes røde verdi og en tidsstempel - og legger den til i en samling som heter qr_codes:
myDatabase.collection ("qr_codes"). Legg til ("raw_data": barcode.rawValue, "time": ny DateTime.now (). millisecondsSinceEpoch). deretter ((_) print ("Ett dokument lagt til.") ;);Hvis du kjører appen igjen og skanner en QR-kode med den, vil du nå kunne se innholdet i QR-koden i Firebase-konsollen.
Tjenester som tilbys av Firebase-plattformen er uunnværlige når du utvikler moderne mobilapper. Det er offisielle Google Flutter-plugins for nesten alle disse tjenestene. I denne opplæringen lærte du hvordan du bruker tre av dem sammen for å lage en svært nøyaktig QR-kode skanner app.
For å lære mer om Flutter og Firebase, se den offisielle dokumentasjonen.
