Kết nối Supabase

Tổng quan

Supabase là một nền tảng backend mã nguồn mở cho phép người dùng lưu trữ dữ liệu và cung cấp chức năng kiểu backend. Bạn có thể kết nối với Supabase để giải quyết vấn đề đội ngũ Atoms của bạn chỉ lưu trữ trong bộ nhớ của trình duyệt, vốn có thể bị mất khi làm mới hoặc đóng. Bằng cách tích hợp Atoms với Supabase, bạn có thể biến website của mình thành một ứng dụng đầy đủ chức năng với lưu trữ bền vững và các tính năng nâng cao.

Xem thêm hướng dẫn tại đây:

Các lợi ích chính

Ngoài việc không cần kinh nghiệm phát triển, giải pháp này còn có thêm ba lợi ích chính:

1. Thiết lập nhanh: Khởi chạy backend của bạn và đẩy nhanh quá trình phát triển.
2. Khả năng mở rộng cao: Thích ứng với sự tăng trưởng của người dùng, cho phép dự án của bạn mở rộng mà không bị giới hạn.
3. Hiệu quả chi phí: Cung cấp gói miễn phí lý tưởng cho các dự án nhỏ và startup.

Kết nối Supabase với Atoms

Dưới đây là hướng dẫn ngắn để kết nối Atoms với Supabase.

1. Bắt đầu Tích hợp Supabase trong Atoms

   • Mở Cài đặt.

   • Chọn Connectors từ thanh bên trái.

   • Tìm connector Supabase và nhấp vào Kết nối.

     

   • Atoms sẽ hiển thị giao diện thiết lập kết nối để bạn làm theo.

2. Xác thực và cấu hình dự án của bạn

   Một cửa sổ bật lên sẽ xuất hiện, nhắc bạn đăng nhập vào tài khoản Supabase của mình.

   • Chọn tổ chức của bạn từ menu thả xuống.

   • Nhấp vào Authorize Atoms để cấp quyền cho tài khoản Supabase của bạn. (Kết nối hoàn tất trong vài giây – không cần cấu hình thủ công)

   • Sau khi được cấp quyền, bạn có thể:

     • Chọn một dự án Supabase hiện có từ danh sách, hoặc
     • Nhấp vào +Add New One để thêm một tổ chức mới ngay lập tức. (Nếu bạn cần hướng dẫn, Atoms Assistant luôn sẵn sàng hướng dẫn bạn cách Kết nối Supabase với Atoms.)

3. Cấu hình tự động

   • Sau khi dự án của bạn được chọn, Atoms sẽ tự động kết nối với dự án Supabase của bạn. Hệ thống sẽ thu thập cấu trúc cơ sở dữ liệu, các bảng và cài đặt bảo mật của bạn.
   • Khi bạn thấy thông báo "Supabase Connected", backend của bạn đã được cấu hình đầy đủ và sẵn sàng sử dụng.

Xác thực người dùng

Sau khi tạo app của bạn trong Atoms, bạn có thể muốn triển khai xác thực người dùng. Supabase Auth giúp đơn giản hóa việc thêm xác thực và phân quyền vào app của bạn. Trong quá trình này, Atoms sẽ hướng dẫn bạn qua hai phương thức: (1) Email và Mật khẩu và (2) Đăng nhập mạng xã hội (Google).

Email và Mật khẩu

1. Kết nối Supabase với Atoms

   • Đảm bảo bạn có một tài khoản Supabase hợp lệ.
   • Nhấp vào nút cấp quyền ở góc trên bên phải của giao diện chat để cấp quyền cho tài khoản Supabase của bạn.
   • Chọn dự án Supabase bạn muốn sử dụng.

2. Cho các Agent biết yêu cầu của bạn

   • Nhập yêu cầu của bạn trong chat. Ví dụ, bạn có thể chỉ cần nhập câu lệnh: "Thêm xác thực".
   • Thao tác này thường sẽ tạo một trang đăng nhập và đăng ký cơ bản được kết nối với hệ thống xác thực của Supabase.

3. Tạo người dùng để kiểm thử

   • Sử dụng giao diện đăng nhập/đăng ký mới được thêm để tạo một người dùng thử nghiệm.
   • Làm mới trang để xác minh rằng phiên người dùng vẫn được duy trì.
   • Ngoài ra, hãy vào bảng điều khiển Supabase của bạn, điều hướng đến Authentication > Users, và thêm thủ công một người dùng để kiểm thử.

