.api
Een API (Application Programming Interface) is een stel software-regels en protocollen die het mogelijk maakt voor verschillende applications om met elkaar te communiceren en gegevens uit te wisselen. Het werkt als een contract tussen een API-provider en ontwikkelaars, waarin wordt beschreven hoe verschillende systemen berichten uitwisselen met elkaar. API's worden veel gebruikt in front-end development om services en systemen te met elkaar te verbinden, waardoor ontwikkelaars bestaande functies kunnen gebruiken en nieuwe applicaties kunnen ontwikkelen.
Het verschil tussen API's en web-API's is dat API een bredere term is die verwijst naar de set regels en protocollen voor communicatie tussen softwaretoepassingen. Een web-API is een specifiek type API dat is ontworpen om te worden gebruikt via het web met behulp van HTTP-protocollen. Een web-API werkt door het bieden van een reeks eindpunten of URL's waarmee gebruikers kunnen communiceren met een webtoepassing of -service. Gebruikers kunnen HTTP-verzoeken maken naar deze eindpunten, meestal met behulp van de GET, POST, PUT of DELETE methoden, en ontvangen gestructureerde reacties in formats zoals JSON of XML. De web-API verwerkt de verzoeken, voert de benodigde bewerkingen uit of haalt de gevraagde gegevens op, en stuurt de bijbehorende reacties terug. Dit maakt communicatie en gegevensuitwisseling mogelijk tussen verschillende systemen of toepassingen via het web.
Een voorbeeld van een web-API is de Twitter API. Deze API stelt developers in staat om toegang te krijgen tot verschillende features van Twitter, zoals het plaatsen van tweets, het ophalen van gebruikersprofielen en het zoeken naar tweets. Developers kunnen deze API dus gebruiken om twitter functies in hun eigen apps te bouwen.
Een third-party API is een API die wordt aangeboden door een externe partij, los van de originele software of service. Het stelt developers in staat om functies van die externe partij te gebruiken in hun eigen apps. Een third-party API werkt door een externe service beschikbaar te stellen voor developers om mee te communiceren. Developers kunnen verzoeken sturen naar de API met behulp van endpoints en parameters, en ontvangen vervolgens de gewenste gegevens of worden er bepaalde acties uitgevoerd. De third-party API werkt als een tussenliggende laag tussen de developer en de functie van de externe service, waardoor developers toegang hebben tot specifieke functies of gegevens zonder de interne werking van de service te hoeven begrijpen.
Een voorbeeld van een third-party API is de PayPal API. Hiermee kunnen developers betalingen integreren in hun apps door gebruik te maken van de betaaldiensten van PayPal, zonder zelf een betalingssysteem te hoeven ontwikkelen.
Er zijn ontelbaar veel API's beschikbaar online maar niet elke API is van toepassing op mijn app. Ik heb verschillende functies bedacht waar ik ook weer verschillende API's voor nodig zou moeten hebben.
- Notificaties: Gebruikers krijgen een notificatie of email over hun aanmelding als ze het aanmeldproces hebben.
- Muziek: Gebruikers de optie te geven om muziek te streamen en controleren binnen de webapp.
- Locatie: Gebruikers informatie verschaffen over waar ze zouden moeten optreden mits aangenomen.
Mailgun is een e-mailnotificatie-API die automatisering en levering van e-mails biedt. Mailgun vereenvoudigt het proces van verzenden en beheren van e-mails. Het biedt functies zoals e-mailtracking, email bevestiging van ontvangers en geavanceerde spamfiltering om de het leveren van de email te optimaliseren. Met zijn uitgebreide documentatie stelt Mailgun developers in staat om eenvoudige e-mail functies in hun applications te integreren en hun email communicatie te stroomlijnen.
Ik heb er uiteindelijk voor gekozen Mailgun niet te gebruiken. Het leek me leuk om een API in te stellen die gebruikers een bevestigings email stuurt als ze klaar zijn. Maar hoe dieper ik in ging op het implementeren van Mailgun in mijn eigen code, des te meer realiseerde ik me dat het misschien iets te hoog gegrepen was. Bovendien kwam ik erachter dat je voor een simpele notificatie helemaal geen API nodig hebt.
Met de Spotify API kunnen developers toegang krijgen tot en te communiceren met de muziekgerelateerde gegevens en functionaliteiten van Spotify. Het biedt functies zoals het ophalen van muziek metadata, gebruikers authenticatie, muziek afspeel besturing, gepersonaliseerde aanbevelingen, afspeellijstbeheer en audiobewerking. Developers kunnen de muziekcatalogus, gebruikersgegevens en afspeelmogelijkheden van Spotify integreren in hun apps, waardoor muziekstreaming, aanbevelingen en afspeellijstbeheer mogelijk worden.
Hoewel ik origineel van plan was om de Spotify API te implementeren in mijn web app, waren er verschillende redenen dat ik dit niet heb gedaan. Ik werd op de hoogte gesteld door een mede-student en een leraar dat de Spotify API niet de makkelijkste API is om mee te werken als een beginnende developer en na lang onderzoek en experimenteren met de API besloot ik dat ze gelijk hadden. Een muziek afspeel functie was ook niet één van mijn originele ideeën voor de app en niet nodig. Immers een gebruiker die zijn eigen muziek upload naar de site kent zijn eigen muziek wel.
Ik heb er uiteindelijk voor gekozen om de google maps API te integreren in mijn web app. Het is belangrijk om van te voren aan te geven waar het/de optredens waar een gebruiker zich voor aanmeld plaats vind. Dit omdat Fastpass internationaal gebruikt kan worden maar niet alle internationale gebruikers in staat zijn om op locatie op te treden.
Om de Google maps API te gebruiken moet je een paar stappen doorlopen,
Om te beginnen log je in op of creëer je een Google cloud account waarmee je een API key kan aanvragen, dit zodat developers een unieke identifier hebben waarmee ze requests kunnen controleren en toestaan. Als je eenmaal de key hebt kan je beginnen met coderen.
const scriptElement = document.createElement("script");
scriptElement.src =
"https://maps.googleapis.com/maps/api/js?key=AIzaSyAqwdYml-2i0y-MuvE-vcQzCUBdYi9OOjU&callback=initMap";
scriptElement.async = true;
scriptElement.defer = true;
document.body.appendChild(scriptElement);
function initMap() {
let ziggo = { lat: 52.313, lng: 4.937 };
let map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: ziggo,
});
let marker = new google.maps.Marker({ position: ziggo, map: map });
}Eerst maak je een nieuw script element die je linkt naar de Google API met je API key. Ik heb ook een callback toegevoegd zodat de latere "initMAP" functie wordt aangeroepen als de API geladen is. Met de appendChild methode voeg ik het script toe aan mijn EJS bestand waardoor het laden van de Google Maps API wordt geactiveerd.
De initMap-functie is de callback-functie die is gespecificeerd in de API-URL. Deze wordt automatisch aangeroepen zodra de API is geladen. In deze functie wordt:
- De variabele ziggo aangemaakt die de breedte- en lengtegraadcoördinaten van de locatie vertegenwoordigt. In dit geval de Ziggo Dome.
- Een nieuw google.maps.Map-object aangemaakt, waarbij het ID van een HTML-element wordt doorgegeven naar waar de kaart wordt weergegeven in de browser, samen met kaartopties zoals de sterkte van de zoom en de coördinaten van het middelpunt.
- Een marker aangemaakt dankzij de google.maps.Marker-constructor, waarmee de positie van de marker (hetzelfde als het middelpunt van de kaart) en de kaart waarop deze worden geplaatst, worden aangegeven.
Deze code laadt dus dynamisch de Google Maps API door een script element toe te voegen aan het EJS-document, en zodra de API is geladen, start deze een kaart gecentreerd op de opgegeven coördinaten en plaatst er een marker op.
Voor het uploaden van bestanden via FastPass heb ik gebruik gemaakt van Multer. Multer helpt met het parsen van multipart/form-data requests en is ontworpen om samen te werken met Node.js en Express.
import multer from "multer";
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "images");
},
filename: (req, file, cb) => {
cb(null, `${Date.now()}${path.extname(file.originalname)}`);
},
});
const upload = multer({ storage, limits: { files: 3 } });
app
.route("/upload")
.get((req, res) => {
res.render("upload.ejs");
})
.post(upload.array("image", 3), (req, res) => {
res.render("thankU.ejs", {
imageURLs: req.files.map((file) => file.filename),
});
});Aangezien mijn database nog niet 100% stabiel is heb ik ervoor gekozen om de uploads die via Fastpass gedaan worden naar een eigen folder op mijn laptop te sturen. Met "const upload" zorg ik ervoor dat gebruikers niet een enorme hoeveelheid documenten kan uploaden, maar maar drie in totaal. De route die ik heb opgezet accepteert zowel "get" als "post" requests. Voor get requests wordt het formulier waar je uploads kan doen ingeladen. Voor post requests wordt middleware gebruikt om documenten te uploaden, en na een succesvolle upload wordt de volgende pagina geladen.