Aprende a transformar un dibujo hecho a mano en una aplicación interactiva con Gemini Canvas. Guía paso a paso con un ejemplo práctico e imágenes. ¿Alguna vez se te ocurrió una idea para una aplicación, pero la descartaste porque no sabes programar? Quizás imaginaste una herramienta para organizar tus actividades, llevar el control de tus gastos o simplemente resolver alguna tarea cotidiana.
Incluso puede que hayas dibujado en papel cómo te gustaría que funcionara. Ahora puedes aprovechar ese dibujo para crear una aplicación con Gemini Canvas, una herramienta de Google que utiliza inteligencia artificial para interpretar bocetos y generar código.
Basta con tomar una fotografía del diseño, subirla a Gemini y explicarle qué quieres que haga cada elemento. Para mostrar cómo funciona, utilizaremos un ejemplo sencillo: Mis tareas, una aplicación para organizar las actividades diarias y consultar cuáles hemos completado. 1. Comienza dibujando tu aplicación en papel
No necesitas saber de diseño ni utilizar programas especiales.
Una hoja de papel y un lápiz son suficientes para comenzar. Lo importante es que el dibujo permita entender cómo quieres organizar los elementos de la aplicación. En nuestro caso, vamos a crear una lista de tareas diarias.
La idea es que podamos agregar actividades, marcarlas cuando estén terminadas y consultar nuestro progreso. En la parte superior del dibujo escribiremos el nombre «Mis tareas».
More Read
Debajo colocaremos tres actividades de ejemplo, cada una acompañada de una casilla que podremos marcar cuando la terminemos:
Leer 20 minutos. Caminar.
Beber agua. También dibujaremos una barra horizontal que indique cuántas tareas hemos completado y, al final, un botón con el texto «Nueva tarea» para agregar otras actividades. Con esto ya tenemos lo necesario para comenzar. Toma una fotografía del boceto con tu teléfono, procurando que los textos y los distintos elementos se vean claramente. 2. Pide a Gemini Canvas que convierta el dibujo en una aplicación
Entra en Gemini con tu cuenta de Google.
En el cuadro donde normalmente escribes tus preguntas, busca la opción Canvas y selecciónala. A continuación, adjunta la fotografía del dibujo.
Gemini utilizará esa imagen como referencia para crear la interfaz, pero también necesitará que le expliques qué debe hacer la aplicación. No hace falta utilizar términos de programación. Puedes escribir las instrucciones tal como se las explicarías a alguien que va a desarrollar la herramienta. Para nuestro ejemplo, utilizaremos el siguiente mensaje:
Instrucciones para Gemini Canvas:
Quiero que conviertas el dibujo adjunto en una aplicación web llamada Mis tareas. Utiliza el diseño como referencia y procura mantener la distribución de sus elementos.
La aplicación debe mostrar inicialmente tres actividades: Leer 20 minutos, Caminar y Beber agua. Quiero poder marcar cada tarea cuando la termine, agregar otras nuevas y eliminar las que ya no necesite. Incluye una barra de progreso que muestre automáticamente el porcentaje de tareas completadas. Para el diseño, utiliza colores verdes, botones fáciles de identificar y una presentación que se adapte tanto a computadoras como a teléfonos móviles. También quiero que las actividades se guarden en el navegador para no perderlas cuando actualice la página. Crea el código y muéstrame una vista previa de la aplicación en Canvas para poder probarla.
A partir de estas instrucciones, Gemini intentará identificar los componentes del dibujo y escribir el código necesario para que funcionen. Es posible que el primer resultado no sea exactamente como lo imaginabas. Por ejemplo, puede interpretar de otra manera la posición de un botón o crear una barra de progreso con un diseño diferente. No representa un problema importante, porque puedes pedirle que modifique esos detalles. 3. Prueba la aplicación y haz los cambios que necesites
Una vez generado el código, podrás abrir la vista previa de Gemini Canvas y comprobar cómo funciona tu aplicación. En nuestro ejemplo, lo primero sería marcar una de las actividades como terminada.
More Read
Si todo funciona correctamente, la barra de progreso debería actualizarse. Supongamos que completamos dos de las tres tareas. La aplicación tendría que mostrar un progreso aproximado del 67 %. Si después agregamos una cuarta actividad, el porcentaje debería cambiar para reflejar que ahora tenemos dos tareas completadas de un total de cuatro, es decir, un 50 %. También conviene comprobar que el botón «Nueva tarea» permita escribir otra actividad y que sea posible eliminar las que ya no necesitamos. Una de las ventajas de trabajar con Gemini Canvas es que puedes seguir modificando la aplicación mediante instrucciones escritas. No tienes que regresar al dibujo original cada vez que quieras cambiar algo.
Por ejemplo, puedes pedirle:
«Quiero que el botón Nueva tarea sea más grande y tenga un verde más oscuro». «Cuando marque una tarea como completada, muévela automáticamente al final de la lista». «Agrega un botón para cambiar entre el modo claro y el modo oscuro». «Permite modificar el nombre de una tarea después de crearla». «Mejora la distribución de los botones para que resulte más cómodo utilizar la aplicación desde un teléfono». Gemini puede modificar el código existente para incorporar estos cambios. Después de cada modificación, vuelve a utilizar la vista previa para comprobar que las funciones anteriores siguen trabajando correctamente.
Si tienes conocimientos de programación, Canvas también permite revisar y editar el código. Además, puedes consultar la consola para investigar errores cuando algo no funciona como debería.
4. Comparte la aplicación o continúa desarrollándola
Cuando estés satisfecho con el resultado, puedes utilizar las opciones de Gemini Canvas para compartir tu aplicación con otras personas. Sin embargo, hay algo que conviene tener presente: una aplicación que funciona dentro de Canvas no necesariamente está preparada para utilizarse como un servicio completo en Internet. En nuestro ejemplo, le pedimos a Gemini Canvas que guarde las tareas en el almacenamiento local del navegador. Esto significa que las actividades pueden conservarse cuando actualizamos la página, siempre que el navegador mantenga esos datos. Pero si abres la aplicación desde otro dispositivo, las tareas no aparecerán automáticamente.
Para conseguirlo necesitaríamos un sistema que almacene la información en una base de datos y permita recuperarla desde diferentes equipos. Lo mismo ocurriría si quisiéramos que varias personas compartieran una lista de actividades o que cada usuario tuviera su propia cuenta. Estas funciones requieren un desarrollo adicional, aunque también podemos pedirle a Gemini que nos ayude a incorporarlas. Antes de compartir la aplicación, es recomendable probarla desde distintos navegadores y teléfonos. Comprueba especialmente qué sucede cuando agregas muchas tareas, eliminas actividades o actualizas la página.
El ejemplo de Mis tareas es bastante sencillo, pero sirve para entender lo que podemos hacer con esta herramienta. El mismo procedimiento podría utilizarse para crear una calculadora de gastos, un cuestionario, un juego de preguntas o una aplicación para registrar hábitos personales. La posibilidad de comenzar con un dibujo hace que resulte mucho más fácil experimentar con ideas que, de otra manera, quizás nunca llegaríamos a desarrollar.
No hace falta aprender a programar para crear un primer prototipo, aunque los proyectos más complejos seguirán necesitando pruebas, ajustes y, en algunos casos, conocimientos técnicos. Con Gemini Canvas puedes comenzar con una idea dibujada en papel, comprobar cómo funcionaría en la práctica y decidir si vale la pena seguir desarrollándola. Siguenos por Twitter a través de @Geeksroom y no te pierdas todas las noticias, cursos gratuitos y demás artículos.
También puedes seguirnos a través de nuestro canal de Youtube para ver nuestros vídeos, a través de Instagram para ver nuestras imágenes! O vía Bluesky si ya estás cansado de Twitter
