Blog

Tłumaczenie interfejsu - praktycznie wskazówki

5
min czytania
Down arrow button

Blog >

Tłumaczenie interfejsu - praktycznie wskazówki
TechInsights

W obecnym cyfrowym świecie dotarcie do globalnej publiczności jest niezbędne. Tłumaczenia przełamują bariery językowe i sprawiają, że użytkownicy czują się jak w domu. Zarządzanie tłumaczeniami nie jest jednak łatwe. Nie chodzi tylko o zamianę słów; chodzi o nadanie sensu kulturowego i technicznego. Jak projekty mogą poradzić sobie z tym wyzwaniem? Ten artykuł obejmuje techniczne aspekty tłumaczenia interfejsu.


Dla programistów i project managerów te informacje mogą być nieocenione. Pozwalają na dobre zrozumienie wyzwań związanych z tworzeniem aplikacji, gdzie niezbędne jest wprowadzenie mechanizmu translacji.

STATYCZNE TŁUMACZENIA INTERFEJSU

Jeśli chodzi o tłumaczenie interfejsu, preferowanym podejściem przez SKM Group jest obsługa funkcjonalnośći po stronie front-endu.

Jeśli pracujesz z frameworkiem Angular, pomocna może okazać się biblioteka o nazwie ngx-translate. Jak działa? Tworzony jset oddzielny plik JSON dla każdego języka, zawierający wszystkie tłumaczenia potrzebne dla elementów interfejsu. Taka separacja zapewnia przejrzystość i łatwość utrzymaniu aplikacji. W kodzie źródłowym należy używaćunikalnej etykiety dla każdego tłumaczenia. Gdy użytkownik ładuje stronę, etykiety te są zastępowane tłumaczeniami pochodzącymi z pliku JSON. W rezultacie, niezależnie od wybranego języka, witryna może poprawnie wyświetlać całą zawartość.

Przykładowe drzewo tłumaczeń wygenerowane przez bibliotekę ngx-translate.
Przykładowe drzewo tłumaczeń wygenerowane przez bibliotekę ngx-translate.
Przykładowe użycie tłumaczenia w Angular.
Przykładowe użycie tłumaczenia w Angular.
Interfejs używany do ładowania języka i powiązanych z nim tłumaczeń (Blazor).
Interfejs używany do ładowania języka i powiązanych z nim tłumaczeń (Blazor).
Interfejs umożliwiający łatwe wprowadzanie tłumaczeń na stronach (Blazor).
Interfejs umożliwiający łatwe wprowadzanie tłumaczeń na stronach (Blazor).
Przykład użycia tłumaczeń na stronie (Blazor).
Przykład użycia tłumaczeń na stronie (Blazor).

DYNAMICZNE TŁUMACZENIA INTERFEJSU

Panel dodawania i edycji tłumaczeń

Front-end płynnie współpracuje z API, ułatwiając dodawanie i modyfikowanie tłumaczeń. Każde tłumaczenie ma przypisaną odrębną etykietę, podobnie jak w przypadku tłumaczeń statycznych.

Baza danych

Dobrze zaprojektowana struktura bazy danych ma kluczowe znaczenie dla sprawnego zarządzania tłumaczeniami.

Backend wprowadza tłumaczenia do określonej struktury bazy danych, umożliwiając ich bezproblemowe wyszukiwanie.

W przypadku prostego rozwiązania, w relacyjnej bazie danych można użyć tabeli z 4 podstawowymi kolumnami:

  • id,
  • label_translation,
  • code_language,
  • translation

Wczytywanie tłumaczeń przez frontend

W momencie uruchamiania projektu front-end pobiera tłumaczenia z dedykowanego punktu końcowego API. W przypadku projektów opartych na Angularze preferowanym rozwiązaniem jest wtyczka ngx-translate. W zależności od wybranego podejścia, tłumaczenia w formacie JSON są pobierane z plików statycznych lub dostarczane za pośrednictwem interfejsu API z bazy danych.

ZAPEWNIENIE CZYTELNOŚCI BŁĘDÓW

W przypadku problemów z aplikacją lub stroną internetową, backend powinien działać jako komunikator, przekazując kody błędów i dodatkowe informacje. Podczas tworzenia aplikacji należy skupić się wyłącznie na przekazywaniu kodów błędów i dodatkowych metadanych, najlepiej zgodnie ze standardami określonymi przez https://www.rfc-editor.org/rfc/rfc7807.

Kody błędów powinny zostać przekształcone w objaśnienia specyficzne dla danego języka. Wiąże się to z mapowaniem kodów błędów na pasujące etykiety tłumaczeń lub nawet wykorzystaniem kodów jako samych etykiet.

TŁUMACZENIA TREŚCI

Jeśli oprócz tłumaczeń treści, potrzebujemy również tłumaczeń interfejsu to trzeba zaimplementowac komponenty omowione w poprzednich sekcjach. Widok edycji/dodawania treści w aplikacji (np. nowy produkt z opisem) musi mieć dodatkowe komponenty (np. osobne pole tekstowe dla każdego języka), aby umożliwić zdefiniowane tłumaczenia tej treści.

Gdy aplikacja żąda treści z serwera, musi określić żądany język. Ten kod języka może być wysłany na przykład jako część route lub w headerze żądania HTTP.

Ponownie, w przypadku podstawowego podejścia, w relacyjnej bazie danych można użyć tabeli z 5 podstawowymi kolumnami:

  • EntityType - wartość enum typu obiektu - w przypadku treści złożonych (np. gdy produkt ma opis ogólny i opis szczegółowy), dodatkowy identyfikator wyszczególniający treść, której dotyczy tłumaczenie.
  • LanguageCode or LanguageId kod określający język tłumaczenia lub FK do języka, jeśli znajduje się w osobnej tabeli
  • Value - treść tłumaczenia

Kolumny tabeli używane do przechowywania treści tłumaczeń.
Columns of a table used for storing translation content.

PODSUMOWANIE

Zapewnienie udanej wielojęzyczności obejmuje techniki frontendowe, integrację API, dobrze zaprojektowanej bazy danych oraz przejrzyste przekazywanie informacji o błędach. Wdrażając te strategie, projekty mogą wyróżniać się w każdym języku, zapewniając użytkownikom przyjazne doświadczenie. W SKM Group podejście to jest skrupulatnie realizowane w celu zapewnienia jak najlepszych efektów.

O autorze
Mateusz Kopacz

Mateusz jest doświadczonym profesjonalistą w zarządzaniu projektami i tworzeniu oprogramowania. Obecnie pełni funkcję CEO w SKM Group, gdzie nadzoruje projekty, zapewniając ich pomyślną realizację. Ponadto odgrywa istotną rolę w kształtowaniu strategii firmy, napędzaniu rozwoju nowych rozwiązań oraz kierowaniu rozwojem biznesu i zarządzaniu kluczowymi klientami.