Introduction to Promises

0_JS_Promise_Workshop.md

Kintone x Intro to JavaScript Promises Workshop

Thank you for attending our Kintone x JS Promises workshop!

Here are steps you get you started with our workshop:

Step 1 - Download the Files

Click here or the button on the upper right corner for all the code & slides you need for our workshop!

Step 2 - Getting your FREE Kintone Database

Part A - Sign Up for Kintone Developer Account (Website)

🌐 bit.ly/KDP_signup

• ⚠ Do NOT use Safari
• ⚡Accept Cookies First
• ✅ Use Chrome & Firefox

Part B - Create a Kintone Subdomain (Environment)

🗂️ bit.ly/K_DevLic

• ⚡ Only use lowercase, numbers, & hyphens in your subdomain
• ⚠ Do not use uppercase nor special characters

Quick video on the sign-up process

https://youtu.be/Gzz8SbTuoFg

Step 3 - Open Chrome Developer Console

Mac	Windows, Linux, & Chrome OS
Command + Option + J	Control + Shift + J

Open the Console panel to view logged messages or run JavaScript from Chrome.

To open DevTools from Chrome's main menu:
Click Customize and control Google Chrome and then select More Tools > Developer Tools.

Step 4 - Open a Code Editor

Text editors, also called code editors, are applications used by developers to write code. They can highlight and format your code so that it's easier to read and understand.

We recommend Visual Studio Code!

1_asynchronous_a.js

// Hands-on: Asynchronous Processing A
// Good morning, what shall we wear today?

function wearShirt(color) {
  console.log(`Let's wear a(n) ${color} t-shirt!`);
}

function wearUnderwear(color) {
  setTimeout(function () {
    console.log(`Let's wear ${color} underwear!`);
  }, 1000);
}

function wearJeans(color) {
  console.log(`Let's wear ${color} jeans!`);
}

wearShirt('orange');
wearUnderwear('white');
wearJeans('red');

/* Expected Result:
Let's wear a(n) orange t-shirt!
Let's wear red jeans!
undefined
Let's wear white underwear!
*/

2_asynchronous_b.js

// Hands-on: Asynchronous Processing B
// Alright, time to get dressed!

let human = ['Naked'];

function wearShirt(color) {
  human.push('T-Shirt');
  console.log(`You are now wearing a(n) ${color} t-shirt!`);
}

function wearUnderwear(color) {
  setTimeout(function () {
    human.push('Underwear');
    console.log(`You are now wearing ${color} underwear!`);
    if (human[human.length - 2] == 'Jeans') {
      // Check if you have jeans on before putting on the underwear.
      console.log('Oh no! You are wearing underwear over your jeans!');
    }
  }, 1000);
}

function wearJeans(color) {
  human.push('Jeans');
  console.log(`You are now wearing a pair of ${color} jeans!`);
  if (human[human.length - 2] == 'Underwear') {
    // Check if you have underwear on before putting on the jeans.
    console.log('You are looking sharp this morning!');
  }
}

wearShirt('orange');
wearUnderwear('white');
wearJeans('red');

/* Expected Result:
You are now wearing a(n) orange t-shirt!
You are now wearing a pair of red jeans!
undefined
You are now wearing white underwear!
Oh no! You are wearing underwear over your jeans!
*/

3_promise.js

// Hands-on: Promises
// Let's fix the asynchronous problem with Promise objects!

let human = ['Naked'];

function wearShirt(color) {
  return new Promise(function (resolve, reject) {
    human.push('T-Shirt');
    if (human.length === 2) {
      resolve(`Step A finished. You are now wearing a(n) ${color} t-shirt!`);
    } else {
      reject('You got the order wrong');
    }
  });
}

function wearUnderwear(color) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      human.push('Underwear');
      if (human[human.length - 2] !== 'Jeans') {
        resolve(`Step B finished. You are now wearing ${color} underwear!`);
      } else {
        reject('Oh no! You are wearing underwear over your jeans!');
      }
    }, 1000);
  });
}

function wearJeans(color) {
  return new Promise(function (resolve, reject) {
    human.push('Jeans');
    if (human[human.length - 1] === 'Jeans') {
      resolve(`Step C finished. You are now wearing a pair of ${color} jeans!\nYou are looking sharp this morning!`);
    } else {
      reject('Oh no! You are wearing underwear over your jeans!');
    }
  });
}

