[iOS] – Giới thiệu Tool tự động tạo file đa ngôn ngữ cho iOS và Android app

AUTHOR: hieu.tt1


Ở bài viết trước, Nam.VH có giới thiệu cho chúng ta cách chuyển đổi ngôn ngữ trong ứng dụng iOS. Nếu các bạn để ý sẽ thấy ở cuối bài viết có nhắc đến file Localization.string(language). Trong các ứng dụng iOS nói chung, nếu đã sử dụng đến đa ngôn ngữ thì chắc chắn LTV phải thực hiện công việc khá là buồn tẻ là phải cập nhật từng dòng string/label/text/message trong file Localization.string cho từng ngôn ngữ.

Hiện tại, team iOS đang thực hiện dự án Outsource cho sản phẩm sử dụng trong khối EU, do vậy, việc xử lý đa ngôn ngữ sẽ phải thực hiện ngay từ khi từ khi bắt đầu dự án. Tuy nhiêu, đến cuối dự án, khách hàng mới gửi file đa ngôn ngữ cho team, và khách hàng mong muốn  xem phiên bản ứng dụng đa ngôn ngữ ngay lập tức. Vậy team iOS phải làm sao? kì cạch, “tay to” cập nhật gần 500 dòng trong file excel vào file Localization.string, và thực hiện tương tự cho 10 ngôn ngữ khác? Nếu phải “tay to” như thế, bạn LTV thân mến, mình có Template “đơn xin nghỉ việc này”, bạn cần thì qua mình nha!^^

Just for fun, thật may là google đã giúp chúng ta xử lý công việc nhàm chán ấy. Thật cảm ơn anh bạn Xavierha đã xây dựng giúp chúng ta Tool tự động tạo file đa ngôn ngữ từ google spreadsheet. Trong bài viết này, tôi chỉ mở rộng, bổ xung hướng dẫn cách sử dụng tool, còn về cơ bản, các bạn thực hiện như trong link githup sau là OK, ko khó khăn gì:
https://github.com/xavierha/localize-with-spreadsheet

Để sử dụng được tool trên, các bạn chuẩn bị những thứ sau:
1. NPM
2. Tài liệu Google spread-sheet
3. Webstorm

OK, chúng ta sẽ thực hiện tuần tự từng cái.
1. Cài đặt NPM
Tool trên của anh bạn Xavierha được phát triển bằng Node.js. Ah, nếu bạn là lập trình viên iOS, có vẻ Node.js nghe khá mới mẻ với bạn chăng? Đừng quá lo lắng, hãy thử google Node.js là gì, tôi tin sau bài viết này, thứ làm bạn háo hức không phải kết quả file Localization.string bạn tạo ra mà chính là Node.js.^^

Nhắc đến Node.js, thì chúng ta phải biết đến npm rồi. Hiểu đơn giản:

NPM là viết tắt bởi Node Package Manager (Trình quản lý gói của nodejs). Nó vừa là một trình quản lý gói vừa là một hệ thống phân tán phục vụ cho Node.js. Mục đích chính của nó là tạo ra và phân phối các gói node, các module qua internet sử dụng dòng lệnh. Với npm chúng ta có thể dễ dàng tìm các module một cách tự động qua mạng. Chỉ với một câu lệnh, ta có thể tải, cài và sử dụng các module.

Trong phạm vi bài viết này, tôi ko đi sâu, lan man về Node.js, chỉ đơn giản là chúng ta phải cài đặt nó thì mới sử dụng được tool.
Để cài đặt npm, các bạn vào:
https://nodejs.org
hoặc:
https://iojs.org/en/index.html
Cá nhân tôi thì đang sử dụng io.js.
Sau khi cài đặt xong, các bạn sẽ thấy giao diện như sau:
Screen Shot 2015-08-17 at 13.36.38

Để test thử xem npm đã có chưa, bạn bật terminal và gõ như sau:
Screen Shot 2015-08-17 at 13.38.58

Done, npm đã có trong hệ thống, tiếp theo các bạn bật terminal lên và gõ dòng lệnh sau:

Done, tool đã được cài. Chúng ta sang bước 2
2. Tạo tài liệu Google

Khá đơn giản, chúng ta tạo tài liệu như mẫu sau đây:
https://docs.google.com/spreadsheets/

