politecnico di milano como campus - politesi.polimi.it · in questa tesi, discutiamo sul modo in...

POLITECNICO DI MILANO

COMO CAMPUS

Master of Science

In

COMPUTER SCIENCE AND ENGINEERING

GEOGRAPHIC LOCATION BASED SEARCH

APPLICATION

Prof. Sara Comai

Department of Electronics, Information and Bioengineering

Master Graduation Thesis By

Rishabh Jain

Academic year 2016/2017

Politecnico Di Milano – Computer Science and Engineering

ABSTRACT

Search Algorithms for websites have been evolving since the time when dynamic

websites came into existence, which collect and store data. It has now become a

fundamental procedure in the development of a website, to implement a good search

algorithm which helps the users to find relevant results. For websites with content

dealing with geographic locations, a search algorithm which uses the geographic

coordinate system to retrieve data is advantageous, as it requires the query to be

‘where’ the user is searching, rather than ‘what’ the user is searching for.

Geographic Location based search now plays a key role in helping the users find

results which are relevant to them, as considering the location for querying will make

the search very specific to the area the user is searching in. In turn, this approach also

requires the data to be stored in way that every piece of information is having a pair of

coordinates as default property.

In this thesis, we discuss about the how the concept of location based search algorithm

can be used for Web Applications, also discussed are the components and frameworks

used for its implementation with the help of the work ‘foody experience’ which is a

platform that connects hosts from various cities to travelers from all over the world.

1


SOMMARIO

Gli algoritmi di ricerca per i siti web sono in evoluzione dal momento in cui sono stati

creati siti web dinamici che raccolgono e memorizzano i dati. È ormai diventata una

procedura fondamentale nello sviluppo di un sito web, per implementare un buon

algoritmo di ricerca che aiuta gli utenti a trovare risultati rilevanti. Per i siti web con

contenuti che si occupano di posizioni geografiche, un algoritmo di ricerca che utilizza

il sistema di coordinate geografiche per recuperare i dati è vantaggioso in quanto

invece che restituire "cosa" l'utente sta cercando,la query restituisce "dove" l'utente sta

cercando.

La ricerca basata sulla localizzazione geografica svolge ora un ruolo fondamentale per

aiutare gli utenti a trovare risultati a loro rilevanti, considerando che la posizione della

ricerca sarà molto specifica per l'area interessata. A sua volta, questo approccio

richiede che i dati siano memorizzati in modo che ogni singola informazione sia

composta da una coppia di coordinate come valori predefiniti.

In questa tesi, discutiamo sul modo in cui il concetto di algoritmo di ricerca basata

sulla localizzazione può essere utilizzato per le applicazioni Web. Sono anche discussi

i componenti e le strutture utilizzate per la sua implementazione con l'aiuto di 'foody

experience', una piattaforma che collega persone di varie città a viaggiatori

provenienti da tutto il mondo.

2


ACKNOWLEDGEMENT

It has been a journey like no other, the experiences I had are there for me to treasure

throughout my life.

First, I would like to convey my deep gratitude to my supervisor Prof. Sara Comai,

Department of Electronics, Information and Bioengineering, Politecnico Di Milano for

being the guiding light for me throughout the work. I was obliged to avail her insight

and knowledge about all the various doubts and questions that I had throughout the

work.

I would like to express my sincere thanks to the team at Foody S.r.l for giving me the

opportunity to work with them. I could use my expertise, learn, and explore new

horizons with them and that is something which has made it one of the best working

experience I have had.

I would like to take opportunity to thank all my friends and my family for believing in

me and being there always to inspire and encourage me to achieve my goals in life.

3


CONTENTS

I. ABSTRACT……………………………………………………...... 1

II. SOMMARIO………………………………………………………. 2

III. ACKNOWLEDGEMENT…………………………………………. 3 1. INTRODUCTION

1.1 CONTEXT……………………………………………………... 5 1.2 PROBLEM STATEMENT…………………………….............. 7

1.3 IDEA OF THE PROJECT…………………………………….. 8 1.4 GOALS………………………………………………………... 9 1.5 PROPOSED SOLUTION…………………………………....... 9 1.6 THESIS STRUCTURE…………………………….................. 9

2. BACKGROUND 2.1 COMPONENTS AND METHODOLOGIES............................ 10 2.2 WEB DEVELOPMENT STACK…………….......................... 14

3. FOODY WEB APPLICATION 3.1 REQUIREMENTS…………………………………………….. 16 3.2 CONCEPTUAL MODEL……………………………………... 16 3.3 DESIGN AND ARCHITECTURE...…………………………... 18

4. IMPLEMENTATION 4.1 FRONTEND DEVELOPMENT ………………………………. 27 4.2 REST API DEVELOPMENT ………………………………..... 38

5. CONCLUSION AND FUTURE WORK……………………………. 45 6. REFERENCE……………………………………………………....... 46

4


1. INTRODUCTION

1.1 Context

Since the initial days when web pages were served as static documents, the web has

evolved a lot over the time. Having an interactive experience was difficult to achieve,

the pages required time to refresh as they were always sent to and forth from a server.

One of the most significant advancement happened with the introduction of

JavaScript, enabling client side scripting which facilitated an improved user

experience with the use of dynamic elements, faster processing of data as it was not

always sent back to the server.

Embedding JavaScript into web pages allowed the programmers and designers to

build numerous types of user experiences. It provided an application programming

interface which allowed the manipulation of different types of data. Thus, along with

HTML and CSS, JavaScript became a crucial ingredient for building sites for the web.

Any revolutionary advancement in technology is embarked by involving the basic

concepts and introducing it with a phenomenon, which changes the way in which

people perceive it. In the case of web, it happened with the introduction of Ajax which

introduced a new approach to Web Applications [1]. Before web applications became

prominent a rich user experience was only possible when using desktop applications.

Ajax is based on asynchronous interaction pattern which is different from the classical

synchronous interaction. Http requests are handled by Ajax engine, and only when any

data is to be sent or received from the server an asynchronous request is made. Ajax

gives flexibility to designers, which enables them to decouple client side and server

side. Instead of the JavaScript directly making the requests to server, there is

XMLHttpRequest object which is used to make requests. All these requests are made

in the background of the webpage and the user does not experience any kind of

interruptions to carry out any other operation. Ajax incorporates the DOM to serve and

manipulate content on the web page. One of the main reasons for the widespread

adaptability of this technique, is the reason that it is independent of how the server

software is implemented. The engine acts as a bridge between the backend and the

front-end of the application, by handling all the user requests to the server whenever

they are made.

5


Figure 1.1 Interaction pattern of web applications [2]

The above figure shows the two models which web applications follow, it is clearly

seen that with the asynchronous model there is a possibility of continuous user

interaction enabled by client-side processing. The data transmissions for server-side

processing happen in the background while there is no halt to the user activity.

Web Applications can be defined as a program that resides in a server and is

accessible via a network connection which is established using HTTP. To differentiate

between them, we can say that websites serve content, and on the other hand web app

implement functionalities. Wikipedia is a website as it online encyclopedia which

serves articles, whereas Facebook is a social networking web app. A web browser is

the only piece of software that needs to be installed to run a web application. But,

there is also a possibility that some parts are also downloaded to the user’s system,

and data is also available for local access, anyhow even in that case the operations are

always carried out remotely.

The design of a web application is done keeping in mind that, it is supposed to run on

