Week 3
marcdroger opened this issue · comments
DOM Manipulation
Name
Marc Droger
Class
TECH4
Repo link
https://github.com/marcdroger/blok-tech
Summary
Ik heb de Mapbox api geimplementeerd in mijn project zodat studenten later de interactieve kaart kunnen gebruiken om exchange mogelijkheden te ontdekken. Dit is gelukt door een account aan te maken op mapbox.com, een accestoken te generen. en die toe te voegen in het project.
Resources used
https://www.mapbox.com/
https://docs.mapbox.com/
Any thoughts?
Het was erg gemakkelijk in te stellen en op te zetten. De mapbox documenatie is goed beschreven en geeft ook veel goede voorbeelden. De kaarten zijn gemakkelijk in te stellen op vormgeving en functies. Goeie keuze uiteindelijk. Later kan ik via MongoDB geo gegevens inladen bij de JSON zodat er map markers kunnen worden gemaakt.
Ik heb wel een accestoken van mapbox API nu in mijn frontend staan. Nu vind ik dat wat anders dan een database key maar is het niet cleaner om die ook te verbergen? Aangezien je alleen een map inlaad vond ik het niet erg nodig om die ook te verbergen in een env. bestand.
Ook heb ik niet iets gedaan op het gebied van async de API ophalen. Wellicht kan daar nog iets mee gedaan worden?
Feedback
Hi Marc, top om te zien dat het je gelukt is om de Mapbox API te implementeren!
Slim om juist ook te kijken naar de bruikbaarheid/leesbaarheid van de documentatie, en goed dat je vast vooruitdenkt over eventuele volgende mogelijkheden ermee.
Het neerzetten van to-do's in code comments is ook fijn; zo zie je gelijk waar je mee bezig was en wat je nog moet doen.
Vragen
🔑 Access tokens
Access tokens wil je inderdaad het liefst niet in je frontend hebben staan; indien je een betaalplan hebt voor gebruik van een API zou iemand dan namelijk jouw key kunnen gebruiken en via jouw plan je dus op hoge kosten jagen, of unauthorized dingen ermee doen waardoor jouw account gezeur krijgt. Zelf heb ik daar tot nu toe geen last van gehad met gebruik van gratis API's (en staan er best wat in m'n Codepen-voorbeelden..), dus geen paniek dat het in je website/commits te vinden is, maar het is dus inderdaad af te raden om ze openbaar te hebben staan en wordt gezien als een bad practice.
Een nettere manier om dit te doen is door je API-call uit te voeren op de server, en de resultaten daarvan door te passen naar de frontend. Dus; iemand komt op een bepaalde pagina, doet daarmee een GET-request naar jouw server, jij vangt die request op, voert de API-call uit op de server, en stuurt met de response de data uit de API mee terug.
voorbeeldje van wat ik daarmee bedoel; https://github.com/deannabosschert/mongodb-example/blob/c1813a181a744557c00982d899aef7d1bf91158a/server.js#L52
Je API-key staat dan inderdaad in je .env bestand en kan je met het deployen van je website, bij 'site settings' op Heroku invoeren.
🍝 Async API-data ophalen
Wat je kan proberen is aan de hand van de voorbeelden bij de week, twee 'versies' te maken van het ophalen van de API-data, als oefening.
Dat wil zeggen; schrijf 1 functie waarmee je data synchroon ophaalt uit de API, en 1 functie waarmee je data asynchroon ophaalt uit de API. Is ook gelijk een goede code snippet om te bewaren voor wanneer je 'm ooit nodig hebt ;)
Succes, goed bezig en laat maar weten als je vragen hebt!
