In this Article we are going to built simple rails simple application to demonstrate the features of Rails Internationalization (I18n). We will cover very basic aspect of Internationalization.
What is Internationalization?
Internationalization means developing the application that can adapt any language easily without making any complex changes. Internationalization can be apply on string, date and currency format of the rails application web page.
Let’s build a demo Rails App with I18n
We are using I18 since the early version rails 2.2. It provides the framework that makes so easy to translate the App in various languages. Let’s create one demo. Apply the following steps as written and you will get the nice demo app at the end of this article.
Step:1 Create rails application using below command and I am using rails 5.2 version
rails new tech-internationalization
Step2: Go inside directory and bundle install
cd tech-internationalization
bundle install
Step3: Generate controller
rails generate controller Welcome index
Step4: Create the CRUD using following command
rails g scaffold User name email
Step5: Migrate database and start rails server
rails db:migrate
rails s
Step6: Configuration for I18
config.i18n.available_locales = [:en, :ru, :hi, :es, :nl, :gu]
config.i18n.default_locale = :en
# Rails internationalization
gem 'rails-i18n'
# Third party api
gem 'httparty'
Gem “rails-i18n” use for internationalization
Gem “httparty” use for third party API
Step7: Install the bundle and restart the server
How to store the Translations?
Inside config/locales
There is one default file en.yml and you may create other file for each language
# English
en:
header:
menu:
language: 'Language'
home: 'Home'
about_us: 'About Us'
service: 'Service'
search: 'Search'
content:
demo_text: 'Internationalization Demo here'
user:
user_text: 'User'
# Russian
ru:
header:
menu:
language: 'язык'
home: 'Главная'
about_us: 'Насчет нас'
service: 'обслуживание'
search: 'Поиск'
content:
demo_text: 'Интернационализация Демо здесь'
user:
user_text: 'пользователей'
How to use this string in header html file?
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin:24px 0;">
<a class="navbar-brand" href="/"><%= image_tag 'techcompose.png', width: 50, height: 50%></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<%= t 'header.menu.language'%>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<%= link_to 'English', url_for(locale: :en), class: "dropdown-item" %>
<%= link_to 'Russisch', url_for(locale: :ru), class: "dropdown-item" %>
<%= link_to 'हिंदी', url_for(locale: :hi), class: "dropdown-item" %>
<%= link_to 'Español', url_for(locale: :es), class: "dropdown-item" %>
<%= link_to 'Nederlands', url_for(locale: :nl), class: "dropdown-item" %>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><%= t 'header.menu.home'%></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><%= t 'header.menu.about_us'%></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><%= t 'header.menu.service'%></a>
</li>
<li class="nav-item">
<%= link_to (t 'user.user_text'), users_path, class: "nav-link" %>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="<%= t 'header.menu.search'%>">
<button class="btn btn-success my-2 my-sm-0" type="button"><%= t 'header.menu.search'%></button>
</form>
</div>
</nav>
t ‘header.menu.home’
Create custom message with your text
t ‘header.menu.service’my-name:’techcompose’
en:
header:
menu:
language: 'Language'
home: 'Home'
about_us: 'About Us'
service: 'Service from %{my_name}'
Rails.application.routes.draw do
scope "/:locale" do
resources :users
resources :welcome, only: [:index]
end
root 'welcome#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
And inside application controller set locale param
class ApplicationController < ActionController::Base
before_action :set_locale
private
def set_locale
I18n.locale = extract_locale || I18n.default_locale
end
def extract_locale
parsed_locale = params[:locale]
I18n.available_locales.map(&:to_s).include?(parsed_locale) ? parsed_locale : nil
end
def default_url_options
{ locale: I18n.locale }
end
end
How to switch language from html?
_header.html.erb
<%= link_to ‘English’, url_for(locale: :en), class: “dropdown-item” %>
<%= link_to ‘Russisch’, url_for(locale: :ru), class: “dropdown-item” %>
<%= link_to ‘हिंदी’, url_for(locale: :hi), class: “dropdown-item” %>
<%= link_to ‘Español’, url_for(locale: :es), class: “dropdown-item” %>
<%= link_to ‘Nederlands’, url_for(locale: :nl), class: “dropdown-item” %>
Contact Ruby on Rails Development Company to develop your Business mobile app or web application with elegant design. Contact us to Hire dedicated ROR developer today or reach us at inquiry@techcompose.com for any assistance regarding ROR development requirement.