Final Report: Cross-Platform Mobile Application for London Transport

Verified

Added on 2021/02/24

AI Summary

This report presents the development of a cross-platform mobile application designed to improve navigation on London's public transport. The project addresses the challenges faced by commuters and tourists in navigating the city's complex transport system. The report begins with an abstract outlining the problem, the proposed solution, and the methodology used. It then delves into a literature review, examining existing travel applications like Google Maps and Citymapper, and discussing the technologies used in their development. The report details the analysis and design phases, including requirements gathering, wireframing, and user feedback. It describes the product itself, the work done, and the evaluation process. The report concludes with a user guide and appendices that provide additional information, including links to the project's GitHub repository, Glitch, and a video viva. The application leverages HTML, JavaScript, and TFL's Unified API to provide users with real-time information, route planning, and other useful features. The project's goal is to create a user-friendly and accessible tool for navigating London's public transportation system, catering to both tourists and residents.

Cross-Platform Mobile Application,
Public Transportation for London –
Final Report

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

Table of Contents
Abstract ........................................................................................................................... 3
Acknowledgments .................................................................. Error! Bookmark not defined.
Background ...................................................................................................................... 3
Introduction: ........................................................................................................................... 3
The Problem: ........................................................................................................................... 3
The Hypothesis and the Approach: ........................................................................................... 4
Literature Review ............................................................................................................. 4
Existing Work:.......................................................................................................................... 5
Google Maps: ................................................................................................................................................ 5
Citymapper: ................................................................................................................................................... 6
Transit: .......................................................................................................................................................... 7
Physical Map: ................................................................................................................................................ 7
Development Technologies: ..................................................................................................... 8
Native vs Hybrid App Development: ............................................................................................................. 8
Vue.js:............................................................................................................................................................ 8
React: ............................................................................................................................................................ 8
Angular: ......................................................................................................................................................... 9
XCode and Swift: ........................................................................................................................................... 9
Conclusion: .............................................................................................................................. 9
Analysis and Design .......................................................................................................... 9
Requirements: ......................................................................................................................... 9
Wireframe: ............................................................................................................................ 11
Feedback: .............................................................................................................................. 11
The Product and the Work Done: .................................................................................... 12
Evaluation ...................................................................................................................... 19
Conclusion ...................................................................................................................... 22
User Guide ..................................................................................................................... 23
Appendices ..................................................................................................................... 24
GitHub ................................................................................................................................... 24
Glitch..................................................................................................................................... 25
Video Viva ............................................................................................................................. 25
References: .................................................................................................................... 25

Abstract
Being one of the world’s most famous cities and the third most visited city in the entire
world, tourism is an essential economical component for London. The city also has a world-
renowned transport system, but may not be easy for all tourists and people unfamiliar with
the transport system to navigate through, and not very easy for some London residents too.
This creates a problem; it would be helpful if people travelling within the city had useful
information that is easily accessible to help them navigate through the city. With the vast
majority of tourists and London’s population owning a smart phone, to solve this problem,
my idea was to create a cross-platform mobile application. As most people own a smart
phone, it would be easy to access this information through a mobile application. As I want
the app to be easily accessible across mobile platforms, I decided to create a web application
using HTML and JavaScript, with TFL’s Unified API being used to retrieve information on
the city’s public transport and display this information to the user in a user-friendly manner.
To evaluate the app, I asked multiple people to test the app and provide feedback on what
they liked about the app and potential improvements that could be made to the app. This gave
me a better idea on how good the app is and what improvements need to be made, gaining
critiques from unbiased users was crucial. In conclusion, I found that in my opinion, and the
opinions of test users, that the app was successful based on their feedback, the application
meeting all of the requirements I had put in place for the app before creating it and how
useful the app is in its entirety. Although the application is targeted at tourists, the
information provided within the application is very useful to tourists and commuters alike.
Background
Introduction:
In recent years, especially in a major city like London, public transportation has become
essential to commuters and tourists alike. That is why for my project, I’ve decided to create a
cross-platform application that can be used to make travelling around London much easier.
The app will include a way to find directions between two locations, public transportation
maps, and specially for tourists – locations of and directions to popular tourist locations. The
app is primarily targeted at tourists, although will be useable by any travellers within the city.
The Problem:
London is a major world city and one of the most famous cities in the world, it is definitely
not one of the easiest to navigate around, especially without any help. Whilst London’s
public transportation is great, understanding how it works is not simple by any means. In the
London Underground, there are multiple issues with multiple lines every single day that can
affect the timing of trains’ arrival, this means the timetable provided by TFL can be very
unreliable. This will make knowing what time your train will be arriving and the total time of
your route difficult and will leave you unsure on what the best route to take to your
destination is. This can cause inconvenience for commuters and tourists alike. This creates a
problem.

