> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 构建你的第一个功能

从新建界面到服务器校验数据的端到端演练。

## 初学者演练

先决条件：阅读下面两篇入门指南，完成 Mobile 本地安装，并在编辑器中以根目录打开此存储库。Mobile 设置放在 `apps/mobile/.env.local`；Expo 不读取根目录的 .env。预览需要一个可访问的后端才能获取真实数据。

简而言之：工作区是一个团队的单独用户、数据和设置。服务器是可信后端；让提供商密钥远离浏览器和电话代码。迁移是创建或更新表的版本化数据库更改。人工智能模型是回答的引擎；型号目录是服务器上可用型号 ID 和价格的列表。提供商是一种外部服务，例如人工智能、电子邮件或计费服务。权利是允许工作区使用某项功能的授权。 Webhook 是一个服务发送到另一个服务的 URL 的消息。

1. 打开 `.agents/skills/add-a-mobile-screen/SKILL.md`——或让您的编码代理照它执行——并创建一个小界面，例如 `apps/mobile/app/(app)/ideas.tsx`，其逻辑放在 `apps/mobile/src/ideas/`。

2. 通过正在运行的预览在您的设备上打开新界面，确认它能为已登录成员正常渲染。

3. 检查未登录账户和第二个工作区账户——必须保密的内容应返回拒绝或为空，因为边界由服务器强制。

对自定义代码，写明界面名称、它显示的数据、谁可以看以及要处理的错误。把任务交给您的编码代理，并要求它先读 `AGENTS.md`、`.ai/PROJECT_CONTEXT.md` 以及将触碰文件的 `.ai/` 镜像文档；在编辑前列出文件和检查项；并向您展示 diff。使用示例值；切勿粘贴真实密钥。

[开始之前](https://supastack.dev/zh/docs/mobile/before-you-start.md)

[终端基础知识](https://supastack.dev/zh/docs/mobile/terminal-basics.md)

[手机本地设置](https://supastack.dev/zh/docs/mobile/ship-in-5-minutes.md)

[座席提示和项目内存](https://supastack.dev/zh/docs/mobile/agents.md)


## 创建界面

在 `apps/mobile/app/(app)/` 下添加一个路由文件——Expo Router 会把该文件变成已登录界面栈中的一个界面。用 `apps/mobile/src/ui` 的原语（Screen、Card、Title、Detail、AppButton）来组合它，使其继承应用的间距、字体和颜色。

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


## 通过类型化客户端读写

通过 `apps/mobile/src/api/client.ts` 获取数据，它会为每个针对 `EXPO_PUBLIC_API_URL` 的请求附带已存储的会话，并返回类型化错误。保持与 Web 契约一致的载荷——同一组端点同时服务两个客户端。

如果界面要读取工作区数据，请用 `apps/mobile/src/offline/` 中的辅助函数包装该调用，使网络故障能回退到缓存副本——仅限网络错误，绝不在认证或权限错误后回退。


## 让服务器决定所有权

服务器解析已登录成员和当前工作区，并按 `workspaceId` 限定每条记录。应用显示服务器返回的内容；它绝不发送需要服务器信任的工作区 id。

如果您需要的数据没有端点，请先在后端添加——业务规则在服务器上。应用里隐藏一个按钮并不能强制访问控制。


## 验证访问和恢复

检查已登录成员、另一工作区的成员、未登录会话和飞行模式：成员数据正常显示，外部数据被拒绝，未登录设备回到登录页，离线副本只在网络错误时提供。

[离线读取缓存](https://supastack.dev/zh/docs/mobile/offline.md)

[Mobile 安全检查清单](https://supastack.dev/zh/docs/mobile/security.md)


## 完善各种状态

通过共享原语为界面补上加载、空态和错误状态，把每个新字符串加入全部四个 i18n 目录，并把路由接入首页或设置导航，让成员真正能找到它。


## 下一篇

[用编码代理构建](https://supastack.dev/zh/docs/mobile/agents.md)