Giter VIP home page Giter VIP logo

19-20_twoing4_tp4's Introduction

19-20_TWOIng4_TP4 : API

A lire impérativement avant de commencer quoi que ce soit, ce sont les règles que vous devrez appliquer tout au long du semestre:

Règles pour le semestre

Faire une API REST sur une base de donnée de film

Construire une API qui peut créer, modifier, afficher, effacer un film.

Il sera possible de requêter sur les routes suivantes:

  • GET localhost:3000/movies -- Affiche tout les films
  • GET localhost:3000/movies/:id -- Affiche un film via son id
  • PUT localhost:3000/movies/ -- Ajoute un film via son nom
  • POST localhost:3000/movies/:id -- Update un film via son id
  • DELETE localhost:3000/movies/:id -- Efface un film via son id

La donnée sera sous forme d'un tableau d'objets JSON. ​ Chaque film aura à la fin la structure suivante: ​

 {
  id: String,
  movie: String,
  yearOfRelease: Number,
  duration: Number // en minutes,
  actors: [String, String],
  poster: String // lien vers une image d'affiche,
  boxOffice: Number // en USD$,
  rottenTomatoesScore: Number
 }

​ Afin de récupérer ces informations vous utiliserez l'api suivante http://www.omdbapi.com/

Vous devrez tester vos requêtes à l'aide de POSTMAN

STEP 1: Get started

​ Utilisez express-generator pour initier votre tp ​

STEP 2: Requêtes CRUD

  1. Créer un nouveau fichier dans le repertoire routes
  2. Déclarez votre nouvelle route dans le fichier app.js
  3. Dans votre nouveau fichier de route, créer les routes CRUD.
  4. Pour l'instant nous gerons la base de donnée en utilisant uniquement un ID et le nom du film. ​

Step 3: Requêtes API Externe

Pré-requis:

  1. Creer une clé API: http://bit.ly/2GOS5Tc
  2. Tester votre clé: http://www.omdbapi.com/?t=inception&apikey=VOTRECLEAPI

Remplir la base de donnée avec des données supplémentaires

Dans cette étape vous aurez à appeler l'API omdb pour retrouver les informations d'un film grâce à son nom.

Faites le avec la librairie axios : ​

$ npm i -s axios

​ Documentation axios : https://github.com/axios/axios

Récuperer les champs voulus et les inserer dans votre "DB" à chaque requête PUT/POST.

Step 3 - Creer une documentation de votre API

​ Plusieurs solutions: ​

Step 4 - BONUS

​ Créer un site à l'aide de React qui n'aura qu'une seule fonctionnalité, afficher tous les films: ​

  • Créer un composant Film
  • Créer un container ListeFilms
  • Récuperer la liste des films lorsque le container ListeFilms est monté
  • Parcourir cette liste pour 'render' des composants films ​ Vous devrez faire fonctionner en même votre projet react et votre projet api dans deux consoles pour pouvoir interagir entre les deux.

19-20_twoing4_tp4's People

Contributors

baptistecauvin avatar clementac avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.