any browser regardless of the device or operating system it will be running in. They

are adaptable to any type of environment they are running in, which makes it possible

to present the same kind of user experience everywhere. In the case of mobile devices,

performance has been a major characteristic which is used to understand how good a

web app is against a native app installed in the phone.

6


Today, the gap has significantly reduced between the performances levels, for

example with the availability of in-browser code which utilizes the GPU, it is faster to

render 3D graphics and play animations in the app. Further, we will describe some

types of web applications based on the way their usability and the components which

are used to design them.

1.2 Problem Statement

The present-day travel sector runs on internet. Its growth and outreach are heavily

dependent on the availability of information on a tourist's fingertips. From the timings

to the location of an event, a historic location, the nearby attractions all these form the

basic needs a tourist looks for while visiting a country, state or town. This kind of

information helps the travel businesses display a wide range of customer-based

information through online portals. The following graph depicts the dependence of the

travel sector on online based advertising.

Online content is a major boost for business in Greece, Italy and Spain with online

content supporting 10%, 26% and 43% of tourist presence. This leaves us with a

question if the online presence of tourism is availed at a better level will the tourism

segment improve considerably? The presence of an online portal will not only benefit

big time tourism establishments but also allow smaller establishments to get a better

foothold in the market. Cultural tourism is a huge segment that can be easily tapped

using online presence, with each establishment small or big portraying the cultural

backing that goes into making their establishment a successful one.

UNWTO [3] forecasts that the number of international arrivals worldwide will

continue to increase from 2010 to 2030 by an average of 3% per year. In absolute

numbers, these arrivals are expected to reach almost 2 billion by 2030 [4]. Going by

these statistics only we can say safely the presence of online advertising will result in

a steady growth.

7


Any planning to an exotic location involves searching for the most interesting places,

the cultural heritage presented by that place, and to top it all the food that is available.

The food becomes a major part of the planning as it forms the base of our planning.

The exotic dishes that are only served in certain places are worth the visit. This and

doing adventurous trips is an added pleasure.

The authenticity of the food attracts a lot of attention. A certain dish grown from the

spices and vegetables in that place added with cultural history that brought about the

existence of the dish adds an exciting flavour to the dish.

Imagine a new idea where an entire package is designed with the food and exotic

locations in mind added to the security and comfort provided in these areas. These

ideas give the tourist a sense of uniqueness.

1.3 IDEA OF THE PROJECT

Italy is one of the most visited countries in the world and people mainly visit for the

rich art, history, fashion and food. It is the country having the most number of world

heritage sites. Because of the same reason it had around 392.8 million tourists visiting

in the year 2015 [5].

Italy's one of the most profitable industrial sectors is tourism, with estimated revenue

of €189.1 billion [6]. Food and wine based tourism is still a new thing in the online

travel scene. It is something which will allow the people to directly put up their offers

and give them a personal space on the internet which is accessible to anyone in the

world.

The era of online travel booking became popular around 10 years back, since then it

has become a normal thing to go online and search for places and travel packages.

Even in this sector there is a need to create something new and unique which gives an

edge over others by offering that cannot be found anywhere else.

Foody web app allows users to search for the desired destination and it gives out the

possible experiences which they can book. It also has the functionality for people

interested in offering experiences to put it up so that interested people will book and

enjoy it.

The idea of Foody is like Airbnb, which is a website enabling people to lease or rent

short-term lodging. But, it is concentrated more on offering unique experiences and

making the whole process quick and simple to do. It is aimed at travellers looking out

for something more than just wandering around a place, by being in touch with a

person who is from the place, who has things to share which cannot be known and

understood in any other way.

8

Politecnico Di Milano – Computer Science and Engineering 1.4. GOALS

The motive behind this application is to promote the local culture of places and

making it more known to the world. With this approach travelers will be able to

experience the real cuisine of the place and be able to relish it. Also, it is to promote

the places not just which are in the city but also around it, places which still have the

traditional approach to food which has not changed since ages. With providing this

kind of opportunity, it gives the traveler a chance to have an experience like no other,

which will be one to remember for a lifetime.

1.5. Proposed Solution

The proposed web application is for Foody, which connects local people who offer

food and wine activities to travelers from all over the world. The application will

allow travelers looking for the most authentic food and wine experiences, to search for

the available experiences in a city which they can book giving them the unique

opportunity to live in a city and enjoy the treats of the local cuisine.

The application has a search functionality which allows users to search experiences

which are available in a city where they wish to travel to. The search operation not

just searches for experiences in a city but also in the region around the city.

The application also allows users to pay and book the selected experiences.

1.6. Thesis Structure

The chapters are organized as follows:

• In Chapter 2, we introduce the previous works concerning the thesis work and the

relevant technologies used.

• In Chapter 3, we explain about the ideas and concepts, goals, requirements and

design of the web application.

• In Chapter 4, we focus on implementation and details of the application.

• In Chapter 5, the test results and analysis of the application are discussed.

• In Chapter 6, we report the conclusions about the work and the

possible improvements that can be done in the future.

9


2. BACKGROUND

2.1 COMPONENTS AND METHODOLOGIES

In this section, we will talk about the various techniques and concepts which are

utilized or referred to implement the application. They are presented with conceptual

information regarding each one of them. They are very crucial for the functionality

which is realized as these works will be eminent for shaping the various aspects of the

application.

2.1.1 INDEXING

A database index is a data structure that improves the speed of data retrieval

operations on a database table at the cost of slower writes and increased storage space.

Indices can be created using one or more columns of database table, providing the

basis for both rapid random and efficient access of ordered record.

• B-TREE INDEX

The B-tree algorithm [7] minimizes the number of times a medium must be accessed to

locate a desired record, thereby speeding up the process. B-trees are preferred when

decision points, called nodes, are on hard disk rather than in random-access memory

(RAM). It takes thousands of times longer to access a data element from hard disk as

compared with accessing it from RAM, because a disk drive has mechanical parts,

which read and write data far more slowly than purely electronic media. B-trees save

time by using nodes with many branches (called children), compared with binary

trees, in which each node has only two children. When there are many children per

node, a record can be found by passing through fewer nodes than if there are two

children per node.

A B-tree index can be used for column comparisons in expressions that use the =, >,

>=, <, <=, or BETWEEN operators. The index also can be used for LIKE comparisons

if the argument to LIKE is a constant string that does not start with a wildcard

character.

• HASH INDEX

Hash indexes [8] (user controlled) are used for exact lookups. For each column, a hash

is calculated and then it’s used for lookups. Let’s say that a hash for value

‘mylongstring’ is ‘1234’. Hash will be stored as a value along with a pointer to the

row.

10


They are used only for equality comparisons that use the = or <=> operators (but are

very fast). They are not used for comparison operators such as < that find a range of

values. Systems that rely on this type of single-value lookup are known as “key-value

stores”; to use MySQL for such applications, use hash indexes wherever possible. The

optimizer cannot use a hash index to speed up ORDER BY operations. Only whole

keys can be used to search for a row.

2.1.2 MVC ARCHITECTURE

MVC architecture [9] divides the system in three different layers that are in charge of

interface control logic and data access, this facilitates the maintenance and evolution

of systems according to the independence of the present classes in each layer.

• Models

Models represent knowledge. A model could be a single object (rather uninteresting),

or it could be some structure of objects.

