Super Fun Chatbot Build (15 Mins) With IBM Watson and OutSystems

Author: @sydneylai
Video Tutorial [LINK]

Scope of this Tutorial
This example will demonstrate how to build your own IBM Watson Assistant chatbot, and integrate that with your OutSystems reactive web build! You will walk through how to structure intents, entities, dialog, and how to launch this feature in a web app.This app is crazy fun to build, with only a few drag and drops, copy and paste, you have yourself an awesome chatbot.

Finished Demo:

✌️🛸👽
Space travel is cool but what if we can chat with Aliens? When we think of AI-driven bots, the mystery behind their interactive user-experience seems almost alien to us! Besides out of world experiences, chatbots are used across industries in logistics, financial services, customer service, and even disaster relief. There’s no wifi in space yet, so creating an AI bot to speak with Aliens might just be the first step in our imaginations.

PART 1/2: IBM Chatbot Build

Have an account at IBM: IBM Sign-up

Step 1. get services - look for Watson Assistant in the Catalog.

Select Watson Assistant and create a service, you in Dallas.

Step 2. Building the algorithm

Create an Assistant named "Martian Comms", and then create a Dialog Skill

We will create a conversation, map out on a piece of paper how you want the conversation to progress. For this Alien communication app, we can have a fun dialog such as:

Alien Bot: Hello. I'm an alien from Mars. Are you a human on Earth?
Human: INTENTS (Ex: #Confirmation)

Alien Bot: Well then, how about I transport you to Mars to confirm my existence?
Human: INTENTS (Ex: #Confirmation)

Alien Bot: I will send my UFO to fetch you, what is your zip code?
Human: ENTITIES (Ex: @zip_code:US Zip)

Alien Bot: Location Confirmed. To identify you, what is your eye color?
Human: INTENTS (Ex: #eye-color)

Alien Bot: What a tragic color. Confirmed. I will greet you soon. Goodbye.

END

Now that you've written out your script, you can build out Intents, Entities and Dialog in your Watson dashboard.

Step 3: Building Intents

Click-on "Create an Intent" button and fill out an Intent Name starting with a hashtag, and start inputting responses that fit your likely responses. You can expand your word base by selecting "Show Recommendations"

Where the machine learning comes into play, is the more you teach Watson your intents, language, and words, the system analyzes learned words for further recommendations.

Now create an Intent for #eye_color and lists eye colors.

Step 4: Building Entities

Create your Zip code entites

Use (\b|\s)\d{5}(\b|\s) to tell the Pattern type that it will be a 5 digit zip code for the US standard.

Step 5: Creating Dialog

You can start mapping out your dialog.
Give your Dialog Node a Title, and indicate what you want your assistant to recognize, how you want your assistant to respond, and what you want your assistant to do next.

Your Assistant could recognize #Confirmations or @zip_code

Step 6: Connect the chatbot backend to a web app or mobile

Head over to Integrations to find your auto-generated Javascript code.

Embed the chat UI into any website pages where you want.

Here is a sample code [This code will expire after I discontinue IBM Cloud hosting]

<script>
  window.watsonAssistantChatOptions = {
      integrationID: "e3cfdf78-9116-474f-8c58-6384f4064ba4", // The ID of this integration.
      region: "us-south", // The region your integration is hosted in.
      serviceInstanceID: "c2bd0850-d464-4b05-9eef-810be2df29b7", // The ID of your service instance.
      onLoad: function(instance) { instance.render(); }
    };
  setTimeout(function(){
    const t=document.createElement('script');
    t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
    document.head.appendChild(t);
  });
</script>

PART 2/2: Build the Web app

Build and launch your web app in a few clicks: OutSystems

Step 7: Create a Module
Once your OutSystems IDE is installed, click on "New Application" to build your app, and then click on "Add Module" and select Reactive Web from the dropdown.

Step 8: Create Front-end Screen

In your MainFlow, right-click to create a Screen, title it "Home" and check-off Role > Anonymous and Public set to Yes so that others regardless of login or roles and see your page.

Set your Events to OnReady, where it is triggered when you have most of the page resources ready (data, UI elements).

Step 9: Insert JS script

To Insert your Watson Chatbot Javascript, click on OnReady. Find your Javascript widget on the left-hand side and drag that component to your logic. Double-click to open the screen and copy and paste your JS script from your Watson dashboard.

OutSystems automatically compiles the script, so you can remove

<script>
</script>

from the beginning and end of your code.

REMEMBER: Save & Publish
Above, click on the green One-Click Publish button and then the blue arrow to see your chatbot integrated into your web app.

Step 10: Design
Double-click on your Home screen, and drag and drop a container onto the screen.

You can also drag an Image widget and upload images

Here's an example Giphy:
https://giphy.com/gifs/alien-et-aliens-xTiTnBSIn7vTqCDKJW

Save and Publish Once More, now play with your Alien chat app!