Capture audience feedback with a serverless app

You are giving this presentation and as attendees leave the room you'd like to get a quick feel about how you did. Emoting mimics the smiley terminals you may see at the airport security or whenever you are queueing somewhere.

Overview

Built using the IBM Bluemix, the application uses:

• IBM Bluemix OpenWhisk to host the backend
• Cloudant to persist the data
• GitHub Pages to host the frontend

No runtime to deploy, no server to manage :)

architecture digraph G { node [fontname = "helvetica"]; rankdir=LR; user -> github; github -> openwhisk [label="API Calls"]; openwhisk -> cloudant; github [shape=circle style=filled color="%234E96DB" fontcolor=white label="GitHub Pages"]; openwhisk [shape=circle style=filled color="%2324B643" fontcolor=white label="OpenWhisk"]; cloudant [shape=circle style=filled color="%234E96DB" fontcolor=white label="Cloudant"]; } architecture

Application Requirements

• IBM Bluemix account. Sign up for Bluemix, or use an existing account.

Deploying OpenWhisk Emoting (almost) automatically in Bluemix

OpenWhisk Emoting comes with a toolchain you can use to deploy the solution with few clicks. If you want to deploy it manually, you can skip this section.

1. Ensure your organization has enough quota for one service.

2. Click Deploy to Bluemix to start the Bluemix DevOps wizard:

   

3. Select the GitHub box.

4. Decide whether you want to fork/clone the OpenWhisk Emoting repository.

5. If you decide to Clone, set a name for your GitHub repository.

6. Select the Delivery Pipeline box.

7. Select the organization and space where you want to deploy the app. Keep US South for the region as OpenWhisk is only available there today.

   ⚠️ Make sure the organization and the space have no space in their names.

8. Click Create.

9. Select the Delivery Pipeline named openwhisk-emoting.

10. Wait for the Deploy job to complete.

11. When the job complete, look at its log and make note of the API Gateway endpoint where the OpenWhisk API has been deployed. You should see log statements like:

    ok: created API /emoting/1/questions PUT for action /_/emoting/questionCreate
    https://service.us.apiconnect.ibmcloud.com/gws/apigateway/api/abcdeff9d9300320200dhcdbcddc/emoting/1/questions
    ok: created API /emoting/1/questions GET for action /_/emoting/questionRead
    https://service.us.apiconnect.ibmcloud.com/gws/apigateway/api/abcdeff9d9300320200dhcdbcddc/emoting/1/questions
    ok: created API /emoting/1/stats GET for action /_/emoting/questionStats
    https://service.us.apiconnect.ibmcloud.com/gws/apigateway/api/abcdeff9d9300320200dhcdbcddc/emoting/1/stats
    ok: created API /emoting/1/ratings PUT for action /_/emoting/ratingCreate
    https://service.us.apiconnect.ibmcloud.com/gws/apigateway/api/abcdeff9d9300320200dhcdbcddc/emoting/1/ratings
    

    https://service.us.apiconnect.ibmcloud.com/gws/apigateway/api/abcdeff9d9300320200dhcdbcddc/emoting/1 is the API Gateway endpoint in this example.

12. Checkout the code from your own openwhisk-emoting repository.

13. Edit docs/js/emoting.js and change the apiUrl value to your API base path.

14. Commit the docs/js/emoting.js file.

15. Enable GitHub Pages on your repo. When doing so, select the option to use the docs folder in the master branch.

    

Deploying OpenWhisk Emoting manually in Bluemix

1. Clone or fork the repository https://github.com/IBM-Cloud/openwhisk-emoting

2. Checkout the code

3. Ensure your OpenWhisk command line interface is property configured with:

   wsk list
   

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

4. Create a Cloudant service in IBM Bluemix

5. Copy the file named template-local.env into local.env

   cp template-local.env local.env
   

6. Get the Cloudant service credentials from the Bluemix dashbaord and replace placeholders in local.env with corresponding values (url, username and password). These properties will be injected into a package so that all actions can get access to the database.

7. Deploy the actions to OpenWhisk

   ./deploy.sh --install
   

8. Expose the OpenWhisk actions as REST endpoints

   ./deploy.sh --installApi
   

   You may need to use wsk bluemix login so that the wsk command line can create the API in Bluemix.

9. Make note of your API Gateway base path in the output. The base path looks like https://service.us.apiconnect.ibmcloud.com/gws/apigateway/api/abcdeff9d9300320200dhcdbcddc/emoting/1.

10. Edit docs/js/emoting.js and change the apiUrl value to your API base path.

11. Commit the docs/js/emoting.js file.

12. Enable GitHub Pages on your repo. When doing so, select the option to use the docs folder in the master branch.

    

Running the app locally

1. Follow the previous steps to deploy the OpenWhisk actions.

2. Make sure to edit docs/js/emoting.js

3. Install dependencies

   npm install
   

4. Start the local web server

   npm start
   

5. Point your browser to http://127.0.0.1:8080

Code Structure

File	Description
question.create.js	Creates a new question.
question.read.js	Returns the text of a question based on its ID.
question.stats.js	Returns results about a given question.
rating.create.js	Called when a user taps on one of the rating.
deploy.sh	Helper script to install, uninstall, update the OpenWhisk actions used by the application.

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.