Google Firebase – Phần 2: Web chat cơ bản trong 5 phút
Như đã giới thiệu ở phần trước, Google Firebase là 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 với rất nhiều ưu điểm và để làm rõ hơn về các ưu điểm của Google Firebase, trong bài viết này tôi sẽ cùng với các bạn làm thử một ứng dụng Chat nền Web sử dụng Firebase làm cơ sở dữ liệu.
Trước khi bắt đầu, để các bạn dễ dàng hình dung về những gì sắp làm tiếp theo đây, tôi xin được phép nói sơ qua các chức năng của web chat mà chúng ta sắp sửa tiến hành. Do đây chỉ là ví dụ đơn giản nên Web Chat này sẽ chỉ có chức năng duy nhất là chat mà thôi, cụ thể hơn là nó sẽ chỉ có ô để nhập tên và nhập message, khi bạn nhấn enter thì message sẽ được truyền và hiển thị cho tất cả những người đang mở web chat đó. Chỉ đơn giản vậy thôi :-). Và giờ chúng ta hãy cùng bắt tay vào công việc chính thôi nào.
I. Đăng kí và tạo ứng dụng trên Google Firebase
Để thực hiện được Web Chat này, đầu tiên chúng ta sẽ cần có tài khoản và một ứng dụng trên Firebase để chứa dữ liệu chat của chúng ta. Để thực hiện được công việc này các bạn hãy làm theo các bước sau:
Bước 1: Truy cập vào trang https://www.firebase.com/ và chọn “Sign up with Google” ở ngay phần đầu trang
Bước 2: Đăng nhập tài khoản Google nếu chưa đặp nhập
Bước 3: Cấp quyền truy cập tài khoản Google cho Firebase bằng cách chọn tài khoản mà bạn định sử dụng để đăng kí Firebase
Bước 4: Tạo mới 1 ứng dụng (APP) trên Firebase.
Sau khi đăng được tài khoản ở Firebase, bạn sẽ được chuyển đến trang quản lý tài khoản có giao diện như hình bên dưới:
Hãy nhập tên ứng dụng vào ô App Name trong vùng bôi đỏ và Firebase sẽ tự cấp cho ứng dụng của bạn 1 đường link ở phần App URL, 1 điều cần chú ý là nếu App URL của bạn phải là duy nhất trên hệ thống nên nếu bạn thấy thông báo “This Firebase URL is not available” như hình bên dưới thì hãy chỉnh sửa lại App URL của bạn đến khi không xuất hiện thông báo đó nữa thì thôi nhé.
Cuối cùng hãy nhấn vào nút “CREATE NEW APP” để hoàn thành việc tạo ứng dụng của bạn.
Như vậy là bạn đã hoàn thành việc đăng kí và tạo ứng dụng với Google Fire rồi đó.
II. Lập trình Web Chat
Và bây giờ chúng ta sẽ bắt tay vào lập trình trang web chat cơ bản. Trước khi bắt tay vào lập trình các bạn hãy chuẩn bị cho mình 1 IDE hoặc text editor có hỗ trợ lập trình Web như Netbeans, WebStorm, SublimeText, … Về phần mình, trong bài viết này mình sẽ sử dụng Notepad++. Và để kịp làm xong Web Chat trong 5 phút chúng ta cần bắt tay ngay vào việc lập trình với các bước sau.
Bước 1: Tạo khuôn mẫu HTML cơ bản và thêm thư viện Google Firebase cùng jQuery
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Simple Chat by Google Firebase</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <body> </body> </html> |
Bước 2: Tạo kết nối tới ứng dụng Google Fire của bạn bằng cách tạo 1 đối tượng Firebase từ App URL của ứng dụng Firebase của bạn thông qua javascript
var myDataRef = new Firebase("https://that2u.firebaseio.com/");
Chú ý: Đừng quên thay https://that2u.firebaseio.com/ bằng App URL mà bạn đã tạo ở bước 4 phần 1 nhé
Bước 3: Tạo vùng hiển thị message cùng ô nhập tên và message
|
1 2 3 4 5 6 7 |
<div id="messgesDiv"> <center><h3>Message</h3></center> </div> <div style="margin-top: 20px;"> <input type="text" id="nameInput" placeholder="Name"> <input type="text" id="messageInput" placeholder="Message"> </div> |
Bước 4: Gửi message lên Firebase bằng cách lắng nghe sự kiện khi ấn Enter ở ô nhập message.
Việc gửi 1 message chính là việc thêm 1 bản ghi vào CSDL trên Google Firebase, việc này được thực hiện thông qua các hàm set (chỉ thêm 1 bản ghi) hoặc push (có thể thêm nhiều bản ghi) của đối tượng Firebase bạn đã tạo ở trước.
Chú ý: Các hàm set và push nhận đầu vào theo dạng đối tượng đặt trong cặp ngoặc kép {}, tên trường và giá trị ngăn cách nhau bởi dấu hai chấm ‘:’, các trường ngăn cách bởi dấu phẩy ‘,’
|
1 2 3 4 5 6 7 8 9 |
$("#messageInput").keypress(function (e){ if(e.keyCode == 13){ //Enter var name = $("#nameInput").val(); var text = $("#messageInput").val(); //myDataRef.set({name: name, text: text}); myDataRef.push({name: name, text: text}); $("#messageInput").val(""); } }); |
Bước 5: Nhận các message từ Google Firebase.
Để thực hiện việc này, ta sẽ lắng nghe sự kiện ‘child_added’ thông qua hàm on của đối tượng Firebase. Khi nhận được sự kiện này ta sẽ thêm 1 message vào vùng hiển thị message thông qua hàm displayChatMessage
Chú ý: Sự kiện ‘child_added’ sẽ phát sinh khi có một bản ghi mới được thêm vào CSDL trên Firebase (1 message được gửi đi).
|
1 2 3 4 5 6 7 8 9 10 |
myDataRef.on('child_added', function (snapshot){ var message = snapshot.val(); displayChatMessage(message.name, message.text); }); function displayChatMessage(name, text){ console.log(name + " -- " + text); $('<div/>').text(text).prepend($('<em/>').text(name+": ")).appendTo($("#messgesDiv")); $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight; } |
Và đây là thành quả:
Dưới đây là code của toàn bộ Web Chat cho các bạn dễ tham khảo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<html> <head> <title>Simple Chat by Google Firebase</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <body style="max-width: 800px;"> <div id="messgesDiv"> <center><h3>Message</h3></center> </div> <div style="margin-top: 20px;"> <input type="text" id="nameInput" placeholder="Name"> <input type="text" id="messageInput" placeholder="Message"> </div> <script> var myDataRef = new Firebase("https://that2u.firebaseio.com/"); $("#messageInput").keypress(function (e){ if(e.keyCode == 13){ //Enter var name = $("#nameInput").val(); var text = $("#messageInput").val(); console.log(name + " -- " + text); ///myDataRef.set({name: name, text: text}); //chỉ cho phép thêm 1 bản ghi myDataRef.push({name: name, text: text}); //cho phép thêm nhiều bản ghi $("#messageInput").val(""); } }); myDataRef.on('child_added', function (snapshot){ var message = snapshot.val(); displayChatMessage(message.name, message.text); }); function displayChatMessage(name, text){ console.log(name + " -- " + text); $('<div/>').text(text).prepend($('<em/>').text(name+": ")).appendTo($("#messgesDiv")); $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight; } </script> </body> </html> |
Như vậy là chúng ta đã hoàn thành 1 Web Chat đơn giản với Google Firebase rồi đó, thật đơn giản và nhanh chóng phải không nào. Tuy rằng đây chỉ là một ví dụ đơn giản nhưng phần nào cũng đã thể hiện được các ưu điểm của Google Firebase đối với các lập trình viên. Bởi nếu không có Firebase thì để làm được 1 Web Chat như thế này các bạn sẽ cần thực hiện rất nhiều công việc từ thiết kế và tạo CSDL, thuê hosting, tự dev phần server và kết nối giữa client với server rồi mới đến việc viết client như trong bài viết này, và tin mình đi để làm hết được tất cả các công việc trên các bạn có lẽ sẽ cần tới vài ngày thậm chí là cả tuần hay vài tuần chứ không chỉ là 5 phút như với Firebase đâu.
About Author
Minh Phạm
Chào các bạn. Mình là Phạm Anh Minh. Hiện mình đang làm công việc performance analysis cho Samsung R&D Việt Nam. Hi vọng các bài viết của mình giúp ích được cho các bạn.
Hi there, I want to subscribe for this web site to obtain hottest updates, so where
can i do it please assist.
You can you the function “Subscribe to Blog via Email” in the right side bar of my website