API

Labo 3

Objectif de la session
04:22

  • Comprendre comment fonctionne les API
  • Consommer une API avec Postman ou avec fetch
  • Employer un ORM
  • Comprendre les avantages architecturaux d'une API et des ORMs

Installation de SvelteKit
04:22

Utilisez le dossier de la dernière fois, ou créez un nouveau projet.

Instruction

  1. Créez un nouveau dossier pour le projet
  2. Ouvrez le avec Visual Studio
  3. Ouvrez le terminal
  4. npm create svelte@latest
    • Dans le dossier courant
    • Pas de TypeScript
  5. Suivez les instructions qu'ils vous donnent

Postman
04:22

Instruction

  1. Installez Postman qui vous permettra de tester vos APIs.
  2. Dans le fichier svelte.config.js de votre projet, assurez-vous d'avoir

Une première API
04:22

Idea

Pour ouvrir le point d'entrée /api/une/adresse/arbitraire, créez une fonction exportable GET dans le fichier /src/routes/api/une/adresse/arbitraire/+server.js.

Exercise

  1. Créez une API de telle sorte qu'une requête GET /api/roll vous donne un nombre aléatoire entre 1 et 6.
  2. Testez votre code avec Postman
  3. Ensuite, créer une page qui possède un bouton appelant cette API

Todo app
04:22

Exercise

Créez une API pour une todo list.

  • GET /api/todos doit lister la liste des tâches
  • POST /api/todos doit permetre l'ajout d'une nouvelle tâche
  • DELETE /api/todos/0 doit supprimer la première tâche

    • Créez ensuite une application qui appelle cette API

Maintenez la liste des tâches dans le fichier src/todos.js:

Remark

  • Pour récupérer les données d'un formulaire, utilisez await event.request.json() si event est le nom du paramètre de la fonction POST.
  • Pour l'id de la tâche, elle se récupère via event.params.id

Persistence des données
04:22

Nous allons maintant employer un ORM pour stocker les tâches dans une base de données

Instructions

  1. Installez Prisma
  2. Spécifiez le format de votre base de données en ajoutant ceci dans prisma/schema.prisma:
    model Task {
  id Int @id @default(autoincrement())
  task String
}
  3. Demandez à Prisma de générer la DB:

Exercise

Adaptez l'exercice précédent pour qu'il fonctionne avec une base de données.