# Angular’da Uluslararas\u0131la\u015fma (i18n): Tam Bir K\u0131lavuz<\/p>\n
Uygulaman\u0131z\u0131 k\u00fcresel bir pazara a\u00e7mak m\u0131 istiyorsunuz? Milyonlarca kullan\u0131c\u0131ya ula\u015fmak i\u00e7in uygulaman\u0131z\u0131n farkl\u0131 dilleri ve b\u00f6lgeleri desteklemesi \u015fart. \u0130\u015fte tam bu noktada Angular’\u0131n g\u00fc\u00e7l\u00fc uluslararas\u0131la\u015fma (i18n) yetenekleri devreye giriyor. Bu makalede, Angular’da i18n’i ad\u0131m ad\u0131m nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131, performans optimizasyonunu nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 ve ileri d\u00fczey teknikleri \u00f6\u011freneceksiniz. Farkl\u0131 dillerdeki kullan\u0131c\u0131lar\u0131n\u0131za m\u00fckemmel bir deneyim sunmak i\u00e7in ihtiyac\u0131n\u0131z olan her \u015feyi bulacaks\u0131n\u0131z.<\/p>\n
Temel Kavramlar: Uluslararas\u0131la\u015fma (i18n) ve Yerelle\u015ftirme (l10n) Nedir?<\/strong><\/p>\n Uluslararas\u0131la\u015fma (i18n) ve yerelle\u015ftirme (l10n), uygulaman\u0131z\u0131 farkl\u0131 diller ve k\u00fclt\u00fcrler i\u00e7in haz\u0131rlama s\u00fcre\u00e7leridir. i18n, uygulaman\u0131z\u0131n dil ve b\u00f6lgeye ba\u011fl\u0131 metin, tarih format\u0131, para birimi gibi unsurlar\u0131 kolayca de\u011fi\u015ftirilebilmesini sa\u011flar. Yerelle\u015ftirme (l10n) ise, i18n’in haz\u0131rlad\u0131\u011f\u0131 altyap\u0131 \u00fczerine, belirli bir dil ve b\u00f6lge i\u00e7in uygulaman\u0131n \u00e7evirisini, k\u00fclt\u00fcrel uyarlamalar\u0131n\u0131 ve di\u011fer \u00f6zelle\u015ftirmelerini yapma s\u00fcrecidir. D\u00fc\u015f\u00fcn\u00fcn ki i18n, evin temelini atmak gibidir; yerelle\u015ftirme ise bu evin i\u00e7ini d\u00f6\u015femek, dekore etmek ve belirli bir ailenin ihtiya\u00e7lar\u0131na g\u00f6re d\u00fczenlemektir. Angular, bu iki s\u00fcreci de destekleyen g\u00fc\u00e7l\u00fc ara\u00e7lar sunar.<\/p>\n Angular’da i18n’e Ba\u015flang\u0131\u00e7: Ad\u0131m Ad\u0131m Uygulama<\/strong><\/p>\n Bu b\u00f6l\u00fcmde, yeni ba\u015flayanlar i\u00e7in basit bir Angular uygulamas\u0131nda i18n’i nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fiz.<\/p>\n 1. Proje Olu\u015fturma:<\/strong><\/p>\n \u00d6ncelikle bir Angular projesi olu\u015fturman\u0131z gerekiyor:<\/p>\n 2. Angular’\u0131n yerle\u015fik i18n sistemi g\u00fc\u00e7l\u00fc olsa da, 3. \u00c7eviri Dosyalar\u0131n\u0131n Olu\u015fturulmas\u0131:<\/strong><\/p>\n 4. 5. Uygulamada \u00c7evirilerin Kullan\u0131m\u0131:<\/strong><\/p>\n 6. Dil Se\u00e7imi:<\/strong><\/p>\n Uygulaman\u0131zda dil se\u00e7imini sa\u011flamak i\u00e7in bir mekanizma eklemeniz gerekecektir. Bu, bir dropdown men\u00fcs\u00fc veya ba\u015fka bir kullan\u0131c\u0131 aray\u00fcz\u00fc eleman\u0131 ile yap\u0131labilir. Orta Seviye: Ger\u00e7ek D\u00fcnya \u00d6rne\u011fi ve Optimizasyon \u0130pu\u00e7lar\u0131<\/strong><\/p>\n \u015eimdi, daha ger\u00e7ek\u00e7i bir senaryo ele alal\u0131m. Bir e-ticaret sitesi d\u00fc\u015f\u00fcn\u00fcn. Bu sitede \u00fcr\u00fcn isimleri, a\u00e7\u0131klamalar\u0131, fiyatlar ve di\u011fer bilgiler farkl\u0131 dillerde g\u00f6sterilmelidir. 1. Karma\u015f\u0131k Veri Yap\u0131lar\u0131:<\/strong><\/p>\n \u00dcr\u00fcn bilgilerini JSON dosyalar\u0131nda daha karma\u015f\u0131k yap\u0131lar halinde tutabiliriz:<\/p>\n 2. Performans Optimizasyonu:<\/strong><\/p>\n \u00c7ok say\u0131da \u00e7eviri dosyas\u0131 kullan\u0131rken performans sorunlar\u0131 ya\u015fanabilir. Bunun \u00f6n\u00fcne ge\u00e7mek i\u00e7in:<\/p>\n * Lazy Loading:<\/strong> Sadece ihtiya\u00e7 duyulan dillerin y\u00fcklenmesini sa\u011flay\u0131n. \u0130leri D\u00fczey: Performans Analizi ve Edge Case’ler<\/strong><\/p>\n Bu b\u00f6l\u00fcmde, daha ileri d\u00fczey konular\u0131 ele alaca\u011f\u0131z.<\/p>\n 1. Performans Analizi:<\/strong><\/p>\n Angular’\u0131n performans ara\u00e7lar\u0131n\u0131 kullanarak \u00e7eviri s\u00fcre\u00e7lerinin performans\u0131n\u0131 analiz edebilirsiniz. Yava\u015flayan k\u0131s\u0131mlar\u0131 belirleyip optimizasyon yapabilirsiniz. Chrome DevTools’un Profiler sekmesi bu konuda size yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n 2. Edge Case’ler:<\/strong><\/p>\n * Pluralization ve Gender:<\/strong> Farkl\u0131 dillerde \u00e7o\u011ful ve cinsiyet uyumu i\u00e7in \u00f6zel kurallar vard\u0131r. \u00d6\u011frenme Yol Haritas\u0131<\/strong><\/p>\n Yeni Ba\u015flayan:<\/strong> Yukar\u0131da verilen ad\u0131m ad\u0131m k\u0131lavuzu izleyerek basit bir uygulama olu\u015fturun. Basit bir “Merhaba D\u00fcnya” \u00f6rne\u011fi ile ba\u015flay\u0131n ve daha sonra daha karma\u015f\u0131k \u00f6rnekler deneyin.<\/p>\n Orta Seviye:<\/strong> Ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 i\u00e7eren bir e-ticaret uygulamas\u0131 veya blog sitesi gibi bir proje geli\u015ftirin. Performans optimizasyon tekniklerini uygulay\u0131n ve farkl\u0131 dil dosyalar\u0131n\u0131 y\u00f6netmeyi \u00f6\u011frenin.<\/p>\n \u0130leri D\u00fczey:<\/strong> Karma\u015f\u0131k veri yap\u0131lar\u0131 ve edge case’leri i\u00e7eren bir proje geli\u015ftirin. Performans analiz ara\u00e7lar\u0131n\u0131 kullanarak uygulaman\u0131z\u0131n performans\u0131n\u0131 iyile\u015ftirin ve farkl\u0131 k\u00fclt\u00fcrlere uygun \u00f6zelle\u015ftirmeler yap\u0131n. Fatih Soysal’\u0131n Angular ile ilgili detayl\u0131 blog yaz\u0131lar\u0131n\u0131 inceleyerek daha fazla bilgi edinebilirsiniz. [https:\/\/fatihsoysal.com](https:\/\/fatihsoysal.com)<\/p>\n Sonu\u00e7<\/strong><\/p>\n Angular’da uluslararas\u0131la\u015fma, uygulaman\u0131z\u0131 k\u00fcresel bir pazara a\u00e7mak i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Bu makalede, i18n’in temellerinden ileri d\u00fczey tekniklere kadar geni\u015f bir yelpazeyi ele ald\u0131k. Uygulaman\u0131z\u0131n b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve ihtiya\u00e7lar\u0131n\u0131za g\u00f6re, S\u0131k\u00e7a Sorulan Sorular:<\/strong><\/p>\n 1. Hangi i18n k\u00fct\u00fcphanesini kullanmal\u0131y\u0131m?<\/strong> Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"# Angular’da Uluslararas\u0131la\u015fma (i18n): Tam Bir K\u0131lavuz Uygulaman\u0131z\u0131 k\u00fcresel bir pazara a\u00e7mak m\u0131 istiyorsunuz? Milyonlarca kullan\u0131c\u0131ya ula\u015fmak i\u00e7in…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-29895","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nng new my-i18n-app\ncd my-i18n-app<\/code><\/pre>\nngx-translate<\/code> K\u00fct\u00fcphanesinin Kurulumu:<\/strong><\/p>\nngx-translate<\/code> gibi \u00fc\u00e7\u00fcnc\u00fc parti k\u00fct\u00fcphaneler geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131r\u0131r. Bu k\u00fct\u00fcphaneyi a\u015fa\u011f\u0131daki komutla kurabilirsiniz:<\/p>\nnpm install ngx-translate --save<\/code><\/pre>\nsrc\/assets\/i18n<\/code> dizinini olu\u015fturup i\u00e7ine en.json<\/code> (\u0130ngilizce) ve tr.json<\/code> (T\u00fcrk\u00e7e) dosyalar\u0131n\u0131 ekleyin. Bu dosyalar, uygulaman\u0131z\u0131n metinlerini i\u00e7erecektir. \u00d6rne\u011fin:<\/p>\nen.json<\/code>:<\/p>\n{\n "HELLO": "Hello, world!",\n "WELCOME": "Welcome to my app!"\n}<\/code><\/pre>\ntr.json<\/code>:<\/p>\n{\n "HELLO": "Merhaba, d\u00fcnya!",\n "WELCOME": "Uygulamama ho\u015f geldiniz!"\n}<\/code><\/pre>\nngx-translate<\/code>‘in Entegrasyonu:<\/strong><\/p>\napp.module.ts<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { TranslateModule, TranslateLoader } from '@ngx-translate\/core';\nimport { TranslateHttpLoader } from '@ngx-translate\/http-loader';\nimport { HttpClient, HttpClientModule } from '@angular\/common\/http';\nimport { AppComponent } from '.\/app.component';\n\nexport function HttpLoaderFactory(http: HttpClient) {\n return new TranslateHttpLoader(http, '.\/assets\/i18n\/', '.json');\n}\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n HttpClientModule,\n TranslateModule.forRoot({\n loader: {\n provide: TranslateLoader,\n useFactory: HttpLoaderFactory,\n deps: [HttpClient]\n }\n })\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\napp.component.html<\/code> dosyan\u0131z\u0131 \u015fu \u015fekilde g\u00fcncelleyin:<\/p>\n<h1>{{ 'HELLO' | translate }}<\/h1>\n<p>{{ 'WELCOME' | translate }}<\/p><\/code><\/pre>\nngx-translate<\/code> k\u00fct\u00fcphanesi dil de\u011fi\u015ftirme fonksiyonlar\u0131 sunmaktad\u0131r.<\/p>\nngx-translate<\/code> ile bu i\u015flemi nas\u0131l yapaca\u011f\u0131m\u0131z\u0131 inceleyelim.<\/p>\nen.json<\/code>:<\/p>\n{\n "products": [\n { "name": "T-Shirt", "description": "A comfortable cotton t-shirt.", "price": 20 }\n ]\n}<\/code><\/pre>\ntr.json<\/code>:<\/p>\n{\n "products": [\n { "name": "T-Shirt", "description": "Rahat bir pamuklu ti\u015f\u00f6rt.", "price": 20 }\n ]\n}<\/code><\/pre>\n
\n* Cacheleme:<\/strong> \u00c7evirileri \u00f6nbelle\u011fe alarak tekrar tekrar HTTP iste\u011fi g\u00f6ndermeyi \u00f6nleyin.
\n* A-OT (Ahead-of-Time) Compile:<\/strong> Uygulaman\u0131z\u0131n derleme s\u00fcrecini optimize edin.<\/p>\nngx-translate<\/code> bu durumlar i\u00e7in \u00e7\u00f6z\u00fcmler sunar.
\n* Tarih ve Saat Format\u0131:<\/strong> Farkl\u0131 dillerde tarih ve saat formatlar\u0131 farkl\u0131d\u0131r. Angular’\u0131n yerle\u015fik DatePipe<\/code>‘\u0131 veya moment.js gibi k\u00fct\u00fcphaneler kullan\u0131labilir.
\n* Say\u0131 Format\u0131:<\/strong> Para birimi sembolleri, ondal\u0131k ayra\u00e7lar gibi farkl\u0131l\u0131klar i\u00e7in uygun formatlama i\u015flemleri yapmal\u0131s\u0131n\u0131z.<\/p>\nngx-translate<\/code> gibi k\u00fct\u00fcphaneleri kullanabilir veya Angular’\u0131n yerle\u015fik i18n sistemini tercih edebilirsiniz. Unutmay\u0131n ki, m\u00fckemmel bir kullan\u0131c\u0131 deneyimi sunmak i\u00e7in performans optimizasyonuna ve k\u00fclt\u00fcrel uyumlulu\u011fa dikkat etmeniz \u00e7ok \u00f6nemlidir.<\/p>\nngx-translate<\/code> pop\u00fcler ve kullan\u0131m\u0131 kolay bir k\u00fct\u00fcphanedir, ancak Angular’\u0131n yerle\u015fik i18n sistemi de yeterli olabilir.
\n2. \u00c7ok say\u0131da dil deste\u011fi eklemek performans\u0131 nas\u0131l etkiler?<\/strong> Performans sorunlar\u0131n\u0131 \u00f6nlemek i\u00e7in lazy loading ve cacheleme tekniklerini kullanmal\u0131s\u0131n\u0131z.
\n3. Tarih ve saat formatlar\u0131n\u0131 nas\u0131l \u00f6zelle\u015ftirebilirim?<\/strong> Angular’\u0131n DatePipe<\/code>‘\u0131 veya moment.js gibi k\u00fct\u00fcphaneleri kullanabilirsiniz.
\n4. Pluralization ve gender nas\u0131l y\u00f6netilir?<\/strong> ngx-translate<\/code> gibi k\u00fct\u00fcphaneler bu i\u015flemleri kolayla\u015ft\u0131r\u0131r.
\n5. \u00c7eviri dosyalar\u0131n\u0131 nas\u0131l y\u00f6netirim?<\/strong> Version kontrol sistemleri (Git) ve \u00e7eviri y\u00f6netim platformlar\u0131 kullanabilirsiniz.<\/p>\n