skygear-demo / web-dinnerpoll

A single page Skygear web app to demonstrate dinner polling

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

Sign up a user

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

Login a user

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:

1. Create a Vote record
2. Save the record to the cloud database
3. 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);
});

Resources

• [Repo] https://github.com/skygear-demo/web-dinnerpoll
• [Demo] https://skygear-demo.github.io/web-dinnerpoll
• [Docs] https://docs.skygear.io

web-dinnerpoll's Issues

Upgrade to Skygear v1.1

The pubsub is not working on refresh after login

The step to reproduce

1. BrowserA login as userA, browserB login as userB
2. Vote by userA is deliver via web socket to userB, and vice versa.
3. Refresh browserA.
4. Vote by userA is deliver via web socket to userB, but not vice versa. UserA don't get userB vote via websocket.