Firebase Studio: Ulasan Jujur dengan Contoh

Firebase menawarkan rangkaian alat yang kuat yang mencakup semua yang Anda perlukan untuk membangun aplikasi web dan seluler modern. Ini adalah nama populer di dunia developer dan sejak lama menjadi backend andalan bagi startup, dengan fitur hebat seperti autentikasi, penyimpanan cloud, database real-time, dan fungsi serverless.

Google kini melangkah lebih jauh dengan Firebase Studio, lingkungan pengembangan baru bertenaga AI yang dirancang untuk membantu beralih dari ide ke MVP dalam hitungan menit. Mirip dengan Replit dan Lovable, Firebase Studio memungkinkan Anda membangun aplikasi full-stack hanya dengan sebuah prompt.

Dalam artikel ini, kita akan membahas apa itu Firebase Studio dan cara kerjanya. Saya akan menunjukkan bagaimana saya menggunakannya untuk membangun dasbor IoT dari nol dan berbagi kesan pertama saya!

Kami selalu memperbarui pembaca tentang kabar terbaru AI melalui The Median, buletin gratis setiap Jumat yang merangkum berita utama minggu ini. Berlangganan dan tetap terinformasi hanya dalam beberapa menit setiap minggu:

Apa Itu Firebase Studio dari Google?

Firebase Studio adalah alat pengembangan baru dari Google yang didukung AI dan memungkinkan Anda membangun aplikasi full-stack menggunakan prompt bahasa alami. 

Sebenarnya ini adalah evolusi dari Project IDX, sebuah cloud IDE yang diluncurkan Google pada 2023. Project IDX berfokus sebagai cloud IDE serbaguna dengan dukungan AI, tetapi rebranding ke Firebase Studio mempersempit fokusnya untuk mengoptimalkan pengalaman bagi developer Firebase. Ia mengambil bagian terbaik dari IDX, seperti editor Code OSS, asisten AI, dan lingkungan berbasis cloud, serta menambahkan integrasi dengan layanan Firebase seperti Firestore, Auth, Hosting, dan Cloud Functions.

Firebase Studio diumumkan saat rebranding Firebase tahun 2024, dan ini merupakan jawaban Firebase terhadap gelombang alat pengembangan “AI-native” yang terus berkembang.

Cara Mengakses Firebase Studio

Anda dapat mencoba Firebase Studio sekarang juga dengan menuju ke studio.firebase.google.com. Anda hanya membutuhkan akun Google. Setelah masuk, Anda dapat mengetik prompt yang mendeskripsikan aplikasi yang ingin dibangun dan Firebase Studio akan menghasilkan proyek siap-jalankan menggunakan alat Firebase di balik layar. 

Harga Firebase Studio

Firebase Studio gratis digunakan selama periode pratinjau. Secara default, Anda dapat membuat hingga 3 workspace tanpa biaya. Namun, beberapa layanan terintegrasi seperti Firebase App Hosting atau penggunaan API Gemini yang melebihi kuota gratis akan memerlukan penautan akun penagihan dan dapat menimbulkan biaya. Proyek Firebase Anda akan otomatis ditingkatkan ke paket Blaze (bayar sesuai pemakaian), dan Anda akan ditagih untuk penggunaan yang melampaui kuota gratis.

Meski begitu, jika Anda berencana menggunakan Firebase Studio terutama untuk pembuatan prototipe dan tugas pengembangan, Anda seharusnya tetap berada dalam batas workspace gratis dan dapat menjelajahi Firebase Studio tanpa menimbulkan biaya.

Uji 1: Aplikasi Dasbor IoT dari Prompt

Pertama, saya memutuskan menguji pembuatan aplikasi dari prompt. Saat menguji alat pembuat aplikasi bertenaga AI, saya suka menggunakan prompt yang agak kompleks untuk benar-benar menguji perilaku alat tersebut. Aplikasi to-do list biasanya berjalan baik, tetapi aplikasi yang sedikit lebih kompleks benar-benar menyoroti area di mana alat ini unggul dan bagian yang masih kesulitan.

Jadi, prompt saya adalah sebagai berikut:

Setelah menekan tombol “Prototype with AI” dan menunggu sekitar satu menit, saya masih menatap layar kosong.

Menyegarkan halaman tidak banyak membantu, jadi saya memutuskan menghapus workspace dan mencoba lagi. Kali ini, saya ditunjukkan sebuah rencana untuk aplikasi saya:

