Atoms
MemulaiFiturIntegrasiTips & TrikPaket & PenagihanLog Perubahan
Konektor

Koneksi Supabase

Dengan Supabase, Anda dapat dengan mudah mengonfigurasi backend untuk website Anda—tanpa memerlukan pengalaman pengembangan.

Gambaran Umum

Supabase adalah platform backend open-source yang memungkinkan pengguna menyimpan data dan menyediakan fungsionalitas seperti backend. Anda dapat terhubung dengan Supabase untuk mengatasi masalah bahwa tim Atoms Anda hanya menyimpan di memori browser, yang dapat hilang saat refresh atau ditutup. Dengan mengintegrasikan Atoms dengan Supabase, Anda dapat mengubah website Anda menjadi aplikasi yang berfungsi penuh dengan penyimpanan persisten dan fitur lanjutan.

Lihat petunjuk selengkapnya di sini:

Keunggulan Utama

Selain tidak memerlukan pengalaman pengembangan, ada tiga keunggulan utama lainnya:

  1. Pengaturan Cepat: Siapkan backend Anda dan percepat proses pengembangan Anda.
  2. Sangat Skalabel: Beradaptasi dengan pertumbuhan pengguna, memungkinkan proyek Anda berkembang tanpa batasan.
  3. Hemat Biaya: Menawarkan tingkatan gratis yang ideal untuk proyek kecil dan startup.

Menghubungkan Supabase ke Atoms

Berikut adalah panduan singkat untuk menghubungkan Atoms dengan Supabase.

  1. Mulai Integrasi Supabase di Atoms

    • Buka Settings.

    • Pilih Connectors dari sidebar kiri.

    • Temukan konektor Supabase dan klik Connect.

    • Atoms akan menampilkan antarmuka pengaturan koneksi yang dapat Anda ikuti.

  2. Autentikasi dan Konfigurasikan Proyek Anda

    Jendela pop-up akan muncul, meminta Anda untuk masuk ke akun Supabase Anda.

    • Pilih organisasi Anda dari menu dropdown.

    • Klik Authorize Atoms untuk mengotorisasi akun Supabase Anda. (Koneksi selesai dalam hitungan detik – tidak perlu konfigurasi manual)

    • Setelah diotorisasi, Anda dapat:

      • Memilih proyek Supabase yang sudah ada dari daftar, atau
      • Klik +Add New One untuk langsung menambahkan organisasi baru. (Jika Anda memerlukan panduan, Asisten Atoms tersedia untuk memandu Anda dalam Menghubungkan Supabase ke Atoms.)

  3. Konfigurasi Otomatis

    • Setelah proyek Anda dipilih, Atoms akan secara otomatis terhubung ke proyek Supabase Anda. Atoms akan mengambil struktur basis data, tabel, dan pengaturan keamanan Anda.
    • Saat Anda melihat notifikasi "Koneksi Supabaseed", backend Anda telah sepenuhnya dikonfigurasi dan siap digunakan.

Autentikasi Pengguna

Setelah membuat app Anda di Atoms, Anda mungkin ingin menerapkan autentikasi pengguna. Supabase Auth mempermudah penambahan autentikasi dan otorisasi ke app Anda. Dalam proses ini, Atoms akan memandu Anda melalui dua metode: (1) Email and Password dan (2) Social Logins (Google).

Email and Password

  1. Hubungkan Supabase dengan Atoms

    • Pastikan Anda memiliki akun Supabase yang valid.
    • Klik tombol otorisasi di sudut kanan atas antarmuka chat untuk mengotorisasi akun Supabase Anda.
    • Pilih proyek Supabase yang ingin Anda gunakan.

  2. Beri Tahu Agen tentang Kebutuhan Anda

    • Masukkan kebutuhan Anda di chat. Misalnya, Anda cukup memberi prompt: "Tambahkan autentikasi".
    • Ini biasanya akan menghasilkan halaman login dan pendaftaran dasar yang terhubung ke sistem autentikasi Supabase.

  3. Buat Pengguna untuk Pengujian

    • Gunakan antarmuka login/pendaftaran yang baru ditambahkan untuk membuat pengguna uji.
    • Refresh halaman untuk memverifikasi bahwa sesi pengguna tetap tersimpan.
    • Sebagai alternatif, buka dashboard Supabase Anda, navigasikan ke Authentication > Users, lalu tambahkan pengguna secara manual untuk pengujian.

  4. Deploy App Anda

