Share
Con Google Firebase, una delle piattaforme serverless più potenti e versatili oggi disponibili, puoi aggiungere facilmente funzionalità essenziali come la gestione degli utenti, i rapporti sugli arresti anomali, l'analisi, l'archiviazione dei dati in tempo reale e persino l'apprendimento automatico alle tue app mobili. Per essere in grado di lavorare con la piattaforma mentre usi il framework Google Flutter, avrai bisogno di FlutterFire.
FlutterFire è una collezione crescente di plug-in Flutter ufficiali per Firebase. In questo tutorial, ti mostrerò come utilizzarlo per aggiungere tre diversi servizi Firebase a un'app Flutter.
Per seguire questo tutorial passo passo, avrai bisogno di:
Se non hai il Flutter SDK o il plugin Flutter, scopri come installarli entrambi qui:
Avvia Android Studio e crea un nuovo progetto Flutter. Nella procedura guidata di creazione del progetto, assicurati di scegliere il Applicazione flutter opzione e associare un nome di pacchetto valido con esso.
Non puoi utilizzare i servizi Firebase in questo progetto finché non lo registri con la piattaforma Firebase e lo colleghi a un progetto Firebase. Sebbene tu possa farlo manualmente utilizzando un browser, puoi risparmiare un sacco di tempo e fatica utilizzando invece l'Assistente Firebase di Android Studio, che automatizza la maggior parte dei passaggi per te.
Inizia aprendo il progetto Android nativo che è incorporato nel tuo progetto Flutter andando a Strumenti> Flutter> Apri per la modifica in Android Studio. Quando richiesto, assicurati di aprire il progetto in una nuova finestra.
Nella nuova finestra, vai a Strumenti> Firebase per aprire l'Assistente Firebase.
Quindi vai a Analytics> Registra un evento Analytics. Nella schermata che si apre in seguito, premere il tasto Collegare pulsante.
Ora vedrai una finestra di dialogo che ti chiede di specificare il nome del tuo nuovo progetto Firebase. Digita il nome che preferisci e premi il tasto Connetti a Firebase pulsante.
A questo punto, Firebase Assistant completerà automaticamente il processo di registrazione e aggiungerà un file chiamato google-services.json, che contiene importanti dettagli di configurazione, per il tuo progetto.
Per poter leggere il file JSON, è necessario il plug-in dei servizi di Google. Quindi apri il livello principale build.gradle file e aggiungi il classpath del plugin all'interno del dipendenze sezione:
classpath "com.google.gms: google-services: 4.0.1"
Successivamente, attiva il plug-in aggiungendo la seguente riga alla fine del livello dell'app build.gradle file:
applica il plug-in: "com.google.gms.google-services"
Ora puoi chiudere la nuova finestra e tornare al progetto Flutter.
FlutterFire ha plugin Google Flutter indipendenti per la maggior parte dei servizi Firebase. Per aggiungere i plugin come dipendenze nel tuo progetto Flutter, tutto ciò che devi fare è menzionarli sotto dipendenze chiave del pubspec.yaml file.
Il codice seguente mostra come aggiungere dipendenze per le versioni più recenti dei plug-in associati ai servizi Analytics, Cloud Firestore e ML Kit:
firebase_analytics: ^ 1.0.3 cloud_firestore: ^ 0.7.3 firebase_ml_vision: ^ 0.2.0 + 1
In questa esercitazione, creerai un'applicazione in grado di eseguire la scansione di codici QR e di salvare i dati che contengono in un database cloud. Come avrai intuito, utilizzerai il plug-in ML Kit come decodificatore di codici QR e il plug-in Cloud Firestore come interfaccia per il database.
Per catturare effettivamente i codici QR, tuttavia, è necessario Image Picker, un plug-in che consente di interagire con la fotocamera. Ecco come puoi aggiungerlo come un'altra dipendenza:
image_picker: ^ 0.4.10
Dopo aver aggiunto le dipendenze, andare avanti e premere il tasto I pacchetti ottengono pulsante per installare tutti i plugin.
Di solito, non dovrai scrivere alcun codice aggiuntivo per poter utilizzare Firebase Analytics nella tua app Flutter. Finché il plug-in associato è installato, la tua app riferirà automaticamente i dati dell'utente a Firebase. Puoi verificarlo eseguendo subito la tua app e andando alla console di Firebase.
Se non hai riscontrato errori di configurazione nei passaggi precedenti, sarai in grado di vedere gli eventi spuntare nel Streamview pannello della dashboard di Analytics.
Firebase ML Kit è un servizio Firebase lanciato di recente che consente di rilevare volti, scansionare codici a barre ed eseguire operazioni di riconoscimento ottico dei caratteri su qualsiasi immagine o video. Il suo plugin FlutterFire offre un'API molto intuitiva e concisa. Usiamolo ora per decodificare i codici QR.
Inizia creando un layout contenente un pulsante che gli utenti possono premere per acquisire foto dei codici QR. Il codice seguente mostra come creare un layout di Material Design con a RaisedButton widget posizionato al centro:
Accentsconagua
void main () => runApp (new MaterialApp (home: new MyApp ())); classe MyApp estende StatelessWidget @override Widget build (contesto BuildContext) return new Scaffold (body: new Center (child: new RaisedButton (onPressed: () // Altro codice qui, child: new Text ("Capture QR Code") )))); Se esegui l'app ora, sarà simile a questa:
Si noti che il pulsante ha un listener di eventi su cui è associato. All'interno dell'ascoltatore, puoi usare il pickImage () metodo del ImagePicker classe per catturare una foto. Poiché il metodo viene eseguito in modo asincrono, è necessario associarvi un listener per poterne ricevere il risultato. Il seguente codice mostra come:
ImagePicker.pickImage (fonte: ImageSource.camera) .then ((foto) // Altro codice qui);
Dopo aver catturato una foto, puoi passarla a ML Kit BarcodeDetector classe per rilevare i codici QR che può contenere. Per ottenere un'istanza della classe, utilizzare il barcodeDetector () metodo del FirebaseVision classe.
ML Kit supporta molti diversi tipi di codici a barre. Per rendere il processo di rilevamento più efficiente, è possibile utilizzare a BarcodeDetectorOptions oggetto per specificare il tipo di codice a barre che ti interessa. Ecco come si crea un rilevatore solo per i codici QR:
BarcodeDetector detector = FirebaseVision.instance.barcodeDetector (BarcodeDetectorOptions (barcodeFormats: BarcodeFormat.qrCode));
Poiché il rilevatore non può gestire direttamente i file di immagine, è necessario convertire la foto in a FirebaseVisionImage oggetto che usa il suo dal file() metodo. È quindi possibile passare l'oggetto al detectInImage () metodo del rilevatore per ottenere una lista di codici a barre rilevati. Il metodo viene eseguito in modo asincrono, quindi dovrai associarlo a un listener.
detector .detectInImage (FirebaseVisionImage.fromFile (photo)) .then ((codici a barre) // Altro codice qui);
All'interno dell'ascoltatore, avrai accesso a un elenco di Codice a barre oggetti. Il rawValue il campo di ciascun oggetto contiene dati decodificati grezzi. Per ora, per mantenere le cose semplici, usiamo un AlertDialog widget per visualizzare i dati grezzi presenti nel primo elemento della lista.
Il codice seguente mostra come creare un semplice AlertDialog avere widget Testo widget per titolo e contenuti, e a FlatButton widget che può essere premuto per chiuderlo:
if (barcodes.length> 0) var barcode = barcode [0]; // Scegli il primo codice a barre // Crea finestra di dialogo degli avvisi showDialog (contesto: contesto, builder: (contesto) return new AlertDialog (titolo: nuovo testo ("Contenuto del codice QR"), contenuto: nuovo testo (barcode.rawValue), // Mostra azioni a valore grezzo: [nuovo FlatButton (onPressed: () Navigator.of (context) .pop ();, child: new Text ("OK"))],); ); Puoi eseguire l'app ora e provare a scansionare alcuni codici QR.
Cloud Firestore è un database NoSQL che puoi utilizzare per archiviare i dati della tua app nel cloud. Il plug-in FlutterFire offre classi che consentono di eseguire in modo asincrono operazioni CRUD su di esso.
Prima di iniziare a utilizzarlo, devi abilitare manualmente il servizio Cloud Firestore nella console Firebase. Per farlo, vai al Banca dati sezione della console e premere il tasto Crea Database pulsante.
Quando viene richiesto di definire le regole di sicurezza del database, selezionare Inizia in modalità test opzione. Questa modalità consente di iniziare a utilizzare immediatamente il database, ma non è molto sicuro ed è ideale solo a scopo di test.
Infine, premi il Abilitare pulsante per creare il database.
Di nuovo in Android Studio, puoi ottenere un riferimento al database usando il esempio campo del FireStore classe. Di conseguenza, aggiungi il seguente codice al tuo widget stateless:
var myDatabase = Firestore.instance;
Durante l'utilizzo di Cloud Firestore, è necessario memorizzare tutti i dati all'interno dei documenti. Inoltre, ogni documento deve appartenere a una raccolta. Per creare o fare riferimento a una raccolta, è necessario utilizzare il collezione() metodo, che si aspetta una stringa che specifica il nome della collezione.
Una volta che hai accesso a una collezione, puoi chiamarla Inserisci() metodo per aggiungere un documento ad esso.
Il seguente codice, che puoi aggiungere subito prima della chiamata al showDialog () funzione, mostra come creare un nuovo documento, uno contenente il valore grezzo del codice QR e un timestamp, e aggiungerlo a una raccolta denominata qr_codes:
myDatabase.collection ("qr_codes"). add ("raw_data": barcode.rawValue, "time": nuovo DateTime.now (). millisecondsSinceEpoch). then ((_) print ("Un documento aggiunto.") ;);Se esegui nuovamente l'app e esegui la scansione di un codice QR, potrai vedere i contenuti del codice QR nella console Firebase.
I servizi offerti dalla piattaforma Firebase sono indispensabili per lo sviluppo di moderne app mobili. Ci sono plugin ufficiali di Google Flutter per quasi tutti questi servizi. In questo tutorial, hai imparato come utilizzarne tre insieme per creare un'app per scanner di codici QR estremamente accurata.
Per ulteriori informazioni su Flutter e Firebase, fare riferimento alla documentazione ufficiale.