Saya cukup terkesan karena ia menghasilkan beberapa pedoman gaya yang bisa saya edit (misalnya, saya bisa mengubah warna hanya dengan mengkliknya). 

Namun, jika Anda melihat bagian fitur, Anda dapat melihat bahwa ia menghilangkan kebutuhan Cloud Function dan Firestore yang saya sebutkan dalam prompt. Bagaimanapun, saya rasa ini sudah cukup dekat dan saya lanjutkan sesuai rencana, penasaran melihat hasilnya. Berikut tampilan layar berikutnya:

Pada titik ini, saya agak kurang terkesan dengan hasilnya. UI sangat dasar, dan faktanya tidak ada autentikasi pengguna sama sekali.

Saya mulai menguji berbagai tombol dan fungsionalitas layar prototipe. 

Mengklik tombol kanan atas pada UI aplikasi membuka aplikasi di tab baru. Tombol berikutnya di sebelah kiri memungkinkan Anda membagikan tautan pratinjau. Cukup berguna. Tombol paling kiri pada UI membuka pemilih komponen—lebih lanjut tentang itu sebentar lagi.

Mengklik tombol oranye bergelombang di kiri input chat membuka menu “menggambar” yang menarik.

Saya dapat menggambar persegi panjang di sekitar kartu sensor dan menentukan bahwa saya ingin melihat status sensor tersebut. Memang, menyalakan dan mematikan kurang masuk akal jika saya tidak tahu keadaan saat ini. 

Ia menambahkan properti status pada kedua kartu sensor, yang diperbarui berdasarkan tombol yang diklik.

Saya mencoba menambahkan sensor dapur baru melalui UI, yang berjalan dengan baik.

Namun, sensor baru itu tidak tersimpan setelah refresh, yang agak mengecewakan.

Pada titik itu, saya ingin melihat kodenya. Saya mengklik ikon kode di kanan atas layar Firebase Studio, di sebelah tombol biru “Publish”. Saya cukup senang melihat editor kode online muncul. Cukup cepat, tampak bagus, dan memiliki fitur Gemini bawaan. Membuka kontrol sumber mulai memindai repositori Git.

Dan tampaknya ia menemukan satu dan menunggu saya memublikasikan branch yang sedang saya gunakan.

Saya pikir itu agak aneh, jadi saya memutuskan untuk mengeklik “Publish Branch”.

Benar saja, saya belum masuk, dan itu hanya keanehan editor. Bagaimanapun, saya menghargai kemampuan untuk masuk ke GitHub langsung melalui editor online.

Yang benar-benar ingin saya lihat adalah kemampuan integrasi dengan rangkaian alat Firebase. Saya kembali ke tab prototipe dan meminta lewat chat untuk integrasi dengan Auth dan Cloud Functions untuk membuat data sensor tiruan.

Permintaan dipenuhi dan saya mendapat layar Login, tetapi langsung gagal dengan beberapa kesalahan.

Salah satu kesalahan, seperti terlihat pada tangkapan layar di atas, berasal dari fakta bahwa kode mencoba melakukan fetch dari Cloud Function yang tidak ada, karena memang belum dibuat sama sekali di kode. Mengklik “Fix Error” beberapa kali tidak menghasilkan apa-apa.

Saya kembali ke tab kode, dan harus beberapa kali mem-prompt asisten Gemini agar ia setuju membuat kode Cloud Function, bukan sekadar fungsi biasa. Lalu ia menambahkan bahwa ia tidak bisa melakukan deployment untuk saya, tetapi bisa membantu langkah-langkahnya. Cukup adil.

Karena antarmuka chat tampak kurang baik dalam menyelesaikan masalah logika, saya bertanya-tanya apakah ia mungkin lebih baik menyelesaikan masalah UI. Saya memintanya membuat UI halaman login lebih menarik dengan menambahkan gambar bertema data dan analitik. Itu juga tidak menghasilkan perubahan sama sekali, meski chat menunjukkan ada beberapa file yang diubah.

Fitur terakhir yang ingin saya coba adalah publikasi aplikasi. Mengklik tombol besar “Publish” di kanan atas membuka panel samping, dengan langkah-langkah untuk memublikasikan aplikasi.

Saya memutuskan membuat akun penagihan, dan otomatis beralih ke paket Blaze agar dapat memublikasikan aplikasi dengan Firebase App Hosting. Tautan di panel samping mengarahkan ke konsol Google Cloud, di mana saya diminta membuat profil penagihan. Setelah saya klik konfirmasi, saya diarahkan ke halaman “URL tidak ditemukan” di GCP. 

