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

Contenido del curso

Ecosistema Devin

Devin Cloud

Devin CLI

Devin Desktop

Integraciones en Devin

Despliegue y automatización con Devin

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:34

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

Curso de Devin AI

Clase 11 de 18

Clase 11 / 18

Recursos

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:

Instalar dependencias con npm.
Documentar y correr el lint.
Ejecutar el type check.
Hacer el export.
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.

Resumen

¿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].

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.

¿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].

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:

Instalar dependencias con npm.
Documentar y correr el lint.
Ejecutar el type check.
Hacer el export.
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.

¿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].

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.

Daniel Alfredo García Serna

Hace 23 días

📚 CLASE: CÓMO DEVIN CONVIERTE TU APP WEB EN MÓVIL

━━━━━━━━━━━━━━━━━━

🎯 IDEA PRINCIPAL

Devin puede tomar una app web existente y crear una versión móvil en un repositorio separado.

La máquina virtual puede instalar el entorno necesario, ejecutar un emulador Android y probar la aplicación de principio a fin.

━━━━━━━━━━━━━━━━━━

⚡ RESUMEN ULTRA RÁPIDO

🔵 El ejemplo convierte una app web en una aplicación móvil con React Native + Expo.
🟡 La versión móvil utiliza el mismo Supabase que la aplicación web original.
🟢 Devin crea un repositorio independiente para evitar mezclar web y móvil.
🔵 La máquina virtual puede instalar dependencias, compilar y ejecutar un emulador Android.
🟣 Devin también puede generar pruebas, ejecutarlas y entregar evidencia mediante videos y capturas.

━━━━━━━━━━━━━━━━━━

🔑 LO IMPORTANTE

🟡 No es una conversión automática: Devin construye una nueva interfaz móvil reutilizando conceptos y servicios existentes.
🔵 React Native permite desarrollar la interfaz móvil utilizando JavaScript/TypeScript.
🔵 Expo simplifica el empaquetado, ejecución y desarrollo de aplicaciones React Native.
🟡 Separar web y mobile en repositorios permite evolucionar ambas aplicaciones independientemente.
🟢 Reutilizar el mismo backend evita necesariamente duplicar usuarios, datos y lógica de servidor.
🔴 Compartir backend no significa que puedas reutilizar automáticamente toda la interfaz web.
🟡 Devin debe conocer qué funcionalidades de la aplicación original deben existir también en móvil.
🔴 Una app que compila correctamente todavía puede tener problemas de UX, navegación o comportamiento móvil.
🟡 En el ejemplo, Devin ejecutó seis pruebas y todas pasaron, además de detectar y corregir configuración faltante de ESLint.

━━━━━━━━━━━━━━━━━━

🧩 MODELO MENTAL

Web existente → Analizar funcionalidades → Nuevo repo móvil → React Native/Expo → Mismo backend → Emulador → Tests → Evidencia

🟢 Reutiliza datos y servicios cuando sea posible.
🟢 Rediseña la experiencia de usuario específicamente para móvil.
🟢 Valida el resultado ejecutándolo realmente en un dispositivo o emulador.

━━━━━━━━━━━━━━━━━━

🚀 ACCIONES PARA HOY

🟢 Elige una aplicación web pequeña que ya tengas funcionando.
🟢 Documenta sus funcionalidades imprescindibles para móvil.
🟢 Define qué datos y APIs puede reutilizar la versión móvil.
🟢 Pídele a Devin analizar primero la arquitectura antes de generar código.
🟢 Exige un repositorio móvil separado si quieres mantener independientes ambos proyectos.
🟢 Define pruebas para login, navegación, lectura y modificación de datos.
🟢 Ejecuta la aplicación en un emulador Android y revisa visualmente cada flujo.

━━━━━━━━━━━━━━━━━━

🟣 VENTAJA PROFESIONAL

🟣 La verdadera ventaja está en reutilizar backend + datos + lógica mientras adaptas la interfaz al dispositivo.
🟣 No le pidas a Devin simplemente “convierte mi web en una app”.
🟣 Hack: entrega funcionalidades, arquitectura, restricciones y criterios de aceptación antes de delegar.
🟣 Haz que el agente demuestre el resultado mediante build + tests + ejecución real.
🟣 Este patrón puede aplicarse a proyectos existentes sin reconstruir necesariamente todo el backend.

━━━━━━━━━━━━━━━━━━

📝 CIERRE

El principiante piensa: “quiero convertir mi página web en una app”.

El profesional separa las capas: reutilizar servicios y datos, adaptar la experiencia móvil y verificar el resultado en un entorno real.

La idea potente de esta clase es que el agente puede encargarse no solo de programar, sino también de preparar el entorno, ejecutar y demostrar la aplicación móvil.

Ecosistema Devin

Cómo Devin conecta modelos de IA sin atarte a uno

Devin Cloud, Desktop y CLI

Prepara tu workspace y repositorios

Devin Cloud

Crear un MVP desde Slack con Devin Cloud

Cómo prueba Devin tu app en una máquina virtual

Revisa, prueba y corrige con Devin

Devin CLI

Devin CLI: mergea PRs y corre Supabase local

Cómo transferir tareas del terminal a Devin Cloud

Devin Desktop

Cómo instalar y usar Devin Desktop paso a paso

Devin Desktop: revisa y termina tareas de la nube

Integraciones en Devin

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

Cómo conectar Devin a Supabase con MCP

Conectar el frontend a datos de producción con Devin

Cómo crear skills en Devin

Cuándo usar Devin Cloud, CLI o Desktop

Despliegue y automatización con Devin

Desplegar tu proyecto en Internet: Devin Apps vs Vercel

Cómo conectar Claude a Devin Desktop con ACP

Automatiza ShipLog con Devin y mide tu proceso

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

Progreso del curso

Ecosistema Devin

Devin Cloud

Devin CLI

Devin Desktop

Integraciones en Devin

Despliegue y automatización con Devin

Recursos

Recursos