电点国际化翻译系统使用手册

2,711 阅读5分钟

1、前言

越来越多的项目需要走向国外市场,App的国际化势在必行,传统的方式不仅容易犯错而且效率极低,于是针对传统方式开发出这套翻译系统。

全新V2版本已经出来了,支持多语言国际化,支持Android,iOS,Vue,Flutter,PHP等等

国际化翻译系统V2正式上线了juejin.cn/post/732193…

2、翻译系统

2.1 流程图

翻译系统流程图.jpeg

3、使用手册

3.1 创建测试项目

首先,我当你是一个Android开发者,我们首先创建一个空项目,然后在项目中新增若干个module,模拟真实项目中的多module环境,在每个module中添加strings.xml文件,在这个文件中定义几个字符串,如图所示。

image-20220210100803436.png

3.2 下载翻译同步助手及使用说明

你先访问 cretinzp.com/translate 首次登录没有账号需要注册一个账号,而且你要自己记住这个账号密码,方便后面继续登录。

成功进入系统之后,访问 cretinzp.com/translate/#… 下载最新版本的翻译同步助手。如果你本机没有java环境,你还需要在此页面下载你当前系统对应的jdk,并一路下一步安装。安装成功之后,打开刚刚下载的翻译同步助手,你将看到如下页面:

image-20220209161928914.png

  • A、如果你是Android开发者,那你点击选择本地项目地址按钮,选择你需要国际化项目的项目根目录就好了,选择完之后控制台会输出你选择的地址,请一定关注一下你选择的地址是否正确;如果你是iOS开发者,那你点击选择本地项目地址按钮,选择项目中的zh-Hans.lproj文件夹,注意一定要选择到这个文件夹,同样的关注一下控制台输出的地址是否以zh-Hans.lproj结尾。

  • B、如果你是Android项目就选择Android,反之选择iOS

  • C、工具需要校验身份,访问 cretinzp.com/translate/#… 页面右上角点击你的用户名,在下拉框中选择获取token,复制对话框中的token值粘贴到这里才可正常使用功能。

image-20220209162513167.png

  • D、如果你本地有新增的字符串未上传到云端,那么你需要进行此操作。先点击预加载本地数据,此操作会收集当前项目中的所有字符串信息到内存中,控制台会输出收集到的字符串条数,如果出现条数为0,有可能你的项目地址选择不对,也有可能你的系统版本比较高,没有给到访问资源的权限,遇到这种情况请自行google解决办法。如果控制台中输出的条数是正常的,再点击上传本地数据到云端,查看控制台输出,成功之后可以访问后台查看你上传的数据。

  • E、如果翻译员在后台进行了翻译,你需要将翻译后的英文同步到本地,那么你需要进行此操作。先点击远程下载数据到本地,这个过程会请求后台接口拉取所有以及翻译好的英文数据到本地内存,控制台会输出云端已经翻译好的数据条数,再点击合并远程数据到本地,此时,工具会自动根据本地的中文字符串对应生成翻译好的英文文件。针对Android会生成 values-en/strings.xml 文件,针对iOS会生成en.lproj/Localizable.strings 文件,实现项目国际化。

3.3 上传本地翻译

先按照3.2中的说明选择项目,然后填入token,然后点击预加载本地数据,看控制台中的输入为收集到11条数据,app中有一条,其他5个module中各有2条,一共11条,合理,然后点击上传本地数据到云端,查看控制台输出成功。如图

image-20220210101631931.png

上传成功之后点击访问翻译后台按钮,查看后台是否有数据,如图所示

image-20220210101806624.png

3.4 对内容进行翻译

针对每一条数据,你可以直接在英文内容输入框中输入翻译后的内容,也可以点击右边智能翻译按钮进行翻译,当你认为翻译已经合理不希望别人再改动时,可点击右边的确认翻译按钮,告知别人这条翻译是已经确认过的。

翻译之后的效果如下:

image-20220210102516290.png

另外,点击右边的修改记录可以查看当前数据的所有修改记录。

3.5 同步翻译到本地

等翻译人员翻译完成之后,我们需要同步远程翻译到本地。同步翻译的操作依然在翻译同步助手上进行。点击工具上的远程下载数据到本地按钮,将远程翻译数据拉取到内存中,控制台输出拉取远程数据11条,然后点击合并远程数据到本地按钮,生成本地的英文翻译文件,看控制台输出:

image-20220210110547295.png

控制台输出合并完成,我们打开我们的项目,查看是否生成了英文翻译文件。

image-20220210111440180.png

可以看到英文翻译已经拉下来了。

3.6 看实际效果

我在首页上显示了这11条中文字符串,左边是中文的效果,右边的是切换成英文环境的效果。

image-20220210134730981.png

衷心希望你能一步一步的走完整个流程,有问题及时与我们联系~~