The Hypothesis and the Approach:
The problem stated above could potentially be solved if travellers were able to conveniently
plan their journey beforehand. Nowadays, the vast majority of London residents and tourists
to London will carry a mobile phone, so the most convenient solution to the problem for a
user would be to have all of the necessary information within a mobile application. Users
could very conveniently access an app on their mobile phones that will allow them to plan
their journey beforehand and see what steps they need to take to reach their destination. The
app will also have additional functionality, such as; maps of the London Underground, the
statuses of every London Underground line and a list of popular tourist locations.
My approach will be to use HTML and JavaScript to create a cross-platform mobile
application. I can retrieve data about London’s public transportation by utilising TFL’s
(Transport for London) own “Unified API”. TFL’s Unified API offers information such as
current line statuses and much more information that I can implement into an app that is more
user-friendly and presentable to people who need access to such information. To create the
app, I will be writing the entirety of the app using the Visual Studio Code and I will also be
uploading the source code to GitHub to make the app’s data easier to access and easier to
keep track of.
Literature Review
As for my individual project, as I have decided to create a mobile application specifically for
use on London’s public transpiration, in this literature review, I will be looking at existing
work, in this case this will be mobile applications which contain features that allow for use on
public transportation, as similar features will be implemented into my own application. I will
also be researching developmental technologies such as JavaScript frameworks which could
be used to develop my project.
To help the development of this application I have researched multiples apps and other
sources. By researching these various sources, I feel that this will allow me to gain a better
understanding of what my app should like and which features are most necessary for user’s
so that can I implement these feature into my own application. I can also gain an idea of
features which could be potentially included in my app that I have not initially thought of and
also gain an idea of which features may possibly be missing from other similar apps that I
could include in my own to set it apart from other apps because of the added functionality.

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

Existing Work:
Google Maps:
Google Maps is by far the most popular app for travel, and in this context specifically, public
transport. Google Maps is an extremely reliable app to help navigate around the city with
public transport. Unlike other popular apps such as Citymapper and TfL’s own app which
uses TfL’s Unified API, Google relies on their own data for information such as live arrivals
for different modes of Transport. This gives Google the upper hand when it comes to buses in
particular as Google relies on their own traffic data to provide more accurate live arrival
times.
As shown from the images on above, Google Maps gives you the option to choose to from
different modes of transport, once you click on the public transport icon, the app will then
show you different routes you can take to your destination. Once you click on a route, the app
will show you a map of the route and will give you more details such as how many stops
there will be on your bus/train and what stations you need to interchange at. Google Maps has
been entirely developed in JavaScript and is a native app.

Citymapper:
Citymapper is another
popular example of a travel
app and is extremely popular
within London. Unlike
Google Maps, Citymapper is
only used for public
transport. Also, unlike
Google Maps, Citymapper
uses TfL’s Unified API
which means all of the
information on the app such
as routes and live arrival
times is provided by TfL. As
shown in the images on the
left, Citymapper allows you
to search for a location and
also gives you the option of
choosing home and work
locations so you can quickly
find routes to these
destinations in the future.
You are also able to click
one of the icons to check the
current status of tube lines
and National Railways,
check live arrival times, etc.
Once you do choose your
destination, the app routes
from your location to your
destination, although unlike
Google Maps, Citymapper
will show you how much each
route will cost which is very
important when using public
transport. Once you click on a
route, the app will show you a
map of the route, live arrival
times, what mode of public
transport you will need to ask,
when to interchange, etc.