There should be a one-to-one correspondence between the model and its parts on the

one hand, and the represented world as perceived by the owner of the model on the

other hand.

• Views

A view is a (visual) representation of its model. It would ordinarily highlight certain

attributes of the model and suppress others. It is thus acting as a presentation filter.

A view is attached to its model (or model part) and gets the data necessary for the

presentation from the model by asking questions. It may also update the model by

sending appropriate messages. All these questions and messages have to be in the

terminology of the model, the view will therefore have to know the semantics of the

attributes of the model it represents.

• Controllers

A controller is the link between a user and the system. It provides the user with input

by arranging for relevant views to present themselves in appropriate places on the

screen. It provides means for user output by presenting the user with menus or other

means of giving commands and data. The controller receives such user output,

translates it into the appropriate messages and pass these messages on to one or more

of the views.

11


2.1.3 REST API

REST APIs [10] Web services [11] are purpose-built web servers that support the needs

of a site or any other application. Client programs use application programming

interfaces (APIs) to communicate with web services. Generally speaking, an API

exposes a set of data and functions so facilitate interactions between computer

programs and allow them to exchange information. A Web API is therefore a web

service, directly listening and responding to client requests. The REST architectural

style is commonly applied to the design of APIs for modem web services. A Web API

conforming to the REST architectural style is a REST API.

Having a REST API makes a web service "RESTful." A REST API consists of an

assembly of interlinked resources. This set of resources is known as the REST API's

resource model. Well-designed REST APIs can attract clients and developers to use

web services. In today's open market where rival web services are competing for

attention, an aesthetically pleasing REST API design is a must -have feature.

2.1.4 JSON

JSON (JavaScript Object Notation) [12] is a lightweight data-interchange format. It is

easy for humans to read and write. It is easy for machines to parse and generate. It is

based on a subset of the JavaScript. JSON is built on two structures:

A collection of name/value pairs. In various languages, this is realized as an object,

record, struct, dictionary, hash table, keyed list, or associative array.

An ordered list of values. In most languages, this is realized as an array, vector, list, or

sequence.

These are universal data structures. Virtually all modern programming languages

support them in one form or another. It makes sense that a data format that is

interchangeable with programming languages also be based on these structures.

2.1.5 JWT

JWT are an important piece in ensuring trust and security in your application. JWT [13]

allow claims, such as user data, to be represented in a secure manner. Simply put, a

JWT is just a string with the following format: header.payload.signature

The user first signs into the authentication server using the authentication server’s

Login system (e.g. username and password, Facebook login, Google login, etc). The

authentication server then creates the JWT and sends it to the user. When the user

makes API calls to the application, the user passes the JWT along with the API call.

12


In this setup, the application server would be configured to verify that the incoming

JWT are created by the authentication server (the verification process will be

explained in more detail later). So, when the user makes API calls with the attached

JWT, the application can use the JWT to verify that the API call is coming from an

authenticated user.

It is important to understand that the purpose of using JWT is NOT to hide or obscure

data in any way. The reason why JWT are used is to prove that the sent data was

created by an authentic source.

• Header

The header typically consists of two parts: the type of the token, which is JWT, and

the hashing algorithm being used, such as HMAC SHA256 or RSA.

• Payload

The second part of the token is the payload, which contains the claims. Claims are

statements about an entity (typically, the user) and additional metadata.

• Signature

To create the signature part you have to take the encoded header, the encoded payload,

a secret, the algorithm specified in the header, and sign that.

13


2.1.6 CORS

Cross-Origin Resource Sharing (CORS) [14] is a mechanism that uses additional HTTP

headers to let a user agent gain permission to access selected resources from a server

on a different origin (domain) than the site currently in use. A user agent makes a

cross-origin HTTP request when it requests a resource from a different domain,

protocol, or port than the one from which the current document originated.

An example of a cross-origin request: A HTML page served from http://domain-a.com

makes an <img> src request for http://domain-b.com/image.jpg. Many pages on the

web today load resources like CSS stylesheets, images, and scripts from separate

domains, such as content delivery networks (CDNs).

The CORS mechanism supports secure cross-domain requests and data transfers

between browsers and web servers. Modern browsers use CORS in an API container

such as XMLHttpRequest or Fetch to help mitigate the risks of cross-origin HTTP

requests.

2.1.7 DBAL

The Doctrine database abstraction & access layer (DBAL) [15] offers a lightweight and

thin runtime layer around a PDO-like API and a lot of additional, horizontal features

like database schema introspection and manipulation through an OO API.

The fact that the Doctrine DBAL abstracts the concrete PDO API away through the

use of interfaces that closely resemble the existing PDO API makes it possible to

implement custom drivers that may use existing native or self-made APIs.

2.2. WEB DEVELOPMENT STACK

In this section we would compare how the web development stack has evolved in the

course of time first we talk about the way websites were created and served to be

accessed by the browsers. Then, we talk about how web development has become a

multi layered development process and the changes compared to the previous

approach. We also talk about the way the design process has grown, providing various

approaches to go about developing a web application.

2.2.1 Previous Approach

In the earlier days the web servers processed requests from web clients and sent back

information in the form of web pages. These are stored in a directory structure, where

the links serve as paths to the specific pages.

14


Mainly these pages were static web pages and were used solely for the purpose of

showing combination of text and media. There was no scope for the concept of

dynamic content at that point of time, as there was no concept of storing user

information on the server. Over the course of time, databases became popular and user

specific dynamic content was served from the server. The layers for this

implementation involves the service layer, database layer, the business layer and the

presentation layer. The business layer and the presentation layer does not have a much

of a distinction as they are intertwined together. In this style there is a need to

maintain user session on the server and all the time there needs to be checks done that

no duplicate data is saved, no false information is saved in the session. This way of

development has its own advantages and disadvantages as the application resides at a

single source.

2.2.2 New Approach

The new approach is dedicated towards developing web applications which are having

functionalities which are dependent on a web service and also have independent

workflows which do not require any communication to the web service. It is a model

driven approach where the same design is implemented in multiple different forms

across various layers. Now, there is no requirement for browser specific development

as with the introduction of HTML5 and its acceptance across all modern browsers.

There is no need to consider which device the user is using to access the application.

The MVC approach for development helps to concentrate on each aspect of the

application separately. With frameworks available for front end development, there

are systematic ways of creating application’s structure, which reflects the design.

There are tools available which help to manage the third party packages installed, also

which build the application. With the availability of Unit testing tools it is possible to

create unit tests even for the front end part of the application, this way giving the

possibility of following a development cycle similar to the one used for back end

development.

The design of such application requires gathering all the information regarding the

various parts of the application. Then using this design we can create workflows to be

for each types of users, the operations which are possible for them and all the possible

scenarios. The implementation is done in a way that even though they are the part of

the same workflow, they have the capability to run independent of each other.

15


3. FOODY WEB APPLICATION

3.1. REQUIREMENTS

The main requirements of the application are as follows.

• To allow users to search with a location name, it also necessary to have further

information about that location’s geo location. Using Google’s places library in the

maps API it is easier to search and get a place’s information which will be utilized

to generate search results.

• A storage service which helps the creation and retrieval of images which are

uploaded by the users. This can be achieved using S3 service of AWS.

• A computing service provides capacity in the cloud. To give a stable and

continuous service to the users. We can utilize Amazon EC2 to create virtual

machines.

