MESG Live Coding Session - Subscription App

static-index.html

<strong>Welcome</strong>

static-subscribe.html

<form id="subscription">
    <label for="email">Give me your email:</label>
    <input id="email" name="email" value="">
    <input type="submit" value="Subscribe!">
</form>

<script>
var formSelector = document.getElementById("subscription")
var emailSelector = document.getElementById("email")

formSelector.addEventListener("submit", (event) => {
    event.preventDefault();

    var req = new XMLHttpRequest()

    req.addEventListener("load", (event) => {
        alert('subscribed!');
    });

    req.addEventListener("error", (event) => {
        alert('oops! something went wrong.')
    })

    req.open("POST", "http://localhost:2300/api/subscribe"
    req.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
    req.send(JSON.stringify({ email: emailSelector.value }))
});
</script>

subscription.js

// services used in this app:
// https://github.com/ilgooz/service-http-server
// https://github.com/mesg-foundation/service-email-sendgrid
// https://github.com/mesg-foundation/service-influxdb

const mesg = require('mesg-js').application()
const path = require('path')
const fs = require('fs')

const sengridAPIKey = 'YOUR_KEY_GOES_HERE_:)'

mesg.listenEvent({
    serviceID: 'http-server',
    eventFilter: 'request'
})
    .on('data', (event) => {
        const data = JSON.parse(event.eventData)

        switch (data.method) {
        case 'GET':
            serveStatic(data)
            break;

        case 'POST':
            serveAPI(data)
            break;
        }
    })
    .on('error', (err) => {
        console.error('error while listening for request event:', err)
    })

function serveAPI(data){
    const email = JSON.parse(data.body).email
    
    const apiResponse = mesg.executeTask({
        serviceID: 'http-server',
        taskKey: 'completeSession',
        inputData: JSON.stringify({
            sessionID: data.sessionID,
            mimeType: 'application/json',
            code: 202,
            content: JSON.stringify({ email: email })
        })
    })

    const sendingEmail = mesg.executeTask({
        serviceID: 'email-sendgrid',
        taskKey: 'send',
        inputData: JSON.stringify({
            apiKey: sengridAPIKey,
            from: 'noreply@mesg.com',
            to: email,
            subject: 'You just subscribed to MESG!',
            text: `You'll hear from us!`
        })
    })

    const saveMetric = mesg.executeTask({
        serviceID: 'influxdb',
        taskKey: 'write',
        inputData: JSON.stringify({
            measurement: 'new_subscriptions',
            fields: { count: 1 },
            tags: { email: email }
        })
    })

    Promise.all([apiResponse, sendingEmail, saveMetric])
        .then(() => {
            console.log('a new subscription made for:', email)
        })
        .catch((err) => {
            console.error('subscription is failed with err:', err)
        })
}

function serveStatic(data) {
    const name = data.path == '/' ? 'index' : data.path.split('/')[1]
    const filePath = path.resolve(__dirname, 'static-'+name+'.html')

    try {
        const content = fs.readFileSync(filePath, 'utf8')

        mesg.executeTask({
            serviceID: 'http-server',
            taskKey: 'completeSession',
            inputData: JSON.stringify({
                sessionID: data.sessionID,
                mimeType: 'text/html',
                content: content
            })
        }).catch((e) => {
            console.error('error while sending a response to http request:', e)
        })
    } catch(e) {
        console.log('file not found for:', name)
    }
}

to deploy and start services

$ mesg-core service deploy https://github.com/ilgooz/service-http-server
$ mesg-core service deploy https://github.com/mesg-foundation/service-email-sendgrid
$ mesg-core service deploy https://github.com/mesg-foundation/service-influxdb

$ mesg-core service start http-server
$ mesg-core service start email-sendgrid
$ mesg-core service start influxdb

to run the application

• download three files in the gist and install mesg-js via npm and then run subscription.js with node!

usage

• go to http://localhost:2300/subscribe and submit with an email to create a new subscription.
• go to http://localhost:3000 to create and see subscription graphs via Grafana.

flow