Share
Con Google Firebase, una de las plataformas sin servidor más potentes y versátiles disponibles en la actualidad, puede agregar fácilmente funciones esenciales como la administración de usuarios, informes de fallos, análisis, almacenamiento de datos en tiempo real e incluso aprendizaje automático a sus aplicaciones móviles. Para poder trabajar con la plataforma mientras usa el marco de Google Flutter, necesitará FlutterFire.
FlutterFire es una colección creciente de complementos oficiales de Flutter para Firebase. En este tutorial, te mostraré cómo usarlo para agregar tres servicios Firebase diferentes a una aplicación Flutter.
Para seguir este tutorial paso a paso, necesitarás:
Si no tienes el SDK de Flutter o el complemento Flutter, aprende a instalarlos aquí:
Arranca Android Studio y crea un nuevo proyecto Flutter. En el asistente de creación de proyectos, asegúrese de elegir Aplicación flutter Opción y asociar un nombre de paquete válido con él..
No puede usar los servicios de Firebase en este proyecto hasta que lo registre en la plataforma Firebase y lo vincule a un proyecto de Firebase. Aunque puede hacerlo manualmente usando un navegador, puede ahorrar mucho tiempo y esfuerzo utilizando el Asistente Firebase de Android Studio, que automatiza la mayoría de los pasos para usted..
Comience por abrir el proyecto nativo de Android que está incrustado dentro de su proyecto de Flutter yendo a Herramientas> Flutter> Abrir para editar en Android Studio. Cuando se le solicite, asegúrese de abrir el proyecto en una nueva ventana.
En la nueva ventana, vaya a. Herramientas> Firebase para abrir el Asistente Firebase.
Luego ve a Analytics> Registrar un evento de Analytics. En la pantalla que se abre a continuación, presione Conectar botón.
Ahora verá un cuadro de diálogo que le pedirá que especifique el nombre de su nuevo proyecto Firebase. Escriba el nombre que prefiera y presione Conectarse a Firebase botón.
En este punto, Firebase Assistant completará automáticamente el proceso de registro y agregará un archivo llamado google-services.json, que contiene importantes detalles de configuración, a su proyecto.
Para poder leer el archivo JSON, necesitará el complemento de Servicios de Google. Así que abre el nivel de raíz construir.gradle archiva y agrega el ruta de clase del plugin dentro del dependencias sección:
classpath 'com.google.gms: google-services: 4.0.1'
A continuación, active el complemento agregando la siguiente línea al final del nivel de aplicación construir.gradle expediente:
aplique el complemento: 'com.google.gms.google-services'
Ahora puede cerrar la nueva ventana y volver al proyecto Flutter..
FlutterFire tiene complementos independientes de Google Flutter para la mayoría de los servicios de Firebase. Para agregar los complementos como dependencias en su proyecto de Flutter, todo lo que necesita hacer es mencionarlos en la dependencias clave de la pubspec.yaml expediente.
El siguiente código le muestra cómo agregar dependencias para las últimas versiones de complementos asociados con los servicios de Analytics, Cloud Firestore y ML Kit:
firebase_analytics: ^ 1.0.3 cloud_firestore: ^ 0.7.3 firebase_ml_vision: ^ 0.2.0 + 1
En este tutorial, creará una aplicación que puede escanear códigos QR y guardar los datos que contienen en una base de datos en la nube. Como habrás adivinado, usarás el complemento ML Kit como decodificador de código QR y el complemento Cloud Firestore como interfaz de la base de datos.
Sin embargo, para capturar realmente los códigos QR, necesitará el Selector de imágenes, un complemento que le permite interactuar con la cámara. Así es como puedes agregarlo como otra dependencia:
image_picker: ^ 0.4.10
Después de agregar las dependencias, siga adelante y presione Paquetes consiguen Botón para instalar todos los complementos..
Por lo general, no tendrá que escribir ningún código adicional para poder utilizar Firebase Analytics en su aplicación Flutter. Mientras el complemento asociado esté instalado, su aplicación informará automáticamente los datos del usuario a Firebase. Puede verificar esto ejecutando su aplicación de inmediato y yendo a la consola Firebase.
Si no encontró ningún error de configuración en los pasos anteriores, podrá ver los eventos que aparecen en el StreamView panel del panel de Analytics.
Firebase ML Kit es un servicio Firebase recientemente lanzado que le permite detectar rostros, escanear códigos de barras y realizar operaciones de reconocimiento óptico de caracteres en cualquier imagen o video. Su complemento FlutterFire ofrece una API muy intuitiva y concisa. Usémoslo ahora para decodificar códigos QR.
Comience por crear un diseño que contenga un botón que los usuarios puedan presionar para capturar fotos de códigos QR. El siguiente código le muestra cómo crear un diseño de Material Design con un Botón levantado Widget colocado en el centro:
Accentsconagua
void main () => runApp (nuevo MaterialApp (home: new MyApp ())); la clase MyApp extiende StatelessWidget @override Widget build (BuildContext context) return new Scaffold (body: new Center (child: new RaisedButton (onPressed: () // Más código aquí, child: new Text ("Capture QR Code" )))); Si ejecuta la aplicación ahora, se verá así:
Tenga en cuenta que el botón tiene un detector de eventos presionado asociado. Dentro del oyente, puedes usar el pickImage () método de la Selector de imágenes clase para capturar una foto. Debido a que el método se ejecuta de forma asíncrona, debe adjuntarle un escucha para recibir su resultado. El siguiente código le muestra cómo:
ImagePicker.pickImage (fuente: ImageSource.camera) .then ((photo) // Más código aquí);
Una vez que hayas capturado una foto, puedes pasarla a ML Kit's Detector de código de barras Clase para detectar los códigos QR que pueda contener. Para obtener una instancia de la clase, use el Detector de código de barras () método de la FirebaseVision clase.
El kit ML es compatible con muchos tipos diferentes de códigos de barras. Para hacer que el proceso de detección sea más eficiente, puede utilizar un Código de barrasDetectorOptions objeto para especificar el tipo de código de barras en el que está interesado. Así es como crea un detector para códigos QR solamente:
BarcodeDetector detector = FirebaseVision.instance.barcodeDetector (BarcodeDetectorOptions (barcodeFormats: BarcodeFormat.qrCode));
Debido a que el detector no puede manejar archivos de imagen directamente, debe convertir su foto en un FirebaseVisionImage objeto usando su desde el archivo() método. A continuación, puede pasar el objeto a la detectInImage () Método del detector para obtener una lista de códigos de barras detectados. El método se ejecuta de forma asíncrona, por lo que tendrá que adjuntar un oyente.
detector .detectInImage (FirebaseVisionImage.fromFile (foto)) .then ((códigos de barras) // Más código aquí);
Dentro del oyente, tendrás acceso a una lista de Código de barras objetos. los valor bruto campo de cada objeto contiene datos descodificados en bruto. Por ahora, para mantener las cosas simples, usemos un AlertDialog Widget para mostrar los datos en bruto presentes en el primer elemento de la lista.
El siguiente código le muestra cómo crear un simple AlertDialog widget que tiene Texto widgets por su título y contenidos, y un Botón plano Widget que se puede presionar para descartarlo:
if (barcodes.length> 0) var barcode = barcodes [0]; // Seleccione el primer código de barras // Crear cuadro de diálogo de alerta showDialog (context: context, builder: (context) return new AlertDialog (title: new Text ("QR Code Contents"), content: new Text (barcode.rawValue), // Mostrar acciones de valor bruto: [new FlatButton (onPressed: () Navigator.of (context) .pop ();, child: new Text ("OK"))],); ); Puede ejecutar la aplicación ahora e intentar escanear algunos códigos QR.
Cloud Firestore es una base de datos NoSQL que puede usar para almacenar los datos de su aplicación en la nube. Su complemento FlutterFire ofrece clases que le permiten realizar operaciones CRUD de forma asíncrona en él.
Antes de comenzar a usarlo, debe habilitar manualmente el servicio Cloud Firestore en la consola Firebase. Para ello, ve a la Base de datos sección de la consola y pulse el Crear base de datos botón.
Cuando se le solicite que defina las reglas de seguridad de la base de datos, elija la Comience en modo de prueba opción. Este modo le permite comenzar a utilizar la base de datos inmediatamente, pero no es muy seguro y es ideal solo para fines de prueba.
Finalmente, pulse la tecla Habilitar botón para crear la base de datos.
De vuelta en Android Studio, puede obtener una referencia a la base de datos utilizando el ejemplo campo de la Firestore clase. En consecuencia, agregue el siguiente código a su widget sin estado:
var myDatabase = Firestore.instance;
Mientras utiliza Cloud Firestore, debe almacenar todos sus datos dentro de los documentos. Además, cada documento debe pertenecer a una colección. Para crear o hacer referencia a una colección, debe utilizar el colección() Método, que espera una cadena que especifique el nombre de la colección..
Una vez que tenga acceso a una colección, puede llamar a su añadir() método para agregar un documento a ella.
El siguiente código, que puede agregar justo antes de la llamada al showDialog () función, le muestra cómo crear un nuevo documento, que contiene el valor en bruto del código QR y una marca de tiempo, y lo agrega a una colección llamada qr_codes:
myDatabase.collection ("qr_codes"). add ("raw_data": barcode.rawValue, "time": new DateTime.now (). millisecondsSinceEpoch). Luego ((_) print ("One document added.") ;);Si ejecuta la aplicación nuevamente y escanea un código QR con ella, ahora podrá ver el contenido del código QR en la consola Firebase.
Los servicios ofrecidos por la plataforma Firebase son indispensables al desarrollar aplicaciones móviles modernas. Hay complementos oficiales de Google Flutter para casi todos esos servicios. En este tutorial, aprendió a usar tres de ellos juntos para crear una aplicación de escáner de código QR de alta precisión.
Para obtener más información sobre Flutter y Firebase, consulte la documentación oficial.
