Component Diagram :

Sequence Diagram:

We used:

1. Java jdk 1.8
2. Spring boot suite 4.8.1
3. Angular 10+ node.js
4. Visual Studio code IDE. Vs 1.51

IGenie – Chatty Bot:

Chatbots, or conversational interfaces present a new way for individuals to interact with computer systems. A chatbot allows a user to simply ask questions in the same manner that they would address a human.

The Use case of IGenie-chatty bot:

We have developed a personal assistant which will make the life easier for the user just by listening to the command. Since it is a personal chatbot it can hold the credential and it also maintain the session. The user can ask for any information*(Ex: Server, API, application status, deployment status)* if authenticated otherwise need to authenticate first by providing their credentials. Apart from this some of the automation work can also be implemented in future such as scaling of the server(explained in the future extension section).
A RAML crawler is used for generation of patterns and it is built on top of Mule-RAML API. The generated pattern is used to generate a base AIML template.
Currently, this chatbot is build on top of the Program AB(AIML based chatbot) which is internally calling cloud hub API. The JSON data which is coming from the cloud hub API is parsed into the map in such a way that the hierarchy is break down i.e. all the keys are brought to the root level which will optimizes the search. The whole functionality is wrapped up in the response handler API.

This hash map is used to fill Mother AIML file template and later it is loaded to the Bot at run time and the bot will give the best response from the available option. Which will be later shown to the end user at the chatbot UI.

The below figure represents the front-end project explorer of IGenie-ChattyBot

Steps for front end set up:

Step 1:
Download the Zip file and extract.

Step 2:
Go to the extracted file location and open cmd terminal.

Step 3:
Run the command npm install in that terminal. This installs all the packages used in the project.

Step 4:

• Once all the packages are installed through npm install.
• Run the command ng serve, which builds and runs the app. Here, the app runs on port 4200 by default .
• If you want to use a different port (eg : 4202)
• Run the command ng serve--port 4202 instead of ng serve.

Step 5:
Open Visual Studio Code.
To open an existing app folder

Go to File --> Open Folder --> open the extracted app folder

You can also customize your chatbot UI by creating additional component.

The default Bot UI contains:

1. Chatbox component
2. App component
3. Chatbox Service module

To create a new Component :

use command :

ng generate component componentname
or
ng g c componentname

To add new packages

use command:

npm install packagename@version

Check for the version compatibility in order not to cause version mismatch.

To create new service module

use command:

ng g service servicename

app.module.ts :

It contains all the components, modules and services created and used in the UI app

All the packages are already created and installed

using npm install command

Steps for Backend Setup:

Step 1:
Download the project Zip file. click here

Step 2:
Extract the zip file to the spring boot suite(STS) workspace.

Step 3:
Open the extracted file, Go to

File->open project from the file system

Step 4:
Search for the directory where you have extracted your project and then click finish. It will add your project to the workspace.

Step 5:
Clean your project

Project->Right click->Debug as->maven clean->finish

Step 6:
Update your project.(it will add all your dependency)

Project ->right click->maven-> update project->force update

Step 7:
write port number and the cloudHub API in the application.properties file as shown below and save the file.

For integrating front end with back end:

Backend modification:

Go to chatbot.java file:

src->com.invenio.util.controller->chatbot.java

add @CrossOrigin(origins = http://localhost:4202).(We are using port 4202. You can use any port number change the port accordingly.)

Front-end modification:

Open Chatbox.service.ts, Got to

src->app->chatbot->Chatbox.service.ts

Change the rest api url according to the port you are using as shown below.

How to run your chatbot:

Step 1:
Once your set up is ready.
Start your backend service as spring boot app. Go to

project->right click->run as->spring boot app.

Step 2:
Put the URL http://localhost:4202 in the browser to see the running chatbot UI

AnyPoint Studio platform:

We have tested our application for the following cloudhub Api:

1. https://anypoint.mulesoft.com/accounts/login
2. https://anypoint.mulesoft.com/accounts/api/me
3. https://anypoint.mulesoft.com/accounts/api/organizations/<>/environments
4. https://anypoint.mulesoft.com/cloudhub/api/v2/applications
5. https://anypoint.mulesoft.com/hybrid/api/v1/servers

For reference to other cloud hub API

Testing your chatbot:

Enter your query in the chatbot. For cloud hub related query, login to cloud hub.

Once Authentication successful. You will get the response.

Now, chatbot can also response to the cloud hub related query

Future Extension of the IGenie-ChattyBot:

1. Interaction over Voice.
2. Command following chatbot

Interaction over Voice:

We are trying to provide the voice capability to our chatbot such that the user can interact over voice.

Command following chatbot:

We are also working on providing the capability to our IGenie-ChattyBot to handle the minor error on our cloud where user intervention is not required.

The above statement can be justified by the below scenario:
Based on the error alert IGenie-ChattyBot will provide the best solutions to be tried, which can resolve the error or capable of handling by itself if required permission and formatted file given.

Download IGenie-ChattyBot UI

Download IGenie-ChattyBot backend