API's research - MrSmarto/Anime-Smarty GitHub Wiki

Een API (Application Programming Interface) is een hulpmiddel waarmee programma's met elkaar kunnen communiceren en informatie kunnen uitwisselen. Veel API's zijn open source die je gewoon kan implementeren zodat je eigenlijk gebruik kan maken van andere software en diensten zonder dat je het volledig hoeft te begrijpen. Dit kan handig zijn omdat je dan niet helemaal het wiel opnieuw moet uitvinden maar gewoon een toturial kan volgen hoe je de API kan gebruiken.

Via de webzite mozilla.org kan je verschillende api's opzoeken. Deze staan gewoon openbaar en zijn dus ook makkelijk te gebruiken door developers rondom de wereld.

Op index.ejs heb ik twee nieuwe stukjes toegevoegd over deze API. Daarnaast maak ik ook gebruik van de document.addEventListener("DOMContentLoaded") functie die ervoor zorgt dat mijn pagina eerst wacht totdat alle html is geladen.

De lazyLoadImagesCallback functie controleert of de afbeelding in de vieuwport zitten. Als een afbeelding in beeld komt (zichtbaar wordt op het scherm), veranderen ik de bron van de afbeelding naar de echte afbeelding met img.src = img.dataset.src. Dit zorgt ervoor dat de afbeelding pas wordt geladen als deze zichtbaar is.

Vervolgens heb ik een nieuwe IntersectionObserver met de naam lazyLoadObserver aangemaakt. Deze observer houdt eigenlijk gewoon in de gaten of een foto in beeld komt/verwijnd. En deze geef ik weer mee met de functie lazyLoadImagesCallback als parameter.

Daarna selecteer ik alle afbeeldingen met de class .lazy-image en deze sla ik op, in de variabele lazyImages. Als laatste voeg ik deze afbeelding toe aan lazyLoadObserver. Hierdoor krijg je de functionaliteit dat nu alle afbeeldingen met de .lazy-image class worden bijgehouden en ze pas laden als ze zichtbaar worden op het scherm.

• De video stopt met afspelen als deze uit het scherm (observer) gaat. Maar speelt zichzelf verder af zodra de video weer in beeld is. Om dit te laten werken maak ik gebruik van: initObserver() die bij houdt of de video in het beeld zit. In initObserver() kan je opties opstellen die bepalen wanneer de video als zichtbaar word gezien, in mijn geval is dat threshold van 0.5, de video moet 50% in het beeld zijn op als zichtbaar te worden gezien.

• Daarna maak ik een functie genaamd observerCallback, die wordt uitgevoerd wanneer de zichtbaarheid van de video verandert. Deze functie controleert of de video zichtbaar is met entry.isIntersecting. Als de video zichtbaar is, wordt de video afgespeeld met video.play() en wordt er een bericht naar de console gelogd. Als de video niet zichtbaar is, wordt de video gepauzeerd met video.pause() en wordt er een ander bericht naar de console gelogd.

De animechan api is eigenlijk een lange lijst van anime-quotes die worden opgehaald van een API. Als ik naar beneden scroll en de sectie waar deze API in zit zichtbaar wordt, dan begint de pagina elke 7 seconden nieuwe quotes op te halen. Als de gebruiker verder scrolt en het API-gedeelte niet meer zichtbaar is, stopt de pagina met het ophalen van nieuwe quotes. Ik heb ook een console.log toegevoegd die aangeeft

• Wanneer de sectie in beeld is
• Wanneer er data wordt opgehaald
• Wanneer de sectie niet in beeld is.

1. dataInterval is een variabele die ik gebruikt om de interval op te slaan zodat er elke 7 seconden nieuwe gegevens worden opgehaald.

let dataInterval;

2. initApiSectionObserver is een functie die de Intersection Observer instelt en initialiseert.

function initApiSectionObserver()

• a. apiSection selecteert het derde element binnen het element op de pagina.

const apiSection = document.querySelector("main section:nth-of-type(3)");

• b. observerOptions is een object met opties voor de Intersection Observer. Hier is root ingesteld op null, wat betekent dat de observer de gehele pagina in de gaten houdt. rootMargin is ingesteld op "0px", wat betekent dat er geen marge rondom de root is. threshold is ingesteld op 0.1, wat betekent dat de observer een callback uitvoert wanneer 10% van het doel (het API-gedeelte) zichtbaar is.

const observerOptions = {
    root: null,
    rootMargin: "0px",
    threshold: 0.1,
  };

• c. observerCallback is de functie die wordt uitgevoerd wanneer het doel (het API-gedeelte) de waarde 0.1 (10% zichtbaar) heeft. Deze functie controleert of de waarde zichtbaar is (entry.isIntersecting) en voert acties uit. Als het doel zichtbaar is en dataInterval niet is ingesteld, haalt het gegevens op van de API en start het een interval om elke 7 seconden nieuwe gegevens op te halen. Als het doel niet zichtbaar is, wordt het interval gestopt.

