스크립트
00:00:00Pocketbase adalah alternatif open source untuk Supabase atau Firebase dan mungkin yang paling sederhana
00:00:04backend yang pernah Anda jalankan, hanya satu file tunggal yang memberi Anda basis data real-time, autentikasi, dan
00:00:11penyimpanan file. Ini sangat kontras dengan betapa rumitnya pengembangan web modern saat ini
00:00:16jadi di video hari ini, kita akan menguji Pocketbase dan melihat apakah arsitekturnya yang sederhana
00:00:21benar-benar mumpuni saat membangun aplikasi yang lebih dari sekadar aplikasi sederhana.
00:00:29Pocketbase adalah biner Go tunggal dengan SQLite yang tertanam, tetapi pengodean dalam Go sendiri sebenarnya
00:00:35opsional karena backend dapat dikembangkan dengan JavaScript dan TypeScript, dan Anda juga akan mendapatkan
00:00:40akses ke UI admin dasar tempat Anda dapat mengonfigurasi semua koleksi Anda persis seperti cara kerja Supabase.
00:00:46Sekarang, beralih ke arsitektur dan bagaimana Anda akan menggunakannya setelah Pocketbase aktif, Anda dapat
00:00:51menghubungkannya dari frontend melalui SDK JavaScript. Ini sekali lagi sangat mirip dengan cara kerja Firebase
00:00:57dan Supabase, karena Anda dapat mengakses basis data secara langsung dari frontend dan tidak perlu
00:01:02khawatir, Pocketbase memiliki aturan API dan autentikasi untuk menjaga semua aturan ini tetap aman. Tapi mari langsung masuk
00:01:08ke demo untuk menunjukkan aplikasi nyata dengan autentikasi, basis data, dan penyimpanan file. Dan jika Anda menikmati video ini
00:01:13maka subscribe ke Better Stack karena kami membahas banyak sekali konten pengembang di saluran ini.
00:01:18Jadi, kami memiliki aplikasi di sini, kami menggunakan Pocketbase di backend dan kami juga memiliki frontend web
00:01:22yang ditulis dalam React. File terpenting di dalam frontend web adalah file pb.ts ini karena
00:01:30di dalam sini kita melakukan impor dari Pocketbase, jadi kita punya kelas Pocketbase, kita membuat instance baru
00:01:36darinya, lalu kita bisa terhubung ke layanan backend kita, dan sekarang kita bisa menggunakan pb di seluruh sisa
00:01:42aplikasi. Jadi aplikasi itu sendiri hanyalah pelacak bug sederhana, kita bisa menyeret item antar kolom, kita bisa
00:01:48membuat isu baru. Jadi jika kita melihat di dalam hook yang mengontrol pengguna yang login, Anda bisa melihat
00:01:53awalnya kita mengatur state dengan pb.authStore, jadi ini hanya akan mengambil pengguna yang sedang terautentikasi
00:01:59dari Pocketbase, lalu kita juga menyiapkan listener, jadi kita katakan jika auth store berubah dengan
00:02:05event on change, maka kita akan memasukkan pengguna baru ke dalam state, jadi sesederhana itu.
00:02:11Kita bisa mengakses state, kita bisa berlangganan ke state, dan hal yang sama juga berlaku untuk isu kita.
00:02:16Jadi di dalam hook useIssues kita, sekali lagi kita menginisialisasi beberapa state, tetapi dalam kasus ini kita biarkan kosong
00:02:21lalu kita memiliki useEffect dan kita katakan bahwa kita akan mengambil semua isu, mendapatkan daftar lengkapnya, lalu
00:02:27kita akan menetapkan isu dengan daftar tersebut sehingga data awal akan terisi, dan kemudian kita juga bisa
00:02:32kembali berlangganan ke isu, jadi jika Anda menyeret isu antar kolom atau membuat atau menghapus isu
00:02:38kita bisa mengatakan pb.collection(“issues”).subscribe, lalu setiap kali ada record baru masuk kita bisa
00:02:44menambahkannya ke state kita. Itu berarti saat kita berinteraksi dengan basis data Pocketbase secara langsung
00:02:49seperti saat kita menyeret kartu di sini, state akan otomatis diperbarui. Dalam kasus pembuatan
00:02:54isu baru, kita juga bisa melampirkan tangkapan layar, jadi mari kita ambil tangkapan layar aplikasi
00:02:59itu sendiri, kita klik “file issue” dan isu baru tersebut muncul di sini. Dalam kode frontend, ini
00:03:05ditangani melalui fungsi submit, lalu kita menambahkan semua data formulir dan akhirnya kita memanggil pb
00:03:11collection(“issues”).create dan meneruskan datanya. Apa yang kita miliki di backend adalah API koleksi
00:03:17untuk mencegah penyalahgunaan API ini, jadi Pocketbase akan memberi Anda antarmuka admin ini secara default
00:03:24dan di sini Anda bisa melihat kita punya koleksi users dan juga koleksi issues
00:03:27tempat semua isu kita berada. Jika kita melihat ke dalam koleksi users lalu menekan pengaturan di atas sini
00:03:32maka kita punya tab “API rules” ini, dan ini adalah semua aturan yang membatasi akses ke koleksi
00:03:37tertentu ini. Jadi untuk users, kita katakan request.auth.id tidak boleh berupa string kosong, dan kemudian saat
00:03:43memperbarui atau menghapus users, ID harus cocok dengan ID pengguna yang terautentikasi, dan kita bisa mengaksesnya
00:03:50dengan string khusus di sini yaitu karakter @ lalu request.auth.id. Jika Anda pernah menggunakan Supabase
00:03:56di masa lalu, Anda akan merasa pola ini sangat familier. Sekarang, apa yang terjadi jika backend tidak
00:04:02melakukan semua yang Anda butuhkan? Untungnya Anda bisa memperluasnya melalui hook dengan Go, tapi juga JavaScript
00:04:08dan TypeScript. Jadi kita bisa menghubungkan ke event seperti “on bootstrap” saat aplikasi dimulai, atau “on record
00:04:15create” saat record basis data dibuat. Ada 82 hook unik pada saat pembuatan video, jadi hampir
00:04:21semua yang Anda butuhkan akan tercakup. Sekarang mari kita perluas layanan Pocketbase kita untuk melihat cara kerjanya.
00:04:27Jika kita melihat di dalam folder pb, Anda bisa melihat kita punya biner Pocketbase dan file ini secara harfiah
00:04:32adalah semua yang Anda butuhkan untuk menjalankan versi default Pocketbase. Namun dalam kasus saya, saya telah menulis semua hook
00:04:38dalam TypeScript, jadi saya memiliki konfigurasi untuk mengompilasi hook tersebut ke dalam folder pb_hooks sebagai JavaScript karena
00:04:44Pocketbase hanya mendukung JavaScript secara asli, jadi jika Anda menggunakan TypeScript, Anda perlu mengompilasinya
00:04:50Jika kita melihat ke dalam file hook utama, kita bisa melihat bahwa kita punya hook di sini yang mengatakan “on record create”
00:04:55dan ini secara spesifik menargetkan saat kita membuat issues. Dan apa yang kita lakukan di sini adalah kita mengatakan
00:05:00setiap kali record dibuat, kita akan mengirim email ke pengguna, dan kita bisa melakukannya dengan memanggil
00:05:05e.app.newMailClient().send, lalu meneruskan objek pesan yang telah kita susun di sini.
00:05:10Anda tentu saja bisa menghubungkan ke banyak fitur berbeda di dalam Pocketbase, jadi fungsionalitas kustom apa pun
00:05:15yang mungkin Anda butuhkan akan selalu didukung dengan 82+ hook yang sudah tersedia di Pocket
00:05:21base. Karena ini menjalankan SQLite, artinya kita memerlukan penyimpanan yang persisten. Jadi platform lama seperti Heroku, Render,
00:05:28atau Railway akan menjadi pilihan yang buruk karena sistem file mereka yang ephemeral; pada dasarnya Anda akan kehilangan data
00:05:33setiap kali Anda men-deploy ulang aplikasi. Untuk menghindari hal ini, Anda bisa melampirkan sistem file permanen, tetapi pilihan yang lebih baik dan
00:05:39lebih murah adalah cukup dengan hosting di VPS, dan data itu hidup di dalam folder pb_data. Jadi jika
00:05:45kita melihat ke dalam sini, Anda bisa melihat kita punya folder penyimpanan (storage), dan ini akan berisi semua
00:05:50gambar yang telah kita unggah untuk isu kita, gambar-gambar itu tersimpan di dalam folder penyimpanan, jadi
00:05:55di dalam ID acak ini misalnya, Anda bisa melihat gambar yang saya unggah untuk isu itu tadi
00:05:59sebelumnya. File basis data itu sendiri juga akan bertahan di dalam folder ini, jadi data.db di sini, ini
00:06:05akan berisi semua kode SQLite kita. Jadi jika saya menghapus file ini, saya akan kehilangan semua data di dalam
00:06:11aplikasi. Jadi jelas Anda memerlukan strategi cadangan yang baik daripada hanya meninggalkannya sebagai satu file
00:06:16di disk. Dibandingkan dengan alat seperti Supabase yang bisa mulai dari $25 untuk tier dasar, Pocketbase
00:06:22pada dasarnya gratis, Anda hanya perlu membayar biaya VPS yang bisa semurah $4 dan memungkinkan
00:06:28Anda untuk menjalankan sebanyak mungkin proyek yang Anda inginkan, tetapi tentu saja Anda akan ingin meningkatkan skalanya seiring penggunaan.
00:06:33Pocketbase juga dilengkapi dengan semua yang Anda butuhkan untuk aplikasi produksi seperti migrasi, penjadwalan pekerjaan, dan
00:06:38logging. Anda juga dapat menyajikan file statis secara langsung dengan Pocketbase dengan menjatuhkannya ke folder pb_public
00:06:44dan ini akan berguna untuk sesuatu seperti frontend React. Alternatifnya, Anda juga bisa melakukan hosting
00:06:49dynamic routes dengan rendering template, dan ini akan sangat cocok untuk hal-hal seperti template email. Jadi jika Anda
00:06:54menginginkan pengaturan satu kotak (single box), maka begitulah cara melakukannya. Sekarang pertanyaan besarnya, apakah ini siap untuk produksi?
00:06:59Nah, ini mencakup semua fitur yang Anda perlukan untuk membangun aplikasi SaaS modern, terutama fitur
00:07:04kelas produksi seperti migrasi dan logging. Ini juga sepenuhnya dapat diperluas sehingga Anda tidak hanya
00:07:09terjebak dengan defaultnya. Tapi tantangan besarnya adalah ini masih pre-v1, jadi mereka secara eksplisit mengatakan hanya gunakan
00:07:15ini jika Anda nyaman membaca changelog dan menjalankan migrasi manual dari waktu ke waktu. Tetapi jika itu
00:07:20Anda, maka silakan, Anda bisa membangun unicorn file tunggal pertama Anda. Anda bisa mempelajari lebih lanjut tentang Pocket
00:07:25base dengan memeriksa tautan yang relevan di deskripsi, dan jika Anda menyukai alternatif open source
00:07:29maka periksa video kami tentang OpenCode, alternatif open source untuk Claude Code. Saya Warren dari
00:07:35Better Stack, terima kasih telah menonton, dan tentu saja, sampai jumpa di lain waktu.