Control Your Mule Infra Via Bot
Tags: mulesofthackathon, anypointplatform, mulemessages, programab
Published: 2020-11-28 15:33:21




#Component Diagram :

![componentDiagram](https://dev-to-uploads.s3.amazonaws.com/i/vq7f2599lke4ghg0sk7f.png)
 

#Sequence Diagram:

![SequenceDiagram](https://dev-to-uploads.s3.amazonaws.com/i/din682nrz6unah392gtx.png)
 

###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
![picture3](https://dev-to-uploads.s3.amazonaws.com/i/66juuiwojtjj59x0ut6p.png)
 

##Steps for front end set up:
**Step 1:**
Download the [Zip file](https://github.com/Vikash-Invenio/MuleHackathon-Frontend.git) and extract.

**Step 2:**
Go to the extracted file location and open cmd terminal.
![picture4](https://dev-to-uploads.s3.amazonaws.com/i/nks8033d9ovqweimqp2v.png)
 

**Step 3:**
Run the command **npm install** in that terminal. This installs all the packages used in the project. 
![picture5](https://dev-to-uploads.s3.amazonaws.com/i/1v2nhl7l61usnizy1epj.png)
 

**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.**

![picture6](https://dev-to-uploads.s3.amazonaws.com/i/qwbsn3szxkwwm98whr5g.png)

**Step 5:**
Open Visual Studio Code. 
`To open an existing app folder`
>Go to File --> Open Folder --> open the extracted app folder

![picture7](https://dev-to-uploads.s3.amazonaws.com/i/tnbumgqwz5snytaitrwb.png)

![picture8](https://dev-to-uploads.s3.amazonaws.com/i/glf6z7pxjfz1tqiasadp.png)

###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

![picture9](https://dev-to-uploads.s3.amazonaws.com/i/p6m3u6ee4buexnrlb0cl.png)

###To add new packages  
####use command:
> npm install packagename@version

Check for the version compatibility in order not to cause version mismatch.
![Untitled10](https://dev-to-uploads.s3.amazonaws.com/i/sf6p7zht9tqs859o6n04.png)

###To create new service module 
####use command:
> ng g service servicename

![Untitled11](https://dev-to-uploads.s3.amazonaws.com/i/gxtpe3p6trqihmxd3y6e.png)

###app.module.ts :

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

![Untitled12](https://dev-to-uploads.s3.amazonaws.com/i/xjqsdqnsza8i8prf8ei9.png)

###All the packages are already created and installed
using **npm install command**

![Untitled13](https://dev-to-uploads.s3.amazonaws.com/i/9qc7lmaxbxiubmajg9e1.png)

![Untitled14](https://dev-to-uploads.s3.amazonaws.com/i/ocbavgomwi60argewma8.png)


##Steps for Backend Setup:
**Step 1:**
Download the project Zip file. [click here](https://github.com/Vikash-Invenio/Mulesoft-hackathon)

![Picture15](https://dev-to-uploads.s3.amazonaws.com/i/a2ffxqz293o9o0t3cdzp.png)

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

![Picture16](https://dev-to-uploads.s3.amazonaws.com/i/a65dau5h73dm303ts97y.png)


**Step 3:**
 `Open the extracted file, Go to`
 >File->open project from the file system

![Picture17](https://dev-to-uploads.s3.amazonaws.com/i/o1aloklyr2kw9tzkjrl8.png)

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

![Picture18](https://dev-to-uploads.s3.amazonaws.com/i/rdqk0el59d7r8oy2jeuk.png)

**Step 5:**
Clean your project
>Project->Right click->Debug as->maven clean->finish

![Picture19](https://dev-to-uploads.s3.amazonaws.com/i/j3e0irsmnoyyxuay0es3.png)

**Step 6:**
Update your project.(it will add all your dependency)
> Project ->right click->maven-> update project->force update

![Picture20](https://dev-to-uploads.s3.amazonaws.com/i/x2e0bekf76o16lzetl3f.png)
![Picture21](https://dev-to-uploads.s3.amazonaws.com/i/apdi9hqoxqxqnry2rgcu.png)

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

![Picture22](https://dev-to-uploads.s3.amazonaws.com/i/t87htxhhn7dhy58euy0c.png)


##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.) 

![Picture23](https://dev-to-uploads.s3.amazonaws.com/i/rznm1ic1zvfi44y12fpm.png)


###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.


![Picture24](https://dev-to-uploads.s3.amazonaws.com/i/36v4hsygeeyl4vls7m2d.png)
      


##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.

![Picture25](https://dev-to-uploads.s3.amazonaws.com/i/g5tvn6xjm5jomh8qhqp3.png)

![Picture26](https://dev-to-uploads.s3.amazonaws.com/i/x2lwlgrt7664orhvlnvk.png)


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

![Picture27](https://dev-to-uploads.s3.amazonaws.com/i/k9aclfar319rv0odrtpk.png)


##AnyPoint Studio platform:
We have tested our application for the following cloudhub Api:
1.	[https://anypoint.mulesoft.com/accounts/login] (https://anypoint.mulesoft.com/accounts/login)
2.	[https://anypoint.mulesoft.com/accounts/api/me](https://anypoint.mulesoft.com/accounts/api/me)
3. [https://anypoint.mulesoft.com/accounts/api/organizations/<<org_id>>/environments](https://anypoint.mulesoft.com/accounts/api/organizations/<<org_id>>/environments) 
4.	[https://anypoint.mulesoft.com/cloudhub/api/v2/applications](https://anypoint.mulesoft.com/cloudhub/api/v2/applications)
5.	[https://anypoint.mulesoft.com/hybrid/api/v1/servers](https://anypoint.mulesoft.com/hybrid/api/v1/servers)

**For reference to other** [cloud hub API](https://anypoint.mulesoft.com/exchange/portals/anypoint-platform/f1e97bc6-315a-4490-82a7-23abe036327a.anypoint-platform/cloudhub-api/minor/1.0/console/summary/)



##Testing your chatbot:

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

![Picture28](https://dev-to-uploads.s3.amazonaws.com/i/9p5r5cwuleffw2m3qxez.png)
 

Once Authentication successful. You will get the response.

![Picture29](https://dev-to-uploads.s3.amazonaws.com/i/019d51rmasbg2jvxg0kx.png)
 

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


![Picture30](https://dev-to-uploads.s3.amazonaws.com/i/71qr2ot4tfwnfhtlqsxv.png)


##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](https://github.com/Vikash-Invenio/MuleHackathon-Frontend.git)
#Download [IGenie-ChattyBot backend](https://github.com/Vikash-Invenio/Mulesoft-hackathon)