Transit:
Outside of Google Maps and
Citymapper, there are not any
particularly popular apps that
are used for public transport,
although one of the better ones,
as shown on in the left, is
Transit. Although Transit
doesn’t include as many
features as Google Maps and
Citymapper, one thing I
particularly loved when
compared to the two more
popular options, is the user
interface. The user interface is
much more aesthetically
pleasing and primarily uses
black, which is very important
because having a dark colour
scheme is a growing preference
in users. Many of the most
popular mobile apps such as
Instagram and Twitter have
added a “dark mode” option because of this. Other than the use interface, Transit like most
apps in this category will allow you to choose a destination and show you various routes from
your current location or a location of your choosing. Although after testing the app I have
noticed the options are usually not as preferable as the routes shown in other apps.
Physical Map:
Of course, we now have electronic devices
which have maps of the entire globe and
are easily accessible, but before that we of
course used to use a physical paper map,
as shown on the left which is a map of
London Overground which we still see on
trains today. Although it is difficult to
make the comparison of a physical map to
an app, it is important to look at the
appearance of the map and including these
maps in a section of the app could be very
useful to many users.

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

Development Technologies:
“Mobile applications are viewed as one of the most dynamic business tools. They have
become the new standard for building up a connection with customers.” – Medium.
Apps in today’s age are very important, of course when developing an app some sort of
technology is needed to help create the app such as a framework, so it is essential to choose
the appropriate developmental technologies for your app. There are multiple programming
languages to consider such as JavaScript (the most popular option) and Swift (used to create
native iOS apps), there are also various frameworks I could use to help me create this app
such as Vue.js, React, etc.
Native vs Hybrid App Development:
From a developer’s point of view, there are two different types of apps, hybrid apps and
native apps. Native apps are apps that have been developed for a specific mobile operating
system, for example, you could develop an iOS application in XCode using Swift, although
this app would only function on an iOS device. A hybrid app is an app that has been
developed to work across multiple mobile operating systems and the web, although this does
seem beneficial, it comes at the trade-off of performance when compared to a native app.
This is because a native app is designed to work on a specific operating system whereas a
hybrid app adjusts appropriately to the device it is being used on. Most popular mobile apps
such as Instagram, Facebook and Twitter, are natively built applications and have separate
native apps for every operating system. Developers of these popular apps do this because
making changes to a native app are easier than making changes to a hybrid app and as
mentioned, native apps perform better. Although, as frameworks for hybrid apps improve, the
difference in performance only get smaller. Also, even though native apps are easier to make
changes to, because of the many frameworks available, hybrid apps are quicker and easier to
develop.
Vue.js:
Vue.js is an open source JavaScript framework that primarily is used for building user
interfaces and single page web applications. Vue.js is known for its very small size,
compared to other popular frameworks such as React, Angular and Ionic, Vue.js has a
relatively small size of only 18-21KB. This makes it a lot easier for a developer to download
and use. Vue is also a very flexible framework and is fairly easy to understand for people
who are unfamiliar with how the framework is used (but of course familiar with JavaScript).
Overall, Vue.js is very flexible and is a very useful framework to create a hybrid web and
mobile app.
React:
React is a JavaScript library developed by Facebook which is used for building user
interfaces. As React is a library for UI development, for React to become a fully-fledged
solution, apps written with React will require additional libraries. React can be used to write
multiple-page applications as well as single-page applications. React is a fairly easy to learn
and understand if you already have a good understanding of JavaScript and is used by
companies such as Facebook, Twitter, Netflix, Uber and more. React is very flexible and uses
JSX which is a HTML-like syntax, so you are able to use HTML in JavaScript, only making

