使用 Node.js 和 IBM Mobile Web Push 构建一个实时的营销应用程序

Bob Balfe

资深技术人员, North American Smarter Commerce 团队, 行业解决方案

@BobBalfe

我撰写了一篇名为 "在单页 Web 应用程序中使用 IBM Mobile Web Push" 的文章，在这篇文章中，我谈到了为 Web 和移动应用程序提供一个客户端框架，以便对来自某个营销服务的营销内容作出反应。在本文中，我将展示如何编写一个通用的 Web 页面，您可以在该页面中接收来自 IBM Mobile Web Push 服务器的营销内容，并在我在活动管理器（campaign manager）中指定的位置上显示这些内容。

“作为 Smarter Commerce 团队的一名软件开发人员和解决方案架构师，我总是在寻找获得更好的营销体验的方法。”

理想情况下，我想获得一个允许我 “随意” 使用营销工具而不必担心触犯界限的营销平台。

我将向您展示如何构建一个基本的 Node.js 应用程序，该应用程序使用了 IBM Mobile Web Push 技术将营销内容推送到 Web 应用程序。本文将重点介绍一个单页 Web 应用程序，并展示可以如何在该应用程序中充分利用 IBM Mobile Web Push 营销内容。上面提到的文章中定义了此应用程序的一些基础内容，还解释了对移动和 Web 应用程序实际使用 IBM Mobile Web Push 的一些概念。最关键的是，您可以使用活动管理器将内容推送到某个应用程序，并告诉该应用程序应该如何显示此内容。

运行应用程序

获取代码

备注：要创建此练习的代码的分支，请单击右上角的 EDIT CODE 按钮（如果尚未登录，请输入您的 DevOps Services 证书），并单击菜单上的 FORK 按钮，以便创建一个新的项目。此外，您可以导出该代码，导出方式为：选择根文件夹 (bobbalfe/NodeJSandWebPushExample)，然后选择从左侧的导航中选择 File > Export。

入门的准备工作

0

 

首先，您需要确实了解如何创建 Node.js 应用程序和开发环境，Node.js 工具就能很好地实现此操作。

1. 一个文本编辑器：我喜欢使用 Notepad++，但您可以选择任何满足您需要的编辑器。
2. Node.js：下载 Node.JS 并本地安装它。
3. Jade：Node 模板引擎。
4. Express Framework：这是一个您将要安装的 Node.js 模板，在安装它之后，Node.js 才能正常运行。
5. jQuery Core 和 UI：下载基本的 jQuery 包 和基本的 jQuery UI 包。这会让创建 UI 变得更容易。
6. Slidepanel 插件：这是一个针对 jQuery 的开源的滑动面板插件。下载 Slidepanel 插件 并将它放在您的 javascripts 目录中。
7. API 密钥：注册获得 IBM Web Mobile Push 的 30 天免费试用版。这为您提供了使用该应用程序的 API 密钥，还为您提供了一些时间来熟悉推送技术。

观看： Node.js 入门（演示）

以下步骤描述了最基本的方法。关于加速您的开发的一些更高级的工具，请参阅 其他工具考虑事项。

步骤 1. 创建基本的用户界面

0

 

我假设您已经安装了 Node.js，并在一个基本的应用程序上运行它，请阅读 Scot Rich 撰写的文章 "使用 Node.js、Express、Sentiment 和 ntwitter 构建一个情感分析应用程序"。这篇文章将带您了解如何配置 Node.js 并在您的桌面上运行它。

