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.



Labels:

Comments

Post a Comment

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...
6 comments
Read more

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 but...
2 comments
Read more

ADF 12c : Using Jasper Reports en JasperSoft Studio 6.1; What Libraries do you need?

Over the last couple of years, or better in the last decade I have implemented several reporting solutions with Jasper Reports in ADF. I did that in ADF 10g, ADF 11.1.1.x, ADF 11.1.2.x and ADF 12.1.x I also used several version of Jasper Reports. There is a whole lot of documentation, blogposts and presentations available. So when today I got a request from one of my customers to make a setup for the implementation of Jasper Reports 6.1 in ADF 12.1.3 I did not expect any problems. Boy was I wrong. Here is the Story With all the knowledge from the past, I decided to follow the known steps. 1) Download iReport Designer, 2) Build a report in iReport 3) Create an ADF application 4) Add the necessary libraries to use the report 5) Call the report from a button via a Managed Bean Step 1 In the past I used iReport designer to build the reports. When you go to the download site of iReport designer you now see an interesting message. So I took this serious and decided not to u...
2 comments
Read more