如何在2小时内使用Node.js和Express构建全渠道微型应用程序

最新推荐文章于 2024-10-12 17:14:32 发布

dfsgwe1231

最新推荐文章于 2024-10-12 17:14:32 发布

阅读量155

点赞数

文章标签： json javascript git ViewUI

我是ONEm Communications Ltd.的CTO。我们已经建立了一个开发人员框架和平台，使开发人员可以快速构建功能齐全的全渠道微型应用程序。

在本文中，我将向您展示如何使用我们简单的Node.js SDK从头开始构建示例微应用程序。本教程假定您具有Node.js的基本知识。

我们将根据http://themoviedb.org提供的免费API检索电影详细信息（请确保遵守其条款）。

我们将编写一个可集成到任何网站的网络小部件...

相同的代码库也将立即支持SMS客户端。

ONEm平台使您可以在Internet上的任何地方托管您的微型应用程序。对于本地测试，我们将使用ngrok提供可公开访问的URL，以便在本地主机上运行的应用程序与ONEm框架之间架起桥梁。

先决条件

1.通过https://www.themoviedb.org/account/signup注册免费的api密钥

2.通过https://developer-portal.onem.zone/注册一个免费的ONEm开发者帐户。

3.从https://ngrok.com/安装ngrok

微型应用程序基础

当用户从Web小部件或通过SMS发出请求时，ONEm框架将调用微应用程序的Web服务器的HTTP回调。微型应用程序应使用HTTP状态代码200进行响应，并在响应正文中包含一些JSON，该JSON告诉ONEm Framework如何将响应呈现给用户。如果您感兴趣并且想了解更多信息，可以在https://developer-docs.onem.zone中签出开发人员文档。

我们的Node.js SDK提供了JSON格式的抽象，因此您不必担心细节。您有两个选择，您可以使用SDK通过将参数传递给所提供的函数来生成JSON，或者可以使用模板库并以HTML编写您的微型应用程序视图：）在本教程中，我们将使用第二个选项，具体哈巴狗作为模板语言，你可以使用EJS如果你愿意代替。

好的，足够的聊天，让我们开始编码吧！

项目结构和代码

在本教程中使用的代码可以通过git仓库进行访问这里

我们的项目结构如下所示：

/ index.js package.json .env /app_api /routes index.js /views landing.pug movieView.pug /public /index.html

安装Express和项目的基本依赖项：

$ npm install express dotenv jwt-simple request-promise url-join

我们还将使用ONEm Framework的Node.js SDK：

$ npm install onemsdk

在项目根目录中创建具有以下内容的index.js ：

require ( 'dotenv' ).config()
const express = require ( 'express' )
const api = require ( './app_api/routes' )

const app = express()
const PORT = process.env.PORT || 3000

app. use (express.json())
app. use (express. static (__dirname + '/public' ));
app. use ( '/api' , api)

app.get( '/' , function (req, res)  {
    res.sendFile( '/public/index.html' , { root: __dirname })
})

app.get( '*' , function (req, res)  {
    res.sendFile( '/public/index.html' , { root: __dirname })
})

app.get( '/*' , function (req, res)  {
    res.sendFile( '/public/index.html' , { root: __dirname })
})

app.listen(PORT, () =&gt; console.log(`Example micro-app listening on port ${PORT}`))

当用户从我们的微型应用程序发出请求（例如选择菜单选项或提交表单）时，ONEm框架将向微型应用程序的回调路径发出HTTP请求。在index.js中，我们将来自ONEm框架的所有请求的/ api设置为“基本路径”，并带有以下代码行：

app.use('/api', api)

当用户首次启动微应用程序时，ONEm框架将显示该微应用程序的“登录页面”。这有点像典型Web应用程序的index.html 。登陆页面是由ONEm框架调用的，该框架向微应用的API基本路径（在我们的示例中为/ api）发出请求。

因此，我们希望我们的应用处理对GET / api的基本调用，并以用户将看到的一些初始内容作为响应。

对于我们的示例，我们将创建一个静态菜单，以便我们的用户可以观看三种不同的电影：

当用户单击电影标题时，我们将显示电影的图像和说明。

首先，让我们通过在/ views文件夹中创建一个landing.pug来创建登录菜单选项：

section
  header Movie Menu
  ul
    li
        a(href= '/movie/76341/' ) Mad max
    li
        a(href= '/movie/419704/' ) Ad Astra
    li
        a(href= '/movie/454626/' ) Sonic the Hedgehog

让我们在/routes/index.js中的Express中连接基本路由：