wearShirt('orange').then(function (shirtResponse) {
  console.log(shirtResponse);
  return wearUnderwear('white');
}).then(function (underwearResponse) {
  console.log(underwearResponse);
  return wearJeans('red');
}).then(function (jeansResponse) {
  console.log(jeansResponse);
}).catch(function (error) {
  console.log(error);
});

/* Expected Result:
Step A finished. You are now wearing a(n) orange t-shirt!
Promise {<pending>}
Step B finished. You are now wearing white underwear!
Step C finished. You are now wearing a pair of red jeans!
You are looking sharp this morning!
*/

4_alert.js

// Hands-on: Alert
// Hey, are you home?

(function () {
  'use strict';
  window.alert("Hello Kintone!");
})();

5_SWAPI.js

// Hands-on: Call swapi.dev
// Get My Nerd On! Looking up R2-D2!

(function () {
  'use strict';
  const SWAPIendpoint = 'https://swapi.dev/api/people/?';
  const SWAPIparams = 'search=R2-D2';
  const SWAPIurl = SWAPIendpoint + SWAPIparams;

  // Star Wars API call
  let getStarWarsCharacterWithPromise = function () {
    return new kintone.Promise(function (resolve, reject) {
      kintone.proxy(SWAPIurl, 'GET', {}, {}, function (resp) {
        let jsonResp = JSON.parse(resp).results[0];
        console.log(jsonResp);
        resolve();
      }, function (err) {
        console.log(err);
        reject(err);
      });
    });
  };

  // Create a button on the Kintone Record List page
  kintone.events.on('app.record.index.show', function (event) {
    let button = document.createElement('button');
    button.textContent = 'Click Me!';
    kintone.app.getHeaderMenuSpaceElement().appendChild(button);
    button.onclick = function () {
      console.log('Start Search');
      getStarWarsCharacterWithPromise().then(function () {
        console.log('End Search');
      });
    };
    return event;
  });
})();

6_Chained_SWAPI.js

// Hands-on: Call Chained swapi.dev
// Where is R2-D2's home world anyway?

(function () {
  'use strict';
  const SWAPIendpoint = 'https://swapi.dev/api/people/?';
  const SWAPIparams = 'search=R2-D2';
  const SWAPIurl = SWAPIendpoint + SWAPIparams;

  // Star Wars API call
  let getStarWarsCharacterWithPromise = function () {
    // Get Character Details
    return new kintone.Promise(function (resolve, reject) {
      kintone.proxy(SWAPIurl, 'GET', {}, {}, function (resp) {
        let jsonResp = JSON.parse(resp).results[0];
        console.log(jsonResp);
        resolve(jsonResp);
      }, function (err) {
        console.log(err);
        reject(err);
      });
    }).then(function (resp) {
      // Get Homeworld details
      return new kintone.Promise(function (resolve, reject) {
        kintone.proxy(resp.homeworld, 'GET', {}, {}, function (respHomeworld) {
          let jsonResp = JSON.parse(respHomeworld);
          console.log(jsonResp);
          resolve(resp);
        }, function (err) {
          console.log(err);
          reject(err);
        });
      });
    }).then(function (resp) {
      // Get Species details
      return new kintone.Promise(function (resolve, reject) {
        kintone.proxy(resp.species[0], 'GET', {}, {}, function (respSpecies) {
          let jsonResp = JSON.parse(respSpecies);
          console.log(jsonResp);
          resolve(resp);
        }, function (err) {
          console.log(err);
          reject(err);
        });
      });
    });
  };

  // Create a button on the Kintone Record List page
  kintone.events.on('app.record.index.show', function (event) {
    let button = document.createElement('button');
    button.textContent = 'Click Me!';
    kintone.app.getHeaderMenuSpaceElement().appendChild(button);
    button.onclick = function () {
      console.log('Start Search');
      getStarWarsCharacterWithPromise().then(function () {
        console.log('End Search');
      });
    };
    return event;
  });
})();

Promise_Slides.pdf

Z_Appendix_Callback.js

Z_Appendix_Callback.pdf