Write your First mesibo Enabled Application - Flutter

Estimated reading time: 4 minutes

In this part, we will learn how to use mesibo SDKs to add messaging, calls, conferencing, and chatbot to your Flutter Apps. Since Flutter uses native android and iOS SDKs, we will only cover the Flutter-specific details in this section. For Android and iOS specific details, we suggest your read one of the Android or iOS sections.

Prerequisites and Download Source Code

Read the section Create Users to learn about creating an app in mesibo console and creating users & access tokens for your app.
Read the Android or iOS section to get familiarized with APIs. You MUST try Android and iOS first app before flutter app.
Download the source code for the First mesibo Flutter App from GitHub which we will use in this.

Running Sample Application

Before we describe how to add mesibo SDKs to your Flutter app, we suggest you run the first app downloaded from GitHub to test messaging and calls.

Before we can build and run the app, we need to configure the app with valid mesibo user tokens as explained in Create Users section.
Create tokens for two users, each with the User Address 123 and 456 and App ID com.mesibo.firstapp and configure two demo users in the lib/main.dart](https://github.com/mesibo/samples/blob/master/flutter/firstapp/lib/main.dart#L57).
Run it on Android or iOS. If you are running it on iOS, go to ios folder and run pod install. It will download and install mesibo SDKs.
Login with User-1 on one device and User-2 on another. You should see the connection status 1 (ONLINE). If you don’t, check if the tokens are correct. Tokens for the sample app should be generated using appid - com.mesibo.firstapp
Once you get connection status 1, you can try messaging, and calls between both users.
If you have only one device, you can also use web messenger to try your app.

Adding Mesibo SDKs to Your App

Now we will learn how to quickly add mesibo SDKs to your app.

Step 1 Copy Files from the First App

Copy the following files/folders from the sample app to your app in the same folder structure.

android/app/src/main/java/com/mesibo/firstapp/MesiboPlugin.java - change the package name to match your app package name.
ios/Classes - add these files to the Xcode project.
lib/MesiboPlugin.dart

Alternatively, you can only copy the following and execute run_pigeon.sh to generate the above files. You will need to change the path and package name in run_pigeion.sh.

pigeons
run_pigeon.sh - change the package name if you plan to run it later.

Step 2 Configure mesibo dependencies

For Android, open app level build.gradle and add the following lines

apply from: "https://api.mesibo.com/mesibo.gradle"

...
implementation "com.mesibo.api:mesibo:${project.MesiboVersion_Api}"
implementation "com.mesibo.api:ui:${project.MesiboVersion_Ui}"
implementation "com.mesibo.api:calls:${project.MesiboVersion_Calls}"

Refer to the build.gradle in sample app to know how they were added.

For iOS, open ios/Podfile and add following lines. Also uncomment the platform version. Refer to the sample app.

platform :ios, '11.0'

...

pod 'mesibo'
pod 'mesibo-ui'
pod 'mesibo-calls'

Run pod install after adding it.

Step 3 Test Build

Build the project to ensure that it compiles. We have still not used mesibo SDKs. Ensure to fix any compilation issues before moving forward.

Step 4 Using Mesibo SDKs

Now import MesiboPlugin.dart in your main.dart

import 'MesiboPlugin.dart';

You can now start calling functions in MesiboPlugin.dart. You can also refer to pigeons/MesiboPlugin.dart.

Since mesibo SDKs are native APIs, any function you call from MesiboPlugin.dart will require the corresponding implementation on the native side (android/ios). You can copy the native implementation from MainActivity.java for Android and from AppDelegate.m for iOS.

The sample implementation only uses bare minimum mesibo APIs. You can modify the implementation or add functions as required by your app.

First mesibo Application: Javascript >>

mesibo, xamarin