• Buradasın

    Angular'da Çoklu Dil Destekli Web Uygulaması Geliştirme Eğitimi

    youtube.com/watch?v=83BMMVTGSQs

    Yapay zekadan makale özeti

    • Bu video, Bahattin Marka tarafından sunulan bir eğitim içeriğidir. Bahattin, Fönder and Developer olarak çalışmakta ve Angular framework'ünde çoklu dil desteği (I18n) konusunu ele almaktadır.
    • Video, localization (yerleştirme) ve internationalization (uluslararasılaştırma) kavramlarını açıklayarak başlamakta, ardından Angular Translate paketinin temel kullanımını, config provider'ı ve dil tercih ayarlarını detaylı şekilde anlatmaktadır. İçerik, hem HTML hem de JavaScript'te dil çevirisi yapma, dil bilgisini saklama yöntemleri ve custom dil dosyaları ekleme gibi konuları kapsamaktadır.
    • Eğitim, e-ticaret sitesi örneği üzerinden pratik uygulamalar içermekte ve izleyicilerden gelen sorulara cevap verilmektedir. Ayrıca, geleneksel bir web uygulamasından Angular Translate kullanan bir uygulamaya geçiş yapan bir ekibin deneyimleri paylaşılmakta, statik textler, API hata mesajları ve dinamik verilerin dil desteği için kullanılan çözümler anlatılmaktadır.
    00:03Çoklu Dil Destekli Web Uygulaması Geliştirme
    • Bahattin Marka, fönder and developer olarak çalışmakta ve çoklu dil desteği olan bir web uygulamasının nasıl geliştirileceğini anlatacaktır.
    • Konuşmacının blog sayfası ve örnek linkleri aşağıda bulunmaktadır.
    • Kaynak dosyalara erişim için blog sayfasından linkler kullanılabilir.
    00:32Uluslararasılaştırma ve Yerelleştirme Kavramları
    • Uluslararasılaştırma (internationalization) kavramı, tek sistemde birden fazla dil desteği barındırmayı amaçlar.
    • Yerelleştirme (localization) kavramı, ürünün birden fazla dile çevrilmesini ifade eder.
    • Tarihler, para birimleri, ısı birimleri ve ölçü birimleri gibi kavramların da çevrilmesi gerekir.
    01:34Küreselleştirme ve Örnekler
    • Hem içerik hem de tarih, para birimi gibi kavramların çevrilmesiyle küreselleştirme (globalization) sağlanır.
    • Gold, her dile göre içerik, görseller, para birimi ve tarihleri çeviren başarılı bir örnektir.
    • Dil paketlerinin isimlendirilmesinde ülke ismi ve bölge ismi şeklinde standartlar vardır (örneğin: US, TR).
    02:30Geçmiş Çözümler ve Sorunları
    • Geçmişte PHP, Python, C gibi dillerle dil desteği çözümleri bulunmuştur.
    • Bu çözümlerde sayfa render alırken dil bilgisi pars edilir ve context oluşur.
    • Single page uygulamalarda dil değiştiğinde sayfanın yenilenmesi gerekir ve bu kullanıcıda gecikme oluşturur.
    03:14Getext ve Kullanımı
    • Getext, bir GNOME projesi olup .po ve .mo dosyaları içerir.
    • .po dosyaları dil dosyalarını, .mo dosyaları ise bu dosyaların binary halini içerir.
    • Getext için PO Edit ve Yuva gibi editörler bulunmaktadır.
    04:12Anlık Dil Değişimi Çözümleri
    • Tek sayfa uygulamalarda anlık dil değişimi kullanıcıda olumlu etki bırakır.
    • Fireba veya Pars gibi web soket teknolojileri kullanılarak real time olarak dil değişikliği yapılabilir.
    • Front-end tarafında JavaScript ile dil değişimi yapmak daha okunaklı ve kullanımı kolaydır.
    05:11İçerik Çevirisi ve Paketler
    • JavaScript'in context içerik çevirisinde destek vermediği, sadece tarih, zaman ve para birimi çevrimlerinde kolaylık sağladığı belirtilmiştir.
    • İçerik çevirilerinde tarih, para birimi ve rakam gibi kavramların kullanımı gösterilmiştir.
    • İngilizce için Getext ve Angle Translate gibi paketler kullanılmaktadır.
    06:20Angular Translate Kullanımı
    • Angular Translate, birden çok dil çevirisi yöntemi sunan bir pakettir ve JSON dosyası veya app olarak kullanılabilir.
    • Paket kullanımı basittir; config provider'da dil çevirisi yapılandırılabilir ve default dil atanabilir.
    • Dil çevirisi için directive ve filter kullanımı mevcuttur, ancak SEO açısından filtre kullanımı daha avantajlıdır.
    07:45Angular Translate Özellikleri
    • Storage özelliği ile dil bilgisi cookie veya lokal storage'da saklanabilir.
    • Pakette dil çevirisi için bir servis de bulunmaktadır, bu servis JavaScript'te dil çevirisi yapmak için kullanılır.
    • Angular Translate, dil değişimi için özel bir logo ve loader sunar.
    08:35Dil Değişimi İşlemleri
    • Translate.get() fonksiyonu ile aktif dil bilgisi alınabilir, değer verilerek dil değiştirilebilir.
    • Dil değişimi olayları takip edilebilir ve dil değiştirme butonları oluşturulabilir.
    • Dil değişimi için provider'da hangi depolama yönteminin kullanılacağı belirtilmelidir.
    09:44Lokal Dil Değişimi
    • Angular default olarak lokal dil değişimi izin vermez, bu sorunu çözmek için özel paketler kullanılabilir.
    • Local dil değişimi için "local-language-pattern" özelliği ile dil değiştiğinde hangi dosyaların çekileceği belirlenebilir.
    • Local dil değişimi için "local-language-set" özelliği ile dil bilgisi kaydedilebilir.
    10:49Konum Bazlı İçerik
    • Dil çevirisi sadece dil bazlı değil, konum bazlı içerik gösterimi de yapılabilir.
    • Konum bazlı içerik gösterimi için IP adresi veya navigation language gibi yöntemler kullanılabilir.
    • Angular Translate, dil bazlı içerik gösterimi için destek sunar.
    11:54Demo İçeriği
    • E-ticaret site dashboard'u, ürünler, para birimleri ve iletişim formu içeren bir demo hazırlanmıştır.
    • Dil değişimi için cookie kullanılmış ve dil değiştiğinde API isteği yapılarak dil bilgileri çekilmektedir.
    • Hem HTML hem de JavaScript tarafında dil çevirisi servisi kullanılabilir.
    14:29Soru-Cevap
    • Angular Translate sadece client tarafında desteklenir, backend tarafında (Node.js, ASP.NET gibi) kullanılamamaktadır.
    • Çevirileri database'e kaydetmek için REST API desteği kullanılabilir.
    • Form validasyon işlemleri için browser'ın navigation language kısmından çekilen değerler kullanılır, dil değişimi sırasında validation sorunları yaşanabilir.
    17:41Angular Translate Kullanımı ve Lokalizasyon Sorunları
    • Bir takım, geleneksel web uygulamasından Angular Translate kullanan bir uygulamaya geçiş yapmıştır.
    • Lokalizasyon ile ilgili üç sorun çözülmek zorunda kalmıştır: statik textler, API kollarından dönen hata mesajları ve dinamik datanın dile göre farklı gelmesi.
    • Angular Translate, statik textleri kolayca çözmüş, ancak API hata mesajları ve dinamik veriler için farklı çözümler gerektirmiştir.
    18:55Lokalizasyon Çözüm Yaklaşımları
    • Bulunan çözüm, backend'in tüm dillerin mesajlarını JSON result olarak döndürmesi ve global HTTP interceptor'da post-process edip Angular'ın current language'a göre mesajı seçmesidir.
    • Alternatif olarak, API kollarında accept language HTTP header ile backend'e sadece tek bir dili göndermesini force etmek ve backend tarafında ayrı localization dosyaları kullanmak mümkündür.
    • API key-value şeklinde tutulup, key'leri UI tarafında translate etmek de bir alternatif olabilir, ancak müşteri girdiği datalarda bu kolay olmamaktadır.
    23:40Dil Değişimi ve Performans
    • Birden fazla dil desteği olan uygulamalarda, hiçbir dil değişimi yapmayanların performansı etkilenmiş olabilir.
    • Dil değişiminde cümle yapılarının da değişmesi gerekebiliyor, örneğin tekli-çoklu gibi.
    • Angular Translate, belirtilen text içerisinde parametre alabiliyor ve bunları pars edebiliyor.
    25:54Layout ve Dil Değişimi Sorunları
    • Dil değişiminde layout'un farklı dillere göre düzenini kaybedebiliyor olması bir sorun olabilir.
    • Angular'ın paket içerisinde layout değişimiyle ilgili desteği yoktur, bu konuda UI yapıp çözüm bulmak gerekiyor.
    • Arapça gibi sağdan sola hizalanan dillerde sayfanın tamamen değişmesi gerekebilir, bu durumda servis yapmak gerekebilir.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor