react课程18-Supabase

本节课来学习Supabase😘

（Jonas为什么这么搞笑，一边教学一边认真地搞笑😂）

（迄今为止学习了52h的视频，还剩32h，赶进度啊啊啊啊啊啊）

一、什么是Supabase

Supabase 是一个开源的后端即服务（Backend-as-a-Service, BaaS）平台，旨在帮助开发者快速构建现代全栈应用程序。它基于 PostgreSQL 数据库构建，提供了类似 Firebase 的功能，但保持了对开发者友好的开源特性。

1. 数据库

Supabase 的核心是基于 PostgreSQL，这是一个功能强大的关系型数据库。Supabase 在 PostgreSQL 的基础上提供了以下扩展和优化：

• SQL 支持：开发者可以直接通过 SQL 查询和操作数据库，而不仅仅依赖于 ORM 工具。
• 扩展性：可以使用 PostgreSQL 的功能，如触发器、存储过程和自定义函数，支持复杂查询和操作。
• 自动生成的 API：Supabase 会为数据库中的每个表自动生成 RESTful API，支持 CRUD 操作，无需额外编写后端代码即可操作数据。

2. 存储

Supabase 提供了类似 Amazon S3 的文件存储功能，帮助开发者管理和存储文件。存储功能包括：

• 对象存储：可以存储图像、视频、文档等任意类型的文件。
• 文件上传和下载：内置 API 支持文件上传和下载操作。
• CDN 集成：通过内置的 CDN 加速文件的传输速度，提高用户访问体验。
• 访问控制：可以设置文件的公开或私有访问权限。

3. 实时功能

Supabase 的实时功能基于 PostgreSQL 的复制机制，并通过 WebSockets 实现，允许客户端实时获取数据库中的数据变化。此功能适合需要高实时性的数据同步应用，如聊天应用、协作工具或实时数据监控：

• 数据变化监听：当数据库中的某条记录发生变化时，客户端可以实时接收到数据更新。
• 实时订阅：通过订阅表、行或事件，客户端可以随时保持与后端的实时同步。
• 低延迟：得益于 WebSockets 和 PostgreSQL 的强大性能，数据变化几乎是瞬时传递。

4. 自动生成的 API

Supabase 会为数据库中的每个表自动生成 RESTful 和 GraphQL API，开发者可以通过这些 API 直接与数据库交互。这减少了开发者编写复杂后端代码的需求。API 主要特性包括：

• 全自动：API 在数据库创建后即自动生成。
• RESTful：每个表对应一个完整的 CRUD API（创建、读取、更新、删除）。
• 分页、排序、过滤：API 支持丰富的查询参数，可以通过简单的 URL 实现分页、排序、数据筛选等高级功能。

5. 托管服务

虽然 Supabase 是开源的，但它提供了托管服务，可以免去服务器运维和管理的复杂性。托管服务提供的功能包括：

• 弹性扩展：可以根据应用规模自动调整资源，避免服务器过载。
• 自动备份：Supabase 提供了数据库的定期备份功能，确保数据安全。
• 监控和分析：可以查看数据库的运行状态、查询性能、错误日志等。

6. 客户端 SDK 和 API

Supabase 提供了多种客户端 SDK，支持不同的编程语言和框架：

• JavaScript/TypeScript SDK：最常用的 SDK，适用于 React、Vue、Next.js 等现代前端框架。
• Flutter SDK：适用于移动端开发，支持 iOS 和 Android。
• REST API：可以通过任何 HTTP 客户端访问 RESTful API，适用于跨平台应用开发。

7. 安全与权限

Supabase 提供了详细的安全和权限管理功能：

• **基于行级别的安全性 (RLS)**：允许开发者基于用户身份控制每个用户对特定行的访问权限。
• 角色管理：可以为用户分配不同的角色，以实现复杂的权限管理体系。

8. 开源与社区

Supabase 的最大特点之一是其开源性，所有核心代码均可在 GitHub 上获取，开发者可以自由地修改、扩展和贡献代码。开源的优势包括：

• 自由托管：开发者可以选择在自己的服务器上托管 Supabase，完全自主控制数据和服务。
• 活跃社区：Supabase 拥有一个活跃的开发者社区，提供丰富的学习资源、示例项目和支持。

9. 适用场景

Supabase 非常适合需要快速开发原型、MVP（最小可行产品）或全栈应用的开发者。其主要适用场景包括：

• 数据驱动应用：例如仪表板、实时监控、数据可视化等。
• 用户管理和社交应用：需要复杂的用户管理和认证功能。
• 移动端应用：通过 Flutter SDK 快速构建移动应用的后端。
• 实时功能需求：例如聊天应用、协作工具或其他需要数据实时同步的应用。

二、使用supabase创建tables

1. 用GitHub账号登陆后创建一个project

2. 思考需要的data table（本次项目几乎没有ui state而都是global state）

3. 创建table，并且思考table之间的连接（比如booking要将guest和cabin连接起来）

4. 在Authentication中的Policies选项中可以设置每个table的访问权限

5. 在API Docs中可以查看访问table的api

三、连接React项目和supabase

⭕npm install @supabase/supabase-js

⭕在services文件夹中新建supabase.js，内容如下：（从api docs搬运）

import { createClient } from '@supabase/supabase-js';
const supabaseUrl = 'https://mmyxdnpmmlqmyjxjypmw.supabase.co';
const supabaseKey = process.env.SUPABASE_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);

export default supabase;

✅将supabaseKey的内容替换成settings->API->Project API keys->(anon public)的key

⭕在services文件夹中建立apiCabins.js（为每个table都建立一个这样的文件，放置与api获取数据有关的函数）。查询api Docs目录选择想要查询的内容，copy相应js代码段到函数中。

（连接成功，好顺利……新技术就是好啊🤗）

⭕在supabase网站（个人项目主页的）的Storage中点击，创建两个Buckets：avatars（存储用户头像）；cabin-images（存储木屋图片）。均设置为public。图片可直接拖动过去，点击图片，点击，就可以直接在项目中访问它。在table中也可以将相应的url插入表单。