节点
本教程将向你展示如何使用Lokalise Node SDK来创建webhook,在第三方应用程序中监听webhook事件,并处理传入的通知。
在本教程中,您将学习如何……
- 用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为你注册了:
![2022-05-05 17_58_02-My Web App _ Lokalise — Mozilla Firefox.png 1046](https://files.readme.io/24abda3-2022-05-05_17_58_02-My_Web_App___Lokalise__Mozilla_Firefox.png)
![Click to close... 1046](https://files.readme.io/24abda3-2022-05-05_17_58_02-My_Web_App___Lokalise__Mozilla_Firefox.png)
注意“X-Secret header”隐藏值。你可以在你的应用中使用这个值,并将它与发送给通知
路由进行额外的保护(从而过滤恶意请求)。
现在返回Lokalise项目编辑器,创建一个新的翻译键。重新加载页面,确保密钥被隐藏:
![2022-05-05 17_57_24-My Web App _ Lokalise — Mozilla Firefox.png 293](https://files.readme.io/71f2d85-2022-05-05_17_57_24-My_Web_App___Lokalise__Mozilla_Firefox.png)
![Click to close... 293](https://files.readme.io/71f2d85-2022-05-05_17_57_24-My_Web_App___Lokalise__Mozilla_Firefox.png)
点击“Comments”按钮(上面屏幕上的第一个按钮),确保注释显示正确:
![2022-05-05 17_57_33-My Web App _ Lokalise — Mozilla Firefox.png 537](https://files.readme.io/4ef99a4-2022-05-05_17_57_33-My_Web_App___Lokalise__Mozilla_Firefox.png)
![Click to close... 537](https://files.readme.io/4ef99a4-2022-05-05_17_57_33-My_Web_App___Lokalise__Mozilla_Firefox.png)
就是这样,干得好!
更新<!-- --> 4个月前<!-- -->