1
00:00:03,650 --> 00:00:10,755
Maintenant que nous avons terminé de développer un serveur API REST à part entière en utilisant Loopback

2
00:00:10,755 --> 00:00:14,639
, la prochaine question qui se posera dans votre esprit est,

3
00:00:14,639 --> 00:00:20,090
comment adapter l'application React pour utiliser ce serveur API REST ?

4
00:00:20,090 --> 00:00:23,140
Comme nous l'avons fait dans les cas précédents,

5
00:00:23,140 --> 00:00:29,190
nous devrons également reconfigurer notre application React pour utiliser spécifiquement les

6
00:00:29,190 --> 00:00:31,410
points de terminaison de l'API REST et

7
00:00:31,410 --> 00:00:37,960
les différentes requêtes API REST exposées par notre serveur Loopback.

8
00:00:38,150 --> 00:00:42,075
Pour commencer cet exercice,

9
00:00:42,075 --> 00:00:45,275
clonez d'abord le dépôt git qui contient

10
00:00:45,275 --> 00:00:51,140
une réapplication terminée qui communique avec notre serveur de bouclage.

11
00:00:51,140 --> 00:00:54,760
Donc, pour ce faire, allez à votre emplacement pratique sur vos ordinateurs.

12
00:00:54,760 --> 00:00:58,370
Je vais cloner le dépôt git en

13
00:00:58,370 --> 00:01:00,640
tapant git clone

14
00:01:06,440 --> 00:01:15,270
https://github.com/jmuppala/conFusion-React-Loopback.git,

15
00:01:15,270 --> 00:01:18,130
puis cloner ce dépôt git.

16
00:01:19,430 --> 00:01:22,665
Une fois que le dépôt git est cloné,

17
00:01:22,665 --> 00:01:30,780
nous allons passer dans le dossier Confusion-React-Loopback

18
00:01:30,780 --> 00:01:39,355
, puis effectuer une installation de fil pour installer tous les modules de noeud pour cette application.

19
00:01:39,355 --> 00:01:42,315
Avant de démarrer l'application React,

20
00:01:42,315 --> 00:01:46,300
assurez-vous que votre serveur de bouclage est correctement configuré.

21
00:01:46,300 --> 00:01:47,705
Dans le serveur de bouclage,

22
00:01:47,705 --> 00:01:49,410
dans le dossier client,

23
00:01:49,410 --> 00:01:54,425
déplacez les images que nous avons données en tant que fichier images.zip,

24
00:01:54,425 --> 00:01:56,780
décompressez-le, puis déplacez les images dans

25
00:01:56,780 --> 00:02:00,540
le dossier images sous le dossier client comme indiqué ici.

26
00:02:00,540 --> 00:02:08,660
En outre, renommez le fichier root.js en tant que root.jsold ou supprimez le fichier root.js.

27
00:02:08,660 --> 00:02:13,310
Nous n'avons plus besoin de cela dans notre application car nous voulons nous assurer que

28
00:02:13,310 --> 00:02:21,050
notre serveur sauvegarde le contenu du dossier client.

29
00:02:21,050 --> 00:02:22,740
Donc, pour y parvenir,

30
00:02:22,740 --> 00:02:25,265
ouvrons le fichier middleware.json,

31
00:02:25,265 --> 00:02:27,845
et dans le fichier middleware.json,

32
00:02:27,845 --> 00:02:32,980
dans la partie fichiers,

33
00:02:32,980 --> 00:02:38,435
ajoutez-le dans la partie fichiers de votre fichier middleware.json.

34
00:02:38,435 --> 00:02:46,320
Donc, nous allons dire, Loopback statique et params : dollar bank dot dot slash client »,

35
00:02:46,320 --> 00:02:49,595
indiquant que votre serveur Loopback enregistrera le

36
00:02:49,595 --> 00:02:53,555
contenu statique du dossier client ici.

37
00:02:53,555 --> 00:02:55,890
Après avoir apporté ces modifications

