Google Firebase - Phần 2

Như bài giới thiệu trước mình đã chia sẻ về Google Firebase một dịch vụ cơ sở dữ liệu thời gian thực hoạt động trên nền tảng đám mây được cung cấp bởi Google nhằm giúp các lập trình phát triển nhanh các ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu.

Các bạn có thể xem lại ở đây: https://viblo.asia/hungbaby/posts/ymwGXVZ4R4p1

Hôm nay mình sẽ viết demo 1 ứng dụng comment bài viết nhỏ để giúp các bạn dễ hình dung hơn.

1. Đăng ký tài khoản Google Firebase.

   • Truy cập vào địa chỉ: https://www.firebase.com/login/
   • Login với tài khoản google hoặc tài khoản github.
   • Sau khi login bạn sẽ thấy giao diện quản trị như sau:

   

   • Nhập tên ứng dụng và click vào "CREATE NEW APP" để tạo app mới.
   • Hãy nhớ APP URL của bạn.

2. Bắt đầu code thôi

   • Đầu tiên bạn cần include các file thư viện cần thiết:

        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>

- Đây là form cho phép bạn gửi một bình luận về một bài viết, 1 sản phẩm, hoặc hiểu đơn giản hơn là ứng dụng chat.
- Phần hiển thị nội dung các comments:

        <div class="panel-body">
            <div id="comments-container"></div>
        </div>

- Tạo form gồm các phần nhập comment, nhập tên, email, và nhập chuỗi ký tự match với một chuỗi tự sinh khác nhằm tránh các comment spam (input đã disable copy, paste):

        <label for="comments">Please enter your comments here</label>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <textarea class="form-control" id="comments" rows="4"></textarea>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-xs-6">
                    <input type="text" class="form-control" id="name" placeholder="Enter your name"></input>
                </div>
                <div class="col-xs-6">
                    <input type="text" class="form-control" id="email" placeholder="Enter your email"></input>
                </div>
            </div>
        </div>
        <div class="row mgt15">
            <div class="form-group">
                <div class="col-xs-6">
                    <input type="text" class="form-control" id="check-spam" placeholder="Enter string check spam"></input>
                </div>
                <div class="col-xs-6">
                    <input type="text" class="form-control" id="anti-spam" readonly="true"></input>
                </div>
            </div>
        </div>
        <div class="row mgt15">
            <div class="form-group">
                <div class="col-xs-12">
                    <button type="z" id="submit-btn" name="submit-btn" class="btn btn-primary">Send comment</button>
                </div>
            </div>
        </div>

- Tiếp theo là phần js để xử lý gửi dữ liệu lên Firebase

        var fireBaseRef = new Firebase("https://commenttestfirebase.firebaseio.com");
        $("#submit-btn").bind("click", function() {
            var comment = $("#comments");
            var name = $("#name");
            var email = $("#email");

            nameInput = trimText(name.val());
            emailInput = trimText(email.val());
            commentInput = trimText(comment.val());

            data = {
                name: nameInput,
                email: emailInput,
                comment: commentInput
            };

            // Firebase push data.
            fireBaseRef.push(data, function(error) {
                if (error !== null) {
                    alert('Unable to push comments to Firebase!');
                }
            });

            // Reset inputs.
            comment.val(');
            name.val(');
            email.val(');
            spam.val(')

            return false;
        });

- Với APP_URL mình nói ở trên:
    > var fireBaseRef = new Firebase(APP_URL);

    Sử dụng **fireBaseRef.push()** để gửi dữ liệu lên Firebase.

- Tiếp theo là việc lấy dữ liệu từ Firebase và đồng bộ với website, hiện thị nội dung:

        // Get data from firebase
        fireBaseRef.on('child_added', function(snapshot) {
            var name = snapshot.val().name;
            var email = snapshot.val().email;
            var comment = snapshot.val().comment;
            var commentsContainer = $('#comments-container');

            // Fill data into comment box.
            $('<div/>', {class: 'comment-container'})
                .html('<span class="name-email">'
                    + name + ' (' + email + ')</span>:<p class="mgt15">' + comment + "</p>").appendTo(commentsContainer);
            commentsContainer.scrollTop(commentsContainer.prop('scrollHeight'));
        });

- Kết quả:

![demo.PNG](/uploads/84f42db8-9c69-4027-8874-ecec6eab63cb.png)

1. Ở đây mình đã tự xử lý thủ công phần validate của các input. Bạn cũng có thể làm các khác

   • Truy cập vào Dashboard của APP (url chính là APP_URL)
   • Chọn tab: Security & Rules
   • Viết rule cho ứng dụng của mình:
   • Các bạn có thể viết rule để bắt email có đúng quy tắc, name có độ dài ..., bắt comment chứa những từ ngữ thô tục, ...
   • Ví dụ về rules:

   

2. Demo:

   • http://hungnup.com/comment.html
   • View source để xem toàn bộ nội dung code.