Ingin membuat aplikasi FlutterFlow dengan database offline dan sinkronisasi otomatis? PowerSync adalah solusi yang memungkinkan aplikasi Anda tetap berjalan lancar, bahkan saat offline. Dalam panduan ini, Anda akan belajar cara menghubungkan PowerSync dengan FlutterFlow menggunakan Supabase, langkah demi langkah. Panduan ini dibuat singkat, jelas, dan mudah dipahami oleh pemula.
Untuk panduan lengkap, silakan kunjungi: docs.powersync.com.
1. Persiapan Awal
Sebelum mulai, pastikan Anda memiliki:
Akun PowerSync – Daftar di PowerSync.
Akun Supabase – Daftar di Supabase.
Langganan FlutterFlow – Pastikan Anda memiliki akun berbayar untuk mengimpor library.
2. Konfigurasi Supabase
Buat proyek baru di Supabase.
Tambahkan tabel dengan menjalankan SQL berikut di Supabase SQL Editor:
table public.lists (
id uuid not null default gen_random_uuid (),
created_at timestamp with time zone not null default now(),
name text not null,
owner_id uuid not null,
constraint lists_pkey primary key (id),
constraint lists_owner_id_fkey foreign key (owner_id) references auth.users (id) on delete cascade
);
Aktifkan publikasi data untuk sinkronisasi:
create publication powersync for table public.lists;
3. Konfigurasi PowerSync
Masuk ke PowerSync Dashboard dan buat instance baru.
Hubungkan Supabase dengan PowerSync:
- Ambil Database Connection String dari Supabase.
- Masukkan ke pengaturan instance PowerSync.
Tambahkan autentikasi Supabase: - Salin JWT Secret dari pengaturan API Supabase.
- Tempelkan di pengaturan PowerSync.
4. Atur Aturan Sinkronisasi (Sync Rules)
Buka file sync-rules.yaml di PowerSync Dashboard.
Ganti isinya dengan:
bucket_definitions:
global:
data:
- SELECT * FROM lists Validasi & Terapkan aturan ini.
5. Inisialisasi Proyek di FlutterFlow
Buat proyek baru di FlutterFlow.
Hubungkan dengan Supabase:
- Buka App Settings > Integrations
- Masukkan API URL dan Anon Key dari Supabase.
Tambahkan Library PowerSync melalui App Settings > Project Dependencies.
Masukkan skema klien dari PowerSync ke PowerSyncSchema di FlutterFlow.
Tambahkan URL instance PowerSync di PowerSyncURL.
6. Buat Halaman Login (Sign-In Page)
Tambahkan halaman baru dan pilih template Auth1 (beri nama “Login”).
Hapus tombol Sign Up, Forgot Password, dan Social Login jika tidak diperlukan.
Buka App Settings > Authentication:
- Aktifkan autentikasi.
- Pilih Supabase sebagai metode autentikasi.
- Set Login Page sebagai Entry Page dan HomePage sebagai Logged In Page.
Tambahkan pengguna uji coba di Supabase.
7. Menampilkan Data dari Database
Gunakan PowerSyncQuery untuk menampilkan data yang tersimpan di database lokal.
Gunakan PowerSyncStateUpdater untuk memperbarui elemen UI dengan data yang telah disinkronkan.
Untuk pembacaan data sekali saja, gunakan custom action PowerSyncQueryOnce.
8. Menambahkan Data ke Database
Tambahkan tombol atau form di aplikasi untuk membuat data baru.
Pastikan data tersimpan di database lokal dan backend Supabase.
9. Menghapus Data dari Database
Tambahkan tombol “Hapus” untuk menghapus data dari tabel lists.
Pastikan perubahan disinkronkan dengan database lokal dan Supabase.
10. Menampilkan Status Koneksi & Sinkronisasi
Tambahkan indikator jaringan untuk menunjukkan apakah aplikasi sedang online atau offline.
Gunakan fungsi PowerSync untuk menampilkan status sinkronisasi data.
11. Mengamankan Aplikasi
Aktifkan Row Level Security (RLS) di Supabase agar setiap pengguna hanya bisa mengakses data milik mereka.
Sesuaikan aturan sinkronisasi di PowerSync agar selaras dengan kebijakan keamanan Supabase.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda dapat mengintegrasikan PowerSync dengan FlutterFlow untuk mendapatkan aplikasi yang bisa bekerja offline dan tetap sinkron dengan database. Pastikan Anda melakukan pengujian sebelum aplikasi diluncurkan.
Panduan lengkap bisa ditemukan di sini: docs.powersync.com.
