+ All Categories
Home > Technology > Front End Development - Location Based Chat Application

Front End Development - Location Based Chat Application

Date post: 09-Jan-2017
Category:
Upload: acadgild
View: 124 times
Download: 0 times
Share this document with a friend
14
acadgild.com LEARN.DO.EARN Location Based Chat Application
Transcript
Page 1: Front End Development - Location Based Chat Application

acadgild.comLEARN.DO.EARN

Location BasedChat

Application

Page 2: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 0

Table of Contents Introduction: ........................................................................................................................................... 1

Project Objectives: .................................................................................................................................. 1

Site User Roles: ....................................................................................................................................... 1

Functional Requirements per User Role: .............................................................................................. 1

Site Administrator ............................................................................................................................ 1

User: ................................................................................................................................................ 2

Product owner: ................................................................................................................................ 2

Design Specifications: .............................................................................................................................. 2

Project Feature List.................................................................................................................................. 3

High Level Features ............................................................................................................................. 3

Session Management ....................................................................................................................... 3

Integration with Google Maps.......................................................................................................... 3

Chat with the customers .................................................................................................................. 3

Storing the customer details ............................................................................................................ 3

Low Level Features .............................................................................................................................. 4

Backend Database ........................................................................................................................... 4

Frontend Design .............................................................................................................................. 4

Implement sample case study ................................................................................................................. 4

Instructions to Associates: ................................................................................................................... 4

Case Study Description: ....................................................................................................................... 4

High level design/Flow Diagram: .......................................................................................................... 6

Skeleton Code for Development .......................................................................................................... 7

Requirement 1: ................................................................................................................................ 8

Requirement 2: ................................................................................................................................ 9

Requirement 3: ................................................................................................................................ 9

Requirement 4: .............................................................................................................................. 10

Case Study Executive Summary ............................................................................................................. 11

Challenges ......................................................................................................................................... 11

How Product Helped.......................................................................................................................... 12

Results, Return on Investment and Future Plans ................................................................................ 12

Page 3: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 1

Introduction: Customers have always been the driving force of any business. It is of vital importance to have a great

relationship with them. Identifying a customer needs before they can reach the helpdesk for support

would improve this relationship. If the customer is serviced based on his/her location through a personal

chat, it would just add to the already existing relationship.

The application described in this document tries to address the specifications of a system that will enable

the customer relationship managers to interface with the customers through an online application and

depending on the location of the customer.

Project Objectives: Customer relationship managers in any business will be able to communicate with the customers

depending on their then location.

A web application to visualize the customer’s current location.

Identify the pages or products that the customer is currently viewing

Assist the customer by extending help in understanding the need of the customer and suggest

next steps.

Site User Roles: The Web application will consist of the following roles to enable better management and user

authorization:

1) Site Administrator

Responsible for maintaining updates to the web sites and admin level trouble shooting

2) Relationship Manager

Identify and connect with the customer. Extend support in the form an online chat.

3) Product Owner

Visualize the online customers on a Map and understand the support from the CRM team

dynamically.

Functional Requirements per User Role:

Site Administrator A site administrator is the person who maintains and manages the Web Site. In this role, the person is

primarily responsible for flawless functioning of the web site. Following is the list of activities that the site

administrator performs:

1) Run backups on databases

2) Maintain server logs

Page 4: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 2

3) Making sure high-availability of web site at all times

4) Configure load balancing

The above activities are a subset of the complete list of responsibilities for a person at this role. An

administrator might have to perform some of the ad-hoc activities based on the functioning of the

website.

User: A user of the website is the one who is benefitted by the use of the website. A user may be an individual

or an organization. This document assumes that the website will be used by an organization with per user

logins. The following are the list of activities that the user can perform on this website:

1) Able to login/logout to the website

2) Update his/her profile details

3) Change passwords

4) Identify the customers to connect based on their location

5) Able to connect to the customer over a chat interface

6) A manager (special user with the power to supervise) will be able to get workload reports

7) Able to redirect the conversation to the supervisor for further assistance

Product owner: A product owner is typically the sponsor for the project or a person from the senior management who

would like to understand the business impact of the product. He/she will primarily use the website for

better management purposes. Below is the list of activities that a person at this role should be able to

perform

1) Report the use of the website

2) Customer density per location

3) Track the daily customer connect

Some more tasks will be added to the above list as per the requirement.

Design Specifications: This section of the document describes the design details of the product with focus on the visual appeal

of the website.

As the description of the product states, this product is to visualize the customers on a Map with their

