DEV Community: Souhaib Afouallah

Keeping It Simple: Integrate Firebase and Agora.io in your Flutter Projects (Part 3)

Souhaib Afouallah — Wed, 30 Mar 2022 09:46:39 +0000

This post is the last part of the three-part article on integrating Firebase and Agora.io in a Flutter Project. In the first part, we’ve specified what Flutter is and how to create and run the project. In the second part, we’ve integrated Firebase for persisting data.
In this part, we’ll be integrating Agora.io for our Real-Time communication needs, like Audio and Video calls.

Introduction

Ever wondered how video and audio calls work? Ever thought of creating a chat application or just integrating it with an application?
Then I can confidently say that all of the above can easily be implemented. Moreover, all of this can be done by any beginner without making them lose their mind.
Yes, you've got it right. Whether you are a beginner or a pro developer with years of experience, this here is the perfect solution for you!
Look at it like this, if there is a pre-built and perfectly working solution in front of you, would you try to create another solution that could potentially fail? Absolutely not! There's a lot on offer, pre-built and ready to use. It's all about having to find which one matches with the use case.
So what next? Imagine we need to implement video and voice call functionality in our chat application, and we do not have the time and resources to start from scratch. As I already mentioned, there is a lot on offer, but obviously the patience to try each one of them is non-existent. This is where I introduce you to one of the easiest and powerful API’s by Agora.io .

What is Agora.io?

Agora.io is the leading video, voice and live interactive streaming platform, helping developers deliver rich in-app experiences—including embedded voice and video chat, real-time recording, interactive livestreaming, and real-time messaging.

Agora.io provides building blocks that allow the addition of real-time voice and video communications through a simple and powerful SDK. This SDK can be integrated in an existing project to quickly enable real-time communications.

Agora’s Software-Defined Real-Time Network™ (SD-RTN™) is the world’s most widely used and intelligent RTE network. All audio and video services provided by the Agora SDK are deployed and transmitted through the Agora SD-RTN™.
In a single line, Agora.io can offer a single solution for all your Real-Time Communication needs!

Why I opted for Agora.io?

There are lots of reasons and features why I opted for Agora.io, some of which are:

10,000 minutes FREE each month
Good documentation, complemented by examples and sample code
Easy to Implement
Highly customizable. Pick and choose the calling or interactive broadcast features needed.

What does Agora.io provide?

After integrating the Agora SDK, you can call different sets of APIs to implement voice/video communications in different scenarios.

Voice SDK
Video SDK
Real-Time Messaging (RTM) SDK
Cloud Recording Add-on

Want to learn more about the above? Then head on here.

How to implement Video and Voice calls in your project with Agora.io?

Prerequisites

To start implementing Agora.io, you will need a valid Agora account . For the other prerequisites, please check the Agora website.

Create an Agora project

Enter the Project Management page.
Click Create.
Follow the on-screen instructions to enter a project name and use case, and check Secured mode: APP ID + Token (Recommended) as the authentication mechanism.
Click Submit. You can now see the project on the Project Management page.

Finally! Your first project in agora.io is created! Now what?

Get the App ID

Agora automatically assigns each project an App ID as a unique identifier.
To copy this App ID, find your project on the Project Management page in Agora Console, and copy the value in the App ID column.

Generate a temporary token

To ensure communication security, Agora recommends using tokens to authenticate users joining a channel.
For testing purposes, Agora Console supports generating RTC temporary tokens. To generate an RTC temporary token:

On the Project Management page, find your project and click Config.

Click Generate temp RTC token under Primary Certificate, which leads to the Token page.

On the Token page, enter the name of the channel that you want to join, and click Generate Temp Token. When joining the channel later, ensure that the channel name is the same with the one that you use to generate this temporary token.

NOTE: Temporary tokens are for demonstration and testing purposes only, and remain valid for 24 hours. In a production environment, you need to deploy your own server for generating tokens. For more information, see Authenticate Your Users with Tokens.

Integrate the Agora SDK

Now that everything is prepared, we can start integrating Agora in a project.
Let’s begin:

Download the Agora RTC engine Flutter packages and add it to the projects pubspec.yaml.



dependencies:
  flutter:
    sdk: flutter
  agora_rtc_engine: ^5.0.1

NOTE: Keep your App ID, channel name and generated temp token by hand, it will be used in the next step.

First of all, the connection with Agora needs to be initialized. Define an asynchronous function that will handle the initialization and call this function in the initState() function.



const String appId = <YOUR APP ID> ;
const String channelName = <YOUR CHANNEL NAME> ;
const String tempToken = <YOUR GENERATED TEMP TOKEN> ;

int? _remoteUid;
late RtcEngine _engine;

@override
void initState() {
   super.initState();
   initAgora();
}

