Your Next Concepts

Gebruiksvriendelijkheid is erg belangrijk in de applicaties van Your Next Concepts. Taal speelt hierin een belangrijke rol. 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.

Gebruikers kunnen hierin alle vertalingen zien (binnen de directory structuur) en zelf aanpassingen doen. Missende vertalingen kleuren rood, zodat developers snel zien wat er nog mist. Deze plugin zorgt ervoor dat het aanpassen van vertalingen minder tijd kost en de nauwkeurigheid van de vertalingen verder vergroot wordt.Een bijkomend voordeel is dat de ontwikkelaars alles binnen één omgeving kunnen zien en aanpassen én dat dit ook weer voor alle producten van Your Next Concepts werkt!

Vervolgstappen

Tijdens de hackathon is er een basis gelegd voor deze apps en is er veel geleerd. Deze lessen komen op een aantal punten terug in het dagelijks werk:

Er worden aanvullende tests toegevoegd die signaleren of een vertaalstring is opgenomen. Dit zorgt ervoor dat gebruikers nooit meer een onbegrijpelijke tekst zien als “users.name” zien, maar altijd een juiste vertaling, zoals gebruikersnaam.
Bij het vertalen wordt intensiever samengewerkt met het supportteam. Zij kennen de klanten vaak het beste en zorgen ervoor dat de juiste terminologie gebruikt wordt.
De translator-editor wordt langzaam doorontwikkeld en zal binnenkort in beta versie beschikbaar komen als open source repository.