Algorithms and APIs

Working with APIs

What is an API?

• API stands for Application Programming Interface
• A set of functions that programs publish for other programs to use
• Any communication between two different programs works through APIs!

APIs in the context of Web Development

• A way of exchanging information with a backend server
• Most commonly used: REST APIs

fetch

MDN: Fetch API

              fetch('https://some-url.com')
                .then(response => {
                  // we can work with the API response now.
                });
            

Example

              fetch('https://randomuser.me/api/?nat=us&randomapi')
                .then(response => response.json())
                .then(data => {
                  const person = data.results[0];
                  alert('Got a random user named ' + person.name.first + ' ' + person.name.last);
                });
            

Why the strange syntax with .then?

• API-Requests take time
• This syntax allows to define a behaviour for once the request finishes, without blocking the rest of the application.

                    fetch('https://google.com')
                      .then(response => {
                        console.log('Got response');
                      });

                    console.log('After fetch');
                  

                    After fetch
                    Got response
                  

This syntax is called Promise.

Final Projects

Final Projects

• Think of a topic for your final project.
  For example a weather application, an online shop concept, a personal portfolio etc.
• Consider that your project should make use of all three technologies we learned so far: HTML, CSS and Javascript.
• You may search for Free APIs for inspiration
• Draw a wireframe of how you want your website to look like.
  A drawing with pen & paper is sufficient. The wireframe should include all elements that the final result is supposed to have, and show their arrangement.