4. Triển khai App của bạn

Đăng nhập mạng xã hội (Google)

1. Cấu hình Google OAuth trong dự án Supabase

   • Điều hướng đến trang Authentication trong bảng điều khiển Supabase của bạn.
   • Đi đến trang con Sign In/Up.
   • Tìm tùy chọn Google và bật công tắc để kích hoạt. (Để biết các bước cấu hình Supabase chi tiết, hãy tham khảo phần Cấu hình Google OAuth trong Supabase hoặc Supabase Docs.)

2. Cho các Agent biết yêu cầu của bạn

   • Nhập yêu cầu của bạn trong chat. Ví dụ: "Thêm xác thực Google".
   • Thao tác này sẽ thêm nút Continue with Google vào trang đăng nhập của bạn.

3. Kiểm thử xác thực Google

   • Đi đến trang đăng nhập.
   • Nhấp vào nút Continue with Google.
   • Đăng nhập bằng một tài khoản Google và xác minh rằng hồ sơ người dùng được cập nhật chính xác.
   • Hoàn tất luồng Google OAuth để đảm bảo người dùng được chuyển hướng trở lại app của bạn.

4. Triển khai App của bạn lên App World của Atoms

Cấu hình Google OAuth trong Supabase

1. Tạo một dự án Google Cloud

   • Truy cập Google Cloud Console

     • Mở Google Cloud Console và đăng nhập vào tài khoản Google của bạn.

   • Tạo dự án mới

     • Nhấp vào menu thả xuống ở trên cùng và chọn New Project.
     • Nhập tên dự án, chọn tài khoản thanh toán và nhấp vào Create.

2. Cấu hình thông tin xác thực Google OAuth

   • Thiết lập màn hình đồng ý

     • Trong thanh tìm kiếm, nhập OAuth và mở màn hình đồng ý OAuth.
     • Điền tên app của bạn, email hỗ trợ người dùng và các trường bắt buộc khác.
     • Chọn External hoặc Internal, sau đó nhấp vào Create.

   • Tạo OAuth Client ID

     • Nhấp vào Create OAuth Client, sau đó chọn OAuth Client ID.
     • Với Application Type, chọn Web application.
     • Trong Authorized redirect URIs, thêm URL callback từ bảng điều khiển Supabase.
     • Nhấp vào Create và ghi lại Client ID và Client Secret được tạo.

3. Cấu hình Google OAuth trong Supabase

   • Đăng nhập vào Supabase Dashboard

     • Mở Supabase Dashboard và đăng nhập vào dự án của bạn.

   • Bật Google OAuth

     • Điều hướng đến trang Authentication.
     • Trong phần Providers, tìm tùy chọn Google và bật nó lên.
     • Thêm Client ID và Client Secret đã tạo trước đó vào các trường tương ứng.

   • Lưu cấu hình

     • Nhấp vào Save để áp dụng các thay đổi.

Lưu trữ dữ liệu

Bạn cũng có thể muốn lưu trữ dữ liệu người dùng sau khi cấu hình xác thực người dùng cho web/app của mình.

Sau khi kết nối với Supabase, chỉ cần cho Atoms biết dữ liệu nào bạn muốn lưu trong cơ sở dữ liệu. Các agent sẽ tự động cấu hình các bảng cơ sở dữ liệu và tích hợp trực tiếp chúng vào UI của bạn.

1. Xác định yêu cầu của bạn

   • Nhập yêu cầu của bạn trong chat. Ví dụ: "Vui lòng đảm bảo rằng các bản ghi chuyến đi mới được lưu vào cơ sở dữ liệu".
   • Mô tả dữ liệu bạn muốn lưu trữ càng rõ ràng càng tốt.
   • Atoms sẽ tự động cấu hình cấu trúc cơ sở dữ liệu cần thiết dựa trên đầu vào của bạn.

