Basic Template for setting up a chatbot application using Android Studio and NodeJS in 10 easy steps

Requirements

• NodeJS - Basic
• Android / Java - Basic Level
• Ngrok (local tunnel to your laptop for development purposes) 
• Machaao Chatbot template
• Platform API Token / Key
• Android Studio 
• GNU Screen / Terminal
• Javascript Enabled Browser (Google Chrome)
• Android Device (Optional)

Today, we will learn how to set up a simple echo NodeJS based chatbot on Android & Web using the MACHAAO Platform

So, assuming we have all the above covered - Let’s get started!

Step 1: Register and Get your FREE API Key

Visit https://portal.messengerx.io/ then login/signup on the platform. 

Fill out the form shown below and create a new chat bot, place None in webhook URL and image URL and then press create.

Click on Settings and copy the API Key, you will need it later.

Step 2: We will use the machaao-samples github template

git clone https://github.com/machaao/machaao-samples

cd machaao-samples

ls

Step 3: Installing the basic requirements

Here We will install rasa and ngrok. You can download ngrok from ngrok - download

# for Linux(debian)

sudo apt install nodejs

sudo apt install npm



# for other OS visit https://nodejs.org/en/download/

ngrok allows you to expose a web server running on your local machine to the internet.

Step 4: Setup the Sample Chatbot Project in Android Studio

Open Android Studio, click on File > Open then select this directory (sample_bot_client).

Step 5: Update the API Key / Token

In the working directory, navigate to manifests > AndroidManifest.xml

<meta-data android:name="com.machaao.android.sdk.token"

   tools:replace="android:value"

   android:value="YOUR-API-KEY" />



<!-- REPLACE YOUR-API-KEY WITH YOUR API KEY / TOKEN COPIED FROM MessengerX.io PORTAL -->

Also, remove any duplicate similar metadata tags from Manifest.

Step 7: Starting NodeJS Chatbot Server Locally

Now, navigate to the working directory machaao-samples/basic_sample_bot/server

Open bot.js in an editor and at line 17 place your API-KEY, copied from MessengerX.io portal.

screen

npm install


npm start

Press 'Ctrl+a' then 'd' to detach from the screen.

Step 8: Starting NGROK server

Note: If you are using VPS then just add PORT 3000 to inbound rules and skip the below step.

screen


ngrok http 3000

Note: Copy the forwarding url. You will need this.

Press 'Ctrl+a' then 'd' to detach from the screen.

Step 9: Updating the webhook on Machaao Platform

Log on to https://portal.messengerx.io/ and click on settings to update the chatbot webhook URL.

Paste the forwarding URL(copied from ngrok) or paste the VPS domain:3000 and save it.

That's it.

The Chatbot will also be available on the web. 

If everything went well you can see your chatbot at https://dev.messengerx.io/<chatbot_name>

To integrate the chatbot into your website use iframe.

<iframe src="https://ganglia-dev.machaao.com/<chatbot_name>" width="400" height="600"></iframe>

Step 10: Run & Start Building a Chat Application

Debugging and Building Chatbot APK

Press the run button or Shift + F10 to run gradle build(debug).

Do check out this article on how to create an Android Virtual Device using Android Studio.

It will download Machaao Android SDK and run the apk on the connected device. If there is no error and apk is built, in the task bar, click Build > Build Bundle / APK > Build APK(s) to generate an apk file.

Note: For testing the app, An Android Device is recommended

If you have any questions or errors feel free to ask in the comment box

MessengerX.io | Connecting Bot Developers to App Publishers

~Abhishek Raj, Harshal Dhir - MessengerX.io