A PROGRESSP REPORT-3 ON

ANDREEA-THE CHATBOT
(10’November-2019)

SUBMITTED IN PARTIAL FULFILMENT FOR AWARD DEGREE OF

BACHELOR OF TECHNOLOGY

IN COMPUTER SCIENCE & ENGINEERING

BY
Manish Lohiya (15BCON182)

Krataghya Sharma (15BCON200)

Neeraj Sharma(15BCOL222)

UNDER THE GUIDANCE OF

Dr. Shalini Rajawat

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING


JECRC University, Jaipur

1
2
 CHAPTER-1
PROJECT CHARTER
1.1 Objective
To develop a chatty bot which can entertain people 24/7.
You can chat with it at anytime in the day and it can be really helpful. It is designed to convincing-
ly simulate how a human would behave as a conversational partner.
Present studies have revealed that People are using messenger apps more than they are using social
networks thus creating a greater scope for chat bots or talk bots .It is observed Messaging apps are
the platforms of the future and bots will be how their users access all sorts of services.Thus bots a
gaining a huge importance.

1.2 Introduction to Project

A chatbot is software that can have a conversation with a human. For example a user could ask the
bot a question or give it an instruction and the bot could respond or perform an action as appropri-
ate.
A chatbot is a service, powered by rules and sometimes artificial intelligence, that you interact with
via a chat interface.
There are two types of chatbots, one functions based on a set of rules, and the other more advanced version
uses machine learning.
Chatbot that functions based on rules:
•This bot is very very limited. It can only respond to very specific commands. If you say the
wrong thing, it doesn’t know what you mean.
•This bot is only as smart as it is programmed to be.
Chatbot that functions using machine learning:
•This bot has an artificial brain AKA artificial intelligence. You don’t have to be ridiculously
specific when you are talking to it. It understands language, not just commands.
•This bot continuously gets smarter as it learns from conversations it has with people.
Andreea functions based on rules and is just partial substitute to a friend to which one can chat all
day and night .

3
1.3 Proposed Logic /Technology
Andreea is built using react-native and the backend logic is done through API reference on Google’s
Dialogflow.
React is a JavaScript library for building user interfaces. A key concept in React is that of a compo-
nent. A component is a particular piece of the user interface, such as this Facebook input field.
Components in React are compassable and reusable.
React is smart. It detects which components need to be re-rendered based on the changes in the
data, and which not. This makes it fast and powerful, and that’s why it’s a popular choice for devel-
opment of web applications.
React Native is a Javascript framework for rendering mobile application in iOS and Android. React
is a Facebook’s Javascript library for building user interfaces which targets mobile platforms.
Backend API referencing is done by creating ChatbotApp agent in DialogFlow .
The Dialogflow is a platform developed by Google to give users new ways to interact with their
product by building engaging voice and text-based conversational interfaces powered by AI. It
Connect with users on website, mobile app, the Google Assistant, Amazon Alexa, Facebook Mes-
senger, and other popular platforms and devices.
Dialogflow is user-friendly, intuitive, and just makes sense.

Its natural language processing (NLP) is the best .
A Dialogflow agent represents the conversational interface of your application, device, or bot.
The chat component is taken from React-native-Gifted-chats and networking tasks are done in reac-
t.The Expo app is used to test the Project and React is used to build the Product to production .

4
 Fig 1.1 Architecture Diagram of the chatbot

1.4 Scope of the Project

Andreea -The chatbot will provide a friendly interface to the user who can asks queries to the bot
and get responses in no time . It is friend like ,available to the users all along the day for entertain-
ment . It gives the users simulation that you are talking to an human.
People in their idle time can talk to Andreea when no one is available to chat.
Andreea understands most of the users queries and thus can easily imitate human beings . Thus
Andreea can be said as a complete entertainment package for the users.

5
 CHAPTER 2
SYSTEM REQUIREMENT SPECIFICATION

2.1 Overall Description

2.1.1Product Perspective
Andreea – The chatbot mobile application is IOS / Linux based, self contained and independent
product.
Most of the search engines today, like Google, use a system (The Pagerank Algorithm) to rank dif-
ferent web pages. When a user enters a query, the query is interpreted as keywords and the system
returns a list of highest ranked web pages which may have the answer to the query. Then the user
must go through the list of webpages to find the answer they are looking for. Andreea Chatbot,
however, will try to understand the query and provide a definitive answer by matching with the ap-
propriate rules .
The application looks through the queries and matches them against appropriate responses.

2.1.2 User Interfaces

The application will have a user friendly and menu based interface. Following screens will be pro-
vided:
a. A Home Page asking to start chatting.
b. A Chat Screen from where queries can be fired and responses receiver accordingly.

2.1.3 Hardware Interfaces

