Cesar Vega
Feb 25 · 7 min read

Este artículo es una traducción de un artículo publicado originalmente en inglés por Chris Betz en Medium. Por favor, visita el siguiente enlace y recomienda el artículo original si te gusta el contenido:


He sido un fanático del código alguna vez, liberando muchas plataformas de desarrollo como Cordova (y frameworks de aplicaciones asociados, como Ionic) así como Xamarin. He estado vigilando a Flutter, la entrada de Google en la lucha. Hace poco salieron en su versión 1.0 y decidí darle una vuelta. Estaba un poco aprensivo al sumergirme ya que las aplicaciones de Flutter están escritas en Dart (de las cuales tengo poca experiencia), pero me animó la declaración de Google:

No se necesita experiencia previa en programación de Dart o móvil.

Con esa afirmación en mente, decidí recrear una aplicación que había escrito anteriormente usando Ionic + Firebase + Google Cloud Vision. Si quieres comprobarlo, el tutorial está disponible, así como el código fuente.

En este tutorial vamos a construir una aplicación que toma fotos de los elementos, utiliza ML Vision para etiquetar los elementos, y guarda la imagen y las etiquetas en Firebase Cloud Firestore and Storage. Si desea saltar al código fuente, está disponible aquí. Aquí hay un video del producto terminado:

¡Aquí vamos! He seguido las instrucciones de instalación proporcionadas para MacOS. Aunque no es tan fácil como una instalación de brew o npm, lo superé con facilidad. Asegúrate de ejecutar flutter doctor y sigue las instrucciones para instalar cualquier dependencia que falte.

Mi editor preferido es VS Code, que afortunadamente tiene plugins de Flutter y Dart disponibles. Ejecutando Flutter: Al ejecutar Flutter Doctor me pidió que señalara dónde estaba instalado mi SDK de Flutter, ¡y ya estaba todo preparado para empezar a escribir mi aplicación!

El primer paso es crear un nuevo proyecto usando los prácticos comandos VS Code que se describen aquí. Segundos después, el proyecto se configura incluyendo los archivos específicos de la plataforma iOS y Android. Viniendo de mi experiencia con Cordova encontré esto algo sorprendente ya que añadir una sola plataforma es un proceso separado (y a veces largo).

En este punto estamos listos para ejecutar la aplicación. No tengo ningún simulador (iOS) o emulador (Android) funcionando en este momento, así que doy un toque en No Devices en la barra de estado del código VS y hago clic en el dispositivo iOS que lanza automáticamente un simulador XR de iPhone. Volviendo al Código VS, presioné F5 y 16.2 segundos después la aplicación está ejecutándose en modo debug en el simulador. ¡Rápido! Por el tutorial cambio el texto y guardo main.dart que inicia un hot reload. 1.5 segundos después veo el siguiente texto en la pantalla. ¡Rápido!


Al igual que mi anterior aplicación y tutorial, Flutter Vision va a tomar una foto de un elemento, analizar la imagen utilizando ML Kit para Firebase en el dispositivo, y luego almacenar los datos en Firebase Cloud Firestore.

Primero, necesitamos poder invocar la cámara y guardar el archivo de imagen después de que el usuario tome una foto. Las instrucciones de instalación del plugin de la cámara están aquí. Asegúrate de hacer los cambios específicos de la plataforma que se describen aquí. Después de ver un ejemplo simple y un ejemplo más complejo actualicé mi aplicación para simplemente mostrar una vista previa de la cámara junto con un botón para tomar una foto. Después de tomar la foto, el nombre del archivo y la ruta se muestran mediante un toast. Es un poco largo para pegar aquí, así que comprueba el gist del código fuente. Es mejor probar con un dispositivo real ya que estamos usando la cámara. Conecte un dispositivo a su computadora y debería verlo en la barra de estado del Código VS. Presione F5 para iniciar una sesión de compilación y depuración. Nota: Se me pidió que seleccionara un Equipo en Xcode. Después de seleccionar uno, tenía la aplicación funcionando en mi teléfono. ¡Paso uno completo!


A continuación, necesitamos una forma de usar el Kit ML de Firebase. Después de una búsqueda rápida veo que Google tiene plugins de Firebase para Flutter: !FlutterFire! Para usar los servicios de Firebase necesitamos crear primero un proyecto de Firebase. Hay un gran tutorial aquí que explica cómo hacer esto. A continuación, debemos seguir de cerca los pasos descritos para manejar las configuraciones específicas de la plataforma. Ahora que tenemos un proyecto Firebase y hemos configurado nuestras plataformas, podemos empezar a usar el Firebase ML Kit. Vamos a añadir ML Kit a nuestra aplicación siguiendo las instrucciones de instalación. Para una prueba rápida, vamos a crear una función para manejar la detección de etiquetas e iterar a través de la lista de etiquetas devueltas por ML Vision y mostrarlas al usuario. Haremos que esto sea más útil más adelante.

Gist completo de los cambios aquí. Vamos a arrancar la aplicación de nuevo pulsando F5. ¡Funciona! Obsérvalo en acción:

A continuación, vamos a guardar la imagen y los datos de la etiqueta en Firestore. La última vez usamos la base de datos en tiempo real de Firebase — desde entonces Firebase ha lanzado Firestore, un potente almacén de datos NoSQL. Para configurar tu base de datos de Firestore, sigue las instrucciones que se indican a continuación, seleccionando el modo Test (Prueba) a efectos de dev/test (desarrollo/prueba). Recuerda que esto te deja totalmente abierto, así que asegúrate de cerrarlo con reglas de seguridad antes de ir a Producción. De vuelta al código — Flutter tiene un plugin disponible aquí que instalaremos. A continuación, después de tomar una foto y analizarla, guardémosla como un documento al que llamaremos item. Múltiples documentos serán organizados en una colección que llamaremos items. Crea una función que creará un nuevo item:

Luego reemplaza nuestro proceso de detección de etiquetas para llamar a esta nueva función:

Ahora, cuando tomamos fotos, podemos ver que los artículos de nuestra colección se añaden muy rápidamente. Para ser claros, esto significa: tomar una foto, analizar la foto para etiquetas usando ML Vision, y luego guardarla en una base de datos en la nube. En serio, esto es increíblemente rápido:

Ahora necesitamos almacenar nuestras imágenes. En la aplicación anterior, codificábamos en base64 los datos de las imágenes y la almacenábamos directamente en la base de datos en tiempo real de Firebase. No podremos almacenar datos de imágenes en Cloud Firestore debido a restricciones de tipo de datos. No te preocupes, almacenaremos el archivo de imagen en Firebase Storage y luego obtendremos la URL y la almacenaremos en el documento del item usando el plugin Firebase Storage. Aquí está nuestra función para manejar las subidas. Ésta, sube el archivo y luego espera al StorageUploadTask y toma el downloadURL:

Actualice nuestra función _addItem para guardar la URL:

Necesitamos una URL única, por lo que usaremos el práctico paquete uuid como en el ejemplo:

F5 de nuevo para probarlo:

En este punto, nuestra imagen y datos se almacenan en Firebase. A continuación, tenemos que mostrar al usuario la lista de imágenes con etiquetas. Vamos a reestructurar nuestra aplicación para que tenga 2 pantallas: una que se encargue de mostrar una lista de imágenes y etiquetas al usuario; otra que tome una foto y dé inicio al proceso de ML Vision. Vamos a crear una nueva pantalla, ItemListScreen, para mostrar una lista de tarjetas. Voy a adaptar los ejemplos aquí y aquí para que se ajusten a nuestras necesidades:

… y un widget de ItemsList (perdón por el formato, disponible en un gist aquí):

Cambiemos la pantalla de inicio a ItemsListScreen:

También deberíamos llevar al usuario de vuelta a la lista después de tomar una foto para que pueda ver los resultados añadiendo lo siguiente a la función detectLabels:

También decidí hacer algo de limpieza cambiando el nombre de FlutterVisionHome a CameraScreen ya que ahora tenemos más de una pantalla.

¡Ejecuta la aplicación por última vez para ver los resultados finales! Firebase ML Vision es muy rápido. Junto con Flutter pudimos obtener una aplicación rápida que podemos ejecutar tanto en iOS como en Android en horas, no en días. Increíble. Si eras como yo y dudabas en probar Flutter porque no conocías a Dart. ¡Dale una oportunidad hoy!

El código fuente está disponible aquí. Siéntete libre de abrir un issue allí si te encuentras en problemas o házmelo saber en los comentarios. ¡Gracias por escuchar!

Telegram: https://t.me/flutter_dart_spanish

Slack: http://bit.ly/FlutterDevsEnEspa

Comunidad Flutter

Artículos e Historias de la Comunidad de Flutter

    Cesar Vega

    Written by

    Systems Engineer, postgrade in Software Development, postgrade in Information Security

    Comunidad Flutter

    Artículos e Historias de la Comunidad de Flutter

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade