Menyiapkan Firebase untuk Proyek Anda Berikutnya

By Blok CC 20 Apr, 2020 Post a Comment

Dalam tutorial hari ini kita akan membuat Anda bangun dan berjalan dengan Firebase dengan membangun sebuah aplikasi sederhana ruang chat dengan memanfaatkan Firebase's Javascript API. Aplikasi ini akan menyediakan Anda dengan blok bangunan untuk mengembangkan aplikasi real-time yang lebih maju pada proyek-proyek Anda sendiri.

Persiapan

Untuk mendapatkan Firebase berdiri dan berjalan, Anda harus membuat akun gratis pengembang dengan mengunjungi situs web mereka, dan mendaftar. Setelah Anda telah berhasil terdaftar, Firebase akan mengarahkan Anda ke dashboard akun Anda di mana Anda akan memiliki akses ke semua lokasi data Firebase dan fitur lain yang rapi. Namun, benar sekarang Anda harus memilih Firebase data lokasi berjudul, MY FIRST APP. merasa bebas untuk mengubah nama aplikasi ini atau membuat yang baru.

Ketika, Firebase data lokasi diciptakan, ditugaskan nya sendiri unik-nama host. Nama host yang unik ini sangat penting; karena ini adalah lokasi di mana data Anda akan dibaca dari dan ditulis juga. Kita akan membahas nama host secara lebih mendalam, kemudian dalam tutorial tapi sekarang:

Mari Mulai Membangun

Item pertama dalam agenda: buat file HTML baru yang merujuk pada klien Firebase, jQuery, dan Bootstrap CDN. Cukup jelas bahwa kita perlu mereferensikan CDN Firebase. Sekarang, mungkin tidak jelas mengapa kami merujuk baik jQuery dan Bootstrap. Saya menggunakan jQuery dan Bootstrap untuk pengembangan aplikasi yang cepat. Kedua perpustakaan tersebut memungkinkan saya untuk melakukan hal-hal sangat cepat dan mereka tidak memerlukan banyak tangan pengkodean. Namun, saya akan tidak mencakup jQuery atau Bootstrap secara terperinci besar; Jadi jangan ragu untuk mempelajari lebih lanjut tentang library JavaScript ini pada Anda sendiri.

HTML

Markup yang mengimplementasikan apa yang digambarkan adalah sebagai berikut:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Firebase Chat Application</title>

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

    <script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</body>

</html>

Sekarang setelah file HTML kami dibuat dan merujuk pada CDN yang benar, mari mulai mengerjakan rest aplikasi kami.
Pertama, Kita perlu menentukan fungsi penting apa yang dibutuhkan aplikasi ini. Tampaknya bahwa kebanyakan aplikasi chat room gaya memiliki dua kesamaan: kotak pesan untuk mengirim pesan ke server dan bagian yang sudah dipopulasi dengan pesan dari server. Dalam kasus kami, server ini akan menjadi lokasi data Firebase kami.
Mari kita menerapkan kotak pesan untuk mengirim pesan ke server sebelum tangan. Ini akan memerlukan kita untuk membuat antarmuka yang sederhana yang mencakup sebuah field input dan tombol submit dibungkus dalam form tags. Karena kita menggunakan referensi Bootstrap stylesheet, kami memiliki kemudahan menggunakan beberapa style bootstrap standar untuk membuat antarmuka. Seperti yang saya katakan sebelumnya, ini sangat nyaman dan memungkinkan kita untuk menulis lebih sedikit kode dengan tangan.
Jadi mari kita tempatkan div dengan atribut kelas container langsung setelah tag body pembuka dalam file HTML. Ini adalah fitur bootstrap yang menyediakan batasan lebar dan padding untuk konten halaman. Dalam wadah tag, memungkinkan menambahkan judul dibungkus dalam tag H1, sehingga kami dapat memberikan aplikasi nama deskriptif. Judul saya akan, "Firebase Chat Appication". Jangan ragu untuk menggunakan kreativitas Anda sendiri saat menulis judul Anda.
Markup yang mengimplementasikan apa yang saya dijelaskan di atas, terlihat seperti ini:

<div class="container">

    <h1>Firebase Chat Application</h1>

</div>

Selain itu, kita juga perlu menambahkan div dengan atribut class: panel dan panel-default. Sebuah panel adalah komponen Bootstrap yang menyediakan kotak sederhana yang berisi empat interior DIVs: panel-heading, panel-title, panel-body, dan panel-footer secara default. Kami tidak akan menggunakan panel-heading dan panel-title tetapi kita akan menggunakan panel-body dan panel-footer. Panel DIV akan digunakan sebagai wadah utama untuk klien ruang chat.
Markup yang mengimplementasikan apa yang saya dijelaskan di atas, adalah sebagai berikut:

<div class="container">

    <h1>Firebase Chat Application</h1>

    <div class="panel panel-default">

        <div class="panel-body"></div>

        <div class="panel-footer"></div>

    </div>

</div>

Saat ini, kami tidak akan bekerja dengan panel-body. Namun, kita perlu menggunakan bagian ini kemudian dalam tutorial untuk mempopulasikan pesan dari lokasi data kami.
Sekarang kami akan berfokus pada panel footer div. Panel footer akan berisi sebuah field input, tombol submit, dan tombol reset. Kami akan memberikan input field atribut id comments dan tombol submit id atribut dari submit-btn. Keduanya atribut id ini sangat penting dan akan dibutuhkan dalam tutorial nanti. Jangan ragu untuk mengubah atribut id untuk elemen form.
Markup yang mengimplementasikan apa yang saya dijelaskan di atas, adalah sebagai berikut:

<div class="container">

    <h1>Firebase Chat Application</h1>

    <div class="panel panel-default">

        <div class="panel-body"></div>

        <div class="panel-footer">

            <form role="form">

                <div class="form-group">

                    <label for="comments">Please enter your comments here</label>

                    <input class="form-control" id="comments" name="comments">

                </div>

                <button type="submit" id="submit-btn" name="submit-btn"

                    class="btn btn-primary">Send Comments</button>

                <button type="reset" class="btn btn-default">Clear Comments</button>

            </form>

        </div>

    </div>

</div>

Sekarang mari kita menerapkan JavaScript yang akan memungkinkan kita untuk mengirim pesan ke lokasi data Firebase kami.

JavaScript

Pertama kita perlu menambahkan tag script langsung di atas penutup body tag, dalam HTML file. Dalam tag script, kita perlu membuat referensi ke lokasi data Firebase kami. Tanpa referensi ini, kita tidak bisa menulis data ke lokasi data kami. Ini dapat dicapai oleh initializing Firebase konstruktor dan melewati kami data lokasi sebagai parameter. Ingat, lokasi data Firebase dibuat saat Anda menyiapkan Firebase (nama host unik).
Kode sumber yang mengimplementasikan apa yang saya dijelaskan di atas, adalah sebagai berikut:

var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL");

Setelah menginisialisasi objek referensi Firebase, kita perlu mengikat event handler klik ke pemilih tombol kirim. Lokasi selektor ini berada dalam jarak panel footer. Juga, kita perlu memastikan bahwa event handler callback berisi return false sebagai baris terakhir dari kode. Ini akan memastikan bahwa aksi default menyerahkan formulir, tidak terjadi dan mencegah acara menggelegak DOM tree. Namun, dalam beberapa kasus Anda mungkin ingin event bubbling terjadi.
Kedua potongan JavaScript di bawah menerapkan apa digambarkan di atas:

$("#submit-btn").bind("click", function() {

    return false;

});

$("#submit-btn").bind("click", function(event) {

    event.preventDefault();

    event.stopPropagation();

});

Selanjutnya, kita akan mendefinisikan sebuah variabel yang referensi komentar pemilih dan variabel lain yang menghapus spasi putih dari awal dan akhir dari nilai komentar.
Kode sumber yang mengimplementasikan apa yang saya dijelaskan di atas, adalah sebagai berikut:

$("#submit-btn").bind("click", function() {

    var comment = $("#comments");

    var comment_value = $.trim(comment.val());

    return false;

});

Sekarang kita perlu menentukan metode yang diperlukan untuk benar-benar menulis tesis komentar ke lokasi data kami.

Menulis Data ke Firebase

API firebase yang menawarkan beberapa metode untuk menulis data ke lokasi data. Namun, dalam tutorial hari ini kita akan fokus pada menggunakan method set() dan push(). Mari kita tinjau apa masing-masing metode memungkinkan kita untuk melakukan.

set() method akan menulis data ke lokasi data, serta menimpa data apapun yang saat ini disimpan di data lokasi.
Metode push() yang akan menulis data ke lokasi data dengan secara otomatis menghasilkan lokasi anak baru dengan nama unik. Selain itu, nama unik ini akan diawali dengan sebuah time stamp. Ini akan memungkinkan semua anak lokasi akan diurutkan secara kronologis.

Setelah meninjau metode set() dan push(); Saya rasa cukup jelas bahwa kita perlu untuk memanfaatkan metode push() di aplikasi kita. Jika tidak, kami terus-menerus akan menimpa Komentar terbaru di lokasi data kami dan itu akan menjadi tidak menyenangkan.
Untuk melakukan ini, mari kita melompat kembali ke JavaScript kami yang sebelumnya ditambahkan ke halaman kami. Kita sekarang perlu untuk mendorong nilai komentar ke lokasi data kami. Sekarang perlu diingat bahwa ada push metode berbeda yang memungkinkan kita untuk push data dalam berbagai format, seperti objek, array, string, nomor, boolean, atau null. Kami hanya akan menggunakan objek yang memiliki nilai kunci sepasang komentar dan nilai komentar. Selain itu, kami akan melampirkan callback opsional untuk api setelah metode push telah selesai. Callback akan mengembalikan sebuah objek kesalahan pada kegagalan dan keberhasilan, nilai null.
Kode sumber yang mengimplementasikan apa yang saya dijelaskan di atas, adalah sebagai berikut:

$("#submit-btn").bind("click", function() {

    var comment = $("#comments");

    var commentValue = $.trim(comment.val());

    fireBaseRef.push({comment: commentValue}, function(error) {

        if (error !== null) {

            alert('Unable to push comments to Firebase!');

        }

    });

    return false;

});

Sekarang mari kita menambahkan sesuatu untuk memastikan bahwa ruang chat pengguna tidak dapat menulis pesan kosong ke lokasi data kami. Ini dapat dengan mudah dicapai dengan menambahkan sederhana pernyataan if else yang memeriksa panjang nilai komentar.
Kode sumber yang mengimplementasikan apa yang saya dijelaskan di atas, adalah sebagai berikut:

$("#submit-btn").bind("click", function() {

    var comment = $("#comments");

    var commentValue = $.trim(comment.val());

    if (commentValue.length === 0) {

        alert('Comments are required to continue!');

    } else {

        _fireBaseRef.push({comment: commentValue}, function(error) {

            if (error !== null) {

                alert('Unable to push comments to Firebase!');

            }

        });

        comment.val("");

    }

    return false;

});

Hebat, kami berhasil menyelesaikan bagian aplikasi kami yang memungkinkan pengguna untuk menulis data ke lokasi data kami. Namun, kami tidak memiliki fungsi yang menyediakan pengalaman obrolan langsung kepada pengguna. Jenis pengalaman ini akan membutuhkan kemampuan untuk membaca data dari lokasi anak, di dalam lokasi data.

Membaca Data dari Firebase

Seperti yang telah disebutkan sebelumnya, sebagian besar aplikasi gaya ruang obrolan membaca data dari server dan kemudian mengisi bagian antarmuka. Kami perlu melakukan hal yang sama dalam aplikasi kami, dengan memanfaatkan API Firebase.
API firebase yang menawarkan beberapa metode untuk membaca data dari data lokasi. Dalam todays tutorial, kita akan fokus pada menggunakan metode on().
Metode on() memiliki beberapa argumen yang layak, tapi kita hanya akan menutupi dua argumen: eventType dan callback. Mari kita tinjau kedua.

Memilih `eventType`

Argumen "eventType" memiliki beberapa pilihan. Mari kita lihat masing-masing sehingga kita dapat menentukan yang akan memenuhi kebutuhan kita.

"value" - akan ditriger sekali, dan membaca semua komentar, dan setiap kali perubahan komentar itu akan menjadi trigger lagi, serta membaca semua komentar.
"child_added" - akan ditriger setelah untuk setiap komentar, serta setiap kali komentar baru ditambahkan.
"child_removed" - akan ditrigger setiap komentar dihapus.
"child_changed" - akan diditrigger setiap komentar berubah.
"child_moved" - akan ditrigger saat order komentar berubah.

