Tạo trang web đa ngôn ngữ với Spring Boot trong Java

Trong ứng dụng web, đa ngôn ngữ là một tính năng quan trọng giúp ứng dụng có thể phục vụ người dùng trên nhiều khu vực địa lý với các ngôn ngữ khác nhau.

Trong bài viết này, chúng ta sẽ sử dụng Spring Boot để tạo một ứng dụng web đa ngôn ngữ. Spring Boot cung cấp nhiều tính năng hỗ trợ đa ngôn ngữ, giúp cho việc phát triển ứng dụng đa ngôn ngữ trở nên đơn giản và nhanh chóng hơn.

1. Giới thiệu

Languages

Tổng quan về đa ngôn ngữ trong ứng dụng web

Đa ngôn ngữ là một tính năng rất quan trọng để hỗ trợ các người dùng đến từ các khu vực địa lý khác nhau sử dụng ứng dụng của bạn. Nó cho phép bạn cung cấp nội dung và giao diện người dùng bằng nhiều ngôn ngữ khác nhau, tùy thuộc vào người dùng đó có sử dụng ngôn ngữ nào.

Trong ứng dụng web đa ngôn ngữ, người dùng có thể chuyển đổi ngôn ngữ một cách dễ dàng thông qua các tùy chọn hoặc các nút chuyển đổi ngôn ngữ. Việc hỗ trợ đa ngôn ngữ giúp tăng tính truy cập và tính chất đa dạng cho ứng dụng của bạn, đồng thời giúp tăng khả năng tương tác với người dùng đến từ các khu vực địa lý khác nhau.

Bài viết này được đăng tại [free tuts .net]

Spring Boot và tính năng hỗ trợ đa ngôn ngữ

Trước khi đi sâu và bài, bạn có thể tham khảo các định nghĩa về Spring Boot qua bài viết này!!

Các tính năng hỗ trợ đa ngôn ngữ trong ứng dụng web bao gồm:

Dịch thuật nội dung: Ứng dụng web cần cung cấp các file dịch thuật để dịch nội dung của ứng dụng sang các ngôn ngữ khác nhau. Điều này đảm bảo rằng các người dùng đến từ các khu vực địa lý khác nhau có thể truy cập và sử dụng ứng dụng của bạn.

Giao diện người dùng đa ngôn ngữ: Ứng dụng web nên cung cấp các giao diện người dùng đa ngôn ngữ để cho phép người dùng chuyển đổi ngôn ngữ một cách dễ dàng. Các giao diện này bao gồm các thông điệp lỗi, tiêu đề, phần mô tả và các trang web khác.

Tương tác với người dùng: Ứng dụng web nên hỗ trợ đa ngôn ngữ trong các khía cạnh tương tác với người dùng, bao gồm các mẫu nhập liệu, bàn phím, nút chuyển đổi ngôn ngữ và các tùy chọn khác.

Kiểm tra và xác minh ngôn ngữ: Ứng dụng web nên hỗ trợ việc kiểm tra và xác minh ngôn ngữ đang được sử dụng để đảm bảo tính chính xác và độ tin cậy của nội dung được hiển thị.

Phân loại các ngôn ngữ: Ứng dụng web nên có khả năng phân loại các ngôn ngữ và hiển thị các ngôn ngữ theo đúng thứ tự ưu tiên của người dùng.

Hỗ trợ ngôn ngữ chuẩn: Ứng dụng web nên hỗ trợ các ngôn ngữ chuẩn để đảm bảo tính đồng nhất và tương thích với các tiêu chuẩn ngôn ngữ quốc tế.

Cập nhật thường xuyên: Các file dịch thuật của ứng dụng web cần được cập nhật thường xuyên để đảm bảo rằng các nội dung đều được cập nhật và đồng nhất với các ngôn ngữ khác nhau.

2. Tạo project Spring Boot

Để tạo một project Spring Boot mới, bạn có thể làm theo các bước sau:

Bước 1: Cài đặt Java Development Kit (JDK) Trước khi bắt đầu làm việc với Spring Boot, bạn cần phải cài đặt JDK trên máy tính của mình. JDK là một bộ công cụ để phát triển các ứng dụng Java. Bạn có thể tải JDK miễn phí từ trang web chính thức của Oracle.

Bước 2: Tải và cài đặt Spring Tool Suite (STS) Spring Tool Suite (STS) là một IDE (Integrated Development Environment) được thiết kế đặc biệt để phát triển các ứng dụng Spring. Bạn có thể tải STS miễn phí từ trang web chính thức của Spring.

Bước 3: Tạo project Spring Boot Sau khi cài đặt STS, bạn có thể tạo một project Spring Boot mới bằng cách làm theo các bước sau:

1. Mở STS và chọn File > New > Spring Starter Project.

