AngularJS ile Çoklu Dil Desteği Veren Web Uygulamaları Geliştirmek

Bahattin Çiniç

Backend Developer @markafoni

http://bahattincinic.com

http://github.com/bahattincinic

internationalization (Uluslararasılaştırma) (i18n)

• i18n internationalization kelimesinin kısaltması.
  (i + 18 harf + n)
• Tek sistemde birden fazla dil desteği vermek.

Localization (Yerelleştirme) (L10N)

• L10N Localization kelimesinin kısaltması.
  (l + 10 harf + n)
• Tarih, zaman, para ve ısı birimleri ya da ölçü birimlerinin dönüştürülmesi gibi işlemleri de içerir.
• Aynı şekilde uyarlanıcak yerin hukuk kurallarına da içerir (renk, yazı tipi, alfabe, görsel vb.) 

Globalization (küreselleşme) G11N

Dil Paketlerini İsimlendirmek. (Locale)

• Ülke + Bölge şeklinde isimlendiriliyor.
• en_US (English US)
  en_GB (English UK)
  tr_TR (Türkiye)

Arka planda (Backend) çözüm üretmek.

• Herhangi bir arkaplan dili (PHP, Python…) ile çözüm üretebiliyoruz.
• Genellikle gettext tercih ediliyor.
• Tek sayfa uygulamalar (Single Page App.) da dil değişiminde oluşan veri kaybı.
• Dil değişiminde sayfanın yenilenmesi.

Gettext ne işe yarar ?

• Gettext bir çeviri kütüphanesi. 
• GNU nun projesi.
• po uzantılı dosyalar dil çevirisi dosyalarının derlenmemiş, mo uzantılı dosyaların derlenmiş halidir.
• poedit.net po dosyalarının düzenlenmesi için güzel bir editör.
• poeditor.com online çeviri için güzel bir uygulama

Gettext kullanımı

#: contrib/admin/templates/registration/password_reset_form.html:19
msgid "Reset my password"
msgstr "Şifremi sıfırla"

#: contrib/admin/templates/registration/password_reset_form.html:19
msgid "Email address:"
msgstr "E-posta adresi:"

<form action="" method="post">
{% csrf_token %}
{{ form.email.errors }}
<p>
    <label for="id_email">
        {% trans 'Email address:' %}</label>
            {{ form.email }}
        <input type="submit" value="{% trans 'Reset my password' %}" />
</p>
</form>

Markup (Django Template Engine)

PO Dosyası

Önyüzde (Frontend) Çözüm Üretmek

• Tek sayfa uygulamalarda anlık dil değişimi
• Anında tepkinin kullanıcı da bıraktığı his.
• Dil dosyalarında herhangi bir değişiklik olduğu 
  anda kullanıcıya yansıtma imkanı. (Firebase, Parse)
• Dil çevirilerinin JSON formatında saklanabilmesi.

AngularJS ile bir bakış.

• Javascript kodundan dil çeviri işlemlerinin ayrıştırılması.
• Rest Api den veya bir JSON dosyasından çeviri 
  içeriklerinin alınabilmesi.
• Zaman, tarih gibi işlemleri çevirmedeki kolaylık. (L1ON)

AngularJs in destek verdigi diller
code.angularjs.org/1.3.2/i18n/

github.com/angular/bower-angular-i18n

bower install angular-i18n

Para Birimi, Tarih Çevirimleri

<script>
    var app = angular.module('myApp', []);
    app.controller('localizationController', ['$scope', function($scope){
         $scope.date = new Date();
         $scope.money = 100;
         $scope.age = 1234.56789
    }]);
</script>

<div ng-app='myApp'>
  <div ng-controller='localizationController'>
      <!-- Response: Saturday, November 8, 2014 -->
      {{ date |date:"fullDate" }}
      
      </br>
      
      <!-- Response: $100.00 -->
      {{ money |currency }}

      <!-- Response: 1,234.568 -->
      {{ age |number }}
  </div>
</div>

AngularJS deki popüler İ18N Paketleri

• github.com/rubenv/angular-gettext
• github.com/angular-translate/angular-translate

angular-translate

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {

   $translateProvider.translations('en', {
      "APP_TITLE": "VNGRS AngularJS Bootcamp",
      "INTRODUCTION_TEXT": "First angularjs Conference in Istanbul"
   });

   $translateProvider.translations('tr', {
      "APP_TITLE": "VNGRS AngularJS Kampı",
      "INTRODUCTION_TEXT": "İstanbul'daki ilk AngularJS Konferansı"
   });

   $translateProvider.preferredLanguage('tr');

}]);

<h1>{{ "APP_TITLE" | translate }}</h1>
<p>{{ "INTRODUCTION_TEXT" | translate }}</p>

<h1 translate="APP_TITLE"></h1>
<p translate="INTRODUCTION_TEXT"></p>

<h1>VNGRS AngularJS Kampı</h1>
<p>İstanbul'daki ilk AngularJS Konferansı</p>

Kavramsal Bakış

Dil Değiştirmek 

app.controller('langController', function ($scope, $translate) {

  $scope.switchLanguage = function (languageKey) {
    $translate.use(languageKey);
  };

});

<ul ng-controller="langController">
  <li><button ng-click="switchLanguage('tr')">Turkish</button></li>
  <li><button ng-click="switchLanguage('en')">English</button></li>
</ul>

Markup

Değişen Dili Hatırlamak

var app = angular.module('myApp', ['ngCookies', 'pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.useCookieStorage();
}]);

// bower install angular-translate-storage-cookie

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.useLocalStorage();
}]);

// bower install angular-translate-storage-local

Coo​kie de saklamak

localStorage da saklamak

$locale değişimi

var app = angular.module('angularShop', ['pascalprecht.translate', 'tmh.dynamicLocale']);

app.config(['$translateProvider', 'tmhDynamicLocaleProvider',
    function ($translateProvider, locale) {
        locale.localeLocationPattern('/components/angular-i18n/angular-locale_{{locale}}.js');
        locale.storeKey = $translateProvider.storagePrefix();
        locale.useCookieStorage();
}]);

angular.module('angularShop').controller('langController', function ($scope, $translate, tmhDynamicLocale) {
  $scope.switchLanguage = function (languageKey) {
    $translate.use(languageKey);
    tmhDynamicLocale.set(languageKey);
  };
});

bower install angular-i18n
bower install angular-dynamic-locale

Kurulum

AngularJs de dinamik olarak $locale değişimine destek yok.

• Giriş yaptığı ülkeye göre otomatik dil seçimi.
  Tarayıcı diline görede olabilir. (navigator.language)
• Kullanıcının bulunduğu konuma göre sadece o konuma gönderilebilir ürünlerin gösterilebilmesi. (geoip)

Konum Bazlı İçerik 

$translateProvider.determinePreferredLanguage()

Demo

github.com/bahattincinic/angularjs-bootcamp

Teşekkürler