Vefþróun@Tækniskóli
← All projects/4 - Connecting to the World/Javascript - API Consumption

Guide: Javascript - API Consumption

Description

One of the most striking aspects of modern web applications is their seamless interaction with external systems. For example, it's very natural to log-in to a completely new system using your Facebook or Github account, or to show Instagram pictures in a website, or to save data in an external CMS such as Prismic that will then offer that same data in a nice format for our applications to display. These are just a few examples, not to mention that our own systems are, more often than not, composed of an internal API server and a front-end side.

In this Guide you will explore this fundamental subject to becoming a professional web developer.

Knowledge

  • Understand what is JSON
  • Understand what is the client-server architecture
  • Understand the concept of Promises

Skills

  • Be able to use JSON to transport data across different systems
  • Be able to use the fetch API in Javascript
  • Be able to use Promises in Javascript
  • Be able to use Async functions in Javascript
  • Be able to debug Javascript code using both the console and VSCode (or similar)

Topics

  • JSON
    • What is JSON?
    • Parse / Stringify
  • Client-server architecture
  • Fetch API
  • ES6 Promises & Async-Await
    • Resolving
    • Waiting for wall Promises
    • Error handling
  • Error handling / try...catch...finally
  • Debugging
    • console.log
    • Browser debuggers

Action Points

  • Discover what JSON is and how to parse/stringify in Javascript
  • Watch a video on client-server architecture to get the basics of it
  • Learn the fetch API in Javascript (pro tip: make use of Mockaroo to create endpoints)
  • Find out how to use Promises in Javascript
  • Learn what are Async functions in Javascript
  • Learn how to use try/catch blocks in Javascript
  • Learn how to use a debugger in VSCode (or similar) to debug your websites

Deliverable: API-centered application