• A android mobile with minimum of 5.0 android version and 2GB RAM.
• A network connection (internet ) is required to fire queries and receive responses through API
calls.

Software Interfaces
• Any Microsoft Windows 7 and higher (Windows 7 / 8 / 8.1 / 10) or equivalent Linux based oper-
ating system with minimum kernel support 3.X.
• React-native for coding and developing of the application.
• Node for installing the dependencies and running the application.
• Expo app on mobile for testing the application.

6
2.1.4 Software Interfaces

S.No Software Tool Version Purpose of use

Windows 7 and higher Installation and
Operating
1 or Linux with Kernel 3.x and operational platform
system
higher
Internet Explorer 6 and To get access to
2 Web Browser other higher compatible the Dalogflow
Agent .
0.44.0 or any version For coding and
React-
3 above it. developing of the
native
Application.

Table 1.1 – Minimum Software Interfaces

2.1.5 Communication Interfaces

• Client (customer) on Internet will be using HTTP/HTTPS protocol.

2.1.6 Product Features

The major features for Andreea will be the following:
● Web API: An API call will include a question in the form of a query string url parameter and the
service will reply in JSON.
● Natural Language Processing: T he system will take in questions written in standard English.
● Natural Language Responses: T he answer to the question will be written in standard and under-
standable English.
● Information Extraction: T here will be a database containing all the information needed, populat-
ed using information extraction techniques.

7
2.2 User Classes and Characteristics
User classes
The two classes of users for this system are described below:
● API users :
API users consist of application developers who want to incorporate Chatbot API into other soft-
ware applications.
● Mobile app:
These users consist of non-technical users who want to get answers for their questions. These users
ask questions and get answers with mobile or text messaging interfaces.

User Characteristics
• Educational Level: User should be at least graduate and comfortable with English.
• Experience: User should be well versed / informed about the structure of the program. Data entry
and modification can be done only by the user authorised for this job.
• Technical Expertise: User should be comfortable using general purpose applications on a comput-
er.

2.3 Constraints
2.3.1 Limited Question Scope :
Creating a chatbot able to answer every single question, is not possible to implement with current
Knowledge and within the duration of the project, so the system will be able to answer questions
about limited topics.

2.3.2 Language :
The system will only support questions in standard English

2.4 Assumptions and Dependencies

• FaridSafi/react-native-gifted-chat is used for providing the chat template with which the
user interacts .
• It is assumed that lastest version of node is installed for proper functioning of Application.
• Dialogflow is used for API referencing.

8
2.5 System Product Features
2.5.1 Portability
The application will be easily portable among any IOS or Android based devices that have latest
version installed.

2.5.2 Fast Response

The average time for the server to respond, over the question testing set, will be less than or equal to
4 seconds.

2.5.3 Security
The connection between the Web API and the programs will use HTTPS, for security.

2.5.4 Maintainability
The application will be designed in a manner to make it easy to incorporate new requirements in
individual modules.

9
 CHAPTER 3
SYSTEM DESIGN SPECIFICATION

3.1 System Architecture

Fig 3.1 Architecture of Chatbot

3.2 Module Decomposition

The proposed application can be decomposed into following major modules :
1. Home Module :
It is the first screen that opnes when application is turned on .It includes a start chting
button ,clicking on which resumes chatting with the chatbot.
2.Routing Module :
This module is used for switching between the different screens of application . It contains code to
implement routing and navigation in react between two screens – home screen and chat screen .
3 Chat Module :
This is one of the most important module in the application.Under this module chat template is
implemented and API calling code is written.
4. Chat user interface Module :
it contains components to improve the user experience while chating with the chatbot .

10
3.3 High Level Design Diagram
3.3.1 Usecase Diagrams

Fig 3.2 Use case Diagram

11
3.3.2 Activity Diagram

Fig 3.3 Activity Diagram

12
3.3.3 Collaboration Diagram

Fig 3.4 Collaboration Diagram

13
 CHAPTER 4
METHODOLOGY

4.1 Chatbots
Andreea - it is an bot or an AI (artificial Intelligence) or in normal terms it is just an computer
program to interact with users to give an simulation that you are talking to an human.
Andreea is your friend ! You can chat with her at anytime in the day and she can be really helpful!

4.1.1 What is a chatbot ?

Generally speaking a bot is any software that performs an automated task, however we are inter-
ested in the class of bots that live in chat platforms called chatbots.
The most intuitive definition is that a bot is software that can have a conversation with a human. For
example a user could ask the bot a question or give it an instruction and the bot could respond or
perform an action as appropriate.
A chatbot is a service, powered by rules and sometimes artificial intelligence, that you interact with

via a chat interface. The service could be any number of things, ranging from functional to fun, and

