Đa ngôn ngữ cho ứng dụng web nodejs

Lấy 200$ cloud miễn phí để tha hồ deploy project và nghịch phá server ở đây nhé mọi người.

👇️👇️👇️

I. Giới thiệu.

Do mình cần làm một project nhỏ bằng Nodejs - Express có hỗ trợ đa ngôn ngữ cho người dùng, nên mình xin mạo muội viết lại bài hướng dẫn này, hy vọng có thể hữu ích cho ai cần đến... Mình sẽ tạo ví dụ một ứng dụng nhỏ cho phép người dùng chuyển qua lại giữa hai ngôn ngữ tiếng anh và tiếng việt như thế này

II. Tạo một project

1. Ở đây mình dùng express-generator để tạo nhanh một project express nhé. Nếu bạn chưa có express-generator : Gõ npm install express-generator -g Để cài đặt express-generator ở chế độ global. Sau đó chuyển vào thư mục bạn muốn lưu project: Gõ express --view=ejs yourapp để tạo một project mới với tên là yourapp. Mình dùng view-engine là ejs nên mình để là --view=ejs nếu bạn dùngjade haypug..v.v. thì sửa tham số nhé... Sau đó, bạn sẽ được một project như dưới đây :

2. Gõ npm install để cài đặt cái package mặc định đi kèm express trong file package.json.

III. i18n-node package

1. Chúng ta sẽ sử dụng package có tên là i18n-node để tạo đa ngôn ngữ cho ứng dụng. Gõ npm install i18n --save để cài đặt package và khai báo nó vào package.json.
2. Trong file app.js, chúng ta require package này

   var i18n = require("i18n");
   

3. Và thêm middleware i18n

   app.use(i18n.init);
   

4. Thiết lập cấu hình i18n

   i18n.configure({
    locales:['en', 'vi'],
    directory: __dirname + '/locales',
   cookie: 'lang',
   });
   

   Trong đó : locales:['en', 'vi'], là tên hai file ngôn ngữ mà ứng dụng của chúng ta sẽ đọc các câu trong đó. directory: __dirname + '/locales' Là đường dẫn đến thư mục chứa hai file ngôn ngữ en.json và vi.json. Mặc định nếu không tìm thấy folder localesthì khi bạn chạy npm start hoặc nodemon thì nodejs sẽ tạo luôn folder và hai file en.json và vi.json cho chúng ta nhé. cookie: 'lang', là giá trị cookie sẽ lưu lại ngôn ngữ của người dùng. Và còn nhiều tham số để thiết lập cấu hình i18n bạn có thể tham khảo tại đây
5. Trong file en.json và vi.json bạn khai báo các câu dịch thuật tương ứng giữa hai ngôn ngữ English và Vietnamese nhé. Ví dụ trong file vi.json mình sẽ khai báo các câu sẽ sử dụng trên navigation bar của mình, chúng có dạng như sau:

   {
      "Home" : "Trang chủ",  
      "My Account": "Tài khoản", 
      "Shopping Cart": "Giỏ hàng", 
      "CheckOut" : "Thanh toán" 
   }
   

   Tương ứng trong file en.json ( Thực ra không cần cũng được )

    {
      "Home" : "Home",  
       "My Account": "My Account", 
      "Shopping Cart": My Account", 
      "CheckOut" : "My Account" 
    }
   

6. Sử dụng trong file template Với mình hiện đang dùng ejs view-engine nên mình sẽ viết i18n như sau : <%= __('Home') %> (Trông như i18n của Laravel ấy nhỉ __("Laravel") ). Áp dụng cho cái navbar ở trên hình nhá:

     <ul class="nav" >
         <li><a class="home active" href="#"><%= __('Home') %></a> </li>
         <li><a class="myaccount" href="#"><%= __('My Account') %></a> </li>
         <li><a class="shoppingcart" href="#"><%= __('Shopping Cart') %></a> </li>
         <li><a class="checkout" href="#"><%= __('CheckOut') %></a> </li>
     </ul>
   

7. Chuyển đổi qua lại giữa các ngôn ngữ ? Đơn giản bạn chỉ cần thay đổi giá trị cookie: 'lang', ví dụ bạn muốn chuyển qua tiếng việt bạn chỉ cần đổi giá trị của cookie - lang sang "vi"

   res.cookie('lang', 'vi', { maxAge: 900000 });
   

   Và ngược lại đổi giá trị sang "en" nếu muốn chuyển lại tiếng anh. Ví dụ mình tạo một route với tham số truyền vào biến get có tên là lang với hai giá trị truyền vào là "vi" hoặc "en" để chuyển đổi qua lại giữa hai ngôn ngữ.

    app.use('/change-lang/:lang', (req, res) => { 
         res.cookie('lang', req.params.lang, { maxAge: 900000 });
         res.redirect('back');
   });
   

   Và gắn đường dẫn tương ứng cho hai dropdown menu lựa chọn ngôn ngữ anh - việt tương ứng như trong hình dưới đây.

   <ul class="dropdown-menu language">
       <li><a href="/change-lang/en">English</a> </li>
      <li><a href="/change-lang/vi">Vietnamese</a> </li>
   </ul>
   

   Ok. Vậy là xong, giờ đây bạn có thể click vào dropdown menu như trong hình và lựa chọn ngôn ngữ bạn muốn hiển thị

IV. Kết luận.

Vừa xong mình đã tạo xong chức năng đa ngôn ngữ cho ứng dung web nodejs, sử dụng package i18n-node package . Để tìm hiểu sâu hơn về i18n-node package mọi người có thể vào repo github của package để đọc chi tiết hơn. https://github.com/mashpie/i18n-node. Mong được mọi người góp ý, chỉnh sửa...