Conceptos del Trabajo con Material Design y Machine Learning en Android – Parte 1

Hemos visto lo genial que es usar los elementos y utilidades Material Design para desarrollar aplicaciones para dispositivos móviles como Tablets, Smart TV’s, móviles, etc. Material Design también nos brinda la posibilidad de usar sus elementos para las aplicaciones que necesiten llevar acabo tareas de Aprendizaje Automático (Machine Learning), es decir aplicaciones Android inteligentes, en este artículo te voy a enseñar los elementos que puedes usar para crear este tipo de aplicaciones, vamos con el artículo.

Te recomiendo leer los siguientes artículos para que estés familiarizado con este Post

Si ya conoces estas herramientas, puedes continuar con el Post, no hay problema.

Hasta la Fecha de este Artículo Material Design se enfoca en 3 entornos en los cuales ofrece elementos necesarios para su correcto funcionamiento:

  • Detección de Objetos mediante la Cámara en vivo
  • Detección de Objetos de imágenes Estáticas
  • Escaneo de Códigos de Barras

En un futuro Material Design puede crear nuevos elementos para otras tareas con Machine Learning.

Detección de Objetos mediante la Cámara en vivo

Con Machine Learning el usuario puede identificar objetos del mundo real colocando la cámara de su dispositivo Android sobre uno de estos y realizar una búsqueda en la nube para obtener una información detallada.

En Android se usa el modo streaming de la API de Machine Learning de Firebase que detecta objetos para realizar una búsqueda visual y toma dicho objeto como una imagen (captura de entrada), esto ayuda a los usuarios a conocer o aprender más sobre los objetos que los rodean.

Frente a esto Material Design cubre esta demanda, con los elementos visuales UI que permite mostrar al usuario final esta función, a continuación como dice el dicho una imagen o mejor dicho un video vale más que mil palabras

En el  video anterior el usuario usa la cámara de sus dispositivo Android y el sistema realiza una búsqueda en tiempo real de una planta para obtener más información al respecto, el dispositivo busca en una base de Datos que cuente con información sobre plantas, puede usar la API de Wikipedia también.

Principios

La documentación para el trabajo con Material Design y Machine Learning menciona que debemos de tener en cuenta los siguientes principios

Instrucciones para guiar al usuario

Material Design recomienda crear instrucciones y guías para que el usuario sepa como realizar esta tarea mediante la cámara de su dispositivo Android, esto puede hacerse mediante una ventana de guía flotante

De esta manera el usuario aprenderá a manipular esta herramienta y cuando ya la domine, no será necesario mostrarle esta ventana de guía flotante.

Cámara Clara y Flexibe

Durante el diseño de esta interface es importante mantener la cámara clara y flexible para que el usuario tenga una buena experiencia, cualquier elemento que no sea accionable en la interface de la cámara en vivo debe ser eliminado para evitar la obstrucción de la cámara.

De esta manera la cámara podrá llevar acabo un mejor análisis del objeto a escanear.

Incluir motivo de Error

Si una acción no se lleva acabo, entonces debemos de informarle al usuario que ha pasado, esto lo podemos hacer usando el elemento Toast o Dialog en donde colocaremos un mensaje especificando que ha pasado

Con esta ayuda el usuario no se sentirá perdido, sabrá que hacer posteriormente y tu aplicación creará una mejor experiencia para el usuario.

Componentes

Esta funcionalidad de Detección de Objetos mediante la Cámara en vivo utiliza los componentes de Material Design existentes y los nuevos elementos específicos para hacer el trabajo con la cámara.

Si deseas obtener ejemplos y demos de estos nuevos elementos puedes consultar el código fuente en su respectivo repositorio GitHub de las aplicaciones con ML Kit (Machine Learning Kit) para Android e iOS

Estructura

La función de Detección de Objetos mediante la Cámara en vivo esta compuesto por los siguientes elementos

Describimos cada elemento de la interface:

  1. Barra superior de la aplicacion
  2. Retícula
  3. Marcador de Objeto
  4. Información sobre la herramienta
  5. Imagen u objeto detectado
  6. Ventana modal o Hoja de información inferior

Vamos a detallar cada elemento de la interface de Detección de Objetos mediante la Cámara en vivo.

Barra superior de la aplicacion

Mediante esta barra superior en la aplicación se proporciona acceso persistente a diferentes acciones como un botón para salir de la búsqueda del objeto, un botón para mejorar el brillo (usando el flash de la cámara), un botón de ayuda para solucionar los problemas de búsqueda.

Retícula

Este es un indicador visual que proporciona un objetivo con el fin de que los usuarios se concentren al detectar objetos con la cámara del dipositivo, este utiliza una animación te tipo pulsante que informa al usuario que la cámara del dispositivo esta buscando objetos activamente.

La retícula tiene los siguientes estados:

1.- El Sensing utiliza una animación pulsante para avisar que la aplicación está buscando objetos con la cámara del dispositivo.

2.- El proceso de inicio de la búsqueda de objetos ocurre despues de un tiempo determinado, esto lo especifica el Desarrollador en el código.

3.- Aviso de la necesidad de acercar la cámara al objeto a través del circulo central de la retícula para lograr la detección óptima del objeto que se va buscar información.

4.- Cualquier error que se detecta durante el análisis del objeto, cambia el borde de la retícula de un trazo sólido a un trazo separado con puntos.

Marcador de Objeto

La API de Detección y seguimiento de objetos de ML Kit cuenta con una opción para detectar un objeto destacado de entre todos los objetos que la cámara analiza.

Lo que hace esta opción es rastrear el objeto más grande que se encuentra cerca al centro de la cámara, una vez detectado el objeto se procede a marcarlo con un objeto con un borde rectangular continuo.

Información sobre la Herramienta

Este muestra un texto informando al usuario cuando esta apuntando con la cámara del dispositivo al objeto que desea analizar, puede ser un mensaje diciendole al usuario que debe de hacer y que no debe de hacer o mensajes similares de guía.

Imagen u objeto detectado

Cuando la cámara del dispositivo detecta un objeto, la API de Detección y seguimiento de objetos de ML kit crea una versión recortada de la imagen u objeto detectado, esta versión es usada para ejecutar una búsqueda  de información del objeto utilizando un modelo de clasificación de imágenes.

En esta ventana se gestionará:

– La confirmación del objeto detectado.

– Comparación con otras imágenes tras el resultado de la búsqueda.

– Explicar si hubo un error al analiar la imágen, por ejemplo si la imagen es de baja calidad o contiene varios objetos distractores alrededor del objeto.

Ventana modal o Hoja de información inferior

En este lugar la aplicación proporciona resultados de búsqueda visual, el diseño y contenido dependen de la aplicación, la cantidad de resultados y el nivel confianza de los resultados.

Si deseas conocer sobre los conceptos para la Experiencia del usuario, Temas y demas detalles te recomiendo leer la Documentación oficial del trabajo con Material Design y Machine Learning para la Detección de Objetos mediante la Cámara en vivo.

En el capitulo Nro 2 hablaremos de los conceptos sobre la Detección de Objetos de imágenes Estáticas.

Nota

  • En futuras versiones de Material Design para Machine Learning (Aprendizaje Automático), algunos de los elementos mencionados en este Post pueden ser retirados, mejorados o pueden lanzar nuevos elementos, ya que constantemente Material Design esta actualizando su conjunto de elementos para Machine Learning y otros entornos.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required