đ RĂ©sumĂ© du projet
Ta mission, créer un site type "e-commerce" (pas de panique), en HTML/CSS et Javascript.
On te fourni le projet "back-end", tu dois donc créer le projet "front-end".
Back-end ?!
C'est un projet qui n'a pas d'interface graphique, il attend qu'on lui demande des informations et il répond ce qu'on lui demande.
Exemples :
- Donne-moi la liste des produits
- Donne-moi les informations du produit avec l'identifiant 42
On appelle ça une "API" (Application Programmation Interface).
Front-end ?!
C'est la partie visible par les visiteurs, dans notre cas ici, c'est un site Javascript mais ça peut aussi ĂȘtre une application mobile ou un client lourd (logiciel).
Prenez par exemple une application sur ton tĂ©lĂ©phone, Instagram. Il existe l'application iOS, Android et le site internet. Ces trois projets "front" sont connectĂ©s Ă la mĂȘme API, ce qui permet d'avoir les donnĂ©es Ă un seul endroit
đ§ Installation du projet back-end (API)
đ Afin d'Ă©viter toutes les Ă©tapes de cette partie, tu peux hĂ©berger ton API sur Heroku en suivant ce tuto : HĂ©berger un projet NodeJS sur Heroku. En faisant ça, il faudra remplacer "localhost" par ton nom de domaine heroku
Si tu as bien suivi, ce projet est déjà fait et fonctionnel.
Mets-toi dans le dossier ou tu souhaites mettre l'API
$ git clone https://github.com/OpenClassrooms-Student-Center/JWDP5
$ cd JWDP5
$ npm install
$ npm run start
â ïž Pour les deux derniĂšres commandes, il va falloir que tu installes NodeJS
La derniĂšre commande permet de lancer le serveur, ton terminal ne va pas te rendre la main, si tu vois le message Listening on port 3000 c'est Ă dire que l'API attend d'ĂȘtre contactĂ©e đ
Garde ton terminal de cĂŽtĂ© car si tu fermes la fenĂȘtre, ça va arrĂȘter l'API âčïž
Tester l'API
â ïž Qu'on soit bien d'accord, ici on va tester l'API pour voir comment l'appeler et comment elle nous rĂ©pond, ceci n'est pas une Ă©tape obligatoire pour votre projet, mais fortement recommandĂ© pour ĂȘtre Ă l'aise pour la suite.
Maintenant que l'API est lancée, tu peux lui demander des informations, pour cela on va installer un client API, tu peux prendre Insomnia API ou Postman.
Le premier Ă©tant plus simple, le deuxiĂšme est plus complet.
đ Tu peux aussi le faire directement sur VSCode en suivant cette article : Arretez d'utiliser Postman
Dans les spécifications du projet, tu peux voir 3 endpoints :
- GET /api/cameras
- GET /api/cameras/:id
- POST /api/order
On va rĂ©cupĂ©rer les cameras en crĂ©ant une nouvelle requĂȘte sur Insomnia par exemple, avec comme adresse : http://localhost:3000/api/cameras, pour la mĂ©thode on va laisser GET
Tu peux envoyer la requĂȘte et si tout se passe bien, tu devrais avoir pareil que le screenshot ci-dessous :
à droite tu as donc la réponse de l'API que tu as lancée avant, qui écoute sur le port 3000 (pour ça que l'URL que tu mets dans ton logiciel est http://localhost:3000)
Le but ici va ĂȘtre de te crĂ©er un dossier "Orinoco" (comme j'ai fait sur le screen au dessus) avec les 3 requĂȘtes Ă l'intĂ©rieur.
Pour le deuxiÚme GET c'est facile, il suffit de prendre l'id d'un article et de le mettre à la place de :id, l'API devrait te répondre seulement les informations de ce produit.
Pour la troisiĂšme requĂȘte, n'oublie pas de mettre la mĂ©thode en POST, car ici ça ne sera pas une simple rĂ©cupĂ©ration d'informations mais une crĂ©ation, je te conseille de bien lire la documentation fournie avec le projet pour que ça fonctionne comme il faut đ.
đ La suite : Partie 2