Skygear Quick Demo

A super simply demo for Skygear

by Ben Cheng

HTML

<title>Skygear Quick Demo</title>

<!-- Install Skygear JS SDK by 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>

<body>
  <h3>
Skygear Quick Demo
</h3>
  <p>This is a simple demo to illustrate how to use Skygear JS SDK to sign up a user and save a new record.</p>
  <p>
    Steps to try it:
  </p>
  <ol>
    <li>Fill in the endPoint and apiKey in the Javascript with your accounts details</li>
    <li>Try to sign up a new account to learn this API works: <pre>skygear.auth.signupWithUsername(username, password)</pre> </li>
    <li>Try to save a new record to learn how this API works: <pre>skygear.publicDB.save(record)</pre></li>
  </ol>
  <p>
    Note: Please open developer console to see the logs in action.
  </p>
  <p>
    On Windows: Ctrl + Shift + J
    <br>On Mac: Cmd + Opt + J
  </p>
  <hr>
  <h3>Sign up a user</h3>
  <form action="#" id="signup-form">
    <div>
      <label for="signup-name">Username:</label>
      <input type="text" value="" placeholder="Enter User name" id="signup-name" />
    </div>
    <div>
      <label for="signup-pass">Password:</label>
      <input type="password" value="" placeholder="Password" id="signup-pass" />
    </div>
    <div>
      <input type="submit" id="signup-button" value="Sign up">
    </div>
  </form>

  <hr>

  <h3>Save record</h3>
  <form action="#" id="create-record-form">
    <div>
      <label for="content-input">Content:</label>
      <input type="text" value="" placeholder="Content" id="content-input" />
    </div>
    <div>
      <input type="submit" value="Save record">
    </div>
  </form>
</body>

JavaScript

skygear.config({
  'endPoint': 'https://bentest20170818.skygeario.com/', // Endpoint
  'apiKey': '08d6c16131fd442d8c725e702a0eaee9', // API Key
}).then(() => {
  console.log('Skygear container is now ready for making API calls.');
}, (error) => {
  console.error(error);
});

document.getElementById('signup-form').addEventListener('submit', function(evt) {
  evt.preventDefault();
  var username = document.getElementById("signup-name").value;
  var password = document.getElementById("signup-pass").value;

  console.log('Signup pressed: ' + username + '/' + password);

  skygear.auth.signupWithUsername(username, password)
    .then((user) => {
      console.info(`Created user "${user.id}" for "${username}".`);
    }, (err) => {
      console.error(`Unable to create user for "${username}"`, err);
      return err;
    });
});

document.getElementById('create-record-form').addEventListener('submit', makeNewRecord);

function makeNewRecord(evt) {
  evt.preventDefault();
  var text = document.getElementById("content-input").value;
  const Note = skygear.Record.extend('note');

  var itemNo = new skygear.Sequence();
  var record = new Note({
    content: text,
    itemNo: itemNo
  });

  console.log("Saving record")

  skygear.publicDB.save(record).then((result) => {
    let savedRecord = result

    console.log(result);

    var log = 'Saved record! ' +
      'item ' + savedRecord.itemNo +
      ': ' + savedRecord.content;

    alert(log);
  }, (error) => {
    alert('error saving the record');
    console.error(error);
  });
}