Cómo Devin convierte tu app web en móvil

Devin no se limita a un navegador: su máquina virtual también permite instalar herramientas de desarrollo, iniciar un emulador de Android y adaptar tu proyecto web para ejecutarlo como aplicación móvil. Si quieres probar tu app en Android sin salir del entorno ni tener una máquina propia, aquí ves el proceso completo con el caso real de ShipLog.

¿Cómo convierto un proyecto web en una app móvil con Devin?

Todo empieza con un prompt claro. En lugar de ejecutar la máquina virtual desde la CLI o el escritorio, se trabaja directamente con Devin en la nube para ahorrar ese paso [00:39].

La instrucción fue concreta: inspirarse en el proyecto ShipLog existente y crear un repositorio nuevo y separado para la versión móvil. Así queda un repo para la web y otro distinto para el móvil.

Las tecnologías pedidas fueron dos:

• React Native para el front-end de la aplicación móvil.
• Supabase como back-end, el mismo que ya usaba la web.

Devin decidió empaquetar el proyecto con Expo, que se encarga de empaquetar React Native con TypeScript [01:32]. Todo conectado al mismo Supabase con Magic Link, incluyendo proyectos, entradas y la cronología semanal.

¿Qué es Expo en React Native? Es la herramienta que usa Devin para empaquetar una app React Native con TypeScript, facilitando su compilación y ejecución sin configuración manual pesada.

¿Por qué Devin crea líneas nuevas y líneas diferentes?

Después de trabajar unos seis minutos y medio, Devin entregó 1312 líneas nuevas y 38 líneas diferentes [01:53].

¿Y por qué esa distinción? Porque toma el repositorio original como base fundamental y lo va modificando. Esas 38 líneas modificadas son ajustes sobre el proyecto web de partida, mientras que las 1312 líneas nuevas construyen la app móvil.

El resultado se entrega en un Pull Request dentro del nuevo repositorio, llamado shiplog-mobile. Para ejecutarlo, hay que seguir un orden concreto de comandos:

1. Instalar dependencias con npm.
2. Documentar y correr el lint.
3. Ejecutar el type check.
4. Hacer el export.
5. Inicializar con Expo.

Seguir estas reglas en orden es lo que permite ver el proyecto funcionando correctamente.

¿Cómo prueba Devin la app en un emulador de Android?

Como la función está en fase beta, aparece un botón de llamada a la acción que pregunta si quieres probar el proyecto en el navegador o en una máquina virtual [02:53].

Al elegir probar, ya no dice "navegador": ahora indica emulador de Android. Y aquí viene el aviso importante sobre el tiempo.

¿Cuánto tarda Devin en preparar un emulador Android? En este caso registró 30 minutos y 12 segundos, pero ese tiempo incluye iniciar la máquina, instalar todo el entorno y aprobar la aplicación. No es rápido, pero te ahorra montar todo eso por tu cuenta.

Si no tienes tu propia máquina ni los recursos necesarios, la máquina de Devin realiza estas pruebas por ti [03:28]. Antes de correr los tests, Devin genera una skill de testing, que funciona como un plan de lo que hay que probar según las características de la app, más una configuración inicial [03:46].

¿Qué entrega Devin después de ejecutar los tests?

Lo interesante llega al final: Devin no entrega solo un reporte escrito, también entrega un video que ilustra todo el proceso de pruebas [04:12].

En el ejemplo se ejecutaron seis tests y todos pasaron, ninguno falló [04:33]. El video muestra una línea de tiempo con el progreso completo: desde que se ejecutó la app en el emulador, agregando proyectos, modificando y probando cada funcionalidad. A la derecha aparece el título del test, el expect y si pasó o no.

Cuando un test no pasa, lo normal es corregir el código y volver a intentarlo. Además, genera capturas de pantalla de cada elemento y sección de la app.

Durante estas pruebas, Devin detectó que faltaba algo y decidió hacer una pausa para resolverlo:

• Faltaba agregar la configuración de ESLint.
• Hizo un commit adicional dentro del mismo PR.
• Añadió reglas básicas de ESLint al proyecto.

Ese commit quedó registrado como una colaboración entre el bot de integración de Devin y la cuenta personal del desarrollador [05:38]. Puedes abrirlo dentro de GitHub y revisar exactamente qué cambió.

La idea central es que la máquina virtual de Devin sirve para mucho más que crear un proyecto web: puede convertirse en el entorno que tu tarea necesite, compilar, ejecutar y verificar el resultado antes de entregarte el proyecto. ¿Ya probaste llevar alguno de tus proyectos web a móvil de esta forma? Cuéntame en los comentarios cómo te fue.