Dalam artikel, Pengantar Firebase, ikhtisar tentang Firebase disediakan. Anda diperlihatkan cara menyiapkan akun Firebase dan membuat proyek Firebase tanpa biaya! Dalam artikel ini, Anda membangun berdasarkan apa yang Anda pelajari dengan menyiapkan database berbasis NoSQL Cloud dan kemudian membuat halaman web yang sangat sederhana untuk menambahkan item ke dalamnya. Basis data hanya akan menyimpan permainan kata-kata bersama dengan kategori dan pengenal. Gambar 1 menunjukkan halaman web yang akan digunakan untuk menambahkan item.
Gambar 1: Halaman web yang menulis ke database Firestore NoSQL.
Menyiapkan Database Cloud Firestore Anda di Firebase
Untuk memulai, kembali ke Firebase dan buat proyek baru. Anda dapat mengakses Firebase dengan membuka https://console.firebase.google.com/. Halaman ini akan memberikan Anda pilihan untuk menambahkan proyek baru, seperti yang ditunjukkan pada Gambar 2. Anda dapat menemukan informasi lebih lanjut tentang membuat proyek di artikel sebelumnya.
Gambar 2: Menambahkan proyek Firebase baru.
Saya menamai proyek saya "Proyek Pun". Setelah membuat proyek baru, Anda akan dibawa ke Firebase Console seperti yang ditunjukkan pada Gambar 3.
Gambar 3: Konsol Firebase
Di Konsol, Anda dapat membuat database yang akan digunakan halaman web. Langkah pertama untuk melakukan ini adalah mengklik opsi Database di menu navigasi kiri. Ini akan memunculkan layar seperti yang ditunjukkan pada Gambar 4 yang memungkinkan Anda membuat Cloud Firestore, yang akan menjadi database NoSQL Anda.
Gambar 4: Layar awal untuk membuat Cloud Firestore
Mengklik tombol Create Database akan memulai proses berjalan melalui langkah-langkah untuk membuat database. Keputusan pertama yang perlu dibuat, seperti yang ditunjukkan pada Gambar 5, adalah apakah database akan dimulai dalam mode produksi atau uji. Agar artikel ini tetap sederhana dan fokus pada penambahan data, mode uji akan dipilih. Saat basis database siap produksi dibuat, Anda pasti ingin menambahkan lebih banyak keamanan daripada yang disediakan dalam mode pengujian.
Gambar 5: Memilih mode untuk database Firestore Anda
Dengan mode yang dipilih, langkah selanjutnya adalah menyatakan lokasi di mana Anda ingin membuat database. Anda membuat database Anda di Cloud, sehingga Anda memiliki pilihan lokasi untuk server mana yang ingin Anda gunakan. Dengan mengklik dropdown lokasi Cloud Firestore yang ditunjukkan pada Gambar 6, Anda akan dapat memilih lokasi multi-regional atau regional. Saya menyarankan bahwa jika Anda berada di Amerika Utara, Anda memilih lokasi nam5 (us-tengah). Jika Anda berada di tempat lain, pilih wilayah yang paling dekat dengan lokasi Anda.
Gambar 6: Memilih wilayah untuk database Firestore Anda
Dengan wilayah Anda dipilih, klik tombol Selesai dan Firebase akan menyediakan database Cloud Firestore Anda. Setelah penyediaan selesai, Anda akan siap dibawa ke halaman konsol Database seperti yang ditunjukkan pada Gambar 7 di mana Anda dapat mulai menggunakan database Anda secara online.
Gambar 7: Konsol Database di Firebase
Koleksi dan Dokumen di NoSQL
Jika Anda telah mengikutinya, maka pada titik ini Anda telah membuat database berbasis Cloud NoSQL di Cloud Firestore Firebase. Adalah di luar cakupan artikel ini untuk membahas detail NoSQL, tetapi saya akan memberikan sorotan tentang apa yang perlu Anda ketahui untuk melakukan penambahan sampel data yang dijanjikan dalam artikel ini.
Basis data NoSQL terdiri dari koleksi yang berisi dokumen . Dokumen pada dasarnya berisi bidang yang Anda rencanakan untuk disimpan. Misalnya, dalam artikel ini, kumpulan permainan kata-kata sedang dibuat. Koleksi Puns akan berisi dokumen. Setiap dokumen akan menjadi permainan kata yang berbeda.
Di Firebase, Anda dapat mengklik tautan "+ Mulai koleksi" yang ditunjukkan pada Gambar 7 untuk membuka dialog yang memungkinkan Anda membuat koleksi Puns. Anda akan diminta seperti yang ditunjukkan pada Gambar 8 untuk menambahkan ID koleksi. Dalam hal ini, kami akan menamakan koleksinya “Puns”.
Gambar 8: Membuat koleksi Cloud Firestore
Setelah koleksi dibuat, Anda akan dapat membuat dokumen di dalam koleksi seperti yang ditunjukkan pada Gambar 9. Sekali lagi, dokumen pada dasarnya adalah catatan dalam database NoSQL Anda. Karena ini adalah NoSQL, tidak ada aturan ketat yang memaksa Anda untuk memastikan setiap bidang ada di setiap dokumen (catatan) atau bahwa setiap dokumen dalam koleksi cocok. Ini yang harus Anda lakukan.
Gambar 9: Menambahkan dokumen ke koleksi
Setiap dokumen yang Anda buat harus memiliki ID Dokumen. Anda dapat memasukkan ID ini, atau Anda dapat memilih untuk membiarkannya kosong dan ID akan dibuat secara otomatis. Agar hal-hal lebih mudah dibaca dalam contoh menggunakan permainan kata-kata, saya akan memberikan dokumen pertama ID Pun0001.
Dalam menggunakan konsol untuk menambahkan dokumen, untuk setiap dokumen, Anda harus menentukan tidak hanya nilai data, tetapi juga nama bidang dan jenisnya. Sebuah dropdown memungkinkan Anda untuk memilih tipe data yang ingin Anda tambahkan.
Pada Gambar 10, dua bidang string telah ditambahkan yang akan digunakan untuk contoh Pun. Ini adalah Kategori dan teks untuk permainan kata (PunText ).
Gambar 10: Menyiapkan dokumen permainan kata-kata.
Ketika tombol Simpan diklik pada dialog yang ditunjukkan pada Gambar 10, dokumen (yang pada dasarnya adalah catatan) akan dibuat seperti yang ditunjukkan pada Gambar 11. Pada titik ini, database Cloud Firestore telah dibuat di Cloud dan catatan ( dokumen) telah ditambahkan! Lebih tepatnya, koleksi yang disebut "Puns" telah dibuat yang memiliki dokumen bernama "Pun0001" yang berisi bidang yang disebut Kategori dan PunText.
Gambar 11 Database Cloud Firestore dengan dokumen yang ditambahkan!
Perhatikan bahwa pada titik ini, jika Anda ingin menambahkan catatan tambahan menggunakan konsol, Anda akan mengklik tautan "+ Tambahkan dokumen" yang ditunjukkan di tengah Gambar 11. Anda kemudian dapat menambahkan permainan kata tambahan dengan ID, kategori, dan teks permainan kata. Anda ingin berhati-hati untuk memastikan bahwa setiap kali Anda menambahkan permainan kata-kata baru, Anda menggunakan nama bidang yang sama.
Meskipun Anda mungkin berpikir itu membosankan untuk memasukkan kembali nama bidang, ini karena fleksibilitas NoSQL. Salah satu cara untuk menyiasatinya adalah dengan membuat aplikasi web yang akan melakukan bagian itu untuk Anda!
Catatan:Anda akan melihat pada Gambar 11 bahwa ada beberapa tempat di mana Anda dapat memulai koleksi baru. Adalah di luar cakupan artikel ini untuk menggali struktur koleksi dan dokumen NoSQL.
Membuat Aplikasi Web untuk Mengakses Cloud Firestore
Dengan penyiapan Cloud Firestore, kini Anda dapat menambahkan data dari luar situs Firebase. Untuk melakukannya, Anda harus terlebih dahulu mengambil beberapa informasi dari Firebase yang memungkinkan Anda mengaitkan aplikasi web ke proyek Firebase yang telah Anda buat.
Mulailah dengan mengklik tautan Tinjauan Proyek di bagian kiri atas menu navigasi. Ini akan membawa Anda ke halaman ikhtisar untuk proyek Anda seperti yang ditunjukkan pada Gambar 12.
Gambar 12: Halaman ringkasan Proyek Firebase
Di halaman ini, Anda akan melihat bahwa ada ikon untuk empat jenis proyek yang dapat dipilih. Ini untuk iOS, Android, web, dan Unity. Klik ikon untuk menunjukkan bahwa aplikasi web sedang dilakukan. Ini akan menampilkan dialog yang ditunjukkan pada Gambar 13 yang akan menanyakan nama untuk aplikasi. Nama yang dibuat digunakan untuk mengoordinasikan aplikasi web yang Anda buat dengan proyek dan fitur Firebase dalam proyek Firebase. Untuk demo ini, saya menggunakan nama, "Aplikasi Web Punny Saya" dan mengklik tombol Daftarkan aplikasi.
Setelah diklik, Anda akan disajikan dengan layar yang menyertakan kode HTML yang akan Anda tambahkan ke aplikasi Web Anda. Kode HTML inilah yang mengikat Firebase ke aplikasi Anda.
Gambar 13: Kode Firebase untuk aplikasi web.
Anda akan ingin menyalin kode ini untuk ditempelkan ke halaman HTML yang akan kita buat nanti di langkah selanjutnya dari artikel ini. Jika Anda meninggalkan halaman yang ditunjukkan pada Gambar 13, Anda selalu dapat kembali ke kode aplikasi ini dari Firebase console. Cukup klik roda gigi di sebelah tautan Ikhtisar Proyek di sudut kanan atas dan pilih Pengaturan proyek. Halaman yang dihasilkan akan menyertakan informasi tentang proyek Anda
Membuat Halaman Web / Aplikasi untuk mengakses Firestore
Dengan semua yang telah diatur di sisi Firebase, sekarang saatnya membuat halaman web yang memungkinkan penambahan data. Listing 1 berisi HTML dasar untuk menampilkan halaman yang ditunjukkan pada Gambar 1 sebelumnya.
Cantuman 1: HTML Dasar untuk Halaman Punny.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<script src="./pun.js"></script>
</body>
</html>
Listing 1 adalah HTML dasar. Tiga bidang sedang disiapkan untuk memungkinkan pengguna memasukkan data. Masing-masing diberikan ID yang akan diperlukan untuk mengaitkan data yang dimasukkan ke dokumen yang akan ditambahkan ke Firestore. tombol juga disertakan dengan acara untuk menyimpan data. Saat ini, fungsi tersebut belum ditulis; itulah tujuan artikel ini! Saya juga menyertakan tautan ke file JavaScript eksternal bernama pun.js. Awalnya, file itu kosong, tetapi akan segera diubah!
Di dalam Listing 1 Anda ingin menempelkan kode yang disalin dari Firebase sebelumnya. Kode yang ditunjukkan pada Gambar 13 harus ditempelkan di dekat akhir tag tubuh Anda, dalam hal ini tepat sebelum penyertaan skrip puns.js. Saya telah menempelkan kode untuk aplikasi permainan kata-kata saya ke dalam Listing 2.
Cantuman 2: Halaman html dengan kode Firestore ditambahkan.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAJUQUXm_oYXAo2M1yukGT8lnTKeuMd53o",
authDomain: "the-pun-project.firebaseapp.com",
databaseURL: "https://the-pun-project.firebaseio.com",
projectId: "the-pun-project",
storageBucket: "the-pun-project.appspot.com",
messagingSenderId: "354041199852",
appId: "1:354041199852:web:4f9a613485174688f0f9c9",
measurementId: "G-4672MVCRK2"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="./pun.js"></script>
</body>
</html>
Dengan penambahan skrip ke HTML, Anda telah menghubungkan aplikasi Anda untuk mengakses Firebase. Namun, Anda perlu menambahkan satu baris kode lagi. Meskipun kode yang dihasilkan akan menyediakan koneksi ke Firebase, Anda perlu menambahkan link tambahan untuk mendapatkan kode yang akan mengakses database Cloud Firestore dalam Firebase. Anda ingin menambahkan baris sumber skrip berikut ke daftar:
Ini dapat ditambahkan tepat setelah panggilan ke:
Langkah selanjutnya adalah menambahkan logika yang akan mengaitkan field yang dimasukkan dari pengguna dengan field yang akan ditambahkan ke database Firestore. Ini akan dilakukan di file puns.js untuk menjaga kode tetap bersih.
Prosesnya terlebih dahulu membuat variabel database yang akan diikat ke database Firebase Cloud Firestore. Kemudian variabel perlu dibuat yang dapat diisi dengan nilai yang dimasukkan pengguna di halaman kita. Ini akan dilakukan dengan panggilan document.getElementById() standar. Terakhir, variabel yang ditampilkan dari halaman web perlu ditambahkan ke database Cloud Firestore sebagai kolom dalam dokumen dalam koleksi Puns. Daftar 3 menunjukkan JavaScript yang dapat melakukan semua ini.
Cantuman 3: File JavaScript pun.js
var db = firebase.firestore();
function storeData() {
var inputPun = document.getElementById("PunID").value;
var inputCategory = document.getElementById("Category").value;
var inputText = document.getElementById("PunText").value;
db.collection("Puns").doc(inputPun).set({
Category: inputCategory,
PunText: inputText
})
.then(function() {
console.log("Doc successful");
})
.catch(function(error) {
console.error("Error writing doc", error);
});
}
Perhatikan bahwa di Listing 3, database dibuat dengan variabel yang disebut db. Variabel ini kemudian digunakan untuk membuat dokumen baru (record) dengan menentukan nama koleksi yang disebut Puns dalam proses yang ditunjukkan pada Gambar 8. Ini diikuti dengan nama dokumen, yang dalam hal ini adalah ID pun kami yang dikumpulkan dari pengguna dan dimasukkan ke dalam variabel, inputPun. Di dalam dokumen, dua bidang ditambahkan, yang dilakukan di dalam set. Untuk menambahkan bidang, nama bidang dicantumkan, lalu titik dua dan terakhir nilai string yang akan ditambahkan. Dalam hal ini, inputCategory ditambahkan ke bidang Category dan inputText ditambahkan ke bidang PunText.
Daftar ini juga mencakup beberapa pengujian dan logika kesalahan untuk mencatat pesan ke konsol. Jika Anda membuka konsol pengembang browser Anda, maka Anda akan melihat pesan “Doc berhasil” ditampilkan saat dokumen ditambahkan ke Cloud Firestore Anda seperti yang ditunjukkan pada Gambar 14.
Gambar 14: Dokumen berhasil ditambahkan.
Dapat dipastikan bahwa dokumen telah ditambahkan dengan kembali ke proyek di konsol Firebase dan melihat database (dilakukan dengan mengklik Database di menu navigasi kiri). Gambar 15 menunjukkan bahwa penambahan permainan kata baru berhasil.
Gambar 15: Koleksi Puns dengan dokumen pun002 baru
Menyelesaikannya
Banyak yang dibahas dalam artikel ini tentang menambahkan dokumen ke database Firebase Cloud Firestore NoSQL. Anda mempelajari cara melakukannya dari Konsol dan dari aplikasi web sederhana. Ini hanyalah permulaan untuk menunjukkan betapa mudahnya menambahkan. Karena itu, menambahkan hanya satu langkah dalam sistem CRUD. Masih banyak yang harus dipelajari! Oh, dan jika Anda suka permainan kata-kata, lihat buku saya, Punny or Not Book of Puns, tersedia di Amazon!
# # #
