Samples


Intro

Below we have several quick-start apps and code samples to help you get up and running in no time. These projects demonstrate the various capabilities and design of the Backbench platform. It is not intended as a finished product or solution but rather as an example of how to use our features in solving functional problems for your project, application or team. If you are new to Backbench, we recommend beginning by working through our Getting Started section.

There are many possible Use Cases and features that could be included in the samples section as we go forward. Our intention is to provide real-world examples and a kitchen-sink of features so that you can jumpstart your own implementations. We’re always interested in feedback as to what we should add next! Please let us know your thoughts regarding what is important to you.

Sending Email

In this example you will be able to send emails using backbench via Mailgun APIs.

What You'll Need:

  • Backbench account - Sign Up, the personal account will always remain free to use.
  • Mailgun account - Its free to Sign Up and you get 10000 free emails every month.
  • Codepen account - Its also free to Sign Up, or you can just fork the project to try without Sign Up too.

Backend

Prerequisites for sample app:

  1. Sign In to Backbench account.
  2. Select +, in the upper right corner to create a Bench. For example, say "SendingEmail" and select CREATE or hit Enter.

Navigate through each tabs and follow the guidelines as instructed.

...
  1. Select +, in the upper right corner to create a Module. For example, say "sendMail" and select CREATE or hit Enter.
  2. Copy and paste the code module from below.
  3. Replace YOUR_API_KEY in the pass:"key-YOUR_API_KEY" section, found in your control panel of the mailgun account.
  4. Replace the url with your API base url, found in your mailgun account or copy and paste YOUR_DOMAIN name in the url: "https://api.mailgun.net/v3/YOUR_DOMAIN/messages"
  5. Select Save.

Code module:

sendMail(message) => {

    MAILGUN_AUTH = {
        user: "api",
        pass: "key-YOUR_API_KEY"
    }

    bb:http:post({
        url: "https://api.mailgun.net/v3/YOUR_DOMAIN_NAME/messages",
        formData: message,
        auth: MAILGUN_AUTH
    });

}

sendMail:handler(req) => {

    message = "{{emailbody}}" % req.body

    response = sendMail({
            from: req.body.from,
            to: req.body.to,
            subject: req.body.subject,
            html: message
    })
    bb:log(response);
    return response.statusMessage;

}
Not required for this example
...
  1. Select Endpoints on the left panel and Click +, in the upper right corner to setup the HTTP endpoint.
  2. Give a Path name. For example, say /send and Click on the field under the tag Handler and select the module function to be assigned. For example, sendMail:handler, and select CREATE.
  3. /send                 sendMail:handler
  4. Enable CORS (Cross Origin Resource Sharing)
Not required for this example
Not required for this example
...

Following command has been used in the code module to generate logs:

bb:log(response);

Frontend

Change the HTTP endpoint in the JS tab as url: "https://<username>-<benchname>.backbench.io/send". Click RERUN (found at the right bottom of Codepen live demo) before submitting subsequent requests.

Sending SMS

In this example you will be able to send SMS using backbench via Twilio APIs.

What You'll Need:

  • Backbench account - Sign Up, the personal account will always remain free to use.
  • Twilio account - Its free to Sign Up and trial account would be sufficient to try this example. Twilio gives you one number for free to send text messages from. You can only text or call the pre-verified numbers. If you want to test with more numbers, you'll need to verify each one. The restriction is lifted when you upgrade the account.
  • Codepen account - Its also free to Sign Up, or you can just fork the project to try without Sign Up too.

Backend

Prerequisites for sample app:

  1. Sign In to Backbench account.
  2. Select +, in the upper right corner to create a Bench. For example, say "SendingSMS" and select CREATE or hit Enter.

Navigate through each tabs and follow the guidelines as instructed.

...
  1. Select +, in the upper right corner to create a Module. For example, say "sendSMS" and select CREATE or hit Enter.
  2. Copy and paste the code module from below.
  3. Replace AccountSid in the url: section, found in the Home Page of your Twilio console.
  4. Replace TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN in the auth: section, found in the Home Page of your Twilio console.
  5. Replace the TWILIO_NUMBER in the From: section, with your Twilio Number, found in the #Phone Numbers Page of your Twilio console.
  6. Select Save.

Code module:

