1 00:00:03,680 --> 00:00:07,640 Afin de développer notre application, 2 00:00:07,640 --> 00:00:11,025 nous voulons configurer un serveur 3 00:00:11,025 --> 00:00:14,890 simple qui servira nos données qui sont requises par notre application. 4 00:00:14,890 --> 00:00:18,440 Jusqu'à présent, nous n'avons pas assez appris comment 5 00:00:18,440 --> 00:00:22,090 nous pouvons configurer un serveur qui servira une API REST. 6 00:00:22,090 --> 00:00:26,410 Au lieu de cela, nous utiliserons un module de noeud simple appelé json-server, 7 00:00:26,410 --> 00:00:32,990 qui nous aide à mettre en place rapidement un serveur simple qui servira les données qui lui sont données 8 00:00:32,990 --> 00:00:36,230 sous la forme d'un fichier JSON et également 9 00:00:36,230 --> 00:00:39,600 servir des images qui pourraient être requises par notre application. 10 00:00:39,600 --> 00:00:41,020 Donc, pour commencer, 11 00:00:41,020 --> 00:00:45,450 continuons à installer le module de noeud json-server, 12 00:00:45,450 --> 00:00:50,285 et ensuite, configurez notre serveur json-dans cet exercice. 13 00:00:50,285 --> 00:00:53,945 Pour commencer, accédez à votre emplacement pratique 14 00:00:53,945 --> 00:00:57,550 sur votre ordinateur et créez un dossier nommé json-server. 15 00:00:57,550 --> 00:01:01,820 La raison pour laquelle je crée ce dossier est que je peux stocker tous les fichiers 16 00:01:01,820 --> 00:01:06,170 qui sont requis par mon serveur json-dans ce dossier particulier. 17 00:01:06,170 --> 00:01:15,290 Par la suite, nous allons installer le module npm json-server en tant que module MPM global. 18 00:01:15,290 --> 00:01:16,620 Donc, pour ce faire, 19 00:01:16,620 --> 00:01:20,305 à l'invite dans votre terminal, 20 00:01:20,305 --> 00:01:27,430 tapez npm install moins g json-server, 21 00:01:27,430 --> 00:01:30,575 , puis laissez cela terminer l'installation 22 00:01:30,575 --> 00:01:34,820 du module json-server npm en tant que module global. 23 00:01:34,820 --> 00:01:39,525 Maintenant, au cas où vous le faites sur un Linux ou un Mac, 24 00:01:39,525 --> 00:01:43,530 assurez-vous d'utiliser sudo devant lui. 25 00:01:46,460 --> 00:01:49,520 Une fois l'installation terminée, 26 00:01:49,520 --> 00:01:53,545 aller aux instructions de configuration du serveur json-, 27 00:01:53,545 --> 00:01:56,935 et là, nous fournissons un fichier nommé db.json. 28 00:01:56,935 --> 00:02:01,040 Téléchargez ce fichier et nommez-le comme db.json et déplacez ce fichier 29 00:02:01,040 --> 00:02:05,525 dans le dossier json-server que vous avez créé à l'étape précédente. 30 00:02:05,525 --> 00:02:10,490 Vous voyez maintenant que j'ai déjà téléchargé le fichier db.json 31 00:02:10,490 --> 00:02:15,500 , puis déplacé ce fichier db.json dans le dossier json-server. 32 00:02:15,500 --> 00:02:18,830 De plus, j'ai également créé un autre dossier, 33 00:02:18,830 --> 00:02:21,690 à l'intérieur du dossier json-server, nommé public. 34 00:02:21,690 --> 00:02:26,375 Maintenant, tout ce que nous mettons dans ce dossier public sera mis à disposition par 35 00:02:26,375 --> 00:02:33,630 notre json-server comme une ressource qui peut être téléchargée depuis notre serveur. 36 00:02:33,630 --> 00:02:40,430 Ainsi, notre json-server agit comme un simple serveur web statique qui peut nous aider 37 00:02:40,430 --> 00:02:46,770 à servir toutes les ressources comme des images ou même un site web entier. 38 00:02:46,770 --> 00:02:50,300 Si vous le souhaitez, vous pouvez copier cela dans le dossier public et le rendre 39 00:02:50,300 --> 00:02:56,925 disponible pour être servi par le serveur json et affiché dans un navigateur. 40 00:02:56,925 --> 00:02:59,650 Ensuite, encore une fois, allez aux instructions, 41 00:02:59,650 --> 00:03:03,915 , puis téléchargez ce nom de fichier zip images.zip, 42 00:03:03,915 --> 00:03:05,570 puis décompresser ce fichier, 43 00:03:05,570 --> 00:03:08,490 et vous obtiendrez un dossier nommé images, 44 00:03:08,490 --> 00:03:13,880 qui contient un ensemble d'images PNG que nous utiliserons dans notre application. 45 00:03:13,880 --> 00:03:16,470 Donc, une fois que le dossier images est prêt, 46 00:03:16,470 --> 00:03:19,160 déplace ce dossier images dans le dossier public que nous venons de créer 47 00:03:19,160 --> 00:03:22,665 dans le dossier json-server. 48 00:03:22,665 --> 00:03:24,485 En allant dans notre dossier, 49 00:03:24,485 --> 00:03:26,420 vous verrez qu'à l'intérieur du dossier public, 50 00:03:26,420 --> 00:03:31,070 J'ai déjà déplacé le sous-dossier images dans le dossier public ici, 51 00:03:31,070 --> 00:03:36,510 et cela contient toutes les images qui seront utiles pour mon application. 52 00:03:36,510 --> 00:03:39,125 Pour démarrer votre json-server, 53 00:03:39,125 --> 00:03:43,470 allez dans le dossier json-server de votre terminal et à l'invite, 54 00:03:43,470 --> 00:03:50,665 tapez json-server et moins watch db.json. 55 00:03:50,665 --> 00:03:54,650 La raison de l'utilisation de ce drapeau de montre 56 00:03:54,650 --> 00:03:58,610 est que ce serveur json-gardera une surveillance sur le fichier bb.json, 57 00:03:58,610 --> 00:04:01,279 et chaque fois que le fichier db.json est modifié, 58 00:04:01,279 --> 00:04:07,810 il rechargera le fichier db.json et commencera à servir les données modifiées du serveur. 59 00:04:07,810 --> 00:04:13,280 De plus, nous pouvons également donner un indicateur moins d avec une valeur, 60 00:04:13,280 --> 00:04:15,035 dire, par exemple, 2,000, 61 00:04:15,035 --> 00:04:19,430 , ce qui signifie que lorsque le serveur reçoit une demande, 62 00:04:19,430 --> 00:04:25,380 il remettra les données au demandeur après un délai de 2 secondes. 63 00:04:25,380 --> 00:04:31,880 Maintenant, cela serait utilisé pour simuler le délai d'accès à un serveur sur Internet. 64 00:04:31,880 --> 00:04:35,270 Donc, c'est la raison pour laquelle je suggère également d'utiliser le drapeau moins d 65 00:04:35,270 --> 00:04:39,255 2,000 pour le serveur json-. 66 00:04:39,255 --> 00:04:41,390 Alors, démarrons notre json-server, 67 00:04:41,390 --> 00:04:44,735 et puis vous remarquerez que le json-server démarre 68 00:04:44,735 --> 00:04:49,680 et déclare toutes les ressources disponibles à partir du json-server. 69 00:04:49,680 --> 00:04:57,825 Donc, vous pouvez voir qu'il a un ensemble de ressources qui sont disponibles dans toutes ces URL. 70 00:04:57,825 --> 00:05:02,300 De plus, le serveur statique public qui sert des données statiques 71 00:05:02,300 --> 00:05:07,825 est disponible à cette URL, localhost:3000. 72 00:05:07,825 --> 00:05:13,445 Maintenant, vous pouvez aller à n'importe quel navigateur et puis si vous tapez 73 00:05:13,445 --> 00:05:20,515 localhost:3000 et slash plats, 74 00:05:20,515 --> 00:05:27,020 vous verrez que cela va commencer à servir nos données sous la forme de tableau JSON ici. 75 00:05:27,020 --> 00:05:30,530 Donc, cela sera utile pour notre application. 76 00:05:30,530 --> 00:05:37,395 De même, vous pouvez taper leaders, 77 00:05:37,395 --> 00:05:39,110 et vous verrez, encore une fois, 78 00:05:39,110 --> 00:05:41,095 les données sont servies et ainsi de suite. 79 00:05:41,095 --> 00:05:45,760 Si vous tapez le localhost:3000, 80 00:05:45,760 --> 00:05:48,665 , vous verrez que le serveur servira 81 00:05:48,665 --> 00:05:53,395 les données en tant que serveur statique et alors actuellement, il est vide. 82 00:05:53,395 --> 00:05:57,860 Maintenant, si vous voulez accéder aux images qui sont disponibles depuis le serveur, 83 00:05:57,860 --> 00:06:06,520 Je peux simplement taper des images et taper le nom d'un fichier PNG, 84 00:06:06,520 --> 00:06:10,020 et alors vous verrez qu'il servira l'image correspondante. 85 00:06:10,020 --> 00:06:12,570 Maintenant, ceci est très utile pour nous, 86 00:06:12,570 --> 00:06:16,170 alors que nous développons notre application dans ce cours. 87 00:06:16,170 --> 00:06:19,169 Avec cela, nous terminons cet exercice, 88 00:06:19,169 --> 00:06:24,560 où nous avons mis en place un serveur simple appelé json-server pour servir les données 89 00:06:24,560 --> 00:06:30,850 et prendre en charge une API REST à laquelle nous pouvons accéder depuis notre application.