2. Kiểm thử chức năng trong Atoms

   • Tạo dữ liệu mẫu trong app của bạn, chẳng hạn như thêm một vài "bản ghi chuyến đi" thông qua UI.
   • Lưu dữ liệu và làm mới trang. Dữ liệu sẽ được đồng bộ với cơ sở dữ liệu Supabase.
   • Đăng nhập vào Supabase và xác minh xem dữ liệu mới thêm có tồn tại trong cơ sở dữ liệu hay không.

3. Xác thực việc đồng bộ dữ liệu giữa Atoms và Supabase

   • Mở bảng điều khiển Supabase và điều hướng đến Table Editor.
   • Sửa đổi dữ liệu hiện có hoặc tạo dữ liệu mới.
   • Các thay đổi được thực hiện trong Supabase sẽ được đồng bộ theo thời gian thực tới app Atoms của bạn.
   • Quay lại Atoms và xác minh xem dữ liệu đã sửa đổi hoặc mới tạo có được hiển thị chính xác hay không.
   • Nếu dữ liệu đồng bộ thành công, thì cấu hình của bạn đã hoàn tất.

4. Triển khai App của bạn

Edge Functions

Supabase Edge Functions là các chương trình backend serverless được triển khai trên các nút máy chủ gần với người dùng của bạn. Chúng loại bỏ nhu cầu xây dựng và duy trì các máy chủ truyền thống, cho phép bạn chạy bất kỳ logic tùy chỉnh nào với độ trễ mạng thấp hơn và thời gian phản hồi nhanh hơn. Trong hầu hết các ứng dụng web, frontend (các nút, biểu mẫu, UI) xử lý các tương tác cơ bản, nhưng một số tác vụ quan trọng phải chạy ở backend, chẳng hạn như:

• Tự động gửi email chào mừng sau khi người dùng đăng ký;
• Gọi các API AI để phân tích hoặc chấm điểm nội dung khi biểu mẫu được gửi;
• Tích hợp cổng thanh toán của bên thứ ba và ghi lại chi tiết đơn hàng trong quá trình thanh toán.

Tất cả các tác vụ này đều được triển khai thông qua Edge Functions.

Các trường hợp sử dụng

Sử dụng Supabase Edge Functions trong Atoms, bạn có thể:

• Gửi email chào mừng: Tự động gửi email cho người dùng mới một lời chào mừng cùng hướng dẫn bước tiếp theo sau khi họ đăng ký, giúp tăng mức độ tương tác và trải nghiệm onboarding.
• Xử lý các biểu mẫu do người dùng gửi: Khi phản hồi, đăng ký hoặc bình luận được gửi, tự động tạo và gửi thông báo xác nhận (ví dụ: "Chúng tôi đã nhận được phản hồi của bạn và sẽ sớm xem xét") để người dùng biết thao tác của họ đã thành công.
• Lên lịch nhắc nhở: Thiết lập thông báo hằng ngày hoặc hằng tuần qua email hoặc push (cho cuộc họp, nhiệm vụ hoặc sự kiện) để giúp người dùng quản lý thời gian và duy trì năng suất.
• Tận dụng các dịch vụ AI: Sau khi người dùng nhập văn bản, tự động gọi các API AI như OpenAI để kiểm tra ngữ pháp hoặc viết lại thông minh, rồi trả lại kết quả đã tối ưu cho người dùng.
• Xử lý thanh toán trực tuyến: Khi người dùng bắt đầu thanh toán trên nền tảng thương mại điện tử hoặc dịch vụ của bạn, tích hợp với các cổng như Stripe để xử lý giao dịch an toàn và hiển thị rõ ràng các trang thành công hoặc thất bại cùng chi tiết đơn hàng.

Lưu trữ và quản lý khóa

Nhiều ứng dụng yêu cầu khóa hoặc thông tin xác thực API để kết nối với các dịch vụ bên thứ ba (ví dụ: Stripe, OpenAI). Khi Supabase được kết nối, Atoms cung cấp một cách an toàn để quản lý và sử dụng các bí mật này. Thông qua tích hợp của Atoms với Supabase, bất cứ khi nào một hàm cần bí mật, Atoms sẽ tự động phát hiện và nhắc bạn nhập giá trị cần thiết. Bạn chỉ cần nhấp vào nút "Add API Key" của Agent và nhập khóa của mình; sau đó Atoms sẽ mã hóa và lưu trữ khóa đó trong Edge Functions Secrets Manager của Supabase. Khi chạy, các khóa này được chèn vào hàm một cách an toàn, ngăn thông tin xác thực bị lưu ở dạng văn bản thuần.

