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
- Que es Machine Learning, Historia y otros detalles
- Que es Material Design, como usarlo y más detalles
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:
- Barra superior de la aplicacion
- Retícula
- Marcador de Objeto
- Información sobre la herramienta
- Imagen u objeto detectado
- 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.