Met de groei van de applicaties groeit ook de gebruikte tekst in de applicatie. Aangezien alle producten minimaal Engels en Nederlands bevatten, is alle tekst geplaatst in “vertaalstrings” en de hoeveelheid daarvan groeit aardig snel. Tijdens de YNC-hackathon (lees hier meer) was één van de uitdagingen om de vertalingen beter te beheren over de drie producten (Academy Attendance, EduTasQ & SQill) heen.
Waarom een translation-editor?
Onze applicaties groeien en hierdoor zijn er ook oplossingen nodig die meegroeien om vertalingen meer schaalbaar en inzichtelijk te maken. Het idee was om de interne processen en werkzaamheden efficiënter te maken. Tegelijkertijd wilde we ook de vertalingen consistenter en daarmee gebruiksvriendelijker maken. Hiervoor werd een translation-editor uitgewerkt tijdens de hackathon.
Met de translator-editor kan de taal in de producten beter beheerd worden doordat:
- Vertaalstrings makkelijk toegevoegd, gewijzigd en verwijderd kunnen worden. Dit voorkomt het aanpassen van losse bestanden of grote files waarbinnen je lang aan het zoeken bent.
- Het zorgt voor meer structuur en maakt het eenvoudiger om vertalingen te kunnen hergebruiken en goed te kunnen herkennen in de code.
- Het geeft meer inzicht en analysemogelijkheden om te zorgen dat steeds hetzelfde begrip gebruikt wordt, alles vertaald is en ook dat het supportteam toegang heeft tot de bestanden.
Wanneer wij in de toekomst meer talen willen toevoegen aan onze producten zou dit ook toegevoegd kunnen worden aan de translation-editor om direct inzichtelijk te maken welke vertalingen nog toegevoegd moeten worden.
De translation-editor werd tijdens de hackathon zowel in een stand-alone applicatie (in Vue.js) gebouwd als via een plug-in voor onze ontwikkelomgeving.
Stand-alone app in Electron
Tijdens de hackathon bekeek deze groep de mogelijkheden van een stand-alone app in het framework Electron in combinatie met Vue.js. Hiermee is het niet geïntegreerd in één van onze producten maar echt een los product dat breed binnen Your Next Concepts gebruikt kan worden.
De stand-alone applicatie leest allereerst alle vertaalbestanden uit, of het nu gaat om JavaScript- bestanden in de frond-end of PHP-bestanden in de back-end. De uitdaging hierbij is het parsen van deze bestanden van en naar JSON door de vele uitzonderingen (quotes, dubbele quotes, backticks etc.). Een normale parser gebruiken kan niet omdat de vertaalapp de bestanden in de laatste stap weer terugschrijft, waardoor de bestaande structuur gewaarborgd blijft.
Na het inlezen kan de translation-editor:
- Overzichtelijk alle vertalingen bij elkaar tonen, filteren en doorzoeken. Dit zorgt ervoor dat gebruikte termen in de applicatie eenduidig worden gebruikt. Denk aan termen als vak, module of onderwijseenheid, wat wij altijd hetzelfde willen benoemen.
- Het project scannen om te zien óf, waar en hoe vaak een vertaling gebruikt wordt binnen het project.
- Fouten in vertalingen (verkeerde spelling, dubbele vertalingen en missende vertalingen) zichtbaar maken.
- en natuurlijk eenvoudig vertalingen aanpassen of toevoegen.
Uiteindelijk worden de bestanden die in de codebase zitten door de app aangepast, zodat deze “gecommit” kunnen worden bij een nieuwe versie. De technici onder ons denken vast: “hoe kan een JavaScript- applicatie naar disk wegschrijven?” Het antwoord volgt in een volgende blog.
Met de stand-alone app hoeft er niks aangepast te worden in de structuur van het project en is de app echt stand alone, zowel in gebruik, code als impact op het project.
Intellij Plug-in
Naast een stand alone app werd er ook gekeken naar de mogelijkheden deze functionaliteiten te integreren in onze ontwikkelomgeving van Intellij. Hiervoor werd een bestaande plugin aangepast om te dienen als een translation-editor.