Kembali ke tab Firebase Studio, kini saya melihat pesan “Menunggu akun penagihan dari Cloud Console”. Saya menunggu beberapa menit dan menyegarkan beberapa kali, dan akhirnya bisa memilih akun penagihan saya serta memublikasikan aplikasi.

Ini menutup uji “pembuatan aplikasi dari prompt” saya. Kesan pertama saya adalah mungkin ini sedikit lebih sulit dengan Firebase Studio dibandingkan alat lain yang pernah saya gunakan sebelumnya.

Sekarang, lanjut ke uji kedua.

Uji 2: Menghasilkan Proyek dari Template

Selain pembuatan aplikasi dari prompt, Firebase Studio juga memungkinkan pembuatan aplikasi melalui template.

Di halaman utama Firebase Studio, mengklik salah satu ikon framework atau bahasa di bawah bagian “Start coding an app” akan membuka layar baru. Saya memilih membuat Node Express API Server bernama “My Node App” dan menggunakan TypeScript untuk melakukannya.

Setelah beberapa detik, server yang dihasilkan muncul di editor kode online. Tidak ada tab prototipe di sini, tetapi masuk akal mengingat ini adalah kode backend.

Kali ini, membuka tab kontrol sumber memberi saya kesempatan untuk menginisialisasi repositori Git baru.

Template ini hanya mengekspos endpoint “hello world” dasar, tetapi memiliki seluruh kode dan boilerplate yang dibutuhkan untuk mulai menulis API NodeJs + Express. 

Kesan Pertama dan Pemikiran tentang Firebase Studio

Secara keseluruhan, Firebase Studio adalah langkah yang baik ke dunia pengembangan berbantuan AI, tetapi masih terasa sangat beta.

Gagasan beralih dari satu prompt ke aplikasi yang berfungsi dengan prototipe visual, pratinjau langsung, komponen yang dapat diedit, dan kontrol styling sangat menarik. Ada juga sentuhan kecil yang cermat, seperti bisa mengubah warna dengan mengklik langsung pada palet atau menggambar di prototipe untuk meminta perubahan.

Editor kode bawaan juga merupakan kejutan menyenangkan: tampil bagus, berjalan mulus, dan hadir dengan dukungan Gemini dan GitHub sejak awal, yang membuat bereksperimen dengan kode cukup mudah. Ini jelas setara dengan beberapa editor kode online lain yang pernah saya coba sebelumnya.

Namun, saya menemui cukup banyak masalah yang membuat frustrasi. Generasi berbasis prompt terasa untung-untungan: fitur yang saya minta secara eksplisit (seperti Cloud Functions, Auth, dan Firestore) diabaikan, dan ketika saya memintanya lagi kemudian, sistem hanya sebagian mengimplementasikannya tetapi menyisakan fungsionalitas yang rusak dan error yang belum terselesaikan.

UI yang dihasilkan cukup dasar, dan permintaan saya untuk menambahkan gambar latar belakang diabaikan. Setelah berulang kali meminta, yang saya dapatkan hanya gradasi warna di latar belakang. Saya juga mengalami beberapa keanehan saat memublikasikan dan menyiapkan penagihan, yang membuat seluruh proses terasa agak canggung.

Pembuatan aplikasi berbasis template berjalan lebih baik. Template backend Node.js memberi saya basis kode yang terstruktur rapi dan bersih yang bisa langsung saya kerjakan. Itu terasa jauh lebih andal dan ramah bagi developer.

Secara adil, saya belum menguji semuanya, dan jelas alat ini masih berkembang. Saya melihat orang lain menyebutkan bahwa alat ini bekerja lebih baik untuk kasus penggunaan yang lebih sederhana atau prompt yang lebih terstruktur, jadi mungkin saya akan mencoba itu lain kali.

Saat ini, Firebase Studio terasa seperti bocoran awal tentang apa yang bisa menjadi pengembangan berorientasi AI. Belum cukup siap untuk panggung utama, terutama jika dibandingkan dengan alat seperti Replit, Lovable, Bolt, atau v0, tetapi ini adalah ruang yang menarik untuk diikuti.

Kesimpulan

Firebase Studio memiliki beberapa gagasan yang benar-benar menarik, tetapi menurut saya belum siap untuk membangun aplikasi siap produksi secara mandiri saat ini. Jika Anda penasaran dengan pengembangan berbantuan AI atau ingin mengeksplorasi apa yang akan datang, ini jelas layak untuk dicoba!