Skip to main content

JET 5.1: How to integrate a chatbot in your JET application.

Recently I have been working on a customer chatbot project. Although it was not a direct requirement, I decided to look into embedding the chatbot in a web application too. You will never know what the future brings. It struck me that is I could not find any blogposts related to this topic. The only thing is a youtube video by Oracle PM (see resources below) describing how to do this.

There can be several reasons as why this has not been blogged about:
  1. Nobody is doing chatbot integration in a Javascript UI yet.
  2. Oracle Documentation is clear enough.
  3. It is very simple so why bother blogging.
Anyway, despite of any of these reasons, I decide to write a post on this topic, so that at least I can refer to this myself whenever I need it. So here it is: How to integrate a chatbot in your JET application. This post does not go into the details of creating a chatbot, it just explains how to integrate one in you JET application (or any other Javascript application fo that matter).

What do you need?

For this solution to work, you need to have an instance to Oracle Mobile Cloud Enterprise (OMCe), or Autonomous Mobile Cloud Enterprise (AMCe) in order to use the chatbot functionality. I have access to AMCe and can use the sample CrCPizzaBot. This bot is an example that ships with AMCe (and OMCe ?) Note that the solution described below works with any Oracle Cloud Chatbot.

Step one: Download the SDK's

To download the SDK's you need to click the downloads link in your Cloud Environment. This will take you to the page that contains all the downloads for Oracle Autonomous Mobile Cloud Enterprise (AMCe).
After accepting the License Agreement, you can download the sdk: Bots Client SDK for JavaScript v18.2.3.0 Note the the version might be confusing. I am currently on 18.2.5 but the file that I downloaded is 18.2.3. It turns out to be the correct file even though the filename suggest differently.
Note that the SDK (after being unzipped) has a readme file with all of the steps in this blogpost. So you might want to read up on that one too.

Step two: Configure the SDK

After downloading the SDK, you need to unzip it. This can be done at the download location. After unzipping, the SDK is ready to be configured. Configuring is rather easy.  Simply invoke ./configure in the location where you unzipped the SDK. Add the location of your webserver where you will be hosting the static content. In my case I use a local glassfish server running port 8080. 

./configure http://localhost:8080/chatbot-blogpost-demo/static/

Step three: Create a simple JET application to hold the chatbot

For this you can use the Oracle JET command line interface, and issue ojet create:

ojet create chatbot-blogpost-demo --template=navbar

It will create a simple JET application called chatbot-blogpost-demo.
The only thing to do in the JET application is to add a couple of lines of javascript code embed and initialise the chatbot.
First of all you need the a piece of code towards the end of the `head` section on your page. This piece of code is also in the readme file (near line 50) . Make sure to replace `sdk-folder-url` with the URL where the SDK is hosted. In the case of this demo that is:
  • http://localhost:8080/chatbot-blogpost-demo/static/
After copying the code the index.html of the JET application, it would look like this:
After changing the it looks like this:
Finally you need to initialise the bot by adding the Bots.init towards the end of the body of your page.
In this piece the app-id needs to be changed with the app-id of the chatbot's web channel. This is what we will create in the next step.

Step five: Adding a new WebChannel to you bot in the Mobile Cloud

In order to use the bot in your JET application, the Bot needs to be exposed over a web channel. Such a web channel can be created in Mobile Cloud. Give the channel an appropriate name and make sure to select WEB from the dropdown.
After creating the web channel you need copy the value of the app-id and provide it in the Bots.init javascript code.

Step six: Deploying the JET application

I will run the JET application (and the chatbot SDK code) as static content on my glassfish server which I happen to have ready on my development machine. I simply put all stuff (the configured SDK files, and the web folder of my JET application) in the docroot of my glassfish server. It suits the purpose of this blogpost.
NOTE: You can also choose to run all as a node application and deploy it somewhere to the cloud.

So after 'deploying' my docroot contains a folder 'chatbot-blogpost-demo'. In that folder I have the web folder of my JET application, and a folder called 'static' where I copied all files that were prepared in step 2 (so just the files, not the folder).

Step seven: Running the chatbot in the  JET application

Now when you navigate in a browser to the URL that hosts your application, you will see a tiny chatbot icon in the lower right corner of the page. When you invoke that icon, you can use the bot.
A movie showing this is hosted on youtube:

Conclusion

Embedding a chatbot in an oracle JET application (or any javascript application) is really easy. It just takes two replacements in code snippets, and you are good to go. I might post something on how to configure the embedded bot a bit more, but the simple integration as described in this post is really really easy.

Resources

Oracle Mobile Youtube Channel: Adding bots to a web channel.
Developer Guide Mobile Cloud: Bots client SDK for Javascript.



Comments

Popular posts from this blog

ADF 12.1.3 : Implementing Default Table Filter Values

In one of my projects I ran into a requirement where the end user needs to be presented with default values in the table filters. This sounds like it is a common requirement, which is easy to implement. However it proved to be not so common, as it is not in the documentation nor are there any Blogpost to be found that talk about this feature. In this blogpost I describe how to implement this.

The Use Case Explained
Users of the application would typically enter today's date in a table filter in order to get all data that is valid for today. They do this each and every time. In order to facilitate them I want to have the table filter pre-filled with today's date (at the moment of writing July 31st 2015).


So whenever the page is displayed, it should display 'today' in the table filter and execute the query accordingly. The problem is to get the value in the filter without the user typing it. Lets first take a look at how the ADF Search and Filters are implemented by the f…

ADF 12.2.x : Conditional Showing Message Instead of List of Values Popup

Today I had to fix an issue in one of our ADF applications. For those of you working with ADF (as I do too occasionally) this might be valuable, so I decided to share this. The application is based on an old Oracle Forms applications and I had to implement the following functionality:

FRM-41830 : List of Values contains no entries.

In other words (more ADF like) : If you are about to render a List of Values and that List of Values contains no rows, just show a message instead of showing the List of Values.

In this post I will describe how I was able to implement this although it turned out to be a challenge.
Below are the steps that I took. Note that the Application can be downloaded from GIT.

1) I use a UI pattern where we use readonly table and do edits in a popup. That means that any List of Values will add an additional popup to the UI.



2) The List of Values that I use in this sample only shows entries where the minimum salary is less then the employees current salary. Not that …

ADF 11g Quicky 3 : Adding Error, Info and Warning messages

How can we add a message programatically ? Last week I got this question for the second time in a months time. I decided to write a short blogpost on how this works.

Adding messages is very easy, you just need to know how it works.
You can add a message to your faces context by creating a new FacesMessage. Set the severity (ERROR, WARNING, INFO or FATAL ), set the message text, and if nessecary a message detail. The fragment below shows the code for an ERROR message.

1: public void setMessagesErr(ActionEvent actionEvent) {
2: String msg = "This is a message";
3: AdfFacesContext adfFacesContext = null;
4: adfFacesContext = AdfFacesContext.getCurrentInstance();
5: FacesContext ctx = FacesContext.getCurrentInstance();
6: FacesMessage fm =
7: new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, "");
8: ctx.addMessage(null, fm);
9: }


I created a simple page with a couple of buttons to show the result of setting the message. When the butto…