Social Logins (Google)

  1. Konfigurasikan Google OAuth di Proyek Supabase

    • Navigasikan ke halaman Authentication di dashboard Supabase Anda.
    • Buka subhalaman Sign In/Up.
    • Temukan opsi Google dan aktifkan sakelarnya. (Untuk langkah konfigurasi Supabase yang terperinci, lihat Mengonfigurasi Google OAuth di Supabase atau Supabase Docs.)

  2. Beri Tahu Agen tentang Kebutuhan Anda

    • Masukkan kebutuhan Anda di chat. Contohnya: "Tambahkan autentikasi Google".
    • Ini akan menambahkan tombol Continue with Google ke halaman login Anda.

  3. Uji Autentikasi Google

    • Buka halaman login.
    • Klik tombol Continue with Google.
    • Masuk dengan akun Google dan verifikasi bahwa profil pengguna diperbarui dengan benar.
    • Selesaikan alur Google OAuth untuk memastikan pengguna diarahkan kembali ke app Anda.

  4. Deploy App Anda ke Dunia App Atoms

Mengonfigurasi Google OAuth di Supabase

  1. Buat Proyek Google Cloud

    • Akses Google Cloud Console

    • Buat Proyek Baru

      • Klik menu dropdown di bagian atas dan pilih New Project.
      • Masukkan nama proyek, pilih akun penagihan, lalu klik Create.

  2. Konfigurasikan Kredensial Google OAuth

    • Siapkan Consent Screen

      • Di bilah pencarian, ketik OAuth dan buka OAuth consent screen.
      • Isi nama app Anda, email dukungan pengguna, dan bidang wajib lainnya.
      • Pilih External atau Internal, lalu klik Create.

    • Buat OAuth Client ID

      • Klik Create OAuth Client, lalu pilih OAuth Client ID.
      • Untuk Application Type, pilih Web application.
      • Di Authorized redirect URIs, tambahkan callback URL dari dashboard Supabase.
      • Klik Create dan catat Client ID serta Client Secret yang dihasilkan.

  3. Konfigurasikan Google OAuth di Supabase

    • Masuk ke Dashboard Supabase

    • Aktifkan Google OAuth

      • Navigasikan ke halaman Authentication.
      • Di bagian Providers, temukan opsi Google dan aktifkan.
      • Tambahkan Client ID dan Client Secret yang dibuat sebelumnya ke bidang masing-masing.

    • Simpan Konfigurasi

      • Klik Save untuk menerapkan perubahan.

Penyimpanan Data

Anda mungkin juga ingin menyimpan data pengguna setelah mengonfigurasi autentikasi pengguna untuk web/app Anda.

Setelah terhubung ke Supabase, cukup beri tahu Atoms data apa yang ingin Anda simpan di basis data. Para agen akan secara otomatis mengonfigurasi tabel basis data dan mengintegrasikannya langsung ke UI Anda.

  1. Tentukan Kebutuhan Anda

    • Masukkan kebutuhan Anda di chat. Contohnya: "Harap pastikan bahwa catatan perjalanan baru disimpan ke basis data".
    • Jelaskan data yang ingin Anda simpan sejelas mungkin.
    • Atoms akan secara otomatis mengonfigurasi struktur basis data yang diperlukan berdasarkan input Anda.

  2. Uji Fungsionalitas di Atoms

    • Buat data contoh di app Anda, seperti menambahkan beberapa "catatan perjalanan" melalui UI.
    • Simpan data lalu refresh halaman. Data akan disinkronkan ke basis data Supabase.
    • Masuk ke Supabase dan verifikasi apakah data yang baru ditambahkan ada di basis data.

  3. Validasi Sinkronisasi Data Antara Atoms dan Supabase

    • Buka dashboard Supabase dan navigasikan ke Table Editor.
    • Ubah data yang ada atau buat data baru.
    • Perubahan yang dibuat di Supabase akan disinkronkan secara real-time ke app Atoms Anda.
    • Kembali ke Atoms dan verifikasi apakah data yang diubah atau baru dibuat ditampilkan dengan benar.
    • Jika data berhasil disinkronkan, berarti konfigurasi Anda telah selesai.

  4. Deploy App Anda

