Google Firebase – Phần 2: Web chat cơ bản trong 5 phút

Author: | Posted in API, Google Firebase, Programming, Web 2 Comments
Google Firebase – Phần 2: Web chat cơ bản trong 5 phút
5 (100%) 1 vote

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

Đặp nhập Google Firebase bằng tài khoản Google

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

Cấp quyền truy cập tài khoản Google cho Google 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:

Trang quản lý tài khoản của Google Firebase

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é.

Thông báo khi App URL không hợp lệ

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.

Tạo ứng dụng Google Firebase

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

 

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

 

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 ‘,’

 

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).

Và đây là thành quả:

Web chat với Google Firebase

Dưới đây là code của toàn bộ Web Chat cho các bạn dễ tham khảo:

 

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.

Loading Facebook Comments ...
Comments
  1. Posted by x.un-url.com
    • Posted by Minh Phạm

Add Your Comment