sendSMS(message) -> {

    bb:log("Request ", message);
    bb:http:post({
        url: "https://api.twilio.com/2010-04-01/Accounts/AccountSid/Messages",
        auth: {
            username: "TWILIO_ACCOUNT_SID",
            password: "TWILIO_AUTH_TOKEN"
        },
        form: message
    });

}

sendSMS:handler(req) => {

    message = "{{smsbody}}" % req.body
    response = sendSMS({
        From: "TWILIO_NUMBER",
        To: req.body.to,
        Body: message
    })
    bb:log(response);
    return response.statusMessage;

}
Not required for this example
...
  1. Select Endpoints on the left panel and Click +, in the upper right corner to setup the HTTP endpoint.
  2. Give a Path name. For example, say /send and Click on the field under the tag Handler and select the module function to be assigned. For example, sendSMS:handler, and select CREATE.
  3. /send                 sendMail:handler
  4. Enable CORS (Cross Origin Resource Sharing)
Not required for this example
Not required for this example
...

Following command has been used in the code module to generate logs:

bb:log("Request ", message)
bb:log(response);

Frontend

Change the HTTP endpoint in the JS tab as url: "https://<username>-<benchname>.backbench.io/send". Click RERUN (found at the right bottom of Codepen live demo) before submitting subsequent requests.

URL Shortening App

In this example you will be able to make a URL shortening application using backbench.

Learning Outcomes:

  • Store and retrieve data from Memory.
  • Send HTTP status codes, set response headers and redirect to another URL.
  • Process request parameters.

What You'll Need:

  • Backbench account - Sign Up, the personal account will always remain free to use.
  • Codepen account - Its also free to Sign Up, or you can just fork the project to try without Sign Up too.

Backend

Prerequisites for sample app:

  1. Sign In to Backbench account.
  2. Select +, in the upper right corner to create a Bench. For example, say "minifyURL" and select CREATE or hit Enter.

Navigate through each tabs and follow the guidelines as instructed.

...
  1. Select +, in the upper right corner to create a Module. For example, say "minify" and select CREATE or hit Enter.
  2. Copy and paste the code module from below.
  3. Select Save.

Code module:

handler:minify(req, url) => {

    if (url && req.method == @GET) {

        // redirect to the original URL

        originalURL = bb:mem:get(url)

        if(originalURL) {

            // redirect
            status: 302,

            headers: {
                Location: originalURL
            },

            body: "Redirecting..."

        } else {

            // Not Found
            status: 404

        }

    } else if(req.method == @POST) {

        // create a new entry in memory

        shortURL = req.body.short_url,

        originalURL = req.body.url,

        if(shortURL != '' && originalURL != '') {

            if (bb:mem:get(req.body.short_url)) {

                // conflict
                status: 409

            } else {

                bb:mem:set(req.body.short_url, req.body.url),

                bb:log(shortURL + " : " + originalURL),

                return {
                    // created
                    status: 201
                }

            }

        } else {
            // Bad Request
            status: 400
        }


    } else {
        // Method Not Allowed
        status: 409
    }

}
...

Following command has been used in the code module to generate memory:

bb:mem:get(url)

bb:mem:get(req.body.short_url)

bb:mem:set(req.body.short_url, req.body.url)
...
  1. Select Endpoints on the left panel and Click +, in the upper right corner to setup the HTTP endpoint.
  2. Give a Path name. For example, say /:url? and Click on the field under the tag Handler and select the module function to be assigned. For example, minify:handler, and select CREATE.
  3. /:url?                 minify:handler
  4. Enable CORS (Cross Origin Resource Sharing)
Not required for this example
Not required for this example
...

Following command has been used in the code module to generate logs:

bb:log(shortURL + " : " + originalURL),

Frontend

Change the HTTP endpoint in the JS tab as url: "https://<username>-<benchname>.backbench.io/". Click RERUN (found at the right bottom of Codepen live demo) before submitting subsequent requests.

Protected Text App

In this example you will be able to design an application to store encrypted notes using backbench.

Learning Outcomes:

  • Create, Read, Update operations on Memory.
  • Process requests based on request's method and sending HTTP status codes.
  • Retrieve the data from route parameters..
  • Use of Cryptojs on frontend.

What You'll Need:

  • Backbench account - Sign Up, the personal account will always remain free to use.
  • Codepen account - Its also free to Sign Up, or you can just fork the project to try without Sign Up too.

Backend

Prerequisites for sample app:

  1. Sign In to Backbench account.
  2. Select +, in the upper right corner to create a Bench. For example, say "CryptoNotes" and select CREATE or hit Enter.

