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

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

1. Clone or fork the repository

2. Check out the code

3. 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.

4. Create an Email API using SendGrid or any other mail api you want to use, using SendGrid you can get free API to send up to 40k emails.

5. 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('[email protected]'); //Add your email here
   

6. Navigate into OpenWhiskAction folder

     $ cd OpenWhiskAction
   

7. Create an action called mailAction from the action.js source file

     $ wsk action create OpenWhiskContact action.js
   

8. 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
   

9. 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

10. Done, with that in place, you should be ready to go to host the code on GitHub.

11. Commit the code to GitHub

12. 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/

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.