Android CHATAPP
with FIREBASE
FB.COM/THANHNB1101
THANHNOTES.COM
THANHNB1101@GMAIL.COM
0975.705.669
Nguyen Ba Thanh
u Mobile App/Game Expert
u CoFounder & CEO WePlay
u Products
u TOP 50 BlueBirdAward 2015
u “Bat Chu” – 10M Downloads 2015
u “Lich Van Nien” – 5M Downloads 2015
- Leading the Viet calendar mobile market for now
thanhnotes.com
NGUYEN BA THANH
fb.com/thanhnb1101
thanhnotes.com
thanhnb1101@gmail.com
0975.705.669
Lecture Structure
1. Firebase Introduction
2. Demo ChatApp
3. [Key Notes] Firebase technical for ChatApp
4. [Guide] Step by step to build ChatApp with Firebase
thanhnotes.com
1. 3 key values you will get?
3 key values you will get?
1. Knowledge Firebase basic
2. Know-how to create app on Android Studio
3. Know-how to create Android ChatApp with Firebase for million users
thanhnotes.com
2. Firebase Introduction
u A powerful platform for your mobile or web application
u Build cross-platform native mobile/web apps with Android, iOS, and JavaScript SDKs
thanhnotes.com
2. Firebase Introduction thanhnotes.com
3. Demo ChatApp
u Demo ChatApp
thanhnotes.com
4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
Link to registry: https://www.firebase.com/signup/
4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
Download Firebase SDK: edit build.gradle & rebuild
4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
Add  permission  INTERNET  to  AndroidManifest.xml
4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
Add to your activity (in this case, it’s
MainActivity.java)
4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
5.1. Create a reference to Firebase database
5.2. Write data
5.3. Read data
4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
1. Choose the Login & Auth tab.
2. Select the Email & Password tab and enable
authentication.
4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Prepare:
Download and extract files to your computer:
http://bit.ly/chatappvtc
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by
Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
1. Launch  Android  Studio
2.  File  -­>  New  -­>  New  Project
3.  Fill  infomation  of  project  and  finish
4.  Try  to  run  on  simulator  or  real  device  
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Add this code to build.gradle (app) and rebuild project to download Firebase SDK
dependencies {
compile 'com.firebase:firebase-client-android:2.5.1+’
}
//You can copy this codes in file step2.txt
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Add more this code to AndroidManifests.xml file (code in file step3.txt)
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Copy 3 file xml in folder “ShareResource/layout” to your layout
folder of your project and fill code to MainActivity.java as
step4.txt
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get
data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Copy 2 classes: FirebaseListAdapter.java and Message.java into
your project (app/java/vtc.edu.vn.vtcchatapp/)
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Copy this code to your MainActivity.java
Firebase.setAndroidContext(this);
thanhnotes.com
(refer code in step6.txt)
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Step 7.1. Define variables in MainActivity.java
Step 7.2. Add below code to MainActivity.java
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Copy code in file step8.txt to mLoginButton.setOnClickListener
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Step 9.1. Define variable FirebaseListAdapter
Step 9.2. Get messages to adapter and display to listview
Copy code in step9.txt
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Add code in step10.txt to mSend.setOnClickListener
thanhnotes.com
5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Final: Run
thanhnotes.com
Thanks for listen!
fb.com/thanhnb1101
thanhnotes.com
thanhnb1101@gmail.com
0975.705.669

How to build Android Chat App with Firebase for 2 hours?

  • 1.
  • 2.
    Nguyen Ba Thanh uMobile App/Game Expert u CoFounder & CEO WePlay u Products u TOP 50 BlueBirdAward 2015 u “Bat Chu” – 10M Downloads 2015 u “Lich Van Nien” – 5M Downloads 2015 - Leading the Viet calendar mobile market for now thanhnotes.com NGUYEN BA THANH fb.com/thanhnb1101 thanhnotes.com thanhnb1101@gmail.com 0975.705.669
  • 3.
    Lecture Structure 1. FirebaseIntroduction 2. Demo ChatApp 3. [Key Notes] Firebase technical for ChatApp 4. [Guide] Step by step to build ChatApp with Firebase thanhnotes.com
  • 4.
    1. 3 keyvalues you will get? 3 key values you will get? 1. Knowledge Firebase basic 2. Know-how to create app on Android Studio 3. Know-how to create Android ChatApp with Firebase for million users thanhnotes.com
  • 5.
    2. Firebase Introduction uA powerful platform for your mobile or web application u Build cross-platform native mobile/web apps with Android, iOS, and JavaScript SDKs thanhnotes.com
  • 6.
  • 7.
    3. Demo ChatApp uDemo ChatApp thanhnotes.com
  • 8.
    4. [Key Notes]Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com
  • 9.
    4. [Key Notes]Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com Link to registry: https://www.firebase.com/signup/
  • 10.
    4. [Key Notes]Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com Download Firebase SDK: edit build.gradle & rebuild
  • 11.
    4. [Key Notes]Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com Add  permission  INTERNET  to  AndroidManifest.xml
  • 12.
    4. [Key Notes]Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com Add to your activity (in this case, it’s MainActivity.java)
  • 13.
    4. [Key Notes]Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com 5.1. Create a reference to Firebase database 5.2. Write data 5.3. Read data
  • 14.
    4. [Key Notes]Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com 1. Choose the Login & Auth tab. 2. Select the Email & Password tab and enable authentication.
  • 15.
    4. [Key Notes]Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com
  • 16.
    5. [Guide] BuildChatApp Firebase Prepare: Download and extract files to your computer: http://bit.ly/chatappvtc thanhnotes.com
  • 17.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message thanhnotes.com
  • 18.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message 1. Launch  Android  Studio 2.  File  -­>  New  -­>  New  Project 3.  Fill  infomation  of  project  and  finish 4.  Try  to  run  on  simulator  or  real  device   thanhnotes.com
  • 19.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Add this code to build.gradle (app) and rebuild project to download Firebase SDK dependencies { compile 'com.firebase:firebase-client-android:2.5.1+’ } //You can copy this codes in file step2.txt thanhnotes.com
  • 20.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Add more this code to AndroidManifests.xml file (code in file step3.txt) thanhnotes.com
  • 21.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Copy 3 file xml in folder “ShareResource/layout” to your layout folder of your project and fill code to MainActivity.java as step4.txt thanhnotes.com
  • 22.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Copy 2 classes: FirebaseListAdapter.java and Message.java into your project (app/java/vtc.edu.vn.vtcchatapp/) thanhnotes.com
  • 23.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Copy this code to your MainActivity.java Firebase.setAndroidContext(this); thanhnotes.com (refer code in step6.txt)
  • 24.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Step 7.1. Define variables in MainActivity.java Step 7.2. Add below code to MainActivity.java thanhnotes.com
  • 25.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Copy code in file step8.txt to mLoginButton.setOnClickListener thanhnotes.com
  • 26.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Step 9.1. Define variable FirebaseListAdapter Step 9.2. Get messages to adapter and display to listview Copy code in step9.txt thanhnotes.com
  • 27.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Add code in step10.txt to mSend.setOnClickListener thanhnotes.com
  • 28.
    5. [Guide] BuildChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Final: Run thanhnotes.com
  • 29.