Share
Avec Google Firebase, l'une des plates-formes sans serveur les plus puissantes et les plus polyvalentes disponibles à ce jour, vous pouvez facilement ajouter des fonctionnalités essentielles telles que la gestion des utilisateurs, les rapports d'incidents, les analyses, le stockage de données en temps réel et même l'apprentissage automatique à vos applications mobiles. Pour pouvoir utiliser la plate-forme avec le framework Google Flutter, vous devez disposer de FlutterFire..
FlutterFire est une collection grandissante de plugins officiels Flutter pour Firebase. Dans ce tutoriel, je vais vous montrer comment l'utiliser pour ajouter trois services Firebase différents à une application Flutter..
Pour suivre ce didacticiel pas à pas, vous aurez besoin des éléments suivants:
Si vous ne possédez pas le SDK Flutter ni le plugin Flutter, apprenez comment les installer tous les deux ici:
Lancez Android Studio et créez un nouveau projet Flutter. Dans l’assistant de création de projet, assurez-vous de choisir le Application Flutter option et associez-lui un nom de package valide.
Vous ne pouvez pas utiliser les services Firebase dans ce projet avant de l'avoir enregistré avec la plate-forme Firebase et de l'avoir lié à un projet Firebase. Bien que vous puissiez le faire manuellement à l'aide d'un navigateur, vous pouvez économiser beaucoup de temps et d'efforts en utilisant plutôt l'assistant Firebase Assistant d'Android Studio, qui automatise pour vous la plupart des étapes..
Commencez par ouvrir le projet Android natif intégré à votre projet Flutter en allant sur Outils> Flutter> Ouvrir pour l'édition dans Android Studio. Lorsque vous y êtes invité, veillez à ouvrir le projet dans une nouvelle fenêtre..
Dans la nouvelle fenêtre, allez à Outils> Firebase ouvrir l'assistant Firebase.
Ensuite aller à Analytics> Consigner un événement Analytics. Dans l'écran qui s'ouvre ensuite, appuyez sur le bouton Relier bouton.
Vous verrez maintenant une boîte de dialogue vous invitant à spécifier le nom de votre nouveau projet Firebase. Tapez le nom que vous préférez et appuyez sur la touche Se connecter à Firebase bouton.
À ce stade, Firebase Assistant termine automatiquement le processus d’enregistrement et ajoute un fichier nommé google-services.json, qui contient des détails de configuration importants, à votre projet.
Pour pouvoir lire le fichier JSON, vous avez besoin du plugin Google Services. Alors ouvrez le niveau racine build.gradle déposer et ajouter le classpath du plugin à l'intérieur du les dépendances section:
classpath 'com.google.gms: google-services: 4.0.1'
Ensuite, activez le plugin en ajoutant la ligne suivante à la fin du niveau de l'application build.gradle fichier:
appliquer le plugin: 'com.google.gms.google-services'
Vous pouvez maintenant fermer la nouvelle fenêtre et revenir au projet Flutter.
FlutterFire dispose de plugins indépendants Google Flutter pour la plupart des services Firebase. Pour ajouter les plugins comme dépendances dans votre projet Flutter, il vous suffit de les mentionner sous le les dépendances clé de la pubspec.yaml fichier.
Le code suivant vous explique comment ajouter des dépendances aux dernières versions des plug-ins associées aux services Analytics, Cloud Firestore et ML Kit:
firebase_analytics: ^ 1.0.3 cloud_firestore: ^ 0.7.3 firebase_ml_vision: ^ 0.2.0 + 1
Dans ce didacticiel, vous allez créer une application capable de numériser des codes QR et d’enregistrer les données qu’ils contiennent dans une base de données en nuage. Comme vous l'avez peut-être deviné, vous utiliserez le plug-in ML Kit en tant que décodeur de code QR et le plug-in Cloud Firestore en tant qu'interface avec la base de données..
Cependant, pour capturer les codes QR, vous aurez besoin d’Image Picker, un plugin permettant d’interagir avec la caméra. Voici comment vous pouvez l'ajouter comme une autre dépendance:
image_picker: ^ 0.4.10
Après avoir ajouté les dépendances, continuez et appuyez sur le bouton Les forfaits sont bouton pour installer tous les plugins.
Généralement, vous n'avez pas besoin d'écrire de code supplémentaire pour pouvoir utiliser Firebase Analytics dans votre application Flutter. Tant que le plug-in associé est installé, votre application transmettra automatiquement les données utilisateur à Firebase. Vous pouvez le vérifier en exécutant votre application immédiatement et en accédant à la console Firebase..
Si vous n’avez rencontré aucune erreur de configuration lors des étapes précédentes, vous pourrez voir les événements s’afficher dans la liste. StreamView panneau du tableau de bord Analytics.
Firebase ML Kit est un service Firebase lancé récemment qui vous permet de détecter des visages, de scanner des codes à barres et d’effectuer des opérations de reconnaissance optique de caractères sur n’importe quelle image ou vidéo. Son plugin FlutterFire offre une API très intuitive et concise. Utilisons-le maintenant pour décoder les codes QR.
Commencez par créer une mise en page contenant un bouton sur lequel les utilisateurs peuvent appuyer pour capturer des photos de codes QR. Le code suivant vous montre comment créer une présentation de conception de matériau avec un RaisedButton widget placé au centre:
Accentsconagua
void main () => runApp (new MaterialApp (accueil: new MyApp ())); La classe MyApp étend StatelessWidget construction du widget @override (contexte BuildContext) retour new Scaffold (corps: new Center (enfant: new RaisedButton (onPressed: () Plus de code ici), child: new Text ("Capture QR Code" )))); Si vous exécutez l'application maintenant, cela ressemblera à ceci:
Notez que le bouton est associé à un écouteur d'événements sur lequel vous avez appuyé. À l'intérieur de l'auditeur, vous pouvez utiliser le pickImage () méthode du ImagePicker classe pour capturer une photo. Comme la méthode s'exécute de manière asynchrone, vous devez y attacher un écouteur afin de recevoir son résultat. Le code suivant vous montre comment:
ImagePicker.pickImage (source: ImageSource.camera) .then ((photo) // Plus de code ici);
Une fois que vous avez capturé une photo, vous pouvez la transmettre à ML Kit. BarcodeDetector classe pour détecter les codes QR qu’elle peut contenir. Pour obtenir une instance de la classe, utilisez le barcodeDetector () méthode du FirebaseVision classe.
Le kit ML prend en charge de nombreux types de codes à barres. Pour rendre le processus de détection plus efficace, vous pouvez utiliser un BarcodeDetectorOptions objet pour spécifier le type de code à barres qui vous intéresse. Voici comment créer un détecteur pour codes QR uniquement:
BarcodeDetector detect = FireBaseVision.instance.barcodeDetector (BarcodeDetectorOptions (barcodeFormats: BarcodeFormat.qrCode));
Le détecteur ne pouvant pas gérer directement les fichiers d’image, vous devez convertir votre photo en un fichier. FirebaseVisionImage objet en utilisant son fromFile () méthode. Vous pouvez ensuite passer l'objet à la detectInImage () méthode du détecteur pour obtenir une liste des codes à barres détectés. La méthode s'exécute de manière asynchrone, vous devrez donc lui associer un écouteur..
détecteur .detectInImage (FirebaseVisionImage.fromFile (photo)) .then ((codes à barres) // Plus de code ici);
À l'intérieur de l'auditeur, vous aurez accès à une liste de code à barre objets. le valeur brute le champ de chaque objet contient des données brutes décodées. Pour le moment, pour garder les choses simples, utilisons un AlertDialog widget pour afficher les données brutes présentes dans le premier élément de la liste.
Le code suivant vous montre comment créer un simple AlertDialog widget ayant Texte des widgets pour son titre et son contenu, et un Bouton plat widget sur lequel vous pouvez appuyer pour le rejeter:
if (codes à barres.longueur> 0) code à barres var = codes à barres [0]; // Choisir le premier code à barres // Créer une boîte de dialogue d'alerte showDialog (contexte: contexte, constructeur: (contexte) retourne une nouvelle AlertDialog (titre: nouveau texte ("Contenu du code QR")), contenu: nouveau texte (codeBarre.rawValue), // Afficher les actions de valeur brutes: [new FlatButton (onPressed: () Navigator.of (context) .pop ();, child: new Text ("OK"))],); ); Vous pouvez exécuter l'application maintenant et essayer de numériser quelques codes QR.
Cloud Firestore est une base de données NoSQL que vous pouvez utiliser pour stocker les données de votre application dans le cloud. Son plugin FlutterFire propose des classes qui vous permettent d’effectuer des opérations CRUD de manière asynchrone..
Avant de commencer à l'utiliser, vous devez activer manuellement le service Cloud Firestore dans la console Firebase. Pour ce faire, allez au Base de données section de la console et appuyez sur le Créer une base de données bouton.
Lorsque vous êtes invité à définir les règles de sécurité de la base de données, choisissez le Démarrer en mode test option. Ce mode vous permet de commencer à utiliser la base de données immédiatement, mais elle n’est pas très sécurisée et est idéale à des fins de test..
Enfin, appuyez sur le Activer bouton pour créer la base de données.
De retour dans Android Studio, vous pouvez obtenir une référence à la base de données en utilisant le exemple domaine de la Firestore classe. En conséquence, ajoutez le code suivant à votre widget sans état:
var myDatabase = Firestore.instance;
Lorsque vous utilisez Cloud Firestore, vous devez stocker toutes vos données dans des documents. De plus, chaque document doit appartenir à une collection. Pour créer ou référencer une collection, vous devez utiliser le collection() méthode, qui attend une chaîne spécifiant le nom de la collection.
Une fois que vous avez accès à une collection, vous pouvez appeler sa ajouter() méthode pour ajouter un document.
Le code suivant, que vous pouvez ajouter juste avant l'appel du showDialog () Cette fonction vous indique comment créer un nouveau document, celui qui contient la valeur brute du code QR et un horodatage, et l'ajouter à une collection nommée qr_codes:
myDatabase.collection ("qr_codes"). add ("raw_data": barcode.rawValue, "time": new DateTime.now (). millisecondsSinceEpoch). then ((_) print ("Un document ajouté.") ;);Si vous exécutez à nouveau l'application et scannez un code QR avec celle-ci, vous pourrez maintenant voir le contenu du code QR dans la console Firebase..
Les services offerts par la plate-forme Firebase sont indispensables au développement d’applications mobiles modernes. Il existe des plugins officiels Google Flutter pour presque tous ces services. Dans ce tutoriel, vous avez appris à utiliser trois d’entre elles ensemble pour créer une application de numérisation de code QR extrêmement précise..
Pour en savoir plus sur Flutter et Firebase, consultez la documentation officielle..
