import { createClient } from "@supabase/supabase-js";

const supabaseUrl = "YOUR_SUPABASE_URL";
const supabaseAnonKey = "YOUR_SUPABASE_ANON_KEY";

const supabase = createClient(supabaseUrl, supabaseAnonKey);

5. 数据库操作

5.1 创建表

在 Supabase 仪表盘中，点击“Table Editor” -> “New table”创建表。例如，创建一个todos表：

id (int8, primary key)
title (text)
is_completed (bool)

5.2 插入数据

async function insertTodo() {
  const { data, error } = await supabase
    .from("todos")
    .insert([{ title: "学习Supabase", is_completed: false }]);

  if (error) {
    console.error("插入错误", error);
  } else {
    console.log("插入成功", data);
  }
}

5.3 查询数据

async function fetchTodos() {
  const { data, error } = await supabase.from("todos").select("*");

  if (error) {
    console.error("查询错误", error);
  } else {
    console.log("查询结果", data);
  }
}

5.4 更新数据

async function updateTodo(id, newTitle) {
  const { data, error } = await supabase
    .from("todos")
    .update({ title: newTitle })
    .eq("id", id);

  if (error) {
    console.error("更新错误", error);
  } else {
    console.log("更新成功", data);
  }
}

5.5 删除数据

async function deleteTodo(id) {
  const { data, error } = await supabase.from("todos").delete().eq("id", id);

  if (error) {
    console.error("删除错误", error);
  } else {
    console.log("删除成功", data);
  }
}

6. 实时功能

Supabase 利用 PostgreSQL 的复制功能提供实时订阅。例如，监听todos表的变化：

const todoSubscription = supabase
  .from("todos")
  .on("INSERT", (payload) => {
    console.log("新记录插入", payload);
  })
  .on("UPDATE", (payload) => {
    console.log("记录更新", payload);
  })
  .subscribe();

// 取消订阅
// todoSubscription.unsubscribe()

7. 身份验证

Supabase 提供多种身份验证方式，如邮箱密码、社交登录（Google、GitHub 等）。

7.1 注册用户

async function signUp(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
  });

  if (error) {
    console.error("注册错误", error);
  } else {
    console.log("注册成功", data);
  }
}

7.2 登录

async function signIn(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) {
    console.error("登录错误", error);
  } else {
    console.log("登录成功", data);
  }
}

7.3 获取当前用户

async function getCurrentUser() {
  const {
    data: { user },
    error,
  } = await supabase.auth.getUser();

  if (error) {
    console.error("获取用户错误", error);
  } else {
    console.log("当前用户", user);
  }
}

7.4 登出

async function signOut() {
  const { error } = await supabase.auth.signOut();

  if (error) {
    console.error("登出错误", error);
  } else {
    console.log("登出成功");
  }
}

8. 存储文件

8.1 上传文件

async function uploadFile(file) {
  const { data, error } = await supabase.storage
    .from("bucket_name") // 替换为你的存储桶名称
    .upload("file_path", file);

  if (error) {
    console.error("上传错误", error);
  } else {
    console.log("上传成功", data);
  }
}

8.2 获取文件 URL

async function getFileUrl(path) {
  const { data } = supabase.storage.from("bucket_name").getPublicUrl(path);

  return data.publicUrl;
}

9. 行级安全（RLS）

Supabase 使用 PostgreSQL 的行级安全策略来控制数据访问。在仪表盘中，可以为表设置策略。

例如，只允许用户查看自己的记录：

在“Authentication” -> “Policies”中，为todos表创建新策略。
设置策略名称，如“Users can view own todos”。
在“USING”表达式中添加：
```
auth.uid() = user_id
```
（注意：假设表中有一个user_id字段存储用户 ID）

10. 边缘函数

Supabase 边缘函数允许你在边缘运行代码，处理请求。

10.1 创建函数

在项目目录中，运行：

supabase functions new hello-world

这将在supabase/functions/hello-world/index.ts中创建一个函数模板。

10.2 部署函数

supabase functions deploy hello-world

10.3 调用函数

const { data, error } = await supabase.functions.invoke("hello-world", {
  body: { name: "Supabase" },
});

11. 总结

以上是 Supabase 的基本使用方法。Supabase 提供了强大的功能，使得构建全栈应用变得简单。你可以通过官方文档（https://supabase.com/docs）获取更多详细信息。

现在，你可以尝试创建一个简单的应用，例如一个待办事项列表，结合数据库、身份验证和实时功能，来加深理解。 ::: 学习 Supabase 是一个很好的选择！它是一个开源的 Firebase 替代方案，提供数据库、身份验证、实时功能、存储等后端服务。以下是系统化的学习路径和关键知识点：

