‫Jonas : Bon retour.
‫Maintenant, configurons enfin Express, créons un serveur
‫simple et effectuons un routage de base juste pour
‫avoir une première idée
‫de la façon dont nous travaillons réellement dans Express.
‫Et donc dans cette vidéo, nous allons en fait
‫commencer à travailler sur le projet natours, donc le gros projet principal qui
‫fait partie de ce cours.
‫Alors, comme avant, allez-y et récupérez
‫le projet de démarrage à partir des fichiers de cours.
‫Je l'ai déjà ici.
‫Je l'ai ouvert dans mon code VS.
‫Jetons un coup d'œil très rapide à ce que nous avons ici.
‫Nous avons le fichier de configuration
‫le plus joli comme nous l'avons configuré comme avant.
‫J'ai également un fichier de configuration pour ESLint, et ESLint que
‫nous n'avons pas configuré à ce stade, mais nous
‫allons le faire
‫également plus tard dans cette section.
‫Pour l'instant, je veux juste
‫commencer à coder et ne pas m'inquiéter de pelucher notre code.
‫Linting est juste pour corriger certaines erreurs.
‫Mais encore une fois, nous allons le faire plus tard.
‫Ici, nous avons juste quelques fichiers pour plus
‫tard, comme des css, des images, d'accord, et maintenant aussi, par exemple, des
‫données dont nous avons besoin pour construire notre application.
‫Encore une fois, nous allons commencer à utiliser ces données ici tout
‫au long de cette section.
‫Quoi qu'il en soit, nous avons maintenant un tout nouveau projet.
‫La première chose que nous faisons habituellement avec un nouveau projet
‫est de créer le package. json, comme
‫je l'ai déjà mentionné.
‫Nous l'avons fait dans le projet
‫nodefarm, et maintenant nous allons le faire ici aussi.
‫J'ouvre le terminal intégré.
‫Vous pouvez le faire en appuyant sur ce raccourci ici ou en venant
‫simplement ici pour Afficher, puis Terminal.
‫Permettez-moi de le mettre un peu pour que vous puissiez le voir.
‫N'oubliez pas que la commande est npm init.
‫Nous avons donné un nom au projet.
‫Ça s'appelle natours.
‫Oh d'accord, il ne peut pas avoir de majuscules.
‫Faisons ça encore.
‫La version est une, description,
‫disons simplement nœud d'apprentissage, express, et mongoDB, mongoDB.
‫Point d'entrée, index. js, en fait,
‫nous allons utiliser app. js maintenant.
‫Appelons ça une application. js.
‫Nous n'avons pas de commande de test, pas de
‫git, pas de mots-clés, l'auteur c'est moi, et c'est tout, alors d'accord.
‫Ici, nous avons le paquet. json.
‫Comme avant, rien de nouveau ici.
‫Il est maintenant temps d'installer Express.
‫Npm j'exprime.
‫Je vais utiliser Express pour
‫ici, qui est sur
‫le point d'enregistrer, la dernière version, mais
‫depuis quelque temps, l'équipe Express travaille sur la version 5.
‫C'est une version majeure qui pourrait
‫introduire des changements de rupture si vous l'installiez.
‫Maintenant, en fait, il n'y
‫a pas beaucoup de choses qui changent dans la version 5,
‫mais pour vous en assurer, veuillez installer Express à la version 4 comme je le fais.
‫Pour ce faire, appuyez simplement sur 4.
‫Cela installera ensuite la dernière version à l'intérieur de 4 avec les dernières versions
‫mineures et patch, donc 4. 16. 4.
‫C'est la version que j'utilise maintenant dans
‫ce cours, et la vôtre sera probablement une
‫version ultérieure, mais tant que vous avez les 4 ici
‫au début, ça devrait aller.
‫Vous voyez qu'il a en
‫fait créé notre dossier de modules de nœuds ici.
‫Maintenant, nous sommes prêts à commencer.
‫Je crée un nouveau fichier et il s'appelle app. js.
‫C'est une sorte de convention d'avoir toute la configuration
‫Express dans l'application. js.
‫C'est ce que j'utilise ici maintenant.
‫Nous avons maintenant l'avertissement qu'il ne
‫peut pas charger ESLint.
‫Encore une fois, nous allons configurer cela plus
‫tard tout au long de cette section.
‫Alors, utilisons maintenant Express.
‫Je vais exiger bien sûr, le forfait Express.
‫Rien de nouveau à ce stade.
‫Donnez-lui un coffre-fort.
‫Vous voyez que l'aperçu a déjà fait sa magie
‫ici en ajoutant ce point-virgule et en ajoutant également
‫cette nouvelle ligne ici.
‫Nous avons importé Express, et maintenant ce que nous
‫faisons est de créer une variable appelée app.
‫Encore une fois, c'est une sorte de norme.
‫Donc application et résultat assigné de l'appel express.
‫C'est en fait ça.
‫Ceci est une fonction qui, lors de
‫l'appel, ajoutera un tas de méthodes à notre variable d'application ici.
‫Le premier que nous allons utiliser
‫est en fait app. écouter
‫pour démarrer un serveur.
‫C'est un peu similaire à ce que
‫nous avons fait auparavant avec le package http dans les sections précédentes, n'est-ce pas.
‫Donc, encore une fois, gardez à
‫l'esprit qu'Express est 100% sans js sous le capot, et
‫certaines des choses
‫fonctionnent de manière très similaire ici dans Express.
‫D'accord, encore une fois, cela nous facilite
‫un peu la vie en
‫nous enlevant une partie de la complexité.
‫Comme avant, dans app. écoutez, nous
‫collons dans le port.
‫Créons en fait une variable pour cela ici avant.
‫Port et disons 3000 pour l'instant.
‫Nous allons changer cela un peu plus tard.
‫Nous collons le port et une fonction de rappel.
‫Encore une fois, c'est
‫la fonction de rappel qui sera appelée dès
‫que le serveur commencera à écouter.
‫Faisons simplement une console. connectez-vous ici, application
‫en cours d'exécution sur le port.
‫D'accord, c'est donc notre serveur qui
‫écoute déjà en fait.
‫Maintenant, ce que nous devons faire ensuite est de définir l'itinéraire.
‫Et encore une fois,
‫nous avons déjà en quelque sorte
‫défini des routes auparavant dans le projet nodefarm,
‫souvenez-vous de cela, mais cela fonctionne très différemment avec Express.
‫N'oubliez pas que le routage
‫signifie essentiellement déterminer comment une application répond
‫à une certaine requête client, donc à une certaine URL.
‫Et en fait, ce n'est pas
‫seulement une URL mais aussi
‫la méthode http qui est utilisée pour cette requête.
‫Rappelez-vous cela de la conférence http que nous avons eue auparavant.
‫Comment fait-on cela?
‫Eh bien, c'est très simple dans Express.
‫Tout ce que nous faisons, c'est app, puis la
‫méthode http à laquelle nous voulons répondre, et
‫commençons par la
‫plus simple qui est get, puis l'URL.
‫Nous spécifions simplement le type d'URL racine ici.
‫Encore une fois, la route est essentiellement
‫l'URL, qui dans ce cas, n'est que cette URL
‫racine et également la méthode http, qui est get dans ce cas.
‫Maintenant, que voulons-nous réellement qu'il se
‫passe lorsque quelqu'un accède à cette URL avec une demande d'obtention ?
‫Eh bien, quoi que
‫nous voulions faire, nous devons le spécifier dans
‫une fonction de rappel, que nous spécifions comme deuxième argument.
‫Nous avons une
‫fonction de rappel comme celle-ci, et
‫cette fonction de rappel peut accepter quelques arguments.
‫La plus basique, et celles
‫dont nous avons généralement toujours besoin sont get request, entity response.
‫À cet égard, c'est encore une fois très similaire à ce
‫que nous avons fait auparavant dans le projet nodefarm.
‫À l'époque, lorsque nous démarrions notre
‫serveur, nous avions également accès à
‫l'objet request et response.
‫Maintenant, ils sont un peu différents ici dans Express.
‫Ils ont beaucoup plus de données et de méthodes
‫sur eux, mais l'idée est exactement la même.
‫Vous voyez donc que les applications
‫Express et donc aussi les applications de nœud
‫d'ailleurs, concernent toutes les demandes et les réponses, simplement
‫parce que c'est ainsi que le Web fonctionne réellement,
‫comme vous l'avez appris dans les sections précédentes.
‫Que voulons-nous faire maintenant ?
‫Eh bien, tout ce que nous voulons faire,
‫c'est renvoyer des données très rapidement.
‫Nous pouvons utiliser l'objet de réponse
‫et à partir de là, nous pouvons utiliser la méthode send
‫et spécifier quelque chose que nous voulons renvoyer.
‫Bonjour du coté serveur.
‫Juste une nouvelle chaîne que nous voulons renvoyer.
‫Nous pouvons également spécifier le code d'état
‫et c'est très simple.
‫Tout ce que nous avons à faire est
‫d'ajouter le statut
‫avant d'envoyer la chaîne au client.
‫La méthode status, et ici, nous
‫spécifions notre code.
‫Et encore une fois, nous allons utiliser 200 pour ok.
‫C'est en fait tout ce que nous avons à faire.
‫Testons cela très
‫rapidement, puis ajoutons-y d'autres éléments.
‫Utilisons l'application nodemon. js.
‫Voyons ce qui se
‫passe et notre application fonctionne sur le port 3000.
‫Super.
‫Et comment testons-nous maintenant cette API ?
‫Eh bien, c'est pourquoi nous avons installé Postman.
‫Ouvrons Postman.
‫En fait, il est toujours là depuis la dernière conférence.
‫Allons de l'avant et
‫supprimons ceci et écrivons l'URL, ou en fait,
‫l'adresse IP de l'hôte local, puis notre port.
‫C'est exactement la même chose que nous avons
‫fait dans le projet nodefarm.
‫Nous touchons juste la racine.
‫On peut écrire le slash ou ça marche
‫tout de même sans rien.
‫Envoyons ceci et en effet, c'est parti.
‫Bonjour du coté serveur.
‫C'est incroyable, ça marche déjà.
‫Juste pour être sûr, nous
‫obtiendrions bien sûr exactement le même résultat dans un navigateur.
‫Si je copie ceci ici, vous verrez le même résultat.
‫Mais encore une fois,
‫nous allons utiliser Postman car cela nous facilite beaucoup les tests d'API.
‫Vous verrez, une fois que nous commencerons vraiment à
‫utiliser de plus en plus de fonctionnalités de cette excellente application.
‫Maintenant, en revenant ici, ajoutons quelques éléments
‫supplémentaires car send renvoie simplement cette chaîne
‫ici au client, mais il est également très
‫facile d'envoyer du json au client.
‫Au lieu d'utiliser send, utilisons en fait json.
‫La méthode json, puis ici, nous
‫pouvons coller un objet.
‫Faisons comme ça.
‫Disons que c'est le message.
‫Et puis juste un autre domaine ici, natours.
‫D'accord, et maintenant vous voyez, cet
‫aperçu ici a automatiquement formaté cela pour nous et
‫ils le veulent également dans une autre ligne.
‫Ah d'accord, il nous manque une virgule ici bien sûr.
‫Mais l'extension de prévisualisation l'a toujours affichée
‫ici pour une raison quelconque.
‫Mais bien sûr, cela n'a pas vraiment d'importance.
‫C'est juste une question de formatage.
‫Voyons ce qui se passe maintenant.
‫Nous avons maintenant notre json bien formaté ici.
‫Nous donne ici toutes ces différentes
‫couleurs pour les clés et pour les valeurs.
‫Ici, nous avons les codes d'état.
‫Ici, nous avons le temps qu'il a fallu pour faire cette demande.
‫Nous avons également la taille de la réponse.
‫On pourrait, par exemple, changer le code ici très facilement.
‫404 n'est pas trouvé, rappelez-vous.
‫Faites-le à nouveau, et vous voyez ici, 404, introuvable.
‫C'est le genre
‫de choses pour lesquelles Postman est vraiment génial.
‫Augmentons en fait la taille de tout cela.
‫Continuons maintenant, ajoutez simplement quelque chose d'autre ici.
‫Juste quelque chose de très facile.
‫N'oubliez pas que tout cela est juste pour
‫le tester, pour nous mouiller les pieds et
‫commencer à acquérir un peu d'expérience.
‫N'oubliez pas qu'il s'agit ici de la méthode http pour la requête.
‫Cette réponse que nous envoyons ici, donc
‫celle-ci ici, n'est envoyée
‫que lorsque cette méthode get est envoyée à notre serveur sur cette URL.
‫Permettez-moi de vous le montrer.
‫Si nous faisons, par exemple, un post.
‫C'est encore une fois très facile avec Postman.
‫Si nous publions un article, nous n'obtiendrons rien.
‫Au lieu de cela, Express renvoie automatiquement ce
‫code html ici qui dit impossible de publier, puis
‫avec un 404, introuvable.
‫C'est parce que nous n'avons aucune
‫route définie pour cette URL et pour cette méthode http.
‫Faisons-le maintenant très rapidement.
‫Alors post, nous voulons la même URL, la requête
‫et l'objet de réponse.
‫Disons simplement res. envoyer, vous pouvez
‫publier sur ce point de terminaison.
‫Juste pour que vous voyiez
‫que c'est ainsi que nous envoyons
‫différentes réponses pour différentes méthodes http dans la requête.
‫Exécutons cela à nouveau, et en effet, vous
‫pouvez publier sur ce point de terminaison avec un code d'état 200.
‫Il s'agit en fait de celui
‫par défaut lorsque nous n'en spécifions aucun dans nos codes.
‫Ici, nous avons 404 qui n'est pas correct.
‫Mais encore une fois, 200 est en fait la valeur par défaut.
‫Une autre chose rapide
‫que je veux vous montrer est qu'en utilisant cette
‫méthode json ici, par exemple, cela définira
‫automatiquement notre type de contenu sur l'application json,
‫alors n'oubliez pas que nous l'avons fait manuellement dans
‫l'application nodefarm lorsque nous avons créé notre API très simple.
‫À l'époque, nous renvoyions également du json, mais
‫nous devions ensuite définir manuellement que le
‫contenu était json afin que le navigateur sache à
‫quoi il s'attendait.
‫Mais Express nous enlève ce travail.
‫Vérifions cela en fait.
‫Retourner pour obtenir.
‫Ici, nous avons nos en-têtes de résultats.
‫Ici, vous voyez que
‫le type de contenu est bien défini sur l'application json.
‫Express envoie alors également automatiquement
‫un tas d'autres en-têtes,
‫par exemple, celui-ci alimenté par Express ou la date ou la connexion.
‫Mais encore une fois, nous allons
‫nous occuper davantage des en-têtes un peu plus tard dans le cours.
‫Ce n'était qu'un exemple très petit et simple ici, mais vous
‫pouvez déjà commencer à comprendre
‫à quel point il est plus facile de faire ce genre de réponses.
‫Pour créer cette route afin de répondre à la demande du client, d'une manière beaucoup
‫plus simple que dans un simple nœud. js.
‫Cela étant dit, dans la
‫vidéo suivante, nous allons tout apprendre sur la création
‫d'API à l'aide de l'architecture reste, afin qu'après cela, nous
‫puissions enfin commencer à créer notre API.