Navigate through each tabs and follow the guidelines as instructed.

...
  1. Select +, in the upper right corner to create a Module. For example, say "notes" and select CREATE or hit Enter.
  2. Copy and paste the code module from below.
  3. Select Save.

Code module:

handler:notes(req, id) => {

    if (id && req.method == @GET) {
        // retrieve the encrypted data
        data = bb:mem:get(id),
        if (data) {
            // send the encrypted data as response
            return data
        } else {
            return {
                // Not Found
                status: 404
            }
        }
    } else if (req.method == @POST) {
        // save the data
        bb:mem:set(id, req.body.data),
        return {
            // Created
            status: 201
        }
    } else {
        // Method Not Allowed
        status: 409
    }
} 
...

Following command has been used in the code module to generate memory:

data = bb:mem:get(id),

bb:mem:set(id, req.body.data),
...
  1. Select Endpoints on the left panel and Click +, in the upper right corner to setup the HTTP endpoint.
  2. Give a Path name. For example, say /:id? and Click on the field under the tag Handler and select the module function to be assigned. For example, notes:handler, and select CREATE.
  3. /:id?                 notes:handler
  4. Enable CORS (Cross Origin Resource Sharing)
Not required for this example
Not required for this example
Not required for this example

Frontend

Change the HTTP endpoint in the JS tab as url: "https://<username>-<benchname>.backbench.io/". Click RERUN (found at the right bottom of Codepen live demo) before submitting subsequent requests.

Social Share Counter App

In this example you will be able to design an api that retrieves number of shares of a specific website on popular social media platforms like facebook, google plus and linkedin.

Learning Outcomes:

  • Get request query parameters.
  • Sending multiple HTTP requests with custom header information, body, request method.
  • Sending json and different HTTP status as HTTP response.

What You'll Need:

  • Backbench account - Sign Up, the personal account will always remain free to use.
  • Codepen account - Its also free to Sign Up, or you can just fork the project to try without Sign Up too.

Backend

Prerequisites for sample app:

  1. Sign In to Backbench account.
  2. Select +, in the upper right corner to create a Bench. For example, say "socialsharecount" and select CREATE or hit Enter.

Navigate through each tabs and follow the guidelines as instructed.

...
  1. Select +, in the upper right corner to create a Module. For example, say "sharecount" and select CREATE or hit Enter.
  2. Copy and paste the code module from below.
  3. Select Save.

Code module:

getFbShareCount(url) => {
    return bb:http:get("http://graph.facebook.com/?id=" + url)
}

getLinkedinShareCount(url) => {
   return bb:http:get("http://www.linkedin.com/countserv/count/share?url=" + url + "&format=json")
}

getGoogleShareCount(url) => {
    return bb:http:req({
        method: "POST",
        uri: "https://clients6.google.com/rpc",
        headers: [ { name: 'content-type', value: 'application/json' } ],
        body: "[{\"method\":\"pos.plusones.get\", \"id\":\"p\", \"params\":{\"nolog\":\"true\",\"id\":\"" + url + "\",\"source\":\"widget\",\"userId\":\"@viewer\",\"groupId\":\"@self\"},\"jsonrpc\":\"2.0\",\"key\":\"p\",\"apiVersion\":\"v1\"}]"
    })
}

shares:handler(req) => {
    url = req.body.url,
    bb:log(req),
    fb = getFbShareCount(url),
    google = getGoogleShareCount(url),
    linkedin = getLinkedinShareCount(url),
    return {
        status: 200,
        json: {
            facebook: fb.body,
            google: google.body,
            linkedin: linkedin.body
        }
    }
} 
Not required for this example
...
  1. Select Endpoints on the left panel and Click +, in the upper right corner to setup the HTTP endpoint.
  2. Give a Path name. For example, say /shares and Click on the field under the tag Handler and select the module function to be assigned. For example, shares:handler, and select CREATE.
  3. /:id?                 notes:handler
  4. Enable CORS (Cross Origin Resource Sharing)
Not required for this example
Not required for this example
...

Following command has been used in the code module to generate logs:

bb:log(url)

Frontend

Change the HTTP endpoint in the JS tab as url: "https://<username>-<benchname>.backbench.io/shares". Click RERUN (found at the right bottom of Codepen live demo) before submitting subsequent requests.

Getting started with backbench