Construimos la app móvil de Plazbot AI en un día con IA. Sí, en un día.

¿Cómo fue posible? Porque antes de tocar una sola línea de código ya teníamos todo preparado: el mockup definido, los endpoints de la API de Plazbot expuestos y listos, una cuenta activa en el App Store, y un plan de acción claro para trabajar con Claude Code.

El stack fue: React Native + Expo + SignalR + Axios + Claude.

En este artículo te cuento paso a paso cómo lo hicimos, con los comandos exactos que usamos.

Antes de Empezar: Lo que ya teníamos listo

Este es el punto más importante. Vibecoding no es "hacer cualquier cosa rápido". Es poder ejecutar rápido cuando ya sabes exactamente qué quieres construir.

Antes de abrir la terminal ya contábamos con:

Mockup de la app — las pantallas diseñadas con el flujo de navegación claro
API REST de Plazbot — todos los endpoints documentados y funcionando
Hub de SignalR — el WebSocket para chat en tiempo real ya estaba en producción
Cuenta de Apple Developer — lista para publicar en App Store
Cuenta de Google Play — lista para publicar en Play Store
Claude Code — nuestro copiloto de IA para escribir código desde la terminal

Paso 1: Crear el Proyecto con Expo

Expo fue la pieza clave. Sin instalar emuladores, sin configurar builds manualmente — solo un código QR en la terminal y ya estás probando en tu celular en tiempo real. Eso solo nos ahorró horas.

npx create-expo-app@latest Plazbot-App-v2.0 --template blank-typescript
cd Plazbot-App-v2.0

Paso 2: Instalar las Dependencias

Con el proyecto creado, instalamos todo lo que necesitábamos:

Navegación (Expo Router)

npx expo install expo-router expo-linking expo-constants expo-status-bar expo-splash-screen

Estado Global y Comunicación

npm install @reduxjs/toolkit react-redux axios @microsoft/signalr

Almacenamiento Local

npx expo install @react-native-async-storage/async-storage expo-secure-store

UI, Animaciones y Gestos

npx expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
npm install @gorhom/bottom-sheet react-native-toast-message

Multimedia y Archivos

npx expo install expo-image-picker expo-document-picker expo-file-system expo-av

Notificaciones Push

npx expo install expo-notifications expo-device

Utilidades

npm install date-fns uuid

Paso 3: Probar en el Celular con Expo Go

Aquí es donde Expo brilla. Sin emuladores, sin builds largos:

npx expo start

Esto genera un código QR en la terminal. Escaneas con la app Expo Go en tu celular y ves los cambios en tiempo real. Cada vez que guardas un archivo, la app se recarga automáticamente.

Paso 4: Build y Publicación con EAS

Cuando la app estuvo lista, usamos EAS (Expo Application Services) para compilar y publicar:

npm install -g eas-cli
eas login

Build para iOS y Android:

eas build --platform ios --profile production
eas build --platform android --profile production

Publicar en las tiendas:

eas submit --platform ios
eas submit --platform android

El Rol de Claude Code

Claude Code fue nuestro copiloto durante todo el proceso. Desde la terminal, le dábamos contexto sobre lo que necesitábamos y él generaba los componentes, servicios, y la lógica de navegación.

El flujo de trabajo era:

Describir la pantalla o funcionalidad que necesitábamos
Claude Code generaba el código con el contexto del proyecto
Revisábamos y probábamos en tiempo real con Expo Go
Iterábamos sobre lo generado hasta que quedaba listo

Lo más poderoso fue que Claude Code entendía la estructura del proyecto, los tipos de TypeScript, los endpoints de la API, y podía generar código consistente con lo que ya existía.

¿Qué Hace la App?

La app no tiene todas las funcionalidades de la plataforma web. Tiene la principal: el chat en vivo para que los usuarios vean cómo responden los agentes en sus canales — incluyendo WhatsApp, Facebook, Instagram y Telegram — y puedan tomar control activando o desactivando el agente desde el móvil.

Era la funcionalidad más pedida por nuestros clientes.

Stack Completo

Categoría	Tecnología
Lenguaje	TypeScript
Framework Mobile	React Native
Plataforma	Expo
Navegación	Expo Router
Estado	Redux Toolkit
HTTP Client	Axios
Tiempo Real	SignalR
Almacenamiento	AsyncStorage + Secure Store
Notificaciones	Expo Notifications
Animaciones	Reanimated + Gesture Handler
Multimedia	Image Picker + Document Picker
Build	EAS (Expo Application Services)
Copiloto IA	Claude Code

Lecciones Aprendidas

1. Preparación > Velocidad El día de desarrollo fue rápido porque la preparación fue exhaustiva. Mockups, API, cuentas — todo listo antes de empezar.

2. Expo elimina la fricción No configurar emuladores ni builds manualmente fue un game-changer. Código QR, prueba en celular, iterar.

3. Claude Code funciona mejor con contexto Mientras más contexto le das (estructura del proyecto, tipos, endpoints), mejor es el código que genera.

4. Menos es más No intentamos replicar toda la plataforma web. Nos enfocamos en la funcionalidad más pedida por los clientes y la ejecutamos bien.

Conclusión

Construir una app móvil en un día suena a exageración, pero cuando tienes el backend listo, el diseño claro, las herramientas correctas y un copiloto de IA que entiende tu código — es completamente posible.

La clave no fue la velocidad. Fue la preparación.

Seguimos construyendo.

📱 Cómo Construimos la App Móvil de Plazbot en Un Día con IA

Kristian Garcia