Screen Shot 2015-08-17 at 12.58.24

Tài liệu cần được share:
Screen Shot 2015-08-17 at 13.57.15
Và publish to the web:
Screen Shot 2015-08-17 at 13.00.53

Click Publish:
Screen Shot 2015-08-17 at 13.02.28
Hãy chú ý chuỗi tôi bôi đen, chúng ta sẽ dùng đến nó nhé.

3. Webstorm
Thực ra, tôi nhắc đến Webstorm để thuận tiên cho việc code và quan sát kết quả thuận lợi hơn. Còn nếu đơn giản hơn, các bạn tạo file  Demo_localization.js với nội dung như sau:

var Localize = require(“localize-with-spreadsheet”);
var transformer = Localize.fromGoogleSpreadsheet(“1oqcuG0CgWZLekYfhn2BZDxcP_QZYglbI8Cm4GNzTINU”, ‘*’);
transformer.setKeyCol(‘KEY’);

transformer.save(“values-pl/strings.xml”, { valueCol: “PL”, format: “android” });
transformer.save(“values-nl/strings.xml”, { valueCol: “NL”, format: “android” });
transformer.save(“values-sv/strings.xml”, { valueCol: “SV”, format: “android” });
transformer.save(“values-fr/strings.xml”, { valueCol: “FR”, format: “android” });
transformer.save(“values-da/strings.xml”, { valueCol: “DA”, format: “android” });
transformer.save(“values-fi/strings.xml”, { valueCol: “FI”, format: “android” });

transformer.save(“pl.lproj/Localizable.strings”, { valueCol: “PL”, format: “ios” });
transformer.save(“nl.lproj/Localizable.strings”, { valueCol: “NL”, format: “ios” });
transformer.save(“sv.lproj/Localizable.strings”, { valueCol: “SV”, format: “ios” });
transformer.save(“fr.lproj/Localizable.strings”, { valueCol: “FR”, format: “ios” });
transformer.save(“da.lproj/Localizable.strings”, { valueCol: “DA”, format: “ios” });
transformer.save(“fi.lproj/Localizable.strings”, { valueCol: “FI”, format: “ios” });

Trong đó,

+chuỗi ” 1oqcuG0CgWZLekYfhn2BZDxcP_QZYglbI8Cm4GNzTINU” là ID của file Google spread-sheet trên.

+ “KEY”,”NL”, “PL”…  là id các cột chứa các string ngôn ngữ của bạn.

+ Folder Localization.string của iOS sẽ được lưu vào:

pl.lproj/Localizable.strings

+ Folder string.xml của android sẽ được lưu vào:

values-pl/strings.xml

Ok,sau có file .js trên, bạn bật terminal và chạy:

Done, kết quả đây rồi, bạn chỉ việc copy toàn bộ folder này vào thư mục Localization của bạn là xong.
Screen Shot 2015-08-17 at 13.20.53

Data trong sv.lproj/Localizable.strings:

// AUTO-GENERATED

“TITLE_SETTINGS” = “Instellingen”;

“TITLE_SETTINGS_GENERAL” = “Lokalisering”;

“TITLE_SETTINGS_APPLICATION” = “Lokalisering”;

“TITLE_SETTINGS_SYSTEM_HELP” = “Lokalisering”;

……

Data trong values-sv/strings.xml:

<?xml version=”1.0″ encoding=”utf-8″?>

<resources>

<!– AUTO-GENERATED –>

<string name=”TITLE_SETTINGS”>Instellingen</string>

<string name=”TITLE_SETTINGS_GENERAL”>Lokalisering</string>

<string name=”TITLE_SETTINGS_APPLICATION”>Lokalisering</string>

……..

</resources>

Nếu bạn thích vọc vạch, xem các thành phần của Tool thì bạn tạo Project với Webstorm như sau:
Screen Shot 2015-08-17 at 13.27.11

Bạn click Run, và kết quả như sau:
Screen Shot 2015-08-17 at 13.32.40

Cool, update các  folder **.lproj vào dự án thôi. Nếu khách hàng có gửi thêm file ngôn ngữ, quá đơn giản, 5 phút là xong!
P/S: Việc cài đặt NPM và Node.js/io.js trên window cũng khá đơn giản, các bạn thử tự tạo xem thế nào^^.

 

 

 

Post Views: 773

Comments

comments