# Angular’da Uluslararasılaşma (i18n): Tam Bir Kılavuz
Uygulamanızı küresel bir pazara açmak mı istiyorsunuz? Milyonlarca kullanıcıya ulaşmak için uygulamanızın farklı dilleri ve bölgeleri desteklemesi şart. İşte tam bu noktada Angular’ın güçlü uluslararasılaşma (i18n) yetenekleri devreye giriyor. Bu makalede, Angular’da i18n’i adım adım nasıl kullanacağınızı, performans optimizasyonunu nasıl yapacağınızı ve ileri düzey teknikleri öğreneceksiniz. Farklı dillerdeki kullanıcılarınıza mükemmel bir deneyim sunmak için ihtiyacınız olan her şeyi bulacaksınız.
Temel Kavramlar: Uluslararasılaşma (i18n) ve Yerelleştirme (l10n) Nedir?
Uluslararasılaşma (i18n) ve yerelleştirme (l10n), uygulamanızı farklı diller ve kültürler için hazırlama süreçleridir. i18n, uygulamanızın dil ve bölgeye bağlı metin, tarih formatı, para birimi gibi unsurları kolayca değiştirilebilmesini sağlar. Yerelleştirme (l10n) ise, i18n’in hazırladığı altyapı üzerine, belirli bir dil ve bölge için uygulamanın çevirisini, kültürel uyarlamalarını ve diğer özelleştirmelerini yapma sürecidir. Düşünün ki i18n, evin temelini atmak gibidir; yerelleştirme ise bu evin içini döşemek, dekore etmek ve belirli bir ailenin ihtiyaçlarına göre düzenlemektir. Angular, bu iki süreci de destekleyen güçlü araçlar sunar.
Angular’da i18n’e Başlangıç: Adım Adım Uygulama
Bu bölümde, yeni başlayanlar için basit bir Angular uygulamasında i18n’i nasıl kullanacağımızı adım adım göstereceğiz.
1. Proje Oluşturma:
Öncelikle bir Angular projesi oluşturmanız gerekiyor:
ng new my-i18n-app
cd my-i18n-app2. ngx-translate Kütüphanesinin Kurulumu:
Angular’ın yerleşik i18n sistemi güçlü olsa da, ngx-translate gibi üçüncü parti kütüphaneler geliştirme sürecini kolaylaştırır. Bu kütüphaneyi aşağıdaki komutla kurabilirsiniz:
npm install ngx-translate --save3. Çeviri Dosyalarının Oluşturulması:
src/assets/i18n dizinini oluşturup içine en.json (İngilizce) ve tr.json (Türkçe) dosyalarını ekleyin. Bu dosyalar, uygulamanızın metinlerini içerecektir. Örneğin:
en.json:
{
"HELLO": "Hello, world!",
"WELCOME": "Welcome to my app!"
}tr.json:
{
"HELLO": "Merhaba, dünya!",
"WELCOME": "Uygulamama hoş geldiniz!"
}4. ngx-translate‘in Entegrasyonu:
app.module.ts dosyanızı aşağıdaki gibi güncelleyin:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }5. Uygulamada Çevirilerin Kullanımı:
app.component.html dosyanızı şu şekilde güncelleyin:
<h1>{{ 'HELLO' | translate }}</h1>
<p>{{ 'WELCOME' | translate }}</p>6. Dil Seçimi:
Uygulamanızda dil seçimini sağlamak için bir mekanizma eklemeniz gerekecektir. Bu, bir dropdown menüsü veya başka bir kullanıcı arayüzü elemanı ile yapılabilir. ngx-translate kütüphanesi dil değiştirme fonksiyonları sunmaktadır.
Orta Seviye: Gerçek Dünya Örneği ve Optimizasyon İpuçları
Şimdi, daha gerçekçi bir senaryo ele alalım. Bir e-ticaret sitesi düşünün. Bu sitede ürün isimleri, açıklamaları, fiyatlar ve diğer bilgiler farklı dillerde gösterilmelidir. ngx-translate ile bu işlemi nasıl yapacağımızı inceleyelim.
1. Karmaşık Veri Yapıları:
Ürün bilgilerini JSON dosyalarında daha karmaşık yapılar halinde tutabiliriz:
en.json:
{
"products": [
{ "name": "T-Shirt", "description": "A comfortable cotton t-shirt.", "price": 20 }
]
}tr.json:
{
"products": [
{ "name": "T-Shirt", "description": "Rahat bir pamuklu tişört.", "price": 20 }
]
}2. Performans Optimizasyonu:
Çok sayıda çeviri dosyası kullanırken performans sorunları yaşanabilir. Bunun önüne geçmek için:
* Lazy Loading: Sadece ihtiyaç duyulan dillerin yüklenmesini sağlayın.
* Cacheleme: Çevirileri önbelleğe alarak tekrar tekrar HTTP isteği göndermeyi önleyin.
* A-OT (Ahead-of-Time) Compile: Uygulamanızın derleme sürecini optimize edin.
İleri Düzey: Performans Analizi ve Edge Case’ler
Bu bölümde, daha ileri düzey konuları ele alacağız.
1. Performans Analizi:
Angular’ın performans araçlarını kullanarak çeviri süreçlerinin performansını analiz edebilirsiniz. Yavaşlayan kısımları belirleyip optimizasyon yapabilirsiniz. Chrome DevTools’un Profiler sekmesi bu konuda size yardımcı olacaktır.
2. Edge Case’ler:
* Pluralization ve Gender: Farklı dillerde çoğul ve cinsiyet uyumu için özel kurallar vardır. ngx-translate bu durumlar için çözümler sunar.
* Tarih ve Saat Formatı: Farklı dillerde tarih ve saat formatları farklıdır. Angular’ın yerleşik DatePipe‘ı veya moment.js gibi kütüphaneler kullanılabilir.
* Sayı Formatı: Para birimi sembolleri, ondalık ayraçlar gibi farklılıklar için uygun formatlama işlemleri yapmalısınız.
Öğrenme Yol Haritası
Yeni Başlayan: Yukarıda verilen adım adım kılavuzu izleyerek basit bir uygulama oluşturun. Basit bir “Merhaba Dünya” örneği ile başlayın ve daha sonra daha karmaşık örnekler deneyin.
Orta Seviye: Gerçek dünya senaryolarını içeren bir e-ticaret uygulaması veya blog sitesi gibi bir proje geliştirin. Performans optimizasyon tekniklerini uygulayın ve farklı dil dosyalarını yönetmeyi öğrenin.
İleri Düzey: Karmaşık veri yapıları ve edge case’leri içeren bir proje geliştirin. Performans analiz araçlarını kullanarak uygulamanızın performansını iyileştirin ve farklı kültürlere uygun özelleştirmeler yapın. Fatih Soysal’ın Angular ile ilgili detaylı blog yazılarını inceleyerek daha fazla bilgi edinebilirsiniz. [https://fatihsoysal.com](https://fatihsoysal.com)
Sonuç
Angular’da uluslararasılaşma, uygulamanızı küresel bir pazara açmak için hayati önem taşır. Bu makalede, i18n’in temellerinden ileri düzey tekniklere kadar geniş bir yelpazeyi ele aldık. Uygulamanızın büyüklüğüne ve ihtiyaçlarınıza göre, ngx-translate gibi kütüphaneleri kullanabilir veya Angular’ın yerleşik i18n sistemini tercih edebilirsiniz. Unutmayın ki, mükemmel bir kullanıcı deneyimi sunmak için performans optimizasyonuna ve kültürel uyumluluğa dikkat etmeniz çok önemlidir.
Sıkça Sorulan Sorular:
1. Hangi i18n kütüphanesini kullanmalıyım? ngx-translate popüler ve kullanımı kolay bir kütüphanedir, ancak Angular’ın yerleşik i18n sistemi de yeterli olabilir.
2. Çok sayıda dil desteği eklemek performansı nasıl etkiler? Performans sorunlarını önlemek için lazy loading ve cacheleme tekniklerini kullanmalısınız.
3. Tarih ve saat formatlarını nasıl özelleştirebilirim? Angular’ın DatePipe‘ı veya moment.js gibi kütüphaneleri kullanabilirsiniz.
4. Pluralization ve gender nasıl yönetilir? ngx-translate gibi kütüphaneler bu işlemleri kolaylaştırır.
5. Çeviri dosyalarını nasıl yönetirim? Version kontrol sistemleri (Git) ve çeviri yönetim platformları kullanabilirsiniz.
Yazar: Fatih Soysal