在这一步中，我们将配置我们的用户界面，以便使用 IBM Mobile Web Push API 和 jQuery AP。在创建 Hello World 应用程序之后，我们将在 views 目录中进行工作，具体地讲，是在 layout.jade 和 index.jade 文件中工作。可以将 layout.jade 看作是所有视图作为基础的基本 HTML 文件。在这里，我们将放置 HTML 标题，并引用我们已经下载的库：

  
  

   
   

    
    

     
     

     
     

      
      1
     
     
     
     

      
      2
     
     
     
     

      
      3
     
     
     
     

      
      4
     
     
     
     

      
      5
     
     
     
     

      
      6
     
     
     
     

      
      7
     
     
     
     

      
      8
     
     
     
     

      
      9
     
     
     
     

      
      10
     
     
     
     

      
      11
     
     
     
     

      
      12
     
     
     
     

      
      13
     
     
     
     

      
      14
     
     
     
     

      
      15
     
     
     
     

      
      16
     
     
    
    
    
    

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

    
    
   
   
   
   

    
    

   
   
   
   

    
    

     
     

    
    
   
   
   
   

    
    

    
    

    
    

    
    

    
    

     
     

      
      doctype html
      
      ​
     
     
     
     

      
      html
      
      ​
     
     
     
     

      
      	head
      
      ​
     
     
     
     

      
      		title= title
      
      ​
     
     
     
     

      
      		link(rel=
      
      'stylesheet'
      
      ,
      
      ​
     
     
     
     

      
                      href=
      
      '/stylesheets/style.css'
      
      )
      
      ​
     
     
     
     

      
      		link(rel=
      
      'stylesheet'
      
      ,
      
      ​
     
     
     
     

      
                      href=
      
      '/stylesheets/jquery-ui-1.10.4.custom.min.css'
      
      )
      
      ​
     
     
     
     

      
      		link(rel=
      
      'stylesheet'
      
      ,
      
      ​
     
     
     
     

      
                      href=
      
      '/stylesheets/jquery.slidepanel.css'
      
      )
      
      ​
     
     
     
     

      
      		script(src=
      
      "/javascripts/jquery-1.11.0.min.js"
      
      )
      
      ​
     
     
     
     

      
      		script(src=
      
      "/javascripts/jquery-ui-1.10.4.custom.min.js"
      
      )
      
      ​
     
     
     
     

      
      		script(src=
      
      "/javascripts/jquery.slidepanel.js"
      
      )
      
      ​
     
     
     
     

      
      		script(src=
      
      "/javascripts/presentation.js"
      
      )
      
      ​
     
     
     
     

      
      	body
      
      ​
     
     
     
     

      
      	block content
      
      ​
     
     
    
    
   
   
  
  

根据这些定义，您应该清楚地了解应该将已经下载的 JavaScript 库放在何处。下一个文件将是您的 Web 应用程序的实际的 UI。对于此演示应用程序，我只在页面上放置了一些文本，以及用来与 IBM Mobile Web Push 服务器交互的链接。我打算重点介绍我的 UI，因为本文的目的是向您展示如何使用 JavaScript 动态请求来自您的营销服务的营销内容。

下一部分将实际编辑 index.jade，并在页面上放置一个 UI。出于演示目的，我为 API 密钥创建了一个字段，但您可能想将密钥作为一个属性包含在您实际的应用程序定义中。在 routes/index.js 文件中，可以包含用来存储该密钥的属性。

  
  

   
   

    
    

     
     

     
     

      
      1
     
     
     
     

      
      2
     
     
     
     

      
      3
     
     
     
     

      
      4
     
     
     
     

      
      5
     
     
     
     

      
      6
     
     
     
     

      
      7
     
     
    
    
    
    

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

    
    
   
   
   
   

    
    

   
   
   
   

    
    

     
     

     
     

      
       
     
     
    
    
   
   
   
   

    
    

    
    

    
    

    
    

    
    

     
     

      
      exports.index = 
      
      function
      
      (req, res){
      
      ​
     
     
     
     

      
        res.render(
      
      'index'
      
      ,
      
      ​
     
     
     
     

      
                      {
      
      ​
     
     
     
     

      
      	title: 
      
      'IBM Push Demo'
      
      ,
      
      ​
     
     
     
     

      
      	api_key:
      
      "XXXXXXXXXX-XXXXX-XXXXXXXX-XXXXXXXXXXXX"
      
      ​
     
     
     
     

      
      	});
      
      ​
     
     
     
     

      
      };
      
      ​
     
     
    
    
   
   
  
  

