JavaScript

Application Programming Interfaces - part 1

Application Programming Interfaces or API allow applications to communicate with one another. The API is not the database or even the server, it is the code between them.

Web based APIs return data in response to a request made by a client. They allow us to get data from outside sources

API is simply some software that sends information back and forth between a website or app and a user

Why API?

API makes your life easy. If you want a collection of all the instagram posts, that has a hastag called "food", then you can email instagram and get a JSON file of all the images, text, user and so on but what if another user used the hashtag?
Then it will not be updated, because they send you a email with a JSON file.
What if they sent you a link with an JSON file, that will be updated every day? Wouldn't that be easy?
Of course! It is called an API.

  • It can provide easy syntax to complex code
  • It can extend the functionality of the browser
  • It can greatly simplify complex functions

Let’s say you wanted to sell products from Amazon on your site. You could build an entire architecture to do it. But that would take a ton of time and effort. Plus whenever Amazon updated their site you’d have to do it all over again. Instead Amazon will provide you with their API. You simply place the API in your code. Then when the price changes it changes on your site. It is displayed correctly. If Amazon changes their site in any way it’s updated on your end.

Who make them?

Any person or organization that collects data might have an interest in making that data available for use by a different app.

Even virk.dk has an API. You can find it here

Search: erhvervsakademi kolding

WHo use them?

US we do! developers!

Types of API Call

APIs allow different systems to communicate with each other. It lets a mobile app talk to a social network, or a payments service work the same way across the web, TV, mobile and other platforms.

REST

is web services does not use protocol other than HTTP. Your request has to be specified by Url, Http Verb (get, post, put, delete, etc.) and http headers only.

SOAP

is a Simple Object Access Protocol. This is a messaging protocol that’s often used in older or enterprise software systems, and usually returns XML.

Types of REST

GET

Is used if you want to list your drafts or want to read a specific draft

POST

Is used if you want to create a draft or want to Want to update your draft

DELETE

Is used if you want to delete your draft

APi and JavaScript

Your code interacts with APIs using one or more JavaScript objects, which serve as containers for the data the API uses.

{
"count": 1118,
"next": "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
"previous": null,
"results": [
{
"name": "bulbasaur",
"url": "https://pokeapi.co/api/v2/pokemon/1/"
},
{
"name": "ivysaur",
"url": "https://pokeapi.co/api/v2/pokemon/2/"
},
{
"name": "venusaur",
"url": "https://pokeapi.co/api/v2/pokemon/3/"
},
...

API data from a site

We already know how to import JSON from our local computer, but can we import files or webpages?

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest();
// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
request.onload = function () {
// Begin accessing JSON data here
var data = JSON.parse(this.response);
console.log(data);
};
// Send request
request.send();

How can we insert the data?

We know how to fetch it, but how can we whow it on the site?

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest();
// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
request.onload = function () {
// Begin accessing JSON data here
var data = JSON.parse(this.response);
let movieArticle = document.getElementById("movie");
let heading = document.createElement("h4");
let p = document.createElement("p");
heading.innerHTML = data[0].title;
p.innerHTML = "Director: " + data[0].producer;
movieArticle.appendChild(heading);
movieArticle.appendChild(p);
};
// Send request
request.send();

API - part 2

Go to this github