React a more flexible framework/library to use. Although, data in React is immutable
meaning that once fixed, the data cannot be changed, which in this context makes is
disadvantageous to another framework such as Angular.
Angular:
Angular is a JavaScript framework developed by Google. Angular is one of the two most
popular JavaScript frameworks along with React, and is used by companies such as Apple,
Nike, Microsoft, McDonald’s and more. There are a lot of advantages to using Angular,
although it is a very difficult framework to learn and understand when compared to Vue and
React and has much more fixed and complex app structure compared to the flexibility of Vue
and React. Unlike React, Angular is a fully-fledged JavaScript framework and has all needed
components built-in whereas React will require additional libraries to achieve the same
results. Also, unlike React, Angular’s data binding is mutable meaning the data can be
changed at any time.
XCode and Swift:
Unlike Vue, React and Angular which are JavaScript frameworks used to create hybrid
applications, Swift is an open source language created by Apple in 2014 which is used to
create native applications for all of Apple’s operating systems; Mac OS X, iOS, iPad OS and
Watch OS. Although there are other ways to use Swift, Swift is designed to be used and is
best used in XCode. XCode is an IDE developed by Apple and is only available on Mac OS
X. Of course, developing an app in Swift is very different to developing one in JavaScript,
when using Swift, you are almost forced to use XCode whereas if you were to use JavaScript,
you are able to use any IDE of choice. Swift is also a lot easier to learn and syntactically
much simpler than Objective-C. Also, because you are using XCode, you are able to test your
UI right inside the IDE which most other IDEs would not be able to do.
Conclusion:
After thoroughly researching various works and developmental technologies, I have learned
more and have a better understanding about each popular JavaScript framework and Swift,
this will help me make a more informed decision as to which programming language I should
use to develop my app and whether I want to develop a hybrid app or whether I want to
develop a native app. As Swift can only be used to develop native iOS apps, I will most
likely choose not to use it as I want to create a cross-platform web and mobile application.
Analysis and Design
Requirements:
After asking users that fall into the target audience of London residents and tourists, I was
able to obtain some features or aspects of the app that they would require or want. Below is a
list of these requirements which I will also briefly analyse and expand on:
• You should be able to click on one of the tourist attractions and gives the directions to
that tourist attraction – as the app will have a section which shows a list of popular

tourist attractions in London, it would be very helpful for tourists to be able to easily
find directions from their current location to the tourist attraction, from the page of the
tourist attraction they wish to visit. This is definitely something I am looking to
implement into the application.
• The app should have information on tourist attractions, for example, what time it
opens and closes – allowing tourists to have easily accessible information about the
attraction will help tourists decide which attraction is more appealing to them and will
generally make the app a lot more useful. There will of course be relevant and
important information about the tourist attraction the attraction’s page.
• The app supports all types of public transportation – although this does seem very
obvious, it is very important to the user that the app supports all modes of public
transportation such as the bus the train, etc. The journey planner feature for example,
will most definitely recommend you the best route to your destination which could
include any mode of transportation that the city offers.
• The app should show the length of time it takes to reach a tourist attraction – as with
any other user-inputted location, the app should have the basic functionality to show
how long it will take the user to reach their destination from their chosen location.
This will always be the case no matter the destination.
• The text should be made an appropriate size so that the visually impaired are able to
use the app – I of course want all possible users to be able to fully utilise the app so it
is important to make sure all people such as the visually impaired are able to view the
app clearly. Although instead of making the text big enough for these to users, it may
be better for all users to be able to change the size of text to their own preference, this
is something I will have to decide on later if I want to implement such feature.
• The app should show if any modes of transportation are having any delays or any
other issues – so that the user can plan their the best route to their destination, it
would be very important for the app to show delays, closures, etc. to any modes of
transportation so that the user can adjust their route appropriately. The application
will most definitely have a feature to show line statuses and detailed information on
the issues that lines are currently facing.
Based on the requirements stated above which were given by unbiased third parties, I now
most definitely plan on implementing some features that I did not initially plan on
implementing. As these were given by people who could potentially be users of the app, it
will be important to try my best to implements the features that they would require from this
application to solve the problem stated earlier on.
There are a few major points that without question need to be implemented into the app. This
includes aspects mentioned such as; the journey planner being able to support all modes of
public transportation as the best route to the user’s destination always needs to be available,
information about line statuses, relevant information about attractions and conveniently be
able to find directions to attractions within the app, the user should be able to see the length
of time that each step of journey planner takes before they reach their chosen destination.

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

