1 00:00:01,260 --> 00:00:02,700 ‫Instructeur : Bon retour. 2 00:00:02,700 --> 00:00:06,280 ‫J'espère donc que vous appréciez cette section jusqu'à présent et que 3 00:00:06,280 --> 00:00:09,800 ‫vous aimez travailler avec Node. js. 4 00:00:09,800 --> 00:00:13,100 ‫Passons maintenant à notre projet 5 00:00:13,100 --> 00:00:17,573 ‫et construisons une API Web extrêmement simple. 6 00:00:19,430 --> 00:00:23,290 ‫Maintenant, pour commencer, qu'est-ce qu'une API ? 7 00:00:23,290 --> 00:00:25,759 ‫Eh bien, la réponse longue, 8 00:00:25,759 --> 00:00:30,450 ‫vous allez l'apprendre dans l'une des sections suivantes, mais pour l'instant, la 9 00:00:30,450 --> 00:00:34,510 ‫réponse courte, au moins dans ce contexte d'API Web, en 10 00:00:34,510 --> 00:00:39,510 ‫gros, une API est un service auquel nous pouvons demander des données, donc 11 00:00:39,750 --> 00:00:43,880 ‫dans ce cas, les données que l'utilisateur souhaite demander sont des 12 00:00:43,880 --> 00:00:46,470 ‫données sur les produits que nous proposons 13 00:00:46,470 --> 00:00:50,070 ‫dans cette ferme de nœuds, donc dans ce projet. 14 00:00:50,070 --> 00:00:54,360 ‫J'ai donc ici ce dossier dev-data, et là-dedans, j'ai un fichier JSON, 15 00:00:54,360 --> 00:00:58,870 ‫et JSON, au cas où vous ne le sauriez pas, est un 16 00:00:58,870 --> 00:01:01,500 ‫format de texte très simple qui 17 00:01:01,500 --> 00:01:04,250 ‫ressemble beaucoup à un objet JavaScript, donc 18 00:01:04,250 --> 00:01:07,720 ‫ça ressemble à ça , et nous pouvons avoir 19 00:01:07,720 --> 00:01:11,010 ‫des tableaux, ce que nous avons en fait, 20 00:01:11,010 --> 00:01:14,630 ‫nous avons donc un grand tableau, qui contient ensuite ces 21 00:01:14,630 --> 00:01:18,400 ‫cinq objets, et chaque objet a ensuite l'ID, le nom 22 00:01:18,400 --> 00:01:20,160 ‫du produit, l'image, etc. 23 00:01:20,160 --> 00:01:24,270 ‫Maintenant, chacun d'eux doit être une chaîne pour chacune des clés, 24 00:01:24,270 --> 00:01:26,593 ‫puis nous avons la valeur. 25 00:01:29,828 --> 00:01:34,010 ‫Donc, fondamentalement, ces données ici sont ce que notre API 26 00:01:34,010 --> 00:01:36,673 ‫enverra au client à la demande. 27 00:01:37,840 --> 00:01:40,763 ‫Nous aurons donc encore un autre itinéraire ici. 28 00:01:43,250 --> 00:01:48,250 ‫Donc ici, sinon si le nom du chemin est égal à /api. 29 00:01:55,980 --> 00:01:59,580 ‫Et pour l'instant, en tant qu'espace réservé, nous renverrons 30 00:02:04,070 --> 00:02:05,703 ‫simplement l'API comme celle-ci. 31 00:02:08,520 --> 00:02:12,750 ‫Donc, ce que nous voulons faire maintenant, c'est lire 32 00:02:12,750 --> 00:02:17,500 ‫les données de ce fichier ici, puis analyser JSON en JavaScript, 33 00:02:17,500 --> 00:02:20,520 ‫puis renvoyer ce résultat au client. 34 00:02:20,520 --> 00:02:24,053 ‫Donc quelque chose de très simple et alors mettons-nous au travail. 35 00:02:26,430 --> 00:02:29,350 ‫Donc, la première approche consiste à suivre 36 00:02:29,350 --> 00:02:33,400 ‫cette route, puis à lire le fichier ici en utilisant la 37 00:02:33,400 --> 00:02:36,350 ‫fonction de lecture de fichier, n'est-ce pas ? 38 00:02:36,350 --> 00:02:37,853 ‫Commençons donc par le faire. 39 00:02:40,110 --> 00:02:44,393 ‫Donc fs. , et c'est en fait 40 00:02:46,287 --> 00:02:50,110 ‫readFile, pas fileRead, donc readFile, puis le nom du fichier. 41 00:02:50,110 --> 00:02:52,593 ‫Maintenant, rappelez-vous comment je vous ai dit plus 42 00:02:52,593 --> 00:02:56,260 ‫tôt que ce n'est pas le seul moyen de localiser notre fichier 43 00:02:56,260 --> 00:02:58,223 ‫dans le système de fichiers. 44 00:02:59,300 --> 00:03:01,460 ‫Pour l'instant, utilisons-le encore, mais une fois 45 00:03:01,460 --> 00:03:03,510 ‫que nous l'aurons écrit ici, je vous 46 00:03:03,510 --> 00:03:04,910 ‫montrerai un autre moyen. 47 00:03:05,790 --> 00:03:10,790 ‫Donc, une note, ce point ici fait en fait référence au répertoire à partir 48 00:03:11,260 --> 00:03:14,633 ‫duquel nous exécutons la commande node dans le terminal. 49 00:03:15,740 --> 00:03:18,420 ‫Donc, encore une fois, ce 50 00:03:18,420 --> 00:03:21,414 ‫point ici représente maintenant ce dossier actuel ici 51 00:03:21,414 --> 00:03:25,800 ‫car c'est là que nous exécutons réellement la commande node, donc 52 00:03:25,800 --> 00:03:28,600 ‫dans ce dossier 1-node-farm, qui est de 53 00:03:28,600 --> 00:03:32,270 ‫toute façon notre répertoire de travail actuel dans ce cas, 54 00:03:32,270 --> 00:03:35,230 ‫mais nous pourrions avoir exécutez la commande 55 00:03:35,230 --> 00:03:38,260 ‫node ailleurs, et le point signifierait autre chose. 56 00:03:38,260 --> 00:03:42,860 ‫Ainsi, par exemple, nous pourrions parfaitement trouver, aller sur le bureau 57 00:03:42,860 --> 00:03:46,380 ‫et y exécuter le nœud, puis spécifier le 58 00:03:46,380 --> 00:03:50,600 ‫chemin complet à indexer. js, mais nous pourrions le faire, 59 00:03:50,600 --> 00:03:55,080 ‫mais dans ce cas, le point signifierait le bureau, donc si nous lancions le 60 00:03:55,080 --> 00:03:57,390 ‫script à partir du bureau, alors ceci 61 00:03:57,390 --> 00:03:59,890 ‫ici, ce point signifierait le bureau, et 62 00:03:59,890 --> 00:04:03,200 ‫ce n'est donc pas toujours idéal , et par conséquent, 63 00:04:03,200 --> 00:04:05,290 ‫il existe un meilleur moyen. 64 00:04:05,290 --> 00:04:08,230 ‫Donc tout Node. js, ils 65 00:04:08,230 --> 00:04:12,790 ‫ont accès à une variable appelée dirname, et cette 66 00:04:12,790 --> 00:04:17,200 ‫variable se traduit toujours dans le répertoire dans lequel 67 00:04:17,200 --> 00:04:21,078 ‫se trouve le script que nous exécutons actuellement. 68 00:04:21,078 --> 00:04:24,170 ‫Donc dans ce cas, c'est en fait au 69 00:04:24,170 --> 00:04:28,410 ‫même endroit parce que index. js se trouve également 70 00:04:28,410 --> 00:04:31,980 ‫dans ce dossier de ferme de nœuds, mais encore 71 00:04:31,980 --> 00:04:34,280 ‫une fois, pour les raisons que 72 00:04:34,280 --> 00:04:38,670 ‫j'ai mentionnées précédemment, il est souvent préférable d'utiliser la variable dirname, 73 00:04:38,670 --> 00:04:41,343 ‫alors faisons-le, et pour cela, nous créons 74 00:04:44,400 --> 00:04:46,690 ‫une chaîne de modèle, puis nous 75 00:04:46,690 --> 00:04:51,567 ‫utilisons la variable, c'est donc __dirname, donc qui représente le nom du répertoire. 76 00:04:54,870 --> 00:04:57,870 ‫Et donc généralement, nous le faisons comme ça. 77 00:04:57,870 --> 00:04:59,850 ‫Il y a maintenant une exception 78 00:04:59,850 --> 00:05:01,963 ‫à cette règle, qui est la fonction require. 79 00:05:03,224 --> 00:05:05,140 ‫Ainsi, lorsque nous avons besoin 80 00:05:05,140 --> 00:05:08,160 ‫de modules, nous pouvons en fait exiger nos propres modules, 81 00:05:08,160 --> 00:05:10,650 ‫et nous allons le faire un peu plus 82 00:05:10,650 --> 00:05:13,800 ‫tard, comme dans la prochaine, ou dans l'une des deux 83 00:05:13,800 --> 00:05:18,200 ‫prochaines vidéos, et là-dedans, le point signifie également le fonctionnement actuel répertoire et non 84 00:05:18,200 --> 00:05:20,863 ‫l'endroit à partir duquel nous exécutons le script. 85 00:05:21,965 --> 00:05:25,270 ‫Gardez donc à l'esprit que la fonction require est 86 00:05:25,270 --> 00:05:27,780 ‫une exception à cette règle, mais généralement, 87 00:05:27,780 --> 00:05:30,050 ‫le point est l'endroit où 88 00:05:30,050 --> 00:05:35,050 ‫le script s'exécute et __dirname est l'endroit où se trouve le fichier actuel. 89 00:05:37,920 --> 00:05:42,920 ‫Bon, maintenant, spécifions l'encodage du fichier utf-8, puis notre 90 00:05:43,840 --> 00:05:48,840 ‫fonction de rappel, qui est d'abord une erreur, rappelez-vous, 91 00:05:49,900 --> 00:05:54,900 ‫et nous avons donc maintenant accès à ces données. 92 00:05:56,700 --> 00:05:59,920 ‫Maintenant, les données sont en JSON, et donc en JavaScript, nous avons 93 00:05:59,920 --> 00:06:04,023 ‫quelque chose de intégré qui s'appelle JSON. analyser. 94 00:06:06,290 --> 00:06:08,600 ‫Et donc cela prendra le code 95 00:06:08,600 --> 00:06:10,190 ‫JSON, qui est 96 00:06:10,190 --> 00:06:14,400 ‫en fait une chaîne, et le transformera ensuite automatiquement en JavaScript, donc 97 00:06:14,400 --> 00:06:17,593 ‫un objet ou un tableau JavaScript dans ce cas. 98 00:06:19,240 --> 00:06:21,117 ‫Appelons celui-ci 99 00:06:23,857 --> 00:06:26,743 ‫productData, puis examinons-le également rapidement. 100 00:06:32,500 --> 00:06:34,853 ‫Donc dans la console dans ce cas. 101 00:06:36,520 --> 00:06:40,740 ‫Alors, redémarrez le serveur, et maintenant, n'oubliez pas d'appuyer 102 00:06:40,740 --> 00:06:45,740 ‫sur la route /api, et oh, que se passe-t-il ici ? 103 00:06:47,520 --> 00:06:49,470 ‫Oh, nous avons en fait redémarré le serveur. 104 00:06:52,545 --> 00:06:54,397 ‫Et maintenant, nous obtenons une 105 00:06:55,330 --> 00:06:58,020 ‫API de réponse, et jetons maintenant un coup 106 00:06:58,020 --> 00:07:01,140 ‫d'œil ici, en fait, à l'objet de données de produit. 107 00:07:01,140 --> 00:07:04,340 ‫C'est donc juste un bel objet, avec toutes les 108 00:07:04,340 --> 00:07:09,340 ‫données que nous avions dans ces données. fichier json. 109 00:07:09,620 --> 00:07:13,450 ‫Très bien, la prochaine étape consiste maintenant à renvoyer 110 00:07:13,450 --> 00:07:16,653 ‫ces données en tant que réponse. 111 00:07:17,640 --> 00:07:20,180 ‫Maintenant cette réponse. La méthode end 112 00:07:20,180 --> 00:07:24,953 ‫ici doit en fait renvoyer une chaîne et non un objet ici. 113 00:07:25,890 --> 00:07:28,510 ‫Et donc en fait, ce que nous voulons renvoyer, 114 00:07:28,510 --> 00:07:33,230 ‫ce sont les données directement, donc les données sont une chaîne que nous avons ensuite transformée 115 00:07:33,230 --> 00:07:37,410 ‫en objet à l'aide de JSON. parse, mais pour l'instant, 116 00:07:37,410 --> 00:07:41,730 ‫nous n'aurions pas besoin de le faire, mais je l'ai fait quand 117 00:07:41,730 --> 00:07:44,445 ‫même parce que nous en aurons besoin 118 00:07:44,445 --> 00:07:48,130 ‫plus tard lorsque nous commencerons à créer nos modèles HTML. 119 00:07:48,130 --> 00:07:50,710 ‫C'est à ce moment-là que nous aurons besoin 120 00:07:50,710 --> 00:07:52,890 ‫de ces données au format JavaScript. 121 00:07:52,890 --> 00:07:56,280 ‫Pour l'instant, nous voulons simplement renvoyer la chaîne réelle 122 00:07:56,280 --> 00:07:57,453 ‫que nous recevons. 123 00:07:59,146 --> 00:08:02,380 ‫Maintenant, avant de pouvoir faire cela, nous devons 124 00:08:02,380 --> 00:08:04,220 ‫en fait spécifier, nous 125 00:08:04,220 --> 00:08:09,220 ‫devons donc dire au navigateur que nous renvoyons JSON, donc comme avant, lorsque 126 00:08:10,110 --> 00:08:14,160 ‫nous définissons le type de contenu sur text/html, nous devons 127 00:08:14,160 --> 00:08:17,703 ‫maintenant dire à un navigateur que nous envoyons JSON. 128 00:08:19,060 --> 00:08:24,060 ‫Alors on dit rés. writeHead comme avant, et 129 00:08:24,160 --> 00:08:27,260 ‫maintenant nous utilisons le code 130 00:08:27,260 --> 00:08:31,830 ‫d'état 200, qui signifie OK, puis l'objet des en-têtes. 131 00:08:31,830 --> 00:08:35,330 ‫Dans ce cas, ce ne sera qu'un, 132 00:08:40,320 --> 00:08:45,320 ‫donc Content-type, et lorsque nous envoyons JSON, nous devons dire application/json. 133 00:08:49,570 --> 00:08:53,240 ‫Donc, pour HTML, c'est text/html, 134 00:08:53,240 --> 00:08:56,323 ‫pour JSON, c'est 135 00:08:58,330 --> 00:09:01,933 ‫application/json, et regardons maintenant cela. 136 00:09:05,200 --> 00:09:08,183 ‫Rechargez le serveur ici très rapidement, et 137 00:09:12,600 --> 00:09:17,600 ‫en effet, ici, nous avons notre API qui renvoie toutes les données 138 00:09:17,690 --> 00:09:20,053 ‫sur nos cinq produits. 139 00:09:20,950 --> 00:09:25,800 ‫Tellement génial, c'est génial, et c'est génial, mais ce n'est en 140 00:09:25,800 --> 00:09:27,970 ‫fait pas parfait, car ce 141 00:09:27,970 --> 00:09:31,463 ‫n'est pas vraiment efficace à 100%, et 142 00:09:32,546 --> 00:09:36,780 ‫c'est parce que chaque fois que quelqu'un atteint cette 143 00:09:36,780 --> 00:09:40,640 ‫route / api, le fichier devra être lu 144 00:09:40,640 --> 00:09:42,640 ‫puis renvoyé . 145 00:09:42,640 --> 00:09:45,720 ‫Au lieu de cela, ce que nous pouvons faire, c'est 146 00:09:45,720 --> 00:09:49,110 ‫simplement lire le fichier une fois au début, puis chaque fois 147 00:09:49,110 --> 00:09:51,600 ‫que quelqu'un atteint cette route, renvoyer simplement les 148 00:09:51,600 --> 00:09:55,273 ‫données sans avoir à les lire à chaque fois qu'un utilisateur le demande. 149 00:09:56,410 --> 00:09:58,180 ‫Cela a-t-il du sens? 150 00:09:58,180 --> 00:10:01,423 ‫Eh bien, ce que je vais faire, c'est mettre ça ici. 151 00:10:03,550 --> 00:10:07,680 ‫D'accord, et bien sûr, je n'ai pas besoin de tout ça, 152 00:10:07,680 --> 00:10:10,530 ‫donc ce n'est pas ici, et ce 153 00:10:10,530 --> 00:10:12,720 ‫n'est pas ici, et en 154 00:10:12,720 --> 00:10:15,630 ‫fait, ce sera un peu différent, et c'est 155 00:10:15,630 --> 00:10:19,570 ‫parce que nous allons maintenant utiliser la version synchrone, et je 156 00:10:19,570 --> 00:10:22,280 ‫sais ce que vous pensez, c'est que 157 00:10:22,280 --> 00:10:25,440 ‫la version synchrone bloque l'exécution du code, non ? 158 00:10:25,440 --> 00:10:27,570 ‫Et bien que cela soit vrai, dans 159 00:10:27,570 --> 00:10:29,580 ‫ce cas, ce n'est pas du 160 00:10:29,580 --> 00:10:32,040 ‫tout un problème, et c'est parce que le 161 00:10:32,040 --> 00:10:36,240 ‫code de niveau supérieur n'est en fait exécuté qu'une seule fois dès le début. 162 00:10:36,240 --> 00:10:39,260 ‫Seulement cette fonction de rappel, par exemple, ici, 163 00:10:39,260 --> 00:10:43,440 ‫celle de createServer, donc cette fonction ici, c'est ce qui est exécuté 164 00:10:43,440 --> 00:10:46,160 ‫à chaque fois qu'il y a 165 00:10:46,160 --> 00:10:50,260 ‫une nouvelle requête, mais pas un code qui se trouve ici. 166 00:10:50,260 --> 00:10:53,210 ‫Le code qui est en dehors des 167 00:10:53,210 --> 00:10:57,500 ‫fonctions de rappel, donc le code dit de niveau supérieur, n'est 168 00:10:57,500 --> 00:11:01,500 ‫exécuté qu'une fois le programme démarré, et donc dans cette situation, 169 00:11:01,500 --> 00:11:04,660 ‫peu importe s'il bloque l'exécution, car encore une 170 00:11:04,660 --> 00:11:07,350 ‫fois, cela n'arrive qu'une seule fois 171 00:11:07,350 --> 00:11:11,160 ‫et seulement lorsque le code démarre réellement, n'est-ce pas ? 172 00:11:11,160 --> 00:11:12,820 ‫Logique? 173 00:11:12,820 --> 00:11:16,060 ‫Et donc nous allons utiliser la version de synchronisation maintenant parce 174 00:11:16,060 --> 00:11:19,100 ‫qu'il est en fait plus facile de gérer ensuite ces 175 00:11:19,100 --> 00:11:23,060 ‫données, car cela met simplement les données dans une variable que nous ne 176 00:11:23,060 --> 00:11:25,253 ‫pouvons pas utiliser tout de suite. 177 00:11:27,930 --> 00:11:32,180 ‫Ne vous inquiétez donc pas du fait que cette fonction est bloquante car, encore 178 00:11:32,180 --> 00:11:34,800 ‫une fois, elle est dans le code de niveau 179 00:11:34,800 --> 00:11:37,200 ‫supérieur et n'est exécutée qu'une seule fois. 180 00:11:37,200 --> 00:11:39,410 ‫Le secret ici est simplement 181 00:11:39,410 --> 00:11:42,530 ‫de savoir quel code n'est exécuté qu'une seule fois 182 00:11:42,530 --> 00:11:45,890 ‫au début, et quel code est exécuté encore et encore, 183 00:11:45,890 --> 00:11:49,663 ‫et est donc problématique lors du blocage de la boucle d'événement. 184 00:11:50,560 --> 00:11:52,240 ‫Et bien sûr, tout 185 00:11:52,240 --> 00:11:55,990 ‫au long du reste de ce grand, grand cours, vous apprendrez cela. 186 00:11:55,990 --> 00:11:58,650 ‫Vous apprendrez donc tout sur la boucle d'événement, et quel 187 00:11:58,650 --> 00:12:01,990 ‫code bloque et lequel ne bloque pas, et pourquoi, et ce n'est donc 188 00:12:01,990 --> 00:12:04,760 ‫que la première fois que je le mentionne, mais ce 189 00:12:04,760 --> 00:12:06,560 ‫ne sera pas la dernière fois. 190 00:12:07,620 --> 00:12:11,173 ‫Vous m'entendrez répéter les mêmes choses encore et encore. 191 00:12:14,180 --> 00:12:18,550 ‫Donc, il suffit d'appeler ces données, et bien sûr, nous n'avons besoin 192 00:12:18,550 --> 00:12:20,423 ‫de rien de tout cela. 193 00:12:21,550 --> 00:12:24,253 ‫Déplaçons ça ici, et c'est tout. 194 00:12:29,040 --> 00:12:32,120 ‫Ainsi, avant que quoi que ce soit ne se produise, il lira 195 00:12:32,120 --> 00:12:34,340 ‫les données du fichier JSON en données. 196 00:12:34,340 --> 00:12:38,740 ‫Il analysera ensuite cela dans un objet. 197 00:12:38,740 --> 00:12:43,043 ‫Appelons-le dataObject ici, et donc ce que nous allons faire ici, 198 00:12:44,370 --> 00:12:48,060 ‫c'est de ne pas lire ce fichier à chaque fois 199 00:12:48,060 --> 00:12:51,030 ‫qu'il y a une demande, et à 200 00:12:51,030 --> 00:12:55,960 ‫la place, renvoyer simplement les données que nous avons maintenant dans notre code 201 00:12:55,960 --> 00:12:57,283 ‫de niveau supérieur. 202 00:13:04,010 --> 00:13:08,450 ‫Donc, ces données ici viennent maintenant d'ici parce que, bien sûr, ce code dans 203 00:13:08,450 --> 00:13:11,060 ‫la fonction de rappel a accès au 204 00:13:11,060 --> 00:13:15,543 ‫code de niveau supérieur à cause de la chaîne de portée, n'est-ce pas ? 205 00:13:17,510 --> 00:13:21,000 ‫Annuler, recommencer, et juste pour vous prouver que cela 206 00:13:21,000 --> 00:13:23,803 ‫fonctionne toujours, et c'est le cas. 207 00:13:25,070 --> 00:13:28,560 ‫Tellement parfait, et c'est mieux, c'est plus efficace, oh, et pourquoi 208 00:13:28,560 --> 00:13:30,023 ‫ai-je fermé ça ? 209 00:13:31,470 --> 00:13:34,863 ‫Très bien, ouvrons-le à nouveau très rapidement. 210 00:13:37,890 --> 00:13:38,793 ‫Alors on y va. 211 00:13:41,430 --> 00:13:45,890 ‫C'est donc notre API très simple, qui permet désormais à l'utilisateur de 212 00:13:45,890 --> 00:13:49,430 ‫demander simplement toutes les données sur notre application avec 213 00:13:49,430 --> 00:13:52,353 ‫un seul appel d'API, en gros. 214 00:13:53,810 --> 00:13:56,740 ‫Nous avons donc ajouté une autre route 215 00:13:56,740 --> 00:13:59,340 ‫ici, /api, puis nous lisons le 216 00:13:59,340 --> 00:14:02,930 ‫fichier de manière synchrone, le plaçons dans cet objet, 217 00:14:02,930 --> 00:14:06,010 ‫puis renvoyons simplement cet objet en réponse, mais 218 00:14:06,010 --> 00:14:11,010 ‫avant cela, en spécifiant que nous renvoyons application/json, donc que le navigateur sache 219 00:14:11,353 --> 00:14:15,200 ‫exactement à quoi s'attendre, et dans les deux prochaines vidéos, 220 00:14:15,200 --> 00:14:16,720 ‫nous commencerons en 221 00:14:16,720 --> 00:14:19,730 ‫fait à créer l'interface utilisateur, c'est donc la 222 00:14:19,730 --> 00:14:22,673 ‫partie la plus excitante, n'est-ce pas ?