website/webdevelopment/introductiontowebapis/whatisanapi.js

import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax, menu, global_menu } from '/scripts/import.js';
import { local_menu } from '/scripts/webdev.js';

const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");

heading.append(addTitle("Introduction to Web APIs"));
heading.append(addParagraph("Andrew Probert - LinkedIn Learning - March 2023"));
heading.append(addParagraph("Chapter 1 - What is An API?"));

main.append(addHeader("APIs IN PLAIN ENGLISH"));
main.append(addParagraph("Using an API can be similar to ordering something at a restaurant. With an API you ask for data via some kind of API protocol and the data is returned to you. Pretty much, like in a restaurant, this gives you the advantage of not having to produce the data (or food)); yourself. You also don't need to know how the data is produced or even how to the API delivers the data. You just need to know how to request it. "));
main.append(addHeader("THE REQUEST AND RESPONSE CYCLE"));
main.append(addParagraph("You can think of requesting data from an API as being a little bit like asking a question. There are two parts to the process, and you could think of these two parts as being like asking a question and getting an answer. In API terms we call this the request and the response. "));
main.append(addParagraph("We call this the request and response cycle. The request is made through some sort of client software and typically this will be a browser (although it can be any suitable client such as, for example, postman or Visual Studio code));. The response comes from a server. "));
main.append(addParagraph("There are different methods you can use with the request but a lot of the time you are just asking the server to return some data and you would normally do this with a GET request. "));
main.append(addParagraph("GET is an HTTP action, these are usually called HTTP verbs and there are others with generally fairly descriptive and easy to understand names. This includes the following: "));
main.append(addInset("POST"));
main.append(addParagraph(" POST is used to add data to the server. It can be easy to confuse POST with PUT because they perform quite similar tasks. The difference is that with POST the data is new data whereas with PUT you are updating or modify existing data. You might think of this as being like the commands insert and update in SQL. "));
main.append(addInset("PUT "));
main.append(addParagraph("PUT, as mentioned above, is used to update existing data on the server. However you should be aware of the fact that sometimes the two are used interchangeably. For example, you might find POST being used to update data on the server and PUT being used to add data to the server. This is really determined by the API developer and how they implement the API's methods. "));
main.append(addInset("DELETE"));
main.append(addParagraph("DELETE Is fairly straightforward. It is used to delete data from the server. "));
main.append(addParagraph("There are also other HTTP verbs but these are the most commonly used and you can find information on the other verbs that are available on the Internet if you are interested. "));
main.append(addParagraph("If you have sent a request to a server and it is correctly expressed, you can expect the server to provide a response that includes the data that you requested. It will also provide a response code. This is the HTTP response and is represented by a number. The possible responses are grouped so for example, if the status code starts with a 2 (for example, 200));, this indicates a successful request. "));
main.append(addParagraph("A Response starting with a three indicates a redirect error. A response starting with a four indicates an error from the client such as the client requesting a resource that doesn't exist. A good example of this is the famous 404 error which typically means page not found so you will generally get a response like this if the URL is incorrect. "));
main.append(addParagraph("An error from the server is usually represented by an HTTP response code starting with a five. "));
main.append(addHeader("WHAT IS JSON? "));
main.append(addParagraph("When data is being returned this will usually be in one of two formats: JSON or XML. JSON is a popular choice'cause it makes the data really easy to use in websites. JSON stands for JavaScript Object Notation and the data returned in this format can easily be used with JavaScript as if these were JavaScript objects. "));
main.append(addParagraph("JSON data is made up of key-value pairs.  The key is always a string so it will always be in double quotes.  The value can be a string (in which case, you would also put it in double quotes, but it doesn’t have to be.  It could be an integer for example. A colon is used to separate the key and the value and commas are used to separate the key-value pairs. "));
main.append(addParagraph ("The following is an example of some JSON data from an API we will be looking at in this course and you can find this at <a href='http://hplussport.com/api/products'What's this??????</a>."));
main.append(addInsetList(["{\"id\":\"259\"","\"name\":\"Raspberry Mineral Water\"","\"description\":\"An 8-ounce serving of our refreshing H+ Sport raspberry mineral water fulfills a day's nutritional requirements for over 12 vitamins and minerals.\"","\"price\":\"2.80\"","\"image_title\":\"mineral-water-raspberry_600px\"","\"image\":\"https://hplussport.com/wp-content/uploads/2015/12/mineral-water-raspberry_600px.png\"}"]));



addSidebar("webdev");