Being real time is a key requirement today as we strive for a connected experience for our customers. Enterprise cloud leaders like Microsoft are striving to build developer first ecosystems that help easy sync of data between various experience systems. A very good example is The Open Data Initiative that is joint effort between Microsoft , Adobe & SAP to sync data between systems.

Here’s a quick guide to create a publicly available endpoint also known as Webhook on your localhost and validate events/data returned by the data service.

Step 1 :  Download & Install Node JS on your device. To validate it has been implemented correctly open your command prompt and type the following command :

node -v

For the above you should see the version installed in the response as I have in the example below :

v12.14.1

Step 2 : To receive data from external systems as publicly available endpoint on the your development device, we would be using ngrok. Sign up for a free ngrok account and then follow instructions in the ngrok documentation to complete your installation process

Step 3 : To further configure the web listener we would be using additional NPM packages. Express as the name suggests enables creating a basic web framework in Node JS. Body-parser is used to parse the incoming data requests automatically in JSON format. dotenv helps define and load environment variables in the .env file. Run the below code to install all of these dependencies on your command prompt.

npm install express body-parser dotenv

You might see some warning messages but you should be good to proceed, if you see the following messages :

+ body-parser@1.19.0
+ dotenv@8.2.0
+ express@4.17.1
added 51 packages from 37 contributors and audited 51 packages in 5.477s
found 0 vulnerabilities

Step 4 : Now we would execute the below code blocks to create a directory on our development machines and then run a dummy server that listens to port 6789 on your device. Note that port 6789 is reserved for our listening purposes only and feel free to change to appropriate port on your machine

On your command prompt enter the following command :

mkdir sagarz-listener

Create a file named index.js and open it on your IDE to enter the following code:

'use strict';
// Imports dependencies and sets up http server
const
  express = require('express'),
  bodyParser = require('body-parser'),
// creates express http server
  localizer = express().use(bodyParser.json());

// Creates the endpoint for our listener for POST
localizer.post('/listen', (req, res) => {
  console.log("listener has received a POST!", req.query, req.body);
  res.status(200).send('EVENT_RECEIVED');
});

// Creates the endpoint for our listener for GET
localizer.get('/listen', (req, res) => {
  console.log("listener has received a GET!", req.query, req.body);
  res.status(400);
});

// Starts listening to the dedicated server port 6789
localizer.listen(process.env.PORT || 6789, () => console.log('Localizer is listening for requests at port 6789'));

Save the file and switch to your command prompt. Navigate to the folder where the file exists and execute the following :

node index.js

If you did not have any errors and everything went well, you should find the following success message :

Localizer is listening for requests at port 6789

Step 5 : With your server listening for data on port 6789 its time to connect it to the internet. So it would need to open a tunnel between your development machine & publicly accessible endpoint, just like a website on a browser. Assuming ngrok was successfully installed previously, execute the following command on your command prompt :

ngrok http 6789

Upon hitting enter your should find another command prompt window open up which should have the forwarding address for your local port 6789

Forwarding                    http://2cf9374edd3f.ngrok.io -> http://localhost:6789
Forwarding                    https://2cf9374edd3f.ngrok.io -> http://localhost:6789

Go get a cookie for successfully connecting your local port to the World Wide Web!

Does it work? Well lets execute the below validation steps to find out :

Test Case 1 : Send Post Requests Using PostMan

Install Postman and/or navigate to your Postman instance on your device. In the request bar enter <your forwarding address>?test=testing such as mine would be http://2cf9374edd3f.ngrok.io/listen?test=testing. Navigate to the Headers tab and add ‘Content-type’ key with value ‘application/json’. Navigate to Body tab and enter the JSON data to be based in the request, as an example below :

{
  "kind": "testing#post",
  "blog": {
    "name": "sagar mandal"
  },
  "title": "how to validate API",
  "content": "Using Node JS , ngrok , express etc."
}

Node that above is just gibberish, feel free to add more/ change this gibberish as you wish.

Upon selecting GET and pressing Send , you should see the following in your command prompt :

listener has received a GET! { test: 'testing' } {
  kind: 'testing#post',
  blog: { name: 'sagar mandal' },
  title: 'how to validate API',
  content: 'Using Node JS , ngrok , express etc.'
}

Upon selecting POST and pressing SEND, you should see the following in your command prompt :

listener has received a POST! { test: 'testing' } {
  kind: 'testing#post',
  blog: { name: 'sagar mandal' },
  title: 'how to validate API',
  content: 'Using Node JS , ngrok , express etc.'
}

Test Case 2 : Integration with Adobe Campaign Standard

Okay lets get a little serious here! I want to send a web push notification to all subscribers who have registered with the name ‘test’. After creating & validating my query I want to send this data to a push messenger endpoint with the name & id , to personalization the message. Following the documentation for External API, I have included the endpoint I have just created using ngrok. Upon starting the workflow, I received the following message in the command prompt :

listener has received a POST! { test: 'testing' } {
  params: { message: 'its time to update your correct name' },
  data: [
    { name: 'test test', id: '001' },
    { name: 'test blah', id: '002' },
    { name: 'blah test', id: '003' },
    { name: 'tester testing', id: '004' }
  ]
}