it could live in any major chat product (Facebook Messenger, Slack, Telegram, Text Messages,
etc.).

Also combining the intelligence of machine learning and AI systems with the personal touch of

technology platforms such as instant messaging apps or mobile devices, chatbots could soon be the

best way for businesses to directly reach out to their individual customers.
Example:If you wanted to buy shoes from Nordstrom online, you would go to their website, look
around until you find the shoes you wanted, and then you would purchase them.
If Nordstrom makes a bot, which I’m sure they will, you would simply be able to message Nord-
strom on Facebook. It would ask you what you’re looking for and you would simply… tell it.

Instead of browsing a website, you will have a conversation with the Nordstrom bot, mirroring

the type of experience you would get when you go into the retail store.

14
Examples of Chatbots:
Buying shoes isn’t the only thing chatbots can be used for. Here are a couple of other examples:
• Weather bot. Get the weather whenever you ask.
• Grocery bot. Help me pick out and order groceries for the week.
• News bot. Ask it to tell you when ever something interesting happens.
• Life advice bot. I’ll tell it my problems and it helps me think of solutions.
• Personal finance bot. It helps me manage my money better.
• Scheduling bot. Get me a meeting with someone on the Messenger team at Facebook.
• A bot that’s your friend. In China there is a bot called Xiaoice, built by Microsoft, that over 20

million people talk to.

With bots, the possibilities are endless. You can build anything imaginable, and I encourage you to
do just that.
People are using messenger apps more than they are using social networks.

Fig 4.1 Uses of cheating apps

15
“People are now spending more time in messaging apps than in social media and that is a huge turn-
ing point. Messaging apps are the platforms of the future and bots will be how their users access all
sorts of services.” — Peter Rojas, Entrepreneur in Residence at Betaworks
So, logically, if you want to build a business online, you want to build where the people are. That
place is now inside messenger apps.
This is why chatbots are such a big deal.It’s potentially a huge business opportunity for anyone
willing to jump headfirst and build something people want.
with bots consumers’ attention spans are hopefully going to be wide open/receptive again!

Conversation:
The concept of the conversation is central to a chatbot. A chatbot can and does converse with a
human but as mentioned previously it’s capabilities are limited. That is not to say however that in
very narrows ways the text or voice based conversation can be as good or better than conversing
with an actual human. Chatbots can have advantages over human agents. They are available 24/7
and they have access to a very broad array of information and functionality. They can also outper-
form humans in terms of the speed and accuracy in a narrow domain. The problem however is mak-
ing sure the end users are aware these limitations.
While chatbots have the capability to replace humans for certain tasks, they also can be used to
augment what human agents can offer their clients. The chatbot can for example provide suggested
responses for the human agent or bring up relevant information in a timely manner which the hu-
man agent can then act on. The fact that chatbots are used directly in a communication channel
means that the collaboration between the bot and a human agent is far easier to achieve. This is an-
other way that chatbots are differentiated from apps.

4.1.2 How Chatbots Work

There are two types of chatbots, one functions based on a set of rules, and the other more ad-
vanced version uses machine learning.
1. Chatbot that functions based on rules:
• This bot is very very limited. It can only respond to very specific commands. If you say the
wrong thing, it doesn’t know what you mean.
• This bot is only as smart as it is programmed to be.
• Chatbot that functions based on rules.

16
 • This bot is very very limited. It can only respond to very specific commands. If you say the
wrong thing, it doesn’t know what you mean.
• This bot is only as smart as it is programmed to be.

2. Chatbot that functions using ma-

chine learning:
• This bot has an artificial brain
AKA artificial intelligence. You
don’t have to be ridiculously
specific when you are talking to
it. It understands language, not
just commands.
• This bot continuously gets
smarter as it learns from con-
versations it has with people.
4.1.3 Types of Bots

Fig.4.2 Different ways to deliver value.

We can classify bots by the different ways in which they provide value to users. It’s a great way to
reconnect with the basic motivations for using bots.
The various types are :
1. The Optimiser
2. The One-Trick Pony
3. The Proactive

17
4. The Social
5. The Shield
6. The Chatty
7. The Super Bot
8. The Optimiser

This is by far the largest category of functional bots. In a way, all other categories are spin-offs of
this one. These bots take on some concrete challenge and try solving it better than existing apps or
websites. For example, streaming music in your living room by saying “Alexa, play my library” is
more convenient than clicking a couple of buttons on your mobile device to achieve the same
result.
These bots attempt to disrupt by reducing friction versus more traditional ways of ‘doing things.’
A huge challenge at this point is that the overwhelming majority of these bots fail to keep their
promise. They fail to be better than the alternatives they set to disrupt. If your shopping or traveling
bot builds on a search experience that’s severely lacking comparing to the native app or Web expe-
rience, then the fact ‘you’re in Messenger’ won’t help you much. In the end of the day, you have to
stand tall above the alternatives in ‘getting things done’. Bot makers should measure themselves by
the time it took users to get what they came for, and their level of satisfaction. If it doesn’t work — 
pivot.

