Susi

Read more about the article Shifting from Java to Kotlin in SUSI Android

Shifting from Java to Kotlin in SUSI Android

SUSI Android (https://github.com/fossasia/susi_android) is written in Java. After the announcement of Google to officially support Kotlin as a first class language for Android development we decided to shift to Kotlin as it is more robust and code friendly than Java. Advantages of Kotlin over Java Kotlin is a null safe language. It changes all the instances used in the code to non nullable type thus it ensures that the developer don't get any nullPointerException. Kotlin provides the way to declare Extensive function similar to that of C#. We can use this function in the same way as we use the member functions of our class. Kotlin also provides support for Lambda function and other high order functions. For more details refer to this link. After seeing the above points it is now clear that Kotlin is much more effective than Java and there is harm in switching the code from Java to Kotlin. Lets now see the implementation in Susi Android. Implementation in Susi Android In the Susi Android App we are implementing the MVP design with Kotlin. We are converting the code by one activity each time from java to Kotlin. The advantage here with Kotlin is that it is totally compatible with java at any time. Thus allowing the developer to change the code bit by bit instead of all at once.Let's now look at SignUp Activity implementation in Susi Android. The SignUpView interface contains all the function related to the view. interface ISignUpView {   fun alertSuccess()   fun alertFailure()   fun alertError(message: String)   fun setErrorEmail()   fun setErrorPass()   fun setErrorConpass(msg: String)   fun setErrorUrl()   fun enableSignUp(bool: Boolean)   fun clearField()   fun showProgress()   fun hideProgress()   fun passwordInvalid()   fun emptyEmailError()   fun emptyPasswordError()   fun emptyConPassError() } The SignUpActivity implements the view interface in the following way. The view is responsible for all the interaction of user with the UI elements of the app. It does not contain any business logic related to the app. class SignUpActivity : AppCompatActivity(), ISignUpView {   var signUpPresenter: ISignUpPresenter? = null   var progressDialog: ProgressDialog? = null   override fun onCreate(savedInstanceState: Bundle?) {       super.onCreate(savedInstanceState)       setContentView(R.layout.activity_sign_up)       addListeners()       setupPasswordWatcher()       progressDialog = ProgressDialog(this@SignUpActivity)       progressDialog?.setCancelable(false)       progressDialog?.setMessage(this.getString(R.string.signing_up))       signUpPresenter = SignUpPresenter()       signUpPresenter?.onAttach(this)   }   fun addListeners() {       showURL()       hideURL()       signUp()   }   override fun onOptionsItemSelected(item: MenuItem): Boolean {       if (item.itemId == android.R.id.home) {           finish()           return true       }       return super.onOptionsItemSelected(item)   } Now we will see the implementation of models in Susi Android in Kotlin and compare it with Java. Lets First see the implementation in Java public class WebSearchModel extends RealmObject {   private String url;   private String headline;   private String body;   private String imageURL;   public WebSearchModel() {   }   public WebSearchModel(String url, String headline, String body, String imageUrl) {       this.url = url;       this.headline = headline;       this.body = body;       this.imageURL = imageUrl;   }   public void setUrl(String url) {       this.url = url;   }   public void setHeadline(String headline) {       this.headline = headline;   }   public void setBody(String body) {       this.body = body;   }   public void setImageURL(String imageURL) {       this.imageURL = imageURL;   }   public String getUrl() {       return url;   }   public String getHeadline() {       return headline;   }   public String…

Continue ReadingShifting from Java to Kotlin in SUSI Android
Read more about the article Implementing Toolbar(ActionBar) in SUSI Android

Implementing Toolbar(ActionBar) in SUSI Android

SUSI is an artificial intelligence for interactive chat bots. The SUSI Android app (https://github.com/fossasia/susi_android) has a toolbar, that allows different user preferences right up in the menu option. These include functionalities such as search, login, logout and rating the app. The material design toolbar provides a clean and efficient way to do these functions. We will see how we implemented this in the SUSI Android app. To implement ActionBar in the Android app we will start with adding the dependency below to the gradle file. compile `com.android.support:appcompat-v7:22.2.0`  For more information regarding setting up ActionBar in your own project please refer to this link. Now we will add the Toolbar in our XML file as shown below. <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"   style="@style/Theme.AppCompat"   xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:background="?attr/colorPrimary"   android:minHeight="@dimen/abc_action_bar_default_height_material">   <ImageView       android:id="@+id/toolbar_img"       android:layout_width="@dimen/toolbar_logo_width"       android:layout_height="@dimen/toolbar_logo_height"       android:layout_gravity="center"       app:srcCompat="@drawable/ic_susi_white" /> </android.support.v7.widget.Toolbar> On Adding the above code we can see the preview of the Toolbar which appears like this.   Now we will see how to implement the menu options. In the menu_main.xml we can add options to be shown in the toolbar. <menu xmlns:android="http://schemas.android.com/apk/res/android"   xmlns:app="http://schemas.android.com/apk/res-auto"   xmlns:tools="http://schemas.android.com/tools"   tools:context=".activities.MainActivity">   <item       android:id="@+id/action_search"       android:icon="@android:drawable/ic_menu_search"       android:orderInCategory="200"       android:title="@string/search"       app:actionViewClass="android.support.v7.widget.SearchView"       app:showAsAction="always" />   <item       android:id="@+id/down_angle"       android:icon="@drawable/ic_arrow_down_24dp"       android:title="Search Down"       android:visible="false"       app:showAsAction="always"/>   <item       android:id="@+id/up_angle"       android:icon="@drawable/ic_arrow_up_24dp"       android:title="Search Up"       android:visible="false"       app:showAsAction="always"/>   <item       android:id="@+id/action_settings"       android:orderInCategory="100"       android:title="@string/action_settings"       app:showAsAction="never" />   <item       android:id="@+id/wall_settings"       android:orderInCategory="100"       android:title="@string/action_wall_settings"       app:showAsAction="never" />   <item       android:id="@+id/action_share"       android:orderInCategory="101"       android:title="@string/action_share"       app:showAsAction="never" /> We can define different items in the ActionBar as shown above. Also, we have the option by which we can set the visibility of the items. If the visibility of the item is false, then it will be shown in the overflow menu like this. Now we will see how we can add functionalities to the options present in the menu ActionBar. To add the listeners to the options we have to override the function onCreateOptionsMenu and there we can add the logic for different options as shown below. @Override   public boolean onCreateOptionsMenu(final Menu menu) {       this.menu = menu;       getMenuInflater().inflate(R.menu.menu_main, menu);       if(PrefManager.getBoolean(Constant.ANONYMOUS_LOGGED_IN, false)) {           menu.findItem(R.id.action_logout).setVisible(false);           menu.findItem(R.id.action_login).setVisible(true);       } else if(!(PrefManager.getBoolean(Constant.ANONYMOUS_LOGGED_IN, false))) {           menu.findItem(R.id.action_logout).setVisible(true);           menu.findItem(R.id.action_login).setVisible(false);       }       searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.action_search));       final EditText editText = (EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);       searchView.setOnSearchClickListener(new View.OnClickListener() {           @Override           public void onClick(View view) {               toolbarImg.setVisibility(View.GONE);               ChatMessage.setVisibility(View.GONE);               btnSpeak.setVisibility(View.GONE);               sendMessageLayout.setVisibility(View.GONE);               isEnabled = false;           }       }); } For diving more into the code, we can refer to the GitHub repo of Susi Android (https://github.com/fossasia/susi_android). Resources Using the Android Toolbar (ActionBar) by Vogella http://www.vogella.com/tutorials/AndroidActionBar/article.html Official Android documentation of Appbar in Android app https://developer.android.com/training/appbar/setting-up.html

Continue ReadingImplementing Toolbar(ActionBar) in SUSI Android
Read more about the article Custom UI Implementation for Web Search and RSS actions in SUSI iOS Using Kingfisher for Image Caching

Custom UI Implementation for Web Search and RSS actions in SUSI iOS Using Kingfisher for Image Caching

The SUSI Server is an AI powered server which is capable of responding to intelligent answers based on user’s queries. The queries to the susi server are obtained either as a websearch using the application or as an RSS feed. Two of the actions are websearch and RSS. These actions as the name suggests respond to queries based on search results from the web which are rendered in the clients. In order to use use these action types and display them in the SUSI iOS client, we need to first parse the actions looking for these action types and then creating a custom UI for them to display them. To start with, we need to make send the query to the server to receive an intelligent response from the server. This response is parsed into different action types supported by the server and saved into relevant objects. Here, we check the action types by looping through the answers array containing the actions and based on that, we save the data for that action. if type == ActionType.rss.rawValue {    message.actionType = ActionType.rss.rawValue    message.rssData = RSSAction(data: data, actionObject: action) } else if type == ActionType.websearch.rawValue {    message.actionType = ActionType.websearch.rawValue    message.message = action[Client.ChatKeys.Query] as? String ?? "" } Here, we parsed the data response from the server and looked for the rss and websearch action type followed by which we saved the data we received from the server for each of the action types in their own objects. Next, when a message object is created, we insert it into the dataSource item by appending it and use the `insertItems(at: [IndexPath])` method of collection view to insert them into the views at a particular index. Before adding them, we need to create a Custom UI for them. This UI will consist of a Collection View which is scrollable in the horizontal direction inside a CollectionView Cell. To start with this, we create a new class called `WebsearchCollectionView` which will be a `UIView` consisting of a `UICollectionView`. We start by adding a collection view into the UIView inside the `init` method by overriding it. Declare a collection view using flow layout and scroll direction set to `horizontal`. Also, hide the scroll indicators and assign the delegate and datasource to `self`. Now to populate this collection view, we need to specify the number of items that will show up. For this, we make use of the `message` variable declared. We use the `websearchData` in case of websearch action and `rssData` otherwise. Now to specify the number of cells, we use the below method which returns the number of rss or websearch action objects and defaults to 0 such cells. func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {     if let rssData = message?.rssData {         return rssData.count     } else if let webData = message?.websearchData {         return webData.count     }     return 0 } We display the title, description and image for each object for which we need to create a UI for the cells. Let’s start by creating…

Continue ReadingCustom UI Implementation for Web Search and RSS actions in SUSI iOS Using Kingfisher for Image Caching
Read more about the article Hotword Recognition in SUSI iOS

Hotword Recognition in SUSI iOS

Hot word recognition is a feature by which a specific action can be performed each time a specific word is spoken. There is a service called Snowboy which helps us achieve this for various clients (for ex: iOS, Android, Raspberry pi, etc.). It is basically a DNN based hotword recognition toolkit. In this blog, we will learn how to integrate the snowboy hotword detection wrapper in the SUSI iOS client. This service can be used in any open source project but for using it commercially, a commercial license needs to be obtained. Following are the files that need to be added to the project which are provided by the service itself: snowboy-detect.h libsnowboy-detect.a and a trained model file which can be created using their online service: snowboy.kitt.ai. For the sake of this blog, we will be using the hotword “Susi”, the model file can be found here. The way how snowboy works is that speech is recorded for a few seconds and this data is detected with an already trained model by a specific hotword, now if snowboy returns a 1 means word has been successfully detected else wasn’t. We start with creation of a wrapper class in Objective-C which can be found wrapper and the bridging header in case this needs to be added to a Swift project. The wrapper contains methods for setting sensitivity, audio gain and running the detection using the buffer. It is a wrapper class built on top of the snowboy-detect.h header file. Let’s initialize the service and run it. Below are the steps followed to enable hotword recognition and print out whether it successfully detected the hotword or not: Create a ViewController class with extensions AVAudioRecorderDelegate AVAudioPlayerDelegate since we will be recording speech. Import AVFoundation Create a basic layout containing a label which detects whether hotword detected or not and create corresponding `IBOutlet` in the ViewController and a button to trigger the start and stop of recognition. Create the following variables: let WAKE_WORD = "Susi" // hotword used let RESOURCE = Bundle.main.path(forResource: "common", ofType: "res") let MODEL = Bundle.main.path(forResource: "susi", ofType: "umdl") //path where the model file is stored var wrapper: SnowboyWrapper! = nil // wrapper instance for running detection var audioRecorder: AVAudioRecorder! // audio recorder instance var audioPlayer: AVAudioPlayer! var soundFileURL: URL! //stores the URL of the temp reording file var timer: Timer! //timer to fire a function after an interval var isStarted = false // variable to check if audio recorder already started In `viewDidLoad` initialize the wrapper and set sensitivity and audio gain. Recognition best happens when sensitivity is set to `0.5` and audio gain is set to `1.0` according to the docs. override func viewDidLoad() { super.viewDidLoad() wrapper = SnowboyWrapper(resources: RESOURCE, modelStr: MODEL) wrapper.setSensitivity("0.5") wrapper.setAudioGain(1.0) } Create an `IBAction` for the button to start recognition. This action will be used to start or stop the recording in which the action toggles based on the `isStarted` variable. When true, recording is stopped and the timer invalidated else a timer is started…

Continue ReadingHotword Recognition in SUSI iOS
Read more about the article Showing RSS and Table Type Replies in SUSI Messenger Bots

Showing RSS and Table Type Replies in SUSI Messenger Bots

All the messengers have a “plain text” reply support. To show web search (RSS) or table type replies, either: We need a “list type” (as in Facebook messenger) or “table type” reply support built in the messenger itself.                                                               or We need to convert the RSS or table type reply by SUSI API to plain text, so that we can send it, due to the “plain text” reply support available in almost every messenger. The second point is the most favorable approach, as that way, replying with RSS or table type results is dependent only on the text support feature in the messenger. This way RSS or table type replies can be shown in messengers like REST API Gitter (which do not provide any other reply type support except text). In SUSI web app, the UI of the web search and table type results: As the SUSI web app is made in React js, it provided the app with necessary features to show the results this way. The messengers may not be having these required features. So the task is we need to convert the RSS or table type replies by SUSI API to plain text to send it to the messenger. Let’s work it out. Converting RSS results to text: First get familiar with the SUSI API reply to query “why” by visiting this url - http://api.susi.ai/susi/chat.json?q=why. The JSON object returned will be constituting an array of objects as the value of the data key like: "data": [ { "title": "Why is Oracle male?", "description": "Why is Oracle male?. http dba oracle com why is male htm. Oracle Why is masculine?. ", "link": "http://dba-oracle.com/t_why_is_oracle_male.htm" } ] If we notice carefully each object has 3 main keys namely “title”, “description” and “link”. So extracting these 3 properties from each object and binding them together into 1 string is the task we need to do. So we traverse each object (i.e. rss result) in the data array and we keep on appending the values of “title”, “description” and “link” key values to the ans variable. At the end we send this resultant string to the messenger bot as a reply.   Suppose we have the returned JSON object, in the data variable. // storing the number of rss results var metaCnt = data.answers[0].metadata.count; for(var i=0;i<metaCnt;i++){ ans += ('Title : '); ans += data.answers[0].data[i].title+', '; ans += ('Link : '); ans += data.answers[0].data[i].link+', '; ans += '\n\n'; } // send the message in ans variable to the messenger Converting table type replies to text: First get familiar with the SUSI API reply to query “why” by visiting this url - http://api.susi.ai/susi/chat.json?q=universities+in+australia. The JSON object returned will be constituting an array of objects representing universities as the value of the data key in this form: { "alpha_two_code": "AU", "name": "Australian Correspondence Schools", "country":…

Continue ReadingShowing RSS and Table Type Replies in SUSI Messenger Bots
Read more about the article Using Templates in SUSI FBbot

Using Templates in SUSI FBbot

The SUSI AI Fbbot previously showed rss and table type replies as plain text to the user. To enhance the user experience, Facebook provides with templates which can be used in it’s messenger. Using those, we show rss and table type replies wrapped up in a better U.I. creating a better user experience. The 4 basic template structures that can be used for this task are: Button template Generic template List template Receipt template List template is used in SUSI A.I. Fbbot because rss reply and table type reply both are lists of data. The basic syntax for list template with reference to Fb official docs is: "message": { "attachment": { "type": "template", "payload": { "template_type": "list", "top_element_style": "compact", "elements": [ { "title": "Classic White T-Shirt", "subtitle": "100% Cotton, 200% Comfortable", "default_action": { "type": "web_url", "url": "https://peterssendreceiveapp.ngrok.io/view?item=100" }, "buttons": [ { "title": "Buy", "type": "web_url", "url": "https://peterssendreceiveapp.ngrok.io/shop?item=100" } ] } ] } } } This code shows a reply to the user like this: If we want to show a “View more” button at the end of the list, we can add a “buttons” key and an array as its value which will have information regarding all the buttons we want to show. The code below will show a “View more” button at the end of the list: "elements": [ { // all the elements, like shirt in the above case } ], "buttons": [ { "title": "View More", "type": "postback", "payload": "payload" } ] Let’s learn how to incorporate these features to rss results in SUSI Fbbot: When sending a reply using list template, “elements” key must have an array type value which will be constituted of list items. Therefore, we need to push all the rss results into that array and set it as the value of the “elements” key. Let’s develop the code part: Fetch the JSON object from SUSI API url with query as “why” i.e. http://api.susi.ai/susi/chat.json?q=why. Let body be a variable which stores the returned JSON object. The below code fills up an array (namely elementsVal) with all the rss results: var elementsVal = []; var metaCnt = body.answers[0].metadata.count; for(var i=0;i<((metaCnt>4)?4:metaCnt);i++){ elementsVal.push( { "title": body.answers[0].data[i].title, "subtitle": body.answers[0].data[i].link } ); } Setting the elementsVal array as the value of the "elements" key: var message = { "type": "template", "payload": { "template_type": "list", "top_element_style": "compact", "elements": elementsVal } }; Sending this message as a reply to the user: sendTextMessage(sender, message); Same procedure can be used to render table type replies in the bot using the list template. Generic template provided by Facebook can also used to render the web and table type replies. This template helps in showing the results in square boxes, which can be changed using left or right arrows. Resources: By Mikhail Larionov from Facebook blogs - List templates and check box plugin By Slobodan Stojanović from smashing magazine - Develop a chat bot with node js.

Continue ReadingUsing Templates in SUSI FBbot
Read more about the article Integration of SUSI AI to Facebook

Integration of SUSI AI to Facebook

It's easy to create your own SUSI AI Facebook messenger bot. You can read the official documentation by Facebook to get started. Messenger bots use a web server to send and receive messages. You also need to have the bot be authenticated to speak with the web server and be approved by Facebook before getting public. If any problems faced, visit the susi_fbbot repository which hosts the code for SUSI Facebook Messenger bot. We will be using Node js technology to develop the FB bot. First, let’s see on how to request an answer from the SUSI API. To call Susi API and fetch an answer from it for a query (‘hi’ in this case). Let's first visit http://api.asksusi.com/susi/chat.json?q=hi from the browser. We will get a JSON object as follows: The answer can be found as the value of the key named expression. In this case, it is “Hallo!”. To fetch the answer through coding, we can use this code snippet in Node js: // including request module var request = require(‘request’); // setting options to make a successful call to Susi API. var options = { method: 'GET', url: 'http://api.asksusi.com/susi/chat.json', qs: { timezoneOffset: '-330', q: 'hi' } }; // A request to the Susi bot request(options, function (error, response, body) { if (error) throw new Error(error); // answer fetched from susi ans = (JSON.parse(body)).answers[0].actions[0].expression; } The properties required for the call are set up through a JSON object (i.e. options). Pass the options object to our request function as its 1st parameter. The response from the API will be stored in ‘body’ variable. We need to parse this body, to be able to access the properties of that body object. Hence, fetching the answer from Susi API. Now let’s dive into the code of receiving and messaging back to the user on Facebook: A generic function to send a message to the user. // the first argument is the sender id and the second is the text to send. function sendTextMessage(sender, text) { var messageData = { text:text }; // making a post request to facebook graph API to send message. request({ url: 'https://graph.facebook.com/v2.6/me/messages', qs: {access_token:token}, method: 'POST', json: { recipient: {id:sender}, message: messageData, } }, function(error, response, body) { if (error) { console.log('Error sending messages: ', error); } else if (response.body.error) { console.log('Error: ', response.body.error); } }); } According to step 9, in the below instructions we need to include this code snippet too: // for facebook verification app.get('/webhook/', function (req, res) { if (req.query['hub.verify_token'] === 'my_voice_is_my_password_verify_me') { res.send(req.query['hub.challenge']); } res.send('Error, wrong token'); }); When user messages to our bot, we need to extract the text of the message from the request body. Then we need to extract the reply from the SUSI API and send it back to the user. // when a message from a user is received. app.post('/webhook/', function (req, res) { var messaging_events = req.body.entry[0].messaging for (var i = 0; i < messaging_events.length; i++) { // fetching the current event var event = req.body.entry[0].messaging[i];…

Continue ReadingIntegration of SUSI AI to Facebook
Read more about the article Integration of SUSI AI in Twitter

Integration of SUSI AI in Twitter

We will be making a Susi messenger bot on Twitter. The messenger bot will tweet back to your tweets and reply instantly when you chat with it. Feel free to tweet to the already made SUSI AI account (mentioning @SusiAI1 in it). Follow it, to have a personal chat. Make a new account, which you want to use as the bot account. You can make one from sign up option from https://www.twitter.com. Prerequisites To create your account on -: 1. Twitter 2. Github 3. Heroku 4. Node js Setup your own Messenger Bot 1. Make a new app here, to know the access token and other properties for our application. These properties will help us communicate with Twitter. Click "modify the app permissions" link, as shown here: Select the Read, Write and Access direct messages option: Don't forget to click the update settings button at the bottom. Click the Generate My Access Token and Token Secret button. 3. Create a new heroku app here. This app will accept the requests from Twitter and Susi api. 4. Create a config variable by switching to settings page of your app.      The name of your first config variable should be HEROKU_URL and its value is the url address of the heroku app created by you.   The other config variables that need to be created will be these:   The corresponding names of these variables in the same order are:   i) Access token   ii) Access token secret   iii) Consumer key   iv) Consumer secret    We need to visit our app from here, the keys and access tokens tab will help us with the values of these variables. Let’s start with the code part of the integration of SUSI AI to Twitter. We will be using Node js to achieve this integration. First we need to require some packages: Now using the Twit module, we need to authenticate our requests, by using our environment variables as set up in step 4: Now let’s make a user stream: var stream = T.stream('user'); We will be using the capabilities of this stream, to catch events of getting tweeted or receiving a direct message by using: stream.on('tweet', functionToBeCalledWhenTweeted); stream.on('follow', functionToBeCalledWhenFollowed); stream.on('direct_message', functionToBeCalledWhenDirectMessaged); So, when a person tweets to our account like this: We can catch it with ‘tweet’ event and execute a set of instructions: stream.on('tweet', tweetEvent); function tweetEvent(eventMsg) { var replyto = eventMsg.in_reply_to_screen_name; // to store the message tweeted excluding '@SusiAI1' substring var text = eventMsg.text.substring(9); // to store the name of the tweeter var from = eventMsg.user.screen_name; if (replyto === 'SusiAI1') { var queryUrl = 'http://api.asksusi.com/susi/chat.json?q=' + encodeURI(text); var message = ''; request({ url: queryUrl, json: true }, function (err, response, data) { if (!err && response.statusCode === 200) { // fetching the answer from the data object returned message = data.answers[0].actions[0].expression + data; } else { message = 'Oops, Looks like Susi is taking a break'; console.log(err); } console.log(message); // If the message length is more than tweet limit if(message.length > 140){ tweetIt('@'…

Continue ReadingIntegration of SUSI AI in Twitter
Read more about the article Integration of Susi AI to Gitter

Integration of Susi AI to Gitter

This blog post discusses the development of Susi Messenger bot on Gitter. It replies instantly to the messages sent to it, using the Susi API. The Streaming API notifies us when a user messages to the SUSI chat room. The REST API helps to message back with a reply from SUSI API, to the SUSI chat room. Feel free to message to the already made SUSI AI account on Gitter and have a chat with it. Prerequisites Basic knowledge about calling API’s and fetching data or posting data to the API. Node.js language. Github Heroku Figure - Architecture for running SUSI AI on different messaging services. This blog post will walk you through each of the steps required to integrate SUSI AI to Gitter: Setup SUSI AI Bot on Gitter Create a Github or twitter account with a username having 'Susi' as its substring because this is the name that will be shown with the reply string we will get from Susi AI. Now you need to sign in to Gitter with a twitter or Github account from here. Create your community by visiting this page. After writing your community name press next, invite the people you want to be in this room and press next. You will be redirected to your communities lobby. This lobby is the chat room to which we will deploy our SUSI AI. Now visit the Gitter developer page, press sign in on the top right. You will be redirected to your apps page. Copy the personal access token written there as shown in this image: (The area colored black will have your access token). 5. On a new tab, in your browser visit   https://api.gitter.im/v1/rooms?access_token=YOUR_ACCESS_TOKEN, with YOUR_ACCESS_TOKEN replaced by the token we just copied. A JSON object will be shown on our browser screen. You will see the value of 'name' key as YOUR_COMMUNITY_NAME/Lobby. Copy the id of this chat room, as we will need it later. You can refer to the image below, you will have your chat room id in the area colored black. Create a new heroku app here. This app will accept the requests from Gitter and Susi api. Set the config variables for this heroku app in the setting tab of your account. Set ROOM_ID to the id of the chat room and TOKEN to the personal access token, we copied in steps 4 and 5. These were the formalities to be done to have our chat bot account on Gitter. Let’s jump to the code part of how this integration will be done: To use the two config variables set in Heroku, we need these two lines in our Node js code: var roomId = process.env.ROOM_ID; var token = process.env.TOKEN; We need to set up an options variable with our access token and room id in it: // Setting the options variable to use it in the https request block var options = { hostname: 'stream.gitter.im', port: 443, path: '/v1/rooms/' + roomId + '/chatMessages', method: 'GET', headers: {'Authorization': 'Bearer '…

Continue ReadingIntegration of Susi AI to Gitter