In an article I wrote last year (currently in the archive) about how I built the first version of the Manchester Trams app, I concluded the article with “since launch a handful of people have installed the app, so I think I can call this one a success.”. Now, roughly 8 months later, over 140 people use the app to navigate the Metrolink system.

With the app being a great success, I started planning v4 almost as soon as I released v3 in December but shelfed the update after deciding v3 was good enough for now. That was until about a week ago when I realised I needed to move the API from one server to another and figured I could probably add some new features to it in the process.

Station Locator Device

Since then, I’ve spent my free time adding and testing new features to the app. The first and easiest being a station locator that would show a user the closest station to their current location.

For this, I decided to ask ChatGPT how I could return a station from longitude and latitude query parameters and within 10 minutes I had a functioning station locator endpoint using the following code;

let smallestDistance = Infinity;
const degToRad = Math.PI / 180;

// Loop through each station and calculate the distance
for (const station of stations) {
    const R = 6371; // Radius of the earth in km
  const lat1 = inputLatitude;
  const lon1 = inputLongitude;
  const lat2 = Number(station.latitude);
  const lon2 = Number(station.longitude);
  const dLat = (lat2 - lat1) * degToRad;
  const dLon = (lon2 - lon1) * degToRad;
  const a =
          Math.pow(Math.sin(dLat / 2), 2) +
      Math.cos(lat1 * degToRad) *
      Math.cos(lat2 * degToRad) *
      Math.pow(Math.sin(dLon / 2), 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  const distance = R * c;

  if (distance < smallestDistance) {
      closestStation = station;
    smallestDistance = distance;
  }
}

On the app side, this feature is just a simple button in the lower right of the app’s home screen.

Tickets Please

A “feature” I wanted to add since the apps inception is the ability to show ticket prices for each zone. Inspiration for this came from Travel for Greater Manchester’s own website where a user selects the zones they’re travelling through and ticket prices for every category is returned.

As there was no official endpoint for returning ticket information from TfGM’s API, I decided I’d gather the information manually (ish) from their website and store it in my own database. By “ish”, I mean I selected every possible combination of zones and copied the html table into ChatGPT where it returned a neat JSON array of objects.

However, this proved tedious even with the AI so I only collected information for the “Adults” category. Once I had all the data saved in a JSON file, I processed it into the database and wrote a simple endpoint that accepted the start and end zones as query parameters and returned the relevant ticket prices.

One thing that I improved here over TfGM’s official website is that not all zones in your journey need to be selected, instead all you need is the start and end zone and the prices are returned. With all features I build into the app, I try to see how the official apps and websites are doing it and try to improve it, in this case it was just a simple change.

We’re going on an adventure

The final and largest feature I added to this version was a better Journey Planner. In version 3 I’d written a very basic journey planner that sort of worked but also didn’t, hence the disclaimer I added on the page.

In v4, I went back to the drawing board on how to build a journey planner and after spending practically all day on the problem, I had solved it in around 300 lines of code. In simple terms, it now works better than it did before, but with a few hiccups here and there so I kept the disclaimer in v4 too.

My favourite part of the Journey Planner was the design. I wrote some code that would return an array of all the stations a user would pass by on their journey and was excited to incorporate a “timeline” into the app. In the end, I had the following design which I quite proud of;

I also added tabs on this page to show the user the Adult ticket prices for this journey and a “contribute” tab.

”What’s the contribute tab?” I hear you say

I couldn’t come up with a better name for it but I wanted to collect some data on how long journeys around the city take and thought the best way to do that was to simply allow users to submit the approximate time (in minutes) that it took to complete their journey.

This data, if anyone submits anything, will eventually be added to the app so users can see that average time it takes to get around the network. I thought this was a pretty cool feature to add and data collected will help to improve the app for everyone using it.

Bugs, future features and everything in between.

Along the way I also fixed a few styling bugs I’d noticed here and there including making dark mode look a bit better by adding a new “shark” colour to Tailwind.

Additionally, I updated the events I collect from the app and built a small dashboard to track these, as well as built an alerts system so I can display messages to users. This came about when someone left a review about departure times not showing in the app due to a technical issue from TfGM and I realised this sort of notification system would allow me to pass info onto the user easier.

As for future features, I’m currently working on a widget to allow users to receive real-time departures for any station from their home screen. It’s taking a little bit longer than usual to add as I’ve had to actually write code in Android Studio instead of the Ionic Framework that the app is built upon. I’m pretty excited to get this feature out to users within the next week or two. Once that’s done, I can call the Android App officially completed and move onto other exciting ideas relating to the Manchester Trams app.

Thanks for reading and happy coding! 😎

Live in Manchester and own an Android? Get the app here.