Forem: Akash

Adding Rich Messages to your In-App Chat

Akash — Tue, 06 Jul 2021 05:58:34 +0000

So, what exactly is rich messaging?

In some ways, it’s exactly what it sounds like: messaging that is deeper, richer, and more layered. But it’s also much more than that.

Integrating rich messaging into your chat allows you to push something more interactive than just plain text. It allows both parties to share interactive media like images, buttons, and cards seamlessly. In addition, customers can easily interact and respond using rich messaging buttons and even make secure purchases. For example, giving customers the opportunity to view and purchase sandwiches within the chat window led to an increase in Subway’s conversions by 140%.

Rich messaging can simplify interactions with your customers in a significant manner. If your in-app chat isn’t using rich messaging in 2021, you’re definitely missing out!

To add rich messaging and other exciting features to your app, register for a free trial of Applozic's chat API.

Rich messaging using Applozic SDK

In addition to traditional messaging types like text and audio, Applozic also provides a set of messaging options in the form of structured content templates. This article will guide you through creating a structure for sending some types of rich messages.

In order to achieve this behavior, the information must be sent in a structured format that can be included in the metadata of a message. The most common format is JSON (Javascript Object Notation).

Note: Rich message UI is only Supported in Applozic-Android-SDK and Applozic-Swift-SDK.

Identifying a rich message

Rich messages in Applozic can be categorized into 4 types - Buttons, Images, Lists, and Cards. But before we get to them, let's talk about how to identify a rich message in our Applozic-powered chat app.

To send a rich message, we need to add the contentType property into the message's metadata to separate it from normal messages. The value of contentType is 300 for rich messages. Below is the metadata for all rich messages templates:

{
    "contentType":"300"
}

Apart from the content type, each rich message also has a templateId, which is different for different types of rich messages. The data of the rich message must be passed onto its payload. We will examine the payload for some types of rich messages as we discuss them in detail.

Here is how a rich message is generally structured:

{
    "message": "click on the buttons",
    "metadata": {
        "contentType": "300",//the content type is 300 for rich messages
        "templateId": "x",//x is a integer which differs for different types of rich messages
        "payload": "{//data pertaining to the rich message }"
    }
}

Here are the different types of rich messages you can use in Applozic:

Buttons
1. Link Buttons
2. Submit Buttons
3. Suggested Replies
Images
List
Cards
1. Generic Card
2. Card Carousel

In this article, we’ll be examining the implementation of suggested replies, images, and generic cards into our chat application

Suggested Reply Button

Suggested Replies provide a way to send some common replies to messages with just a click, without having to type them out manually.

To render suggested replies on the UI, we need to send 2 fields in the payload:

title: display name for the button.
message: A message that would be sent as a reply.

Here is a sample payload for suggested replies:

"payload": [{
   "title": "Yes",
   "message": "Cool! send me more."
   },
   {
   "title": "No",
   "message": "Not at all",
   }
}]

On clicking the button, a message would be sent with the text from the message property of the payload. To get the click outside the SDK you can use the following code. For Android, you will need to implement the ALRichMessageListener.

public class SampleApplication extends Application implements ALRichMessageListener//this can also be an activity or a fragment
{
  
   @Override
    public void onAction(Context context, String action, Message message, Object object) {
        if("Click" == action){
              String text = (String) object;//object will be the message text from the button
          //message will be applozic message object
          }   
    }
}

Here is the sample JSON for suggested replies:

{
  "to": "userid",  
  // or
  // "groupId" : "groupId",
  "message": "Do you want more updates?",
    "metadata": {
        "contentType": "300",
        "templateId": "6",
        "payload": "[{\"title\": \"Yes\",\"message\": \"Cool! send me more.\"},         {\"title\": \"No\",\"message\": \"Not at all\"}]"
    }
}

Continue this Tutorial on Applozic Blog!

We have the detailed tutorial with code snippets available on our blog for you to continue with your integration!

Click here to learn how to:

Add images in chat
Use Generic card templates
Add lists in chat
Use card carousels in chat

Building a WhatsApp clone from scratch using Flutter

Akash — Fri, 02 Jul 2021 15:05:58 +0000

According to Statista, around 2.77 billion mobile phone users accessed over-the-top messaging to communicate in 2020, and this figure is poised to reach three billion users in 2022. Of these, WhatsApp was the most popular mobile messenger app worldwide with over 2 billion users, mainly due to its first-mover advantage and user-friendly interface.

However, due to concerns over the recent updates to WhatsApp’s privacy policies, many users and businesses are on the lookout for alternatives. Check out our previous blog post to learn more about the security implications of WhatsApp’s policy updates.

Thanks to Applzozic’s intuitive chat SDKs and platform APIs, it‘s pretty easy to build your own chat alternative to WhatsApp! Before we delve into the code, let’s discuss the framework that we’ll use to implement our chat messenger app.

Why Flutter?

Launched by Google in 2018, Flutter is a free and open-source SDK for developing high-performing mobile, web, and desktop applications from a single codebase.