Wireframe:
As shown in the images above, this is a basic look at what the app will look like. Of course,
this is not exactly how the app will look as nothing has been finalised, but this is just a basic
look. These are not all sections of the app but just three examples to show what the app will
look like. The image on the left is the home screen, which will have a search bar at the top for
the user to enter a location, below that is the statuses of London’s most popular tube lines
with a more button underneath so you can see the statuses of other tube lines and other mode
of transportation in the city, and at the very bottom, is a few icons showing popular tourist
attractions in the city. If you click on one of these icons, the app will take you to a page that
as shown in the image in the middle, will give you information about the attraction and also
have a button that the user can click on to be able to find directions to the attraction. The
image on the right shows the search results page, as an example I have searched for Leicester
Square, the app will then display transportation stations/stops and places that match the
search, in this case it shows a place called Leicester Square as well as the station with the
same name. You can then click on these search results for further information.
Feedback:
After surveying numerous people that fit the description of the target audience, I have
obtained some feedback about what I could possibly improve on. I have listed these possible
improvements below and briefly expanded on some of them:
• Add a logo/branding – most apps will have the logo of the app or some sort of way to
distinguish what app the user is using in the UI, in the case of my design, there is no
such logo or branding so that is something I should add in.
• The colour scheme is too dark – as wanting a dark colour scheme in apps are a
growing preference, I wanted to incorporate a dark colour scheme. Although, I
understand that some users may also want a light colour scheme so it may be useful to
include a “dark mode” option so that users can choose between light and dark colour
schemes to suit their preference.

• Not all users may be able to recognise tourist attractions just from icons – I
understand that some users, especially tourists, may not be able to recognise tourist
attractions just from the icons on the home screen so it may be helpful to add in the
name of the attraction and a short description underneath the icon.
• There should be a section for live arrivals on the home screen – live arrivals is very
important to many users because they of course want to see when their bus, train, etc.
is arriving they would like it to be easily accessible from the home screen so this is
something I could incorporate to the home screen.
The Product and the Work Done:
To start the development the application, I initially researched and did consider other
technologies to create the app such as developing the application in Swift, although
considering the fact that I want the app to be easily accessible across multiple platforms (for
mobile), I decided developing a native application was not most appropriate. Ultimately, I
decided that developing the application as a web application by simply using HTML and
JavaScript was most appropriate for what I want to achieve. This makes the application easily
accessible to any smart phone with any mobile operating system. As you will see from the
screenshots below, I have made slight changes to the design of the application from the initial
wireframe that I have created. Firstly, I decided that not including a search bar was best, all
of the features that the user would require such as line statuses and tourist attractions are all
accessible from the home screen so I thought that a search would not be necessary. I also
decided to change the colour scheme of the application. Based on feedback from the initial
designs, I found that users found the colour scheme too dark. So instead, I have decided to
user a brighter green for the application.
As mentioned, the client-side of the application has been entirely developed using HTML and
JavaScript. As for the server-side of the application, I have simply used NodeJS, the
application can be accessed from this NodeJS server. As this is a web application and can
only be accessed from a web browser, I want user’s to be able to add the web application to
their home screens so it serves as an application, essentially I want to make the application
installable. To do so, I have used a service worker which will be installed in the user’s
browser, this will the application installable and is part of what makes a PWA (Progressive
Web App), this will also be detailed further later on.
Below is a range of screenshots showcasing what the application is capable of and all of the
features that have been implemented into the application. To further explain and expand on
how I developed the application, I have also included screenshots of code snippets and have
explained these snippets of code.