3.2 CONCEPTUAL MODEL

Figure 3.1 Conceptual Application Model

As shown in the figure 3.1, the application is constituted of two major sides of work

which can be named as frontend and backend of the application. The frontend

provides a user interface which is adaptive to any device which is used to access the

website. Presenting this way, it gives a possibility to access the website from any type

of device and have a user experience which is same regardless of any device which is

used to access.

16


The user accesses the website and has the possibility to register to the website using

social login which also helps in having user data from a pre-verified source. This can

be done by implementing the API provided by the social platforms and using them to

enable the 3rd party login which is quicker than filling up the form and providing data

which is required by the website. From the social login, all the necessary data is taken

and used to verify, register a user to the website. Though this requires extra

implementation and creates a dependency for the application, but helps in making the

identification of users a very simple process, in the sense of having credible people

using the website.

The user can also start using directly searching for destinations and the experiences

which are offered in those places. To do that the application will use Google Places

which the user can use to search for the city, which in turn gives the application data

which will be used to perform the search. This data is then sent to the backend to fetch

the results. Not just for searching, but for any operation which involves data retrieval

or posting data involves a request which is made to the server.

Braintree service allows users to pay for the experience that they are interested to buy,

with Braintree it is possible to accept payments from a wide variety of payment

methods. With the availability of hosted forms, it is easier to include the payment

form in the website directly, and all the processing is taken care by Braintree API.

Once the payment is authenticated then the request is made to the backend to

complete the booking process.

The backend of the application is based on REST principles, which caters to the

requests which originate from the web application. The responses are sent back in the

form of JSON which are then processed in the frontend to display content in a desired

way. The controllers and the entities serve the purpose of organizing and computing

the required functionalities that need to be achieved. In one way, they are the

reflection of the design of the application, having everything which is required to

handle all the information and make it available whenever requested.

The backend connects to the AWS S3 service to save the various files which are

uploaded by the users. In this way the handling, availability of files is taken care

which just requires the backend to send requests to retrieve and write files. Every time

whenever a file is saved there is also a URL which is generated for it, this can be used

directly by the front end to load the file, rather than the server send the file on request.

17


The most important part of the backend structure is the database as it is the place

where all the data is saved. The most important part of the application is the database

as its design shapes up the whole application. The database is queried to store, delete

and modify the data, by multiple users at the same time, thus it is important to tune it

is a way that it gives the best performance for a flexible number of users using it at the

same time. The database as of now stays in the same machine as the application which

in turn gives a better response time compared to a machine dedicated for it. Though

there are many advantages of having it decoupled but for the initial setup of the

application database is used from the same machine.

3.3. DESIGN AND ARCHITECTURE

Following are the diagrams which represent the various views and actions which can

be performed by different types of users.

3.3.1 USE CASE DIAGRAM

Figure 3.2 Use Case of the application

The above use case diagram shows how the various types of the users search, view

book and add experiences using the application.

18


Users can directly search the website directly from the home page and view all the

experiences which are available. The users have the possibility of giving more

parameters to the search by choosing them from the search inputs.

If the user wants to book an experience then first registration/login flow must be first

done. Once the user is authenticated then the booking process can be done, which is

followed by check out.

The registration is carried out by allowing the user to either fill a form or use social

login. The social login is carried by calling 3rd party authentication service which

returns back the users data which is then used to register him by calling the backend

API. Once this process is done, the user can now carry out the booking process.

For the booking, the payment service is used to process the transaction. Once all the

required values are passed to the service, it will authenticate the payment and return

confirmation of the process. Once this is completed the user will able to see the

summary of the booking and all other required details for the same.

A registered user also has the functionality to post an experience. Which can be done

using the add experience functionality. The user is taken to the wizard where the

various information and files can be compiled related to the experience.

The administrator can access the website’s admin area where there are functionalities

like, approving or rejecting experiences, list of bookings, list of experiences, and list

of users registered to the website. For all these the administrator has the privilege to

modify or delete the data which is existing in the database.

19


3.3.2. LOGIN/REGISTRATION ACTIVITY DIAGRAM

The activity diagram below describes the Login/Registration flow. The user accesses

the Login page from the Home page, where they presented with the login form, which

they can use to enter their registered email address and the password combination.

This is sent to the backend for authentication. Other than this there is also the

possibility for the user to use either Facebook or Google to Login/Register. In this way

they need not take care about remembering another password. When they use this

social login option they are redirected to the external authentication sequence which

gives back the user’s info which is used to authenticate him by the backend.

Figure 3.3. Login/Registration Activity Diagram

20


3.3.2. SEARCH/VIEW EXPERIENCE ACTIVITY DIAGRAM The activity diagram below describes the search and viewing activity for the

experiences. The user starts the search from the home page, giving the name of the

city where he wishes to search for experiences, there is a call made to the backend API

to retrieve the results, which are shown on the search results page. From the list of

experiences, the user can select the experience page which he is interested in. In that

case a call is made to backend to retrieve all the information of the experience. In the

other possible case is that the user can add or remove the filters for the search which is

done, thus changing the set of results which are shown.

Figure 3.4. Search/View Experience Activity Diagram

21


3.3.3. BOOK EXPERIENCE ACTIVITY DIAGRAM

The Booking Experience activity diagram below describes how a user can book an

experience from the view experience page. First the user selects the number of people

and the time when he wants to book the experience and then he moves from the view

page to the booking page where he will be asked for the payment details which will be

then used to making the transaction. The transaction is carried out by calling the

payment processing service which in this case is Braintree. Once the processing is

done the result is passed back to the backend API which the verify is it and makes the

operation of creating a booking for the selected experience. Once the booking is

completed the user is taken to the summary page.

Figure 3.5. Book Experience Activity Diagram

22


3.3.4. ADD EXPERIENCE ACTIVITY DIAGRAM

The Add Experience activity diagram below describes how a user can add an

experience which will be available for travelers to book. The user first has to become a

host by clicking on the Become a Local Host button on the home page. The first step

in adding an experience is where the user is asked to provide the basic info about the

experience for example location, duration. Then the second step is where the user can

describe the experience and provide an itinerary for the same. In the second step, the

user also has to set the price for the experience. Next in the third step the user has the

option to upload images which are related and describe the proposed experience. In

the final step, the user can select the availability of the experience, he can choose

which time of the year it will be available, and the days of the week and hours of the

day when the experience is available for booking.

Figure 3.6. Add Experience Activity Diagram

23


3.3.5. STATE DIAGRAM

The state diagram below describes how a user can navigate around the various pages

of the application. The home page gives an idea about what the website is about and

has links to other parts of the website. The user can directly start by searching the city

where he wishes to go. From there he can go ahead and view the many experiences

available, on finding the experience of choice, he can go ahead and book the

experience.

Some parts of the website are accessible only if the user is logged in. For that he is

asked to login first and then continue. The login gives the access to the user’s personal

dashboard where there is profile information, lists of bookings, lists of reservation for

the hosted experiences and list of added experience. From the home page, the user can

use the ‘become a local host’ button which takes the user to the add experience

wizard, which contains four steps for completion of the process. There are also links to

the blog of the startup, the terms and conditions page, the quality standards page, and

the page which gives information about the team.

Figure 3.7 State Diagram of the Application

24


3.3.6. ER DIAGRAM

Figure 3.8 ER Diagram of the Application

