Skip to content

UC3: Vertalen woorden/teksten

Primary Actor: ACT1: Gebruiker
Stakeholders and Interests: ACT3: AI-tool, ACT4: Git versiebeheer systeem, ACT5: CDN Service
Technisch ontwerp use case: UC3: Vertalen woorden/teksten
Beschrijving: De gebruiker wil woorden of teksten vertalen in een project, zodat de vertalingen in het project op een makkelijke manier aangepast kunnen worden.

1. Fully dressed use case

Precondities
1. ACT1 is ingelogd
2. ACT1 heeft een project geselecteerd
3. ACT2 heeft een geldig Git versiebeheersysteem gekoppeld aan het project
Postcondities
1. Nieuwe vertalingen zijn gepubliceerd

2. Flow

sequenceDiagram
autonumber
actor A as ACT1: Gebruiker
participant S as Project Management Portaal
participant G as ACT4: Git versiebeheer systeem
participant T as ACT3: AI-tool
participant C as ACT5: CDN Service

A ->> S: Vraagt vertalingen in namespace van project op
S ->> G: Vraagt vertalingen in namespace van project op
G -->> S: Geeft vertalingen terug
S -->> A: Geeft vertalingen terug

opt Lege taal aanmaken
    A ->> S: Geeft aan lege taal aan te willen maken
    S -->> A: Vraagt om taalcode
    A ->> S: Geeft taalcode
    S ->> G: Maakt lege taal aan
    G -->> S: Taal is aangemaakt
    S -->> A: Taal is aangemaakt
end

opt Filteren lege vertalingen
    A ->> S: Geeft aan lege vertalingen te willen filteren
    S -->> A: Geeft lege vertalingen
end

alt Handmatig invullen/aanpassen vertaling
    A ->> S: Vult vertaling handmatig in
    S -->> A: Geeft aangepaste vertaling terug
else Selectie vertalen met AI-tool
    A ->> S: Selecteert vertalingen om te vertalen
    S ->> A: Vraagt ondersteunde taal/talen te selecteren
    A ->> S: Selecteert de ondersteunde taal/talen
    S ->> G: Vraagt vertalingen op
    G -->> S: Geeft vertalingen terug
    S ->> T: Stuurt vertalingen naar AI-tool
    T -->> S: Geeft vertaalde vertalingen terug
    opt CDN is ingesteld
        S ->> C: Slaat vertalingen op in CDN
        C -->> S: Vertalingen zijn opgeslagen
    end
    S -->> A: Geeft vertaalde vertalingen terug
end

opt Vertalingen publiceren
    A ->> S: Geeft aan vertalingen te willen publiceren
    S ->> G: Publiceert vertalingen
    G -->> S: Vertalingen zijn gepubliceerd
    opt CDN is ingesteld
        S ->> C: Slaat vertalingen op in CDN
        C -->> S: Vertalingen zijn opgeslagen
    end
    S -->> A: Vertalingen zijn gepubliceerd
end

opt Vertalingen statistieken bekijken (Maandelijks)
    A ->> S: Geeft aan vertalingen statistieken te willen bekijken
    S ->> G: Vraagt vertalingen op
    G -->> S: Geeft vertalingen terug
    S -->> A: Geeft vertalingen statistieken
end

3. Schermontwerpen

Stap 1: Openen vertalingen overzicht

Als er op de "Toon alleen niet ingevulde vertalingen" knop wordt geklikt, worden alleen de vertalingen getoond die nog niet zijn ingevuld.

Wanneer de gebruiker op een vertaling of leeg veld van een vertaling klikt kan hij deze aanpassen.

Wanneer de gebruiker een of meer vertalingen selecteer door op de knoppen aan het begin van de tabel te klikken, verschijnt er een knop waarin de gebruiker kan aangeven naar welke taal de vertalingen vertaald moeten worden. Wanneer de gebruiker op de knop klikt, wordt de vertaling vertaald en in de tabel geplaatst.

