Chatbot Integration with Oracle JET

This tutorial needs a review. You can edit it in GitHub following these contribution guidelines.

This document provides a step-by-step set of instructions guiding you through the process of integrating IBCS chatbots with the Oracle JavaScript Extension Toolkit (JET). JET empowers web and mobile developers by providing a modular toolkit based on modern JavaScript, CSS3, and HTML5 design and development principles.

Setting Up an Oracle JET Application

In this exercise you set up an Oracle JET application and explore its default content.

  1. Follow the steps described in Setting Up an Oracle JET Application.

  1. Open the project into an editor or IDE of your choice, such as NetBeans IDE, which displays the application as follows:

navdrawer

Spend some time browsing through the application structure. In the next section, you’ll be introduced to the main concepts of the application structure.

Setup your ChatBot to expose it via a Websocket

In this step, now configure the Intelligent Bot Webhook channel. Then try out the ChatBot from your Oracle JET application.

  1. Return to the Intelligent Bot user interface in a new browser tab, select the Settings button on the left menu, then the Channels tab and finally click the Add Channel button.

ccm029

  1. Follow the instructions from the Configuration section of:

Integrate the ChatBot in the Application

  1. In the application, in the src/js folder, create a folder named jet-composites . Unzip the content of the ZIP file into it, in a folder named bot-client :

t060001

  1. In js/viewModels/Dashboard.js , add a reference to jet-composites/bot-client/loader and ojs/ojcomposite in the define block, to load the bot-client component.

  1. In js/views/Dashboard.html , set the following properties, below var self = this, :

self.websocketConnectionUrl = 'ws://' <bot websocket> => check with the instructor;
self.userId = 'your userId used to send message to the bot';
self.channel = 'channelId, copy from your webhook definition';

Can’t get yours to work? Try 71DB044C-0624-4533-9C98-B8E76BAF919D as the channel ID.

  1. In js/views/Dashboard.html , define the view as follows:

<bot-client id="bot-client"
      channel="[[channel]]"
      websocket-connection-url="[[websocketConnectionUrl]]"
      user-id="[[userId]]">
</bot-client>

. Run the application and interact with the ChatBot.

t060004

You have now hooked your ChatBot into an Oracle JET application.

Next Steps

Read the related Oracle JET Cookbook section in detail and include another CCA component from there.

Also read Creating Composite Components in the Oracle JET Developer Guide.

Congratulations! You have now learned how to create and load CCA components in your Oracle JET applications.

Send Feedback on This Tutorial

See Also

For more information about support for Oracle JET and a variety of HTML5 applications in the IDE on netbeans.org, see the following resources: