March 30, 2017 | Written by: Twana Daniel
Categorized: Compute Services | How-tos | Open Source
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.
See live running link here: https://ibm-bluemix.github.io/openwhisk-contact/
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
- 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('firstname.lastname@example.org'); //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:
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.
Done, see the running application on GitHub: https://ibm-bluemix.github.io/openwhisk-contact/
Useful OpenWhisk Commands
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
For additional information about on IBM OpenWhisk, consult the following links:
GitHub repo for this article
Capture audience feedback with IBM Bluemix OpenWhisk