const jwt = require ( 'jwt-simple' )
const express = require ( 'express' )
const request = require ( 'request-promise' )
const urlJoin = require ( 'url-join' )
const { loadTemplate } = require ( 'onemsdk' ).parser
const { Response } = require ( 'onemsdk' )

const api = express.Router()

// get this by signing up for an account at https://www.themoviedb.org/
const READ_ACCESS_TOKEN = process.env.READ_ACCESS_TOKEN

if (!READ_ACCESS_TOKEN) throw "themoviedb.org READ_ACCESS_TOKEN not found in environment variables"

const moviedbProps = {
    baseUrl : 'https://api.themoviedb.org' ,
    baseImagePath : 'http://image.tmdb.org/t/p/w185/'
}

const VIEWS_PATH = './app_api/views/'

const views = {
    VIEW_LANDING : ` ${VIEWS_PATH} landing.pug` ,
    VIEW_MOVIE : ` ${VIEWS_PATH} movieView.pug` ,
}

api.get( '/' , async (req, res) =&gt; {

    try {
        let rootTag = loadTemplate(views.VIEW_LANDING, {})
        let response = Response.fromTag(rootTag)
        res.json(response.toJSON())
    } catch (e) {
        console .log(e)
        res.status( 500 ).json({ success : false , message : 'server error' })
    }
})

api.get( '/movie/:id' , async (req, res) =&gt; {

    let movieId = req.params.id

    try {
        let data = await request(urlJoin(moviedbProps.baseUrl, `/3/movie/ ${movieId} ` ), {
            json : true ,
            headers : {
                'Authorization' : 'Bearer ' + READ_ACCESS_TOKEN
            }
        })

        if (data.poster_path) {
            data.poster_path = urlJoin(moviedbProps.baseImagePath, data.poster_path)
        }

        let rootTag = loadTemplate(views.VIEW_MOVIE, data)
        let response = Response.fromTag(rootTag)
        res.json(response.toJSON())
    } catch (e) {
        console .log(e)
        res.status( 500 ).json({ success : false , message : 'server error' })
    }
})

module .exports = api

/* * Here we set the a path to the landing.pug file */ const views = { VIEW_LANDING: `${VIEWS_PATH}landing.pug`, VIEW_MOVIE: `${VIEWS_PATH}movieView.pug` }

/* * The api's base path is called when users hit our app * for the first time. We'll use the onemsdk to parse the * pug file and generate the raw JSON response */ api.get('/', async (req, res) => { try { let rootTag = loadTemplate(views.VIEW_LANDING, {}) let response = Response.fromTag(rootTag) res.json(response.toJSON()) } { let rootTag = loadTemplate(views.VIEW_LANDING, {}) let response = Response.fromTag(rootTag) res.json(response.toJSON()) } { let rootTag = loadTemplate(views.VIEW_LANDING, {}) let response = Response.fromTag(rootTag) res.json(response.toJSON()) } catch (e) { console.log(e) res.status(500).json({ success: false, message: 'server error' }) } }) (e) { console.log(e) res.status(500).json({ success: false, message: 'server error' }) } })

/routes/index.js还包含电影查看页面的路由，当用户单击电影标题时，ONEm框架将向与该选项相关联的href发出HTTP GET回调，例如在landing.pug中，以下行：

a(href='/movie/76341/') Mad max

在本教程的后面，我们将告诉ONEm框架使用/ api的基本路径，当用户选择查看Mad Max时，它将最终转换为HTTP GET / api / movie / 76341 。

好的，快速回顾一下。我们使用哈巴狗创建了两个视图。我们的网络服务器已准备就绪，可以接受来自/ api和/ api / movie / {：id}的回调

因此，剩下的就是完成我们的微型应用程序的设置。

在项目根路径中创建一个.env文件：

PORT=3000 READ_ACCESS_TOKEN=<themoviedb API Read Access Token (v4 auth)

2.我们将使用ngrok在localhost：3000处为我们的Micro-app提供可公开访问的URL。

ngrok http 3000

复制ngrok提供的链接，类似于https://6f1ca0d4.ngrok.io

3.在ONEm开发人员门户中，选择“创建应用程序”，然后将应用程序的回调路径附加/ api设置到基本路径，例如： https：// 6f1ca0d4 .ngrok.io / api

4.在ONEm Developer Portal中，选择您的新应用，然后选择“ Web频道”。将标签中显示的javascript代码复制/粘贴到您的Micro-app的/public/index.html的主体部分中：

... <body> <h1>Movie micro-app</h1> <script src="https://bot.onem.zone/bundle.js"></script> <script> ONEmStart({ app_id: "5eb948e62d60d1001f32fb83" }).render('body'); </script> </body>