วิธีทำให้แอป AngularJS ของคุณเป็นสากล

การทำให้แอปของคุณเป็นสากลสามารถทำให้การพัฒนาซอฟต์แวร์เป็นประสบการณ์ที่เจ็บปวด โดยเฉพาะอย่างยิ่งหากคุณไม่ได้เริ่มทำตั้งแต่เริ่มต้นหรือคุณใช้แนวทางที่ไม่เต็มใจต่อมัน

แอปสมัยใหม่ที่ส่วนหน้าและส่วนหลังแยกจากกันอย่างชัดเจน อาจเป็นเรื่องยากกว่าที่จะรับมือเมื่อเป็นเรื่องสากล ทันใดนั้น คุณไม่มีสิทธิ์เข้าถึงเครื่องมือทดสอบเวลามากมายที่เคยช่วยทำให้หน้าเว็บฝั่งเซิร์ฟเวอร์แบบดั้งเดิมของคุณสร้างเว็บแอปที่สร้างให้เป็นสากลอีกต่อไป

ดังนั้น แอป AngularJS จึงต้องมีการส่งข้อมูลการทำให้เป็นสากล (i18n) และการแปลเป็นภาษาท้องถิ่น (l10n) ตามความต้องการเพื่อส่งไปยังไคลเอนต์เพื่อแสดงตัวเองในภาษาที่เหมาะสม ต่างจากแอปแสดงผลฝั่งเซิร์ฟเวอร์แบบดั้งเดิม คุณไม่สามารถพึ่งพาเซิร์ฟเวอร์เพื่อส่งหน้าที่แปลแล้ว คุณสามารถเรียนรู้เกี่ยวกับการสร้างแอปพลิเคชัน PHP หลายภาษาได้ที่นี่

ในบทความนี้ คุณจะได้เรียนรู้วิธีทำให้แอป AngularJS ของคุณเป็นสากล และเรียนรู้เกี่ยวกับเครื่องมือต่างๆ ที่คุณสามารถใช้เพื่อทำให้กระบวนการง่ายขึ้น การทำให้แอป AngularJS พูดได้หลายภาษาอาจก่อให้เกิดความท้าทายที่น่าสนใจ แต่วิธีการบางอย่างสามารถช่วยให้แก้ไขปัญหาส่วนใหญ่ได้ง่ายขึ้น

แอป AngularJS ที่มีความสามารถ i18n อย่างง่าย

เพื่อให้ลูกค้าสามารถเปลี่ยนภาษาและสถานที่ได้ทันทีตามความต้องการของผู้ใช้ คุณจะต้องทำการตัดสินใจในการออกแบบที่สำคัญหลายประการ:

• คุณออกแบบแอปของคุณให้เป็นภาษาและโลเคชั่นที่ไม่เชื่อเรื่องพระเจ้าตั้งแต่เริ่มต้นอย่างไร
• คุณจัดโครงสร้างข้อมูล i18n และ l10n อย่างไร
• คุณจะส่งข้อมูลนี้ให้กับลูกค้าอย่างมีประสิทธิภาพได้อย่างไร
• คุณจะสรุปรายละเอียดการใช้งานระดับต่ำออกไปเพื่อทำให้เวิร์กโฟลว์ของนักพัฒนาง่ายขึ้นได้อย่างไร

การตอบคำถามเหล่านี้โดยเร็วที่สุดสามารถช่วยหลีกเลี่ยงอุปสรรคในกระบวนการพัฒนาได้ ความท้าทายเหล่านี้จะกล่าวถึงในบทความนี้ บางส่วนผ่านไลบรารี AngularJS ที่มีประสิทธิภาพ บางส่วนผ่านกลยุทธ์และแนวทางบางอย่าง

Internationalization Libraries สำหรับ AngularJS

มีไลบรารี JavaScript จำนวนมากที่สร้างขึ้นสำหรับแอป AngularJS ให้เป็นสากลโดยเฉพาะ

angular-translate เป็นโมดูล AngularJS ที่มีตัวกรองและคำสั่ง พร้อมด้วยความสามารถในการโหลดข้อมูล i18n แบบอะซิงโครนัส รองรับหลายส่วนผ่าน MessageFormat และได้รับการออกแบบมาให้สามารถขยายและกำหนดค่าได้สูง