Thêm và triển khai các hàm backend

Sau khi kết nối với Supabase, hãy cho Agent biết bạn cần gì:

• Nhập yêu cầu của bạn trong chat. Ví dụ: "Tạo một trang web gọi Gemini API để ước tính lượng calo trong thức ăn và trả về kết quả khi tôi tải lên ảnh món ăn."

• Sau khi Agent tạo mã, hai nút sẽ xuất hiện: Add API Key và View in Edge Function.

• Nhấp vào Add API Key.

• Nhập API key của bạn và nhấp vào Send.

• Nhấp vào View in Edge Function.

• Bạn sẽ được chuyển hướng đến trang Supabase Edge Function.

  Lưu ý bảo mật: Tất cả các khóa đều được mã hóa và lưu trữ trong Supabase; Atoms không thể truy cập chúng.

Câu hỏi thường gặp

Làm cách nào để thêm các tính năng backend của Supabase vào ứng dụng của tôi?

Tích hợp Supabase vào ứng dụng của bạn trong ba bước đơn giản:

• Nhấp vào nút cấp quyền ở góc trên bên phải của giao diện chat để cấp quyền cho tài khoản Supabase của bạn.
• Chọn và liên kết dự án Supabase bạn muốn sử dụng.
• Chia sẻ yêu cầu của bạn trong chat, và các agent sẽ phát triển các tính năng dựa trên dự án Supabase mà bạn đã kết nối.

Supabase có hỗ trợ đăng nhập mạng xã hội không?

Supabase hỗ trợ nhiều phương thức xác thực khác nhau, bao gồm:

• Email và Mật khẩu.
• Xác thực không dùng mật khẩu: Các tùy chọn như mật khẩu dùng một lần (OTP) hoặc magic link.
• Đăng nhập mạng xã hội: Hỗ trợ các nhà cung cấp bên thứ ba như Google, Twitter và GitHub.
• Xác thực qua điện thoại.
• Single Sign-On (SSO): Hỗ trợ SAML SSO.
• Đăng nhập ẩn danh: Cho phép người dùng đăng nhập ẩn danh.

Tôi có cần tạo một dự án Supabase riêng cho app của mình không?

Bạn có thể chọn một dự án Supabase hiện có hoặc tạo một dự án mới. Mỗi cuộc chat chỉ có thể kết nối với một dự án tại một thời điểm.

Sau khi kết nối với Supabase, kết nối có còn được giữ nguyên nếu tôi remix dự án của mình không?

Kết nối sẽ bị ngắt sau khi remix và cần được thiết lập lại. Ngoài ra, nếu một app trong App World do người dùng khác chia sẻ được kết nối với Supabase, người dùng khác sẽ không thể remix app đó.

Tôi có thể sử dụng một cơ sở dữ liệu Supabase cho nhiều dự án Atoms không?

Có, bạn có thể sử dụng một cơ sở dữ liệu Supabase cho nhiều dự án Atoms. Tuy nhiên, bạn cần quản lý các kết nối và cấu hình một cách cẩn thận.

Tại sao dự án của tôi không hiển thị trong các tổ chức Supabase?

Ở gói Supabase miễn phí, bất kỳ dự án nào không có hoạt động trong bảy ngày liên tiếp sẽ tự động bị tạm dừng. Trong danh sách Organizations của Atoms, hãy chuyển sang bộ lọc Inactive để xem bất kỳ dự án nào của bạn đã bị tạm dừng.

Tại sao tôi thấy

Supabase áp dụng ràng buộc OAuth một-một giữa mỗi tổ chức và một tài khoản Atoms. Nếu tổ chức “Test” đã được một người dùng Atoms khác cấp quyền trước đó, thì bất kỳ lần thử liên kết tiếp theo nào với một tài khoản khác sẽ bị từ chối với lỗi này. Để khắc phục, hãy mở thanh bên Supabase Dashboard trong Settings → API → OAuth Apps, xóa quyền cấp OAuth Atoms hiện có cho tổ chức đó, sau đó quay lại Atoms và kết nối lại bằng chính tài khoản của bạn.