const observerCallback = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // Log een bericht wanneer de API-sectie zichtbaar is
        console.log("ANIME QUOTES API is zichtbaar in de viewport.");

        if (!dataInterval) {
          // Haal de data op van de API
          fetchDataFromApi();

          // Start het interval om elke 7 seconden nieuwe data op te halen
          dataInterval = setInterval(() => {
            // Log een bericht wanneer er nieuwe data wordt opgehaald
            console.log("Nieuwe ANIME QUOTES ophalen...");

            // Reset de animaties
            restartAnimations();

            // Haal de data op van de API
            fetchDataFromApi();
          }, 7000);
        }
      } else {
        // Log een bericht wanneer de API-sectie niet zichtbaar is
        console.log("ANIME QUOTES API is niet zichtbaar in de viewport.");

        // Stop het interval om nieuwe data op te halen
        clearInterval(dataInterval);
        dataInterval = null;
      }
    });
  };

• d. observer maakt een nieuwe Intersection Observer met de eerder de zelfde callback-functie en opties als daarvoor.

const observer = new IntersectionObserver(observerCallback, observerOptions);

• e. observer.observe(apiSection) start het observeren van het API-gedeelte opnieuw.

observer.observe(apiSection);

3. document.addEventListener wacht tot de webpagina volledig is geladen (DOMContentLoaded) en roept vervolgens de initApiSectionObserver functie aan om de Intersection Observer te initialiseren.

document.addEventListener("DOMContentLoaded", function () {
  // Initialiseer de Intersection Observer
  initApiSectionObserver();
});

Ik heb natuurlijk een applicatie gebouwd rondom het thema anime, daarom ging ik ook opzoek naar een API die kan bijdragen aan dit concept. Ik heb vervolgens een gratis API gevonden genaamd: Animechan

Animechan kan de volgende functies uitvoeren:

1. Get a random quote
2. Get a random quote by anime title
3. Get a random quote by anime character
4. Get 10 random quotes
5. Get 10 quotes by anime title
6. Get 10 quotes by anime character
7. Get all available anime names
8. Get all available character names
9. Pagination

Ik heb uiteindelijk gekozen om nummer 1. Get a random quote uit te werken voor mijn applicatie. Deze API is terug te vinden in de homepagina.

Hieronder vindt je de code die ik heb gebruikt voor mijn API:

const h1 = document.querySelector('section:nth-of-type(3) h1');
const h2 = document.querySelector('section:nth-of-type(3) h2');
const h3 = document.querySelector('section:nth-of-type(3) h3');

fetch('https://animechan.vercel.app/api/random')
    .then(response => response.json())
    .then(data => {
  console.log(data);
  h1.innerHTML = data.anime;
  h2.innerHTML = data.character;
  h3.innerHTML = data.quote;
})

Ik zal je stapsgewijs uitleggen wat er in mijn code hierboven gebeurd:

1. De eerste drie regels zijn variabelen die elementen selecteren in de HTML-pagina en deze verbindt je met de html elementen. Door middel van de querySelector kunnen we elementen selecteren door hun CSS-selector te selecteren.

section:nth-of-type(3) h1

2. Daarna wordt de fetch-methode gebruikt om gegevens op te halen van een externe API die de animes-inhoud geeft. Het fetch verzoek wordt verzonden naar de URL https://animechan.vercel.app/api/random.

fetch('https://animechan.vercel.app/api/random')

3. Wanneer de API de gegevens terug stuurt, wordt er op de response een .json()-methode aangeroepen om de gegevens om te zetten van JSON-tekst naar javascript. Dit gebeurt via de eerste then-functie die aan de fetch-methode is gekoppeld.

.then(response => response.json())

4. In het tweede then-blok wordt de data - het object dat de API heeft terug gestuurd - gebruikt om de inhoud van de HTML-elementen die we in stap 1 hebben geselecteerd, te wijzigen. data.anime, data.character en data.quote zijn de eigenschappen van het object die de waarden bevatten die moeten worden gekoppeld aan de h1, h2 en h3 elementen.

h1.innerHTML = data.anime;, h2.innerHTML = data.character; & h3.innerHTML = data.quote;

5. De nieuwe gegevens worden vervolgens ingevoegd in de HTML-elementen met behulp van de innerHTML -eigenschap. Dit zorgt ervoor dat de wijziging van de inhoud van de h1, h2 en h3 elementen worden omgezet naar de client-side.

6. De laatste stap is dat de geretourneerde data wordt gelogd naar de console, zodat we de waarden kunnen bekijken die door de API zijn geretourneerd. Dit gebeurt met de console.log()-methode die de data als argument accepteert.

console.log(data);