2.Trong cửa sổ New Spring Starter Project, bạn sẽ được yêu cầu nhập các thông tin cơ bản về project của bạn, bao gồm:

• Group: Nhóm của project. Ví dụ: com.example.
• Artifact: Tên của project. Ví dụ: myproject.
• Name: Tên của project.
• Description: Mô tả project.
• Packaging: Định dạng đóng gói của project (jar hoặc war).
• Java: Phiên bản Java mà bạn muốn sử dụng.
• Spring Boot: Phiên bản Spring Boot mà bạn muốn sử dụng.

3. Sau khi nhập các thông tin, nhấn nút Next để tiếp tục.

4. Trong cửa sổ tiếp theo, bạn sẽ được yêu cầu chọn các dependency (thư viện) mà bạn muốn sử dụng trong project của mình. Bạn có thể tìm kiếm các dependency bằng cách nhập tên của chúng vào ô tìm kiếm hoặc chọn từ danh sách các dependency đã có sẵn. Sau khi chọn xong, nhấn nút Next để tiếp tục.

5. Trong cửa sổ cuối cùng, bạn sẽ được yêu cầu nhập các thông tin cuối cùng về project của mình, bao gồm:

• Project location: Vị trí lưu trữ của project trên máy tính của bạn.
• Package name: Tên gói của project.
• Generate: Các tùy chọn để tạo các tệp và cấu hình cho project của bạn.

6. Nhấn nút Finish để tạo project.

3. Tạo các file properties cho các ngôn ngữ khác nhau

Tạo file properties cho các ngôn ngữ

Để tạo các file properties cho các ngôn ngữ khác nhau trong Spring Boot, bạn có thể làm theo các bước sau:

Bước 1: Tạo thư mục cho các file properties Trước tiên, bạn cần tạo một thư mục để chứa các file properties cho các ngôn ngữ khác nhau. Thông thường, thư mục này được đặt tên là "i18n" (tức là "internationalization").

Bước 2: Tạo file properties cho mỗi ngôn ngữ Sau khi tạo thư mục i18n, bạn có thể tạo các file properties cho các ngôn ngữ khác nhau bằng cách tạo các tệp tin với đuôi là ".properties". Ví dụ, nếu bạn muốn tạo file properties cho tiếng Anh và tiếng Việt, bạn có thể tạo hai tệp tin với các tên là "messages_en.properties" và "messages_vi.properties".

Bước 3: Đặt key và giá trị trong file properties Mỗi file properties sẽ chứa các key và giá trị tương ứng với các ngôn ngữ khác nhau. Key sẽ là một chuỗi đại diện cho một thông điệp cụ thể, còn giá trị sẽ là nội dung của thông điệp đó. Các key sẽ được sử dụng để tìm kiếm giá trị trong file properties tương ứng khi cần hiển thị các thông điệp trong ứng dụng.

Ví dụ, nếu bạn muốn tạo thông điệp "Welcome" cho tiếng Anh và tiếng Việt, bạn có thể đặt key là "welcome.message" và giá trị của nó là "Welcome" trong tệp tin "messages_en.properties" và "Xin chào" trong tệp tin "messages_vi.properties".

Cấu trúc tên file và cách đặt key

Trong Spring Boot, các file properties được đặt tên theo cấu trúc "{basename}_{locale}.properties". Trong đó, basename là tên của tệp tin properties (ví dụ: "messages"), còn locale là mã ngôn ngữ (ví dụ: "en" cho tiếng Anh, "vi" cho tiếng Việt).

Các key trong file properties nên được đặt theo cấu trúc "{module}.{message}", trong đó module là một module cụ thể trong ứng dụng (ví dụ: "login"), còn message là thông điệp cụ thể trong module đó (ví dụ: "invalid.username").

4. Cấu hình ứng dụng để sử dụng ngôn ngữ mong muốn

Cấu hình LocaleResolver

LocaleResolver giúp xác định ngôn ngữ được yêu cầu bởi người dùng và đặt nó làm Locale cho ứng dụng.

Sử dụng CookieLocaleResolver: trong file cấu hình Spring, thêm đoạn mã sau:

@Bean
public LocaleResolver localeResolver() {
    CookieLocaleResolver resolver = new CookieLocaleResolver();
    resolver.setDefaultLocale(Locale.US);
    resolver.setCookieName("myLocaleCookie");
    resolver.setCookieMaxAge(4800);
    return resolver;
}

Đây là cấu hình sử dụng CookieLocaleResolver với mặc định là Locale.US, cookie có tên "myLocaleCookie" và thời gian sống của cookie là 4800 giây.

Sử dụng AcceptHeaderLocaleResolver: trong file cấu hình Spring, thêm đoạn mã sau:

