I finally did something I’d been wanting to do for ages: translate the Manchester Trams app. This article details how I went about it.
The idea of translating the app had been on my to-do list since the early days of the app, but I had always assumed I’d need to pay for a translation service to convert a number of phrases into each language I wanted in the app. However, it turns out I was dead wrong!
While 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 fine-tuned for code scenarios. I checked a handful of the generated phrases with Google Translate and realized this could be used for that one task sitting 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 shortlist:
Arabic, Bengali, Czech, Chinese (Simplified), Farsi, Irish, Hindi, Kurdish, Punjabi, Polish, Romanian, Sorani, Spanish, Tigrinya, 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 supports Translations!
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 favorite 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! 😄
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! 😎