The Entity Relationship diagram above describes the basic design of the application,

covering all the components which are required by the application. The main entity of

the application is the client which holds the data of the users of the application. This is

used to verify logins and retrieve user information. The email id field is the unique

field which helps to differentiate between each client. Other entities which are

connected to the client are the ones which hold further data about the client, they are

client notify, role, client customization and the host table. The host table acts as a

reference to understand whether a specific client is also a host which has added

experiences or not. This table acts as a connection to all the other entities which are

related to an experience.

25


The experience entity is the one which holds all the information which is related to an

experience. Further information regarding the experiences are also stored in other

entities but the experience entity is used as the reference to identity each one of the

child entities. The availability entity stores the information about the availability of the

experience. The experience images stores information about the images which are

related to an experience. The relationship between the experience images and

experience is many to one, as an experience can have many images. The relationship

between availability and experience is one to one as every experience can have only

one instance of availability data.

The booking entity is the one which is used to store the information about the

bookings which are made on the website. It is linked with the experience entity for

which the booking is made, the client entity which is of the user who booked the

experience and the host entity who is the responsible user for hosting the experience.

An experience can have more than one booking thus, the relationship is many to one

between bookings and experience.

The client feedback entity is the one which is used to store the feedbacks of the users.

The connected entities to the feedback is the booking for which feedback is given, and

the two user entities who give review to and from. A feedback can be only given once

to and from a user. Thus, it is a one to one relationship between the client feedback

and booking entities.

Another entity which is used is the experience proposal entity which is used to save

the data about the experiences which are proposed on the application. The major

reason for such an entity is that the application currently is available for hosting

experiences in Italy. But allows the users to make proposals for cities even outside

Italy. This this will serve as a very helpful information for expansion ideas as it will

help with knowing where users are interested in hosting experiences.

26


4. IMPLEMENTATION

4.1. Frontend Development using Angular JS Framework and Bootstrap

4.1.1 Setting up the application

The application is set up using Bower which is a package manager for web

applications. It’s now a basic thing to use a package manager for creating a web

application. With the package manager, it is easy to manage the HTML, CSS,

JavaScript, and fonts, image files. Bower is used to fetch and install dependencies of

the application. It also helps to organize and update the related libraries which are

included in the application. Using a package manager, it makes the app faster as the

packages are directly served with the application. If multiple packages depend on the

same parent package, the parent package is downloaded only once.

Installation of Bower requires npm to be installed. It is the world’s largest software

registry, it has packages of reusable code which can be utilized in the development of

the application. The main advantage of using such tools is that it takes care of the

packaging of the application. Using this approach also helps in the deployment

process of the application.

Another important addition to the setup is gulp which is used to build the application,

minify the code, so that the performance online is improved. It also has plugins which

can be used to check the JavaScript for errors. It can be used to configure the build

task which can be used to direct gulp to copy only the required components which are

supposed to be deployed. Thus, the process is very specific regarding the strict

guidelines which are defined, making the application to run as expected in production

environment.

The following commands are to initialize the development process:

$ npm install -g bower

$ npm install -g bower

$ npm install gulp-cli -g

$ npm install gulp -D

$ touch gulpfile.js

$ bower install

Using the bower.json file all the dependencies can be managed, with the bower update

command the bower components can be updated as the dependencies are referred in

the bower.json file. The bower components folder can be used directly to include the

packages in the application. Thus, this folder acts as a repository of the various

external dependencies of the application.

27


4.1.2 Structure of the application

The image above shows how the folder structure of the application looks like. The

various folders are described as below:

index.html: The index.html acts as the root of the application. The file takes care of

loading all the dependencies and the elements which are required by the application. It

is also used to create the foundation of the app where all the other parts of the

application are loaded when accessed.

Assets: The assets folder is the folder which holds all the essential supporting files of

the application these can include images, icons, fonts etc. The css folder holds all the

style sheets required by the application. This folder can be used to include files which

are used to support the various aspects of the application. They might not be crucial

for the functionality but are useful to improve the usability.

App: The app folder is folder which contains all the components and directives of the

application. The app.js file is the file which is used to load all the modules and register

all the routes of the application. This file is very important for the whole application as

it acts as the single point for loading the controllers and services. It is used to

configure the run function which is the container for all the modules and templates of

the application. The config function is used to specify the states by assigning urls to

the templates, and other parameters which are required by specific set of components.

It is also used to define which parts of the application require authentication and which

can be accessed freely.

Components: The components folder is used to place all the parts of the application,

basically any components contain the module definition, the services attached to it, the

template for the component, and the main component definition file.

28


There are also other child components which can be added to a parent component in a

hierarchical fashion.

Directives: The app folder also contains the directives folder, which contains the

custom directives of the application, for this application a tabset directive is created

which is mainly used for providing a predefined multi module functionality to a single

template functionality.

4.1.3 Angular JS

Angular JS [16] is used to extend the HTML of the application and serve dynamic

content on the webpages. The main aim of using Angular JS is that it addresses the

basic issue with HTML, i.e. it was not developed for showing dynamic content.

Angular JS provides a quick development environment which gives the application a

readable structure and a dynamic view to the application. The modular way of creating

applications provided by Angular JS helps to decouple all the parts of the application.

They can be easily distinguished from each other, this also gives the possibility to

reuse the same components in different parts of the application, this way rewriting of

code is tackled.

For any module there are three basic parts which are used to build it. The first is the

component.js which is used to define the module and attach the controller code for the

module. This contains the functionality of the module, and all the required external

modules and services are injected into this. The dynamic content manipulation is all

taken care in this file, also it serves as the point for generating requests and handling

responses from external services. The second file is the service file, this file is used to

create external requests and send back the responses to the controller. Mainly the

service file is used to create HTTP requests to the backend API and get responses for

the various requests generated by the controller. The data is fetched and converted to

json format and sent to the server and same way json response is fetched and passed to

the controller. Then the controller takes the data and populates the view template,

which is the third part of the module. The view template can be defined as a file which

contains HTML code in combination which data which is used to show a part of the

application.

4.1.4 Bootstrap

Bootstrap [17] is used to build responsive web apps which don’t require separate code

to be written for various devices which can be used to access the application.

Bootstrap provides an open source toolkit to develop with HTML, CSS, and

JavaScript. Using the various choices for creating the layout, content, components and

the utilities we can create a responsive and a flexible web application.

29


For the layout we follow the grid system provided by bootstrap, assigning the

breakpoints at which the view ports will be changed. There is also a possibility to use

fixed containers which might be required for some parts of the application. Some of

the important components which can be used are the forms, input-groups, alerts,

buttons, and the navigation bar. The UI Bootstrap library combines Angular and

Bootstrap, providing directives which can be used wherever required in the

application, using this approach we have many functionalities implemented by default.

Some of the directives used in the application are accordion, date picker and

pagination.

4.1.5 Modules

The following are descriptions of the implementation of the major functionalities of

the application, these modules are developed using some external components which

are crucial to the functionality of the modules. We also present screenshots of the

application’s modules which will give a better understanding of the module.

4.1.5.1 Login/Sign Up

Screenshot 1: Login Form

The above screenshot shows the implementation of the login module of the

application, this is done using the modal component of Bootstrap. As this is fixed in

the navigation bar component, it can be called from any page of the application, the

controller is just implemented once and is reused everywhere else, thus keeping the

same functionality across the application.