18
1. The One-Trick Pony
“You have an extremely naive smile and a beard that’s fooling no one. You require glasses because
you are far from perfect”
(A frank assessment of my face, by a One-trick Pony Bot)
By one-trick pony bots, I’m referring to all those mini-utilities with a messaging interface that helps
you turn an image to a meme, a piece of text into a video mashup, or let you imagine Lebron James
as a chicken or as a homeless dude (results below). It’s easy to dismiss the one-trick ponies but
sometimes they surface impressive cognitive capabilities, and they have an extreme viral potential.
Some of them can become disruptive with time when use-cases suddenly expand beyond the mod-
est start. Think Snapchat’s ‘simple’ spectacles.

2. The Proactive
Here we find bots that count on their ability to provide the right info at the right time and place.
Examples are Foursquare’s Marsbot, Weathercat Ponchoand KLM’s bot. These bots can be useful
for narrow use-cases if they are careful not to irritate their victims with useless notifications. For
true mass adoption, they will need to provide personal, smart and timely recommendations on a use-
case that’s important enough for most of us to engage frequently. Not the easiest of tasks.

3. The Social
This category is super-interesting. Similar to other categories, they are meant to accomplish a task,
but their distinct feature is that they build on the power of a group or the crowd. They do so while
making use of the unique nature of messaging platforms. Swelly, Sensay, Tinder Stacks, Fam, and
obviously Slackbots provide some examples. Social bots can become truly viral, even for simple
use cases. I believe we will see a spike here once Facebook adds the ability to join users to a bot
conversation.

4. The Shield
These bots are also a sub-category of Optimisers. They are special in that they help us avoid un-
pleasant experiences. The idea is to exchange a talk to a cold hearted person with a chat with a
friendly robot;). Fighting a parking ticket,customer support issues, fending-off obnoxious
suitors are some examples. I loved listening to Joshua Browder describing his DoNotPay journey.

19
This guy understands the medium like few do. Similar to the Optimisers category, these bots live
(and currently mostly die) by their ability to get things done comparing to alternatives.

5. The Chatty
Bots that aim to chat with users for the sake of conversation and engagement.Xiaoice garnered an
absolutely massive user base with this approach. Automated celebrity and personal bots also belong
in this category. These bots can truly become opinion leaders. Bot designers may thus opt to ac-
complish social or commercial goals throughout the conversation. Despite the promise, there are big
technical gaps between ‘chattiness’ and the ability to complete actual tasks through conversations.
Bot makers need to be super crisp about the value they expect to provide and beware of falling into
traps others have been kind enough to mark for them ;).

6. The Super Bot

This is just another name for the intelligent personal assistants such as Alexa, Siri, Cortana and
Allo. They are evolving as platforms that can launch a variety of skills/actions (bots). They will ad-
dress the bot discovery challenge, with time.

4.1.4 Famous Examples of Chatbots

1. Casper: Helping Insomniacs Get Through the Night
If you suffer from insomnia, as I do, you’ll know that the feeling of almost suffocating loneliness
– the idea that everyone else in the world is resting peacefully while your own mind betrays you
with worries and doubts – is among the worst parts of not being able to sleep.
Enter Casper’s amazingly named Insomnobot 3000 (which truly is one of the most tongue-in-
cheek, retro-futuristic names for a chatbot I’ve ever come across), a conversational agent that aims
to give insomniacs someone to talk to while the rest of the world rests easy.
At this point, Insomnobot 3000 is a little rudimentary. As you can see in the screenshot above, the
responses offered by the agent aren’t quite right

20
 Fig 4.4 Casper

2. Roof AI: Generating and Assigning Leads Automatically

Enter Roof Ai, a chatbot that helps real-estate marketers to automate interacting with potential
leads and lead assignment via social media. The bot identifies potential leads via Facebook, then
responds almost instantaneously in a friendly, helpful, and conversational tone that closely resem-
bles that of a real person. Based on user input, Roof Ai prompts potential leads to provide a little
more information, before automatically assigning the lead to a sales agent.
One of the key advantages of Roof Ai is that it allows real-estate agents to respond to user queries
immediately, regardless of whether a customer service rep or sales agent is available to help. This
can have a dramatic impact on conversion rates. It also eliminates potential leads slipping through
an agent’s fingers due to missing a Facebook message or failing to respond quickly enough.

21
 Fig 4.5
Roof AI

3.Natasha on hike
NATASHA - It is an bot or an AI (artificial Intelligence) or in normal terms it is just an computer
program to interact with users to give an simulation that you are talking to an human.