location and connect with them over a Chat interface, all built in a web application. Following are the

features that should be taken into account in terms of design for this product:

1) Able to behave predictably in all types of devices

2) A map interface to show the online customers

3) A list view to display the currently online customers

Page 5: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 3

Project Feature List This section is intended to describe the features that the targeted website will support. Additional features

could be added based on the requirements from the product owners.

High Level Features Below is the list of high level features that the product will support:

1) Session management

2) Integration with Google Maps to view the online customers

3) Chat with the customers

4) Store the details of the customer in a backend database

5) View reports on the daily inbound/outbound chat conversations

Session Management The users of the website must be able to login/logout of the session. Once a user is logged-in his/her

session will be monitored for various inputs until the session either times-out due to no activity or the

user manually logs-out.

The data that will be monitored will include, but not limited to, the number of customers he/she handles,

time to respond to an incoming chat, availability on the website etc. The captured data will help generate

reports for the purposes of improving the website, tracking the user performance etc.

Integration with Google Maps Since this website is based on identifying the customers based on their locations, the integration with

Google Maps is crucial to the website to better visualize the availability of the customers. For the users of

the website, this view will help pick a particular customer belonging to a specific geographic location and

connect with him. Retrieval of the data related to the location of the user is out-of-scope for the website

as irrespective where the data comes from the website will be able to display it on a Google Maps user

interface. This ability will make the website more generic.

For example, a shopping application can track the user’s location and store it in a data-store. This data

could be shared with the website and have it displayed on a web interface.

Chat with the customers Customers are the people who are interacting with a particular business website for their needs. Once the

customer accepts to share his/her location to the third-party website, it will be captured and sent to this

application. Once the data is populated, it will be displayed on a web interface and will allow the customer

relationship managers to connect with the customers based on their geographic location. The chat

interface is web driven.

Storing the customer details This website will have the ability to store the chat conversations, response times in the backend. This data

will be used for various reporting purposes.

Page 6: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 4

Low Level Features Following sections describe the low level features of the website including the technology stack that will

be used to cater to the need. Any further improvements to the website should be documented here

before implementing the changes to it.

Backend Database In order to store and retrieve the details of the users and customers, a central database is required in

order to persist the data generated. To enable quick deployment of the product and make it available in

no time, a database which primarily support NOSQL is required. This will also allow for adding more

columns to the database as and when required without many changes at DB level.

MongoDB is the chosen backed for this purpose. Its features like high availability, replication, load

balancing, schema less and its ability to handle GIS indexes will help the application run smoothly without

much of maintenance.

Frontend Design The product is to be made as much responsive as possible with the same features irrespective of the

device used to access it. Along with responsiveness, the website also has to feature a better user interface.

The website also has to be highly interactive. AngularJS and Bootstrap are the chosen frameworks to

implement the frontend of the website. The MVC feature of the website makes it easier to maintain the

website and at the same time achieve a greater functionality with lesser code. The dependency injection

cycle of AngularJS makes the code highly reusable. The responsiveness of the website is driven by the CSS

implemented in it. Bootstrap comes highly handy to achieve this requirement. It has a lot of built-in CSS

classes that could be used to design the most beautiful user interfaces possible and at the same time

making them responsive.

Implement sample case study

Instructions to Associates:

1. Write the code where instructed as per the requirement. Try not to modify the existing code. 2. Make sure to use the components already defined rather than creating the same components

once again. 3. Work with the code present in the “public” folder of the package. Do not edit the files in the

parent folders, unless instructed to do so. 4. Keep the MongoDB server up and running before beginning to code the application.

Case Study Description: Due to the high availability of applications in the form of web or mobile applications, customers are

scattered all over the world. Identifying where the customer is from and providing a better online support

turns out to be the core of CRM.

Challenge? How would my application know where the customer is from? How will the relationship

managers connect with a specific customer to assist him further?

Page 7: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 5

The product addresses the above challenges in the most advanced way possible. A Google Maps interface

will identify all the online customers. A Customer relationship manager will be able to connect with a

specific customer directly. This does really help take the CRM to the next level, and thus, gaining customer

confidence.

Start

User Signs up for the

application

Validation success?

Save user details to Database

Redirect User to the

Application Page

End

Page 8: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 6

High level design/Flow Diagram:

Start

User Signs up for the

application

Validation success?

Save user details to Database

Redirect User to the

Application Page

User accepts to share the location

End

Show the location of the user on a Map

Allow user to view the list of register users

User selects the target user to chat

