Google Firebase là gì? Tạo ứng dụng chat Firebase


Firebase là một nền tảng di động giúp bạn nhanh chóng phát triển các ứng dụng chất lượng cao, phát triển ứng dụng cho người dùng quy mô lớn và kiếm được nhiều tiền hơn.


Firebase Analytics

Là một giải pháp miễn phí và phân tích không giới hạn. Quản lý hành vi người dùng và các biện pháp  từ một bảng điều khiển duy nhất.

firebase analytic

Firebase Develop

Xây dựng ứng dụng tốt hơn và hoạt động tốt hơn. Quan trọng trong tiết kiệm thời gian phát triển chất lượng cao, ứng dụng có ít lỗi.

  • Cloud Messaging là một giải pháp tin nhắn đa nền tảng đáng tin cậy miễn phí.Mỗi tin nhắn dung lượng đến 4KB trong ứng dụng client.
  • Firebase Authentication Hầu hết các ứng dụng cần xác thực quyền. Giúp ứng dụng lưu dữ liệu an toàn sử dụng trong các đám mây.
  • Firebase Realtime Database cơ sở dữ liệu đám mây NoSQL đồng bộ hóa. Dữ liệu được đồng bộ hóa trên tất cả các client trong thời gian thực, và luôn có sẵn khi ứng dụng offline.
  • Firebase Storage được xây dựng cho các nhà phát triển ứng dụng, để lưu trữ và phục vụ nội dung do người dùng tạo ra, chẳng hạn như hình ảnh hoặc video.
  • Firebase Hosting nhanh chóng và an toàn lưu trữ tĩnh cho ứng dụng web.
  • Firebase Test Lab cung cấp các thiết bị vật lý và ảo cho phép chạy thử nghiệm mô phỏng môi trường sử dụng thực tế
  • Firebase Crash Reporting Thông tin toàn diện và hành động để giúp chẩn đoán và sửa chữa các vấn đề trong ứng dụng.

Firebase Grow

  • Notifications cho phép gửi và duy trì tin nhắn của người dùng. Sử dụng là miễn phí và không giới hạn.
  • Remote Config Cập nhật ứng dụng không cần triển khai một phiên bản mới. Cài đặt nhanh chóng dễ dàng.
  • App Indexing Trợ giúp người dùng khám phá và tái tham gia với các ứng dụng của bạn bằng cách hiển thị có liên quan nội dung trong ứng dụng trong kết quả tìm kiếm của Google.
  • Dynamic Links là các URL thông minh tự động thay đổi hành vi để cung cấp tốt nhất trên các nền tảng khác nhau. Liên kết động có thể tồn tại trong ứng dụng quá trình cài đặt và đưa người dùng tới nội dung có liên quan cho dù họ là một người dùng mới hoặc một khách hàng lâu năm.
  • Invites giới thiệu ứng dụng và chia sẻ.
  • AdWords Tự động liên kết AdWords với người dùng mà bạn xác định trong căn cứ Firebase Analytics. Cải thiện nhắm mục tiêu quảng cáo và tối ưu hóa hiệu suất chiến dịch của bạn.

Triển khai ứng dụng web chat Firebase

1. Tổng quan

Bạn sẽ học cách sử dụng các nền tảng căn cứ Firebase để dễ dàng tạo ra các ứng dụng web và bạn sẽ thực hiện và triển khai một ứng dụng trò chuyện sử dụng căn cứ Firebase.

Bạn sẽ học được

  • Đồng bộ dữ liệu Firebase Realtime Database và Firebase Storage.
  • Xác thực người dùng bằng cách sử dụng căn cứ Firebase Auth.
  • Triển khai các ứng dụng web của bạn vào lưu trữ tĩnh

Bạn sẽ cần những gì để làm

  • Chỉnh sửa nội dung bằng WebStorm, Atom, Sublime, Notepad++
  • Code mẫu
  • Sử dụng trình duyệt Chrome

2. Tải code mẫu

Code mẫu ở trên github tải về tại đây: https://github.com/firebase/friendlychat

firebase-codelabs kho chứa dự án mẫu cho nhiều nền tảng. codelab này chỉ sử dụng thư mục:

  • web-start là code mẫu bạn sẽ làm theo các hướng dẫn sau
  • web Các mã hoàn chỉnh cho các ứng dụng mẫu hoạt động

3. Tạo một Firebase project và cài đặt ứng dụng của bạn

Truy cập https://console.firebase.google.com/

Create a project firebase

Chọn Add Firebase to your web app

select add firebase to your web app

Copy đoạn mã html và file index.html của bộ code mẫu tải ở trên

html config firebase web app

copy html confige firebase to index.html

Kích hoạt xác thực người dùng Google

enable auth google firebase

4. Cài đặt web server local để chạy code mẫu đã chỉnh sửa

  • Cài đặt addon Web Server for Chrome (Bạn có thể sử dụng server IIS, NodeJS, wampserver ...)
  • Cấu hình đường dẫn chạy đến web-start

config web server for Chrome

5. Bắt đầu chạy ứng dụng

Truy cập link http://127.0.0.1:8887/ sẽ thấy giao diện của ứng dụng web như sau

start web app firebase

Các ứng dụng không thể làm bất cứ điều gì ngay bây giờ nhưng với sự giúp đỡ của bạn, nó sẽ hoạt động trong giây lát nữa thôi! Bây giờ chúng ta xây dựng một cuộc trò chuyện thời gian thực!

6. Đăng ký đăng nhập tài khoản

Sửa đổi các chức năng FriendlyChat.prototype.initFirebase trong file script/main.js để nó cấu hình tính năng Firebase SDK và khởi auth:

