api - Neinno/Blok-tech GitHub Wiki
API's
Tijdens de les van frontend heb ik gekeken naar potentiele API's die ik kan gaan gebruiken voor mijn project. Ik heb gekeken naar:
Intersection Observer
Als je scrolled kan ik nieuwe dingen laten zien. Hij kijkt dan of iets in beeld is.
Geolocation
Om locatie op te vragen van de gebruiker.
Fetch
Op data uit een API op te halen
Keuze
Ik ga gebruik maken van de Geolocation API. Dit kan mij gaan helpen om het form sneller, en makkelijker te maken. Dit is dan ook gelijk progessive enhancement. Met gebruik van Geolocation ga ik de longitude en latitude opvragen van de gebruiker. Op die manier kan ik nauwkeurig de locatie bepalen en dan deze laten zien op een kaart.
Fetch ga ik gebruiker voor mijn third-party API. Dit ga gebruiken om het Json bestand uit te lezen van de API en op die manier de data te gebruiken.
Intersection Observer ga ik niet gebruiken. Op de pagina's van mijn feature kan je eigenlijk bijna niet scrollen. Dan zou de intersection observer alleen gebruikt worden als er meerde auto's te vinden zijn op een pagina. Het gebruik is daarom minimaal, en zie ik geen goede functionaliteit die ik daar aan kan koppelen.
Om gebruik te maken van de Geolocation heb ik de code gepakt van MDN en deze zelf aangepast naar wat ik nodig heb.
function success(pos) {
var crd = pos.coords;
console.log(`location : ${crd.latitude}, ${crd.longitude}`);
let locatieForm = document.getElementById("locatie");
locatieForm.setAttribute("value", `${crd.latitude}, ${crd.longitude}`);
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
navigator.geolocation.getCurrentPosition(success, error);
Third party API
Voor mijn third party API heb ik gekozen voor een kenteken API. Voor nederlandse kentekens zijn er twee. Er is er een van de overheid. Hier heb je een API key voor nodig. De tweede optie is van het RDW.
Kenteken Overheid
Kenteken RDW
De data van het RDW kreeg ik niet volledig werkend. Ik kon bijvoorbeeld kentekens niet vinden. De API van de overheid had alle kentekens. Ik heb dus uiteindelijk gekozen voor deze. Wat ik dus nu wel moest gaan gebruiken is een API key. De API van de overheid was daarom iets complexer om te gaan gebruiken
Werking
Om de API werkend te krijgen heb ik gebruik gemaakt van Fetch. Fetch heb je nodig om de data van de API op te halen. De volgende code is gebruikt om de API aan te roepen, en mijn progessive enhancement compleet te maken.
Json
De API geeft de informatie terug als een Json. De informatie kan je uitlezen in je console, om dat te doen gebruik je fetch.
object {
aantal_cilinders: 3
aantal_deuren: 5
aantal_wielen: 4
aantal_zitplaatsen: 5
as: (2)[{
…}, {
…}]
brandstof: [{
…}]
breedte: 180
bruto_bpm: 4439
carrosserie: [{
…}]
catalogusprijs: 33115
cilinderinhoud: 999
code_toelichting_tellerstandoordeel: "00"
datum_eerste_tenaamstelling_in_nederland: "20200311"
datum_eerste_tenaamstelling_in_nederland_dt: "2020-03-11T00:00:00.000"
datum_eerste_toelating: "2020-03-11"
datum_eerste_toelating_dt: "2020-03-11T00:00:00.000"
datum_tenaamstelling: "2020-03-11"
datum_tenaamstelling_dt: "2020-03-11T00:00:00.000"
eerste_kleur: "BLAUW"
europese_voertuigcategorie: "M1"
export_indicator: false
handelsbenaming: "GOLF"
hoogte_voertuig: "145"
inrichting: "stationwagen"
jaar_laatste_registratie_tellerstand: "2020"
kenteken: "H296LB"
kentekenplaat: "H-296-LB"
lengte: 457
massa_ledig_voertuig: 1200
massa_rijklaar: 1300
maximale_constructiesnelheid: "200"
maximum_massa_samenstelling: 3170
maximum_massa_trekken_ongeremd: 650
maximum_ondersteunende_snelheid: 0
maximum_trekken_massa_geremd: 1300
merk: "VOLKSWAGEN"
openstaande_terugroepactie_indicator: false
sidecode: 10
taxi_indicator: false
technische_max_massa_voertuig: "1850"
tellerstandoordeel: "Logisch"
tenaamstellen_mogelijk: "Ja"
toegestane_maximum_massa_voertuig: 1850
type: "AUV"
typegoedkeuringsnummer: "e1*2007/46*0627*40"
uitvoering: "FM6FM6AJ019N4BFON1VL1AVR2A"
variant: "VACDKRFX0"
vermogen_massarijklaar: 0.07
vervaldatum_apk: "2024-03-11"
vervaldatum_apk_dt: "2024-03-11T00:00:00.000"
voertuigsoort: "Personenauto"
volgnummer_wijziging_eu_typegoedkeuring: 0
wam_verzekerd: true
wielbasis: 262
zuinigheidsclassificatie: "A"
}
De API data
Dit is de data die ik terug krijg van de API. Ik gebruik de volgende informatie in mijn feature:
- Kenteken
- Handelsbenaming
- Merk
- Eerste kleur
Ik pak deze informatie omdat ik dit wil laten zien aan de gebruiker op de profiel pagina. Deze informatie is waar de gebruikers eerst naar kijken. Als ik deze feature helemaal zou willen uitwerken heb ik meer informatie nodig dan alleen deze 4.
Code van Fetch API
async function fetchData() {
let fetchValue = document.getElementById("kenteken").value;
const url = "https://api.overheid.io/voertuiggegevens/" + fetchValue;
let response = await fetch(url, {method:"GET", headers: {"ovio-api-key": "773164d38a56bd1212a472e6f01210a124120d654e5c4ae8c67a1b7dbefbcca5"}});
let fetchLog = await response.json();
if(fetchLog.error) {
return false;
}
if(fetchLog.merk) {
merkInput.value = fetchLog.merk;
}
if(fetchLog.eerste_kleur) {
kleurInput.value = fetchLog.eerste_kleur;
}
if(fetchLog.handelsbenaming) {
typeInput.value = fetchLog.handelsbenaming;
}
if(fetchLog.kentekenplaat) {
kentekenInput.value = fetchLog.kentekenplaat;
}
console.log(fetchLog);
}
const kentekenInput = document.querySelector("input[name='kenteken']");
const merkInput = document.querySelector("input[name='merk']");
const kleurInput = document.querySelector("input[name='kleur']");
const typeInput = document.querySelector("input[name='type']");
kentekenInput.addEventListener("input", fetchData);
Uitleg
Eerst maak ik een variable aan zodat ik de link van de API kan veranderen. De link moet ik veranderen voor ieder kenteken. Op die manier is de value die mensen invullen in het form deel van de link. Daarna voeg ik alles bij elkaar. De variabele response is dan de hele link die nodig is om het request te maken. Ik gebruik de fetchLog om vervolgens de data in het form te krijgen.
Resultaat
Van longitude en latitude naar land | Third party API 2:
Voor mijn herkansing van frontend wou ik graag nog even aan mijn progressive enhancement werken. De informatie die ik nu laat zien zijn longitude en latitude. Dit wou ik graag vervangen naar iets meer leesbaar. Ik ben gaan uitzoeken hoe ik dit voor elkaar kan krijgen. Ik kwam eerst bij Google uit. Google bied wel dat soort functionaliteiten, maar je hebt een credit card nodig om daar mee te starten. Aangezien ik niet in het bezit van van een credit card moest ik een alternatief gaan zoeken. Uiteindelijk ben ik uitgekomen op deze website:
https://opencagedata.com/guides/how-to-determine-which-country-coordinates-are-in
Dit is een API die ervoor zorgt dat longitude en latitude omgezet worden in een land. Een land is natuurlijk niet heel erg specifiek, maar het is wel iets leesbaar.
Om deze API werkend te krijgen moest ik een account aanmaken op hun website. Daarna kreeg ik gratis een API key die ik kon gaan gebruiken. De code die ik heb gebruikt stond ook al op hun website, dus ik kon het aanpassen naar wat ik nodig had. Ik heb eerst een paar variabelen aangemaakt.
var coords = document.getElementById("longlatt").innerHTML;
var coordsElement = document.getElementById("longlatt");
var innerCountry = document.getElementById("country");
var api_key = "Mijn API key";
var api_url = "https://api.opencagedata.com/geocode/v1/json";
Ik zorg ervoor dat de coordinaten op de pagina staan die ik wil veranderen. Deze pak ik dan met getElementById zodat ik deze kan gebruiken in de API link.
var request_url = api_url
+ "?"
+ "key=" + api_key
+ "&q=" + encodeURIComponent(coords)
+ "&pretty=1"
+ "&no_annotations=1";
var request = new XMLHttpRequest();
request.open("GET", request_url, true);
Nadat de link heb gebeurt de function. In deze function haal ik de locatie op. Ook heb ik in deze functie ervoor gezorgt dat de locatie getoond wordt op de detail pagina, en de coordinaten worden weggehaald.
request.onload = function() {
var data = JSON.parse(request.responseText);
if (request.status === 200){
var country = "no country returned";
if (data.results[0].components.country != null){
country = data.results[0].components.country;
innerCountry.innerHTML = "Locatie: " + data.results[0].components.country;
coordsElement.style.display = "none";
}
console.log("country: " + country);
} else {
console.log("unable to geocode! Response code: " + request.status);
console.log("error msg: " + data.status.message);
}
};
request.onerror = function() {
console.log("unable to connect to server");
};
request.send();
Dit heb ik allemaal in een functie gezet die ik vervolgens weer aanroep. Wat ik nu in mijn console krijg is:
country: Netherlands
Vervolgens zorg ik ervoor met innerHTML dat deze informatie weer op het scherm komt.
Op die manier verander ik longitude en latitude naar een land. Het is niet de ideale oplossing, maar het maakt het een stuk meer leesbaar.