My bus tracker has been created using HTML, CSS, JavaScript, PHP and uses the Bus Open Data Service (BODS) API.

When you access the Bus Tracker web page, the browser sends a HTTP request to the server, asking it to send a copy of the page to the client (the computer and browser you are using to view the website). If the server approves this request, it begins to send the requested files to the browser in small chunks known as ‘packets’. The browser then assembles these packets into a complete web page and displays it to you, the user.

The browser parses the HTML file first, in this instance ‘bus.html’ which contains the structure of the webpage. The HTML file contains a link tag and a script tag which indicates that there is a CSS file which is required to style the web page, and also that there is a script (JavaScript) file which is required to provide the functionality of the web page. As the browser parses the HTML, it will send further requests to the server for these CSS & JavaScript files, and then processes these files as well.

In order to get the relevant bus location data to display on the page, I’ve had to use something called the ‘Bus Open Data Service’ (BODS). This is the government funded service for publishing information for all local bus services in England. The Bus Services Act 2017 requires operators of local bus services in England to publish data to the Bus Open Data Service.

To access the data, we have to use the BODS API and complete an API call to request the relevant information (API, Application Programming Interface, is a way of requesting information from services across the internet). To do this, I had to create an account with BODS in order to get what is called an API key. The API key is a unique identifier which authenticates and authorises a user in order so that they are then able to access the relevant data.

This raises an issue. If I were to include the API within my JavaScript file, since this is ‘client side’ it is available for anyone to see, therefore compromising the security of the API key granted to me personally. This is where PHP comes into play. PHP is a ‘server side’ scripting language. As PHP is server side, and will not be visible client side, I’ve created a PHP script which is used to read the BODS data, parse the response as XML, narrow the returned data down to the specific data that I want to use, encode this data as a JSON string and then print the data as a script response so that it is readable by the client side JavaScript.

Within the JavaScript file, I reference the PHP script that I’ve created, complete a fetch request to request the JSON string data, convert this to JSON format so that I am then able navigate through the data and get the individual bus location data, and then use this to display all of the T1 buses, which location they’re at, which direction they’re heading in - and this information is being updated every 10 seconds so that the user is always seeing live information.

This may sound highly complicated, but the individual parts used are simple. It is really the use of several parts that work together to make a simple web page like this come to life. Full stack applications such as this bus tracker encompass two separate web development domains - the front end and the back end. The front end includes everything that you can see and interact with on the web page. The back end refers to all the servers, databases, scripts and API calls that drives the application.