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

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 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/thanhnb1101thanhnotes.comthanhnb1101@gmail.com0975.705.669

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

Thanks for listen!

fb.com/thanhnb1101thanhnotes.comthanhnb1101@gmail.com0975.705.669