For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /es/docs/mobile/first-feature.md (or send Accept: text/markdown).
Construye tu primera funcionalidad
Un recorrido de extremo a extremo desde una nueva pantalla hasta datos verificados por el servidor.
Guía paso a paso para principiantes
Requisitos previos: lea las dos guías para principiantes a continuación, termine la configuración local de Mobile y abra este repositorio en su raíz en su editor. La configuración de Mobile va en apps/mobile/.env.local; Expo no lee el .env de la raíz. La vista previa necesita un backend accesible para datos reales.
Términos breves: un espacio de trabajo son los usuarios, datos y configuraciones separados de un equipo. El servidor es el backend confiable; Mantenga las claves del proveedor fuera del código del navegador y del teléfono. Una migración es un cambio de base de datos versionada que crea o actualiza tablas. Un modelo de IA es el motor que responde; el catálogo de modelos es la lista del servidor de ID de modelos disponibles y precios. Un proveedor es un servicio externo, como inteligencia artificial, correo electrónico o servicio de facturación. Un derecho es una concesión que permite que un espacio de trabajo utilice una función. Un webhook es un mensaje que un servicio envía al URL de otro servicio.
1. Abra .agents/skills/add-a-mobile-screen/SKILL.md —o pida a su agente de codificación que lo siga— y cree una pantalla pequeña, por ejemplo apps/mobile/app/(app)/ideas.tsx con su lógica en apps/mobile/src/ideas/.
2. Abra la nueva pantalla en su dispositivo a través de la vista previa en ejecución y confirme que se renderiza para un miembro con sesión iniciada.
3. Compruebe una cuenta cerrada y una cuenta de un segundo workspace: todo lo que deba permanecer privado debe volver denegado o ausente, porque el servidor hace cumplir el límite.
Para código personalizado, nombre la pantalla, los datos que muestra, quién puede verla y los errores a manejar. Dé a su agente de codificación esta tarea y pídale que lea AGENTS.md, .ai/PROJECT_CONTEXT.md y los espejos .ai/ de los archivos que tocará; que enumere archivos y verificaciones antes de editar; y que le muestre el diff. Use valores de ejemplo; nunca pegue un secreto real.
Crear la pantalla
Agregue un archivo de ruta bajo apps/mobile/app/(app)/: Expo Router convierte el archivo en una pantalla dentro de la pila con sesión iniciada. Compóngala a partir de los primitives de apps/mobile/src/ui (Screen, Card, Title, Detail, AppButton) para que herede el espaciado, la tipografía y los colores de la aplicación.
apps/mobile/app/(app)/ideas.tsx
apps/mobile/src/ideas/index.ts
apps/mobile/src/ideas/index.test.tsLeer y escribir a través del cliente tipado
Haga fetch a través de apps/mobile/src/api/client.ts, que adjunta la sesión almacenada a cada solicitud contra EXPO_PUBLIC_API_URL y devuelve errores tipados. Mantenga los payloads idénticos al contrato web: los mismos endpoints sirven a ambos clientes.
Si la pantalla lee datos del workspace, envuelva la llamada con los ayudantes de apps/mobile/src/offline/ para que un fallo de red pueda recurrir a la copia en caché, solo en un error de red, nunca después de un error de autenticación o permisos.
Verifica el acceso y la recuperación
Compruebe un miembro con sesión iniciada, un miembro de otro workspace, una sesión cerrada y el modo avión: los datos del miembro aparecen, los datos ajenos se deniegan, un dispositivo cerrado vuelve al inicio de sesión y la copia sin conexión solo se sirve en un error de red.
Pulir los estados
Dé a la pantalla estados de carga, vacío y error a través de los primitives compartidos, agregue cada nueva cadena a los cuatro catálogos i18n y conecte la ruta a la navegación de inicio o configuración para que un miembro pueda encontrarla.