ကျနော်နှင့် Frontend Translation

Git အကြောင်းခဏရပ်ပြီး Frontend localisation ဘက်ခဏလှည့်ကြရအောင်ဗျာ။

ဘာလဲဟ frontend translation? ခေါင်းစဥ်ကတော့ တစ်မျိုးပဲနော် လွယ်မယောင်ယောင်နဲ့ခက် တိမ်မယောင်ယောင်နဲ့ နက်ဆိုတဲ့ စကားအတိုင်းပါပဲ။ ကျနော့်တို့ လက်ရှိ Company ရဲ့ Product က အာဆီယံနိုင်ငံတော်တော်များမှာ စသုံးလာကြချိန်မှာ ကျနော့်အတွက် challenge က jQuery Library တွေသုံးထားတဲ့ custom popup တွေ၊ user ကို frontend ကပေးချင်တဲ့ Message တွေ localisation ဘယ်လိုလုပ်မလဲဆိုတဲ့ အခက်အခဲပါပဲ။ Backend translation ပိုင်းမှာ လွယ်သလောက် Frontend ကျတော့ ကျနော် ဘယ်ကစရမှန်းကို မသိတော့လောက်အောင်ကို ဖြစ်ခဲ့ပါတယ်။ Backend မှာဆိုရင် သက်ဆိုင်ရာသုံးတဲ့ Framework တွေကိုသုံးပြီး po file တွေ ထုတ်ပြီး localise လုပ်လို့ရပေမဲ့ Frontend ပိုင်းကြတော့ po file နဲ့ သုံးမရပြန်ဘူး။ PHP က သတ်မှတ်ပေးထားတဲ့ syntax style လေးသုံးလိုက်ရင်ကို command သုံးပြီး po file ထုတ်၊ translate လုပ်၊ ပြီးတာနဲ့ ကြိုက်နှစ်သက်ရာ language ကိုချိန်းပြီး ပြောင်းလို့ရသွားပေမဲ့ …..

<?php __("Hello, how are you today?")?> ဒါကလွယ်တဲ့ ဒီ Message ကို javascript file တွေထဲမှာ ထည့်မိရင် စဥ်းစားရခက်ပါပြီ။ ဒါပေမဲ့ ကျနော် library တစ်ခုသုံးပြီး ဒီလိုရေးလို့ရတယ်ဗျာ။

polyglot.t('msg_greeting') သက်ဆိုင်ရာ key လေးပဲ မှန်အောင် ထည့်ပေးလိုက်ရုံပဲ။ ❤ ဟုတ်ပါတယ်။ ဒီ library ကိ Airbnb က ပိုင်တဲ့ library ပါ။ Project Name က Polyglot လို့ခေါ်ပါတယ်။

ကျနော့် Laravel ကို download လုပ်ပြီး localhost မှာ run ပြီး sample လုပ်ထားတဲ့ translation လေးကို ကြည့်ကြည့်ရအောင်။ အောက်ကပုံလေးက ကျနော် Click Me ဆိုတဲ့ button လေးကို နှိပ်လိုက်ရင် ထွက်လာတဲ့ Popup message ဖြစ်ပါတယ်။

ဒီအောက်ကပုံကတော့ Confirmation button လေးကို click လုပ်လို့ရလာတဲ့ result ပါ။

ပထမစာသားကို Laravel မှ ကြိုဆိုပါတယ်။ ဒုတိယစာကို Username! ရေ မင်းဒါကို လုပ်မှာ သေချာရဲ့လား ဆိုတဲ့စာကို ပြောင်းချင်တယ်။ Language ကို English ပြန်ရွေးရင် English လို ပြန်ပြချင်တယ်။ Youtube Video sample လေးကြည့်လိုက်ရအောင်။

https://youtu.be/9EiWcbyi1VY

ရလာတဲ့ Result လေးပါ။

ပထမဆုံးကျနော်တို့ အရင် သူရဲ့ Library ကို npm install node-polyglot ဆိုတဲ့ command run ပြီး install လုပ်လို့ရသလို တိုက်ရိုက် download လုပ်ပြီးတော့လည်း ကိုယ့် Project ရဲ့ javascript folder တွေ ရှိတဲ့ location ထဲကို ထည့်ပေးရမှာ ဖြစ်ပါတယ်။ ကျနော်က Larvel ရဲ့ public/js အောက်မှာ folder အသစ်နဲ့ polyglot ဆိုပြီး create လုပ်၊ ပြီးတော့ သက်ဆိုင်ရာ file တွေ ထည့်ထားပါတယ်။ ကျနော်ကတော့ ဒီအတိုင်း download လုပ်ပြီးတော့ ထည့်ထားတာပါ။ Filename က polyglot.min.js ပါ

ပြီးတော့ locale ဆိုတဲ့ folder ထဲမှာ translate လုပ်ထားတဲ့ စာတွေကို key-value အနေနဲ့ သိမ်းထားပါတယ်။ ဒါကတော့ mm.json file ပါ။

{
    "msg_cancel": "မလုပ်တော့ပါ",
    "msg_delete": "ဖျက်ပါ",
    "msg_done": "ပြီးပါပြီ",
    "msg_greeting":"Laravel မှကြိုဆိုပါတယ်",
    "msg_are_you_sure":"%{username}! ရေ မင်းဒါကို လုပ်မှာ သေချာရဲ့လား"
}