with

Target User Online?

Allow users to communicate with

each other by exchanging messages

Allow user to leave a offline message to the target user.

End

Achieve all the below said requirements using this high level design.

Page 9: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 7

Skeleton Code for Development Below is the folder view of the code

The following table describes the use of each of the folders shown above:

App Contains server related code to initialize the application

Config Contains all the configuration files for the application to work

Node_modules Installed by running “npm install” command on the client machine. This will contain all the dependencies.

Public This folder will contain all the application code like CSS, JS, HTML etc. Controllers, services, directives, filters will also be defined here.

Public Folder:

Page 10: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 8

Requirement 1:

Problem

Statement

.When the user sign-in successfully, he/she will be asked to share the location so as

to enable other users to identify them. If the user denies sharing the location, an

error needs to be show to him by setting error object on scope.

Design

Consideration

Do not alert messages to the user as it will be a bad design decision. Rather append

the error message to a component on the web –page itself.

Business

Rules &

Process

User has to share his location to be able to chat with the other available users. When

the user rejects the browser pop-up to never show the location he/she should not be

allowed to chat with the other users.

Connected

code in

skeleton

Add the error handling mechanism in the file User.js in the folder “public\js\controllers”

on the line number 134.

UI Design: Build the following screens.

Page 11: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 9

Requirement 2: Problem

Statement

.Allow newly entering users to sign-up for using the application.

Design

Consideration

Design a web-form by using the Bootstrap classes available for vertical forms. Make

the UI responsive to changes in device dimension

Business

Rules &

Process

A user will only be allowed to enter the application when he is registered.

Anonymous registers should not be allowed to enter the system without registering

first.

Connected

code in

skeleton

Create a new HTML page called “signup.html” in the folder “public\views” and add all

the required fields.

UI Design: Build the following screens.

Requirement 3: Problem

Statement

.Once the user is successfully logged-in and accepts to share his/her location, the

user must be able to view all the users registered with the application. Design a table

layout using BootStrap table class to view the available users. Also, to make it easier

for the user to search the users, provide him/her a textbox which will be used to

narrow down the search results as the user starts typing into the input field.

Page 12: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 10

Design

Consideration

Make the view look dynamic which will be updated as and when the user starts to

fill the input to look for a particular individual in the users table. The search should

be performed on the “Name” of the user only.

Business

Rules &

Process

N/A

Connected

code in

skeleton

Create a file called “Users.html” in the folder public\views\User. Add the BootStrap

table to display the registered users. Add an input field to the page and use this as an

input to the AngularJS Filter.

UI Design: Build the following screens.

Requirement 4: Problem

Statement

.Since this is essentially a Chat application which relies on socket communication,

the user must be able to send messages to both the online and offline users. If the

user is offline the logged-in user must be able to send an offline-message to him/her.

To provide this feature, provide the logged-in user a UI which implements

BootStrap Modal. This modal will consist of a textbox to enter the message and a

send button to send the message. This will also consist of a cancel button to close

the Modal.

Page 13: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 11

Design

Consideration

Make sure to layout the components in the Modal properly. The UI should not be

disturbed when viewed on a screen of lesser width.

Business

Rules &

Process

N/A

Connected

code in

skeleton

Add a Modal to the User.html page created in the previous requirement. The modal

should be shown when the user clicks on the “Offline” button on the same page.

UI Design: Build the following screens.

Case Study Executive Summary

Identify and connect with customers depending on their location for a better customer relationship

management.

Challenges Due to the high availability of applications in the form of web or mobile applications, customers are

scattered all over the world. Identifying where the customer is from and providing a better online

support turns out to be the core of CRM.

Challenge? How would my application know where the customer is from? How will the relationship

managers connect with a specific customer to assist him further?

Page 14: Front End Development - Location Based Chat Application

LOCATION BASED CHAT APPLICATION | ACADGILD

pg. 12

How Product Helped The product addresses the above challenges in the most advanced way possible. A Google Maps

interface will identify all the online customers. A Customer relationship manager will be able to

connect with a specific customer directly. This does really help take the CRM to the next level, and

thus, gaining customer confidence.

Results, Return on Investment and Future Plans Customer relationship turns out to be the core of any firm. Better the CRM, better the revenue. It would

be very appealing to reach customers based on their location and based on their viewing patterns.

Currently, the product lets the relationship managers to identify and connect with the customers

depending on their location. In future, the location based results would be filtered depending on the

pattern of customer’s web page visits or produce purchases.


Recommended