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