I18n trong rails (Part I)

Giới thiệu

Đối với một trang web có đối tượng người sử dụng ở các vùng miền khác nhau thì việc quốc tế hóa là vô cùng quan trọng. Việc quốc tế hóa có nghĩa là làm cho ứng dụng có khả năng hiển thị nội dung dưới nhiều ngôn ngữ khác nhau. Quốc tế hóa trong tiếng Anh gọi là Internationalization, vì có 18 chữ cái ở giữa chữ cái i và chữ cái n nên hay được gọi ngắn gọn là i18n. Bài viết này sẽ hướng dẫn cách thức để áp dụng i18n trong rails

Rails đã hỗ trợ kĩ thuật i18n từ phiên bản 2.2 . Framework rails cung cấp các phương thức đơn giản để chuyển đổi ngôn ngữ trong ứng dụng

I18n trong Rails 5

Một số tính năng API mà rails 5 cung cấp trong việc hỗ trợ quốc tế hóa ngôn ngữ trong ứng dụng

• Looking up translations
• Interpolating data into translations
• Pluralizing translations
• Using safe HTML translations (view helper method only)
• Localizing dates, numbers, currency, etc.

Như vậy việc quốc tế hóa ngôn ngữ sẽ trở nên đơn giản hơn với ứng dụng của bạn phương thức helper t(translate) và file config yml. Ban đầu ứng dụng sẽ để mặc định là en.yml trong thư mục config/locales để có thể chuẩn hóa các từ cần chuyển đổi. Ngoài ra với phương thức l(localize) giúp cho việc chuẩn hóa định dạng về thời gian và tiền tệ. Ví dụ:

Đoạn code chưa có i18n :

<h1>Hello World</h1>
<p><%= Time.now %></p>

Đoạn code đã i18n

<h1><%= t 'hello_world' %></h1>
<p><%= l Time.now %></p>

Cài đặt

• Bước 1: Hãy bắt đầu việc tạo một ứng dụng quốc tế hóa trong rails bằng câu lệnh :

rails new i18n_app

• Bước 2: Sau đó hãy vào project và thiết kế một trang static-page đơn giản :

<h1 class="shadow" >Hello, have a nice day</h1>
<h3 class="shadow" >~~~~~Profile~~~~~</h3>
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

• Bước 3: Thêm css và header cho ứng dụng trở nên sinh động và phong phú hơn. Trang static page lúc này :

• Bước 4: Trong file en.yml ở thư mục config/locales. Đặt tên cho những biến cố định trong code

en:
  static_pages:
    home:
      title: "I18n_app"
      hello: "Hello, have a nice day"
      profile: "Profile"
      phone: "Phone"
      address: "Address"
      full_name: "Full name"

• Bước 5: Sau khi đã thay đổi chuẩn hóa đa ngôn ngữ trong code

  <h1 class="shadow" ><%= t ".hello" %></h1>
  <h3 class="shadow" >~~~~~<%= t ".profile" %>~~~~~</h3>
  <address>
    <strong><%= t ".address" %>:</strong><br>
    1355 Market Street, Suite 900<br>
    San Francisco, CA 94103<br>
    <abbr title=<%= t ".phone" %>>P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong><%= t ".full_name" %>:</strong><br>
    <a href="#">first.last@example.com</a>
  </address>

• Bước 6: F5 trang web của bạn và kiểm tra trang web của bạn . Như đã đoạn code ở trên sử dụng t ".something" đây là một cách viết được goi là:"Lazy" Lookup

Trên đây là ví dụ về việc tìm kiếm cho quốc tế hóa trang web(Looking up translations) cũng là một trong tính năng của I18n. Tiếp theo Localizing dates, numbers, currency

• Bước 7: Chuẩn hóa ngày giờ

Để chuẩn hóa về thời gian có thể sự dụng đối tượng mà I18n cung cấp : I18n.l ví dụ:

# app/views/home/index.html.erb
<h1><%=t :hello_world %></h1>
<p><%= flash[:notice] %></p>
<p><%= l Time.now, format: :short %></p>
<p><%= l Time.now, format: :long %></p>

Hoặc sử dụng phương thức strftime của Ruby để định dạng lại thời gian như sau:

en:
  static_pages:
    time_default: %m/%d/%Y

<%= Time.now.strftime(t(".time_default")) %>

• Bước 8 :Truyền tham số để phiên dịch ( Passing Variables to Translations)

Một vấn đề quan trọng cần được nhắc đến trong quá trình quốc tế hóa ngôn ngữ cho ứng đó là ngữ pháp của mỗi quốc gia. Định dạng tiền tệ cũng nằm trong những vấn đề đó ví dụ:

<%= t("currency")#{@product.price}" %>

# config/locales/en.yml
en:
  currency: "$"

# config/locales/vnđ.yml
es:
  currency: "vnđ"

Như ví dụ ở trên cho thấy thay vì hiển thị đúng là $100 thì trang web sẽ hiển thị 100$ , vậy đã sai định dạng tiền tệ.

Nhưng rất may gem i18n cung cấp phương thức để xử lý trường hợp đó, tính năng đó được gọi là nội suy (interpolation ) . Hiểu đơn giản là ta có thể truyền tham số vào file yaml để định dạng theo mong muốn. Ví dụ

<%= t("product_price", price:@product.price) %>

# config/locales/en.yml
en:
  product_price: "$%{price}"

# config/locales/vi.yml
es:
  product_price: "%{price} vnđ"

Ngoài ra để định dang rõ ràng hơn đơn vị tiền tệ theo chuẩn từng nơi, định nghiã trong file yaml như sau:

#vi.yml
number:
  currency:
    format:
      unit: "vnd"      #đơn vị
      delimiter: ","   #tách biệt hàng trăm, nghìn, triệu, ...
      separator: "."   #cách biệt thập phân
      precision: 3     #lấy sau dấy phẩy bao nhiêu số
      format: "%n%u"   # n:number; u:unit. Chỉ ra vị trí hiển thị

Trong phần view sẽ viết code như sau để hiển thị

 <%= number_to_currency(1000000.000) %>

 #Result :1,000,000.000vnd

Để hiểu rõ hơn các bạn có thể tham khao api mà rails cung cấp http://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html#M001684.

Tham Khảo

https://lingohub.com/frameworks-file-formats/rails5-i18n-ruby-on-rails/