jimu Mirror: Pruebas dinámicas de la interfaz de usuario Android

La depuración y realización de pruebas son actividades que se llevan a cabo en el desarrollo de software con la finalidad de localizar y eliminar errores o bien detector que parte del desarrollo no se ha realizado conforme a las especificaciones plasmadas en el diseño.  Parte de las pruebas se realizan mientras se codifica la aplicación y se requiere verificar  que el código escrito (incluido arrastras y soltar controles y la asignación de propiedades) se represente de forma adecuada en las interfaces graficas (formularios, pantallas, layouts, etc). Si hablamos de desarrollo móvil, las cosas se complican un poco más porque se necesita comprobar que las interfaces se vean bien en las pantallas de los dispositivos, lo que generalmente implica ejecutar la aplicación y esperar cierto tiempo para  observar los resultados en los equipos. Aquí es donde entra en acción jimu Mirror (JM), que se convierte en tu aliado para que esta actividad sea menos tediosa y más dinámica.

Lo modificado en el texto se aprecia en la pantalla del dispositivo

Lo modificado en el texto se aprecia en la pantalla del dispositivo

 

Que es jimu Mirror

JM es una herramienta que facilita el trabajo de los diseñadores y desarrolladores, la funcionalidad en esencia es otorgar vistas previas de la interfaz en desarrollo en la pantalla del dispositivo a medida que se realizan los cambios en el código sin necesidad de compilar una y otra vez (al menos no explícitamente).  El nombre en sí mismo es un singular acrónimo:

acronimomirror

Es decir, no más compilar, instalar y correr para ver los cambios en la interfaz de usuario en dispositivos reales.

Funcionalidad

JM es funcional para una gran cantidad de elementos dentro del desarrollo Android, entre ellos:

  • Intercambio dinamico de temas, estilos, atributos y  assets
  • Retroalimentación tacil, de gestos y animaciones
  • Vista previa en múltiples dispositivos físicos
  • Diseños de código en un estilo iterativo experimental
  • Pre visualización  de plantillas con vistas personalizadas
  • Asignación de atributos personalizados con muestras de datos
  • Uso de xml  para asigarn propiedades como texto, imagen y visibilidad
  • Llenado de listas y grids con diversos diseños
  • Pre visualización de elementos del actionbar, entre ellos los menús, iconos y títulos

El siguiente video muestra parte de las caracteristicas mencionadas:

Descarga e instalación

JM funcionara para diversos entornos de desarrollo, pero lo recomendado  es utilizarlo en Android Studio.

  • Descarga. Se encuentra disponible desde este sitio,  en la versión 2.3.1. Esto nos da como resultado un archivo zip: MirrorASPlugin-2.3-52.504-release.zip.
  • Plugin en Android Studio. Para su configuración es necesario indicar a Android Studio (AS) donde se localiza el archivo recién descargado
  • Settings>Plugins>Install plugin from disk…>Seleccionar la ruta que contiene el archivo. Presionar todos los botones OK que sean necesarios y reiniciar AS.

 

Configuración del plugin

Configuración del plugin

 

Consola Mirror

Después del reinicio, la consola puede abrirse de dos maneras:

  • Desde la barra de herramientas dar clic sobre el icono Open Mirror Console (1)
  • Desde la barra de estado dar clic sobre la opción Mirror (2)

En ambos casos se mostrara la Consola Mirror (3)

Para iniciar la consola de igual manera tenemos 2 formas:

  • Desde la barra de herramientas dar clic sobre el icono Star/Stop Mirror (4)
  • Desde los iconos a la extrema izquierda en la parte inferior Star/Stop Mirror (5)

En ambos casos, se iniciara la Consola Mirror (6)

La consola Mirror

La consola Mirror

 

Caso Práctico

  • A fin de realizar una pequeña práctica, utilizaremos un proyecto previamente creado que contenga un widget EditText, con el cual realizaremos un cambio de texto y cambio de una imagen. Es importante señalar que:
  •  JM solo funciona con dispositivos físicos, no con emuladores
  • Es necesario iniciar la Consola, tener habilitado el dispositivo para la depuración y conectar el mismo a la computadora a través del cable USB a fin de que los cambios se vena reflejados
  • Al ejecutar la consola, en pantalla del dispositivo aparecen todos los archivos de interfaces disponibles (archivos xml), es necesario seleccionar aquel sobre el que queremos realizar las pruebas
  • Después de cada cambio es necesario guardarlos, para un reflejo efectivo
  • No debe presionarse el botón Run ‘app’
layoutdisponible

Selección de layout de prueba

 

 El ejercicio

Prueba de Texto

texto

 

Prueba de Imagen

Para generar las imágenes puedes acudir a este link

imagen

 

Apuntes Finales

Para mayores informes, existe un completo tutorial para aquellos que deseen profundizar en la herramienta, importante señalar que la descarga es una versión de prueba de 30 días, tras ese periodo es necesario pagar $79.00 USD en el caso de tener la intención de continuar con la herramienta.