ဒါကတော့ en.json file ပါ။ language အသစ်တွေတိုးလာတဲနဲ့အမျှ file အသစ်တွေ ထပ်ထပ်ထည့်သွားလို့ရပါတယ်။

{
    "msg_cancel": "Cancel",
    "msg_delete": "Delete",
    "msg_done": "Done",
    "msg_greeting":"Welcome to Laravel",
    "msg_are_you_sure":"%{username}! Are you sure you want to do it?"
}

နောက်အရေးကြီးတဲ့ file တစ်ခုက ဒီ json file တွေကို access လုပ်ပြီး polyglot ရဲ့ object ထဲထည့်ပေးရတဲ့ အပိုင်းပါ။

let language = $('html').attr('lang');
let request = new XMLHttpRequest();
let localizationObj;
loadLocalisationFile=(request)=>{
    request.open('GET', '/js/polyglot/locale/' + language + '.json', false); // `false` makes the request synchronous
    request.send(null);
    localizationObj = JSON.parse(request.response);
    //load fallback file
    if (JSON.stringify(localizationObj) == "{}") {asdasdf
        request.open('GET', '/js/polyglot/locale/en.json', false); // `false` makes the request synchronous
        request.send(null);
        localizationObj = JSON.parse(request.response);
    }
    return localizationObj;
}
loadLocalisationFile(request);
window.polyglot = new Polyglot({
    phrases: localizationObj
});

ဒီအပိုင်းမှာဆိုရင် ၂ ပိုင်းရှိပါတယ်။ တစ်ပိုင်းက သက်ဆိုင်ရင် html tag ကလာတဲ့ lang code ကိုဖတ်ပြီးသက်ဆိုင်တဲ့ json file ကို load လုပ်းပေးတာဖြစ်ပြီး၊ နောက်တစ်ပိုင်းကတော့ translate လုပ်ထားတဲ့ file မတွေ့ရင် fallback အနေနဲ့ default ဘာသာစကားကို ရွေးပေးတဲ့ option ပါပဲ။ ကျနော်ရဲ့ welcome blade ထဲမှာရှိတဲ့ language က en ဖြစ်နေပြီတော့ server side ကရွေးလိုက်တဲ့ language ကိုမူတည်ပြီး ချိန်သွားမှာပါ။ ကျနော်ကတော့ demo အတွက် hardcoded value ပဲထည့်ထားပါတယ်။ Default code က ဒါမျိုးပါ။

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

language က en ဖြစ်နေတဲ့အချိန်မှာ page ကို load လုပ်လိုက်ရင် en.json file ကိုဖတ်ထားလိုက်ပါတယ်။

ဒါပေမဲ့ mm ကို ရွေးလိုက်ရင်တော့ mm.json file ပဲ load လုပ်သွားပါတယ်။

ရေးပုံရေးနည်းကို တစ်ချက်ကြည့်ကြည့်ရအောင်

polyglot.t('msg_greeting')
polyglot.t('msg_are_you_sure',{'username':'Kevin'})
"msg_are_you_sure":"%{username}! ရေ မင်းဒါကို လုပ်မှာ သေချာရဲ့လား"

ပုံမှန်ရိုးရိုးစာသာဆို အခက်အခဲ သိပ်မရှိပေမဲ့ dynamic ဖြစ်တဲ့ စာတွေကို translate လုပ်မယ်ဆိုရင်တော့ parameter pass ပေးရပါမယ်။

%{username}! ရေ မင်းဒါကို လုပ်မှာ သေချာရဲ့လား

ဆိုရင် သူ့ရဲ့ key + parameter name ပါ။ မှန်မှရပါတယ်။ မမှန်ရင် စာကျန်ခဲ့ပြီး ပေါ်လာပါလိမ့်မယ်။ Kevin ရဲ့နေရာမှာ dyanmic value ထည့်ပြီးရင် ပေးတဲ့ value ပေါ်မူတည်ပြီး လုပ်သွားပါလိမ့်မယ်။ တကယ်လို ကိုယ်က default value လေးထည့်ပေးချင်တယ်ဆိုလည်း ဒီလိုရေးလို့ရပါသေးတယ်။

polyglot.t("i_like_to_write_in_language", {
  _: "I like to write in %{language}.",
  language: "PHP"
});
=> "I like to write in PHP."

- သုံးပြီး default value ကို သတ်မှတ်သွားတာပါ။ နောက်အသုံးအဝင်ဆုံးတစ်ခုက singular နဲ့ plural ပါ။

polyglot.extend({
  "num_cars": "%{smart_count} car |||| %{smart_count} cars",
});

smart_count ဆိုတဲ့ keyword ထဲကို ပေးချင်တဲ့ numeric value ပေးပြီး နောက်က singular or plural ကပ်ပေးရင် ဒီပြသနာကရှင်းသွားပါတယ်။

ဒါက Polyglot ရဲ github repo ပါ။ ကျနော် test လုပ်ထားတဲ့ source code repo ပါ။ folder ၂ ခုပဲ ထိထားတဲ့အတွက် ၂ ခုပဲရှိနေပါလိမ့်မယ်။

နောက် post တွေမှာတော့ git ဘက်ပြန်လှည့်ပါမယ်။ အားလုံးပဲ ကိုယ်စိတ်နှဖြာ ရွင်လန်းကြပါစေဗျာ။