30


The controller is implemented in such a way that it handles all the 3 types of login

sequences, which are basic login using the email and password combination, login

using Facebook, and login using Google.

Basic Login: Using a form with two fields and a button a basic login form is created.

Both the fields are required and the email field is validated for a valid email address.

These two parameters are passed to make a request once the Login button is pressed.

The request is passed to the service by the controller, which then creates an HTTP

request [18] to the backend to get the response whether the login is successful or not. If

the login is successful the backend returns a token which is used to create the further

user specific requests thus helping the backend to identify the user every time a

request is made.

Screenshot 2: Social Login Form

Social Login: The login implementation of the social platforms [19] requires requests

to be made from the web application to retrieve the user’s information from the social

media platform’s data. The application is first registered so that it can allow users to

use their social login to complete login. The controller creates requests to the external

authorization sequence which the user has to allow, thus allowing the app to get all the

users information. This can be used to verify with the backend whether he is an

already existing user or not. The external requests generates access tokens for the user

which can be stored to allow access to the user. Also the backend returns the login

request with a token response which can be stored for further requests.

31


4.1.5.2 Add Experience

The Add Experience module contains four phases which are described in the

upcoming parts, these are all handled by a single controller which acts as a single

point to generate requests for the operations which are to be performed on the different

phases of the process.

Screenshot 3: Add Experience Basic Information Form

Basic Information: The first step of the process is the form where the user enters the

basic information regarding the experience. Here the user has to enter the city where

the user wants to host the experience, the category to which the experience belongs,

the number of reservations he can handle, and the duration of the experience.

Screenshot 4: Add Experience Basic Information Form- Places autocomplete

32


The important component which is required for this step is the field for the location of

the experience, this is populated by the user using the Google’s Places autocomplete

library [20] which provides the user a list of cities to choose from which are based on

the text he enters in the field. This also helps the application with further information

like the geographic coordinates of the location, which can be saved and used for many

purposes. Here the autocomplete can be configured to give results from a specific

country or region. The application currently allows the user to add experiences only in

specific regions of Italy, rest for all the other places the experiences are stored as

proposals.

Description

Screenshot 5, 6: Add Experience Description Form

The description of the experience can be given by adding the fields which are required

to be compiled to better present and explain everything about the experience. The user

adds all the information using the guidelines which are given to the user, regarding

what these fields must contain. The meeting point is added by the user by giving a

street location which is provided by the google autocomplete suggestions when text is

entered in the field. The user adds the price for the experience which he thinks is a

reasonable one and is justifiable for the things which make the experience. This price

is then used to calculate the booking amounts and the other charges which are applied

in the booking process.

33


Image Upload

Screenshot 7: Add Experience Image Upload

The screenshot above is the phase of the experience creation process where the user

can add image files which will be displayed on the experience description page. These

images are a reference for the users to get an idea about what the experience is all

about. The hosts are suggested to put up images which show the best moments of the

experiences, which will help gain the attention of the travelers.

In order to provide this functionality we make use of dropzone [21] JavaScript library,

it is open source and highly customizable with a lot of functionalities in built,

providing a simple image upload experience. The space on the view can be populated

by including the element in the template file. This is then referenced in the controller

to add the configuration options to it. The main configuration which is necessary to be

done is the types of files which are accepted, the maximum size of a file that can be

uploaded, the API URL to which the files must be sent, and the headers which are

supposed to be included with the request.

There are many kinds of callbacks which are available which can be used to trigger

other functionalities like checking for the count of images, showing messages etc. The

functions which are utilized in the application are ‘addedfile’: to assign custom names

to the added file, ‘success’: to hand le the successful upload of the file, this can be

used to populate the uploaded image space with the uploaded file, ‘error’: to handle

the error while uploading a file. ‘removedfile’: To handle the removal of a file, a

request to the backend is made to carry out the operation.

34


Calendar

Screenshot 8: Add Experience Calendar

The screenshot above is the final step in the add experience phase. Here the host is

asked to customize his/her availability to host the experience. The experience can be

seasonal, in that case the user can select the part of the year it will be available. The

experience can be weather condition dependent, for that there is the option to specify

the weather condition.

The final step is to select the timings on the days of the week when the host is

available. This gives the opportunity to the host to provide the hours he is available on

any given day of the week. There is also a possibility to make a day not available for

the experience.

35


4.1.5.3 Search Experience

Screenshot 9: Search Experience

The search functionality of the application is available on its home page, where the

user can choose a city where he wishes to go. The input field for the city is attached

with the Google’s places autocomplete which is configured in the template and the

controller. The user can also select the date from the date picker if he is looking out

for a specific date. Also, there is a possibility to select the number of guests, which by

default is selected as 1.

The controller is used to configure the Google’s places autocomplete, where it is

initialized and configured to add event listeners to the component. To the component

we can also add restrictions regarding geographic locations, where we can mention the

region or the country where we want to limit the search results. Next, we add the

function which handles the location result. This object gives the geographic

coordinates of the selected location which are passed to the backend API to perform

the search query which returns back the results of the search operation.

36


4.1.5.4 Book Experience

Screenshot 8: Book Experience

The booking for an experience is performed by selecting the book option from the

view experience page. Then the module for paying for the experience is loaded into

the application. The view template shows the summary of the selected information

which was done during the previous route of the application. This information mainly

contains the number of people and the date for which the user wants to book the

experience. On the checkout page the total amount that the user has to pay is

calculated and shown to the user.

The template is also injected with the Braintree payment [22] form component which is

used to accept payments from the user. The form provides two options to the users for

making the payment. One of the option is to perform the transaction using PayPal

where the user is redirected to PayPal’s website where he can login to his account and

perform the payment operation. Another option with the user is that he can enter his

card information, the cards which are supported are usually all major credit and debit

cards. The user enters the card information and this data along with amount is passed

on to the Braintree processor to verify the card and process the transaction. In either of

the cases a payment token is generated which signifies that the payment option

selected is a valid one and sufficient funds are available with the user.

This token along with the booking information is sent as a request to the backend

where it performs the transaction and generates a transaction id for the booking. This

information is used to create a booking for the user and a successful booking response

is sent back to the user. In case of any issues the user is asked to try again with a

different payment method and the same process is repeated in either of the cases.

37


4.2. REST API Development using Lumen Framework

4.2.1 Setup

In order to setup Lumen there are some pre requisites which are to be installed which

act as an base and also support in some cases for the application to be running on the

machine. The basic stack which is used for the Lumen API is composed of PHP [23]

and MYSQL which run on apache server. Thus, to start with the setup and the

development process these must be installed first.

For the installation of Lumen we use composer which is a dependency manager for

PHP, this also takes care of the libraries which are required by the API. The composer

can be used to setup the API structure and the installation of the project. It also gives

the possibility to update all the dependencies which are associated with the project.

$sudo apt-get install apache2

$sudo apt-get install mysql-server-5.7 $sudo apt-get install php7.0-cli php7.0-common libapache2-mod-php7.0 php7.0

php7.0-mysql php7.0-fpm php7.0-mysql

$sudo apt-get install php-curl

$sudo apt-get install phpmyadmin apache2-utils $sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

$sudo php composer.phar install

4.2.2 Structure

The above image shows the basic structure of the application which is composed of

various folders which help in building up the application. Following are the

descriptions of the major parts of the structure which are utilized in building the API.

