How-tos

Form Processing With IBM Bluemix OpenWhisk

Share this post:

OpenWhisk Contact application

The OpenWhiskContact application is a simple Angular.js form processing app that shows how a form can be processed without the need of any backend, this is by using the IBM OpenWhisk Serverless architecture where an action is created then exposed as an API and then used in the Angular app.

The Angular app has some cool features out of the box, things like popups, messages, and validations, all in which can be reused. The Angular app is responsible for taken the user data, then make a POST request to the OpenWhisk API on Bluemix.

On the other side, OpenWhisk action is created to handle the request and process the form by using SendGrid email client to send the emails, this shows how easily actions can be created and used.

Live App

See live running link here: https://ibm-bluemix.github.io/openwhisk-contact/

For many JavaScript heavy applications, OpenWhisk can be super efficient and beneficial to use for many reasons, a good example of this would be the IBM-Bluemix GitHub.io page, the IBM-Bluemix GitHub.io page is a simple Angular app hosted on GitHub where there is no backend, in such case OpenWhisk can be super handy when needing to process forms and other backend processing. instead of having the backend running at all time for just processing some forms when needed, with OpenWhisk the action is only fired when needs to be fired, this means that we don’t need the backend to run when it shouldn’t, this can save both costing and overhead of server management.

Note: the IBM-Bluemix GitHub.io site is a well-maintained, centralized, curated collection of open sample applications built using Bluemix and Bluemix services. The source code for this example is taken from the IBM-Bluemix GitHub.io page, be sure to check it out for finding great Bluemix samples.

Built using the IBM Bluemix, the application uses:

  • IBM Bluemix OpenWhisk to host the API
  • Angulrs.js for frontend
  • SendGrid mail client

No runtime to deploy, no server to manage

email

Application Requirements

  • IBM Bluemix account. Sign up for Bluemix, or use an existing account.
  • SendGrid email client, sign up for free and get your token
  • GitHub Pages to host the frontend

Running the app on top of GitHub Pages and OpenWhisk

Step 1) Setup  

Step 2) Create SendGrid API and Edit the code 

  • Create an Email API using SendGrid or any other mail client, using SendGrid you can get free API to send up to 40,000 emails.
  • Edit the OpenWhiskAction/action.js file, add your SendGrid API key and your email address to which you want to receive the emails. Save the file, next we will create the OpenWhisk Action.
let SG_KEY = 'ADD SendGrid API Here'; //SendGrid API Key
let to_email = new helper.Email('your-email@gmail.com'); //Add your email here

Step 3) Create OpenWhisk Action 

  • Navigate into OpenWhiskAction folder
      $ cd OpenWhiskAction
  • Create an action called mailAction from the action.js source file
      $ wsk action create OpenWhiskContact action.js
  • Expose the action created “mailAction” as an API and keep note of the API endpoint you get in the terminal
     $ wsk api-experimental create /OpenWhiskContact /api/v1 post OpenWhiskContact --annotation web-export true
  • Add your OpenWhisk API from step 8 to the requestController.js file located in /app/controllers/requestController.js
      var API_URL = 'Your OpenWhisk API';

    Here is an example of a OpenWhisk API: https://b4651037-d05a-4b7d-ab46-1e9a1abc096f-gws.api-gw.mybluemix.net/OpenWhiskContact/api/v1

Step 4) Host the code on GitHub

  • Commit the code to GitHub
  • Create a new branch called gh-pages, GitHub will enable GitHub Pages when “gh-pages” branch is created with all the code.

githubFull

Done, see the running application on GitHub: https://ibm-bluemix.github.io/openwhisk-contact/

Useful OpenWhisk Commands

Commands Description
$ wsk –help Wsk help to find available commands
$ wsk activation poll Useful for troubleshooting to view logs and errors
$ wsk action create ‘Action_Name’ ‘Action_File’ To create OpenWhisk action
$ wsk action list list all OpenWhisk actions
$ wsk api-experimental create /’Api_Name’ /’Api_Path’ post ‘Action_Name’ Expose action as a API
$ wsk api-experimental list List all API’s

 

More detailed instructions on how to deploy this app with Bluemix are available GitHub.

If you have feedback, suggestions, or questions about this post, please reach out to me on Twitter: @twanawebtech

 

Additional information

For additional information about on IBM OpenWhisk, consult the following links:

GitHub repo for this article 
Capture audience feedback with IBM Bluemix OpenWhisk
OpenWhisk Docs

Full-Stack Software Developer & Developer Advocate at IBM Cloud

More How-tos stories
May 3, 2019

Kubernetes Tutorials: 5 Ways to Get You Building Fast

Ready to start working with Kubernetes? Want to build your Kubernetes skills? The five tutorials in this post will teach you everything you need to know about how to manage your containerized apps with Kubernetes.

Continue reading

May 3, 2019

Using Portworx to Deploy and Manage an HA MySQL Cluster on IBM Cloud Kubernetes Service

This tutorial is a walkthrough of the steps involved in deploying and managing a highly available MySQL cluster on IBM Cloud Kubernetes Service.

Continue reading

May 2, 2019

Kubernetes v1.14.1 Now Available in IBM Cloud Kubernetes Service

We are excited to announce the availability of Kubernetes v1.14.1 for your clusters that are running in IBM Cloud Kubernetes Service. IBM Cloud Kubernetes Service continues to be the first public managed Kubernetes service to support the latest upstream versions from the community.

Continue reading