本地化支持应用
在本教程中，您将本地化Zendesk Support应用程序的用户界面。该应用程序根据用户的语言环境和可用的翻译以不亚博同的语言显示“Hello, World!”你可以使用应用程序的代码作为本地化你自己应用程序的起点。
提示:本教程中的应用程序使用基本的应用程序启动文件。如果你的应用使用React，我们建议在React应用脚手架中使用i18n模块。有关详情，请参阅使用i18n模块在GitHub上。
免责声明:亚博Zendesk提供本文仅用于指导目的。亚博Zendesk不支持本教程中的应用程序或示例代码。
你需要什么?
要完成本教程，您需要以下内容:
具有亚博Zendesk Suite增长计划或更高版本的Zendesk帐户，或支持专业计划或更高版本的Zendesk帐户。要获得免费的合格帐户进行测试，请参阅获得试用或赞助帐户进行开发。
Zend亚博esk命令行接口(ZCLI)。安装或升级ZCLI，请参考安装和更新ZCLI。ZCLI取代了处于维护模式的Zend亚博esk Apps Tools (ZAT)。要使用ZAT，请参考安装和使用ZAT。
熟悉亚博Zendesk Apps框架(ZAF)。在开始之前，完成构建您的第一个支持应用程序教程。
创建应用程序文件
首先，为应用程序创建基本的启动文件i18n。
在shell中，导航到你想要存储应用程序的文件夹。示例:
cd项目在文件夹中运行:
zcli应用:新在提示框中输入以下值:
- 目录名称:i18n
- 作者姓名:您的姓名
- 作者邮箱:您的邮箱地址
- 作者网站:留空并按回车键。
- 应用名称:i18n
目录中创建应用程序启动器文件i18n文件夹中。
添加翻译字符串
启动器文件包括en.json文件中的应用程序翻译文件夹中。您可以将翻译字符串添加到此文件夹中的JSON文件中。
在应用程序中翻译文件夹,打开en.json在你的文本编辑器中。
添加以下内容
默认的属性:{“应用程序”：{…}，“默认”：{“hello_world”：“你好,世界!”}}注意:类型中添加翻译字符串
应用程序对象。的应用程序对象中包含应用程序列表的内容亚博Zendesk市场。在翻译文件夹，创建一个fr.json文件。将以下内容粘贴到文件中:
{“默认”：{“hello_world”：“你好，世界!”}}保存en.json和fr.json。
加载翻译字符串
Ze亚博ndesk应用程序的iframe只能访问本地文件资产文件夹中。创建一个脚本，将翻译字符串输出到此文件夹中的JavaScript文件。
在应用程序的根文件夹中，创建一个load-translations.js文件。将以下内容粘贴到文件中:
常量fs=需要（“fs”）；常量路径=需要（“路径”）；常量翻译=getTranslationsFromDir（”。/翻译”）；writeTranslationsToFile（翻译）；函数getTranslationsFromDir（translationsDir）{常量jsonFiles=fs。readdirSync（translationsDir）。过滤器（（文件）＝＞路径。extname（文件）= = =. json”）；让翻译={}；jsonFiles。forEach（（文件）＝＞{常量fileData=fs。readFileSync（路径。加入（translationsDir，文件））；常量文件名=文件。取代（. json”，＂"）。toLowerCase（）；常量json=JSON。解析（fileData。toString（））；翻译(文件名]=json；}）；返回翻译；}函数writeTranslationsToFile（翻译）{常量translationsString=JSON。stringify（翻译）；常量translationsObj=｀Const translations =$ {translationsString}；｀；常量translationsFile=”。/资产/ translation-strings.js”；fs。writeFileSync（translationsFile，translationsObj）；控制台。日志（｀写给$ {translationsFile}｀）；}的JSON文件中获取翻译字符串翻译文件夹中。代码将字符串添加到
翻译对象。然后将对象写入translation-strings.js存档于资产文件夹中。在shell中，导航到应用程序的根文件夹。例子:
cd项目/ i18n使用如下命令运行脚本:
节点load-translations.js脚本创建一个translation-strings.js文件中的应用程序资产文件夹中。要更新文件，请重新运行该命令。
重要的是:类型中添加或编辑任何翻译字符串翻译文件夹中，你需要在应用程序中使用字符串之前重新运行脚本。
本地化应用界面
接下来，添加代码，根据Zendesk中当前用户的语言环境将翻译字符串插入到应用程序的用户界面中。亚博
在应用程序中资产文件夹,打开iframe.html。将文件的内容替换为以下内容:
< !文档类型超文本标记语言><超文本标记语言><头><元字符集=＂utf - 8＂/><链接rel=＂样式表＂href=＂https://cdn.jsdelivr.net/combine/npm/@亚博zendeskgarden/(电子邮件保护), npm 亚博/ @zendeskgarden /(电子邮件保护)＂/>头><身体><h2data-i18n-key=＂hello_world＂>h2><脚本src=＂https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js＂>脚本><脚本src=＂translation-strings.js＂>脚本><脚本src=＂i18n.js＂>脚本>身体>超文本标记语言>HTML包含一个空的H2标题。标题有一个
data-i18n-keyhello_world的属性。稍后，您将使用此属性插入翻译字符串。HTML也会加载translation-strings.js和i18n.js脚本。您将创建i18n.js在下一步中。
在资产文件夹，创建一个i18n.js文件。将以下内容粘贴到文件中:
（函数（）{常量客户端=ZAFClient。初始化（）；客户端。得到（“currentUser.locale”）。然后（（数据）＝＞{让userLocale=数据(“currentUser.locale”]。toLowerCase（）；常量语言环境=getSupportedLocale（userLocale）；文档。querySelectorAll（“[data-i18n-key]”）。forEach（（元素）＝＞{translateElement（元素，语言环境）；}）；}）；}）（）；函数getSupportedLocale（userLocale）{//检查locale是否存在翻译//如果不是，返回区域设置"en"让supportedLocales=对象。键（翻译）。地图（（项）＝＞{返回项。toLowerCase（）；}）；如果（supportedLocales。包括（userLocale））{返回userLocale；}其他的{返回“en”；}}函数translateElement（元素，语言环境）{常量关键=元素。getAttribute（“data-i18n-key”）；常量翻译=翻译(语言环境](“默认”](关键]；元素。innerText=翻译；}代码使用ZAF客户端的
get ()方法获取Zendesk中当前用户的语言环境。亚博然后检查区域设置是否存在translation-strings.js文件的翻译对象。如果不是，则代码使用在语言环境。代码将HTML元素的文本替换为
data-i18n-key属性的对应字符串翻译对象。例如，对于具有“fr”(法语)区域设置的用户，具有data-i18n-key的translations.fr.default.hello_world字符串。
测试应用程序
在Zendesk中更改区域设置以验证应用程序亚博是否按预期工作。
使用以下命令展示自我请求获取用户id和区域设置。
旋度https://{subdomain}.zen亚博desk.com/api/v2/users/me.json \密码- u {email_address}: {}保存
user.id和user.locale从回应来看。您将在本教程后面使用它们。{“用户”：{“id”：1905826600027，…“场所”：“en - us”，…}}使用以下命令更新用户请求将区域设置更改为
在。取代{user_id}使用步骤1中的用户id。curl -X PUT https://{subdomain}.亚博zendesk.com/api/v2/users/{user_id}.json \-u {email_address}:{password} \-H "Content-Type: application/json" \- d”{"用户":{“语言环境”:“恩”}} '在您的shell中，导航到i18n文件夹中。例子:
cd项目/ i18n启动本地ZCLI web服务器，命令如下:
zcli应用:服务器过了一会儿，将出现一条状态消息，通知您服务器已经启动。
注意:按“Ctrl+C”停止服务器。
在您的浏览器的私人或隐身窗口，登录到Zendesk支持和转到代理工作区。亚博从工作区打开一个新的或现有的票据。
URL应该是这样的:
https://{子域名}.zendes亚博k.com/agent/tickets/ {ticket_id}附加
? zcli_apps = true到URL，按“Enter”。URL现在看起来应该是这样的:https://{子域名}.zendes亚博k.com/agent/tickets/ {ticket_id} ? zcli_apps = true点击“应用程序”图标。
应用程序显示一个“Hello, World!”的标题。
在您的shell中，使用以下命令更新用户请求将区域设置更新为
fr。取代{user_id}使用步骤1中的用户id。curl -X PUT https://{subdomain}.亚博zendesk.com/api/v2/users/{user_id}.json \-u {email_address}:{password} \-H "Content-Type: application/json" \- d”{"用户":{“语言环境”:“fr”}} '在浏览器中，重新加载Agent Workspace页面。该应用程序现在显示一个本地化的法语标题。
使用以下命令更新用户请求将您的区域设置重置为
在。取代{user_id}和“LOCALE”，其中包含步骤1中的用户id和区域设置。curl -X PUT https://{subdomain}.亚博zendesk.com/api/v2/users/{user_id}.json \-u {email_address}:{password} \-H "Content-Type: application/json" \- d”{"用户":{“语言环境”:“语言环境”}} '
添加新的区域设置
要向应用程序添加一个新的区域设置，请将相应的JSON文件添加到翻译文件夹中。文件名必须是语言的BCP-47兼容标记。有关支持的语言标记列表，请参见支持Zendesk支持的语言亚博在Ze亚博ndesk帮助。
使用以下步骤添加“it”(意大利语)区域设置。
在翻译文件夹，创建一个it.json文件。将以下内容粘贴到文件中:
{“默认”：{“hello_world”：“Ciao绝对的!”}}保存it.json。
在shell中，导航到应用程序的根文件夹。例子:
cd项目/ i18n要更新应用中的翻译字符串，请重新运行load-translations.js脚本:
节点load-translations.js重复以下步骤测试应用程序使用“it”区域设置而不是“fr”区域设置。
该应用程序为“it”地区显示一个本地化的意大利语标题。
添加一个新的翻译字符串
要添加新的翻译字符串，请使用data-i18n-key属性来iframe.html。然后将相应的翻译字符串添加到默认的对象中每个JSON文件的翻译文件夹中。属性的键必须是data-i18n-key属性的值。
在iframe.html，增加以下按钮:
…<身体><h2data-i18n-key=＂hello_world＂>h2><按钮data-i18n-key=＂提交＂>按钮><脚本src=＂https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js＂>脚本>…身体>超文本标记语言>按钮有一个
data-i18n-key“submit”的值。在翻译文件夹，添加
提交属性赋给默认的每个JSON文件的对象。en.json：
{“默认”：{“hello_world”：“你好,世界!”，“提交”：“提交”}}fr.json：
{“默认”：{“hello_world”：“你好，世界!”，“提交”：“发送”}}it.json：
{“默认”：{“hello_world”：“Ciao绝对的!”，“提交”：“Invia”}}保存iframe.html，en.json，fr.json,it.json。
在shell中，导航到应用程序的根文件夹。例子:
cd项目/ i18n要更新应用中的翻译字符串，请重新运行load-translations.js脚本:
节点load-translations.js要测试翻译字符串，请重复中的步骤测试应用程序使用“en”，“fr”和“it”区域设置。
“en”语言环境:
“fr”语言环境:
“它”语言环境:
恭喜你!你已经本地化了Zendesk应用程序。亚博如果需要，你可以通过添加更多的locale和翻译字符串来扩展应用程序。