netbeans.apache.org/src/content/kb/docs/webclient/ojet-chatbot.asciidoc - netbeans-website - Git at Google

 //
 //     Licensed to the Apache Software Foundation (ASF) under one
 //     or more contributor license agreements.  See the NOTICE file
 //     distributed with this work for additional information
 //     regarding copyright ownership.  The ASF licenses this file
 //     to you under the Apache License, Version 2.0 (the
 //     "License"); you may not use this file except in compliance
 //     with the License.  You may obtain a copy of the License at
 //
 //       http://www.apache.org/licenses/LICENSE-2.0
 //
 //     Unless required by applicable law or agreed to in writing,
 //     software distributed under the License is distributed on an
 //     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 //     KIND, either express or implied.  See the License for the
 //     specific language governing permissions and limitations
 //     under the License.
 //

 = Chatbot Integration with Oracle JET
 :jbake-type: tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :icons: font
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :description: Chatbot Integration with Oracle JET - Apache NetBeans
 :keywords: Apache NetBeans, Tutorials, Chatbot Integration with Oracle JET

 This document provides a step-by-step set of instructions guiding you through the process of integrating link:https://www.oracle.com/solutions/mobile/bots.html[+IBCS chatbots+] with the link:http://oraclejet.org[+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 link:ojet-settingup.html[+Setting Up an Oracle JET Application+].


 [start=2]
 . Open the project into an editor or IDE of your choice, such as NetBeans IDE, which displays the application as follows:

 image::images/navdrawer.png[]

 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.

 image::images/ccm029.png[]


 [start=2]
 . Follow the instructions from the Configuration section of:

 *  ``http://<bot server>:3000/samples/chat``  if you’re using a Docker Image before 0.6 *OR*
 *  ``http://<botserver>:8888/source/apps/chat/overview``  if you’re using a Docker image from 0.6


 == 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`` :

 image::images/t060001.png[]


 [start=2]
 . 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.


 [start=3]
 . In  ``js/views/Dashboard.html`` , set the following properties, below  ``var self = this,`` :


 [source,java]
 ----

 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.


 [start=4]
 . In  ``js/views/Dashboard.html`` , define the view as follows:


 [source,xml]
 ----

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

 [start=5]
 .
 Run the application and interact with the ChatBot.

 image::images/t060004.png[]

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


 == Next Steps

 Read link:http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=composite&demo=basic[+the related Oracle JET Cookbook section+] in detail and include another CCA component from there.

 Also read link:http://docs.oracle.com/middleware/jet320/jet/developer/GUID-18F9F429-1A80-4A9F-9B78-09428EFD2530.htm#BEGIN[+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.

 link:/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20CCA[+Send Feedback on This Tutorial+]


 [[seealso]]
 == See Also

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

 * link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples.html[+"Learn" section on the Oracle JET site+]. A set of official Oracle JET learning resources.
 * link:html5-editing-css.html[+Working with CSS Style Sheets in HTML5 Applications+]. A document that continues with the application that you created in this tutorial that demonstrates how to use some of the CSS wizards and windows in the IDE and how to use the Inspect mode in the Chrome browser to visually locate elements in your project sources.
 * link:html5-js-support.html[+Debugging and Testing JavaScript in HTML5 Applications+]. A document that demonstrates how the IDE provides tools that can help you debug and test JavaScript files in the IDE.
	//
	// Licensed to the Apache Software Foundation (ASF) under one
	// or more contributor license agreements. See the NOTICE file
	// distributed with this work for additional information
	// regarding copyright ownership. The ASF licenses this file
	// to you under the Apache License, Version 2.0 (the
	// "License"); you may not use this file except in compliance
	// with the License. You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing,
	// software distributed under the License is distributed on an
	// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	// KIND, either express or implied. See the License for the
	// specific language governing permissions and limitations
	// under the License.
	//

	= Chatbot Integration with Oracle JET
	:jbake-type: tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:icons: font
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:description: Chatbot Integration with Oracle JET - Apache NetBeans
	:keywords: Apache NetBeans, Tutorials, Chatbot Integration with Oracle JET

	This document provides a step-by-step set of instructions guiding you through the process of integrating link:https://www.oracle.com/solutions/mobile/bots.html[+IBCS chatbots+] with the link:http://oraclejet.org[+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 link:ojet-settingup.html[+Setting Up an Oracle JET Application+].


	[start=2]
	. Open the project into an editor or IDE of your choice, such as NetBeans IDE, which displays the application as follows:

	image::images/navdrawer.png[]

	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.

	image::images/ccm029.png[]


	[start=2]
	. Follow the instructions from the Configuration section of:

	* ``http://<bot server>:3000/samples/chat`` if you’re using a Docker Image before 0.6 OR
	* ``http://<botserver>:8888/source/apps/chat/overview`` if you’re using a Docker image from 0.6


	== 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`` :

	image::images/t060001.png[]


	[start=2]
	. 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.


	[start=3]
	. In ``js/views/Dashboard.html`` , set the following properties, below ``var self = this,`` :


	[source,java]
	----

	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.


	[start=4]
	. In ``js/views/Dashboard.html`` , define the view as follows:


	[source,xml]
	----

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

	[start=5]
	.
	Run the application and interact with the ChatBot.

	image::images/t060004.png[]

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


	== Next Steps

	Read link:http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=composite&demo=basic[+the related Oracle JET Cookbook section+] in detail and include another CCA component from there.

	Also read link:http://docs.oracle.com/middleware/jet320/jet/developer/GUID-18F9F429-1A80-4A9F-9B78-09428EFD2530.htm#BEGIN[+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.

	link:/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20CCA[+Send Feedback on This Tutorial+]




	[[seealso]]
	== See Also

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

	* link:http://www.oracle.com/webfolder/technetwork/jet/globalExamples.html[+"Learn" section on the Oracle JET site+]. A set of official Oracle JET learning resources.
	* link:html5-editing-css.html[+Working with CSS Style Sheets in HTML5 Applications+]. A document that continues with the application that you created in this tutorial that demonstrates how to use some of the CSS wizards and windows in the IDE and how to use the Inspect mode in the Chrome browser to visually locate elements in your project sources.
	* link:html5-js-support.html[+Debugging and Testing JavaScript in HTML5 Applications+]. A document that demonstrates how the IDE provides tools that can help you debug and test JavaScript files in the IDE.