@Bean
public LocaleResolver localeResolver() {
    AcceptHeaderLocaleResolver resolver = new AcceptHeaderLocaleResolver();
    resolver.setDefaultLocale(Locale.US);
    return resolver;
}

Đây là cấu hình sử dụng AcceptHeaderLocaleResolver với mặc định là Locale.US.

Sử dụng thư viện Spring MessageSource

Thư viện này cho phép bạn định nghĩa các tài nguyên ngôn ngữ (ví dụ: các thông điệp, nhãn,..) và sử dụng chúng trong mã ứng dụng.

Thêm dependency vào file pom.xml:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

Tạo file properties chứa các thông điệp ngôn ngữ trong thư mục resources. Ví dụ, tạo file messages.properties cho ngôn ngữ tiếng Anh và messages_vi.properties cho ngôn ngữ tiếng Việt. Ví dụ:

Trong messages.properties:

greeting=Hello

Trong messages_vi.properties:

greeting=Xin chào

Sử dụng Spring MessageSource để lấy các thông điệp ngôn ngữ trong mã ứng dụng:

@Autowired
private MessageSource messageSource;

public String getGreeting() {
    return messageSource.getMessage("greeting", null, LocaleContextHolder.getLocale());
}

Phương thức getMessage sẽ trả về thông điệp cho key "greeting" và Locale hiện tại được xác định bởi LocaleContextHolder.

5. Hỗ trợ đa ngôn ngữ trong các tệp HTML và JavaScript

Để hỗ trợ đa ngôn ngữ trong các tệp HTML và JavaScript, bạn có thể sử dụng Thymeleaf để hiển thị đa ngôn ngữ và thêm đa ngôn ngữ cho các tệp JavaScript. Các bước chi tiết được mô tả dưới đây:

Sử dụng Thymeleaf để hiển thị đa ngôn ngữ

Thymeleaf là một template engine cho phép bạn xây dựng các trang web động và có thể hiển thị đa ngôn ngữ dễ dàng. Ví dụ, trong file HTML, bạn có thể sử dụng thymeleaf expression để lấy thông điệp ngôn ngữ từ tệp properties và hiển thị chúng trên trang web.

Ví dụ:

<h1 th:text="#{greeting}"></h1>

Trong đó, "#{}" là thymeleaf expression để lấy giá trị từ tệp properties, "greeting" là key của thông điệp ngôn ngữ trong tệp properties.

Thêm đa ngôn ngữ cho các tệp JavaScript

Để thêm đa ngôn ngữ cho các tệp JavaScript, bạn có thể tạo các tệp properties tương ứng với các tệp JavaScript và sử dụng các phương thức Ajax để lấy các thông điệp ngôn ngữ trong các tệp properties đó. Ví dụ:

Tạo tệp properties cho tệp JavaScript tên là script.js:

Trong file script.properties:

greeting=Hello

Tạo phương thức Ajax để lấy các thông điệp ngôn ngữ trong tệp properties:

$.ajax({
    url: "/script.properties",
    dataType: "text",
    success: function(data) {
        var properties = {};
        var lines = data.split("\n");
        for (var i = 0; i < lines.length; i++) {
            var line = lines[i].trim();
            if (line !== "" && line.charAt(0) !== "#") {
                var pos = line.indexOf("=");
                if (pos >= 0) {
                    var key = line.substring(0, pos).trim();
                    var value = line.substring(pos + 1).trim();
                    properties[key] = value;
                }
            }
        }
        console.log(properties.greeting);
    }
});

Trong đó, phương thức Ajax sẽ lấy tệp properties từ đường dẫn "/script.properties" và đọc nội dung của tệp đó để tạo ra một object chứa các thông điệp ngôn ngữ. Sau đó, bạn có thể truy cập các thông điệp ngôn ngữ trong object này bằng cách sử dụng key của chúng.

6. Thêm chức năng thay đổi ngôn ngữ cho người dùng

Thêm dropdown hoặc các nút để chọn ngôn ngữ

Trong file HTML, bạn có thể thêm dropdown hoặc các nút để cho người dùng chọn ngôn ngữ.

Ví dụ, trong file HTML, bạn có thể thêm dropdown như sau:

<form action="#" th:action="@{/changeLanguage}" method="post">
    <select name="lang">
        <option value="en" th:selected="${session.language == 'en'}">English</option>
        <option value="vi" th:selected="${session.language == 'vi'}">Tiếng Việt</option>
    </select>
    <button type="submit">Change Language</button>
</form>

Trong đó, dropdown có tên là "lang" và chứa các lựa chọn ngôn ngữ. Mỗi lựa chọn có giá trị là mã ngôn ngữ (ví dụ: "en" cho tiếng Anh, "vi" cho tiếng Việt) và được chọn dựa trên giá trị của session.language. Khi người dùng chọn một lựa chọn, form sẽ được submit đến đường dẫn "/changeLanguage".