Edge Functions

Supabase Edge Functions adalah program backend serverless yang dideploy pada node server yang dekat dengan pengguna Anda. Fitur ini menghilangkan kebutuhan untuk membangun dan memelihara server tradisional, sehingga Anda dapat menjalankan logika kustom apa pun dengan latensi jaringan yang lebih rendah dan waktu respons yang lebih cepat. Dalam sebagian besar aplikasi web, frontend (tombol, formulir, UI) menangani interaksi dasar, tetapi beberapa operasi penting harus berjalan di backend, seperti:

  • Mengirim email sambutan secara otomatis setelah pendaftaran pengguna;
  • Memanggil API AI untuk menganalisis atau memberi skor pada konten saat formulir dikirimkan;
  • Mengintegrasikan gateway pembayaran pihak ketiga dan mencatat detail pesanan saat checkout.

Semua operasi ini diimplementasikan melalui Edge Functions.

Kasus Penggunaan

Dengan menggunakan Supabase Edge Functions di Atoms, Anda dapat:

  • Mengirim email sambutan: Secara otomatis mengirim email sambutan kepada pengguna baru dengan panduan langkah berikutnya setelah mereka mendaftar, sehingga meningkatkan engagement dan pengalaman onboarding.
  • Menangani pengiriman formulir pengguna: Saat feedback, pendaftaran, atau komentar dikirim, secara otomatis buat dan kirim notifikasi konfirmasi (misalnya, "Kami telah menerima feedback Anda dan akan segera meninjaunya") agar pengguna tahu tindakan mereka berhasil.
  • Menjadwalkan pengingat: Atur notifikasi harian atau mingguan melalui email atau push (untuk rapat, tugas, atau acara) guna membantu pengguna mengelola waktu dan tetap produktif.
  • Memanfaatkan layanan AI: Setelah pengguna memasukkan teks, secara otomatis panggil API AI seperti OpenAI untuk pemeriksaan tata bahasa atau penulisan ulang cerdas, lalu kembalikan hasil yang telah dioptimalkan kepada pengguna.
  • Memproses pembayaran online: Saat pengguna memulai pembayaran di platform e-commerce atau layanan Anda, integrasikan dengan gateway seperti Stripe untuk menangani transaksi secara aman dan menampilkan halaman sukses atau gagal yang jelas dengan detail pesanan.

Penyimpanan dan Pengelolaan Kunci

Banyak aplikasi memerlukan kunci atau kredensial API untuk terhubung dengan layanan pihak ketiga (mis., Stripe, OpenAI). Saat Supabase terhubung, Atoms menyediakan cara yang aman untuk mengelola dan menggunakan rahasia ini. Melalui integrasi Atoms dengan Supabase, kapan pun sebuah function memerlukan rahasia, Atoms secara otomatis mendeteksinya dan meminta Anda memasukkan nilai yang diperlukan. Anda cukup mengklik tombol "Add API Key" milik Agen dan memasukkan kunci Anda; Atoms kemudian mengenkripsinya dan menyimpannya di Secrets Manager Edge Functions Supabase. Saat runtime, kunci-kunci ini disuntikkan secara aman ke dalam function, sehingga mencegah kredensial disimpan dalam plaintext.

