Milestone Project 2 Interactive Front-End Development - AlightLiaoLah (ALL) Singapore Bus Stop and Bus Finder

Problem Statement

Travelling around in Singapore by public bus is a common transport that most of us would inevitably use in our daily commute. From transition between different type of transport to long distance travelling, public bus provides the cheapest and accessible means to reach our destination. Moreover, many of the bus stop are located near common amenties or landmarks, which makes it a prefer choice among the rest of the public transport.

Despite its popularity, finding information about a bus service route or available bus service or bus stop location could be difficult, especially when you are at unfamiliar places. Also, interpretation of bus stop display information could also be challenging if one doesn't has good sense of orientation (see figure below).

To overcome this inadequacy, many would search online for bus route, location, or street name and this information is usually built into an app or web page which encompasses an interactive map showing the real-time location of bus and routes. To aid app developer, bus information api is also available with information on the bus service no, arrival time etc (see below figure).

Fig 3 - Bus api result using postman

Hence, by leveraging on technology such as bus information api, this application was made to address this problem.

UX

Realization of this project depends on the availability of users and technologies. Users would be public bus commuters or individual who has lost his/her way at some unfamiliar places. This application should fulfill their following needs:

• "I want to find the nearest bus stop from my location within a walkable distance."
• "I want to find the bus stop which I need to alight."
• "I want to find a particular bus stop."
• "I want to know where is the bus now."
• "I want to know my current location."
• "I want to know when is the bus going to arrival."
• "I want to know what are the bus services available at the bus stop."
• "I want to know the name of the street or road or bus stop code."

By using front-end and back-end technologies such as bootstrap, restful api, the user's needs can be achieved. This application would present a landing page of a singapore map with clickable buttons and text boxes for user's inputs. It would provides user on the location of the bus, bus stop and user, as well as real-time information of a bus stop and bus. A wireframe of this application can be found here.

Features

Existing Feature

• 
  From/To Query Boxes - This feature allow user to input a starting point or destination bus stop code or road name or street name.
  
  

• 
  

  Buttons - (From left to right) The "YOU ARE HERE" button allow user to retrieve current location information to the application, which will then be filled into the "FROM" query box. The "i" button is a help feature that display information about this application and user guides. The github icon button opens a new tab from a browser to the git repository of this application.
  
  

• 
  

  Bus Stop Icons on Map - This feature allow user to click the bus stop icon on the map to retrieve bus stop information and displayed onto the bus stop information card.The codes to be able to click onto each bus stop icon is partially extracted from app.js as shown below:

  map.on("click", "fullbuststopcode", function (e) {//codes 
  ....}
  

  
  
• 
  

  Bus Information Cards - This feature displays information of a bus stop.
  
  

• 
  

  Map Markers - (From left to right) "YOU ARE HERE" marker shows the user current location on the map. The animated green "S" and red "D" markers show the locations of the address or bus stop code retrieved from the "FROM" and "TO" query boxes. The animated white down arrow marker indicates selected bus stop on the map by the user. The animated red bus location marker shows real time location of a bus with its service number and arrival time to the queried bus stop. The codes to make each marker is partially extracted from app.js as shown below:

  function makedommarker(
    map,
    markerid,
    imgsrc,
    width,
    height,
    clickedlong,
    clickedlat,
    busno = "",
    busarr = ""
  ) {//codes 
  ....}
  

Feature Left to Implement

• Bus Path/Route between Starting Point and Destination with user location
  This feature will shows the path between the starting point to the destination together with the user location. This can also be shown onto the bus stop information card.
  
  
• Alight Alert
  This feature will reminds the user when to alight from the bus.
  
  
• Bus Service Number Recommendation
  This feature will guide the user which bus service number to board in order to reach the destination.
  
  

Technologies Used

• HTML/CSS
  The project uses HTML/CSS for base template and styling of the landing page.
• Javascript
  The project uses Javascript as the primary programming language.
• Bootstrap
  The project uses Bootstrap for the application responsiveness for different screen sizes.
• SVG Animation
  The project uses SVG animation for the animation of markers.
• Inkscape
  The project uses inkscape for creating svg files.
• MapboxGL JS
  The project uses MapboxGL.js for manipulation of map using javascript.
• Mapbox Studio
  The project uses Mapbox Studio for manipulation of map to include bus stop location and icons.
• JQuery UI
  The project uses JQuery UI for the autocomplete function when user type into the query boxes.
• JQuery
  The project uses JQuery to ease the manipulation of DOM.
• Jupyter Notebook
  The project uses Jupyter Notebook for the creation of the bus stop location geodata, which is used in the mapbox studio.
• Heroku
  The project uses Heroku to host the cors anywhere instance to address the CORS setting issue when pulling from the bus stop information api.
  
  

Testing

Responsiveness

360 x 640

375 x 812

411 x 731

768 x 1024

Bugs/Problems Encountered

There are a numbers of bugs or problems encountered during the development of the project. Much of these issues are due to the restful api as explained below:

• Cross-Origin Resource Sharing (CORS) Error
  
  During the request of api response from the bus stop information api, an CORs error was encountered. This caused the application unable to receive any information. This was temporary resolved by running the application on a browser with lower security setting. However, this solution was not feasible as the application will be hosted using github.
  Hence, an open source nodejs proxy, called Cors Anywhere , was used to add CORS headers to the proxied request. This was done by prefix the URL to the bus stop information api url as follow:
  

  "https://cors-anywhere.herokuapp.com/http://datamall2.mytransport.sg/ltaodataservice/BusStops?$skip=" +
  apicalls,
  

  While the solution worked with no cors error, due to the high number of api call requests during the initial loading of the page and other users of the same proxy, another error occured:
  
  An eventual solution was soughted by hosting an instance of the cors anywhere proxy with whitelist limitation to only requesting from the bus stop information api. This proxy instance was hosted using heroku with the following new url:

  "https://cors-anywhere-tcgversion.herokuapp.com/http://datamall2.mytransport.sg/ltaodataservice/BusStops?$skip=" +
            apicalls,           
  

  By hosting a cors anywhere proxy instance which only accepts the bus stop information api, this will prevent others from using it as an open proxy. Hence, the proxy instance will only needs to serve this application and only requesting from the bus stop information api.
  
  

• Missing Latitude and Longitude Information From API Server
  During the testing on markers, these markers, at some time, were found to be positioned into the sea on the map. It was then found out that the cause was due to the missing information from the api server. An eventual solution was implemented in the backend codes to check for missing api information and remove the markers if not available.

Deployment

The website is hosted using github page and can be accessed via here.

Credits

Media

Bus stop display board photo was obtained from LandTransportGuru

Acknowledgements

• Geodatasource on the sample code for the calculation of distance between 2 coordiates distance.

• Trent colleage staff and classmates for feedbacks on website design

• Design of logo are sourced from Freepik.

• Reference script for toast message.

• Bootstrap 4 floating label css from floatinglabel.

• Readme template from Code Institute.

• For hosting the cors anywhere instance Cors Anywhere.

• Bus information api for the Singapore bus stop information.