An exciting feature of Flutter is its layered structure that enables developers to build highly customizable and attractive apps with much lower time and effort, without compromising on performance. Moreover, experimenting new features and debugging errors is much faster in Flutter due to its hot reload feature that reflects instant changes in the codebase within milliseconds

Even though Flutter is a relatively new cross-platform app development framework compared to established contemporaries like React Native, many companies have started to migrate to Flutter due to its higher performance and flexible UI.

Do note that we’ll only be delving into the code implementation of the app’s chat functionality using Applozic Flutter SDK in this article - here’s a simple tutorial on creating a UI for the app using Flutter.

Creating a new application and setting up dependencies

flutter.dev has a comprehensive starter tutorial on creating your first application using Flutter. Once you are ready to integrate using the Applozic SDK, follow these steps:

I. Installation

Add the following dependency in your pubspec.yaml file:

dependencies:
  # other dependencies
applozic_flutter: ^0.0.4

2. Install the package as shown below:

flutter pub get

3. Import the applozic_flutter in your .dart file to use the methods from Applozic:

import 'package:applozic_flutter/applozic_flutter.dart';

II. Authentication

Login

Create an Applozic user object, and pass it to the login() function as shown below:

dynamic user = {
      'applicationId': "<APPLICATION_ID>",   //Mandatory
      'userId': userId.text,                 //Mandatory
      'displayName': displayName.text,
      'password': password.text,
      'authenticationTypeId': 1              //Mandatory
  };

ApplozicFlutter.login(user).then((response) {
      print("Login success : " + response)
    }).catchError((error, stack) =>
      print("Error while logging in : " + error.toString()));

Please keep in mind that once the user is logged in, a new login is permitted only after the user logs out. Use this code to check if the user is already logged in:

ApplozicFlutter.isLoggedIn().then((isLoggedIn) {
        if (isLoggedIn) {
          //The user is logged in
         } esle {
          //The user is not logged in
         }
     });

Update logged in user details

You can update the logged in user details as given below:

  dynamic user = {
                    'displayName': '<New name>'
                    'imageLink': '<New Image URL>'
                  }

  ApplozicFlutter.updateUserDetail(user)
                        .then(
                            (value) => print("User details updated : " + value))
                        .catchError((e, s) => print(
                            "Unable to update user details : " + e.toString()));

Get logged in userID

You can get the userID of the logged in user as given below:

  ApplozicFlutter.getLoggedInUserId().then((userId) {
      print("Logged in userId : " + userId);
    }).catchError((error, stack) {
      print("User get error : " + error);
   });

Continue this Tutorial on Applozic Blog!

We have the detailed tutorial with code snippets available on our blog for you to continue with your integration!

Click here to learn how to:

Set up push notifications in your application
Launch the Conversation screen and start messaging!

Please leave your feedback and doubts in the comments below.

SDK vs API - What's the Difference?

Akash — Thu, 17 Jun 2021 09:18:29 +0000

Hello everyone! I'm Akash from Applozic, and today we'll take a look at what SDKs and APIs are, and how they differ from each other.

So, what is an SDK?

SDK stands for Software Development Kit. It is a collection of software development tools in one installable package. They facilitate the app development process.

So an SDK contains:

Documents
Code samples
APIs
Code libraries

Let’s now summarize how SDK works.

SDKs work with specific programming languages. They are easy to use because the goal is to make the jobs of developers easier, and save developers from writing code for already existing functionalities

Let’s have a look at some examples of SDK:

A good example is Android SDK - they have all the elements needed to create the app such as sample source code, debugger, required libraries, amongst other things.
Another example is Cloud SDK for Google Cloud Platforms - these contain tools that you need to manage applications and software in a Google Cloud Platform. Cloud SDK is a set of tools, including gcloud, gsutil, and bq command-line tools, client libraries & local emulators for developing with Google Cloud.

So we now know what an SDK is, let's move on to APIs. What exactly is an API?

APIs, which stand for Application Programming Interfaces, make the software development process easy by permitting a seamless and secure data transfer between two apps. It also helps to improve the exchange of functionality between two applications. So in essence, APIs allow two applications to talk to each other, relaying data from one end to another.

Let’s review some examples of APIs:

Login with Facebook When using websites, you can often find the option to log in using your Facebook account. It means that the website uses Facebook Login API to integrate their service and help users skip the sign-up process.
Third-Party Payments You can often see the payment options of PayPal, Apple Pay, or Google Pay. It means that the payment system integrates these services through API.

So, what are the key differences between SDKs and APIs?

Even though both concepts are indeed overlapped and interrelated, let's differentiate their purposes:

An SDK is the toolbox you need to build applications while and API establishes communication between two applications;
An SDK may contain APIs, but APIs cannot contain SDKs;
SDKs are easy to use and faster to integrate while APIs don’t have code libraries and are easy to modify;
SDKs contain all you need to communicate with another software and all you need to build software while APIs deliver a request from one app to another software and deliver a response back to the requesting app;
Developers always use an SDK to build apps, but APIs only come in when there is a need to have external communication with other platforms.

In fact, APIs and SDKs are both solution-bringers to developers, but each one is special in its way.

So, is the difference clear now? If you have any doubts or queries about APIs or SDKs, feel free to drop a comment in the comment section below!