38


.env

This file is the file which is used to store all the configuration settings for the

application. It usually is used to differentiate between staging and production

environments and the related configurations regarding either of them are stored in this

file.

App

The app folder stores the controllers, models, routing configuration and other classes

which define the various functionalities of the API.

Bootstrap

The bootstrap directory has the app.php class which is responsible putting up the app

and its components together. This directory also serves as a place for the framework to

store cache.

Database

The database directory contains the database migrations files and seeds which are used

to create, modify and provide updates to the database model. There is also the

possibility to populate the database with default or initial data.

Config

The config directory is used to store the configurations of the various components, this

is used to set parameters to the added components to the API, these are very crucial as

these can only be changed by the developer and are not affected by any external

source.

Storage

The storage folder is used to store the files which are required by the API and also acts

as a repository for the files which are sent to it. I can be modified to give public and

private access to the files and folders it holds.

Vendor

The vendor folder is the folder where all the default and downloaded libraries are

stored. It is recommended not to make any changes to files directly in this folder as

they are usually not saved in the repository with the application, and are also updated

thus, the changes can be easily lost.

4.2.3 Lumen

Lumen [24] is a PHP framework based on laravel. It is lightweight easy to setup and

fast in performance compared to its other counter parts. The main reason for using

Lumen is that it has all the minimal components which are required to create an API.

It is free of all the bloat which is not even used generally when API’s are developed.

39


Some of the features which are made used in the API development are described

below.

Database, Queries and Migrations: The Models which are created can be used to

also create the database tables which will act as the reflection of the models in the

API. We use MYSQL database and the connection is configured in the .env file.

We make use of Eloquent ORM to query the database. This allows us to easily fetch

data from the database. The main feature of Eloquent is that it can take care of the

formation of the SQL queries which are required to be made to the database.

Routing: To create the routes for the API we make use of any required HTTP verb

and configure the responses which are sent to the requests made to the API. We can

specify the parameters which will be passed to the routes and the controller to which

they are connected. We can also create groups of routes which will help in better

understanding and configuration of the API calls.

Middleware: The middleware acts as a filter to a request which is made. The

middleware handles requests even before them reaching the controller. This approach

is very helpful in providing a mechanism which makes the application more secure, as

it is able to check the requests for proper headers and only after that check it is moved

further. Middleware also provides the functionality of performing other operations

once a request is given a response. Using this the API can redirect the user to perform

other further operations once any phase is completed.

Controllers: The controllers act as the main components for any module in which it is

created. They are responsible for performing all the application operations which are

requested by the various API calls. The controller class basically has the functions

implemented, which take request parameters and process them to send back to the

requesting application.

4.2.4 JWT

JWT are types of string tokens which are generated when user is authenticated. We

use web tokens which are specifically generated for web applications which has the

features for giving a time to live for the token and assigning the user model to it. In

this way when the tokens are generated they can be directly used to get the user related

to that token.

When the requests are handled they are checked for their headers which must contain

the token. Then this token is verified for an authentic user before processing the

request. In case the token is invalid or blacklisted then an appropriate response is sent

back for the request. We use the claims which hold the information related to the

token.

40

Politecnico Di Milano – Computer Science and Engineering 4.2.5 Amazon S3

Amazon S3 [25] storage service can be utilized to integrate the API with a cloud

storage system. The Amazon S3 service provides a library which can be used to send

and retrieve files which are stored in the external file system. The functionalities

which are utilized are as follows:

Put: to add a file to the repository by specifying the folder location where it is

supposed to be put in the repository. The services takes care of creating a request and

handling the upload of file to the repository. Once a file is uploaded a URL is created

for it. This URL and the path to the file can be stored in the database for the retrieval

whenever requested.

URL: the URL command is used to get the public URL for a file which is stored on

the repository. To get the URL we have to just specify the path of the file to the

service and it will get the URL as a response. This URL can be passed to the HTTP

response and can be used to display to the user. This way the traffic is not heavy with

the files going over the responses, rather than just a link is given as a response.

Delete: the delete command can be used to delete a file at a specified path on the

repository. This operation can be carried out in two ways, one in which the file is

permanently deleted another one is the one in which a backup of the file is taken just

in case it is required to be restored at some point.

4.2.6 Modules

We will be explaining about the implementation of the major modules of the

application which are very crucial in forming the API.

4.2.6.1 Login

$app->post('/login', ['middleware' => 'cors', 'uses' => AuthController@postLogin']);

$app->post('/socialLogin', ['middleware' => 'cors', 'uses' =>

'AuthController@socialLogin']);

The above two routes are used to perform the login functionality for the API. The

basic login using a username and password is required to pass the json with two

payload variables which are the username and the password. These two values are first

used to verify whether the combination is of an existing user or not. Once it is verified that the username and password combination matches a user model, we call the JWT

auth library to generate a token for the specific user. This token is passed back as a

response to the HTTP request.

41


In the social login scenario there is no password involved in the request which is sent

to the route. The requests contains the email address, the authentication token from the

social platform and the name of the source of that token. First the email address is

verified whether it’s an existing user’s or not. Next the social auth token is verified

with a call to the source for verifying whether it’s the correct intended user or not.

Once this process is completed, the JWT auth library is used to generate a token for

the user which is sent back as response. With this approach user can even use the

social platform login even in case he has registered once in the other mode.

4.2.6.3 Search Experience

$app->get('/search', 'ExperienceController@searchExperience');

The above route is used to call the API to perform the search operation. The

parameters which are required to be passed to the search operation are the latitude and

longitude of the place around which the user wishes to book experiences. There are

other possibilities too which determine whether an experience will be a part of the

search results or not, which will be discussed further.

The algorithm to perform the search first utilizes only the latitude and longitude as

parameters. Using them it will find the points which are within a distance of the

bounding coordinates which is formed by calculating the maximum and minimum

bounds.

First we set a minimum for the bounding circle, which signifies up to what distance

from the location the experiences should be retrieved. The distance by default we will

take as 50km. We consider earth as a sphere [26] on which we need to map the points.

We define r as the angular radius of the query circle which will be used to do further

calculations of the minimum and maximum latitude.

$latitude = $request->input(Experience::CITY_LATITUDE);

$longitude = $request->input(Experience::CITY_LONGITUDE);

$distance = 50;

$r = $distance / 6371;

$radLat = deg2rad($latitude);

$radLon = deg2rad($longitude);

$lat_min = $radLat - $r;

$lat_max = $radLat + $r;

We use the inbuilt functions in PHP for converting the latitude and longitude which is

in degrees to radians for calculation purposes.

42


Using the minimum and maximum latitudes we form a query with the following

conditions.

RADIANS(city_latitude) >= $lat_min AND RADIANS(city_latitude) <= $lat_max

AND RADIANS(city_longitude) >= $lon_min AND RADIANS(city_longitude) <=

$lon_max

Now for checking whether the coordinate sets of the experiences are inside the

bounding circle on the sphere we use trigonometric formulas to compare the locations

latitude and longitude to be less than the previously calculated r value.

acos(sin($radLat) * sin(RADIANS(city_latitude)) + cos($radLat) *

cos(RADIANS(city_latitude)) * cos(RADIANS(city_longitude) - ($radLon))) <= $r

This will give back a set of experiences which are located in and around the location

which the user searched for. This set of preliminary result is further processed to get

the result of the search operation.

Next we check the bookings done for that experience on that particular date and hours.

For the bookings done for that particular date we find if there is an available post for

the given number of people. If there is no booking for the experiences then post is

available to be booked. If there is no posts available for the date and hour combination

then check whether there are other hours available to book for that day of the week

searched for. The final result is compiled with all the experiences which are available

to be booked, with links to images to show in the results.

4.2.6.4 Book Experience

$app->post('/bookings/validateBooking', ['middleware' => ['auth'], 'uses' =>

'BookingsController@validateBooking']);

$app->post('/bookings', ['middleware' => ['auth'], 'uses' => 'BookingsController@

addBooking']);

The above are the two routes which are used during the experience booking process.

The first validates the booking object which is passed in the request, the controller

validates the booking data first by checking the database for the possibility of adding a

booking for the combination of experience, date and time which are supplied in the

request. Next request is made to perform the transaction for booking the experience

after the successful validation of the booking.

43


The token which is supplied to the request is the payment nonce, which is used to

create the actual transaction which will charge the amount using the payment method

selected initially by the user. There are many ways of performing the transaction, one

of the ways which is used is that the transaction on success will be saved in the vault,

which means that up to a specific time the funds will be available to be given back to

the user without any charges, thus making the cancellation of a booking an easier

process in case if the user chooses to do that.

The transaction is carried out by using the Braintree’s service which can be used with

the API. The library provides all the functions which can be performed to create, get

status and modify the transactions which are performed. Once a response is received

then on success the booking is created in the database and the booking summary is

passed back in the response, in case of any error it is given back in response with the

appropriate message.

44


5. CONCLUSION AND FUTURE WORK

Based on the implementation of the Foody application, a platform is provided for

users to have the possibility to travel around a city in a unique way that is tailored

made by people who are ready to host and familiarize travelers with their cities. From

a business point of view it is an upcoming trend in the tourism world to provide such

kinds of packages as there is a new wave of travelers who are very specific about what

kind of travel experience they would like to have.

In the development point of view, utilizing the various libraries which makes the

development of a web application a very systematic and structured process, we are

able to achieve a platform which is adaptable to various devices from which it can be

used from.

The backend API is developed as a central point for providing functionality to the web

application. This API can also be utilized for supporting applications for the mobile,

without any change or work required to be done in the current API setup.

One of the drawback for the web application is that it has to accessed using a browser,

thus it can only be used when an active internet connection is available on the device.

In the future, it is considered to come up with native apps for both Android and iOS

based smart phones thus giving the possibility to have personalized content. There are

other features which can be added to the application, for example a notification system

which will send notifications to users, the possibility to message between users etc.,

thus making a more interactive, and engaging user experience.

45


6. REFERENCE

1. Web Application, https://www.techopedia.com/definition/26002/web-based-

application

2. AJAX, http://adaptivepath.org/ideas/ajax-new-approach-web-applications/

3. Food Tourism Report, http://cf.cdn.unwto.org/sites/all/files/docpdf/amreports4-

foodtourism.pdf

4. Food Tourism report, http://media.unwto.org/press-release/2017-05-17/2nd-

unwto-report-gastronomy-tourism-sustainability-and-gastronomy

5. Tourists flow in Italy,

https://www.istat.it/en/files/2016/11/EN_Tourism_2015_finale.pdf?title=Tourist+

flow+in+Italy+-+22+Nov+2016+-+EN_Tourism_2015_finale.pdf

6. Tourism in Italy, https://en.wikipedia.org/wiki/Tourism_in_Italy

7. B-Tree, http://searchsqlserver.techtarget.com/definition/B-tree

8. Hash vs B tree, https://dev.mysql.com/doc/refman/5.5/en/index-btree-hash.html

9. MVC http://ieeexplore.ieee.org/abstract/document/950428/

10. REST, https://stackoverflow.com/questions/671118/what-exactly-is-restful-

programming

11. Web Service, https://en.wikipedia.org/wiki/Web_service

12. JSON, http://json.org/

13. JWT, https://jwt.io/

14. CORS, https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

15. DBAL, http://docs.doctrine-project.org/projects/doctrine-

dbal/en/latest/reference/introduction.html

16. Angular JS, https://docs.angularjs.org/guide

17. Bootstrap, https://getbootstrap.com/docs/3.3/

18. HTTP request, https://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html

19. Social Login, https://en.wikipedia.org/wiki/Social_login

20. Google's Places Autocomplete, https://developers.google.com/places/web-

service/autocomplete

21. Dropzone, http://www.dropzonejs.com/#configuration

22. Braintree, https://developers.braintreepayments.com/guides/overview

23. PHP framework, https://laravel.com/docs/5.5#server-requirements

24. Lumen, https://lumen.laravel.com

25. Amazon S3, http://docs.aws.amazon.com/AmazonS3/latest/API/Welcome.html

26. Finding Points Within a Distance of a Latitude/Longitude,

http://janmatuschek.de/LatitudeLongitudeBoundingCoordinates

46

https://www.techopedia.com/definition/26002/web-based-application

https://www.techopedia.com/definition/26002/web-based-application

http://adaptivepath.org/ideas/ajax-new-approach-web-applications/

http://cf.cdn.unwto.org/sites/all/files/docpdf/amreports4-%20%20foodtourism.pdf

http://cf.cdn.unwto.org/sites/all/files/docpdf/amreports4-%20%20foodtourism.pdf

http://media.unwto.org/press-release/2017-05-17/2nd-unwto-report-gastronomy-tourism-sustainability-and-gastronomy

http://media.unwto.org/press-release/2017-05-17/2nd-unwto-report-gastronomy-tourism-sustainability-and-gastronomy

https://www.istat.it/en/files/2016/11/EN_Tourism_2015_finale.pdf?title=Tourist+flow+in+Italy+-+22+Nov+2016+-+EN_Tourism_2015_finale.pdf

https://www.istat.it/en/files/2016/11/EN_Tourism_2015_finale.pdf?title=Tourist+flow+in+Italy+-+22+Nov+2016+-+EN_Tourism_2015_finale.pdf

https://en.wikipedia.org/wiki/Tourism_in_Italy

http://searchsqlserver.techtarget.com/definition/B-tree

https://dev.mysql.com/doc/refman/5.5/en/index-btree-hash.html

http://ieeexplore.ieee.org/abstract/document/950428/

https://stackoverflow.com/questions/671118/what-exactly-is-restful-programming

https://stackoverflow.com/questions/671118/what-exactly-is-restful-programming

https://en.wikipedia.org/wiki/Web_service

http://json.org/

https://jwt.io/

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

http://docs.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/introduction.html

http://docs.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/introduction.html

https://docs.angularjs.org/guide

https://getbootstrap.com/docs/3.3/

https://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html

https://en.wikipedia.org/wiki/Social_login

https://developers.google.com/places/web-service/autocomplete

https://developers.google.com/places/web-service/autocomplete

http://www.dropzonejs.com/%23configuration

https://developers.braintreepayments.com/guides/overview

https://laravel.com/docs/5.5%23server-requirements

https://lumen.laravel.com/

http://docs.aws.amazon.com/AmazonS3/latest/API/Welcome.html

http://janmatuschek.de/LatitudeLongitudeBoundingCoordinates

politecnico di milano como campus - politesi.polimi.it · in questa tesi, discutiamo sul modo in...

Documents