打造国际化产品：Strikingly的I18n实践

1. 打造国际化产品 Strikingly 的 I18n 实践龚凌晖, Strikingly Twitter: @danielglh Github: danielglh

2. • ⽤用户来⾃自200多个国家和地区 • ⽀支持Web端和移动端 • ⽀支持6种语⾔言的产品界⾯面和客户服务 • ! English • " ⽇日本語 • # Français • $ Español • % 简体中⽂文 • & 繁體中⽂文

3. • ⽤用户来⾃自200多个国家和地区 • ⽀支持Web端和移动端 • ⽀支持6种语⾔言的产品界⾯面和客户服务 • ! English • " ⽇日本語 • # Français • $ Español • % 简体中⽂文 • & 繁體中⽂文 • 2016年年4⽉月正式推出 • ⽤用户主要来⾃自中国⼤大陆 • 本⼟土化的产品特性 • 产品界⾯面和客户服务 • % 简体中⽂文 • 独⽴立于 Strikingly 的品牌 • 代码⾼高度重⽤用

4. i18n

5. i18n

6. -> internationalizationi18n

7. 国际化(I18n) 设计和实现软件，使之⽆无需通过修改代码即可适应不不同语⾔言和地区的需要。

8. 国际化 v.s. 本地化

9. 内容提要 • 本地化的益处 • Strikingly 的 i18n 解决⽅方案 • 上线了了带来的挑战

10. 为什什么需要本地化？

11. 本地化的益处

12. 本地化的益处 • 改善⽤用户体验

13. 本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率

14. 本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率 • 提⾼高访客注册转化率

15. 本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率 • 提⾼高访客注册转化率 • 扩⼤大市场占有

16. 本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率 • 提⾼高访客注册转化率 • 扩⼤大市场占有

17. Strikingly的i18n 解决⽅方案

18. I18n in Strikingly Platform Workﬂow People Technology

19. I18n in Strikingly Technology

20. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Technology

21. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Server

22. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Server

23. Ruby I18n • Ruby i18n • Github repo: https://github.com/svenfuchs/i18n • Ruby Gem 提供 i18n ⽀支持的标准 • devise • doorkeeper • simple_form • Rails i18n • Rails i18n API: http://guides.rubyonrails.org/i18n.html • ⾃自Rails 2.2开始包含 Ruby i18n gem • Active Record • Active Support

24. I18n.translateI18n.t

25. I18n.t

26. I18n.t “plans.pro_yearly”

27. I18n.t “plans.pro_yearly”

28. I18n.localizeI18n.l

29. I18n.l

30. I18n.l Date.today,format: :long

31. I18n.l Date.today,format: :long

32. I18n.l Date.today,format: :long “九⽉月 23, 2016”

33. I18n.l Date.today,format: :long “九⽉月 23, 2016”

34. I18n.l Date.today,format: :long “2016年年9⽉月23⽇日”

35. Browser Mobile Server Angular jQuery Rails Ruby I18n React React Native iOS Android Gettext Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Server

36. Browser Mobile Server Angular jQuery Rails Ruby I18n React React Native iOS Android Gettext I18n: Server

37. Gettext

38. Gettext • gettext • 最初由 Sun Microsystems 开发 • 类 Unix 系统的 i18n 和 l10n ⽀支持

39. Gettext • gettext • 最初由 Sun Microsystems 开发 • 类 Unix 系统的 i18n 和 l10n ⽀支持 • GNU gettext • 由 GNU 在 1995 年年发布 • ⽬目前最常⻅见的gettext实现

40. Gettext • gettext • 最初由 Sun Microsystems 开发 • 类 Unix 系统的 i18n 和 l10n ⽀支持 • GNU gettext • 由 GNU 在 1995 年年发布 • ⽬目前最常⻅见的gettext实现 • 各种主流语⾔言都有gettext的实现 • Ruby Gettext: https://github.com/mutoh/gettext • Ruby FastGettext: https://github.com/grosser/fast_gettext

41. _(“RubyConf China”)

42. _(“RubyConf China”)

43. gettext v.s. fast_gettext

44. gettext + fast_gettext

45. city = “Chengdu, China” _(city)

46. city = “Chengdu, China” _(city) city = “Chengdu, China” _(city) => “Chengdu, China”

47. city = N_(“Chengdu, China”) city => “Chengdu, China” _(city)

48. city = N_(“Chengdu, China”) city => “Chengdu, China” _(city) => “中国成都”

49. _(“Order”)

50. _(“Order”)

51. s_(“Ecommerce|Order”)

52. s_(“Ecommerce|Order”) “订单” 中⽂文

53. s_(“Ecommerce|Order”) “订单” 中⽂文 “Order” ⽇日语

54. I18n的⼀一般流程

55. I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本

56. I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本 • 根据上下⽂文环境将message id翻译成⽬目标语⾔言⽂文本

