Skip to content

Addition of IBM Watson Assistant to multiple web applications and the steps on how to integrate our Watson Assistant using IBM Cloud to any Web Application.

License

Notifications You must be signed in to change notification settings

IBM/SAPUI5-with-Watson-Assistant

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Seamless Integration: Empowering Web Applications with IBM Watson Assistant

  • By Ankit Guria Technology Engineer, IBM Ecosystem Engineering, Blue Partners Lab

In this tutorial, we will show how to add IBM Watson Assistant to multiple web applications and the steps on how to integrate our Watson Assistant using IBM Cloud to any web application. In this comprehensive detailed tutorial, we will show how to seamlessly integrate Watson Assistant into multiple web applications, using the powerful capabilities of IBM Cloud. You’ll see how Watson Assistant, enables not only developers but also data scientists to directly integrate the Chatbot into the UI HTML of web applications, making it a versatile tool for enhancing user experiences.

As a data scientist cannot directly integrate Watson Assistant chatbot directly into the UI frontend of the web applications, it is essential that the Watson Assistant Embedded configuration is done before building the Chatbot.With the help of Watson Assistant on IBM Cloud or Watson Studio on IBM Cloud, you can easily connect the built Watson Assistant Chatbot service into a website or a browser-dependent web applications or mobile applications, analyse the data, and enhance the data according to the user/business requirements.

Learning Objectives

When you have completed this tutorial, you will understand how to:

  • Add Watson Assistant to a SAP UI5/Fiori application
  • Add Watson Assistant to a JavaScript Web application
  • Save the Watson Assistant chatbot to IBM Cloud

Prerequisite

Estimated Time

Completing this tutorial should take about 10 minutes.

Steps

Following this tutorial, you can deploy the Watson Assistant Chatbot on any of the web dependent applications. Steps to integrate Watson Assistant Chatbot on Web Applications or SAPUI5/Fiori Applications:

Step 1: Create an IBM Watson Assistant Service instance with the steps as follows:

  • Go to the IBM Cloud website (cloud.ibm.com) and sign into your account.
  • Create a new Watson Assistant service instance or use an existing one.
  • Make note of the credentials or API key that allows you to access the service.
  • Copy the embedded part of the Watson Assistant:

embedWA

Step 2: Loading the Structure of the SAPUI5 application

  • The following is the architecture of a SAP UI5 application, we are using VS code for the development purpose, we can use other IDEs as well as per our requirement.

fig2

Note: The above is an SAP UI5/Fiori application project architecture. We are supposed to play around the “Index.html” file of the application.

Step 3: Adding Embed part to the Project of SAPUI5 Application

  • We need to embedded part of IBM Watson Assistant Service to “Index.html” file.
  • Adding the copied part from Step 1 to the <script> tag of Index.html (Line 30 to Line 49).

fig3

Step 4: Testing the Chatbot and checking the UI

  • Now we need to run our application and the Watson Assistant is now available at the bottom right corner of the screen to answer your queries.

fig4-2

NOTE: And the above 4 steps can get Watson Assistant Chatbot ready in any SAP UI5/Fiori application.

fig5

Summary

This tutorial serves as a comprehensive guide for data scientists and developers, providing the necessary steps to integrate IBM Watson Assistant seamlessly across different web applications. By leveraging the capabilities of IBM Cloud, users can enhance their web applications with intelligent conversational agents that deliver exceptional user experiences and valuable insights.

Next Steps

As next steps, this project can now be used as a base to build and add more features on top of it to create chatbots for different use cases. Watson Assistant Documentation:

https://cloud.ibm.com/docs/assistant?topic=assistant-getting-started

About

Addition of IBM Watson Assistant to multiple web applications and the steps on how to integrate our Watson Assistant using IBM Cloud to any Web Application.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published