Component Diagram :
Sequence Diagram:
We used:
- Java jdk 1.8
- Spring boot suite 4.8.1
- Angular 10+ node.js
- 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:
- Chatbox component
- App component
- 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:
- https://anypoint.mulesoft.com/accounts/login
- https://anypoint.mulesoft.com/accounts/api/me
- https://anypoint.mulesoft.com/accounts/api/organizations/<>/environments
- https://anypoint.mulesoft.com/cloudhub/api/v2/applications
- 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:
- Interaction over Voice.
- 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.
Top comments (7)
Thank you for your submission @vikashinvenio . I wasn't able to find you in the list of registrants. Can you please confirm that you have registered here mulesoft.com/hackathon2020?
Please also either comment with your email address or send me an email at royston (dot) lobo (at) mulesoft (dot).com
Hello @Royston Lobo,
I have registered for the hackathon with email id(vikash.bajoria@invenio-solutions.com). can you please confirm about the registration?
Hi @vikashinvenio , I can now see your registration as expected. Thank you and all the best!
Good job!
Thank you
Excellent Vikash..! Great idea
Thank you