Share
Cu Google Firebase, una dintre cele mai puternice și versatile platforme fără servere disponibile astăzi, puteți adăuga eforturi esențiale, cum ar fi gestionarea utilizatorilor, raportarea la accidente, analiza, stocarea în timp real a datelor și chiar învățarea în mașină a aplicațiilor dvs. mobile. Pentru a putea lucra cu platforma în timp ce utilizați cadrul Flutter Google, veți avea nevoie de FlutterFire.
FlutterFire este o colecție în creștere de pluginuri Flutter oficiale pentru Firebase. În acest tutorial, vă vom arăta cum să îl utilizați pentru a adăuga trei servicii diferite Firebase la o aplicație Flutter.
Pentru a urma acest tutorial pas cu pas, veți avea nevoie de:
Dacă nu aveți Flutter SDK sau pluginul Flutter, învățați cum să le instalați atât aici:
Activați Android Studio și creați un nou proiect Flutter. În expertul de creare a proiectului, asigurați-vă că alegeți Flutter aplicație opțiune și asociați un nume de pachet valabil cu acesta.
Nu puteți utiliza serviciile Firebase în acest proiect până când nu îl înregistrați pe platforma Firebase și nu îl veți conecta la un proiect Firebase. Deși puteți să faceți acest lucru manual utilizând un browser, puteți salva mult timp și efort folosind aplicația Firebase Assistant din Android Studio, care automatizează majoritatea pașilor pentru dvs..
Începeți prin a deschide proiectul nativ Android care este încorporat în cadrul proiectului dvs. Flutter, accesând Instrumente> Flutter> Deschis pentru editare în Android Studio. Când vi se solicită, asigurați-vă că deschideți proiectul într-o fereastră nouă.
În fereastra nouă, mergeți la Instrumente> Firebase pentru a deschide Firebase Assistant.
Apoi du-te la Google Analytics> Conectați un eveniment Google Analytics. În ecranul care se deschide în continuare, apăsați pe Conectați buton.
Veți vedea acum o fereastră de dialog care vă solicită să specificați numele noului dvs. proiect Firebase. Introduceți un nume pe care îl preferați și apăsați pe Conectați-vă la Firebase buton.
În acest moment, Firebase Assistant va finaliza automat procesul de înregistrare și va adăuga un fișier numit google-services.json, care conține detalii de configurare importante pentru proiectul dvs..
Pentru a putea citi fișierul JSON, veți avea nevoie de pluginul Serviciilor Google. Deci deschideți nivelul rădăcinii build.gradle fișier și adăugați CLASSPATH de plugin în interiorul dependențe secțiune:
classpath 'com.google.gms: servicii Google: 4.0.1'
Apoi, activați pluginul adăugând următoarea linie la sfârșitul nivelului aplicației build.gradle fişier:
aplicați plugin-ul: 'com.google.gms.google-services'
Acum puteți închide fereastra nouă și puteți reveni la proiectul Flutter.
FlutterFire are pluginuri independente Google Flutter pentru majoritatea serviciilor Firebase. Pentru a adăuga pluginurile ca dependente în proiectul dvs. Flutter, tot ce trebuie să faceți este să le menționați sub dependențe cheie a pubspec.yaml fişier.
Următorul cod vă arată cum să adăugați dependențe pentru cele mai recente versiuni de pluginuri asociate cu serviciile Analytics, Cloud Firestore și ML Kit:
firebase_analytics: ^ 1.0.3 cloud_firestore: ^ 0.7.3 firebase_ml_vision: ^ 0.2.0 + 1
În acest tutorial, veți crea o aplicație care poate scana codurile QR și salva datele pe care le conțin într-o bază de date cloud. După cum probabil ați ghicit, veți folosi pluginul ML Kit ca un decodor de cod QR și pluginul Cloud Firestore ca interfață la baza de date.
Pentru a captura efectiv codurile QR, cu toate acestea, veți avea nevoie de Image Picker, un plugin care vă permite să interacționați cu camera foto. Iată cum îl puteți adăuga ca o altă dependență:
image_picker: ^ 0.4.10
După adăugarea dependențelor, continuați și apăsați pe Pachetele primesc pentru a instala toate pluginurile.
De obicei, nu va trebui să scrieți niciun cod suplimentar pentru a putea utiliza Firebase Analytics în aplicația Flutter. Atâta timp cât pluginul asociat este instalat, aplicația dvs. va raporta automat datele utilizatorilor către Firebase. Puteți verifica acest lucru prin rularea aplicației dvs. imediat și mergând la consola Firebase.
Dacă nu ați întâmpinat nicio eroare de configurare în pașii anteriori, veți putea vedea evenimentele afișate în StreamView panoului de bord al Google Analytics.
Firebase ML Kit este un serviciu Firebase lansat recent, care vă permite să detectați fețe, să scanați coduri de bare și să efectuați operații de recunoaștere a caracterelor optice pe orice imagine sau video. Pluginul FlutterFire oferă un API care este foarte intuitiv și concis. Să o folosim acum pentru a decoda codurile QR.
Începeți prin crearea unui aspect care conține un buton pe care utilizatorii îl pot apăsa pentru a capta fotografii cu coduri QR. Următorul cod vă arată cum să creați un aspect de design material cu un RaisedButton widget plasat în centru:
void main () => runApp (materialul MaterialApp nou (home: new MyApp ())); clasa MyApp extinde StatelessWidget @override Widget build (Context BuildContext) retur noi Schele (corp: nou Centru (copil: nou RaisedButton (onPressed: ))));
Dacă rulați aplicația acum, va arăta astfel:
Rețineți că butonul are asociat cu acesta un ascultător de evenimente presat. În interiorul ascultătorului, puteți folosi pickImage () metodă a ImagePicker pentru a capta o fotografie. Deoarece metoda rulează în mod asincron, trebuie să-i atașați un ascultător pentru a primi rezultatul. Următorul cod vă arată cum:
ImagePicker.pickImage (sursa: ImageSource.camera) .then ((foto) // Mai mult cod aici);
După ce ați capturat o fotografie, puteți să o trimiteți la ML Kit's BarcodeDetector pentru a detecta codurile QR pe care le poate conține. Pentru a obține o instanță a clasei, utilizați barcodeDetector () metodă a FirebaseVision clasă.
ML Kit suportă mai multe tipuri diferite de coduri de bare. Pentru a face procesul de detectare mai eficient, puteți utiliza a BarcodeDetectorOptions obiect pentru a specifica tipul de cod de bare care vă interesează. Iată cum creați un detector numai pentru codurile QR:
Detector de detector de detecție barcode = FirebaseVision.instance.barcodeDetector (BarcodeDetectorOptions (barcodeFormats: BarcodeFormat.qrCode));
Deoarece detectorul nu poate gestiona direct fișierele imagine, trebuie să convertiți fotografia în a FirebaseVisionImage obiect folosind din fisier() metodă. Apoi puteți trece obiectul la detectInImage () metoda detectorului pentru a obține o listă de coduri de bare detectate. Metoda rulează asincron, deci va trebui să atașați un ascultător.
detector. detectInImage (FirebaseVisionImage.fromFile (foto)) .then ((coduri de bare) // Mai mult cod aici);
În interiorul ascultătorului, veți avea acces la o listă de coduri de bare obiecte. rawValue câmpul fiecărui obiect conține date brute decodificate. Pentru moment, pentru a păstra lucrurile simple, hai să folosim un lucru AlertDialog widget pentru afișarea datelor brute prezente în primul element al listei.
Următorul cod vă arată cum să creați un simplu AlertDialog widget având Text widget-uri pentru titlul și conținutul său și a FlatButton widget care poate fi apăsat pentru ao respinge:
dacă (barcodes.length> 0) var barcode = coduri de bare [0]; // Alegeți primul cod de bare // Creare dialog de alertă showDialog (context: context, constructor: (context) retur nou AlertDialog (titlu: text nou), conținut: text nou (barcode.rawValue) Afișați acțiunile valorii brute:[new FlatButton (onPressed: () Navigator.of (context) .pop (); copil: text nou ("OK"))];); );
Puteți rula aplicația acum și încercați să scanați câteva coduri QR.
Cloud Firestore este o bază de date NoSQL pe care o puteți utiliza pentru a stoca datele aplicației în cloud. Pluginul FlutterFire oferă clase care vă permit să efectuați în mod asincron operații CRUD pe acesta.
Înainte de a începe să o utilizați, trebuie să activați manual serviciul Cloud Firestore din consola Firebase. Pentru a face acest lucru, mergeți la Bază de date secțiunea consolei și apăsați tasta Creați baza de date buton.
Când vi se solicită să definiți regulile de securitate ale bazei de date, alegeți Începeți în modul de testare opțiune. Acest mod vă permite să începeți să utilizați imediat baza de date, dar nu este foarte sigură și este ideală numai pentru scopuri de testare.
În cele din urmă, apăsați pe Permite pentru a crea baza de date.
Înapoi în Android Studio, puteți obține o trimitere la baza de date utilizând instanță câmpul Firestore clasă. În consecință, adăugați următorul cod widget-ului dvs. fără stat:
var myDatabase = Firestore.instance;
În timp ce utilizați Cloud Firestore, trebuie să stocați toate datele în documente. În plus, fiecare document trebuie să aparțină unei colecții. Pentru a crea sau trimite o colecție, trebuie să utilizați Colectie() care așteaptă un șir care să precizeze numele colecției.
Odată ce aveți acces la o colecție, puteți să o apelați adăuga() pentru a adăuga un document la acesta.
Următorul cod, pe care îl puteți adăuga chiar înainte de apelul către showDialog () , vă arată cum să creați un nou document - unul care conține valoarea primei cod QR și o marcă de timp - și adăugați-o într-o colecție numită qr_codes:
Accentsconagua
myDatabase.collection ("qr_codes") adăugați ("raw_data": barcode.rawValue, "time": new DateTime.now () millisecondsSinceEpoch ;);Dacă rulați din nou aplicația și scanați un cod QR cu ea, acum veți putea vedea conținutul codului QR din consola Firebase.
Serviciile oferite de platforma Firebase sunt indispensabile în dezvoltarea de aplicații mobile moderne. Există pluginuri Google Flutter oficiale pentru aproape toate aceste servicii. În acest tutorial, ați învățat cum să folosiți trei dintre ele împreună pentru a crea o aplicație de scanare a codului QR foarte precisă.
Pentru a afla mai multe despre Flutter și Firebase, consultați documentația oficială.
