Web app: Polling for dinner

A web-based serverless polling app using Skygear as cloud database.

External libraries

Using Skygear as Backend
Using Chart.js
Using Flat UI Free

Guide

This guide will show you how to build this app using the simplest with HTML5 and Skygear JavaScript SDK.

To get a easier start, you can download

Installing JavaScript SDK

We will install Skygear JS SDK via CDN.

<script src="https://code.skygear.io/js/polyfill/latest/polyfill.min.js"></script>
<script src="https://code.skygear.io/js/skygear/latest/skygear.min.js"></script>

Setting up the endpoint

  skygear.config({
    'endPoint': 'https://<appname>.skygeario.com/',
    'apiKey': '<APIKEY HERE>',
  }).then(() => {
    console.log('skygear container is now ready for making API calls.');
    updateAppView();
    if (skygear.auth.currentUser) {
      startAutoReload();
    }
  }, (error) => {
    console.error(error);
  });

Authenticate users

Document for User Authentication Basics

Create a signup page

function signup (username, password, passwordConfirm) {
  if(checkSignupInfo(username, password, passwordConfirm)) {
    skygear.auth.signupWithUsername(username, password).then((user) => {
      console.log(user); // user object
      swal({
        title: "Welcome",
        text: "Thanks for signing up!",
        type: "success",
        confirmButtonText: "Next"
      });

    }, (error) => {
      swal({
        title: "Error!",
        text: "Hey, "+error.error.message,
        type: "error",
        confirmButtonText: "Okay"
      });
    });
  }
}

Create a login page

function login (username, password) {
  skygear.auth.loginWithUsername(username, password).then((user) => {
    console.log(user); // user object
  }, (error) => {
    console.error(error);
    swal({
      title: "Error!",
      text: "Hey, "+error.error.message,
      type: "error",
      confirmButtonText: "Okay"
    });
  })
}

Cast a vote

Cast a vote and save the record in the cloud

You can consider casting a vote as a simple record saving task. Here is the exact breakdown of the steps:

Create a Vote record
Save the record to the cloud database
Get the callback and update the layout

You can imagine that would be API endpoints and ajax request between your app and the server. Alternatively, we often use Backbone.js to manage this kind of data model.

Using the Skygear CloudDB, you will be encapsulated from the underlying layer - no more worry about the requests and API endpoints. You just need to deal with the native objects.

You save the object. You query a list of objects.

Code:

// TODO: Cast a vote here

const vote = new Vote({
  choice: choice
});

skygear.publicDB.save(vote).then(function(){
  reloadChart();
  skygear.pubsub.publish('voted',{choice:vote.choice});
});

How can I retrieve the result?

Query and display the poll result from cloud database

Query from cloud database

Get the result in real-time!

Get real-time polling result without refreshing

Skygear Pubsub

Subscribing to an event

skygear.on('ping', (data) => {
  console.log(data);
});

Publishing an event

skygear.on('ping', (data) => {
  console.log(data);
});

skygear-demo/web-dinnerpoll