Giter VIP home page Giter VIP logo

openwhisk-emoting's Introduction

Capture audience feedback with a serverless app

Build Status Coverage Status

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.

emoting

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 :)

Alt text

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:

    Deploy To Bluemix

  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.

openwhisk-emoting's People

Contributors

l2fprod avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.