What is Google Firebase? Create a Firebase chat application
Firebase is a mobile platform that helps you quickly develop high-quality applications, develop applications for large-scale users, and earn more.
Firebase Analytics
Is a free solution and analysis is not limited. Manage user behavior and measures from a single dashboard.
Firebase Develop
Build better apps and do better. Important in saving time developing high quality, application has few bugs.
- Cloud Messaging is a free, multi-platform messaging solution. Each message counts up to 4KB in a client application.
- Firebase Authentication Most applications require authentication. Helps the application save secure data used in the cloud.
- Firebase Realtime Database NoSQL Cloud Database Synchronization. Data is synchronized across all clients in real time, and is always available when the application is offline.
- Firebase Storage is built for application developers, for storing and serving user-created content, such as images or video.
- Firebase Hosting is fast and secure static hosting for web applications.
- The Firebase Test Lab provides virtual and physical devices that allow running simulation simulations of actual use environments
- Firebase Crash Reporting Comprehensive information and actions to help diagnose and repair problems in the application.
Firebase Grow
- Notifications allows the user to send and maintain messages. Usage is free and unlimited.
- Remote Config Updates the app without deploying a new version. Easy installation.
- App Indexing Helps users discover and re-engage with your app by displaying relevant in-app content in Google search results.
- Dynamic Links are smart URLs that automatically change the behavior to provide the best on different platforms. Dynamic linking may exist in the application's installation process and send users to relevant content whether they are a new user or a longtime customer.
- Invites application introduction and sharing.
- AdWords Automatically associates AdWords with users you specify in Firebase Analytics. Improve your ad targeting and optimize your campaign performance.
Deploy the Firebase web chat application
1. Overview
You will learn how to use Firebase-based platforms to easily create web applications and you will implement and deploy a Firebase-based chat application.
You will learn
- Firebase Realtime Database and Firebase Storage Synchronization.
- Authenticate users using the Firebase Auth base.
- Deploy your web applications into static storage
You will need what to do
- Editing content using WebStorm, Atom, Sublime, Notepad ++
- Sample code
- Use the Chrome browser
2. Download the sample code
The sample code above is github download here: https://github.com/firebase/friendlychat
firebase-codelabs sample project container for multiple platforms. This codelab uses only directories:
- web-start is the sample code you will follow the following instructions
- Visit The complete code for the sample application works
3. Create a Firebase project and install your application
Chọn Add Firebase to your web app
Copy the html code and the index.html file of the sample code above
Activate Google user authentication
4. Install the web server local to run the modified sample code
- Install the Web Server for Chrome addon (You can use IIS server, NodeJS, wampserver ...)
- Configure the path to web-start
5. Start the application
Go to http://127.0.0.1:8887/ to see the interface of the web application as follows
6. Register account login
Modify the FriendlyChat.prototype.initFirebase function in the script / main.js file so that it configures the Firebase SDK and initializes the auth:
1
2
3
4
5
6
7
8
9
10
11
|
// 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));
};
|
Authenticate user access to Google
Change the function FriendlyChat.prototype.signIn function:
1
2
3
4
5
6
7
8
|
// 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);
};
|
Change the function FriendlyChat.prototype.signOut function:
1
2
3
4
5
6
7
|
// Signs-out of Friendly Chat.
FriendlyChat.prototype.signOut = function() {
// Sign out of Firebase.
this.auth.signOut();
};
|
You want to display the profile image of the login user and the name on the menu bar. You must set the FriendlyChat.prototype.onAuthStateChanged function to enable when changing the auth state. This function is passed to an object using firepower when activated. Change two lines with a TODO:
1
2
3
4
5
6
7
8
9
10
|
// 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
...
|
You want to display an error message if the user tries to send the message when the user is not logged on. To detect if the user is actually logged in add the first few lines of the FriendlyChat.prototype.checkSignedInWithMessage function where TODO:
1
2
3
4
5
6
7
8
9
10
|
// 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;
}
...
|
Verify that the login is working
- Reload this link http://127.0.0.1:8887/
- Click the Sign in button
- After completing the login, you will only see the image of the user
Note: In addition to authenticating user rights, Firebase also validates the URL that is allowed to run the application. By default, the URLs allowed are: localhost and * .firebaseapp.com. To add more URLs, follow the image below
7. Send and read messages
To synchronize messages in the app, you will need to add trigger events when changes are made to the data and then create a UI element that shows the new message.
Adding that code triggers new messages added to the application's user interface. To do this modify the FriendlyChat.prototype.loadMessages function. This is where the subscriber will subscribe to the listener for change on the data. They will only display the 12 latest chat messages to avoid displaying a very long history.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 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);
};
|
To send user messages to the Firebase database, we change the FriendlyChat.prototype.saveMessage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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);
});
}
};
|
Check sync messages
Check on user browser
Check out the google firebase admin page
So it's a very simple web-based chat application that just needs a bit of html editing and a google firebase subscription. With the creation of firebase chat applications using HTML and Javascript, you can deploy to the following systems: Asp.net, PHP, Java ... are both.
Comments
Post a Comment