Setelah melihat dari atas opsi di atas, tampaknya cukup jelas bahwa kita harus menggunakan "child_added" sebagai kami "eventType". Jenis ini bahkan akan dipicu setelah untuk setiap komentar di lokasi data kami, serta setiap kali komentar baru ditambahkan. Selain itu, ketika komentar baru ditambahkan itu tidak akan kembali seluruh rangkaian komentar di lokasi tersebut, tetapi menambahkan hanya child terakhir. Ini adalah persis apa yang kita inginkan! Ada tidak perlu untuk kembali seluruh set komentar, ketika komentar baru ditambahkan.

Menganalisis `callback`

"callback" untuk metode on() menyediakan item yang mengacu pada Firebase sebagai sebuah "snapshot data" yang memiliki beberapa fungsi anggota, fokus hari ini adalah name() dan val().
Fungsi anggota name() menyediakan kami dengan nama unik "snapshot dari data". Jika Anda ingat sebelumnya, kami menggunakan fungsi push() untuk menulis komentar baru ke lokasi data kami. Ketika push() dipanggil, itu menghasilkan lokasi child baru dengan menggunakan nama yang unik dan itu adalah nama yang akan dikembalikan melalui fungsi callback member, name().
Fungsi anggota val() menyediakan kami dengan representasi objek JavaScript "snapshot dari data" dan snapshot ini, kita akan mampu mengambil komentar dari lokasi data kami. Namun, kita perlu mundur sejenak.
Sebelumnya dalam tutorial ini kami menerapkan JavaScript yang diperlukan untuk mendorong komentar ke lokasi Firebase kami dan kami melakukan ini dengan mendorong objek dengan pasangan nilai kunci. Dalam hal ini, kuncinya adalah 'comment' dan nilainya adalah input yang dimasukkan oleh pengguna. Oleh karena itu, jika kita ingin mengekstrak komentar dari kami "snapshot dari data" kita perlu untuk mengenali jenis data yang benar. Dalam kasus ini kita berhadapan dengan suatu benda, sehingga Anda dapat menggunakan notasi titik atau braket notasi untuk mengakses properti yang ditetapkan.
Kedua potongan JavaScript yang di bawah ini, menerapkan apa digambarkan di atas:

fireBaseRef.on('child_added', function(snapshot) {

    var uniqName = snapshot.name();

    var comment = snapshot.val().comment;

});

fireBaseRef.on('child_added', function(snapshot) {

    var uniqName = snapshot.name();

    var comment = snapshot.val()["comment"];

});

Rendering Komentar

Selanjutnya Mari kita membuat sederhana, namun bersih cara untuk menampilkan setiap komentar. Ini dapat dengan mudah dicapai dengan membungkus setiap komentar dalam div dan pelabelan setiap komentar dengan nama unik. Biasanya komentar dilabeli dengan nama pengguna yang menulis komentar itu, dalam kasus kami, ini adalah klien anonim ruang chat.
Kode sumber yang mengimplementasikan apa yang saya dijelaskan di atas, adalah sebagai berikut:

var commentsContainer = $('#comments-container');

$('<div/>', {class: 'comment-container'})

    .html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment);

Selanjutnya kita harus menambahkan setiap komentar untuk komentar wadah dan mendapatkan posisi vertikal saat ini komentar scrollbar wadah dan gulir ke lokasi terbaru. Ini akan memastikan bahwa setiap kali komentar dipush ke Firebase, semua pengguna yang menggunakan aplikasi chatting akan melihat komentar terbaru. Semua ini dilakukan dalam callback.
Seharusnya terlihat seperti ini:

var commentsContainer = $('#comments-container');

    $('<div/>', {class: 'comment-container'})

        .html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment)

        .appendTo(commentsContainer);

    commentsContainer.scrollTop(commentsContainer.prop('scrollHeight'));

Sekarang mari kita menerapkan beberapa style CSS sederhana ke DIV yang melilit setiap blok komentar. Ini akan membuat tampilan sedikit lebih menarik dan user friendly. Style ini harus ditambahkan dalam tag style, yang terletak di head HTML.
Kode sumber yang mengimplementasikan apa yang saya dijelaskan di atas, adalah sebagai berikut:

.container {

    max-width: 700px;

}