Lưu ngôn ngữ được chọn vào session hoặc cookie

Sử dụng ngôn ngữ được lưu trong session hoặc cookie để hiển thị các thông điệp ngôn ngữ. Khi người dùng đã chọn ngôn ngữ, bạn có thể sử dụng ngôn ngữ được lưu trong session hoặc cookie để hiển thị các thông điệp ngôn ngữ. Ví dụ, trong file HTML, bạn có thể sử dụng thymeleaf expression để lấy thông điệp ngôn ngữ từ tệp properties dựa trên giá trị của session.language hoặc cookie.language.

Ví dụ:

<h1 th:text="#{greeting}" th:utext="${session.language == 'en' ? '_en' : ''}.txt"></h1>

Trong đó, thymeleaf expression "${session.language == 'en' ? '_en' : ''}" sẽ trả về "_en" nếu ngôn ngữ được chọn là tiếng Anh, hoặc rỗng nếu ngôn ngữ được chọn là tiếng Việt. Điều này sẽ được sử dụng để đọc tệp tin properties có tên "greeting" + "_en" nếu ngôn ngữ được chọn là tiếng Anh hoặc "greeting" nếu ngôn ngữ được chọn là tiếng Việt.

Tương tự, bạn cũng có thể sử dụng ngôn ngữ được lưu trong session hoặc cookie để hiển thị thông điệp ngôn ngữ trong các tệp JavaScript.

Ví dụ, trong tệp JavaScript, bạn có thể tạo một biến để lưu ngôn ngữ được lưu trong session hoặc cookie:

var lang = "${session.language}";

Sau đó, bạn có thể sử dụng biến lang để hiển thị các thông điệp ngôn ngữ tương ứng trong tệp JavaScript.

if (lang === 'en') {
alert('Hello!');
} else if (lang === 'vi') {
alert('Xin chào!');
}

Trong ví dụ này, thông điệp "Hello!" sẽ được hiển thị nếu ngôn ngữ được chọn là tiếng Anh, hoặc thông điệp "Xin chào!" sẽ được hiển thị nếu ngôn ngữ được chọn là tiếng Việt. Tóm lại, để thêm chức năng thay đổi ngôn ngữ cho người dùng, bạn cần thêm dropdown hoặc các nút để chọn ngôn ngữ và lưu ngôn ngữ được chọn vào session hoặc cookie. Sau đó, bạn có thể sử dụng ngôn ngữ được lưu trong session hoặc cookie để hiển thị các thông điệp ngôn ngữ trong các tệp HTML và JavaScript.

6. Các câu hỏi thường gặp

Tại sao cần phải tạo ứng dụng web đa ngôn ngữ?

Trong một ứng dụng web, người dùng có thể đến từ các quốc gia khác nhau và có thể sử dụng các ngôn ngữ khác nhau. Vì vậy, để đáp ứng nhu cầu của người dùng, ứng dụng web nên hỗ trợ đa ngôn ngữ để cho phép người dùng sử dụng ứng dụng bằng ngôn ngữ mà họ chọn.

Làm thế nào để tạo ứng dụng web đa ngôn ngữ với Spring Boot?

Để tạo ứng dụng web đa ngôn ngữ với Spring Boot, bạn có thể sử dụng thư viện Spring MessageSource để quản lý các thông điệp ngôn ngữ trong ứng dụng của mình. Bạn cũng cần cấu hình LocaleResolver để xác định ngôn ngữ được chọn bởi người dùng. Sau đó, bạn có thể sử dụng Thymeleaf để hiển thị các thông điệp ngôn ngữ trong các tệp HTML và sử dụng các biến trong các tệp JavaScript để hiển thị các thông điệp ngôn ngữ trong các tệp JavaScript.

Làm thế nào để lưu ngôn ngữ được chọn bởi người dùng?

Bạn có thể lưu ngôn ngữ được chọn bởi người dùng vào session hoặc cookie. Điều này cho phép người dùng không phải chọn lại ngôn ngữ mỗi khi họ tải lại trang web hoặc truy cập vào các trang khác trong ứng dụng.

Làm thế nào để thêm các ngôn ngữ khác vào ứng dụng?

Để thêm các ngôn ngữ khác vào ứng dụng, bạn chỉ cần tạo các tệp properties mới cho mỗi ngôn ngữ. Tên của các tệp properties nên có định dạng "messages_{locale}.properties", trong đó {locale} là mã ngôn ngữ của ngôn ngữ đó. Sau đó, bạn có thể thêm các thông điệp ngôn ngữ mới vào các tệp properties này.

7. Kết bài viết