一、Supabase 是什么？

核心定位：基于 PostgreSQL 的后端即服务（BaaS），提供：
- 实时数据库（PostgreSQL）
- 用户身份验证
- 文件存储
- 实时订阅
- 无服务器函数（Edge Functions）
优势：开源、SQL 灵活、与 PostgreSQL 生态无缝集成。

二、学习路径

1. 基础概念

PostgreSQL 基础：
- 理解表、行、列、主键、外键。
- 基础 SQL 查询（SELECT, INSERT, UPDATE, DELETE）。
Supabase 架构：
- 每个项目 = 1 个 PostgreSQL 数据库 + 1 组 Supabase 服务。
- 通过 仪表盘（Dashboard） 管理项目。

2. 快速上手

创建项目：
1. 注册 Supabase 账号。
2. 新建项目 → 获取 URL 和 anon key（用于客户端连接）。

连接数据库：

import { createClient } from "@supabase/supabase-js";
const supabase = createClient("YOUR_SUPABASE_URL", "YOUR_SUPABASE_ANON_KEY");

3. 核心功能实战

(1) 数据库操作

创建表（通过仪表盘或 SQL）：

CREATE TABLE todos (
  id SERIAL PRIMARY KEY,
  title TEXT,
  is_completed BOOLEAN DEFAULT FALSE
);

增删改查：

// 插入数据
const { data, error } = await supabase
  .from("todos")
  .insert([{ title: "学习 Supabase" }]);

// 查询数据
const { data: todos } = await supabase
  .from("todos")
  .select("*")
  .eq("is_completed", false);

(2) 实时订阅

监听数据变化：

const subscription = supabase
  .from("todos")
  .on("INSERT", (payload) => {
    console.log("新数据:", payload.new);
  })
  .subscribe();

(3) 用户认证

注册/登录：

// 注册
const { user, error } = await supabase.auth.signUp({
  email: "user@example.com",
  password: "password123",
});

// 登录
const { user, error } = await supabase.auth.signInWithPassword({
  email: "user@example.com",
  password: "password123",
});

保护数据：使用 行级安全策略（RLS） 限制用户访问自己的数据。

(4) 文件存储

上传/下载文件：

// 上传
const { data, error } = await supabase.storage
  .from("avatars")
  .upload("public/avatar1.png", file);

// 获取公开 URL
const { publicURL } = supabase.storage
  .from("avatars")
  .getPublicUrl("avatar1.png");

(5) Edge Functions（无服务器函数）

创建函数（需安装 CLI）：
```
supabase functions new hello-world
```

部署并调用：

const { data, error } = await supabase.functions.invoke("hello-world", {
  body: { name: "Supabase" },
});

4. 高级功能

数据库扩展：启用 PostGIS（地理数据）、pgvector（向量搜索）等。
数据迁移：使用 pg_dump 导入现有 PostgreSQL 数据。
性能优化：索引优化、连接池配置。
安全：配置 RLS 策略、API 密钥管理。

三、学习资源

官方文档：Supabase Docs（最权威！）
实战教程：
- Supabase 官方示例
- 构建全栈应用（React + Supabase）
视频教程：
- Supabase 官方 YouTube 频道
- 免费课程：The Net Ninja - Supabase Crash Course
社区：
- Discord 社区
- GitHub Discussions

四、常见问题

Q: Supabase 和 Firebase 的区别？
A: Supabase 使用 PostgreSQL（关系型数据库），Firebase 使用 NoSQL；Supabase 开源，Firebase 闭源。
Q: 如何处理大量数据？
A: 使用 PostgreSQL 的分区表、索引优化，或结合 Supabase 的读取副本。
Q: 是否支持移动端？
A: 是！提供 Flutter 和 React Native SDK。

五、实战项目建议

待办事项应用：实现增删改查 + 用户登录 + 实时同步。
博客系统：文章管理 + 用户评论 + 文件上传（图片）。
实时聊天应用：使用实时订阅 + 存储聊天记录。

六、调试技巧

查看日志：仪表盘 → Logs → 查看数据库/函数/认证日志。
本地开发：使用 Supabase CLI 本地运行项目：
```
supabase init
supabase start
```

总结

学习 Supabase 的关键是 动手实践：

从创建项目开始 → 2. 操作数据库 → 3. 添加认证 → 4. 实现实时功能 → 5. 部署上线。
遇到问题多查文档和社区，Supabase 的生态正在快速发展，保持跟进最新功能！

学习supabase

AI编程训练营