En la segunda parte de estos artículos dedicados a la creación de aplicaciones con M5Stick, te explico como instalar UIFlow para que empieces a desarrollar tus propios programas.
Introducción
Para poder crear tus aplicaciones con M5Stick y UIFlow necesitarás instalar en tu M5Stick un software especial que se denomina firmware, el firmware de UIFlow.
Si tu M5Stick es nuevo y tiene un programa de demo que te muestra las distintas capacidades del dispositivo o si le has cargado otro tipo de software, deberás borrarlo e instalar este firmware siguiendo lo pasos que te describo a continuación.
Preparación
Antes de comenzar la instalación, debes prepararte completando dos tareas: Instalar un driver en tu computadora para que reconozca al M5Stick y pueda comunicarse con él y descargar el programa M5Burner.
Instalación del driver
El M5StickC Plus2 incorpora el chip CH9102 para comunicarse a través del puerto USB. Para que tu computadora lo reconozca, es indispensable que instales en ella el driver adecuado.
El driver puede ser descargado desde la página de M5Stack (en general da menos problemas el que tiene por nombre CH9102_VCP_SER_Windows). El procedimiento para su instalación es el mismo que se debe seguir para cualquier otro tipo de driver.
Descarga de M5Burner
M5Burner es un programa que te facilita la grabación de cualquier firmware en un dispositivo M5Stack. En el caso particular del M5Stick, lo puedes usar para grabar el firmware de UIFlow1 o UIFlow2 (hay dos versiones, luego te contaré las diferencias) y algunos otros dentro de los firmware oficiales. Pero además, hay una gran cantidad de firmware no oficial para distintas aplicaciones (como el famoso Nemo y muchos otros mas).
M5Burner se puede descargar desde el sitio de M5Stack. Elige la versión adecuada a tu sistema operativo.
Al terminar la descarga tendrás un archivo comprimido (ZIP). Descomprimelo dentro de una carpeta.
Ejecuta el programa M5Burner. No requiere instalación.
Con el driver instalado y el programa M5Burner funcionando ya puedes continuar con la grabación del firmware.
Grabación del firmware
Descarga
En el M5Burner, elije el dispositivo del menú de la izquierda (StickC) para filtrar y dejar sólo los firmware aplicables a ese dispositivo. También puedes hacer click en “Only Official” para que te muestre solamente los firmware oficiales de M5Stack.
Como te dije al principio, hay dos versiones de UIFlow: UIFlow1 y UIFlow2. La segunda tiene una interfaz mas moderna y la posibilidad de almacenar tus proyectos en la nube, entre otras cosas. La versión 1 tiene mas bloques de funciones, permite el uso del idioma español y algunas cosas mas. Con el tiempo seguramente la versión 2 reemplazará a la 1, pero aún está en desarrollo, por lo que para este tutorial seguiré con la versión mas antigua.
UIFlow1
Si bien UIFlow1 es la versión mas antigua, no significa que no siga recibiendo mejoras y actualizaciones.
Si te desplazas mas abajo, verás el firmware de UIFlow1. Mira con atención que sea el correspondiente a tu dispositivo (M5StickC Plus2 en mi caso).
Dale click al botón de Download para descargar el firmware a tu computadora.
Inicio de sesión
Antes de continuar, será necesario que inicies sesión en M5Stack si es que no lo has hecho. En la parte superior derecha verás el icono de una persona. Dale click e introduce tu nombre de usuario y contraseña. Si aún no lo tienes, deberás registrarte antes haciendo click en el botón Register.
Grabación
Conecta el dispositivo a la computadora usando el cable USB-C.
Ahora si ya puedes instalar el firmware dando click al botón Burn. Primero te pedirá que confirmes el puerto y la velocidad de comunicación (si recibes mensajes de error en este paso prueba con velocidades mas bajas).
Para borrar todo el contenido anterior del dispositivo primero pulsa Erase.
Una vez finalizado el borrado ya puedes volver a pulsar Burn y luego Start.
Antes de comenzar te pedirá que configures los datos de la red Wifi (nombre de la red y contraseña)
Una vez hecho esto y cuando pulses Next se iniciará el proceso de grabación.
Al finalizar sin errores, te aparecerá el siguiente mensaje:
Notarás que el M5Stick se reinicia, indicando que el proceso finalizó con éxito.
Iniciando UIFlow
Para comenzar a trabajar con UIFlow puedes abrir el editor online en la dirección flow.m5stack.com
Verás una pantalla de inicio en la que tendrás que elegir la versión (recuerda que es la 1) y pulsar Confirm.
UIFlow Desktop IDE
Existe una versión Desktop de UIFlow, que funciona sin necesidad de conexión a Internet, pero ya no recibe actualizaciones.
API Key
Al terminar la grabación del firmware el M5Stick se reiniciará y verás en su pantalla un código que es el API Key. El API key identifica al dispositivo M5Stack y permite la comunicación con el editor online de UIFlow.
Si miras en la barra de estado de UIFlow, abajo a la izquierda, verás que falta cargar esta API Key, que se muestra como Desconocida (Unknow).
Si haces click en el ícono de la llave, se abrirá una ventana de configuración. Introduce en ella el API Key del dispositivo.
Aprovechamos para configurar el idioma a Español y mas abajo elegimos el dispositivo
Al darle OK bajo la barra de estado cambia a Connected
Ejemplo
El siguiente es un sencillo programa de ejemplo que muestra en la pantalla del M5Stick el clásico mensaje “Hola Mundo!”.
Se usan tres elementos: el título (title) y dos etiquetas (label) cada una para contener un texto. Los distintos bloques modifican parámetros de estos elementos como color de texto, de fondo, tamaño de letra, etc.
En sucesivos artículos te iré explicando los distintos bloques que tiene UIFlow y para que sirve cada uno de ellos.
Mas info
Documentación del M5StickC Plus2 en el sitio oficial de M5Stack
Editor online de UIFlow (versiones 1 y 2)
Página de descargas de drivers y M5Burner en el sitio oficial de M5Stack
Conclusiones
En este artículo te conté el paso a paso para grabar el firmware de UIFlow en tu M5Stick para que empieces a desarrollar tus propias aplicaciones. Vimos como instalar el driver necesario y el programa “grabador”, el M5Burner. Luego vimos como seleccionar y descargar el firmware necesario y te epliqué las diferencias entre UIFlow versión 1 y 2. Finalmente, te describí el procedimiento para grabar el firmware y arrancar UIFlow. Para terminar, te dejé un sencillo programa de ejemplo.
Espero que este tutorial te haya sido de ayuda para comenzar a transitar por el fascinante mundo de M5Stack y las infinitas posibilidades que nos ofrece. En próximos artículos te compartiré mas tutoriales y proyectos de ejemplo.