#comments-container {

    border: 1px solid #d0d0d0;

    height: 400px;

    overflow-y: scroll;

}

.comment-container {

    padding: 10px;

    margin:6px;

    background: #f5f5f5;

    font-size: 13px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

}

.comment-container .label {

    margin-right: 20px;

}

.comment-container:last-of-type {

    border-bottom: none;

}

Menjalankan Aplikasi

Sekarang saatnya untuk menjalankan aplikasi kami. Mari kita mulai dengan membuka dua contoh browser favorit kami yang modern dan menempatkannya secara berdampingan di desktop kami. Selanjutnya, kita akan menelusuri ke lokasi file dari file kami yang kami buat, di kedua browser. Uji coba dengan menulis beberapa komentar dan nikmati keajaiban Firebase.
Hal ini luar biasa bahwa hanya beberapa baris kode dapat menghasilkan sebuah aplikasi yang kuat. Jangan ragu untuk mengedit potongan ini dengan cara apapun untuk menghasilkan hasil yang diinginkan.
Memeriksa demo online untuk melihatnya dalam tindakan. Berikut adalah kode sumber lengkap untuk seluruh ruang chat aplikasi:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Firebase Chat Application</title>

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <style>

        .container {

            max-width: 700px;

        }

        #comments-container {

            border: 1px solid #d0d0d0;

            height: 400px;

            overflow-y: scroll;

        }

        .comment-container {

            padding: 10px;

            margin:6px;

            background: #f5f5f5;

            font-size: 13px;

            -moz-border-radius: 5px;

            -webkit-border-radius: 5px;

            border-radius: 5px;

        }

        .comment-container .label {

            margin-right: 20px;

        }

        .comment-container:last-of-type {

            border-bottom: none;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>Firebase Chat Application</h1>

        <div class="panel panel-default">

            <div class="panel-body">

                <div id="comments-container"></div>

            </div>

            <div class="panel-footer">

                <form role="form">

                    <div class="form-group">

                        <label for="comments">Please enter your comments here</label>

                        <input class="form-control" id="comments" name="comments">

                    </div>

                    <button type="submit" id="submit-btn" name="submit-btn"

                        class="btn btn-success">Send Comments</button>

                    <button type="reset" class="btn btn-danger">Clear Comments</button>

                </form>

            </div>

        </div>

    </div>

    <script src="http://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script>

        var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL");

        $("#submit-btn").bind("click", function() {

            var comment = $("#comments");

            var commentValue = $.trim(comment.val());

            if (commentValue.length === 0) {

                alert('Comments are required to continue!');

            } else {

                fireBaseRef.push({comment: commentValue}, function(error) {

                    if (error !== null) {

                        alert('Unable to push comments to Firebase!');

                    }

                });

                comment.val("");

            }

            return false;

        });

        fireBaseRef.on('child_added', function(snapshot) {

            var uniqName = snapshot.name();

            var comment = snapshot.val().comment;

            var commentsContainer = $('#comments-container');

            $('<div/>', {class: 'comment-container'})

                .html('<span class="label label-default">Comment ' 

                    + uniqName + '</span>' + comment).appendTo(commentsContainer);

            commentsContainer.scrollTop(commentsContainer.prop('scrollHeight'));

        });

    </script>

</body>

</html>

Dalam Ringkasan

Dalam tutorial hari ini, kami bekerja di sepanjang proses penerapan aplikasi ruang obrolan sederhana dengan memanfaatkan API JavaScript Firebase. Dengan demikian, kami dapat merasakan kekuatan Firebase dan mendapatkan apresiasi atas kenyamanannya. Di bawah ini adalah beberapa item utama yang kami klik hari ini:

Referensi Firebase data lokasi oleh initializing Firebase konstruktor.
Menulis data ke Firebase dengan menggunakan metode push.
Membaca data dari Firebase dengan menggunakan metode on dengan jenis acara 'child_added'.

Saya harap tutorial ini telah memberi Anda titik awal yang Anda butuhkan untuk mengambil lebih jauh dengan Firebase. Jika Anda memiliki pertanyaan atau komentar, jangan ragu untuk meninggalkan mereka di bawah ini. Thanks lagi untuk waktu Anda dan terus mengeksplorasi kemungkinan tak terbatas Firebase api.

Sumber daya

Firebase
jQuery
Bootstrap