Constrói a tua primeira funcionalidade

Passo a passo para iniciantes

Pré-requisitos: leia os dois guias para iniciantes abaixo, conclua a configuração local de Mobile e abra este repositório na raiz no seu editor. As configurações Mobile vão em apps/mobile/.env.local; o Expo não lê o .env da raiz. A pré-visualização precisa de um backend acessível para dados reais.

Termos rápidos: um espaço de trabalho consiste em usuários, dados e configurações separados de uma equipe. O servidor é o back-end confiável; mantenha as chaves do provedor fora do navegador e do código do telefone. Uma migração é uma alteração de versão do banco de dados que cria ou atualiza tabelas. Um modelo de IA é o mecanismo que responde; o catálogo de modelos é a lista do servidor de IDs e preços de modelos disponíveis. Um provedor é um serviço externo, como IA, e-mail ou serviço de cobrança. Um direito é uma concessão que permite que um espaço de trabalho use um recurso. Um webhook é uma mensagem que um serviço envia para o URL de outro serviço.

1. Abra .agents/skills/add-a-mobile-screen/SKILL.md — ou peça ao seu agente de codificação para segui-lo — e crie uma tela pequena, por exemplo apps/mobile/app/(app)/ideas.tsx com sua lógica em apps/mobile/src/ideas/.

2. Abra a nova tela no seu dispositivo através da pré-visualização em execução e confirme que ela renderiza para um membro com login.

3. Verifique uma conta desconectada e uma conta de um segundo workspace — qualquer coisa que deva permanecer privada deve voltar negada ou ausente, porque o servidor impõe o limite.

Para código personalizado, nomeie a tela, os dados que ela mostra, quem pode vê-la e os erros a tratar. Dê esta tarefa ao seu agente de codificação e peça-lhe para ler AGENTS.md, .ai/PROJECT_CONTEXT.md e os espelhos .ai/ dos arquivos que ele vai tocar; liste arquivos e verificações antes de editar; e mostre-lhe o diff. Use valores de exemplo; nunca cole um segredo real.

• Antes de começar
• Noções básicas sobre terminais
• Configuração local móvel
• Avisos do agente e memória do projeto

Criar a tela

Adicione um arquivo de rota sob apps/mobile/app/(app)/ — o Expo Router transforma o arquivo numa tela dentro da pilha com login. Componha-a a partir dos primitives de apps/mobile/src/ui (Screen, Card, Title, Detail, AppButton) para que herde o espaçamento, a tipografia e as cores do aplicativo.

apps/mobile/app/(app)/ideas.tsx
apps/mobile/src/ideas/index.ts
apps/mobile/src/ideas/index.test.ts

Ler e escrever através do cliente tipado

Faça fetch através de apps/mobile/src/api/client.ts, que anexa a sessão armazenada a cada requisição contra EXPO_PUBLIC_API_URL e retorna erros tipados. Mantenha os payloads idênticos ao contrato web — os mesmos endpoints atendem ambos os clientes.

Se a tela lê dados do workspace, envolva a chamada com os helpers em apps/mobile/src/offline/ para que uma falha de rede possa recorrer à cópia em cache — apenas em erro de rede, nunca após um erro de autenticação ou permissão.

Deixar o servidor decidir a propriedade

O servidor resolve o membro com login e o workspace ativo e delimita cada registro por workspaceId. O aplicativo exibe o que o servidor retorna; ele nunca envia um id de workspace em que o servidor deva confiar.

Se os dados de que você precisa não têm endpoint, adicione-o primeiro no backend — regras de negócio vivem no servidor. Um botão oculto no aplicativo não impõe acesso.

Verifique o acesso e a recuperação

Verifique um membro com login, um membro de outro workspace, uma sessão desconectada e o modo avião: os dados do membro aparecem, dados estranhos são negados, um dispositivo desconectado retorna ao login e a cópia offline só é servida em erro de rede.

• Cache de leitura offline
• Checklist de segurança Mobile

Refinar os estados

Dê à tela estados de carregamento, vazio e erro através dos primitives compartilhados, adicione cada nova string aos quatro catálogos i18n e ligue a rota à navegação de início ou configurações para que um membro possa realmente encontrá-la.