DEV Community

Paul Chin Jr.
Paul Chin Jr.

Posted on • Updated on

Serverless click tracker with OpenJS Architect

Event functions are useful for running background tasks like handling newsletter signups or click tracking. These background tasks are going to allow your application to fan out the workload to independent and scalable Lambda functions. In this article, we will be building an interactive click tracker that generates an event with a data payload that is saved to DynamoDB.

Clone repo and local development

The first step is to click the button to deploy this app to live infrastructure with Begin.

Deploy to Begin

Underneath, Begin will create a new GitHub repo to your account to clone to work on locally. Each push to your default branch will trigger a new build and deploy to the staging environment. Your CI/CD is already complete!!

When your app deploys, clone the repo, and install the dependencies.

git clone https://github.com/[username]/[your-app-name.git]
cd your-app-name
npm install
Enter fullscreen mode Exit fullscreen mode

Let's first take a look at the app.arc file:

@app
node-events

@http
post /my-event

@static

@events
my-event

@tables
data
  scopeID *String
  dataID **String
  ttl TTL
Enter fullscreen mode Exit fullscreen mode

The app.arc file is your Infrastructure as Code, IaC. It shows the cloud functions and database that we need to deploy.

Let's look at the HTTP function that receives a POST request from the front-end. It will publish the event payload to our event function.

// src/http/post-my_event/index.js

const arc = require('@architect/functions')

exports.handler = async function http (req) {
  const name = 'my-event'
  const payload = arc.http.helpers.bodyParser(req)
  await arc.events.publish({ name, payload })
  return {
    statusCode: 302,
    headers: {
      location: '/'
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Next, we'll look at the event function itself. We use an Architect runtime helper to subscribe this function to the my-event SNS topic.

// src/events/my-event/index.js
const arc = require('@architect/functions')
const data = require('@begin/data')
const table = 'interactions'
const key = 'clicks'

async function myEvent(event) {
  let { name } = event
  await data.incr({
    table,
    key,
    prop: name
  })

  return
}

exports.handler = arc.events.subscribe(myEvent)
Enter fullscreen mode Exit fullscreen mode

And finally, the front end is composed of form elements that POST the value to our HTTP function.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Begin Event Functions Example</title>
</head>
<style>
 :root {
    --light: #FEFEFE;
    --purple: #8D30FF;
    --magenta: #FF577B;
    --angle: 45deg;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    color: var(--light);
    font-family:
      ui-sans-serif,
      system-ui,
      -system-ui,
      -apple-system,
      BlinkMacSystemFont,
      Roboto, Helvetica, Arial,
      sans-serif,
      "Apple Color Emoji";
      line-height: 1.6;
  }
  html,
  body,
  .height-100 {
    height: 100%;
  }
  .margin-bottom1 {
    margin-bottom: 1rem;
  }
  .padding-top5 {
    padding-top: 9rem;
  }
  .max-width22 {
    max-width: 22rem;
  }
  .display-flex {
    display: flex;
  }
  .flex-direction-column {
    flex-direction: column;
  }
  .align-items-initial {
    align-items: initial;
  }
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-space-between {
    justify-content: space-between;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .border-solid {
    border: 2px solid;
  }
  .color-light {
    color: var(--light);
  }
  .color-purple-active:active {
    color: var(--purple);
  }
  .linear-gradient {
    background-image: linear-gradient(var(--angle), var(--magenta), var(--purple));
  }
  .background-size-cover {
    background-size: cover;
  }
  .background-color-transparent {
    background-color: transparent;
  }
  .background-color-light-active:active {
    background-color: var(--light);
  }
  .border-color-light {
    border-color: var(--light);
  }
  .border-radius-pill {
    border-radius: 999px;
  }
  .padding1 {
    padding: 1rem;
  }
  .padding-top1 {
    padding-top: 1rem;
  }
  .padding-right2 {
    padding-right: 1.5rem;
  }
  .padding-bottom1 {
    padding-bottom: 1rem;
  }
  .padding-left2 {
    padding-left: 1.5rem;
  }
  .font-size1 {
    font-size: 1rem;
  }
  .font-weight-500 {
    font-weight: 500;
  }

  @media only screen and (min-width:30em) {
    .flex-direction-row-lg {
      flex-direction: row;
    }
    .align-items-center-lg {
      align-items: center;
    }
  }
</style>
<body
  class="
    padding-top5
    padding-right2
    padding-left2
    linear-gradient
    display-flex
    flex-direction-column
    align-items-initial
    align-items-center-lg
  "
 >
  <div
    class="
      max-width22
    "
  >
    <h1
      class="
        margin-bottom1
      "
    >
      Publish an event
    </h1>
    <div
      class="
        display-flex
        flex-direction-column
        flex-direction-row-lg
        justify-content-space-between
        margin-bottom1
      "
    >
      <form
        action=/my-event
        method=POST
      >
        <input type="hidden" name="name" value="Bark">
        <button
          class="
            margin-bottom1
            padding-top1
            padding-right2
            padding-bottom1
            padding-left2
            font-size1
            font-weight-500
            color-light
            color-purple-active
            border-radius-pill
            border-solid
            border-color-light
            background-color-transparent
            background-color-light-active
            cursor-pointer
          "
        >
          🐶 Bark
        </button>
      </form>
      <form
        action=/my-event
        method=POST
      >
        <input type="hidden" name="name" value="Meow">
        <button
          class="
            margin-bottom1
            padding-top1
            padding-right2
            padding-bottom1
            padding-left2
            font-size1
            font-weight-500
            color-light
            color-purple-active
            border-radius-pill
            border-solid
            border-color-light
            background-color-transparent
            background-color-light-active
            cursor-pointer
          "
        >
          😺 Meow
        </button>
      </form>
      <form
        action=/my-event
        method=POST
      >
        <input type="hidden" name="name" value="Moo">
        <button
          class="
            margin-bottom1
            padding-top1
            padding-right2
            padding-bottom1
            padding-left2
            font-size1
            font-weight-500
            color-light
            color-purple-active
            border-radius-pill
            border-solid
            border-color-light
            background-color-transparent
            background-color-light-active
            cursor-pointer
          "
        >
          🐮 Moo
        </button>
      </form>
    </div>
    <p>
    Now go check out the click tracking in your app's <a class="color-light font-weight-500" href="https://begin.com/forward/data">Begin Data console →</a>
    </p>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

To sum up the pattern shown here, we have a web form element that POSTs data to a Lambda function. The data is then published to an SNS Topic which is processed by an event function that is subscribed to the same SNS Topic.

Top comments (0)