how to build android chat app with firebase for 2 hours?
TRANSCRIPT
Nguyen Ba Thanh
u Mobile App/Game Expert
u CoFounder & CEO WePlay
u Productsu 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 THANHfb.com/[email protected]
Lecture Structure
1. Firebase Introduction2. Demo ChatApp3. [Key Notes] Firebase technical for ChatApp4. [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 account2. 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 Firebase3. 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 permission4. 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 Android5. 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 Database6. 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 users7. 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 StudioStep 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 Studio2. File -> New -> New Project3. Fill infomation of project and finish4. 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 FirebaseStep 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 permissionStep 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 & implementStep 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 dataStep 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.javaand 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 FirebaseStep 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Copy this code to your MainActivity.javaFirebase.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 databaseStep 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Step 7.1. Define variables in MainActivity.javaStep 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 FirebaseStep 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 listviewStep 10. Send message
Step 9.1. Define variable FirebaseListAdapterStep 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
