搭建自己的國際化翻譯系統(tǒng)
1、前言
項目要走向國外市場，移動端Android和iOS，當(dāng)然也包括后端和前端，需要進(jìn)行國際化適配，但是之前的項目中是沒有英文翻譯文件的，所以需要將項目中所有的中文字符串進(jìn)行收集交給專業(yè)的人士進(jìn)行翻譯，然后將翻譯的英文內(nèi)容分別整理到Android和iOS項目中去。
無疑這是一個很繁瑣且很容易出錯的事情，而且后續(xù)在開發(fā)的過程中還會新增中文字符串，這個時候我們又需要重新走一遍上面的流程，哪怕只是新增了一個字符串！于是我們需要一個系統(tǒng)去專門處理這件事件，將功能開發(fā)和英文翻譯這兩件事分離開來，讓專業(yè)的人士去做專業(yè)的事情，所以這個翻譯系統(tǒng)出現(xiàn)了。
2、翻譯系統(tǒng)2.1 流程圖
2.2 系統(tǒng)結(jié)構(gòu)
此項目分成三個部分，一個是翻譯系統(tǒng)服務(wù)端，一個是翻譯管理后臺，一個是翻譯同步助手。如果你只是想體驗一下，那么你可以忽略這部分的介紹。
2.2.1 翻譯系統(tǒng)服務(wù)端
這個項目是一個springboot應(yīng)用，數(shù)據(jù)庫采用mysql，緩存采用redis。目前部署在一臺空閑的阿里云服務(wù)器中。
服務(wù)端主要是提供功能api接口，包括后臺管理系統(tǒng)的接口和翻譯同步助手的接口，目前總共有17個接口，所有接口都由AdminTranslateController這個類提供。
針對翻譯后臺提供的接口如下：
獲取所有翻譯列表數(shù)據(jù)
用戶登錄
修改用戶密碼
用戶重置token
獲取模塊列表
更新模塊列表
更新模塊信息
編輯翻譯內(nèi)容
合并某條翻譯
標(biāo)記翻譯已確認(rèn)
拆分翻譯
下載jdk工具和翻譯助手工具
刪除翻譯
獲取翻譯修改記錄
針對翻譯助手提供的接口：
獲取已翻譯的數(shù)據(jù)列表
客戶端上傳本地字符串?dāng)?shù)據(jù)
客戶端上傳本地英文翻譯
服務(wù)端項目地址為：https://github.com/MZCretin/java-translate-server 如果你感興趣可以clone下來看看，項目中提供了項目運行所需要的數(shù)據(jù)庫文件。
2.2.2 翻譯管理后臺
這個是項目是用vue開發(fā)的前端項目，本項目就是其項目源碼，ui框架使用的是element-ui，請求框架用的是axios。
管理后臺主要有三個頁面，一個是翻譯工具下載頁面，一個是翻譯模塊配置頁面，一個是國際化翻譯頁面。
項目地址為：https://github.com/MZCretin/vue-translate-web 如果你感興趣可以clone下來看看。
如果你想本地跑起來，先安裝node環(huán)境，然后npm install，npm run serve，最后訪問：http://127.0.0.1:8080 即可。
2.2.2.1 翻譯工具下載頁面
這個頁面主要是提供翻譯同步助手的下載入口！當(dāng)然了，因為翻譯同步助手是用java寫的，所以你需要有java環(huán)境，所以這個頁面也提供了各個版本jdk的下載入口。
2.2.2.2 翻譯模塊配置頁面
這個頁面主要是給模塊配置模塊名稱，這樣在國際化翻譯系統(tǒng)頁面可以根據(jù)模塊去篩選翻譯內(nèi)容。
2.2.2.3 國際化翻譯頁面
這個頁面主要是給專業(yè)人士進(jìn)行翻譯的，在這里可以對中文進(jìn)行人工翻譯，也提供了百度翻譯的智能翻譯功能，還可以查看翻譯的修改記錄，追蹤翻譯歷史鏈路，也提供了一系列對翻譯條目的篩選功能和搜索功能。
2.2.3 翻譯同步助手
這是一個純java swing 項目，主要功能為 上傳本地中文字符串到遠(yuǎn)程翻譯系統(tǒng) 和 拉取遠(yuǎn)程已經(jīng)翻譯好的英文翻譯到本地。服務(wù)端項目地址為：https://github.com/MZCretin/java-translate-server 。該項目中的translate-tools模塊就是翻譯同步助手的項目源代碼。
2.2.3.1 上傳本地中文字符串
拉取Android項目中所有的中文strings.xml中的中文字符串和iOS中所有的中文字符串，并主動去重，然后調(diào)用后端接口將本地中文字符串上傳到云端。
2.2.3.2 拉取遠(yuǎn)程翻譯內(nèi)容
調(diào)用后端接口拉取后端已經(jīng)翻譯好的英文內(nèi)容到本地，對于Android項目，根據(jù)values/strings.xml生成對應(yīng)的values-en/strings.xml文件，對于iOS，生成對應(yīng)的en.lproj/Localizable.strings 文件。針對Android項目，每次在生成英文版本的strings.xml文件的時候，就自動將之前的strings.xml進(jìn)行備份，防止出現(xiàn)誤操作無法找回之前的數(shù)據(jù)。
3、體驗一下衷心的希望你能一步一步的走完整個流程~
3.1 創(chuàng)建測試項目
首先，我當(dāng)你是一個Android開發(fā)者，我們首先創(chuàng)建一個空項目，然后在項目中新增若干個module，模擬真實項目中的多module環(huán)境，在每個module中添加strings.xml文件，在這個文件中定義幾個字符串，如圖所示。
3.2 下載翻譯同步助手及使用說明
你先訪問 http://tools.cretinzp.com/translate-web/#/home 首次登錄沒有賬號密碼就隨便寫一個，后臺會自動幫你注冊，但是你要自己記住這個賬號密碼，方便后面繼續(xù)登錄。
成功進(jìn)入系統(tǒng)之后，訪問 http://tools.cretinzp.com/translate-web/#/translate/tools 下載最新版本的翻譯同步助手。如果你本機(jī)沒有java環(huán)境，你還需要在此頁面下載你當(dāng)前系統(tǒng)對應(yīng)的jdk，并一路下一步安裝。安裝成功之后，打開剛剛下載的翻譯同步助手，你將看到如下頁面：
A、如果你是Android開發(fā)者，那你點擊選擇本地項目地址按鈕，選擇你需要國際化項目的項目根目錄就好了，選擇完之后控制臺會輸出你選擇的地址，請一定關(guān)注一下你選擇的地址是否正確；如果你是iOS開發(fā)者，那你點擊選擇本地項目地址按鈕，選擇項目中的zh-Hans.lproj文件夾，注意一定要選擇到這個文件夾，同樣的關(guān)注一下控制臺輸出的地址是否以zh-Hans.lproj結(jié)尾。
B、如果你是Android項目就選擇Android，反之選擇iOS
C、工具需要校驗身份，訪問 http://tools.cretinzp.com/translate-web/#/home 頁面右上角點擊你的用戶名，在下拉框中選擇獲取token，復(fù)制對話框中的token值粘貼到這里才可正常使用功能。
D、如果你本地有新增的字符串未上傳到云端，那么你需要進(jìn)行此操作。先點擊預(yù)加載本地數(shù)據(jù)，此操作會收集當(dāng)前項目中的所有字符串信息到內(nèi)存中，控制臺會輸出收集到的字符串條數(shù)，如果出現(xiàn)條數(shù)為0，有可能你的項目地址選擇不對，也有可能你的系統(tǒng)版本比較高，沒有給到訪問資源的權(quán)限，遇到這種情況請自行g(shù)oogle解決辦法。如果控制臺中輸出的條數(shù)是正常的，再點擊上傳本地數(shù)據(jù)到云端，查看控制臺輸出，成功之后可以訪問后臺查看你上傳的數(shù)據(jù)。
E、如果翻譯員在后臺進(jìn)行了翻譯，你需要將翻譯后的英文同步到本地，那么你需要進(jìn)行此操作。先點擊遠(yuǎn)程下載數(shù)據(jù)到本地，這個過程會請求后臺接口拉取所有以及翻譯好的英文數(shù)據(jù)到本地內(nèi)存，控制臺會輸出云端已經(jīng)翻譯好的數(shù)據(jù)條數(shù)，再點擊合并遠(yuǎn)程數(shù)據(jù)到本地，此時，工具會自動根據(jù)本地的中文字符串對應(yīng)生成翻譯好的英文文件。針對Android會生成 values-en/strings.xml 文件，針對iOS會生成en.lproj/Localizable.strings 文件，實現(xiàn)項目國際化。
3.3 上傳本地翻譯
先按照3.2中的說明選擇項目，然后填入token，然后點擊預(yù)加載本地數(shù)據(jù)，看控制臺中的輸入為收集到11條數(shù)據(jù)，app中有一條，其他5個module中各有2條，一共11條，合理，然后點擊上傳本地數(shù)據(jù)到云端，查看控制臺輸出成功。如圖
上傳成功之后點擊 訪問翻譯后臺按鈕，查看后臺是否有數(shù)據(jù)，如圖所示
3.4 對內(nèi)容進(jìn)行翻譯
針對每一條數(shù)據(jù)，你可以直接在英文內(nèi)容輸入框中輸入翻譯后的內(nèi)容，也可以點擊右邊智能翻譯按鈕進(jìn)行翻譯，智能翻譯采用我正在維護(hù)的RollToolsApi中的一個翻譯接口，詳情請查看 https://www.mxnzp.com/doc/detail?id=21 ，當(dāng)你認(rèn)為翻譯已經(jīng)合理不希望別人再改動時，可點擊右邊的 確認(rèn)翻譯按鈕，告知別人這條翻譯是已經(jīng)確認(rèn)過的。
翻譯之后的效果如下：
另外，點擊右邊的修改記錄可以查看當(dāng)前數(shù)據(jù)的所有修改記錄。
3.5 同步翻譯到本地
等翻譯人員翻譯完成之后，我們需要同步遠(yuǎn)程翻譯到本地。同步翻譯的操作依然在翻譯同步助手上進(jìn)行。點擊工具上的 遠(yuǎn)程下載數(shù)據(jù)到本地按鈕，將遠(yuǎn)程翻譯數(shù)據(jù)拉取到內(nèi)存中，控制臺輸出拉取遠(yuǎn)程數(shù)據(jù)11條，然后點擊 合并遠(yuǎn)程數(shù)據(jù)到本地按鈕，生成本地的英文翻譯文件，看控制臺輸出：
控制臺輸出合并完成，我們打開我們的項目，查看是否生成了英文翻譯文件。
可以看到英文翻譯已經(jīng)拉下來了。
3.6 看實際效果
我在首頁上顯示了這11條中文字符串，左邊是中文的效果，右邊的是切換成英文環(huán)境的效果。
我是覺得技術(shù)是用來服務(wù)自己的，所以在遇到一些問題的時候希望能夠通過代碼解決一些實際問題，于是才花時間去研究這個東西。對于同是移動端開發(fā)的你，不知道有沒有遇到過這個問題。如果你覺得有點意思，并且希望能添加一些東西，我希望你能跟我掰頭掰頭~
待辦
國際化顯然不僅僅是移動端的事情，還包括后臺和前端，后面我希望也能把他們包含進(jìn)去。
還有就是對多語言的支持，目前僅支持中文和英文，后續(xù)需要支持其他語言
...
源碼地址集合
期待你的star~~~
java后臺項目源碼
https://github.com/MZCretin/java-translate-server
翻譯后臺前端項目源碼
https://github.com/MZCretin/java-translate-server