Bouwen

NASA API

Op de website van NASA kan je gebruik maken vaan meerdere API's om een leuk project van te maken. Wel moet je eerst een API Key aanvragen. Dat kan gewoon op de website, waarna je de key opgestuurd krijgt per email. Voor dit project heb ik gebruik gemaakt van de APOD API.

API bekijken

Om de API te bekijken moest ik in de url de key toevoegen. De API key is geheim en heb ik daarom in het dotenv bestand gezet. Om de API te bezoeken ziet die er als volgt uit: https://api.nasa.gov/planetary/apod?api_key=${process.env.APOD}. Met `${process.env.APOD} haalt die de key op uit het dotenv bestand. Nadat ik de routes had aangemaakt met express en de data uit de API had gefetcht kon ik de informatie uit de API in het EJS bestand weergeven.

Datum Picker

In de API is er voor elke dag een nieuwe foto met een beschrijving. Ik wilde graag een datum-picker toevoegen waarmee je ook een andere dag kan bekijken.

In het EJS bestand heb ik de volgende code gemaakt:

<form action="/day.ejs" method="get">
    <label for="day"></label>
    <input type="date" 
    id="day" 
    name="day"
    value="<%= apodData.date %>"
       min="2015-01-01" 
       max="<%= today.toISOString().split('T')[0] %>">
    <input type="submit" value="CHOOSE DAY 🚀">
  </form>

Met value="<%= apodData.date %>" haal je datum op die in de op dat moment gekoppelde api staat.

Bekijk de volgende code om te bekijken hoe dat werkt:

app.get('/day.ejs', (request, response) => {
  // haal aangegeven dag op
  const chosenDay = request.query.day

  const messagesUrl = `https://retoolapi.dev/kaI0zp/data`
  const apodUrl = `https://api.nasa.gov/planetary/apod?api_key=${process.env.APOD}&date=${chosenDay}`


  Promise.all([fetchJson(messagesUrl), fetchJson(apodUrl)])
  .then(([messages, apodData]) => {
    response.render('day', {messages: messages, apodData: apodData, chosenDay: chosenDay})
  })
 
})

Als je datum hebt gekozen met de datum picker komt die datum automatisch in de url te staan. Daardoor kan je die datum ophalen met const chosenDay = request.query.day. Als je dit gedaan hebt kan je daarna de API url aanpassen door de uitgekozen datum erbij te voegen om de specifieke data van die dag te laden const apodUrl =https://api.nasa.gov/planetary/apod?api_key=${process.env.APOD}&date=${chosenDay}`.

Zelf API maken

Het leek mij heel leuk om voor elke foto een mogelijkheid te geven om een reactie erover achter te laten. Hier heb je een API voor nodig. Op internet het ik de volgende website gevonden waar een gratis API gemakkelijk en snel kan opzetten: retool. Dankzij deze API heb ik nu weten te maken met POST dat mensen een reactie achter kunnen laten.

Reactie POSTen naar API

Om dit te maken heb ik ervoor gezorgd dat er in de API de volgende waarde te vinden zijn: 'Name', 'Date', 'Message'. De datum is ook heel belangrijk omdat ik die nodig ga hebben om een reactie aan een juiste foto te kunnen koppelen.

Bekijk hieronder het formulier:

<h6>Add your message:</h6>
<form action="/day.ejs?day=<%= apodData.date %>" method="post">
    <fieldset class="post-form">
        <label for="Name">Name:
        <input name="Name" id="Name" type="text" required>
        </label>

        <label for="Message">Message:
        <input name="Message" id="Message" type="text" required>
        </label>

        <input type="submit" value="Send">

    </fieldset>
</form>

method="post" Is hier heel belangrijk. Verder is het belangrijk om een name toe te voegen aan de input. Het klopt dat er geen mogelijkheid is om de datum toe te voegen, want ik wil dat dat automatisch de datum pakt van de dag die op dat moment is weergegeven.

Het is belangrijk om aan de action de datum mee te geven zodat je kan ophalen op welke datum word gereageerd zodat je daarna weer naar dezelfde datum wordt teruggestuurd: action="/day.ejs?day=<%= apodData.date %>". Bekijk de volgende JS code om te zien hoe je bij succes weer op dezelfde pagina komt:

if (data.id) {
      const chosenDay = req.query.day
      res.redirect(`/day.ejs?day=${chosenDay}`) 

Om te kunnen posten is het belangrijk om de volgende code te gebruiken om het afhandelen van de formulieren te regelen:

// Stel afhandeling van formulieren in
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

Bekijk de onderstaande code van POST:

app.post('/day.ejs', (req, res) => {

  const urlRetoolApi = "https://retoolapi.dev/kaI0zp/data"

  // om de juiste datum aan reactie te koppelen
  const chosenDay = req.query.day 
  req.body.Date = chosenDay;

  postJson(urlRetoolApi, req.body, req.body.Date).then((data) => {


    console.log(data.id)
    if (data.id) {
      
      res.redirect(`/day.ejs?day=${chosenDay}`) 
      console.log('succes')
    } else {
      console.log('geen succes')
      res.render('new')
    }
  })
})

Vergeet niet de postJson functie toe te voegen:

// om te kunnen posten heb je de postjson functie nodig

export async function postJson(url, body) {
  return await fetch(url, {
    method: 'post',
    body: JSON.stringify(body),
    headers: { 'Content-Type': 'application/json' },
  })
    .then((response) => response.json())
    .catch((error) => error)
}