หากคุณกำลังใช้ angular-translate ในโครงการของคุณ คุณอาจพบว่าแพ็คเกจต่อไปนี้มีประโยชน์มาก:

• angular-sanitize : สามารถใช้เพื่อป้องกันการโจมตี XSS ในการแปล
• angular-translate-interpolation-messageformat : พหูพจน์พร้อมรองรับการจัดรูปแบบข้อความที่ไวต่อเพศ
• angular-translate-loader-partial : ใช้เพื่อส่งสตริงที่แปลไปยังไคลเอนต์

สำหรับประสบการณ์แบบไดนามิกอย่างแท้จริง คุณสามารถเพิ่ม angular-dynamic-locale ลงในพวงได้ ไลบรารีนี้อนุญาตให้คุณเปลี่ยนสถานที่แบบไดนามิก—ซึ่งรวมถึงวิธีจัดรูปแบบวันที่ ตัวเลข สกุลเงิน ฯลฯ ทั้งหมด

เริ่มต้นใช้งาน: การติดตั้งแพ็คเกจที่เกี่ยวข้อง

สมมติว่าคุณมีเทมเพลต AngularJS ของคุณพร้อมแล้ว คุณสามารถใช้ NPM เพื่อติดตั้งแพ็คเกจการทำให้เป็นสากลได้:

 npm i -S angular-translate angular-translate-interpolation-messageformat angular-translate-loader-partial angular-sanitize messageformat

เมื่อติดตั้งแพ็คเกจแล้ว อย่าลืมเพิ่มโมดูลเป็นการพึ่งพาแอพของคุณ:

 // /src/app/core/core.module.js app.module('app.core', ['pascalprecht.translate', ...]);

โปรดทราบว่าชื่อของโมดูลแตกต่างจากชื่อของแพ็คเกจ

การแปลสตริงแรกของคุณ

สมมติว่าแอปของคุณมีแถบเครื่องมือที่มีข้อความบางส่วนและช่องที่มีข้อความที่พัก:

 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Hello</a> </div> <div class="collapse navbar-collapse"> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" ng-model="vm.query" placeholder="Search"> </div> ... </div> </div> </nav>

มุมมองด้านบนมีข้อความสองบิตที่คุณสามารถทำให้เป็นสากลได้: "สวัสดี" และ "ค้นหา" ในแง่ของ HTML ข้อความหนึ่งจะปรากฏเป็นข้อความภายในของแท็ก Anchor ในขณะที่อีกรายการหนึ่งปรากฏเป็นค่าของแอตทริบิวต์

เพื่อให้เป็นสากล คุณจะต้องแทนที่ตัวอักษรสตริงทั้งสองด้วยโทเค็นที่ AngularJS สามารถแทนที่ด้วยสตริงที่แปลจริงตามการตั้งค่าของผู้ใช้ในขณะที่แสดงหน้าเว็บ

AngularJS สามารถทำได้โดยใช้โทเค็นของคุณเพื่อค้นหาในตารางการแปลที่คุณให้ไว้ โมดูล angular-translate คาดว่าตารางการแปลเหล่านี้จะจัดให้มีเป็นวัตถุ JavaScript ธรรมดาหรือเป็นวัตถุ JSON (หากโหลดจากระยะไกล)

ต่อไปนี้คือตัวอย่างลักษณะของตารางการแปลโดยทั่วไป:

 // /src/app/toolbar/i18n/en.json { "TOOLBAR": { "HELLO": "Hello", "SEARCH": "Search" } } // /src/app/toolbar/i18n/tr.json { "TOOLBAR": { "HELLO": "Merhaba", "SEARCH": "Ara" } }

ในการทำให้มุมมองแถบเครื่องมือเป็นสากลจากด้านบน คุณต้องแทนที่ตัวอักษรสตริงด้วยโทเค็นที่ AngularJS สามารถใช้เพื่อค้นหาในตารางการแปล:

 <!-- /src/app/toolbar/toolbar.html --> <a class="navbar-brand" href="#" translate="TOOLBAR.HELLO"></a> <!-- or --> <a class="navbar-brand" href="#">{{'TOOLBAR.HELLO' | translate}}</a>

โปรดสังเกตว่า สำหรับข้อความภายใน คุณสามารถใช้คำสั่ง translate หรือตัวกรองการ translate (คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคำสั่งการ translate ได้ที่นี่ และเกี่ยวกับตัวกรอง translate ที่นี่)