22
 Fig 4.6
Natasha

WHAT CAN YOU DO WITH IT -

You can find out the weather, a movie rating and much more on hike with just a few words!
1.#movie NAME: Check out any movie - details, ratings etc.
2.#weather PLACE: Check out the weather at any place.
3.#wiki NAME: Search Wikipedia for anythingh you want.
4.#fakecall: Stuck somewhere? We'll give you a fake call in a minute!
5.#quote: We'll send you an awesome quote whenever you want it.
6.#fact: Awesome facts, served steaming hot, whenever you want it!
7.#calc QUERY: Add, subtract, multiply, whatever. I do it all.

23
 8.#dict WORD: Don't know the meaning of a word someone just messaged you? Try out my built
in dictionary!
9.#bored: Bored? Try me.
10.#book NAME: Get the details of any book you're interested in.

4.1.5 Andreea – The Chatbot

Andreea is a chatty bot that aim to chat with users for the sake of conversation and engagement.
Andreea is your friend ! You can chat with her at anytime in the day and she can be really helpful!
It is built on React – native platform which works by API calling on Dialogue Flow.
This is how it looks like .

24
 Fig 4.7 Andreea

4.2 Technology used

Andreea is built using react-native

4.2.1React-native
Fig 4.8 React Native
What is React?
React is a JavaScript library for building user interfaces. A key concept in React is that of a com-
ponent. A component is a particular piece of the user interface, such as this Facebook input field.

25
Components in React are compassable and reusable. A component can consist of other components
and of primitives.
React is smart. It detects which components need to be re-rendered based on the changes in the
data, and which not. This makes it fast and powerful, and that’s why it’s a popular choice for devel-
opment of web applications.
But React is not bound to the document object model (DOM) of the browser. With React, we can
also build other types of user interfaces, such as mobile apps.



What is React Native?

React Native offers a way to build mobile applications using React and JavaScript.
React Native is a Javascript framework for rendering mobile application in iOS and Android. React
is a Facebook’s Javascript library for building user interfaces which targets mobile platforms. So
now developers can make mobile applications using this Javascript library which can be shared be-
tween platforms that makes it easy to develop in both iOS and Android.

26
With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You
build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React
Native uses the same fundamental UI building blocks as regular iOS and Android apps.
Advantages of React Native:-

Fig 4.9 Advantages

• Effective for Developers:- While in development cycle when making changes, for web devel-
opment one can roll out changes by refreshing the browser but in mobile development, you need
to deploy the code-cycle each to implement the changes. It is not necessary to re-compile the en-
tire application to be rebuilt every time you make changes.
• Cost reduction and Code reuse:- By using React Native, you can use the same code for deploy-
ment on iOS as well as on Android. This takes you to huge saving in development time and mon-

27
 ey. As per the calculations 90% of the code can be reused between Android and iOS which is just
too good, saving lot of time plus some extra time for modifications that’s it.
• Easy and Live Reloading:- Testing is done every time when some change is made in the code
written will reflect live in the mobile screen. With React Native, it removes the need of recompi-
lation of the application each time a change has been made.If you have two windows opened –
one containing the code and the other showing a mobile screen as a result of the code – you can
immediately see the effect of what you have changed in one screen, on the other screen.
• Best for mobile environments using debugging tools:- React native gives you benefit of using
intelligent debugging tools which can be utilised of whatever text editor you prefer for Javascript
editing. React native does not drive you to work Xcode to develop for iOS or Android. React na-
tive is superfast and is very well tuned to mobile devices.

Drawbacks
The downside of the React native is that some features of iOS and Android are still not supported
and the community still searching for the best practices.

Conclusion
React native is an interesting framework that helps web developers to create robust mobile ap-
plications using their existing Javascript libraries. The bonus point over it is that: it is faster mobile
development, more efficient code sharing across cross platforms like iOS, Android and the web
without sacrificing the end user’s experience or application quality. If your developers can handle
the uncertainty that comes with working with a new technology, and wants to develop mobile ap-
plications for more than just one platform, you should be looking at React Native.

4.3 Building Andreea

4.3.1 Building React Native app.
Create React Native App is the easiest way to start building a new React Native application. It al-
lows you to start a project without installing or configuring any tools to build native code - no
Xcode or Android Studio installation required (see Caveats).
Assuming that you have Node installed, you can use npm to install the create-react-native-app

28
 npm install -g create-react-native-app

Then run the following commands to create a new React Native project called "Andreea ":

create-react-native-app Andreea
cd Andreea
npm start

Fig 4.10 Creating Project

Fig 4.11 Project in Terminal

This will start a development server for you, and print a QR code in your terminal.

29
Running React Native application