然后，您可以在自己的 layout.jade 文件中引用该密钥：

  
  

   
   

    
    

     
     

     
     

      
      1
     
     
     
     

      
      2
     
     
     
     

      
      3
     
     
    
    
    
    

     
     

     
     

     
     

     
     

    
    
   
   
   
   

    
    

   
   
   
   

    
    

     
     

     
     

      
       
     
     
    
    
   
   
   
   

    
    

    
    

    
    

    
    

    
    

     
     

      
      Script( src=
      
      "/javascripts/reactor-bundle.min.js"
      
      , data-protocol=
      
      "http:"
      
      ,
      
      ​
     
     
     
     

      
                          id=
      
      "reactor-sdk"
      
      ,data-app-key=
      
      "#{api_key}"
      
      ​
     
     
     
     

      
                      data-auto-run=
      
      "false"
      
      ></script>
      
      ​
     
     
    
    
   
   
  
  

该方法对于实际的应用程序而言更切合实际。

我使用了一些锚链接（anchor link）将页面事件发送到活动管理器。您可以这样想象：这些事件可能来自任何 UI 手势，比如单页应用程序中的屏幕之间的移动。在我的演示中，我在锚链接上使用了一个标题标签，用它来确定哪些事件要发送到活动管理器：

  
  

   
   

    
    

     
     

     
     

      
      1
     
     
    
    
    
    

     
     

     
     

    
    
   
   
   
   

    
    

   
   
   
   

    
    

     
     

     
     

      
       
     
     
    
    
   
   
   
   

    
    

    
    

    
    

    
    

    
    

     
     

      
      a(href=
      
      '#'
      
      ,pageOption=
      
      "page"
      
      ,page=
      
      "Title"
      
      ) Page Event 
      
      1
      
       – Left
      
      ​
     
     
    
    
   
   
  
  

您会注意到关于这个 <a> 语句的两个事情。第一个事情是 href 被设置为 #，这意味着我们将实际打开一个新的窗口，而且我们要使用此窗口来完成事件处理。在我们的 jQuery selector 语句中，pageOption 将被用作一个密钥，用来捕获单击事件，而 page 属性会告诉我们哪个标题将被发送到针对内容的营销活动。在下一步中，将会介绍有关的更多内容。

步骤 2. 检测我们对活动管理器的调用

0

 

现在，我们已经准备好了对活动管理器执行一些调用。我在 public/javascripts 目录中的一个名为 presentation.js 的单独的 JavaScript 文件中执行了此操作。如您在下面代码中所见，我选择了 pageOption，因此页面上的所有链接都会调用这样一个方法。因为这是一个单页应用程序，我们需要告诉活动管理器，我们将在哪个页面上获得针对该操作的适当内容。为此，我将使用自定义属性，我们的活动工具中会使用这些属性。然后，我会基于 PAGE_VIEW 创建一个事件，将该事件发送给服务器并等待响应。

  
  

   
   

    
    

     
     

     
     

      
      1
     
     
     
     

      
      2
     
     
     
     

      
      3
     
     
     
     

      
      4
     
     
     
     

      
      5
     
     
     
     

      
      6
     
     
     
     

      
      7
     
     
     
     

      
      8
     
     
     
     

      
      9
     
     
     
     

      
      10
     
     
     
     

      
      11
     
     
     
     

      
      12
     
     
    
    
    
    

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

    
    
   
   
   
   

    
    

   
   
   
   

    
    

     
     

     
     

      
       
     
     
    
    
   
   
   
   

    
    

    
    

    
    

    
    

    
    

     
     

      
      $(
      
      '[pageOption]'
      
      ).click(
      
      ​
     
     
     
     

      
                      
      
      function
      
      (){
      
      ​
     
     
     
     

      
      	Reactor.reset();
      
      ​
     
     
     
     

      
      	Reactor.Client.attributes.set(
      
      "title"
      
      ,
      
      ​
     
     
     
     

      
                      
      
      "Reactor Test"
      
      );
      
      ​
     
     
     
     

      
      	Reactor.Client.attributes.set(
      
      "page"
      
      ,
      
      ​
     
     
     
     

      
                          $(
      
      this
      
      ).attr(
      
      "page"
      
      ));
      
      ​
     
     
     
     

      
      				
      
      ​
     
     
     
     

      
      	
      
      var
      
       newPage = 
      
      new
      
      ​
     
     
     
     

      
                      Reactor.Event(
      
      "PAGE_VIEW"
      
      , 
      
      function
      
      (message){	});
      
      ​
     
     
     
     

      
      	Reactor.EventManager.fireEvent(newPage);			
      
      ​
     
     
     
     

      
      });
      
      ​
     
     
    
    
   
   
  
  

步骤 3. 接收来自活动的内容

0

 

在相同的文件（presentation.js）中，我们需要提供一个针对活动内容的回调。这也是我们基于从活动接收的数据来确定显示内容的方式和地点的地方。首先，让我们了解我们将从活动中接收哪些内容。我会检测活动，以便通过 JSON 发送自定义数据。这允许我（一名活动经理）推动内容的显示（例如，一条弹出消息、左侧面板、顶部面板、底部面板、右侧面板或只是页面上的一个点）。下面是我们将在此演示 position 中使用的主要变量的屏幕截图。

点击查看大图

但是，让我们来看看我们要做的事情吧。我们将在以下步骤中学习关于活动方面的更多知识。首先，我们需要用脚本来描述事件。我们使用了一个简单的名叫 onMessage 的钩子来实现此操作。已发送到我们的回调函数的消息包括 body、title 和 customData（我们放置在活动管理器中的 JSON）。

  
  

   
   

    
    

     
     

     
     

      
      1
     
     
     
     

      
      2
     
     
     
     

      
      3
     
     
     
     

      
      4
     
     
     
     

      
      5
     
     
     
     

      
      6
     
     
     
     

      
      7
     
     
     
     

      
      8
     
     
     
     

      
      9
     
     
     
     

      
      10
     
     
     
     

      
      11
     
     
     
     

      
      12
     
     
     
     

      
      13
     
     
     
     

      
      14
     
     
     
     

      
      15
     
     
     
     

      
      16
     
     
     
     

      
      17
     
     
     
     

      
      18
     
     
     
     

      
      19
     
     
     
     

      
      20
     
     
     
     

      
      21
     
     
     
     

      
      22
     
     
     
     

      
      23
     
     
     
     

      
      24
     
     
     
     

      
      25
     
     
     
     

      
      26
     
     
     
     

      
      27
     
     
     
     

      
      28
     
     
     
     

      
      29
     
     
    
    
    
    

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

     
     

    
    
   
   
   
   

    
    

   
   
   
   

    
    

     
     

     
     

      
       
     
     
    
    
   
   
   
   

    
    

    
    

    
    

    
    

    
    

     
     

      
      Reactor.onMessage(
      
      function
      
      (message){
      
      ​
     
     
     
     

      
      	
      
      if
      
      ​
     
     
     
     

      
                          (message.customData.position ==
      
      ​
     
     
     
     

      
                      
      
      "popup"
      
      ){
      
      ​
     
     
     
     

      
      		
      
      var
      
       subjectDiv =
      
      ​
     
     
     
     

      
                      document.getElementById(
      
      "r_subject"
      
      );
      
      ​
     
     
     
     

      
      		subjectDiv.innerHTML =
      
      ​
     
     
     
     

      
                      message.subject;
      
      ​
     
     
     
     

      
      		
      
      var
      
       bodyDiv =
      
      ​
     
     
     
     

      
                      document.getElementById(
      
      "r_body"
      
      );
      
      ​
     
     
     
     

      
      		bodyDiv.innerHTML =
      
      ​
     
     
     
     

      
                      message.body;
      
      ​
     
     
     
     

      
      		jQuery(
      
      "#reactor_response"
      
      ).dialog();
      
      ​
     
     
     
     

      
      	}
      
      else
      
      {
      
      ​
     
     
     
     

      
      		
      
      var
      
       mode =
      
      ​
     
     
     
     

      
                              (!message.customData.mode?
      
      "overlay"
      
      :message.customData.mode);
      
      ​
     
     
     
     

      
      		slider =
      
      ​
     
     
     
     

      
                      $(
      
      '[data-slidepanel]'
      
      ).slidepanel({
      
      ​
     
     
     
     

      
      			orientation:
      
      ​
     
     
     
     

      
                          message.customData.position,
      
      ​
     
     
     
     

      
      			mode:
      
      ​
     
     
     
     

      
                      mode,
      
      ​
     
     
     
     

      
      			
      
      static
      
      :
      
      ​
     
     
     
     

      
                      
      
      true
      
      ,
      
      ​
     
     
     
     

      
      			html:
      
      ​
     
     
     
     

      
                          message.body
      
      ​
     
     
     
     

      
      		});
      
      ​
     
     
     
     

      
      	}
      
      ​
     
     
     
     

      
      });
      
      ​
     
     
    
    
   
   
  
  

您可以看到，我们支持 popup 和 Slidepanel 插件支持的四个位置（顶部、底部、左侧和右侧）。

步骤 4. 设置您的活动

0

 

在开始这一步骤之前，您需要注册获得 30 天的 IBM Mobile Web Push 试用版。我希望，在此时，在本文和样例代码之间，您的应用程序能够正常工作和运行，而且已经为接收来自我们的活动的内容做好了准备。我们首先要做的是创建一个新的活动，并为它提供一个相关名称。我会详细介绍创建活动的过程，剩下的工作您应该能够顺利完成。首先填充的内容是活动的名称。该名称是您会在活动列表中看到的管理名称，因此，确保该名称是相关而且易于识别的名称。您可以有选择地描述活动以及活动的开始日期和结束日期。

点击查看大图

接下来，我们将定义被发送到客户端设备（移动、Web 等）的内容。您可以有一个支持富文本的主题和正文。理想情况下，您将在这里推送丰富的内容，比如图像、横幅、广告或产品推荐。您还会注意到，这也是我们用来使用自定义数据的地方。这允许我（一名营销人员）标识应该如何在设备上显示内容。需要牢记的一件事是，还可以使用此内容来标识某个 DIV 中或页面的某个地方上的 ID 的密钥。因此，如果我设计了我的站点，该站点包含用来放置营销信息的地方，而且位置 ID 是经过标准化的，那么内容将被放置在这些位置点上，这可能是一个更典型的实现，特别是在您拥有几个想用从活动工具进行控制的地方的时候。

您会注意到，在这个示例中，我传递了 {"position":"left","mode":"push"}，它将告诉我的客户端框架显示左侧面板中的内容，并将页面内容推送到右侧面板。

我们会将 audience 部分保留为 All Users，并转到触发器和规则部分。现在，我可能已经创建了一个自定义事件，该事件可能更真实。但我选择只使用 PAGE_VIEW 事件。在 Display Rule Builder 部分，我只将用户属性 page 标识为 Title。该属性会立刻将页面事件与活动中的规则联系在一起，因此，当我单击页面上的 <a> 时，它会发送 page=Title 活动，会将它发送回其内容。

需要牢记的一点是，您的客户端可以接收来自活动管理器的多个内容，我设置好了我的活动，这样就不会出现接收多个内容的情况，但实际上可以在这方面多一些创意。您可以考虑对来自营销经理的内容使用一个横向卷轴（side-scroller）小部件。

其他工具注意事项

0

 

在步骤 1 中，我向您展示了如何使用 node 和 npm 命令来管理和运行应用程序。您可以在一个文本编辑器中轻松地实现所有编码。不过，在开发应用程序过程中，实际上我还使用了其他一些工具来简化我的开发。

此外，我想将应用程序推送到一个 Cloud Foundry 兼容的 Node.js 运行时环境，比如 CloudFoundry.com 或 Bluemix 平台。这样最终的应用程序就会包含该环境需要的一些额外的文件；manifest.yml 文件描述了应用程序，而它的资源需要 Cloud Foundry 运行时。

结束语

0

 

现在，您应该已经熟悉了 Node.js 和所有 IBM Mobile Web Push API，应该为实现此技术的一些很好的实际用例做好了准备。 我仍然不是非常熟悉 Node.j 和 Express 框架，而且我已经查看了其他可以从此这组合构建的可能的应用程序。