Wanneer de gebruiker op de "Aanpassingen publiceren" knop klikt, worden de nieuwe vertalingen gepubliceerd.

High fidelity

Low fidelity

Wireframe

(Optioneel) Stap 2.1: Openen modal nieuwe taal toevoegen

Dit modal wordt zichtbaar wanneer er op de "Nieuwe taal toevoegen" knop wordt geklikt, die zich boven de tabel bevindt.

high fidelity modal nieuwe taal toevoegen

low fidelity modal nieuwe taal toevoegen

wireframe modal nieuwe taal toevoegen

(Optioneel) Stap 2.2: Lege taal aanmaken

High fidelity

Low fidelity

Wireframe

Stap 2.3: Lege taal aanmaken (Laden)

high fidelity taal aanmaken laden

low fidelity taal aanmaken laden

wireframe taal aanmaken laden

Stap 3: Taal gegenereerd

Er zal boven in de pagina een melding getoond worden, en in de tabel wordt de nieuwe kolom met vertalingen getoond.

high fidelity taal gegenereerd

low fidelity taal gegenereerd

wireframe taal gegenereerd

(Optioneel) Stap 4.1: Selectie automatisch vertalen

High fidelity

Low fidelity

Wireframe

(Optioneel) Stap 4.2: Bevestiging voorwaarden selectie automatisch vertalen

High fidelity

Low fidelity

Wireframe

(Optioneel) Stap 4.3: Selectie automatisch vertalen (Laden)

High fidelity

Low fidelity

Wireframe

(Optioneel) Stap 5: Vertalingen statistieken bekijken

High fidelity

Low fidelity

Wireframe

Uitwerking

Video: Uitwerking van UC2

4. Functionele keuzes

4.1. Navigatie tabel

Tijdens het bouwen van de functionaliteit van het bewerken van de vertalingen in een tabel, is er gekozen om de navigatie van de tabel op de volgende manier te implementeren:

  1. Tab navigeert door de cellen van boven naar beneden, na de laatste cel van een rij wordt de eerste cel van de volgende rij geselecteerd.
  2. Shift + Tab navigeert door de cellen van onder naar boven, na de eerste cel van een rij wordt de laatste cel van de vorige rij geselecteerd.
  3. Enter navigeert naar de volgende cel in de huidige rij.
  4. Shift + Enter navigeert naar de vorige cel in de huidige rij.
  5. Ctrl + Enter navigeert naar de volgende cel in de huidige kolom.
  6. Ctrl + Shift + Enter navigeert naar de vorige cel in de huidige kolom.

In alle gevallen worden de aanpassingen die de gebruiker maakt in de front-end opgeslagen.

Om deze functionaliteit duidelijk te maken aan de gebruiker is er een sandbox modal gemaakt waarin de gebruiker de functionaliteit kan uitproberen. Deze modal kan via een knop geopend worden.

4.2. Sortering tabel

Tijdens het uitwerken van de functionele requirements is vastgesteld dat de vertalingen in de tabel standaard gesorteerd worden op de volgende manier:

  • Eerst worden de vertalingen gesorteerd op lege vertalingen, waarbij de vertalingen die nog niet zijn ingevuld bovenaan staan.
  • Daarna worden de vertalingen alfabetisch gesorteerd op de sleutel van de vertaling.

Dit is gedaan zodat de gebruiker snel kan zien welke vertalingen nog niet zijn ingevuld en deze als eerste kan invullen.

4.3. Aanpassingen ongedaan maken

Tijdens het uitwerken van de functionele requirements is vastgesteld dat de aanpassingen die de gebruiker maakt in de front-end bijgehouden worden. De aanpassingen worden gepubliceerd wanneer de gebruiker op de "Aanpassingen publiceren" knop klikt. Als de gebruiker vroegtijdig weg navigeert of een actie probeert uit te voeren waardoor de aanpassingen verloren zouden gaan, wordt de gebruiker gevraagd of dat hij zeker weet dat hij zijn aanpassingen wilt verliezen.