Translating the Trams app into 18 languages

I finally did something I’d been wanting to do for ages; translate the Manchester Trams app and this article details how I went about it.

The idea of translating the app had been on my to-do since the early days of the app but I had always assumed I’d need to pay for a translations service to convert a number of phrases into each language I wanted in the app. However, it turns out I was dead wrong!

Copilot Things

Whilst working on a translation file and having Github Copilot enabled, it auto-suggested the fully translated file of about 25 phrases from English to Spanish. I was surprised at first, but then it made sense, if Copilot is just a large language model then surely it could do translations. Although I assumed it was only finetuned for code scenarios. I checked a handful of the generated phrases with Google Translate, and realised this could be used on that one task sat on my to-do list.

Now that I knew Copilot could translate a handful of phrases somewhat accurately, I opened up the Trams app codebase and started ripping out hard-coded phrases into a locale file. With the app being built on Vue and Ionic, I used the Vue-i18n package for managing locales and translation files. Meanwhile, folks on the r/Manchester subreddit were kind enough to list common languages around the City so that I knew which languages to translate into.

Here’s the short list:

Arabic, Bengali, Czech, Chinese (Simplified), Farsi, Irish, Hindi, Kurdish, Punjab, Polish, Romanian, Sorani, Spanish, Tingrinya, Turkish, Urdu, and Welsh

With each locale file created ( en.json, es.json etc), I wrote a comment at the top of each with the original english key values and another comment asking for the language to translate them to and like magic, Copilot generated them.

Here’s an example of the Spanish file:

{
  "good-morning": "Buenos días 🌅",
  "good-afternoon": "Buenas tardes 🌞",
  "good-evening": "Buenas noches 🌙",
  "enjoying-the-app": "¿Disfrutando de la aplicación?",
  "leave-a-review": "Dejar una reseña",
  "hide": "ocultar",
  "search-stations": "Buscar estaciones",
  "favourites": "Favoritos"
}

Rinse and repeat 18 times, and add a Language Selector page and the app now support Translations!

"Arrr, jus' one more tongue!”

There was also a language translation I added myself, something I’d always wanted to add to one of my apps after seeing it added to games I’ve played. Pirate!

With this one, I opened ChatGPT instead and asked it to translate my English key values to Pirate, which it did a pretty good job at, and the more it translated, the more excited I was to release it to the public.

Here’s a few of my favourite translations for Pirate:

{
  "stations": "Ports",
  "stops": "Anchor Points",
  "single-carriage": "Single Ship",
  "double-carriage": "Double Ship",
  "arriving": "dockin'",
  "departing": "settin' sail",
}

With these translations, I’ve decided every future app I make will support Pirate 😄

Yo hoy, update ahoy!

It was finally time to launch it, and with some final tweaks and an event to track language changes, I released it onto the Play Store in a matter of hours from first opening VS Code. AI had not only saved me money but also time!

That’s all for this article!

Happy coding 😎