// Sets up shortcuts to Firebase features and initiate firebase auth.
FriendlyChat.prototype.initFirebase = function() {
  // Shortcuts to Firebase SDK features.
  this.auth = firebase.auth();
  this.database = firebase.database();
  this.storage = firebase.storage();
  // Initiates Firebase auth and listen to auth state changes.
  this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};

Xác thực quyền truy cập người dùng Google

Thay đổi hàm FriendlyChat.prototype.signIn function:

// Signs-in Friendly Chat.
FriendlyChat.prototype.signIn = function() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  this.auth.signInWithPopup(provider);
};

Thay đổi hàm FriendlyChat.prototype.signOut function:

// Signs-out of Friendly Chat.
FriendlyChat.prototype.signOut = function() {
  // Sign out of Firebase.
  this.auth.signOut();
};

Bạn muốn hiển thị hình ảnh hồ sơ của người sử dụng đăng nhập và tên trên thanh menu. Bạn phải thiết lập các chức năng FriendlyChat.prototype.onAuthStateChanged để kích hoạt khi thay đổi trạng thái auth. Chức năng này được thông qua một đối tượng sử dụng căn cứ hỏa lực khi được kích hoạt. Thay đổi hai dòng với một TODO:

// Triggers when the auth state change for instance when the user signs-in or signs-out.
FriendlyChat.prototype.onAuthStateChanged = function(user) {
  if (user) { // User is signed in!
    // Get profile pic and user's name from the Firebase user object.
    var profilePicUrl = user.photoURL; // chỉ thay đổi dòng này
    var userName = user.displayName;   // chỉ thay đổi dòng này

    ...

Bạn muốn hiển thị một thông báo lỗi nếu người dùng cố gắng để gửi tin nhắn khi người dùng không đăng nhập. Để phát hiện nếu người dùng đang thực sự đăng nhập thêm các vài dòng đầu của hàm FriendlyChat.prototype.checkSignedInWithMessage nơi TODO:

// Returns true if user is signed-in. Otherwise false and displays a message.
FriendlyChat.prototype.checkSignedInWithMessage = function() {
  // Return true if the user is signed in Firebase
  if (this.auth.currentUser) {
    return true;
  }

  ...

Kiểm tra việc đăng nhập đã hoạt động chưa

  • Tải lại link http://127.0.0.1:8887/ 
  • Click vào nút Sign in
  • Sau khi hoàn tất việc đăng nhập bạn sẽ thấy hình ảnh chỉ tiếc về người dùng

login google firebase

Lưu ý: Ngoài việc xác thực quyền người dùng ra thì Firebase còn xác thực URL được cho phép chạy ứng dụng. Mặc định thì URL được cho phép là: localhost và *.firebaseapp.com. Để thêm các URL khác thì bạn làm theo hình ảnh sau

authen domain firebase

7. Gửi và đọc tin nhắn

Để đồng bộ hóa tin nhắn trong ứng dụng, Bạn sẽ cần phải thêm sự kiện trigger khi thay đổi được thực hiện cho các dữ liệu và sau đó tạo ra một yếu tố giao diện người dùng cho thấy tin nhắn mới.

Thêm mã đó trigger thông điệp mới được thêm vào giao diện người dùng của ứng dụng. Để làm điều này sửa đổi các FriendlyChat.prototype.loadMessages chức năng. Đây là nơi mà sẽ đăng ký người nghe mà nghe để thay đổi trên dữ liệu. Chúng sẽ chỉ hiển thị 12 tin nhắn mới nhất của trò chuyện để tránh hiển thị một lịch sử rất lâu.

// Loads chat messages history and listens for upcoming ones.
FriendlyChat.prototype.loadMessages = function() {
  // Reference to the /messages/ database path.
  this.messagesRef = this.database.ref('messages');
  // Make sure we remove all previous listeners.
  this.messagesRef.off();

  // Loads the last 12 messages and listen for new ones.
  var setMessage = function(data) {
    var val = data.val();
    this.displayMessage(data.key, val.name, val.text, val.photoUrl, val.imageUrl);
  }.bind(this);
  this.messagesRef.limitToLast(12).on('child_added', setMessage);
  this.messagesRef.limitToLast(12).on('child_changed', setMessage);
};

Để gửi tin nhắn người dùng lên database Firebase thì chúng ta thay đổi hàm FriendlyChat.prototype.saveMessage

FriendlyChat.prototype.saveMessage = function(e) {
  e.preventDefault();
  // Check that the user entered a message and is signed in.
  if (this.messageInput.value && this.checkSignedInWithMessage()) {
    var currentUser = this.auth.currentUser;
    // Add a new message entry to the Firebase Database.
    this.messagesRef.push({
      name: currentUser.displayName,
      text: this.messageInput.value,
      photoUrl: currentUser.photoURL || '/images/profile_placeholder.png'
    }).then(function() {
      // Clear message text field and SEND button state.
      FriendlyChat.resetMaterialTextfield(this.messageInput);
      this.toggleButton();
    }.bind(this)).catch(function(error) {
      console.error('Error writing new message to Firebase Database', error);
    });
  }
};

Kiểm tra việc đồng bộ tin nhắn

Kiểm tra trên trình duyệt người dùng

view history chat firebase ui

Kiểm tra trên trang quản trị google firebase

view history chat firebase manager

Vậy là xong ứng dụng chat web online cực kỳ đơn giản chỉ cần chỉnh sửa html một chút và đăng ký google firebase. Với việc tạo ứng dụng chat firebase bằng HTML và Javascript thì các bạn có thể triển khai lên các hệ: Asp.net, PHP, Java ... đều được cả

Các bạn có thử tính năng chat này tại link sau: http://www.mastercode.vn/html/demo/web-start/index.html có sử dụng thêm phần đăng nhập bằng Facebook

Chia sẽ bài viết :


Bài viết liên quan