38
00:02:55,890 --> 00:03:00,080
, vous pouvez lancer votre serveur.

39
00:03:00,360 --> 00:03:04,100
Assurez-vous que votre serveur MongoDB est

40
00:03:04,100 --> 00:03:07,860
également opérationnel avant de lancer votre serveur Loopback.

41
00:03:07,860 --> 00:03:14,690
Ensuite, après cela, nous compilerons et lancerons notre client React.

42
00:03:14,690 --> 00:03:20,345
Maintenant, assurez-vous encore une fois que votre serveur MongoDB et votre serveur Loopback sont en marche,

43
00:03:20,345 --> 00:03:22,810
allez au terminal et ajoutez le terminal.

44
00:03:22,810 --> 00:03:31,405
Tapez fil commencer à démarrer notre application Loopback, l'application React.

45
00:03:31,405 --> 00:03:34,980
Ainsi, lorsque l'application démarre dans le navigateur,

46
00:03:34,980 --> 00:03:40,750
vous remarquerez que l'application React basée sur

47
00:03:40,750 --> 00:03:46,670
la boucle se comporte exactement comme les versions précédentes de l'application React.

48
00:03:46,670 --> 00:03:48,670
Donc, ici nous avons la page d'accueil,

49
00:03:48,670 --> 00:03:52,725
puis nous avons la page À propos de nous comme nous le voyons ici,

50
00:03:52,725 --> 00:03:56,770
puis la page Menu où les éléments de Menu sont répertoriés ici,

51
00:03:56,770 --> 00:04:00,260
la page Contactez-nous comme prévu.

52
00:04:00,260 --> 00:04:04,535
Ensuite, laissez-moi revenir à la page d'accueil et puis me connecter en tant qu'administrateur.

53
00:04:04,535 --> 00:04:11,000
Alors, connectons-nous en tant qu'administrateur,

54
00:04:11,000 --> 00:04:14,480
et puis tu pourras voir mes favoris.

55
00:04:14,480 --> 00:04:19,075
Je me suis connecté plus tôt, puis j'ai ajouté un élément à Mes favoris.

56
00:04:19,075 --> 00:04:24,290
Allons maintenant dans le Menu, puis ajoutez un deuxième élément dans Mes Favoris.

57
00:04:24,290 --> 00:04:27,930
Donc, ici, nous allons ajouter cet élément dans les favoris,

58
00:04:27,930 --> 00:04:34,850
puis vous serez en mesure de voir que ces deux éléments sont maintenant dans Mes favoris.

59
00:04:34,850 --> 00:04:38,194
De même, vous pouvez supprimer des éléments des favoris.

60
00:04:38,194 --> 00:04:42,020
Alors, allons de l'avant et supprimons ceci de nos Favoris.

61
00:04:42,020 --> 00:04:43,490
Pour revenir à l'élément Menu,

62
00:04:43,490 --> 00:04:47,550
ajoutons un commentaire à l'un des plats.

63
00:04:47,550 --> 00:04:49,560
Alors, laissez-moi cliquer sur ce plat,

64
00:04:49,560 --> 00:04:51,855
puis nous allons soumettre un commentaire.

65
00:04:51,855 --> 00:05:01,980
Ainsi, lorsque nous soumettons un commentaire,

66
00:05:01,980 --> 00:05:05,175
comme vous pouvez le voir, le commentaire est ajouté à

67
00:05:05,175 --> 00:05:09,710
notre serveur comme

68
00:05:09,710 --> 00:05:15,690
prévu et le résultat est affiché sur la page Dish Detail ici.

69
00:05:15,690 --> 00:05:18,660
Pour revenir à la page d'accueil,

70
00:05:19,260 --> 00:05:24,650
nous constatons que notre application React est maintenant capable de communiquer avec

71
00:05:24,650 --> 00:05:27,740
le serveur Loopback, puis d'obtenir

72
00:05:27,740 --> 00:05:31,465
les données du serveur et d'interagir avec le serveur comme prévu.

