Wednesday, May 20, 2020

Xamarin.Android - Chat Application Using Firebase - Part One

 Introduction

Hello everyone!

I am glad that you are here to learn some amazing stuff. In this article, I will show you how to make a chat application with Firebase on Xamarin.Android. This chat application is based on Firebase Auth and Firebase Database by using Xamarin.Firebase plugins.
 
Background

What is Firebase?

Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014.

Firebase Auth

Firebase Auth is a service that can authenticate users using only client-side code. It supports social login providers Facebook, GitHub, Twitter, and Google. Additionally, it includes a user management system whereby developers can enable user authentication with email and password login stored with Firebase.

Real-time Database

Firebase provides a real-time database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase's cloud. The company provides client libraries that enable integration with Android, iOS, JavaScript, Java, Objective-C, swift and Node.js applications. The database is also accessible through a REST API and bindings for several JavaScript frameworks such as AngularJS, React, Ember.js and Backbone.js. The REST API uses the Server-Sent Events protocol, which is an API for creating HTTP connections for receiving push notifications from a server. Developers using the real-time database can secure their data by using the company's server-side-enforced security rules.

The prerequisites
  • Before using Firebase Real-time Database, make sure that you have connected your Android app to Firebase.
  • Register Application to Firebase
  • Firebase.Xamarin Nuget Package
  • Firebase Database Nuget Package
  • Firebase Auth Nuget Package
  • Android Support Library v7 AppCompat
  • Android Support Design Library
  • Visual Studio 2017

The steps given below are required to be followed in order to create a chat app in Xamarin.Android, using Visual Studio.

Step 1: Create a Project

Open Visual Studio and go to New Project-> Templates-> Visual C#-> Android-> Blank app. Give it a name like ChatAppUsingFirebase.

 

Step 2: Install Android Support Library v7 AppCompat

Go to Solution Explorer-> Project Name-> References. Then, right-click "Manage NuGet Packages" and search for AppCompat. Install the AppCompat package.

 

Step 3: Install Android Support Design Library

Again Solution Explorer-> Project Name-> References. Then, right-click "Manage NuGet Packages" and search for Design Library. Install the Design Library package.

Step 4: Install Xamarin.Firebase.Auth NuGet Package

Similarly, install the Xamarin Firebase Auth package.

 

Step 5: Install Xamarin.FIrebase.Database Nuget Package

Similarly, install the Xamarin Firebase Database package to your application.

 

Step 6: Install Xamarin.Firebase Nuget Package

Similarly, install the Xamarin Firebase package to your application.

 
Step 7: Connect an Android app to FireBase

Go to the firebase site by using this link "https://console.firebase.google.com/u/0/", then go to the console and click on Add Project. Enter Project name and Country and then click on "Create Project".

 
Step 8 
 
Now, click on ‘Add Firebase to your Android App’ and copy the package name of your app followed by a click on Register App. All other fields are optional and can be left blank for now.
 
 
Step 9 
 
In the next step, download the google-services.json file and copy it to the app folder of your Android project. Next, go to the Project Source folder, find the ProjectName.csproj file. Open and edit to add the code given below for Google-services.json config.
 
  
 
After adding the code in ProjectName.csproj file, your project file looks like this.
 
 

Step 10: Email Authentication

By default, the Email/Password Authentication option is disabled. You need to do enable it, therefore, go to Firebase Console, select your project, and click on the "Authentication" tab. Click on the Sign-in method, select Email/Password, and enable it.

  

Step 11: Database access permissions

By default, the read and write access to your database is restricted. So, only authenticated users can read or write data. If you haven’t added an authentication system to your app, it’s the right time to do it. You can also change the Firebase database rules that allow access to the data without requiring authentication. But it is not recommended as it makes your database publicly accessible to anyone.

For this, go to the Firebase console and select your project. Now, click on Database and then select the RULES tab. Replace the following code with Firebase Database Rules and hit the "Publish" button.

 
Step 12 - Add Icon to Drawable

Open Solution Explorer -> Project Name -> Resources-> Drawable. Paste the "Send" icon into the drawable folder with the name "send".

Note
I have divided this article into two parts for the sake of simplicity. In the next part, I will be completing the remaining process of the Xamarin Chat Application.

Ahsan Siddique

Author & Editor

Experienced Microsoft Certified Azure Developer and Trainer with a demonstrated history of working in the computer software industry. Skilled in .NET, .NET Core, C#, Xamarin, Azure, Kubernetes, Docker Containers, Microservices, CI/CD, and Universal Windows Platform with Strong engineering professional.

0 Comments:

Post a Comment