WhatsTer - The ChatBot I built for TwilioHackathon
Tags: twiliohackathon, webdev, opensource
Published: 2020-05-02 18:39:55

I really felt that the post for the **twiliohackathon** was *insufficient* and hard to *understand*. My friends told that they liked the bot and the webapp. They encouraged me to write full blog post on it. Since I had very less time to write a full article on it before the hackathon was to end, I wrote it now. (Yeah, I finished completing the project it in the last moment! :P)

{%link https://dev.to/adityamitra/whatster-bot-a-multifunction-bot-that-i-built-for-the-twilio-hackathon-35dp %}

_I am not good with emojis but I have tried used them !_

# **What is it?**

![brand](https://drive.google.com/uc?id=146B6JvPQEj2zlLsZGHVa468HwT5ohv4w)

[WhatsTer](whatster.web.app) is a Chat bot created using [Twilio's Messaging API for Whatsapp](https://www.twilio.com/docs/whatsapp/api).

This bot is very useful when you want to :

1. Synchronize your data between your whatsapp messenger and a personal account of yours (where you can view them)

2. Want to know what's there in an image (Image Recognition)

3. Mail to any email recipent from from your WhatsApp Messenger

4. Laugh at some jokes!

# **GET STARTED**

To start using Whatster, first you need to join my twilio sandbox.
You can easily do this just by [clicking here](https://api.whatsapp.com/send?phone=14155238886&text=join%20decide-wish) or by texting **join decide-wish** to +1(415)523-8886.

Now **type** [hi](https://api.whatsapp.com/send?phone=14155238886&text=hi) to see what it can do for you.

![what it can do for you](https://drive.google.com/uc?id=1L5bgx1_5jU9oBNmD_Toyo06qy7kD0Yfh)

Now type [login](https://api.whatsapp.com/send?phone=14155238886&text=login) to get an *OTP* from the bot.
Use this OTP to login to the whatster account. Visit the [whatster](whatster.web.app) website.

![whatster website login page](https://drive.google.com/uc?id=197KNKbNThz8JkNfTD-moc6uadWp5rmme)

You will be logged in!

***Important. The above steps are very IMPORTANT and highly recommended before you start sending messages to the bot***

# **How to use it?**

I will explain all the functions this bot can perform one by one.

### *Saving messages and Getting them*

If you send messages to [this](https://api.whatsapp.com/send?phone=14155238886&text=join%20decide-wish) chat, it will be automatically saved to your account.

**Important - *You have to [login](https://api.whatsapp.com/send?phone=14155238886&text=login) at least once to the [Whatster App](whaster.web.app) to start saving messages***

##### *pssst! Quick Start*--->  [Click Here](https://api.whatsapp.com/send?phone=14155238886&text=send%20this%20message%20to%20start%20saving%20it)

*Type in the chat*

![demo 1](https://drive.google.com/uc?id=1mV6JS9MMkAXYYKMpwwNDO0y3Q5YdXLoE)

*Get it in the [website](https://web.whatster.app)*

![demo 2](https://drive.google.com/uc?id=135fLK6LjlF6k7W6YjEpRazQBPyT0wWEP)

**It even works when you FORWARD any message or media to it.**

![demo 3](https://drive.google.com/uc?id=1BKr2XQEfPoQewatsbwnIXG2ugXtePtC1)

**It is saved in [Whatster](whatster.web.app)**

![demo 4](https://drive.google.com/uc?id=1zS58OTPnx162Fbc15PxNOeS2Uaj6aqPS)

**You can click on the file to get a link of it and preview it in a new tab.**

![demo 5](https://drive.google.com/uc?id=1yZ7sfmILJiNp1j-NyOMAGQdQZyhDT1oG)



### *Image Analysis*

![image recognize](https://drive.google.com/uc?id=1wCRz40EEfWctQWHYmAP5YwZgIGAgWCsp)

##### *pssst! Quick Start*--->  [Click Here](https://api.whatsapp.com/send?phone=14155238886&text=clarifai)

The Whatster bot enables you identify a lot of items in an image just by sending  or forwarding it. It uses [Clarifai](https://www.clarifai.com) for image recognition.

Start by just typing **clarifai** and then sending an image.
The bot will do the complex image analysis for you.

![image analysis](https://drive.google.com/uc?id=1YhdgN1GMXB3Nwvoe-j1PDnhTYVwY2_oA)

### **Mail**

![command](https://drive.google.com/uc?id=1a4z75nqTxDaVf-v-sURvDcEz4GDL6jep)

##### *pssst! Quick Start*--->  [Click Here](https://api.whatsapp.com/send?phone=14155238886&text=mail)

Yeah! The bot can send a mail for you.
I have used [Nodemailer](https://nodemailer.com) and [Twilio's SendGrid](https://sendgrid.com) to send emails.
Just type **mail** to get started. It will also send you a couple of instructions which you can refer as a help.

![sending it](https://drive.google.com/uc?id=16F_H-TCGG9BhjvTEQeVjsU-R2jwPCSiO)

Now just type the [email-address](#) where you want the email to be sent and in the next line type your message.

You can even **send a file** (of any type) and along with a message *(not necessary)* to the recipent.

![mailing it](https://drive.google.com/uc?id=1XejnZgSgIgHUnRxvqG8SBJuNya3sSvd3)

The email sent from **whatsapp chat** will be recieved to the address you mailed to. _Just ask the sender to open up the inbox to see it_.

![receiving it](https://drive.google.com/uc?id=1HnpAEZx2Z_xGAGxgF5kPgaSpxwnL-U1t)

The *hidden part* which is scratched off in those images was my friend's email-address. However, it will be the *recipent's email address* where you want to send the mail.

### *Jokes*

![joke command](https://drive.google.com/uc?id=1aGttKB9eo2gXMAigt1f-04wEfA9-cPp5)

##### *pssst! Quick Start*--->  [Click Here](https://api.whatsapp.com/send?phone=14155238886&text=joke)

For fun, I added this feature ;P. 

Just type **joke** to the bot to have some laugh. 
*Don't forget to forward that joke to your friends.*

![joke](https://drive.google.com/uc?id=1PYTLHHDROpVlH1d9V8BxEtKwUlgVMVDY)



# *Where did you get these ideas from?*

**Before I finish writing this post and you reading it, I want to tell you how I came up with these ideas.**

> Problem is the mother of all inventions.

#### The Saving Messages Service

I got this idea from one of my friends who used [Telegram Messenger](https://telegram.org). That was one of his reasons why he liked Telegram over Whatsapp.

> You see I like Telegram because there is a saved messages chat where I can just forward my messages or media or send them in directly which is in sync with my Telegram account.

You guessed it ... I came up with this idea to include such a functionality in [Whatster](whatster.web.app) where anyone can forward messages to [this chat](https://api.whatsapp.com/send?phone=14155238886) and get their messages saved in to their account.

* Thanks Saurav *

#### The Image Analysis service

Actually, this was a problem which I faced. I sometimes could not interpret properly what items were present in the image or what was the image focusing on when someone sent me some image over Whatsapp. 

I thought that I will resolve that problem with [Whatster](https://api.whatsapp.com/send?phone=14155238886&text=clarifai)

Now, it is really easy for me to interpret those difficult images.

#### The Mail Service

This was a problem faced by aunt. **Whatsapp** is most widely used messenger. Some of my relatives only know to operate Whatsapp *(besides phone and sms)*. So, when somebody asked my aunt :

> Sujata, email that doctor's report to Rakesh's work-address so that he can tell what exactly the doctor meant.

_By the way, Rakesh was their family friend and doctor by profession_

My aunt used to call me to do the email for her. Now, I added the mail service to [Whatster](https://api.whatsapp.com/send?phone=14155238886&text=mail) so that she can easily send an email.
Believe me, now she sends me an email daily (with a good morning message!).
_Who said my aunt could not send an email?_

#### The Joke Service

I just did not like open up the browser and search for a joke to make my group laugh. I made [Whatster](https://api.whatsapp.com/send?phone=14155238886&text=joke) do that for me.


# *Final Words*

I really liked creating **Whatster**.

Please show this post to do your family and friends so that they too can use [Whatster](https://api.whatsapp.com/send?phone=14155238886). 
I have really designed it keeping in mind that is user friendly and does not requires minimum technical knowledge to use it.

I am open to edits and suggestions to this post and for **Whatster**.

I encourage you to contribute to my repo to **Whatster**

{% github https://github.com/aditya-mitra/whatster %}

If you face any issues, please do say it the repo or by [clicking here](https://github.com/aditya-mitra/whatster/issues/new)

Just so that this post does not get longer, I will explain the setup and the local development in another post. I will also explain all the technical stuff and the technologies I used in that post. [Coming Soon]

## Thanking


I really thank [Twilio](https://www.twilio.com/) for conducting this awesome hackathon and giving all the participants an oppurtunity to contribute.

I really thank [Dev.to](dev.to) where I always learn some awesome stuff from fellow developers.

I also thank my friend [Aditya Dalmia](https://github.com/dalmeow) who helped me in the last moment and without whose help I really would not have been able to complete this project on time.

Lastly, I want to thank you for reading my post and using **Whatster**.