73
00:05:31,465 --> 00:05:35,160
Maintenant, bien sûr, la question qui se poserait dans votre esprit est,

74
00:05:35,160 --> 00:05:41,455
comment cette application Loopback communique-t-elle avec le serveur Loopback ?

75
00:05:41,455 --> 00:05:47,610
Maintenant, c'est là que nous notons que pour Loopback,

76
00:05:47,610 --> 00:05:51,495
puisque le serveur Loopback expose les points de terminaison de l'API REST,

77
00:05:51,495 --> 00:05:55,575
mon application React est capable d'accéder au serveur Loopback aux

78
00:05:55,575 --> 00:05:59,860
points de terminaison de l'API REST correspondants, puis de communiquer avec le serveur,

79
00:05:59,860 --> 00:06:07,845
comme nous l'avons fait avec notre propre serveur API REST que nous avions mis en œuvre plus tôt.

80
00:06:07,845 --> 00:06:15,020
Alors, allons de l'avant et jetons un oeil au code de l'application React modifiée.

81
00:06:15,020 --> 00:06:17,690
Aller au code de notre application,

82
00:06:17,690 --> 00:06:23,200
les principaux changements que vous remarquerez seront dans le fichier ActionCreators.js.

83
00:06:23,200 --> 00:06:27,620
Ici, vous remarquerez que nous communiquons maintenant avec

84
00:06:27,620 --> 00:06:33,930
le serveur Loopback au lieu du serveur API REST que nous avions précédemment.

85
00:06:33,930 --> 00:06:37,550
Ainsi, la récupération va maintenant accéder au serveur de bouclage au point

86
00:06:37,550 --> 00:06:43,800
de terminaison api/comments ou au point de terminaison api/plats et ainsi de suite.

87
00:06:43,800 --> 00:06:52,350
Donc, toutes ces requêtes de récupération sont toutes mises à jour pour accéder à notre serveur Loopback instantané.

88
00:06:52,700 --> 00:06:56,215
Donc, vous remarquerez des changements similaires là-bas.

89
00:06:56,215 --> 00:07:00,095
Maintenant, en plus de vous connecter à notre serveur Loopback,

90
00:07:00,095 --> 00:07:08,190
alors allons au code de connexion ici.

91
00:07:08,190 --> 00:07:09,750
Donc, dans l'utilisateur de connexion,

92
00:07:09,750 --> 00:07:18,035
nous publions une récupération sur le point de terminaison BaseURL et API/clients/login,

93
00:07:18,035 --> 00:07:25,260
puis nous fournirons les informations d'identification dans le corps du message de demande qui sort.

94
00:07:25,260 --> 00:07:27,215
En réponse à cela,

95
00:07:27,215 --> 00:07:29,830
le serveur renvoie la réponse.

96
00:07:29,830 --> 00:07:33,950
La réponse contient ensuite les informations de jeton.

97
00:07:33,950 --> 00:07:38,905
Les informations de jeton sont renvoyées sous la forme de

98
00:07:38,905 --> 00:07:44,790
l'ID du message de réponse.

99
00:07:44,790 --> 00:07:47,325
Ainsi, l'ID lui-même sert de jeton.

100
00:07:47,325 --> 00:07:49,545
Donc, le message de réponse lui-même,

101
00:07:49,545 --> 00:07:55,200
je vais enregistrer cela dans mon stockage local comme indiqué ici.

102
00:07:55,200 --> 00:07:59,320
Nous stringifions le message de réponse, puis stockons cela là-dedans.

103
00:07:59,320 --> 00:08:06,945
Ce message de réponse, Response.id, contient le jeton.

104
00:08:06,945 --> 00:08:12,815
Ainsi, le response.id sert de jeton Web JSON pour accéder au serveur de bouclage.

105
00:08:12,815 --> 00:08:15,650
Donc, c'est pourquoi vous remarquerez que dans les

106
00:08:15,650 --> 00:08:19,235
situations où j'ai besoin d'accéder au serveur, donc par exemple,