Tambahkan dan Deploy Function Backend

Setelah terhubung ke Supabase, beri tahu Agen apa yang Anda butuhkan:

  • Ketik permintaan Anda di chat. Misalnya: "Buat webpage yang memanggil Gemini API untuk memperkirakan kalori makanan dan mengembalikan hasilnya saat saya mengunggah foto makanan."

  • Setelah Agen menghasilkan kode, dua tombol akan muncul: Add API Key dan View in Edge Function.

  • Klik Add API Key.

  • Masukkan API key Anda lalu klik Send.

  • Klik View in Edge Function.

  • Anda akan diarahkan ke halaman Supabase Edge Function.

    Catatan Keamanan: Semua kunci dienkripsi dan disimpan di Supabase; Atoms tidak dapat mengaksesnya.

FAQ

Bagaimana cara menambahkan fitur backend Supabase ke aplikasi saya?

Integrasikan Supabase ke dalam aplikasi Anda dalam tiga langkah sederhana:

  • Klik tombol otorisasi di sudut kanan atas antarmuka chat untuk mengotorisasi akun Supabase Anda.
  • Pilih dan tautkan proyek Supabase yang ingin Anda gunakan.
  • Bagikan kebutuhan Anda di chat, dan para agen akan mengembangkan fitur berdasarkan proyek Supabase yang Anda hubungkan.
Apakah Supabase mendukung social login?

Supabase mendukung berbagai metode autentikasi, termasuk:

  • Email and Password.
  • Passwordless Authentication: Opsi seperti one-time password (OTP) atau magic link.
  • Social Logins: Dukungan untuk penyedia pihak ketiga seperti Google, Twitter, dan GitHub.
  • Phone Authentication.
  • Single Sign-On (SSO): Dukungan untuk SAML SSO.
  • Anonymous Login: Memungkinkan pengguna masuk secara anonim.
Apakah saya perlu membuat proyek Supabase terpisah untuk app saya?

Anda dapat memilih proyek Supabase yang sudah ada atau membuat yang baru. Setiap chat hanya dapat terhubung ke satu proyek pada satu waktu.

Setelah terhubung ke Supabase, apakah koneksi akan tetap ada jika saya melakukan Remix pada proyek saya?

Koneksi akan terputus setelah Remix dan perlu dibuat ulang. Selain itu, jika sebuah app di Dunia App yang dibagikan oleh pengguna lain terhubung ke Supabase, pengguna lain tidak dapat me-Remix app tersebut.

Bisakah saya menggunakan satu basis data Supabase untuk beberapa proyek Atoms?

Ya, Anda dapat menggunakan satu basis data Supabase untuk beberapa proyek Atoms. Namun, Anda perlu mengelola koneksi dan konfigurasi dengan hati-hati.

Mengapa proyek saya tidak muncul di bawah organisasi Supabase?

Pada paket gratis Supabase, proyek apa pun yang tidak memiliki aktivitas selama tujuh hari berturut-turut akan dijeda secara otomatis. Di daftar Organizations Atoms, beralihlah ke filter Inactive untuk melihat proyek Anda yang telah dijeda.

Mengapa saya melihat \

Supabase menerapkan binding OAuth satu-ke-satu antara setiap organisasi dan akun Atoms. Jika organisasi “Test” sudah diotorisasi oleh pengguna Atoms lain, setiap upaya berikutnya untuk mengikatnya dengan akun berbeda akan ditolak dengan error ini. Untuk memperbaikinya, buka sidebar Supabase Dashboard di Settings → API → OAuth Apps, hapus grant OAuth Atoms yang ada untuk organisasi tersebut, lalu kembali ke Atoms dan hubungkan ulang menggunakan akun Anda sendiri.

Apakah halaman ini membantu?

Artikel Terkait

Koneksi GitHubKoneksi StripeHubungkan dan gunakan Integrasi
Semua Koleksi
Di halaman ini