Install the Expo client app on your iOS or Android phone and connect to the same wireless network
as your computer. Using the Expo app, scan the QR code from your terminal to open your project.
Initially the project looks like this .

30
 Fig 4.12 interface in Devices

4.3.2 Navigating Between Screens

For navigating between the various screens we have used react – navigator .
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition
between, multiple screens is typically handled by what is known as a navigator.
React Navigation provides an easy to use navigation solution, with the ability to present common
stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript
implementation, it provides the greatest amount of configurability as well as flexibility when inte-
grating with state management libraries such as redux.
The first step is to install in the project:
npm install --save react-navigation

Then you can quickly create an app with a home screen and a chat screen:

31
const RootStack = StackNavigator({
Home: {
screen: HomeScreen,
},
chat: {
screen:Andrea,
},
},
{
headerMode: 'none',
initialRouteName: 'Home',
}
);

React Navigation routers make it easy to override navigation logic or integrate it into redux. Be-
cause routers can be nested inside each other, developers can override navigation logic for one area
of the app without making widespread changes.
The initialRouteName: 'Home' specifies that the first page is Home page .
Creating Chat Component
component in react

Fig 4.13 React Native Methodology

32
 Reusable Components:
The motto of react native is “Learn once write everywhere“. React native is like React, however in-
stead of using web components, it uses native components
Components are wonderful and React is based on them. You start with small things, which you use
to build bigger things, which you use to build apps. Each component has its own logic and controls
its own rendering, and can be reused wherever you need them. Code re-use helps make your apps
easier to develop and easier to maintain. They also help you implement a consistent look and feel
across the whole project. This may be a short description, but using components provides a large
advantage in your development efforts.
A component is a very basic element in react-native we can divide the large application into many
small Components. This makes development fast and maintains the code very clear to understand.

Render
Content inside the render only displays in the Application screen.

Building Chat Component

Building a chatbot requires developing a chat interface so that users can easily interact with it and
all the tasks are completed with ease .
In Andreea , we have use chatting component created by FaridSafi named react-native-gifted-chat.
react-native-gifted-chat
It is an already developed chat component to be used by users. It is easily accessible through
github.
The following are the features of react-native-gifted-chat
• Fully customizable components
• Composer actions (to attach photos, etc.)
• Load earlier messages
• Copy messages to clipboard
• Touchable links using react-native-parsed-text
• Avatar as user's initials
• Localised dates
• Multiline TextInput
• InputToolbar avoiding keyboard
• Redux support

33
 • System message

Installation
Using npm: npm install react-native-gifted-chat --save
• Using Yarn: yarn add react-native-gifted-chat

note : one needs to install an appropriate version of react-native-gifted-chat depending upon the
current supported react-native version .


Message object in Gifted-chat

Chat Message

{
_id: 1,
text: 'My message',
createdAt: new
Date(Date.UTC(2016, 5, 11, 17, 20,
0)),
user: {
_id: 2,
name: 'React Native',

34
 avatar: 'https://facebook.github.io/
react/img/logo_og.png',
},
image: 'https://facebook.github.io/
react/img/logo_og.png',
// Any additional custom parame-
ters are passed through
}
here user is an object sending the messages: { _id, name, avatar }
CreatedAt tells the time at which message was created .

API Calling
The API calling here is done using dialogFlow.

Dialogflow
The Dialogflow is a platform developed by Google to give users new ways to interact with their
product by building engaging voice and text-based conversational interfaces powered by AI. It
Connect with users on website, mobile app, the Google Assistant, Amazon Alexa, Facebook Mes-
senger, and other popular platforms and devices.
It has the following features:
1.Powered by Google's machine learning
Dialogflow incorporates Google's machine learning expertise and products such as Google Cloud
Speech-to-Text.
2.Built on Google infrastructure

35
 Dialogflow is backed by Google and runs on Google Cloud Platform, letting you scale to hundreds
of millions of users

Optimised for the Google Assistant

Dialogflow is the most widely used tool to build Actions for more than 400M+ Google Assistant
devices.
Dialogflow is user-friendly, intuitive, and just makes sense.

Its natural language processing (NLP) is the best .

Working of Dialogflow
The process a Dialogflow agent follows from invocation to fulfillment is similar to someone an-
swering a question, with some liberties taken of course. In the example scenario below, the same
question is being asked, but we compare the "human to human" interaction with a conversation with
an Dialogflow agent.
Welcome

Bill's friend Harry wants to ask

him a question. So as not to be
rude, Harry says "Hello" to Bill first.

Invocation

36
 In order to start a conversation with an agent, the user needs to invoke the agent. A user does this
by asking to speak with the agent in a manner specified by the agent's developer.
Request

Harry asks Bill "What's the weather supposed to be like in San Francisco tomorrow?" Because Bill
is familiar with the city and the concept of weather, he knows what Harry is asking for.

