Forms processing with IBM Bluemix OpenWhisk

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 api to send the emails, this shows how easily actions can be created and used.

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 featured samples.

Built using the IBM Bluemix, the application uses:

IBM Bluemix OpenWhisk to host the API
Angulrs.js for frontend
SendGrid email api

No runtime to deploy, no server to manage

Application Requirements

IBM Bluemix account. Sign up for Bluemix, or use an existing account.
SendGrid email api, sign up for free 30 day trial and get your api key
GitHub Pages to host the frontend

Running the app on top of GitHub Pages and OpenWhisk

Clone or fork the repository
Check out the code
Ensure your OpenWhisk command line interface is properly configured with:

wsk list

This shows the packages, actions, triggers and rules currently deployed in your OpenWhisk namespace.

Create an Email API using SendGrid or any other mail api you want to use, using SendGrid you can get 30 day free trial API to send up to 40k 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
```
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
Done, with that in place, you should be ready to go to 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.

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

Code Structure

Source Files	Description
action.js	Create OpenWhisk using SendGrid
requestController.js	Angular controller, making a post request to the OpenWhisk endpoint api, passing all the form data.
app.js	Angular entry point, loading angular modules {ui.bootstrap} {ui.bootstrap.modal} {ngSanitize} {ngDialog} {ngMessages}

License

See License.txt for license information.

This project is a sample application created for the purpose of demonstrating a serverless app with OpenWhisk. The program is provided as-is with no warranties of any kind, express or implied.

IBM-Cloud / openwhisk-contact