57. I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本 • 根据上下⽂文环境将message id翻译成⽬目标语⾔言⽂文本 • 将翻译结果保存成⽬目标语⾔言的词典

58. I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本 • 根据上下⽂文环境将message id翻译成⽬目标语⾔言⽂文本 • 将翻译结果保存成⽬目标语⾔言的词典 • 程序运⾏行行时，根据词典将message id翻译为⽬目标语⾔言⽂文本

59. Ruby I18n v.s. Gettext Ruby I18n Gettext ID “errors.not_authorized” "Not authorized to complete the action." 提取 N/A ⾃自动提取可读性代码可读性⼀一般代码可读性强适⽤用场景 Rails组件，Ruby gem的i18n⽀支持其他

60. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Browser

61. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Browser

62. 为什什么 Javascript 代码⾥里里会⽤用到 Ruby i18n 的实现？

63. 为什什么我们要对两代架构采⽤用不不同的 i18n 实现？

64. I18n: Browser • I18n-js • https://github.com/fnando/i18n-js • 遵循 Ruby i18n 的规范 • 类似 Ruby i18n 的API • 可以导⼊入和重⽤用 Ruby/Rails 的词典⽂文件

65. I18n: Browser • Gettext (jsxgettext + Jed) • jsxgettext • https://github.com/zaach/jsxgettext • 从 js ⽂文件及各种 js 模板⽂文件中提取字符串串 • Jed • https://slexaxton.github.io/Jed/ • Gettext 的⼀一个 Javascript ⾼高效实现

66. 服务器器端浏览器器端提取 gettext gem jsxgettext 翻译 fast_gettext gem Jed

67. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Mobile

68. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Mobile

70. I18n in Strikingly Platform

71. OneSky • 上传待翻译的词条 • 下载已翻译的词典 • 词条翻译管理理界⾯面 • 兼容不不同i18n标准 • 良好的API⽀支持 • 第三⽅方翻译⼈人员招募

73. I18n in Strikingly People

74. I18n: People

75. I18n: People • 翻译⼈人员要求

76. I18n: People • 翻译⼈人员要求 • 以⽬目标语⾔言为⺟母语

77. I18n: People • 翻译⼈人员要求 • 以⽬目标语⾔言为⺟母语 • 对互联⽹网产品有所了了解

78. I18n: People • 翻译⼈人员要求 • 以⽬目标语⾔言为⺟母语 • 对互联⽹网产品有所了了解 • 了了解产品中需要翻译的特定部分

79. I18n: People

80. I18n: People • 众包翻译平台 • 上⼿手简单迅速，⽆无需培训 • 翻译质量量参差不不⻬齐

81. I18n: People • 众包翻译平台 • 上⼿手简单迅速，⽆无需培训 • 翻译质量量参差不不⻬齐 • ⾃自有翻译团队 • 客服团队兼任 • 从粉丝⽤用户中招募 • 客户服务＋翻译

83. I18n in Strikingly Workﬂow

84. I18n: Workﬂow • 常⻅见场景 • 添加新产品特性 • 改进已有产品特性 • 添加新语⾔言⽀支持

85. 添加新产品特性开发发布给英语⽤用户翻译成中⽂文发布给中⽂文⽤用户。。。

86. 改进已有产品特性开发翻译成所有语⾔言开放给所有⽤用户

87. 添加新语⾔言⽀支持招募客服培训翻译发布新语⾔言

89. “上线了了”带来的挑战

90. “上线了了”带来的挑战 • 99%的代码重⽤用 • 全新的本地化品牌 • 上线了了 ≠ Strikingly简体中⽂文版 • 品牌名称置换：Strikingly -> 上线了了 • 不不同⻛风格的⽤用词：“发布” v.s. “上线” • 上线了了未来可能⽀支持英语和其他外语

91. 解决⽅方案 • MultiI18n • 分离 Strikingly 和上线了了的 i18n 词典 • 在翻译平台上创建上线了了的 i18n 项⽬目 • 修改 rake task 分别处理理两个产品的数据上传／下载 • 系统启动时，根据环境变量量中设置的产品代号动态加载对应的配置⽂文件和词典

92. 总结 • I18n是⼀一项系统性的⼯工程 • 软件设计 • I18n ⼯工具链（⾃自⼰己开发，第三⽅方提供） • 产品开发和发布流程 • 翻译团队招募和培训

93. 联系我们！

94. 联系我们！ • StrikinglyTeam公众号 • 技术 • 产品 • 创业

95. 联系我们！ • StrikinglyTeam公众号 • 技术 • 产品 • 创业 • [上海海] [成都] 我们在招聘！ • Email: jobs@strikingly.com • 如应聘成都职位，请在邮件标题注明

打造国际化产品：Strikingly的I18n实践

Esté a ler uma amostra.

Confira estes a seguir

打造国际化产品：Strikingly的I18n实践

Mais Conteúdo rRelacionado

Semelhante a 打造国际化产品：Strikingly的I18n实践 (20)

Mais recentes (20)