Intent

37
 A user asks the agent "What's the weather supposed to be like in San Francisco tomorrow?" In Di-
alogflow, an intent houses elements and logic to parse information from the user and answer their
requests.

Training phase

38
 For the agent to under- stand the question, it
needs examples of how the same question can be
asked in different ways. Developers add these
permutations to the Training Phrases section
of the intent. The more variations added to the intent, the better the agent will comprehend the user.

Entities



The Dialogflow agent needs to know what information is useful for answering the user's request.
These pieces of data are called entities. Entities like time, date, and numbers are covered by
system entities. Other entities, like weather conditions or seasonal clothing, need to be defined by
the developer so they can be recognized as an important part of the question.

Fulfillment

39
 Bill gets what information he needs.
For Andreea we have created a agent called chatbotApp.
1.Building Agent through Dialogflow
A Dialogflow agent represents the conversational interface of your application, device, or bot. To
create an agent:
If you don't already have a Dialogflow account, sign up. If you have an account, login.
1.Click on Create Agent in the left navigation and fill in the fields.
2. Click the Save button.

Fig 4.14 DialogFlow

2.Create an intent
An intent maps what a user says with what your agent does. This first intent will cover greeting
Andreea .
The name for intent is “name”.

40
 Since you're creating a chatting agent, we want to include questions about how user greets An-
dreea. The more examples we provide, the more ways a user can ask a question and the agent will
understand.
examples:
• Hello Andreea.
• Hi Andreea.
• What can i call you ?
• What is your name?

41
 Fig 4.15 DialogFlow Intent

3. Add responses
Now add basic responses to the intent so the agent doesn't just sit there in awkward silence. As
mentioned before, responses added to an intent don't use external information. So this will only ad-
dress the information the agent gathered from the user's request.

In the same way you entered the Training Phrases, add the lines of text below in the Response
section.Once you're done, click the Save button.

• my name is Andreea!!
• You can call me Andreea.

4.Try it out
Back in the console on the right, enter the same request or enter a new one. You should see the fol-
lowing data in the console fields:
• Response - shows an appropriate response from the ones provided
• The response chosen is based off of the values you provide in the query (e.g. By providing only

the date, the agent should respond with the option that only includes the date)
• Intent - weather again a successful trigger of the intent
• Parameter - the values you provided in your query, should be reflected in the appropriate re-

sponse

42
 Fig 4.16 DialogFlow Tryout

5.Adding Small Talk feature to Agent

what is Small Talk
Dialogflow includes an optional feature called Small Talk, which is used to provide responses to
casual conversation. This feature can greatly improve a user's experience when talking to your
agent.
“Small Talk” allows you to easily import a lot of predefined answers for simple questions and
phrases like “Hi!”, “How are you?”, “Are you robot?”, “What’s your hobby?”, “How old are you?”
and many-many more (about one hundred actually).
Also one can easily change responses to the questions.
To customize Small Talk responses one can easily rewrite default responses using api.ai UI.
What Problems we Faced With Small Talk on a Real Project
1. You can’t customize every response.

43
 Fig 4.17 DialogFlow Small Talk
2. You can’t train Small Talk.

Enabling Small Talk

By clicking on the switch to Enable one can enable Small Talk.
Also Small Talk can be customized to fit branding or product needs. Each response category is
ogranized in folders.
Clicking on one of these folders will open the list of responses and one can enter customized an-
swers to the related questions.
Andreea uses Small Talk.

44
6. ChatbotApp Agent Created
By following these steps agent was sucessfully created.
Saving the agent will save all the changes to cloud .
The final agent looks like this.
Now using this agent we can do API calling and get responses for the request fired.

Fig 4.18 ChatbotApp Created

45
API Reference

Base URL
All the URLs referenced in the documentation have the following base:
https://api.dialogflow.com/v1/
Authentication
Each API request requires authentication to identify the agent that is responsible for making the re-
quest. Authentication is provided through an access token.
There are two access tokens for each agent. The developer access token is used for managing enti-
ties and intents, and the client access token is used for making queries. The client access token may
not be as secure because it may be stored as part of the app, and it may potentially be discovered.

Fig 4.19 DialogFlow API Keys

46
Using Access Tokens
For each API request, include this HTTP header:
Authorization with the value Bearer {access_token}.

Query

GET /query
Takes parameters or event name provided in URL and returns response as JSON.

GET /query sample

HTTP

GET https://api.dialogflow.com/v1/query?
v=20150910&contexts=shop&lang=en&query=apple&sessionId=12345&timezone=America/
New_York
Headers:
Authorisation: Bearer YOUR_CLIENT_ACCESS_TOKEN



