Expo Supabase MCP

Expo + Supabase Todo列表应用程序

Expo Router和Supabase中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积Todo列表应用程序。

技术栈

• 框架结构：世博会~54.0.23
• 路由选择：世博会路由器~6.0.14
• 后端：Supabase
• 言语：TypeScript
• 反应: 19.1.0
• React Native: 0.81.5
• 测试：Jest+React原生测试库

机能

• ✅ Todo添加、编辑和删除
• ✅ Todo切换完成状态
• ✅ 优先度设定（低、中、高、紧急）
• ✅ 类别分类（工作、个人、购物、健康、其他）
• ✅ 期限设定
• ✅ 添加说明
• ✅ 过滤（全部、未完成、完成）
• ✅ 排序（创建日期、优先级、期限、标题）
• ✅ 検索机能
• ✅ 查看统计信息
• ✅ 用户身份验证（签名、登录、注销）
• ✅ Expo MCP支持本地自动化工具

安装，安装

1.安装相关性

npm install

2.设置环境变量

.env.local创建文件并设置以下环境变量：

EXPO_PUBLIC_SUPABASE_URL=your-supabase-project-url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

注意: .env.local文件是.gitignore而需要与环境混合的每条反射光线，进行环境采样Git中所述修改相应参数的值。

3. Supabase项目设置

1. Supabase创建帐户
2. 创建新项目
3. 项目名称URL和anon key获得
4. .env.local设置为

4.创建数据库架构

Supabase的，之SQL Editor在下SQL请执行：

-- todosテーブルの作成
create table if not exists todos (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) on delete cascade,
  title text not null,
  description text,
  completed boolean default false,
  priority text default 'medium' check (priority in ('low', 'medium', 'high', 'urgent')),
  category text default 'other' check (category in ('work', 'personal', 'shopping', 'health', 'other')),
  due_date timestamp with time zone,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- RLS (Row Level Security) の有効化
alter table todos enable row level security;

-- ポリシーの作成: ユーザーは自分のTodoのみ閲覧・操作可能
create policy "Users can view their own todos"
  on todos for select
  using (auth.uid() = user_id);

create policy "Users can insert their own todos"
  on todos for insert
  with check (auth.uid() = user_id);

create policy "Users can update their own todos"
  on todos for update
  using (auth.uid() = user_id);

create policy "Users can delete their own todos"
  on todos for delete
  using (auth.uid() = user_id);

-- updated_atを自動更新する関数
create or replace function update_updated_at_column()
returns trigger as $$
begin
  new.updated_at = timezone('utc'::text, now());
  return new;
end;
$$ language plpgsql;

-- updated_atトリガーの作成
drop trigger if exists update_todos_updated_at on todos;
create trigger update_todos_updated_at
  before update on todos
  for each row
  execute function update_updated_at_column();

5.启动应用程序

# 通常の起動
npx expo start

# Expo MCPローカル自動化ツールを使用する場合
EXPO_UNSTABLE_MCP_SERVER=1 npx expo start

项目结构

expo-supabase-mcp/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx          # Todoリスト画面
│   │   ├── explore.tsx         # 探索画面
│   │   └── _layout.tsx         # タブレイアウト
│   ├── auth.tsx                # 認証画面
│   └── _layout.tsx             # ルートレイアウト
├── components/
│   └── todo/
│       ├── TodoItem.tsx        # Todoアイテムコンポーネント
│       ├── TodoForm.tsx        # Todo追加フォーム
│       └── TodoEditModal.tsx   # Todo編集モーダル
├── hooks/
│   ├── useTodos.ts             # Todoデータ管理フック
│   └── useAuth.ts              # 認証管理フック
├── lib/
│   └── supabase.ts             # Supabaseクライアント設定
├── types/
│   └── todo.ts                 # TypeScript型定義
├── __tests__/                  # テストファイル
└── migrations/                 # データベースマイグレーション

测试

# すべてのテストを実行
npm test

# ウォッチモードでテストを実行
npm run test:watch

# カバレッジレポートを生成
npm run test:coverage

Expo MCP 本地自动化工具

此项目包括：Expo MCP中所述修改相应参数的值。所有交互式UI在元素中testID中所述修改相应参数的值AI助手可以用模拟器操作应用程序。

安装，安装

1. expo-mcp安装软件包（已安装）

   npx expo install expo-mcp --dev

1. 启动开发服务器（启用MCP）

   EXPO_UNSTABLE_MCP_SERVER=1 npx expo start

1. MCP检查服务器连接

- Cursor的，之MCP单击功能区上Expo MCP确认服务器已连接 - 在您查看完详细信息后，单击MCP可能需要重新建立连接

可用的本地自动化工具

• automation_find_view_by_testid: testID在中查找视图
• automation_tap_by_testid: testID单击视图
• automation_take_screenshot：拍摄设备的屏幕快照
• automation_tap：点击特定坐标

testID配置

所有交互式UI在元素中testID进行动态观察时的轴心点。详情agents.md来修改标记元素的显示属性。

主要testID:

• 认证画面： login-email-input, login-password-input, login-submit-button
• Todo窗体： todo-input, todo-add-button, todo-advanced-button
• Todo项目： todo-item-{id}, todo-toggle-{id}, todo-edit-{id}, todo-delete-{id}

开発

运行代码

# iOSシミュレーターで起動
npx expo start --ios

# Androidエミュレーターで起動
npx expo start --android

# Webブラウザで起動
npx expo start --web

林特

npm run lint

参考资源

• 世博会路由器文档
• Supabase JavaScript客户端
• Supabase实时
• Supabase认证
• 世博会MCP文件

注意事项

• Expo那么环境变量EXPO_PUBLIC_需要前缀
• .env.local文件是Git中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积.gitignore），模板名称将采用不同的格式
• Supabase的，之RLS请正确设置策略
• Expo MCP如果使用的是本地自动化工具，请打开开发服务器EXPO_UNSTABLE_MCP_SERVER=1请在启动
• MCP重新建立服务器连接后，本地自动化工具可用可能需要很长时间

许可证

这个项目MIT在许可证下公开。