Future<void> initAgora() async {

  // retrieve permissions using permission_handler package
  await [Permission.microphone, Permission.camera].request();

  // create the Real Time Communication (RTC) engine
  _engine = await RtcEngine.create(RtcEngineConfig(appId);

  // Enable Video calls
  await _engine.enableVideo();

  // Or enable Audio calls
  await _engine.enableAudio();

  // The most important part of the _engine is event handling
  // Define what the _engine should do if an event occurs

  _engine.setEventHandler(
      RtcEngineEventHandler(
        joinChannelSuccess: (String channel, int uid, int elapsed) {
          print("local user $uid joined");
        },
        userJoined: (int uid, int elapsed) {
          print("remote user $uid joined");
          setState(() {
            _remoteUid = uid;
          });
        },
        userOffline: (int uid, UserOfflineReason reason) {
          print("remote user $uid left channel");
          setState(() {
            _remoteUid = null;
          });
        },
      ),
    );

  await _engine.joinChannel(token, channelName, null, 0);
}

We’re almost there. Now that the engine is initialized, the UI is next on the list. At this stage, let your imagination run wild whilst creating a stunning UI for either the Audio or Video Call screens.

For the other parts of this article, please visit following links:

Keeping It Simple: Integrate Firebase and Agora.io in your Flutter Projects (Part 2)

Souhaib Afouallah — Wed, 30 Mar 2022 09:46:35 +0000

This post is the second part of the three-part article on integrating Firebase and Agora.io in a Flutter Project. In the first part, we’ve specified what Flutter is and how to create and run the project.
In this part, we’ll be integrating Firebase and persist user data.

Backend as a Service (BaaS)

As the backend for Flutter, we decided to use Firebase. Firebase is a Backend-as-a-Service platform from Google.

Firebase provides a variety of services, including:

Real-time database: This is a cloud-hosted NoSQL database that gives the developer the ability to store data and sync it between users in real time. If the app goes offline, the data is still available.
Authentication: Firebase Authentication makes sure that the app can be built with secure authentication systems and enhances the login experience. Not only can you use your ‘local’ login credentials but Google, Facebook, GitHub and much more services can be used to log in.
Reporting and Monitoring: The reporting and monitoring tools that Firebase provides are impressive. It connects to Google Analytics to provide free, unlimited reports about user behaviors, which gives the developer the ability to have better decision-making performance. Besides reporting, Firebase Performance Monitoring service allows you to have an insight into the performance characteristics of your app.

Impressive right? Let’s take a look at how we used it in our app.

First, we need to understand how we need to connect our Flutter app to the Firebase service. Take a look at How to set up Firebase.

Now everything is set up, let’s start to use the real-time database. In this small tutorial, we are going to tackle how we can save to and read from the database.

In Firebase, we’re going to make our first collection named ‘notes’.
In the screenshot below, you’ll see a few more as an example.

We are going to add the firebase packages to our pubspec.yaml file. Let’s also add the authentication package.

Always search for the latest version of the packages on https://pub.dev/

dependencies:
 flutter:
   sdk: flutter
 firebase_core: ^1.12.0
 firebase_auth: ^3.3.7

To use the package we’re going to import it into our dart file.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

In the code below you see how we can reference our notes collection and add a new item. It’s that simple.

CollectionReference ref =     FirebaseFirestore.instance.collection('notes');
User? user = FirebaseAuth.instance.currentUser;

ref.doc(user?.uid)
   .collection('notes')
   .add({
 'title':'Flutter Demo',
 'content':'First Note',
 'owner' : user?.uid
});

For more advanced usage of realtime databases check Realtime Database: Overview.

Why did we choose Firebase?

Well, both Flutter and Firebase are Google products. This makes it convenient for the developer, connections are easily programmed (as you saw in the tutorial!). Firebase SDK and UI libraries are instant and also quite stable.

It gives the developer the experience of an easy and fast development and the user a smooth usage of the app.

What’s next?

We’re almost there. There is only one important thing on our TODO list:

Integrate Agora.io for our Real-Time Communication Needs.

In part 3 we’ll be integrating Agora.io in our project.

Keeping It Simple: Integrate Firebase and Agora.io in your Flutter Projects (Part 1)

Souhaib Afouallah — Wed, 30 Mar 2022 09:46:28 +0000

Since its much-awaited launch, Flutter has caught a lot of attention, and we're excited about it too! It has been growing in popularity over the past few years because of the ease of use and the ability to develop for multiple platforms with a single code base.
In this article, we will show you how to create your own Flutter Mobile Messaging Application in combination with Firebase and Agora.io .

What we’re about to do and Why we’re doing it

Due to the recent scandal(s) of Meta - WhatsApp, my team and I have chosen to take the Signal route and build our own Mobile Chat Application. By doing so, we show that System and Network Engineers are certainly versatile, full-fledged Computer Scientists. For this project, our main focus shifted mostly towards UI and UX. The technologies we dove into are Figma, Flutter, Firebase and Agora.io .

To bring these together, a Mobile Messaging Application was developed to allow people to securely connect with each other . This was completely written using Flutter, a UI framework by Google. It enables us to develop an application with only one code base that can run on Android, IOS and Web. Desktop was recently added too. On top of that, the project was built on top of Firebase, a Backend as a Service (BaaS) by Google. In addition, Agora.io is used to make video/voice calls possible.

Flutter: What, How, … ?

What is Flutter, and how is it different? Flutter is designed to run on every device, so it works with:

iOS and Android
Web and Desktop (Mac, Windows, and Ubuntu) - Even support PWA
Auto
Raspberry Pi (POC stage)

Check out this video from Google, they give a great comparison between Native Development, Hybrid App Development, React Native Development, and Flutter App Development.

Let’s get started!

First of all we will start with setting up flutter, it is relatively straightforward to set up. Just follow the steps in the link below.

https://flutter.dev/docs/get-started/install

The flutter package also comes with Dart preinstalled which is the language used to build apps. Dart is an object-oriented, class-based, garbage-collected language with C-style syntax.

If you would like to develop apps for mobile as well you should definitely follow the steps to install Android Studio and configure it. After the installation, you will have to create an Android Emulator. The following link may help:

https://developer.android.com/studio/run/managing-avds

Once you are done with following the instructions on the website of flutter we can continue with creating a first project!

$ flutter create new_project

This command will create the basics of a new flutter project and a demo app with simple functionality in a folder named new_project. Open this folder in Android Studio or Visual Studio Code to start your journey.

If you are using Visual Studio Code, you will need to install some additional extensions.

Visual Studio Code will most likely notify you automatically that the Flutter and Dart extensions are required (Because who would want to program without some form of IntelliSense or debugging info).

We can now run our app for the first time.

Congratulations, you have your first app! When you press the button, the counter goes up… That’s it! Kind of disappointing, is it not? Time to change that, but first…

“How does this all work? What are all these files? I’m confused!”
No worries, we got you!

The most important file is in the lib folder, the main.dart file. This file is the start of everything and where you will expand upon.

Flutter uses widgets. To fully understand what they are and how to use them, following link may be of use:

https://docs.flutter.dev/resources/architectural-overview

In short, widgets are the building blocks of Flutter, almost everything is a widget. They are mainly divided into two types, namely stateless and stateful widgets.
Stateless Widgets are widgets whose state doesn't change, like a button or an image. This means that it doesn't change its state when an action is performed. And you guessed it, stateful widgets can keep a state, for example the currently selected tab of your navigation.

We can change this state by calling a function setState(), this function is also present in the Flutter demo project with some default explanation. You can find it in the main.dart file on line 54.

setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });

(P.S.: While you are there, it might be useful to read all the comments, it will help you greatly.)

Now we can divide the widgets again into visible and invisible widgets. The invisible widgets are used for layout, like a column and a row, a grid layout… and many more. These widgets define the location of the visible widgets like an image, text, buttons…

Following example will illustrate this further.
For example, we want to make a bar with a total of 3 icons and text underneath them to make it clear what they all are. Something like this

How do we go about this… To make it easier to explain we will start with a diagram visualization of the concept.

We will start with a container (an invisible widget to define layout) and place a row in it. In this row we will create a total of 3 columns, a widget in a widget is defined as a child. If the widget supports more than 1 it will be a list of children. The list of children will be rendered following the order you put them in. So in our example we have to put the icon and then the text because we want the text to be underneath the icon.

Container(
        child: Row(
          children: [
            Column(
              children: [
                Icon(Icons.call),
                Container(
                  child: Text('CALL'),
                )
              ],
            ),
            Column(
              children: [
                Icon(Icons.near_me),
                Container(
                  child: Text('ROUTE'),
                )
              ],
            ),
            Column(
              children: [
                Icon(Icons.share),
                Container(
                  child: Text('SHARE'),
                )
              ],
            )
          ],
        ),
      )

If you want to dive deeper into this you can follow this basic tutorial https://docs.flutter.dev/development/ui/layout .

And voilà, you have made your own bar with 3 icons. We can expand on this by for example changing the Icon widgets to IconButton widgets to add functionality to them when pressed. Every widget is self-explanatory and well documented, you just have to find the right combinations to make your own app.

What’s next?

We’re not quite finished. There are two important things on our TODO list:
Integrate Firebase for user authentication and database storage.
Integrate Agora.io for our Real-Time Communication Needs.

In part 2 we’ll be integrating Firebase for the Backend of the application.