POST /query
Takes parameters or event name in JSON format and returns response as JSON.
POST /query sample

HTTP
POST https://api.dialogflow.com/v1/query?v=20150910

Headers:
Authorization: Bearer YOUR_CLIENT_ACCESS_TOKEN
Content-Type: application/json

POST body:

47
 {
"contexts": [
"shop"
],
"lang": "en",
"query": "I need apples",
"sessionId": "12345",
"timezone": "America/New_York"
}



API Reference in Andreea

Fig 4.20 API calling

it uses a get method to make request.

48
Networking in React - Using Fetch
React Native provides the Fetch API for your networking needs. Fetch will seem familiar to XML-
HttpRequest or other networking APIs before.
1. In order to fetch content from an arbitrary URL, just pass the URL to fetch:
fetch('https:/url');

2.Fetch also takes an optional second argument that allows to customize the HTTP request.
Example.
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: { Accept: 'application/json', 'Content-Type': 'application/json', },
body: JSON.stringify({ firstParam: 'yourValue', secondParam:
'yourOtherValue', }), });

3.Handling the response

Networking is an inherently asynchronous operation. Fetch methods will return a Promise that
makes it straightforward to write code that works in an asynchronous manner:
Example
function getMoviesFromApiAsync() { return fetch('https://facebook.github.io/reactnative/movies.j-
son')
.then((response) => response.json()) .then((responseJson) => { return
responseJson.movies; })
.catch((error) => { console.error(error); }); }

Networking in Andreea
Building React-Native Project for production
step1 .... Installing dependencies
Building will require following dependencies:
1.Node
2.The React Native CLI
3.Java Development Kit
4.Android development environment
5.Watchman (optional)

49
 Fig 4.21 Networking in Andreea

step2... Ejecting from Create React Native App

"Ejecting" is the process of setting up your own custom builds for your CRNA app. It can be neces-
sary to do if you have needs that aren't covered by CRNA, but it is not reversible.
Reasons for Ejecting:
• want to include a library which uses react-native link
• want to write own native code for the app
• want to build the app to publish to the App Store or Play Store

Eject using this command :

npm run eject
step 3...Generating Signed APK
Android requires that all apps be digitally signed with a certificate before they can be installed, so
to distribute your Android application via Google Play store, you'll need to generate a signed release
APK. The Signing Your Applications page on Android Developers documentation describes the top-
ic in detail.
Using this one generates the keystore as a file called my-release-key.keystore.
The keystore contains a single key, valid for 10000 days. The alias is a name that you will use later
when signing your app, so remember to take note of the alias.
Step4.. Setting up gradle variables
step5..Adding signing config to your app's gradle config

50
step 6... Generating the release APK
Simply run the following in a terminal:
$ cd android && ./gradlew assembleRelease

Gradle's assembleRelease will bundle all the JavaScript needed to run your app into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready
to be distributed.

Step7.. Testing the release build of your app

Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall
any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release

51
 Chapter 5
Project Screenshots

Fig 5.1 Shreenshot Of Andreea

52
 CHAPTER 6
PROJECT SUMMARY AND CONCLUSION

The object of this project is to develop a computer program that can convincingly simulate how a
human would behave as a conversational partner. That can entertain people 24/7.
Andreea – a chatty bot built on react-native is just like one of the hundreds of chatbot which have
today gained a lot of importance due to the vast servicies provided by them.
Chatbots have a very large future scope and utility and can make life easier when used wisely.

Our project is currently on track with the exception of a couple of problems that were encountered.
One is Andreea can only respond to certain requests and cannot answer all queries so efficiently as a
human can do and secondly it can only understand English.
It was a great learning experience while working on this project.

53
 CHAPTER 7
FUTURE SCOPE

Currently chatbots have limited language support. They do not support multiple lan-
guages, dialects and do not understand colloquial usage. Hence there is a great scope
for removing such language barriers in future chatbots. Also, AIML templates could
be improved to include more variations for the same input. Intelligent personal assis-
tants integrate various chatbot services into one single platform and pave the way for
a truly intelligent self-learning artificial entity.

54
 CHAPTER 8
BIBLIOGRAPHY
• https://github.com/FaridSafi/react-native-gifted-chat
• https://www.google.co.in/search?q=react-native&oq=react-native&aqs=chrome..
69i57j69i60l3j69i59j0.3132j0j7&sourceid=chrome&ie=UTF-8
• https://reactjs.org/
• https://pdfs.semanticscholar.org/
8e60/5c49d4a7cba9bf077d97b401ba78aafe693f.pdf
• https://dialogflow.com/docs/dialogs
• https://dialogflow.com/docs/reference/agent/
• https://chatbotsmagazine.com/the-complete-beginner-s-guide-to-
chatbots-8280b7b906ca

55