This guide will illustrate how you can use Gupshup to build, deploy and test a bot to Kik.
If you aren't familiar with Gupshup's IDE Bot Builder tool, do read our earlier guides to get acquainted. For this demo, let us create a simple chatbot that asks the user for his/her favourite publication and then prints the day's top stories from that publication. We will then publish this bot to Kik.
Lets start by creating a new bot on the IDE Bot Builder and calling it TechNews. Begin by asking the user for their publication preference. We can do this in the MessageHandler() method that handles all conversations with the bot.
if(event.message.toLowerCase() == "hi"){
context.sendResponse("Hey there " + event.senderobj.display + " Do you prefer reading Wired or TechCrunch?");
}
We can set the user's preference based on the reply
else if((event.message.toLowerCase() == "wired") || (event.message.toLowerCase() == "techcrunch")){
setPreference(event.message);
}
We're going to use data persistence to store the user's preference. There are two types of data persistence: Botleveldata and Roomleveldata. The former stores common data for the bot for all its users across all channels while the latter stores data for each user on each messaging channel. Here since it's a user preference unique to Kik, we will use roomleveldata.
function setPreference (pref){
context.simpledb.roomleveldata.publication = pref;
context.sendResponse("Type 'news' to get latest headlines on " + context.simpledb.roomleveldata.publication);
}
Once the user's preference is set, we can make a HTTP call to the publication's RSS feed. The RSS feed returns 10 top stories from the publication. The Gupshup Bot Builder facilitates making HTTP calls and handling their responses. Here we will use the .makeGet property to make a GET call whenever a user types in the word 'news'. In your MessageHandler() method type in:
else if (event.message.toLowerCase() == "news" ) {
//makes a GET call to https://api.rss2json.com/v1/api.json?rss_url=https://wired.com/feed
context.simplehttp.makeGet('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2F'
+ context.simpledb.roomleveldata.publication + '.com%2Ffeed');
}
The HttpResponseHandler() method is the method that handles responses from any HTTP calls made using the Bot Builder. The above URL returns a JSON object which needs to be parsed. This JSON object contains 10 articles each with attributes such as 'title', 'author', 'link' and more. For this demo we will display the title and the web link for a randomly chosen article.
function HttpResponseHandler(context, event) {
var respJson = JSON.parse(event.getresp); //parses the response
var stories = respJson.items;
var resp = "";
// Chose a random article from the parsed response
var randomnumber = Math.floor(Math.random() * (stories.length - 1 + 1)) + 1;
resp = resp + stories [randomnumber].title + "\n" + stories[randomnumber].link + "\n";
resp = resp.replace(" ", "");
context.sendResponse(resp);
}
That's it. You have created a simple bot that will display a random news article from your favoured publication. Let us now deploy this bot.
To deploy your bot code, hit the 'Deploy' button given on the Bot Builder tool. Once done, you will receive a confirmation for your deployment and now you are ready to test your bot using Gupshup Proxy bot.
Lets test out the bot that we've built by using the Gupshup Proxy Bot. The Proxy Bot is a testing tool developed by Gupshup that can mimic any bot developed on the Gupshup Bot Builder. You will find the Proxy Bot on all messaging channels such as Kik, Facebook Messenger, Slack etc.
To access the Proxy Bot, open the Kik app. Go to the search tab and look for id 'gupshup.proxybot'.
You can invoke a bot that you have created by using the keyword 'proxy' followed by your 'bot name'. In this case 'proxy TechNews'.
Say hi to the bot and test it out. Your chatbot is now ready to be published to Kik.