Final Report: Cross-Platform Mobile Application for London Transport
VerifiedAdded on 2021/02/24
|25
|10093
|125
Report
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
Public Transportation for London –
Final Report
Secure Best Marks with AI Grader
Need help grading? Try our AI Grader for instant feedback on your assignments.
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 ........................................................................................................................... 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.
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.
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.
Secure Best Marks with AI Grader
Need help grading? Try our AI Grader for instant feedback on your assignments.
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.
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.
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.
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
“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
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.
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.
Secure Best Marks with AI Grader
Need help grading? Try our AI Grader for instant feedback on your assignments.
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.
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.
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.
I have included a few
screenshots of the app, as
you can see, the top bar just
simply includes the name of
the app and back/forward
buttons to help users
navigate through the app.
There are four sections on
the home screen; the
journey planner where users
can enter two locations and
receive directions to their
destination, the lines section
where users can see the
status of every line and click
on the line to get more
details, the maps section
where users can see maps of
the underground and the
attractions sections where
users find information of
popular tourist attractions in
the city.
These screenshots to the left
features the journey planner
feature. Once the user enters
two locations, they will be
given directions to their
destination. The user will
also be given multiple
options of different routes to
their destination, as show in
the screenshots, I clicked on
another option and I was
given an alternative route to
what is initially shown.
screenshots of the app, as
you can see, the top bar just
simply includes the name of
the app and back/forward
buttons to help users
navigate through the app.
There are four sections on
the home screen; the
journey planner where users
can enter two locations and
receive directions to their
destination, the lines section
where users can see the
status of every line and click
on the line to get more
details, the maps section
where users can see maps of
the underground and the
attractions sections where
users find information of
popular tourist attractions in
the city.
These screenshots to the left
features the journey planner
feature. Once the user enters
two locations, they will be
given directions to their
destination. The user will
also be given multiple
options of different routes to
their destination, as show in
the screenshots, I clicked on
another option and I was
given an alternative route to
what is initially shown.
Paraphrase This Document
Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
When you click on a line you
will be taken to a page like this.
The page displays the name of
the line, more detailed
information of the status of the
line than was shown on the
home page and the map of the
line which you can click on and
enlarge if needed.
The screenshots above shows what is displayed when you click on a map or attraction on the
home screen. The map page will show the map which you can click on to enlarge the image,
and also access the other maps from this page. If you click on an attraction, you will see an
image of the attraction, information on the attraction and a button to get directions.
will be taken to a page like this.
The page displays the name of
the line, more detailed
information of the status of the
line than was shown on the
home page and the map of the
line which you can click on and
enlarge if needed.
The screenshots above shows what is displayed when you click on a map or attraction on the
home screen. The map page will show the map which you can click on to enlarge the image,
and also access the other maps from this page. If you click on an attraction, you will see an
image of the attraction, information on the attraction and a button to get directions.
As for how the app was developed, although the majority of the HTML used is pretty self-
explanatory and simple to understand, I will mainly be focusing on the JavaScript aspect of
how the application was developed.
As you can see from the image on the left, the app when added to
the home screen, has an icon and the name of the app is displayed.
Of course, this should be expected by any mobile application, but
this must actually be implemented, and this will be shown from the
screenshots below.
On every HTML page within the application, there is this <head> section. This includes the
title and various meta and link tags. One of the link tags refers to a webmanifest file, which is
shown below. The “name” is the name displayed to the user and “icons” is the icon displayed
to the user, which is what is shown on the home screen.
Every page within the application contains a top bar which is displayed below, it simply
states the name of the app and has back and forward buttons to help the user navigate through
the app. The code for this is also shown in the image below.
explanatory and simple to understand, I will mainly be focusing on the JavaScript aspect of
how the application was developed.
As you can see from the image on the left, the app when added to
the home screen, has an icon and the name of the app is displayed.
Of course, this should be expected by any mobile application, but
this must actually be implemented, and this will be shown from the
screenshots below.
On every HTML page within the application, there is this <head> section. This includes the
title and various meta and link tags. One of the link tags refers to a webmanifest file, which is
shown below. The “name” is the name displayed to the user and “icons” is the icon displayed
to the user, which is what is shown on the home screen.
Every page within the application contains a top bar which is displayed below, it simply
states the name of the app and has back and forward buttons to help the user navigate through
the app. The code for this is also shown in the image below.
To display all relevant information within the application, I have used JavaScript to retrieve
information from TFL’s API and replace HTML components with such information. To
retrieve information such as line statuses and directions to a destination, I used the TFL
Unified API. I utilised the Fetch API to retrieve the information from the TFL API in JSON,
which I would then use in some way to be displayed on the app. I have shown an example of
this below.
This would fetch the status of the Bakerloo line, which would be returned in JSON, the
variable “text” is the information that has been returned, inside this function I would use this
information in some way to display it on the app. I have used this throughout the entirety of
the app, mainly within the journey planner feature and the line statuses pages.
To display this information, I would simply have an empty <div> (as shown below) which
would then be replaced using JavaScript and the Fetch API with the information retrieved
from the TFL API, as shown below.
The below image shows the “template” variable I have created which includes the HTML
that the above <div> will be replaced with.
information from TFL’s API and replace HTML components with such information. To
retrieve information such as line statuses and directions to a destination, I used the TFL
Unified API. I utilised the Fetch API to retrieve the information from the TFL API in JSON,
which I would then use in some way to be displayed on the app. I have shown an example of
this below.
This would fetch the status of the Bakerloo line, which would be returned in JSON, the
variable “text” is the information that has been returned, inside this function I would use this
information in some way to display it on the app. I have used this throughout the entirety of
the app, mainly within the journey planner feature and the line statuses pages.
To display this information, I would simply have an empty <div> (as shown below) which
would then be replaced using JavaScript and the Fetch API with the information retrieved
from the TFL API, as shown below.
The below image shows the “template” variable I have created which includes the HTML
that the above <div> will be replaced with.
Secure Best Marks with AI Grader
Need help grading? Try our AI Grader for instant feedback on your assignments.
As shown above, parts of the “template” variable are replaced to create the HTML
components, the <div> with id “content” is then replaced with the template that I have
created in JavaScript. In this example, I have used variables such as “line”, icon”, “details”,
etc. These are attached to some value that would make sense in HTML, for example the
“icon” variable would be defined as a JPEG file which would then replace ICON in the
template variable to be the source of the <img> tag. An example of the end result that is
displayed to the user can be found in an image below.
Please keep in mind that this is just an example; I have used this method throughout the app
to display information on almost every HTML file used within the app. Everything I have
displayed in this section is how I have developed the application in its entirety. All other
pages in the application such as the “maps” and “attractions” sections of the application did
components, the <div> with id “content” is then replaced with the template that I have
created in JavaScript. In this example, I have used variables such as “line”, icon”, “details”,
etc. These are attached to some value that would make sense in HTML, for example the
“icon” variable would be defined as a JPEG file which would then replace ICON in the
template variable to be the source of the <img> tag. An example of the end result that is
displayed to the user can be found in an image below.
Please keep in mind that this is just an example; I have used this method throughout the app
to display information on almost every HTML file used within the app. Everything I have
displayed in this section is how I have developed the application in its entirety. All other
pages in the application such as the “maps” and “attractions” sections of the application did
not require the Fetch API to retrieve information and have been entirely created using simple
HTML components, such as <img>, <span>, etc.
As you can see from previous screenshots, the pages for the maps within the application have
an image of the map the user selected in the middle of the screen, although this is of course
difficult to see without being able to zoom in on the image. I have done this with the
following code:
Generally, I do not want users to be able to zoom in on
any screen on the application, although this needs to be
done to allow the user to zoom in on an image of a map.
As you can see from the screenshot below, the user
clicks on the image of the map and only the map is
shown on the screen. The user is then able to zoom in
and out of the image and also click on the ‘X’ icon to go
back. As shown in the code snippet above, this is done
by retrieving the image that is going to be enlarged (the
image of the map) and the enlarged image of the map
that will replace the original image of the map on the
user’s screen. The source of the new enlarged image will
be defined as the image of the image of the map,
displaying this new enlarged image to the user. It will
also change one of the meta tags which does not allow
the user to scale (or zoom) what has been displayed on
their screen, this has been changed so that the user can
do so. When the user clicks on the ‘X’ icon, what had
previous been done has all been reversed. This means
that the new enlarged image is then hidden, and the meta
tag is then once again changed so that the user cannot
scale (or zoom) what has been displayed on their screen.
I have used this method throughout the application to
allow users to zoom into images of all of the tube and
individual line maps.
HTML components, such as <img>, <span>, etc.
As you can see from previous screenshots, the pages for the maps within the application have
an image of the map the user selected in the middle of the screen, although this is of course
difficult to see without being able to zoom in on the image. I have done this with the
following code:
Generally, I do not want users to be able to zoom in on
any screen on the application, although this needs to be
done to allow the user to zoom in on an image of a map.
As you can see from the screenshot below, the user
clicks on the image of the map and only the map is
shown on the screen. The user is then able to zoom in
and out of the image and also click on the ‘X’ icon to go
back. As shown in the code snippet above, this is done
by retrieving the image that is going to be enlarged (the
image of the map) and the enlarged image of the map
that will replace the original image of the map on the
user’s screen. The source of the new enlarged image will
be defined as the image of the image of the map,
displaying this new enlarged image to the user. It will
also change one of the meta tags which does not allow
the user to scale (or zoom) what has been displayed on
their screen, this has been changed so that the user can
do so. When the user clicks on the ‘X’ icon, what had
previous been done has all been reversed. This means
that the new enlarged image is then hidden, and the meta
tag is then once again changed so that the user cannot
scale (or zoom) what has been displayed on their screen.
I have used this method throughout the application to
allow users to zoom into images of all of the tube and
individual line maps.
One more very simple but vital addition to the application that I have made is to ensure a
service worker has been installed. This is part of what makes the application a PWA
(Progressive Web Application) and allows the user to install the application on their mobile
phones. How I have done this can be seen in code snippets from the screenshots below. The
first screenshot checks if there is a service worker and if so, communicated with “sw.js”
which is shown in the second screenshot, this will install a service worker in the user’s
browser. This will ultimately make the web application installable on users’ phones.
Evaluation
To evaluate the application, I have allowed access to the application to a few test users. As
the application is running from a NodeJS server on my local network, to make the server
accessible to these users who are of course external to my local network, I have used ngrok to
do so. These test users have provided me feedback on the application, including; potential
improvements, what they liked about the application and what they liked about the app.
As a result of the impact of the COVID-19 pandemic, testing the accuracy of the app in real-
time and allowing some test users to test my app, specifically the journey planner feature, has
proven impossible. Although I still have provided the app to some test users to test the app as
a whole and have gained some feedback from them. Below is the feedback they have given
me for the application from the perspective of a regular user, which I also have briefly
expanded on. I have also included some of their relevant information, such as which phone
they are accessing the application from so that I know the application is suitable for all
mobile operating systems and their initial to tell them apart, for my sake.
User #1
Initial: R
Gender: Male
Age: 21
Phone: Samsung Galaxy S9
Relevant Experience: None
Feedback:
• Loading sign – Add a loading symbol when a page is loading so in the case of long
loading times, the user knows the page is indeed loading and there is not any sort of
error.
• Make journey planner steps clearer – He told me that it is not clear that each step of
the route shown in journey planner is a separate step and this should be made clearer,
maybe by making the border between them clearer.
service worker has been installed. This is part of what makes the application a PWA
(Progressive Web Application) and allows the user to install the application on their mobile
phones. How I have done this can be seen in code snippets from the screenshots below. The
first screenshot checks if there is a service worker and if so, communicated with “sw.js”
which is shown in the second screenshot, this will install a service worker in the user’s
browser. This will ultimately make the web application installable on users’ phones.
Evaluation
To evaluate the application, I have allowed access to the application to a few test users. As
the application is running from a NodeJS server on my local network, to make the server
accessible to these users who are of course external to my local network, I have used ngrok to
do so. These test users have provided me feedback on the application, including; potential
improvements, what they liked about the application and what they liked about the app.
As a result of the impact of the COVID-19 pandemic, testing the accuracy of the app in real-
time and allowing some test users to test my app, specifically the journey planner feature, has
proven impossible. Although I still have provided the app to some test users to test the app as
a whole and have gained some feedback from them. Below is the feedback they have given
me for the application from the perspective of a regular user, which I also have briefly
expanded on. I have also included some of their relevant information, such as which phone
they are accessing the application from so that I know the application is suitable for all
mobile operating systems and their initial to tell them apart, for my sake.
User #1
Initial: R
Gender: Male
Age: 21
Phone: Samsung Galaxy S9
Relevant Experience: None
Feedback:
• Loading sign – Add a loading symbol when a page is loading so in the case of long
loading times, the user knows the page is indeed loading and there is not any sort of
error.
• Make journey planner steps clearer – He told me that it is not clear that each step of
the route shown in journey planner is a separate step and this should be made clearer,
maybe by making the border between them clearer.
Paraphrase This Document
Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
• Background colour is too bright – The shade of green used for the background colour
is too bright and the app may look more professional with a darker shade of green.
• CSS not properly adjusted to Android phones – The app was not displaying properly
on his phone, as this is a major issue I quickly adjusted the CSS and the app now
displays properly on all mobile devices, as he was the first test user and I quickly
fixed this, all other test users did not have the same issue.
User #2
Initial: N
Gender: Male
Age: 19
Phone: Samsung Galaxy S9+
Relevant Experience: Fairly acquainted with JavaScript and HTML creation.
Feedback:
• Option buttons too small, the option buttons on the journey planner page are too small
and should be made larger.
• The information that the app shows is very clear and informative, would definitely
recommend to tourists who aren’t familiar with the city.
• Good colour scheme – the colour scheme is very consistent and appropriate for the
app.
• The “All Attractions” button at the bottom of the home screen in the attractions
section does not make it clear that it is a button which you can click on, it just looks
like regular text (as it is uses a <span> tag with no text-styling).
User #3
Initial: Mi
Gender: Male
Age: 22
Phone: iPhone 11 Pro Max
Relevant Experience: Experienced with JavaScript and HTML.
Feedback:
• Good design but bad background colour – The design and layout of the app is very
good; the simplicity of the design makes the app easy to use. Although, the
background is too bright, a different colour or shade would be better.
• Great information – The app is very informative and gives the user all of the
information that they would need.
User #4
Initial: Maj
Gender: Female
Age: 19
Phone: Google Pixel
Relevant Experience: None
Feedback:
• A darker shade of green for the background colour would make the app more
professional as the current shade of green is too bright.
• The journey planner should not have option buttons, it should just display all of the
options in order of shortest time of journey to longest journey time on the same page.
is too bright and the app may look more professional with a darker shade of green.
• CSS not properly adjusted to Android phones – The app was not displaying properly
on his phone, as this is a major issue I quickly adjusted the CSS and the app now
displays properly on all mobile devices, as he was the first test user and I quickly
fixed this, all other test users did not have the same issue.
User #2
Initial: N
Gender: Male
Age: 19
Phone: Samsung Galaxy S9+
Relevant Experience: Fairly acquainted with JavaScript and HTML creation.
Feedback:
• Option buttons too small, the option buttons on the journey planner page are too small
and should be made larger.
• The information that the app shows is very clear and informative, would definitely
recommend to tourists who aren’t familiar with the city.
• Good colour scheme – the colour scheme is very consistent and appropriate for the
app.
• The “All Attractions” button at the bottom of the home screen in the attractions
section does not make it clear that it is a button which you can click on, it just looks
like regular text (as it is uses a <span> tag with no text-styling).
User #3
Initial: Mi
Gender: Male
Age: 22
Phone: iPhone 11 Pro Max
Relevant Experience: Experienced with JavaScript and HTML.
Feedback:
• Good design but bad background colour – The design and layout of the app is very
good; the simplicity of the design makes the app easy to use. Although, the
background is too bright, a different colour or shade would be better.
• Great information – The app is very informative and gives the user all of the
information that they would need.
User #4
Initial: Maj
Gender: Female
Age: 19
Phone: Google Pixel
Relevant Experience: None
Feedback:
• A darker shade of green for the background colour would make the app more
professional as the current shade of green is too bright.
• The journey planner should not have option buttons, it should just display all of the
options in order of shortest time of journey to longest journey time on the same page.
User #5
Initial: P
Gender: Male
Age: 21
Phone: iPhone X
Relevant Experience: None
Feedback:
• The app is very user friendly and easy to navigate through.
• The app would be very useful for tourists as all of the necessary information that they
would require is included.
• The app’s icon is very good so it would be a good improvement to add the icon to the
app’s home page.
• Does not like the choice of font used in the app.
User #6
Initial: Max
Gender: Male
Age: 20
Phone: Samsung
Relevant Experience: None
Feedback:
• The app is very user friendly and the UI is very organised.
• Having all of the necessary information such as line statuses, maps, attractions, etc.
was very useful.
• Did not like that you have to be very specific with the name of the location you input
in the journey planner feature.
• Would be useful to new users if journey planner indicated whether the time of the
journey was the standard time of the journey or whether it was the current time of the
journey in real time.
After reviewing feedback from some test users, I have clearly identified some areas for
improvement. One common suggestion is that the background colour is too bright, and a
different shade of green may be more appropriate and make the app look more professional.
This is interesting because when gaining feedback for the wireframe, I was told the previous
colour I had chosen was too dark. In my opinion, the colour chosen is appropriate, most
similar travel apps use the colour green and also a very similar shade. Although, the user’s
feedback is important and should be taken seriously. It is also clearly that the test users feel
that the app otherwise has a good design, layout and the overall UI is very good. Overall, I
have identified that users have a good UX. It would also be useful to some users to make
small changes as mentioned such as; showing all journey planner options on the same page in
order of journey time. The most important issue I had identified which one test user
mentioned is how precise you must be with the location you must enter into journey planner;
this will be detailed further later on.
Referring back to the requirements I had made for the application, I do feel that all of the set
requirements have been met. You are able to find directions to a tourist direction directly
from the attraction’s page, the app provides you information on these attractions, the journey
planner supports all modes of transportation and will always give the user the best routes to
their destination, the journey planner shows the length of time that each step of the routes will
take, the app shows if any lines are having any issues (in the lines statuses section of the
Initial: P
Gender: Male
Age: 21
Phone: iPhone X
Relevant Experience: None
Feedback:
• The app is very user friendly and easy to navigate through.
• The app would be very useful for tourists as all of the necessary information that they
would require is included.
• The app’s icon is very good so it would be a good improvement to add the icon to the
app’s home page.
• Does not like the choice of font used in the app.
User #6
Initial: Max
Gender: Male
Age: 20
Phone: Samsung
Relevant Experience: None
Feedback:
• The app is very user friendly and the UI is very organised.
• Having all of the necessary information such as line statuses, maps, attractions, etc.
was very useful.
• Did not like that you have to be very specific with the name of the location you input
in the journey planner feature.
• Would be useful to new users if journey planner indicated whether the time of the
journey was the standard time of the journey or whether it was the current time of the
journey in real time.
After reviewing feedback from some test users, I have clearly identified some areas for
improvement. One common suggestion is that the background colour is too bright, and a
different shade of green may be more appropriate and make the app look more professional.
This is interesting because when gaining feedback for the wireframe, I was told the previous
colour I had chosen was too dark. In my opinion, the colour chosen is appropriate, most
similar travel apps use the colour green and also a very similar shade. Although, the user’s
feedback is important and should be taken seriously. It is also clearly that the test users feel
that the app otherwise has a good design, layout and the overall UI is very good. Overall, I
have identified that users have a good UX. It would also be useful to some users to make
small changes as mentioned such as; showing all journey planner options on the same page in
order of journey time. The most important issue I had identified which one test user
mentioned is how precise you must be with the location you must enter into journey planner;
this will be detailed further later on.
Referring back to the requirements I had made for the application, I do feel that all of the set
requirements have been met. You are able to find directions to a tourist direction directly
from the attraction’s page, the app provides you information on these attractions, the journey
planner supports all modes of transportation and will always give the user the best routes to
their destination, the journey planner shows the length of time that each step of the routes will
take, the app shows if any lines are having any issues (in the lines statuses section of the
home page) and I do feel that the font sizes used within the application are most appropriate.
This covers all of the requirements that have been made for the application so I am confident
in saying that the application has met all of the previously listed requirements.
As mentioned, in my personal opinion, to evaluate the application against the requirements, I
do feel that most of the requirements were met although they could have been met to a better
standard. To make the app more user friendly, the UI could most definitely be improved,
aspects that more professional applications contains such as animation could have been
implemented into my application. Another major issue I found are the loading speeds, whilst
they are generally good, loading speeds are crucial and very important to users, every wasted
second in loading information can leave a user frustrated and make them want to use the
application. As most of the front-end of the application uses a lot of JavaScript to load,
loading speeds can sometimes be extensively long which as mentioned, could leave users
frustrated. So, lowering loading times is definitely an improvement that could be made.
Conclusion
I mostly feel that the problem was properly addressed with the creation of the app. The app
does fulfil the majority of the requirements that were previously listed and also to a good
standard, has a user-friendly user interface and includes most of the features that any traveller
in London, especially a tourist, would require. As evident by test users’ feedback, the app
especially has a good UI, which makes for a better UX.
Although, there are most definitely some areas of improvement. Within the journey planner
feature, it would be very helpful if the user would receive suggestions for locations as they
type, like in most popular apps within this genre. Although I did initially think of this, the
only realistic solution for this is to create a database of every location in London, although for
just one individual like me to do so, is very difficult and would be infeasible. As a result of
this, users have to be very precise with the location they input because of TFL’s API only
accepts very precise names of locations or postcodes. The other important flaw in my app is
the amount of JavaScript used, this can sometimes affect loading speeds, although sometimes
this is dependent on the response speed from TFL’s API rather than my own app. These are
just a couple major improvements I initially thought of, in all honesty, although I do think the
application is a success, when compared to other popular applications such as Google Maps
and Citymapper, it is difficult to image any users using the application that I have created
rather than more popular applications like those.
In conclusion, I do think that my project was a success and a good solution to the problem,
and it was addressed successfully. After thorough testing, the application does not contain
any errors or issues, runs smoothly and based on the feedback from test users, is an overall
good application. As a result, I am confident in calling this a success.
This covers all of the requirements that have been made for the application so I am confident
in saying that the application has met all of the previously listed requirements.
As mentioned, in my personal opinion, to evaluate the application against the requirements, I
do feel that most of the requirements were met although they could have been met to a better
standard. To make the app more user friendly, the UI could most definitely be improved,
aspects that more professional applications contains such as animation could have been
implemented into my application. Another major issue I found are the loading speeds, whilst
they are generally good, loading speeds are crucial and very important to users, every wasted
second in loading information can leave a user frustrated and make them want to use the
application. As most of the front-end of the application uses a lot of JavaScript to load,
loading speeds can sometimes be extensively long which as mentioned, could leave users
frustrated. So, lowering loading times is definitely an improvement that could be made.
Conclusion
I mostly feel that the problem was properly addressed with the creation of the app. The app
does fulfil the majority of the requirements that were previously listed and also to a good
standard, has a user-friendly user interface and includes most of the features that any traveller
in London, especially a tourist, would require. As evident by test users’ feedback, the app
especially has a good UI, which makes for a better UX.
Although, there are most definitely some areas of improvement. Within the journey planner
feature, it would be very helpful if the user would receive suggestions for locations as they
type, like in most popular apps within this genre. Although I did initially think of this, the
only realistic solution for this is to create a database of every location in London, although for
just one individual like me to do so, is very difficult and would be infeasible. As a result of
this, users have to be very precise with the location they input because of TFL’s API only
accepts very precise names of locations or postcodes. The other important flaw in my app is
the amount of JavaScript used, this can sometimes affect loading speeds, although sometimes
this is dependent on the response speed from TFL’s API rather than my own app. These are
just a couple major improvements I initially thought of, in all honesty, although I do think the
application is a success, when compared to other popular applications such as Google Maps
and Citymapper, it is difficult to image any users using the application that I have created
rather than more popular applications like those.
In conclusion, I do think that my project was a success and a good solution to the problem,
and it was addressed successfully. After thorough testing, the application does not contain
any errors or issues, runs smoothly and based on the feedback from test users, is an overall
good application. As a result, I am confident in calling this a success.
Secure Best Marks with AI Grader
Need help grading? Try our AI Grader for instant feedback on your assignments.
User Guide
When you first open the application, you will see
the home screen. At the top of the home screen
you will of course see the top bar which is on
every page within the application. The first feature
of the application from the home page is the
journey planner, the journey planner allows you to
find directions from your desired location to your
chosen destination.
As you can see, I have entered two locations, my own
postcode and the postcode of a location in Leicester
Square. The application will then display directions to
my chosen destination. You can also click on the
option buttons to display alternative routes to your
chosen destination. The application will display each
step of the route, display an icon of the mode of
transportation and also tell you the length of time that
each step will take.
As you can see from the screenshots above, on the home screen, there will be a section called
“Line Statuses”, you can click one of these lines and you will be taken to the line’s page
which includes more detailed information on the line’s status and also a map of the line. You
can click on the image of the map to enlarge the map and zoom in and out of it, you can also
click on the ‘X’ icon to go back to the line’s page.
When you first open the application, you will see
the home screen. At the top of the home screen
you will of course see the top bar which is on
every page within the application. The first feature
of the application from the home page is the
journey planner, the journey planner allows you to
find directions from your desired location to your
chosen destination.
As you can see, I have entered two locations, my own
postcode and the postcode of a location in Leicester
Square. The application will then display directions to
my chosen destination. You can also click on the
option buttons to display alternative routes to your
chosen destination. The application will display each
step of the route, display an icon of the mode of
transportation and also tell you the length of time that
each step will take.
As you can see from the screenshots above, on the home screen, there will be a section called
“Line Statuses”, you can click one of these lines and you will be taken to the line’s page
which includes more detailed information on the line’s status and also a map of the line. You
can click on the image of the map to enlarge the map and zoom in and out of it, you can also
click on the ‘X’ icon to go back to the line’s page.
As you can see from the screenshots above, on the home screen, there will be a section called
“Maps”, you can click on of these maps to be taken to the map’s page. You can click on the
image of the map to enlarge the image of the map and zoom in and out of it. You can also
access the other maps directly from the page.
As you can see from the
screenshots on the left, on the
home screen, there will be a
section called “Attractions”. You
can click on one of these
attractions to be taken to the
attraction’s page or click on “All
Attractions” to see the full list of
attractions. From an attraction’s
page, you can see information on
the attraction and also find
directions to the attraction directly
from this page.
Appendices
PLEASE NOTE that the application is made to be viewed on mobile devices and the CSS is
adjusted just for this purpose, the application will not display properly on a computer’s web
browser as the application has not been created for web use and must be viewed on a mobile
device or Chrome’s mobile simulator. This can also all be done in Glitch (found below).
GitHub
Below is a link to the GitHub repository containing all of the source code:
https://github.com/bhavesh47135/travelapp
“Maps”, you can click on of these maps to be taken to the map’s page. You can click on the
image of the map to enlarge the image of the map and zoom in and out of it. You can also
access the other maps directly from the page.
As you can see from the
screenshots on the left, on the
home screen, there will be a
section called “Attractions”. You
can click on one of these
attractions to be taken to the
attraction’s page or click on “All
Attractions” to see the full list of
attractions. From an attraction’s
page, you can see information on
the attraction and also find
directions to the attraction directly
from this page.
Appendices
PLEASE NOTE that the application is made to be viewed on mobile devices and the CSS is
adjusted just for this purpose, the application will not display properly on a computer’s web
browser as the application has not been created for web use and must be viewed on a mobile
device or Chrome’s mobile simulator. This can also all be done in Glitch (found below).
GitHub
Below is a link to the GitHub repository containing all of the source code:
https://github.com/bhavesh47135/travelapp
Glitch
Below is a link to my Glitch project where the code can be run all within the browser:
(although you will need to inform me when you want to do so that I can start the server)
https://bhavesh47135-travelapp.glitch.me
Video Viva
If needed, a YouTube link to my video viva can be found here: https://youtu.be/aCpapjdb_nE
References:
• Medium. (2020). Hybrid VS Native App: Which one to choose for your business?
[online] Available at: https://medium.com/existek/hybrid-vs-native-app-which-one-
to-choose-for-your-business-e51542554078.
• Sheppard, Dennis. (2017) Beginning progressive web app development creating a
native app experience on the web. United States: Apress.
• Freeman, Adam. (2012) Pro JavaScript for Web Apps. 1st ed. 2012. Berkeley, CA:
Apress. doi: 10.1007/978-1-4302-4462-2.
• freeCodeCamp.org. (2020). Angular vs React: Which One to Choose for Your App.
[online] Available at: https://www.freecodecamp.org/news/angular-vs-react-what-to-
choose-for-your-app-2/
Below is a link to my Glitch project where the code can be run all within the browser:
(although you will need to inform me when you want to do so that I can start the server)
https://bhavesh47135-travelapp.glitch.me
Video Viva
If needed, a YouTube link to my video viva can be found here: https://youtu.be/aCpapjdb_nE
References:
• Medium. (2020). Hybrid VS Native App: Which one to choose for your business?
[online] Available at: https://medium.com/existek/hybrid-vs-native-app-which-one-
to-choose-for-your-business-e51542554078.
• Sheppard, Dennis. (2017) Beginning progressive web app development creating a
native app experience on the web. United States: Apress.
• Freeman, Adam. (2012) Pro JavaScript for Web Apps. 1st ed. 2012. Berkeley, CA:
Apress. doi: 10.1007/978-1-4302-4462-2.
• freeCodeCamp.org. (2020). Angular vs React: Which One to Choose for Your App.
[online] Available at: https://www.freecodecamp.org/news/angular-vs-react-what-to-
choose-for-your-app-2/
1 out of 25
Related Documents
Your All-in-One AI-Powered Toolkit for Academic Success.
+13062052269
info@desklib.com
Available 24*7 on WhatsApp / Email
![[object Object]](/_next/static/media/star-bottom.7253800d.svg)
Unlock your academic potential
© 2024 | Zucol Services PVT LTD | All rights reserved.