107
00:08:19,235 --> 00:08:25,520
nous remarquerons que lorsque nous récupérons ou postons votre favori sur le serveur,

108
00:08:25,520 --> 00:08:28,550
vous remarquerez que j'obtiens le jeton en disant,

109
00:08:28,550 --> 00:08:30,420
laissez jeton, JSON analyse,

110
00:08:30,420 --> 00:08:33,990
LocalStorage, GetItem, jeton ici,

111
00:08:33,990 --> 00:08:38,890
puis dans le champ d'en-tête Autorisation,

112
00:08:38,890 --> 00:08:44,300
j'ai dit que le champ Autorisation est token.id ici comme indiqué ici.

113
00:08:44,300 --> 00:08:51,380
C' est ainsi que nous pourrons nous authentifier auprès du serveur Loopback.

114
00:08:51,380 --> 00:08:55,450
Donc, ici vous voyez qu'il dit, baseUrl, api/favoris,

115
00:08:55,450 --> 00:08:59,440
puis obtenir la liste des favoris du serveur,

116
00:08:59,440 --> 00:09:03,430
puis enregistrez-le dans notre magasin redux.

117
00:09:03,430 --> 00:09:06,710
Donc, bien, une grande partie du code reste le même,

118
00:09:06,710 --> 00:09:09,740
sauf pour les mises à jour que nous avons faites pour

119
00:09:09,740 --> 00:09:13,455
accéder aux points de terminaison de l'API REST Loopbacks.

120
00:09:13,455 --> 00:09:22,665
Maintenant, pour Angular, nous avons un SDK Loopback qui peut être construit pour notre application Angular.

121
00:09:22,665 --> 00:09:27,070
Mais pour React, il n'y a pas un tel support disponible à partir de Loopback,

122
00:09:27,070 --> 00:09:30,460
et donc nous devons recourir à

123
00:09:30,460 --> 00:09:34,840
l'accès direct aux points de terminaison de l'API LOOPback REST comme indiqué ici en utilisant fetch,

124
00:09:34,840 --> 00:09:38,860
et ensuite nous sommes capables de communiquer avec le serveur Loopback.

125
00:09:38,860 --> 00:09:42,115
Avec cette compréhension rapide de la façon dont

126
00:09:42,115 --> 00:09:48,360
notre application React a été mise à jour pour accéder à notre serveur Loopback,

127
00:09:48,360 --> 00:09:51,795
nous terminons l'examen du serveur Loopback.

128
00:09:51,795 --> 00:09:56,980
Passez plus de temps à regarder certains composants et à voir

129
00:09:56,980 --> 00:10:02,340
comment ils utilisent les informations obtenues à partir du serveur de bouclage.

130
00:10:02,340 --> 00:10:06,530
Vous remarquerez que la plupart des composants restent exactement les mêmes qu'avant, à l'

131
00:10:06,530 --> 00:10:13,650
exception de quelques modifications mineures dans le composant favori pour obtenir les

132
00:10:13,650 --> 00:10:18,495
informations du serveur Loopback

133
00:10:18,495 --> 00:10:22,700
, puis l'utiliser pour afficher la liste des éléments favoris.

134
00:10:22,700 --> 00:10:29,545
Autre que cela, la plupart des modifications sont limitées au fichier ActionCreators.js,

135
00:10:29,545 --> 00:10:34,260
où nous avons mis à jour la récupération pour utiliser l'URL de

136
00:10:34,260 --> 00:10:41,125
notre serveur Loopback pour pouvoir accéder aux différents points de terminaison de l'API REST.

137
00:10:41,125 --> 00:10:48,460
Donc, avec cela, je vous ai rapidement démontré comment vous pouvez construire votre application.

138
00:10:48,460 --> 00:10:51,590
Avec cette introduction rapide sur la façon dont nous pouvons

139
00:10:51,590 --> 00:10:54,755
utiliser le Loopback dans notre application,

140
00:10:54,755 --> 00:10:59,110
nous arrivons à la fin de cet exercice.