ด้วยการเปลี่ยนแปลงเหล่านี้ เมื่อมีการแสดงมุมมอง angular-translate จะแทรกการแปลที่เหมาะสมโดยอัตโนมัติซึ่งสอดคล้องกับ TOOLBAR.HELLO ลงใน DOM ตามภาษาปัจจุบัน

ในการโทเค็นตัวอักษรสตริงที่ปรากฏเป็นค่าแอตทริบิวต์ คุณสามารถใช้วิธีการต่อไปนี้:

 <!-- /src/app/toolbar/toolbar.html --> <input type="text" class="form-control" ng-model="vm.query" translate translate-attr-placeholder="TOOLBAR.SEARCH">

ทีนี้ จะเกิดอะไรขึ้นถ้าสตริงโทเค็นของคุณมีตัวแปรอยู่

ในการจัดการกรณีต่างๆ เช่น “สวัสดี {{name}}” คุณสามารถทำการแทนที่ตัวแปรได้โดยใช้ไวยากรณ์ตัวสอดแทรกแบบเดียวกับที่ AngularJS รองรับอยู่แล้ว:

ตารางการแปล:

 // /src/app/toolbar/i18n/en.json { "TOOLBAR": { "HELLO": "Hello, {{name}}." } }

จากนั้นคุณสามารถกำหนดตัวแปรได้หลายวิธี นี่คือบางส่วน:

 <!-- /src/app/toolbar/toolbar.html --> <a ... translate="TOOLBAR.HELLO" translate-values='{ name: vm.user.name }'></a> <!-- or --> <a ... translate="TOOLBAR.HELLO" translate-value-name='{{vm.user.name}}'></a> <!-- or --> <a ...>{{'TOOLBAR.HELLO | translate:'{ name: vm.user.name }'}}</a>

การจัดการกับพหูพจน์และเพศ

การรวมกลุ่มเป็นหัวข้อที่ค่อนข้างยากเมื่อพูดถึง i18n และ l10n ภาษาและวัฒนธรรมที่แตกต่างกันมีกฎเกณฑ์ที่แตกต่างกันสำหรับวิธีที่ภาษาจัดการกับการทำให้เป็นพหูพจน์ในสถานการณ์ต่างๆ

เนื่องจากความท้าทายเหล่านี้ บางครั้งนักพัฒนาซอฟต์แวร์จึงไม่สามารถแก้ไขปัญหาได้ (หรืออย่างน้อยก็ไม่สามารถแก้ไขปัญหาได้อย่างเพียงพอ) ส่งผลให้ซอฟต์แวร์สร้างประโยคที่ไร้สาระเช่นนี้:

 He saw 1 person(s) on floor 1. She saw 1 person(s) on floor 3. Number of people seen on floor 2: 2.

โชคดีที่มีมาตรฐานสำหรับวิธีจัดการกับสิ่งนี้ และการใช้งาน JavaScript ของมาตรฐานนั้นมีให้ในรูปแบบ MessageFormat

ด้วย MessageFormat คุณสามารถแทนที่ประโยคที่มีโครงสร้างไม่ดีข้างต้นด้วยสิ่งต่อไปนี้:

 He saw 1 person on the 2nd floor. She saw 1 person on the 3rd floor. They saw 2 people on the 5th floor.

MessageFormat ยอมรับนิพจน์ดังต่อไปนี้:

 var message = [ '{GENDER, select, male{He} female{She} other{They}}', 'saw', '{COUNT, plural, =0{no one} one{1 person} other{# people}}', 'on the', '{FLOOR, selectordinal, one{#st} two{#nd} few{#rd} other{#th}}', 'floor.' ].join(' ');

คุณสามารถสร้างฟอร์แมตเตอร์ด้วยอาร์เรย์ด้านบน และใช้เพื่อสร้างสตริง:

 var messageFormatter = new MessageFormat('en').compile(message); messageFormatter({ GENDER: 'male', COUNT: 1, FLOOR: 2 }) // 'He saw 1 person on the 2nd floor.' messageFormatter({ GENDER: 'female', COUNT: 1, FLOOR: 3 }) // 'She saw 1 person on the 3rd floor.' messageFormatter({ COUNT: 2, FLOOR: 5 }) // 'They saw 2 people on the 5th floor.'

คุณจะใช้ MessageFormat กับ angular-translate เพื่อใช้ประโยชน์จากฟังก์ชันเต็มรูปแบบภายในแอปของคุณได้อย่างไร

ในการกำหนดค่าแอปของคุณ คุณเพียงแค่บอก angular-translate รูปแบบข้อความมีดังต่อไปนี้:

 /src/app/core/core.config.js app.config(function ($translateProvider) { $translateProvider.addInterpolation('$translateMessageFormatInterpolation'); });

นี่คือลักษณะที่รายการในตารางการแปลอาจมีลักษณะดังนี้:

 // /src/app/main/social/i18n/en.json { "SHARED": "{GENDER, select, male{He} female{She} other{They}} shared this." }

และในมุมมอง:

 <!-- /src/app/main/social/social.html --> <div translate="SHARED" translate-values="{ GENDER: 'male' }" translate-interpolation="messageformat"></div> <div> {{ 'SHARED' | translate:"{ GENDER: 'male' }":'messageformat' }} </div>

ที่นี่ คุณต้องระบุอย่างชัดเจนว่าควรใช้ตัวแก้ไขรูปแบบข้อความแทนตัวแก้ไขเริ่มต้นใน AngularJS นี่เป็นเพราะตัวแก้ไขทั้งสองต่างกันเล็กน้อยในไวยากรณ์ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่

จัดเตรียมตารางการแปลให้กับแอปของคุณ

ตอนนี้คุณรู้แล้วว่า AngularJS สามารถค้นหาการแปลสำหรับโทเค็นของคุณจากตารางการแปลได้อย่างไร แอปของคุณรู้เกี่ยวกับตารางการแปลตั้งแต่แรกได้อย่างไร คุณจะบอกแอปของคุณว่าควรใช้สถานที่/ภาษาใด

นี่คือที่ที่คุณเรียนรู้เกี่ยวกับ $translateProvider

คุณสามารถจัดเตรียมตารางการแปลสำหรับแต่ละสถานที่ที่คุณต้องการสนับสนุนโดยตรงในไฟล์ core.config.js ของแอปได้ดังนี้:

 // /src/app/core/core.config.js app.config(function ($translateProvider) { $translateProvider.addInterpolation('$translateMessageFormatInterpolation'); $translateProvider.translations('en', { TOOLBAR: { HELLO: 'Hello, {{name}}.' } }); $translateProvider.translations('tr', { TOOLBAR: { HELLO: 'Merhaba, {{name}}.' } }); $translateProvider.preferredLanguage('en'); });

ที่นี่คุณจัดเตรียมตารางการแปลเป็นออบเจ็กต์ JavaScript สำหรับภาษาอังกฤษ (en) และภาษาตุรกี (tr) ในขณะที่ประกาศภาษาปัจจุบันเป็นภาษาอังกฤษ (en) หากผู้ใช้ต้องการเปลี่ยนภาษา คุณสามารถทำได้ด้วยบริการ $translate:

 // /src/app/toolbar/toolbar.controller.js app.controller('ToolbarCtrl', function ($scope, $translate) { $scope.changeLanguage = function (languageKey) { $translate.use(languageKey); // Persist selection in cookie/local-storage/database/etc... }; });

ยังมีคำถามว่าควรใช้ภาษาใดเป็นค่าเริ่มต้น ฮาร์ดโค้ดภาษาเริ่มต้นของแอปของเราอาจไม่เป็นที่ยอมรับเสมอไป ในกรณีดังกล่าว ทางเลือกอื่นคือพยายามกำหนดภาษาโดยอัตโนมัติโดยใช้ $translateProvider:

 // /src/app/core/core.config.js app.config(function ($translateProvider) { ... $translateProvider.determinePreferredLanguage(); });

determinePreferredLanguage ค้นหาค่าใน window.navigator และเลือกค่าเริ่มต้นอัจฉริยะ จนกว่าผู้ใช้จะให้สัญญาณที่ชัดเจน

ตารางการแปลที่ขี้เกียจ

ส่วนก่อนหน้านี้แสดงให้เห็นว่าคุณสามารถจัดเตรียมตารางการแปลโดยตรงในซอร์สโค้ดเป็นออบเจกต์ JavaScript ได้อย่างไร นี่อาจเป็นที่ยอมรับสำหรับแอปพลิเคชันขนาดเล็ก แต่วิธีการนี้ไม่สามารถปรับขนาดได้ ซึ่งเป็นสาเหตุที่ตารางการแปลมักถูกดาวน์โหลดเป็นไฟล์ JSON จากเซิร์ฟเวอร์ระยะไกล

การรักษาตารางการแปลด้วยวิธีนี้จะลดขนาดเพย์โหลดเริ่มต้นที่ส่งไปยังไคลเอนต์ แต่ทำให้เกิดความซับซ้อนเพิ่มเติม ตอนนี้คุณกำลังเผชิญกับความท้าทายด้านการออกแบบในการส่งข้อมูล i18n ให้กับลูกค้า หากไม่ได้รับการจัดการอย่างรอบคอบ ประสิทธิภาพของแอปพลิเคชันของคุณอาจได้รับผลกระทบโดยไม่จำเป็น

ทำไมมันซับซ้อนจัง? แอปพลิเคชัน AngularJS ถูกจัดระเบียบเป็นโมดูล ในแอปพลิเคชันที่ซับซ้อน อาจมีโมดูลจำนวนมาก โดยแต่ละโมดูลจะมีข้อมูล i18n ที่แตกต่างกันออกไป แนวทางที่ไร้เดียงสา เช่น การโหลดและการให้ข้อมูล i18n ทั้งหมดในคราวเดียว จึงควรหลีกเลี่ยง

สิ่งที่คุณต้องการคือวิธีการจัดระเบียบข้อมูล i18n ของคุณตามโมดูล สิ่งนี้จะช่วยให้คุณสามารถโหลดเฉพาะสิ่งที่คุณต้องการเมื่อคุณต้องการ และแคชสิ่งที่โหลดไว้ก่อนหน้านี้เพื่อหลีกเลี่ยงการโหลดข้อมูลเดิมซ้ำ (อย่างน้อยก็จนกว่าแคชจะใช้งานไม่ได้)

นี่คือที่ที่ partialLoader เข้ามาเล่น

สมมติว่าตารางการแปลของแอปพลิเคชันของคุณมีโครงสร้างดังนี้:

 /src/app/main/i18n/en.json /src/app/main/i18n/tr.json /src/app/toolbar/i18n/en.json /src/app/toolbar/i18n/tr.json

คุณสามารถกำหนดค่า $translateProvider ให้ใช้ partialLoader ที่มีรูปแบบ URL ที่ตรงกับโครงสร้างนี้:

 // /src/app/core/core.config.js app.config(function ($translateProvider) { ... $translateProvider.useLoader('$translatePartialLoader', { urlTemplate: '/src/app/{part}/i18n/{lang}.json' }); });

อย่างที่คาดไว้ “lang” จะถูกแทนที่ด้วยรหัสภาษาที่รันไทม์ (เช่น “en” หรือ “tr”) แล้ว “ส่วน” ล่ะ? $translateProvider รู้ได้อย่างไรว่าต้องโหลด "ส่วน" ใด

คุณสามารถให้ข้อมูลนี้ภายในคอนโทรลเลอร์ด้วย $translatePartialLoader :

 // /src/app/main/main.controller.js app.controller('MainCtrl', function ($translatePartialLoader) { $translatePartialLoader.addPart('main'); }); // /src/app/toolbar/toolbar.config.js app.controller('ToolbarCtrl', function ($translatePartialLoader) { $translatePartialLoader.addPart('toolbar'); });

รูปแบบนี้เสร็จสมบูรณ์แล้ว และข้อมูล i18n สำหรับมุมมองที่กำหนดจะถูกโหลดเมื่อมีการเรียกใช้คอนโทรลเลอร์เป็นครั้งแรก ซึ่งเป็นสิ่งที่คุณต้องการอย่างแท้จริง

การแคช: ลดเวลาในการโหลด

แล้วการแคชล่ะ?

คุณสามารถเปิดใช้งานแคชมาตรฐานในการกำหนดค่าแอพด้วย $translateProvider :

 // /src/app/core/core.config.js app.config(function ($translateProvider) { ... $translateProvider.useLoaderCache(true); // default is false });

หากคุณต้องการทำลายแคชสำหรับภาษาที่กำหนด คุณสามารถใช้ $translate :

 $translate.refresh(languageKey); // omit languageKey to refresh all

ด้วยส่วนเหล่านี้ แอปพลิเคชันของคุณจะเป็นสากลอย่างสมบูรณ์และรองรับหลายภาษา

การแปลตัวเลข สกุลเงิน และวันที่

ในส่วนนี้ คุณจะได้เรียนรู้วิธีใช้ angular-dynamic-locale เพื่อสนับสนุนการจัดรูปแบบขององค์ประกอบ UI เช่น ตัวเลข สกุลเงิน วันที่ และอื่นๆ ในแอปพลิเคชัน AngularJS

คุณจะต้องติดตั้งอีกสองแพ็คเกจสำหรับสิ่งนี้:

 npm i -S angular-dynamic-locale angular-i18n

เมื่อติดตั้งแพ็คเกจแล้ว คุณสามารถเพิ่มโมดูลในการขึ้นต่อกันของแอพของคุณได้:

 // /src/app/core/core.module.js app.module('app.core', ['tmh.dynamicLocale', ...]);

กฎสถานที่

กฎสถานที่เป็นไฟล์ JavaScript อย่างง่ายที่มีข้อกำหนดสำหรับวันที่ ตัวเลข สกุลเงิน และอื่นๆ ควรจัดรูปแบบโดยส่วนประกอบที่ขึ้นอยู่กับบริการ $locale

รายชื่อสถานที่ที่รองรับในปัจจุบันมีอยู่ที่นี่

นี่คือตัวอย่างจาก angular-locale_en-us.js แสดงการจัดรูปแบบเดือนและวันที่:

 ... "MONTH": [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], "SHORTDAY": [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], ...

ไม่เหมือนกับข้อมูล i18n กฎของสถานที่นั้นเป็นสากลสำหรับแอปพลิเคชัน ซึ่งกำหนดให้โหลดกฎสำหรับสถานที่ที่กำหนดทั้งหมดในครั้งเดียว

โดยค่าเริ่มต้น angular-dynamic-locale คาดว่าไฟล์กฎโลแคลจะอยู่ใน angular/i18n/angular-locale_{{locale}}.js หากอยู่ที่อื่น จะต้องใช้ tmhDynamicLocaleProvider เพื่อแทนที่ค่าเริ่มต้น:

 // /src/app/core/core.config.js app.config(function (tmhDynamicLocaleProvider) { tmhDynamicLocaleProvider.localeLocationPattern( '/node_modules/angular-i18n/angular-locale_{{locale}}.js'); });

การแคชได้รับการจัดการโดยอัตโนมัติโดยบริการ tmhDynamicLocaleCache

การทำให้แคชใช้ไม่ได้เป็นเรื่องที่น่ากังวลน้อยกว่า เนื่องจากกฎของสถานที่มักจะเปลี่ยนแปลงน้อยกว่าการแปลสตริง

ในการสลับไปมาระหว่างโลแคล angular-dynamic-locale จะจัดเตรียมบริการ tmhDynamicLocale :

 // /src/app/toolbar/toolbar.controller.js app.controller('ToolbarCtrl', function ($scope, tmhDynamicLocale) { $scope.changeLocale = function (localeKey) { tmhDynamicLocale.set(localeKey); // Persist selection in cookie/local-storage/database/etc... }; });

การสร้างตารางการแปลด้วยการแปลอัตโนมัติ

กฎโลแคลจะมาพร้อมกับแพ็คเกจ angular-i18n ดังนั้นสิ่งที่คุณต้องทำคือทำให้เนื้อหาในแพ็คเกจพร้อมใช้งานสำหรับแอปพลิเคชันของคุณตามต้องการ แต่คุณจะสร้างไฟล์ JSON สำหรับตารางการแปลของคุณอย่างไร ไม่มีแพ็คเกจใดที่คุณสามารถดาวน์โหลดและเสียบเข้ากับแอปพลิเคชันของเราได้อย่างแน่นอน

ทางเลือกหนึ่งคือการใช้ API การแปลแบบเป็นโปรแกรม โดยเฉพาะถ้าสตริงในแอปพลิเคชันของคุณเป็นตัวอักษรธรรมดาที่ไม่มีตัวแปรหรือนิพจน์พหูพจน์

ด้วยอึกและแพ็คเกจพิเศษอีกสองสามชุด การขอการแปลแบบเป็นโปรแกรมสำหรับแอปพลิเคชันของคุณจึงเป็นเรื่องง่าย:

 import gulp from 'gulp'; import map from 'map-stream'; import rename from 'gulp-rename'; import traverse from 'traverse'; import transform from 'vinyl-transform'; import jsonFormat from 'gulp-json-format'; function translateTable(to) { return transform(() => { return map((data, done) => { const table = JSON.parse(data); const strings = []; traverse(table).forEach(function (value) { if (typeof value !== 'object') { strings.push(value); } }); Promise.all(strings.map((s) => getTranslation(s, to))) .then((translations) => { let index = 0; const translated = traverse(table).forEach(function (value) { if (typeof value !== 'object') { this.update(translations[index++]); } }); done(null, JSON.stringify(translated)); }) .catch(done); }); }); } function translate(to) { return gulp.src('src/app/**/i18n/en.json') .pipe(translateTable(to)) .pipe(jsonFormat(2)) .pipe(rename({ basename: to })) .pipe(gulp.dest('src/app')); } gulp.task('translate:tr', () => translate('tr')); This task assumes the following folder structure: /src/app/main/i18n/en.json /src/app/toolbar/i18n/en.json /src/app/navigation/i18n/en.json ...

สคริปต์จะอ่านตารางการแปลภาษาอังกฤษทั้งหมดก่อน ร้องขอการแปลแบบอะซิงโครนัสสำหรับทรัพยากรสตริง จากนั้นแทนที่สตริงภาษาอังกฤษด้วยสตริงที่แปลแล้วเพื่อสร้างตารางการแปลในภาษาใหม่

สุดท้าย ตารางการแปลใหม่ถูกเขียนเป็นพี่น้องในตารางการแปลภาษาอังกฤษ โดยให้ผลดังนี้

 /src/app/main/i18n/en.json /src/app/main/i18n/tr.json /src/app/toolbar/i18n/en.json /src/app/toolbar/i18n/tr.json /src/app/navigation/i18n/en.json /src/app/navigation/i18n/tr.json ...

การใช้งาน getTranslation นั้นตรงไปตรงมาเช่นกัน:

 import bluebird from 'bluebird'; import MicrosoftTranslator from 'mstranslator'; bluebird.promisifyAll(MicrosoftTranslator.prototype); const Translator = new MicrosoftTranslator({ client_id: process.env.MICROSOFT_TRANSLATOR_CLIENT_ID, client_secret: process.env.MICROSOFT_TRANSLATOR_CLIENT_SECRET }, true); function getTranslation(string, to) { const text = string; const from = 'en'; return Translator.translateAsync({ text, from, to }); }

ที่นี้ เราใช้ Microsoft Translate แต่อาจมีผู้ให้บริการรายอื่น เช่น Google Translate หรือ Yandex Translate ได้อย่างง่ายดาย

แม้ว่าการแปลแบบเป็นโปรแกรมจะสะดวก แต่ก็มีข้อเสียหลายประการ ได้แก่:

• การแปลแบบโรบ็อตนั้นดีสำหรับสตริงสั้นๆ แต่ถึงกระนั้น อาจมีข้อผิดพลาดเกี่ยวกับคำที่มีความหมายต่างกันในบริบทที่แตกต่างกัน (เช่น "พูล" อาจหมายถึงการว่ายน้ำหรือการจัดกลุ่ม)
• APIs อาจไม่สามารถจัดการสตริงที่มีตัวแปรหรือสตริงที่ใช้รูปแบบข้อความได้

ในกรณีเหล่านี้และกรณีอื่นๆ อาจต้องมีการแปลโดยมนุษย์ อย่างไรก็ตาม นั่นเป็นหัวข้อสำหรับโพสต์บล็อกอื่น

การทำให้ Front-end เป็นสากลนั้น ดู น่ากลัวเท่านั้น

ในบทความนี้ คุณได้เรียนรู้วิธีใช้แพ็คเกจเหล่านี้เพื่อทำให้แอปพลิเคชัน AngularJS เป็นสากลและแปลเป็นภาษาท้องถิ่น

angular-translate , angular-dynamic-locale และ gulp เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการทำให้แอปพลิเคชัน AngularJS เป็นสากลที่สรุปรายละเอียดการใช้งานระดับต่ำที่เจ็บปวด

สำหรับแอปสาธิตที่แสดงแนวคิดที่กล่าวถึงในโพสต์นี้ ให้ตรวจสอบที่เก็บ GitHub นี้