API

Voor mijn onderzoek naar het creëren van een app om auto's te zoeken, heb ik verschillende API's bekeken om de benodigde gegevens te verkrijgen en heb ik specifieke API's gebruikt om bepaalde functies in mijn app mogelijk te maken.

Wat betreft de Auto API's die ik heb gevonden zijn er een aantal opties die nuttig kunnen zijn:

Third Party API's

1. CarAPI (https://carapi.app): CarAPI biedt uitgebreide informatie over auto's, waaronder merk, model, jaar, brandstoftype, carrosserietype, aantal deuren en meer. Je kunt specifieke informatie opvragen op basis van het kenteken of de VIN (Vehicle Identification Number) van een auto.

2. VINDecode (https://vindecoder.eu): VINDecode is een API die informatie biedt op basis van een voertuigidentificatienummer (VIN). Het geeft gedetailleerde gegevens over het merk, model, carrosserietype, motor, transmissie en andere technische specificaties van een auto.

3. Fuel Economy (https://www.fueleconomy.gov/feg/ws/): De Fuel Economy API biedt toegang tot brandstofefficiëntiegegevens van voertuigen, inclusief informatie over brandstofverbruik, CO2-uitstoot, MPG (miles per gallon) en meer. Je kunt gegevens opvragen op basis van merk, model en jaar van een auto.

4. NHTSA (https://vpic.nhtsa.dot.gov/api/): De NHTSA API (National Highway Traffic Safety Administration) biedt toegang tot voertuiggegevens, waaronder informatie over het merk, model, carrosserietype, aandrijftype en classificatie van een auto. Het bevat ook gegevens over veiligheidsbeoordelingen en recalls.

5. Edmunds (https://developer.edmunds.com/): Edmunds biedt een uitgebreide API voor auto-informatie, inclusief gegevens over het merk, model, jaar, carrosserietype, aantal deuren, motor, transmissie en meer. Je kunt informatie opvragen op basis van een voertuigidentificatienummer (VIN) of specifieke criteria.

6. CarMD (https://www.carmd.com/): CarMD biedt een API voor het opvragen van voertuiggegevens, waaronder basisinformatie over het merk, model, jaar, motor, transmissie en brandstof. Je kunt ook toegang krijgen tot informatie over voertuigproblemen en reparatiekosten.

Werking

Na urenlang te hebben geworsteld met het verkrijgen en implementeren van een werkende API, ben ik eindelijk erin geslaagd om een bruikbare Third Party API te vinden. Het bleek namelijk een uitdaging te zijn om een gratis openbare API te vinden die autogegevens aanbiedt. Gelukkig kwam ik na uitgebreid zoeken op Google de website https://www.back4app.com/database/back4app/car-make-model-dataset tegen. Ik heb daar een account aangemaakt en kon vervolgens een database, met verschillende automodellen, koppelen aan mijn app.

Ik had de hoop al bijna opgegeven, maar ik ben ontzettend blij dat mijn zoekmachine nu werkt! Hoewel hij niet precies functioneert zoals ik in eerste instantie had verwacht, ben ik als beginnende backend-developer trots op het feit dat het gelukt is. Het is een belangrijke mijlpaal in mijn leerproces.

Hoe?

Parse.serverURL = "https://parseapi.back4app.com";
  "---------------------------", // Applicatie sleutel
  "---------------------------"", // Javascript sleutel
  "--------------------------" // Master sleutel
//Deze heb ik allemaal verkregen via het back4app platform
);

// Autolijst
app.get("/autolijst", async function (req, res) {
  try {
    // Haal de geselecteerde autotype en automerk op uit de queryparameters van de request
    const selectedCarType = req.query["soort-auto"];
    const selectedCarBrand = req.query["soort-merk"];

    // Definieer een Parse-object voor de klasse "Carmodels_Car_Model_List"
    const Carmodels_Car_Model_List = Parse.Object.extend(
      "Carmodels_Car_Model_List"
    );

    // Maak een query voor objecten van de klasse "Carmodels_Car_Model_List"
    const query = new Parse.Query(Carmodels_Car_Model_List);

    // Voeg voorwaarden toe aan de query om alleen auto's van het geselecteerde merk en type op te halen
    query.equalTo("Make", selectedCarBrand);
    query.equalTo("Category", selectedCarType);

    // Voer de query uit en wacht op het resultaat
    const results = await query.find();

    // Maak een lijst van auto-objecten op basis van de queryresultaten
    const carList = results.map((object) => {
      return {
        make: object.get("Make"), // Haal de waarde van het veld "Make" op
        year: object.get("Year"), // Haal de waarde van het veld "Year" op
        model: object.get("Model"), // Haal de waarde van het veld "Model" op
        category: object.get("Category"), // Haal de waarde van het veld "Category" op
      };
    });

    // Rendert de "autolijst" view en stuurt de auto-lijst naar de view
    res.render("autolijst", { carList });
  } catch (error) {
    // Als er een fout optreedt, log de fout en stuur een HTTP 500-foutmelding terug met een foutbericht
    console.error(error);
    res
      .status(500)
      .send("Er is een fout opgetreden bij het ophalen van de gegevens.");
  }
});

De code probeert eerst de data op te halen (Try) uit de database. Als dit niet lukt (Catch) zend de app een 500 foutmelding. Je ziet ook dat er hier een Async functie wordt gebruikt om de data uit de database op te halen. Dit helpt bij het voorkomen van fouten bij het verwerken van twee processen. Het zorgt ervoor dat de queryresultaten beschikbaar zijn voordat ze worden verwerkt en geretourneerd aan de client.

Browser API's

1. Geolocation API: Hiermee kun je de geografische locatie van de gebruiker verkrijgen. Dit kan handig zijn bij het matchen van auto's op basis van locatie. Meer informatie: Geolocation API

2. Local Storage API: Hiermee kun je gegevens lokaal opslaan in de browser van de gebruiker. Je kunt het gebruiken om voorkeuren of zoekcriteria van de gebruiker op te slaan voor toekomstige bezoeken aan de website. Meer informatie: Web Storage API

3. Web Notifications API: Hiermee kun je meldingen weergeven aan de gebruiker, zoals wanneer er nieuwe matches beschikbaar zijn. Meer informatie: Notifications API

4. History API: Hiermee kun je de geschiedenis van de browseraanpassen. Je kunt het gebruiken om navigatie tussen verschillende pagina's op je matching website te beheren zonder dat de pagina opnieuw hoeft te worden geladen. Meer informatie: History API

5. Fetch API: Hiermee kun je HTTP-verzoeken uitvoeren om gegevens van een server op te halen. Je kunt het gebruiken om dynamische gegevens op te halen voor het matchen van auto's. Meer informatie: Fetch API

6. WebSockets API: Hiermee kun je een permanente, bidirectionele communicatie tot stand brengen tussen de browser en de server. Je kunt het gebruiken om real-time updates te ontvangen, bijvoorbeeld wanneer er nieuwe auto's beschikbaar zijn voor matching. Meer informatie: WebSocket API

Werking

Om de Browser API te gebruiken, heb ik gebruik gemaakt van de Geolocation API. Ik heb deze Browser API gekozen omdat ik het een vet concept vind om iemands locatie te weergeven wanneer de gebruiker ingelogd is:

// Locatie via Geolocation API
document.addEventListener("DOMContentLoaded", function () {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showUserLocation);
  } else {
    console.log("Geolocation wordt niet ondersteund door de huidige browser.");
  }

  function showUserLocation(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;

    const locationElement = document.getElementById("userLocation");
    if (locationElement) {
      locationElement.textContent = `${latitude}, ${longitude}`;
    } else {
      console.log("Element met id 'userLocation' niet gevonden.");
    }
  }
});

Dit stuk code maakt gebruik van de Geolocation API om de locatie van de gebruiker te verkrijgen. Het voegt een event listener toe aan het DOMContentLoaded evenement, wat betekent dat de code wordt uitgevoerd zodra de DOM van de pagina is geladen.

De code controleert of de huidige browser de Geolocation API ondersteunt door te controleren op de aanwezigheid van het navigator.geolocation object. Als de Geolocation API wordt ondersteund, wordt de functie getCurrentPosition aangeroepen, die een callback-functie showUserLocation accepteert.

De getCurrentPosition-methode start een verzoek aan de gebruiker om hun locatie te verkrijgen. Als de gebruiker toestemming geeft, wordt de showUserLocation-functie aangeroepen met het position-object dat de verkregen locatiegegevens bevat.

De showUserLocation-functie haalt de breedtegraad (latitude) en de lengtegraad (longitude) op van het position-object en gebruikt deze waarden om de locatie weer te geven in een element met de id "userLocation". Als het element niet kan worden gevonden, wordt er een bericht naar de console gelogd.