节点

在本教程中，您将学习如何……

• 用Lokalise API注册webhook
• 收听传入的通知
• 响应webhook通知

你可以找到GitHub上的源代码．

先决条件

本指南假设您有一个Lokalise项目(如果没有，学习如何创建你的Lokalise项目在这里)．此外，您还需要一个读/写Lokalise API令牌;你可以学习如何得到一个在相应的文章中．

如果你想在你的电脑上本地执行本指南，你需要安装以下软件:

• node . js(版本10或以上)
• Npm
• 代码编辑器
• Heroku CLI

最后，请注意，为了监听和响应webhook事件，你的应用程序必须是公开可访问的。在本教程中，我们将部署我们的应用程序到Heroku(见下文)。

我们要建造什么

我们将创建一个简单的应用程序，允许用户在他们的Lokalise项目中注册webhook。该应用程序还将侦听由这些webhook生成的传入通知，并通过发送API请求对它们做出反应。

准备一款新应用

首先，创建一个新的Node应用:

mkdir YOUR_PROJECT && cd YOUR_PROJECT && npm init -y

现在安装必要的依赖项:

HBS @lokalise/node-api

添加一个开始脚本package.json设置应用类型为模块：

"type": "module"， "scripts": {"start": "node index.js"}

也添加一个Procfile内容如下:

网络:节点index.js

该文件将用于在Heroku上引导您的应用程序。如果使用不同的托管提供商，可能需要采取其他步骤。

项目框架

现在让我们准备必要的文件。首先，创造index.js在项目根目录中:

import flash from 'connect-flash' import {router} from "./config/routes.js" import {setupAssets} from "./config/assets.js" const app = express() app.use(express)urlencoded({extended: true})) app.use(Express .json()) app.use(cookieSession({name: 'session'， secret: 'my_super_secret'， maxAge: 24 * 60 * 60 * 1000})) app.use(flash()) app.use('/'， router) const port = process.env.PORT || 3000 app.listen(port， () => {console.log(' Express web app on port ${port} ')}) setupAssets(app)

这是我们加载所有必要模块、设置会话存储、路由等的主文件。

现在创建一个配置/ assets.js文件:

import hbs from "hbs" import path from "path" const __dirname = path.resolve()导出函数setupAssets(app) {app.set('view engine'， 'hbs') hbbs . registerpartials (path. name)加入(__dirname“视图/泛音”))}

我们将使用Handlebars模板引擎，当然您也可以利用任何其他解决方案。

的中添加根路由配置/ routes.js文件:

import express from "express" import {StaticPagesController} from "../controllers/ StaticPagesController .js" export const router = express. router()路由器。get('/'， (req, res) => {StaticPagesController. get('/'， (req, res) => {res指数(点播)})

创建控制器/ staticPagesController.js文件:

从“./application_controller.js”导出类StaticPagesController扩展ApplicationController{静态索引(req, res) {this。renderView(req, res， 'static_pages/index'， {title: 'Register Lokalise webhook'})}}

该控制器继承自程序控制器，所以我们现在也把它添加到下面控制器/ applicationController.js：

导出类ApplicationController{静态renderView(req, res, view, data ={}){数据。Flash_messages = req.flash('data') res.render(view, data)}}

接下来，让我们来照顾下主要布局视图/ layout.hbs：

<！负责人html DOCTYPE html > < > < > < meta charset =“utf - 8”> <标题>{{标题}}< /名称> < /头> <身体> < div >{{>头}}{{{身体}}}< / div > < /身体> < / html >

也添加视图/泛音/ header.hbs：

<标题> < h1 >{{标题}}< / h1 > < /头>{{#每个flash_messages |味精|}}{{#每个味精}}< div >{{一}}< / div >{{/每个}}{{/每个}}

最后,添加一个视图/ static_pages / index.hbs文件:

我们只是显示一个表单来在指定的Lokalise项目中注册一个新的webhook。

在结束本节之前，让我们初始化一个新的Git存储库并创建一个新的Heroku项目:

git init heroku创建HEROKU_PROJECT_NAME

就是这样，现在让我们进入下一节!

登记人

下一步是为指定的项目ID实际注册一个webhook。因此，创建一个新的路由:

/ /……import {WebhooksController} from "../controllers/ WebhooksController .js" //…路由器。post('/webhooks'， (req, res) => {webhooks控制器。创建(点播,res)})

现在添加一个webhooksController.js文件到控制器目录:

从"./application_controller.js"导出类WebhooksController扩展ApplicationController {static async create(req, res) {try {await this.lokaliseApi().webhooks()。创建({url: process.env。事件:[' project.key NOTIFY_URL。添加']},{project_id: req.body。Project_id})} catch(e) {console.error(e)}请求。flash('data'， {success: '为${req.body注册webhook。res.redirect('/')}}

我们使用lokaliseApi ()方法中定义的程序控制器,如下:

从“@lokalise/node-api”导出类ApplicationController{//…static lokaliseApi(){返回新的lokaliseApi({apiKey: process.env.LOKALISE_API_TOKEN})}}

另外，注意我们使用了两个环境变量，所以让我们把它们添加到Heroku中:

heroku config:add LOKALISE_API_TOKEN=123abc NOTIFY_URL=https://YOUR_HEROKU_PROJECT/notify

你的应用程序必须公开可用!

如果你的应用程序在本地运行，你将无法注册一个新的Lokalise webhook。这是因为Lokalise将尝试发送一个特殊的“ping”请求，以确保提供的通知URL实际上是可用的。

听事件

最后要做的是监听传入的Lokalise事件，因此创建一个新的路由:

/ /……import {NotificationsController} from "../controllers/ NotificationsController .js" //…路由器。post('/notify'， (req, res) => {NotificationsController. post('/notify'， (req, res) => {创建(点播,res)})

创建一个新的notificationsController.js文件:

从“./application_controller.js”导出类NotificationsController扩展ApplicationController {static async create(req, res) {const payload = req. js。body if(Array.isArray(payload)) {if(payload [0] === "ping") {res.sendStatus(200)返回}else {res.sendStatus(400)返回}}event === 'project.key.added') {await this. lokaliseapi ().comments().create([{comment: "@Bob please review this new key"}]， {project_id: load.project. add . event === 'project.key.added') {await this. lokaliseapi ().comments().create([{comment: "@Bob please review this new key"}]，this.lokaliseApi().keys().update(load.key.id)。id， {"is_hidden": true}， {project_id: payload.project.id})} res.sendStatus(200)}}

首先，我们要确保接收到的请求不是“ping”(否则什么都不做)。如果请求事件是project.key.added然后我们为这个键添加一个新的注释，并对非管理员隐藏它。

关于通知处理程序的通知

请注意，通知处理程序路由必须响应HTTP POST并返回2xx状态码。否则，Lokalise会在放弃之前尝试多次重新发送通知。

测试

现在一切准备就绪!在Heroku上部署你的应用:

git commit -m "Initial" git push heroku master heroku open

在文本输入中输入Lokalise项目ID，然后按“Register”。

现在打开Lokalise，进入你的项目，点击顶部菜单中的“Apps”。找到“Webhooks”应用程序，点击它，然后按“管理”。你会看到一个新的webhook为你注册了:

注意“X-Secret header”隐藏值。你可以在你的应用中使用这个值，并将它与发送给通知路由进行额外的保护(从而过滤恶意请求)。

现在返回Lokalise项目编辑器，创建一个新的翻译键。重新加载页面，确保密钥被隐藏:

点击“Comments”按钮(上面屏幕上的第一个按钮)，确保注释显示正确:

就是这样，干得好!