1
00:00:03,650 --> 00:00:10,755
Maintenant que nous avons terminé de développer un serveur d'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 Angular pour utiliser ce serveur d'API Rest ?

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

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

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

7
00:00:31,385 --> 00:00:37,190
les différentes requêtes d'API Rest telles qu'exposées par notre serveur LoopBack.

8
00:00:37,190 --> 00:00:40,295
Maintenant, c'est là que nous allons profiter d'

9
00:00:40,295 --> 00:00:46,865
un SDK LoopBack qui peut être construit automatiquement pour nous à l'aide d'un module Node.

10
00:00:46,865 --> 00:00:51,214
Nous allons examiner nos serveurs LoopBack,

11
00:00:51,214 --> 00:00:56,975
différents points de terminaison de l'API Rest et construire automatiquement le SDK,

12
00:00:56,975 --> 00:00:59,480
que nous pouvons ensuite intégrer dans

13
00:00:59,480 --> 00:01:04,380
notre application Angular et être en mesure de communiquer avec notre serveur LoopBack,

14
00:01:04,380 --> 00:01:10,055
à la fois pour l'authentification et aussi pour pouvoir échanger des données.

15
00:01:10,055 --> 00:01:13,000
Pour commencer cet exercice,

16
00:01:13,000 --> 00:01:17,045
cloner d'abord le dépôt git qui contient

17
00:01:17,045 --> 00:01:23,535
une application Angular partiellement terminée qui communique avec notre serveur LoopBack.

18
00:01:23,535 --> 00:01:26,730
Donc, pour ce faire, allez à votre emplacement pratique sur votre ordinateur.

19
00:01:26,730 --> 00:01:29,580
Donc, je suis dans mon dossier Coursera Angular.

20
00:01:29,580 --> 00:01:33,390
Je vais cloner le dépôt git en

21
00:01:33,390 --> 00:01:35,680
tapant git clone

22
00:01:41,510 --> 00:01:51,270
https://github.com/jmuppala/conFusion-Angular6-LoopBack.git,

23
00:01:51,270 --> 00:01:54,160
puis cloner ce dépôt git.

24
00:01:55,460 --> 00:01:58,645
Une fois que le dépôt git est cloné,

25
00:01:58,645 --> 00:02:08,355
nous allons passer dans le dossier LoopBack Confusion Angular6, puis

26
00:02:08,355 --> 00:02:12,370
effectuer une installation NPM pour installer

27
00:02:12,370 --> 00:02:19,135
tous les modules de noeud pour cette application Angular partiellement terminée.

28
00:02:19,135 --> 00:02:26,670
Pour créer automatiquement le kit de développement logiciel LoopBack pour notre serveur LoopBack,

29
00:02:26,670 --> 00:02:32,125
nous allons prendre l'aide de ce module de nœud LoopBack SDK Builder.

30
00:02:32,125 --> 00:02:34,955
Donc, ce LoopBack SDK Builder

31
00:02:34,955 --> 00:02:39,140
est un module de nœud basé sur la communauté qui est réellement développé

32
00:02:39,140 --> 00:02:46,380
à partir du SDK officiel LoopBack Angular que les développeurs de LoopBack avaient publié.

33
00:02:46,380 --> 00:02:50,160
Le SDK de Loopback Angular pris en charge Angular JS.

34
00:02:50,160 --> 00:02:53,885
Donc, cela a été modifié dans ce Générateur de SDK de loopback

35
00:02:53,885 --> 00:02:58,390
pour prendre en charge les deux Angular et sur les applications.

36
00:02:58,390 --> 00:03:01,090
Ainsi, le Générateur de SDK LoopBack,

37
00:03:01,090 --> 00:03:10,155
le module de nœud lui-même une fois qu'il est installé dans votre dossier de projet serveur,

38
00:03:10,155 --> 00:03:13,610
vous pouvez utiliser le Générateur de SDK LoopBack pour

39
00:03:13,610 --> 00:03:18,810
passer automatiquement à travers votre application LoopBack que vous avez déjà construite.

40
00:03:18,810 --> 00:03:22,190
Cela construira automatiquement tout ce

41
00:03:22,190 --> 00:03:25,610
dont nous avons besoin pour commencer sur notre application Angular.

42
00:03:25,610 --> 00:03:27,765
Donc, il construit le kit de développement logiciel.

43
00:03:27,765 --> 00:03:30,155
Ainsi, dans le kit de développement logiciel,

44
00:03:30,155 --> 00:03:35,995
le logiciel LoopBack SDK Builder exporte

45
00:03:35,995 --> 00:03:41,930
toutes les interfaces, tous les modèles pour les différentes données que nous allons stocker sur

46
00:03:41,930 --> 00:03:44,390
notre serveur LoopBack ainsi que

47
00:03:44,390 --> 00:03:49,520
tous les services API qui peuvent être utilisés dans votre application Angular.

48
00:03:49,520 --> 00:03:55,485
Ainsi, vos modèles et vos services viennent automatiquement pour le trajet une fois que vous avez créé le SDK.

49
00:03:55,485 --> 00:04:00,935
Maintenant, il s'agit juste d'incorporer ce SDK dans notre application Angular,

50
00:04:00,935 --> 00:04:03,265
puis de commencer rapidement.

51
00:04:03,265 --> 00:04:08,010
Puisque nous avons déjà construit notre application Angular dans un cours précédent,

52
00:04:08,010 --> 00:04:11,900
je vais mettre à niveau cette application pour utiliser

53
00:04:11,900 --> 00:04:16,660
le SDK LoopBack que nous allons exporter à partir de ce Générateur de SDK LoopBack.

54
00:04:16,660 --> 00:04:18,620
Dans l'étape précédente,

55
00:04:18,620 --> 00:04:20,030
vous venez d'installer

56
00:04:20,030 --> 00:04:23,420
l'application Angular partiellement complétée qui a

57
00:04:23,420 --> 00:04:27,305
déjà été adaptée pour utiliser le SDK LoopBack.

58
00:04:27,305 --> 00:04:30,070
Donc, allons de l'avant et construisons

59
00:04:30,070 --> 00:04:33,855
le SDK LoopBack, puis déployez-le dans notre application Angular,

60
00:04:33,855 --> 00:04:41,605
puis continuons et compilons notre application Angular et commençons avec elle.

61
00:04:41,605 --> 00:04:44,390
Pour configurer le SDK LoopBack,

62
00:04:44,390 --> 00:04:51,830
accédez au dossier serveur LoopBack dans l'onglet de votre terminal ou dans la fenêtre de commande.

63
00:04:51,830 --> 00:04:57,355
Donc, je suis dans mon dossier serveur LoopBack.

64
00:04:57,355 --> 00:04:58,855
Donc, dans ce dossier,

65
00:04:58,855 --> 00:05:14,185
laissez-moi aller de l'avant et installer ce LoopBack

66
00:05:14,185 --> 00:05:16,960
SDK Builder.

67
00:05:16,960 --> 00:05:19,535
Une fois que le générateur est installé,

68
00:05:19,535 --> 00:05:22,625
continuons et construisons le SDK LoopBack.

69
00:05:22,625 --> 00:05:24,835
Pour construire le SDK LoopBack,

70
00:05:24,835 --> 00:05:34,460
nous allons prendre l'aide de l'outil de ligne de commande LB-SDK que ce module LoopBack SDK

71
00:05:34,460 --> 00:05:36,370
configure automatiquement pour nous.

72
00:05:36,370 --> 00:05:42,060
Donc, pour y accéder, nous dirons,. /node modules.

73
00:05:42,060 --> 00:05:43,610
Ainsi, dans les modules de noeud,

74
00:05:43,610 --> 00:05:47,570
il y a le dossier a.bin qui est automatiquement créé chaque fois que vous

75
00:05:47,570 --> 00:05:51,770
installez divers modules de noeud dans le dossier là.

76
00:05:51,770 --> 00:05:55,040
Donc, pour aller dans le dossier the.bin,

77
00:05:55,040 --> 00:06:01,540
nous allons accéder à cette commande LB-SDK là,

78
00:06:01,540 --> 00:06:03,490
qui est automatiquement installé,

79
00:06:03,490 --> 00:06:07,850
alors nous allons appeler ce serveur de largeur. /server.js,

80
00:06:12,430 --> 00:06:20,310
et nous devons spécifier le chemin d'accès à l'application Angular que nous venons de configurer.

81
00:06:20,310 --> 00:06:23,180
Donc, mon application angulaire est actuellement dans

82
00:06:23,180 --> 00:06:28,865
mes documents Coursera angulaire confusion angulaire dossier LoopBack.

83
00:06:28,865 --> 00:06:31,410
Alors, laisse-moi copier cette partie.

84
00:06:31,410 --> 00:06:36,470
Ensuite, laissez-moi aller dans mon terminal ou la fenêtre de commande

85
00:06:36,470 --> 00:06:41,600
où j'essaie de configurer mon SDK LoopBack.

86
00:06:41,600 --> 00:06:43,490
Donc, à l'invite,

87
00:06:43,490 --> 00:06:45,995
puisqu'il se trouve dans le dossier Mes documents,

88
00:06:45,995 --> 00:06:55,540
je vais taper le chemin d'accès complet à cela à partir de mon dossier racine dans mon mac.

89
00:06:55,540 --> 00:06:57,680
Si vous utilisez leur système Windows,

90
00:06:57,680 --> 00:07:04,370
assurez-vous que ce chemin indique le chemin d'accès complet à partir des points C ou D deux-points,

91
00:07:04,370 --> 00:07:07,540
quel que soit le lecteur que vous installez sur votre ordinateur Windows.

92
00:07:07,540 --> 00:07:12,650
Donc, le chemin complet vers votre dossier LoopBack angulaire,

93
00:07:12,650 --> 00:07:15,505
puis nous dirons,

94
00:07:15,505 --> 00:07:21,900
/SRC, le dossier source là, puis l'application.

95
00:07:21,900 --> 00:07:24,710
Ensuite, nous allons déployer le SDK dans

96
00:07:24,710 --> 00:07:30,120
le dossier partagé dans le sous-dossier SDK.

97
00:07:30,430 --> 00:07:36,680
Nous voulons que ce Générateur de SDK LoopBack

98
00:07:36,680 --> 00:07:43,570
déploie automatiquement la version Web NG2 du SDK.

99
00:07:43,570 --> 00:07:45,879
Donc, c'est la version qui prendra en charge

100
00:07:45,879 --> 00:07:50,380
les applications Web et notre application Angular dans ce cas.

101
00:07:50,380 --> 00:07:54,870
Si vous construisez ceci pour une application de script native, alors vous direz,

102
00:07:54,870 --> 00:08:00,050
NG2 natif pour construire le SDK pour l'application Native Script.

103
00:08:00,050 --> 00:08:02,380
Puisque je construis mon application Angular,

104
00:08:02,380 --> 00:08:04,580
je vais juste dire, NG2 web,

105
00:08:04,580 --> 00:08:08,190
puis laisser le Générateur de SDK Loopback

106
00:08:08,190 --> 00:08:12,230
construire automatiquement le kit de développement logiciel, puis le déployer

107
00:08:12,230 --> 00:08:20,780
dans mon dossier source application/shared/sdk d'applications angulaires là.

108
00:08:20,780 --> 00:08:23,715
Ainsi, après quelques secondes,

109
00:08:23,715 --> 00:08:29,915
le SDK est construit et déployé sur mon application Angular.

110
00:08:29,915 --> 00:08:33,250
Maintenant, avant de démarrer mon application Angular,

111
00:08:33,250 --> 00:08:36,730
laissez-moi démarrer mon serveur LoopBack,

112
00:08:36,730 --> 00:08:40,820
et avant de le faire, j'irai dans un autre onglet de terminal

113
00:08:40,820 --> 00:08:44,900
ici, puis démarrez mon serveur MongoDB,

114
00:08:44,900 --> 00:08:45,955
alors je vais dire,

115
00:08:45,955 --> 00:08:55,790
Mongod —dbpath=data, puis

116
00:08:55,790 --> 00:08:57,890
démarrez mon serveur MongoDB.

117
00:08:57,890 --> 00:09:02,760
Tout d'abord, laissez-moi démarrer mon serveur LoopBack.

118
00:09:02,760 --> 00:09:07,710
Donc, à l'invite de démarrage NPM,

119
00:09:07,710 --> 00:09:12,140
et mon serveur LoopBack devrait être opérationnel dans un court laps de temps.

120
00:09:12,140 --> 00:09:17,555
Ensuite, allez maintenant à mon application LoopBack,

121
00:09:17,555 --> 00:09:20,645
laissez-moi ouvrir cette application dans

122
00:09:20,645 --> 00:09:25,890
mon code Visual Studio afin que nous puissions regarder le code source.

123
00:09:27,500 --> 00:09:31,665
Une fois que mon application est ouverte dans le code Visual Studio,

124
00:09:31,665 --> 00:09:37,315
laissez-moi prendre cela dans une nouvelle fenêtre de bureau.

125
00:09:37,315 --> 00:09:45,200
Ensuite, laissez-moi également démarrer mon déploiement d'application Angular

126
00:09:45,200 --> 00:09:53,645
en tapant NgServe à l'invite et attendez que mon application Angular soit compilée.

127
00:09:53,645 --> 00:09:57,785
Une fois que mon application angulaire est compilée et appliquée,

128
00:09:57,785 --> 00:10:00,910
laissez-moi aller à un navigateur,

129
00:10:00,910 --> 00:10:04,810
puis vérifiez d'abord cette application angulaire.

130
00:10:04,810 --> 00:10:06,935
Aller au navigateur,

131
00:10:06,935 --> 00:10:09,455
laissez-moi ouvrir un nouvel onglet ici,

132
00:10:09,455 --> 00:10:13,760
puis tapez localhost : 4200 et vous verrez

133
00:10:13,760 --> 00:10:18,345
l'application Angular déployée sur cette fenêtre de navigateur ici,

134
00:10:18,345 --> 00:10:21,070
et vous pouvez voir que l'Accueil,

135
00:10:21,070 --> 00:10:25,095
la page À propos de nous avec toutes les données,

136
00:10:25,095 --> 00:10:32,740
puis le Menu et aussi les Mes Favoris.

137
00:10:34,120 --> 00:10:38,410
Actuellement qui ne montre rien parce qu'

138
00:10:38,410 --> 00:10:42,640
aucun utilisateur n'est connecté et la page de contact, comme avant.

139
00:10:42,640 --> 00:10:47,520
Donc, pour me connecter, laissez-moi me connecter en tant qu'utilisateur, puis je vais taper

140
00:10:47,520 --> 00:10:52,540
mon nom d'utilisateur et un mot de passe ici,

141
00:10:52,540 --> 00:10:59,030
puis une fois que je me connecte, vous pourrez voir que lorsque j'accède à Mes Favoris,

142
00:10:59,030 --> 00:11:04,665
les Favoris de cet utilisateur particulier seront affichés ici.

143
00:11:04,665 --> 00:11:08,680
Comme avant, nous pouvons taper des commentaires, puis soumettre des commentaires,

144
00:11:08,680 --> 00:11:13,515
puis ajouter des éléments aux favoris et ainsi de suite.

145
00:11:13,515 --> 00:11:16,900
Toutes les fonctionnalités que vous avez vues avec les versions antérieures de

146
00:11:16,900 --> 00:11:22,740
l'application Angular sont également prises en charge dans cette version de l'application Angular.

147
00:11:22,740 --> 00:11:28,860
Aussi pour que votre serveur LoopBack puisse servir des images,

148
00:11:28,860 --> 00:11:36,235
toutes ces données seront stockées dans votre code serveur dans le dossier client du code serveur.

149
00:11:36,235 --> 00:11:39,975
Donc, dans le dossier client de mon serveur LoopBack,

150
00:11:39,975 --> 00:11:43,010
notez que j'ai créé ce sous-dossier

151
00:11:43,010 --> 00:11:47,365
nommé images, puis stocké toutes les images dans le sous-dossier.

152
00:11:47,365 --> 00:11:52,010
Maintenant, pour que ces images soient diffusées et aussi pour que

153
00:11:52,010 --> 00:11:58,930
le dossier client soit utilisé comme dossier public pour mon serveur LoopBack,

154
00:11:58,930 --> 00:12:02,630
puis dans quelques modifications que je dois apporter à mon serveur LoopBack.

155
00:12:02,630 --> 00:12:05,100
Maintenant, la première chose que vous devez faire est,

156
00:12:05,100 --> 00:12:08,275
allez dans le dossier de démarrage et dans le dossier de démarrage,

157
00:12:08,275 --> 00:12:12,250
vous verrez ce fichier root.js ici,

158
00:12:12,250 --> 00:12:15,025
qui contient cette information ici.

159
00:12:15,025 --> 00:12:18,410
Maintenant, vous pouvez soit supprimer le fichier root.js

160
00:12:18,410 --> 00:12:22,330
ou simplement renommer le fichier root.js en autre chose.

161
00:12:22,330 --> 00:12:29,630
Donc, ici, vous voyez que j'ai renommé ce fichier en root.jsold avec l'extension jsold.

162
00:12:29,630 --> 00:12:34,190
Maintenant, ce fichier ne doit plus contenir l'extension the.js.

163
00:12:34,190 --> 00:12:37,430
Donc, quoi que ce soit d'autre que l'extension the.js est bien.

164
00:12:37,430 --> 00:12:39,975
Donc, ce que cela signifie est que dans ce cas,

165
00:12:39,975 --> 00:12:45,250
mon serveur LoopBack, quand il démarre, n'exécutera pas le code dans ce dossier.

166
00:12:45,250 --> 00:12:51,745
Maintenant, quand vous regardez le code dans le fichier root.js qui a été configuré plus tôt,

167
00:12:51,745 --> 00:12:55,605
vous avez vu que le routeur a été configuré de telle sorte que,

168
00:12:55,605 --> 00:13:00,955
lorsque vous accédez à la barre oblique qui est le dossier racine de vos serveurs,

169
00:13:00,955 --> 00:13:05,170
il va simplement servir l'état LoopBack des serveurs et en effet,

170
00:13:05,170 --> 00:13:08,175
c'est ce que nous avons vu notre serveur LoopBack assurant

171
00:13:08,175 --> 00:13:15,055
la disponibilité et la dernière heure de redémarrage de notre serveur.

172
00:13:15,055 --> 00:13:16,590
Nous ne voulons pas qu'il le fasse,

173
00:13:16,590 --> 00:13:20,920
au lieu de cela, nous voulons que notre serveur LoopBack puisse utiliser tout ce que nous

174
00:13:20,920 --> 00:13:25,390
mettons dans le dossier client comme dossier public et donc

175
00:13:25,390 --> 00:13:27,900
n'importe quelle application client peut être déployée dans

176
00:13:27,900 --> 00:13:31,590
le dossier client de mon serveur LoopBack et devrait être

177
00:13:31,590 --> 00:13:39,250
accessible lorsque nous accédons à LoopBack à ses points de terminaison barre oblique standard.

178
00:13:39,250 --> 00:13:43,940
Donc, c'est la racine du dossier du serveur.

179
00:13:43,940 --> 00:13:46,890
Donc, pour ce faire, la première chose que vous devez faire est de

180
00:13:46,890 --> 00:13:50,560
changer le nom de ce fichier root.js en root.

181
00:13:50,560 --> 00:13:53,245
par exemple, vous pouvez simplement renommer cela en

182
00:13:53,245 --> 00:13:56,440
root.jsold ou vous pouvez simplement supprimer ce fichier.

183
00:13:56,440 --> 00:14:00,325
Ce fichier ne sera pas nécessaire dans cette version de mon serveur LoopBack.

184
00:14:00,325 --> 00:14:01,840
Maintenant, pas seulement cela,

185
00:14:01,840 --> 00:14:08,265
la deuxième partie que vous devez reconfigurer est d'aller dans le fichier middleware.json ici.

186
00:14:08,265 --> 00:14:10,230
Le fichier middleware.json.

187
00:14:10,230 --> 00:14:12,170
Dans le fichier middleware.json,

188
00:14:12,170 --> 00:14:14,605
si vous faites défiler vers le bas,

189
00:14:14,605 --> 00:14:17,195
vous verrez que ici, à

190
00:14:17,195 --> 00:14:23,755
l'origine, cela contiendra simplement des fichiers : puis une accolade vide ici.

191
00:14:23,755 --> 00:14:26,505
Maintenant, dans cette accolade vide ici,

192
00:14:26,505 --> 00:14:28,420
ajoutez simplement ce code ici,

193
00:14:28,420 --> 00:14:36,430
qui dit loopback #static et il dit params$ !.. /client.

194
00:14:36,820 --> 00:14:41,025
Donc, cela indiquera à mon serveur LoopBack

195
00:14:41,025 --> 00:14:45,670
que le dossier client disponible ici

196
00:14:45,670 --> 00:14:53,800
doit être utilisé comme dossier public statique pour mon serveur LoopBack.

197
00:14:53,800 --> 00:14:58,790
Donc, tout ce qui est mis dans le dossier client peut être consulté à partir de mon serveur.

198
00:14:58,790 --> 00:15:05,725
Donc, c'est la modification supplémentaire que vous devez faire au fichier middleware.json.

199
00:15:05,725 --> 00:15:08,235
Donc, une fois ces deux modifications effectuées,

200
00:15:08,235 --> 00:15:15,030
votre serveur LoopBack sera configuré pour diffuser les données, y compris

201
00:15:15,030 --> 00:15:17,940
les images que vous allez mettre dans

202
00:15:17,940 --> 00:15:22,575
le sous-dossier images sous le dossier client ici.

203
00:15:22,575 --> 00:15:28,475
Donc, assurez-vous de copier les images dans le dossier client ici et le second est d'

204
00:15:28,475 --> 00:15:34,625
aller au fichier middleware.json dans le dossier du serveur,

205
00:15:34,625 --> 00:15:37,265
puis de mettre à jour cette partie.

206
00:15:37,265 --> 00:15:43,860
Une fois que nous avons fait cela, alors ces images sont accessibles en accédant simplement

207
00:15:43,860 --> 00:15:48,760
au /images/ le nom du fichier image pour accéder à

208
00:15:48,760 --> 00:15:54,120
ces images parce que nos plats

209
00:15:54,120 --> 00:16:00,390
, leaders, et les promotions nécessiteront ces fichiers image et

210
00:16:00,390 --> 00:16:03,525
que cela sera disponible pour nous sur

211
00:16:03,525 --> 00:16:08,080
le serveur LoopBack et aussi tout ce que vous mettez dans le dossier client.

212
00:16:08,080 --> 00:16:14,050
Ainsi, par exemple, vous pouvez préparer le dossier de distribution

213
00:16:14,050 --> 00:16:16,920
pour votre application Angular et simplement copier

214
00:16:16,920 --> 00:16:21,025
l'intégralité du contenu du dossier de distribution dans le dossier client ici,

215
00:16:21,025 --> 00:16:25,220
puis si vous accédez au serveur LoopBack à

216
00:16:25,220 --> 00:16:30,850
son point de terminaison racine standard

217
00:16:30,850 --> 00:16:37,565
, votre application Angular sera automatiquement servi par votre serveur LoopBack.

218
00:16:37,565 --> 00:16:43,950
Donc, ce sont les deux modifications que vous devez apporter à votre serveur LoopBack.

219
00:16:43,950 --> 00:16:49,700
Bien sûr, vous devez être curieux de savoir comment exactement ce SDK est-il construit,

220
00:16:49,700 --> 00:16:52,820
où est exactement ce SDK et comment vais-je réellement

221
00:16:52,820 --> 00:16:56,045
l'utiliser dans mon application Angular.

222
00:16:56,045 --> 00:17:01,955
Donc, pour ce faire, allons dans notre application Angular et dans le dossier source,

223
00:17:01,955 --> 00:17:04,375
sous le dossier de l'application source,

224
00:17:04,375 --> 00:17:06,565
maintenant lorsque vous ouvrez le dossier partagé,

225
00:17:06,565 --> 00:17:13,235
vous verrez qu'il y a un sous-dossier ici nommé SDK et à l'intérieur de ce sous-dossier SDK,

226
00:17:13,235 --> 00:17:16,365
vous trouverez tout un tas de fichiers ici,

227
00:17:16,365 --> 00:17:22,565
lb.config.ts, index.ts et dans les sockets de stockage,

228
00:17:22,565 --> 00:17:25,330
les services et à l'intérieur du service,

229
00:17:25,330 --> 00:17:28,255
vous avez ici des services personnalisés et des services principaux,

230
00:17:28,255 --> 00:17:31,960
ainsi que les différents modèles qui sont déployés ici.

231
00:17:31,960 --> 00:17:36,630
Les modèles contiennent en fait les structures de modèles

232
00:17:36,630 --> 00:17:42,605
de nos différents modèles que nous mettons en œuvre.

233
00:17:42,605 --> 00:17:45,280
Maintenant, c'est le SDK LoopBack.

234
00:17:45,280 --> 00:17:49,430
Ce code est automatiquement construit pour vous et si vous le souhaitez,

235
00:17:49,430 --> 00:17:52,800
vous pouvez simplement entrer et ensuite

236
00:17:52,800 --> 00:17:57,030
passer à travers ces fichiers pour juste voir ce qui est disponible là-bas.

237
00:17:57,030 --> 00:18:00,560
Assurez-vous de ne pas modifier les fichiers de

238
00:18:00,560 --> 00:18:02,940
ce sous-dossier SDK car celui-ci est

239
00:18:02,940 --> 00:18:06,040
automatiquement créé pour vous par le Générateur de SDK de bouclage,

240
00:18:06,040 --> 00:18:10,355
et cela contiendra tout ce qui est configuré pour que

241
00:18:10,355 --> 00:18:15,125
votre serveur LoopBack soit accessible à partir de votre application Angular.

242
00:18:15,125 --> 00:18:19,240
Les services que je vais utiliser sont tous disponibles ici.

243
00:18:19,240 --> 00:18:21,630
Maintenant, comment on utilise ça ?

244
00:18:21,630 --> 00:18:25,600
Donc, pour vous aider à comprendre comment nous en faisons usage,

245
00:18:25,600 --> 00:18:33,725
visitons notre composant d'accueil et voyons comment le composant d'accueil est maintenant mis à jour.

246
00:18:33,725 --> 00:18:35,855
Donc, quand vous allez à la composante de la maison,

247
00:18:35,855 --> 00:18:44,125
vous remarquerez que je suis en train d'importer des plats de.. /shared/sdk/modèles.

248
00:18:44,125 --> 00:18:47,950
Donc, ce sont les modèles qui sont automatiquement exportés dans

249
00:18:47,950 --> 00:18:52,390
le SDK par mon Générateur de SDK de bouclage.

250
00:18:52,390 --> 00:18:57,010
Donc, c'est là que mon modèle de plats sera défini là.

251
00:18:57,010 --> 00:18:59,450
Donc, je vais juste tirer parti du modèle de vaisselle.

252
00:18:59,450 --> 00:19:06,290
De même, le service lui-même est disponible comme ce Dish.SAPI,

253
00:19:06,290 --> 00:19:15,220
comme vous pouvez le voir ici et ce Dish.SAPI est dans le.. /shared/sdk/services dossier ici.

254
00:19:15,220 --> 00:19:18,280
De même, les promotions et l'API des promotions,

255
00:19:18,280 --> 00:19:20,110
et les leaders et dirigeants API.

256
00:19:20,110 --> 00:19:24,750
Donc, ceux-ci sont tous construits automatiquement pour moi par le Générateur de SDK de Loopback.

257
00:19:24,750 --> 00:19:26,720
Maintenant, alors vous allez dans le code,

258
00:19:26,720 --> 00:19:31,045
vous remarquerez maintenant que je vais déclarer le plat comme plats,

259
00:19:31,045 --> 00:19:35,455
promotion comme promotions, et leader comme /leaders.

260
00:19:35,455 --> 00:19:39,955
Ces trois modèles sont exportés par le Générateur de SDK de bouclage.

261
00:19:39,955 --> 00:19:44,905
Notez également comment j'ai reconfiguré les trois services ici.

262
00:19:44,905 --> 00:19:48,090
Maintenant, mon service de plat se réfère à l'API de plats, les

263
00:19:48,090 --> 00:19:50,950
services de promotion se référant à l'API de promotions,

264
00:19:50,950 --> 00:19:55,825
et le service leader à l'API leaders,

265
00:19:55,825 --> 00:19:59,980
et aussi remarquer comment j'accède au service de plat ici.

266
00:19:59,980 --> 00:20:06,290
Donc, je dirai que ce service de plat trouver un et où en vedette égale à vrai.

267
00:20:06,290 --> 00:20:14,539
Donc, c'est là que vous vous souvenez que dans mon explorateur d'API de repos LoopBack,

268
00:20:14,539 --> 00:20:20,405
j'avais tapé ceci dans le filtre là,

269
00:20:20,405 --> 00:20:23,490
puis j'ai essayé de trouver la vaisselle là-bas.

270
00:20:23,490 --> 00:20:27,260
Donc, c'est exactement ce que je fais ici aussi dans mon code ici.

271
00:20:27,260 --> 00:20:30,140
Donc, ce

272
00:20:30,140 --> 00:20:34,140
FinDone, puis fourni avec ceci, va trouver un élément et ensuite le retourner ici,

273
00:20:34,140 --> 00:20:38,240
et puis que j'assigne chacun à ce plat ici et

274
00:20:38,240 --> 00:20:43,510
le reste de mon application Angular fonctionne exactement de la même manière qu'avant.

275
00:20:43,510 --> 00:20:47,490
Maintenant, notez également que dans le constructeur,

276
00:20:47,490 --> 00:20:52,945
notez comment j'ai configuré ceci appelé la configuration LoopBack.

277
00:20:52,945 --> 00:20:59,685
Maintenant, pour faire la configuration LoopBack dans chaque composant que vous utilisez,

278
00:20:59,685 --> 00:21:09,280
vous devez importer cette configuration LoopBack à partir de ce dossier SDK partagé ici et aussi,

279
00:21:09,280 --> 00:21:13,790
cette version d'API que je déclare.

280
00:21:14,410 --> 00:21:19,340
J' ai mis à jour ce fichier baseurl.ts.

281
00:21:19,340 --> 00:21:21,720
Donc, dans le dossier URL de base,

282
00:21:21,720 --> 00:21:31,330
j'ai mis à jour ceci à mon nom de mon ordinateur deux-points 3000.

283
00:21:31,330 --> 00:21:35,510
Donc, celui-ci assurez-vous de remplacer ceci par

284
00:21:35,510 --> 00:21:42,460
l'adresse IP ou le nom de votre ordinateur spécifique sur lequel vous exécutez.

285
00:21:42,460 --> 00:21:50,350
Donc, assurez-vous de mettre à jour l'URL de base ici et la version de l'API ici est simplement une chaîne.

286
00:21:50,350 --> 00:21:52,560
Dire API ici.

287
00:21:52,560 --> 00:21:58,790
Donc, ces deux-là vont être utilisés dans mon fichier de component.ts à la maison.

288
00:21:58,790 --> 00:22:02,560
Donc, j'importe cette version d'API ici et le LoopbackConfig.

289
00:22:02,560 --> 00:22:05,475
Le BaseURL que j'

290
00:22:05,475 --> 00:22:10,640
injecte déjà dans mon constructeur ici donc il est déjà disponible ici,

291
00:22:10,640 --> 00:22:14,890
et puis dans mon constructeur de mon composant,

292
00:22:14,890 --> 00:22:19,440
j'ai besoin de faire ces deux instructions ici.

293
00:22:19,440 --> 00:22:22,190
Donc, nous allons dire, « LoopBack définir l'URL de

294
00:22:22,190 --> 00:22:25,120
base à l'URL de base » qui est le même que celui que je viens d'

295
00:22:25,120 --> 00:22:31,950
injecter là-bas, puis regarder en arrière sur la version de l'API définie ici.

296
00:22:31,950 --> 00:22:36,695
Donc, ces deux-là que j'ai besoin de configurer dans mon composant personnel

297
00:22:36,695 --> 00:22:41,815
et aussi tout autre composant où j'accède à mon serveur LoopBack,

298
00:22:41,815 --> 00:22:43,425
j'ai besoin de configurer ceci.

299
00:22:43,425 --> 00:22:48,060
Maintenant, le constructeur de SDK LoopBack suggère que nous devons le

300
00:22:48,060 --> 00:22:53,880
faire dans chacun des composants ici.

301
00:22:53,880 --> 00:23:01,775
En outre, vous remarquerez que si vous allez au fichier app module.ts dans le fichier app module.ts,

302
00:23:01,775 --> 00:23:08,610
j'ai supprimé toutes les entrées de tous les autres services et à la place j'importe

303
00:23:08,610 --> 00:23:15,480
ce ici appelé module de navigateur SDK d'importation à partir du SDK de partage ici.

304
00:23:15,480 --> 00:23:18,110
Module de navigateur SDK ici,

305
00:23:18,110 --> 00:23:24,075
et si vous descendez dans les entrées ici,

306
00:23:24,075 --> 00:23:31,635
vous verrez que j'ai configuré ce module de navigateur SDK .forRoot ici dans les entrées.

307
00:23:31,635 --> 00:23:38,180
Donc, ce module SDK Browser est automatiquement configuré lorsque nous construisons notre SDK LoopBack et

308
00:23:38,180 --> 00:23:41,000
nous avons juste besoin d'importer cela dans notre

309
00:23:41,000 --> 00:23:44,705
fichier .ts de l'application et aussi remarquer que les fournisseurs,

310
00:23:44,705 --> 00:23:46,895
c'est là que nous avons configuré nos services,

311
00:23:46,895 --> 00:23:49,540
ne contiennent plus aucun des services parce que

312
00:23:49,540 --> 00:23:52,745
vient dans le cadre de mon SDK LoopBack,

313
00:23:52,745 --> 00:23:56,715
donc la seule chose que je fournit est l'URL de base ici.

314
00:23:56,715 --> 00:24:02,510
J' ai supprimé tous les autres de mon fichier module.ts d'application ici.

315
00:24:03,180 --> 00:24:07,325
Donc, c'est un changement que vous remarquerez.

316
00:24:07,325 --> 00:24:11,720
De même, si vous allez dans le fichier À propos de component.ts,

317
00:24:11,720 --> 00:24:14,740
le fichier Dish.Detail component.ts,

318
00:24:14,740 --> 00:24:19,740
le fichier component.ts favoris et aussi le fichier component.ts de menu.

319
00:24:19,740 --> 00:24:22,420
Alors regardons le fichier de composant de menu .ts.

320
00:24:22,420 --> 00:24:25,190
Donc, vous verrez ici à nouveau j'importe ces

321
00:24:25,190 --> 00:24:29,370
quatre, puis dans mon composant de menu, je dis, l'

322
00:24:29,370 --> 00:24:33,075
API de plats de services Dish et puis je suis en train de

323
00:24:33,075 --> 00:24:37,400
configurer la version de l'ensemble LoopbackConfig BaseURL setAPI.

324
00:24:37,400 --> 00:24:42,550
Je l'ai déjà fait dans le dépôt Angular que je

325
00:24:42,550 --> 00:24:49,235
vous ai fourni pour mon application angulaire pour le serveur LoopBack,

326
00:24:49,235 --> 00:24:54,220
et aussi, vous verrez que je viens de faire quelques modifications ici.

327
00:24:54,220 --> 00:25:00,225
Donc, si vous voulez trouver tous les articles du service de vaisselle de sorte que vous dites simplement

328
00:25:00,225 --> 00:25:03,335
dishservice.Find et qui va retourner

329
00:25:03,335 --> 00:25:09,100
tous les plats qui sont là dans mon serveur LoopBack ici.

330
00:25:09,100 --> 00:25:11,425
C' est ce que je récupère ici.

331
00:25:11,425 --> 00:25:15,435
Donc, le reste du code devrait sembler familier ici sauf que ici, j'appelle des

332
00:25:15,435 --> 00:25:20,010
plats est égal à des plats et une gamme de plats ici.

333
00:25:20,010 --> 00:25:22,995
C' est donc le changement que vous verrez dans le composant de menu.

334
00:25:22,995 --> 00:25:28,810
Maintenant, vous devez vous demander comment fonctionne l'authentification utilisateur dans ce cas.

335
00:25:28,810 --> 00:25:32,275
Pour l'authentification de l'utilisateur, permettez-moi d'attirer votre attention sur

336
00:25:32,275 --> 00:25:35,800
deux endroits où j'utilise l'authentification de l'utilisateur.

337
00:25:35,800 --> 00:25:38,735
Allons d'abord au composant de connexion.

338
00:25:38,735 --> 00:25:40,990
Donc, dans le composant de connexion,

339
00:25:40,990 --> 00:25:46,030
vous verrez que dans le composant de connexion j'importe ces deux ici,

340
00:25:46,030 --> 00:25:49,970
l'API client qui est les services qui me permettent de

341
00:25:49,970 --> 00:25:54,245
faire l'authentification de l'utilisateur et la connexion et la déconnexion,

342
00:25:54,245 --> 00:25:57,430
et aussi j'importe le modèle de client et le modèle de

343
00:25:57,430 --> 00:26:00,995
jeton d'accès et dans le composant de connexion,

344
00:26:00,995 --> 00:26:06,320
vous verrez que par le service Auth est maintenant rien d'autre que l'API client et

345
00:26:06,730 --> 00:26:15,670
aussi vous remarquerez que dans le composant de connexion lorsque le formulaire de connexion est soumis,

346
00:26:15,670 --> 00:26:19,530
j'appelle ce AuthService.login.

347
00:26:19,530 --> 00:26:24,655
Cette fonction de connexion est disponible via l'API client.

348
00:26:24,655 --> 00:26:30,775
Rappel lorsque nous avons essayé de nous connecter à l'aide de l'explorateur d'API de repos LoopBack,

349
00:26:30,775 --> 00:26:36,500
nous utilisions le point de terminaison client pour se connecter au système.

350
00:26:36,500 --> 00:26:39,310
Donc, c'est exactement ce que je fais dans le code ici.

351
00:26:39,310 --> 00:26:43,335
Donc, nous allons dire ce AuthService.login et ici vous voyez qu'

352
00:26:43,335 --> 00:26:47,930
il prend ces paramètres libres ici,

353
00:26:47,930 --> 00:26:55,425
le nom d'utilisateur et le mot de passe comme le premier objet JavaScript ici,

354
00:26:55,425 --> 00:27:01,755
et puis je spécifie également cet utilisateur.remember., .remember est le drapeau

355
00:27:01,755 --> 00:27:08,310
de la case se souvenir de moi que nous avons dans notre boîte de dialogue des composants de connexion.

356
00:27:08,310 --> 00:27:12,180
Ainsi, lorsque l'utilisateur vérifie que dans les informations de l'utilisateur sera

357
00:27:12,180 --> 00:27:16,095
automatiquement persisté par le SDK.

358
00:27:16,095 --> 00:27:18,945
Service Auth fourni dans le SDK.

359
00:27:18,945 --> 00:27:21,275
Donc, maintenant vous voyez que je n'ai pas besoin d'

360
00:27:21,275 --> 00:27:24,290
implémenter explicitement un service d'autorisation qui est

361
00:27:24,290 --> 00:27:26,940
automatiquement disponible pour moi via

362
00:27:26,940 --> 00:27:31,565
l'API client qui est disponible en tant que service ici.

363
00:27:31,565 --> 00:27:35,320
Donc, c'est ainsi que je me connecte à l'utilisateur ici,

364
00:27:35,320 --> 00:27:38,275
et quand l'utilisateur se connecte, cela retournera

365
00:27:38,275 --> 00:27:45,015
un objet JavaScript et à partir de l'objet JavaScript, j'obtiens

366
00:27:45,015 --> 00:27:50,930
l'utilisateur res.user.. fournit les informations de l'utilisateur pour moi et j'

367
00:27:50,930 --> 00:27:57,355
envoie simplement cela à mon HeaderComponent ici.

368
00:27:57,355 --> 00:27:59,860
Donc, aller dans le HeaderComponent.

369
00:27:59,860 --> 00:28:02,235
Donc, allons dans le composant d'en-tête,

370
00:28:02,235 --> 00:28:04,620
et dans le fichier HeaderComponent.ts,

371
00:28:04,620 --> 00:28:09,670
vous verrez que encore ici j'importe l'API client et le

372
00:28:09,670 --> 00:28:18,115
client ici et aussi vous remarquerez que dans l'API client,

373
00:28:18,115 --> 00:28:23,830
je spécifie ici note que je dis que

374
00:28:23,830 --> 00:28:29,880
ce client est cet AuthService GetCachedCurrent.

375
00:28:29,880 --> 00:28:34,190
Donc, si un utilisateur est verrouillé dans les

376
00:28:34,190 --> 00:28:38,660
informations des utilisateurs actuellement connectés sont jetées dans le AuthService qui n'est rien d'autre que l'API client.

377
00:28:38,660 --> 00:28:43,775
Donc, quand j'appelle ce getCachedCurrent, cela retournera l'utilisateur actuellement connecté.

378
00:28:43,775 --> 00:28:45,570
Si aucun utilisateur n'est connecté,

379
00:28:45,570 --> 00:28:46,820
cela renvoie null.

380
00:28:46,820 --> 00:28:51,865
C' est donc une façon de vérifier si un utilisateur est actuellement connecté ou non.

381
00:28:51,865 --> 00:28:55,690
Donc, si l'utilisateur est actuellement connecté, alors this.customer

382
00:28:55,690 --> 00:28:59,740
obtiendra les informations sur le client qui est chargé dans.

383
00:28:59,740 --> 00:29:02,385
Les informations client, y compris le prénom, le nom,

384
00:29:02,385 --> 00:29:11,190
l'e-mail et le profil de l'autre utilisateur, seront disponibles pour cet objet this.customer.

385
00:29:11,190 --> 00:29:16,080
Donc, ici, je vérifie pour m'assurer que le this.customer n'est pas nul.

386
00:29:16,080 --> 00:29:19,265
Si ce n'est pas null, je vais enregistrer le nom d'utilisateur dans

387
00:29:19,265 --> 00:29:23,100
this.customer.username et de cette façon, lorsque

388
00:29:23,100 --> 00:29:26,705
le nom d'utilisateur est défini, mon en-tête dans

389
00:29:26,705 --> 00:29:31,690
la barre d'outils dans mon HeaderComponent reflétera le nom de l'utilisateur là-bas.

390
00:29:31,690 --> 00:29:37,820
Maintenant, pour déconnecter l'utilisateur tout ce que je fais, c'est que je mets le nom d'utilisateur et

391
00:29:37,820 --> 00:29:45,665
les variables client à null, puis j'ai simplement appelé authService.log,

392
00:29:45,665 --> 00:29:51,075
AuthServices est CustomerAPI.Logout, et c'est ainsi que je déconnecte l'utilisateur.

393
00:29:51,075 --> 00:29:52,760
Lorsque l'utilisateur se déconnecte,

394
00:29:52,760 --> 00:29:55,750
ses informations d'identification sont toutes détruites.

395
00:29:55,750 --> 00:30:02,360
Maintenant, tout cela est pris en charge automatiquement par le service d'API client

396
00:30:02,360 --> 00:30:09,075
qui est disponible dans mon SDK LoopBack que je viens de construire là-bas.

397
00:30:09,075 --> 00:30:13,830
Donc, vous remarquez que la façon dont le Générateur de SDK LoopBack construit

398
00:30:13,830 --> 00:30:19,430
les services et les modèles et tout ce dont j'ai besoin et dans mon application Angular,

399
00:30:19,430 --> 00:30:22,360
je suis simplement en train d'importer

400
00:30:22,360 --> 00:30:25,450
ceux-ci et ensuite de les utiliser pour configurer mon application Angular.

401
00:30:25,450 --> 00:30:27,065
Donc, une fois que j'ai construit

402
00:30:27,065 --> 00:30:32,510
le SDK LoopBack en utilisant le Générateur de SDK LoopBack, tout ce qui me reste est d'

403
00:30:32,510 --> 00:30:40,545
implémenter les composants et leurs modèles de vue qui sont assis tout le reste.

404
00:30:40,545 --> 00:30:45,480
Les services sont automatiquement construits pour moi par le logiciel LoopBack SDK Builder,

405
00:30:45,480 --> 00:30:49,160
les modèles sont automatiquement construits pour moi et tout ce que je dois faire est

406
00:30:49,160 --> 00:30:54,060
juste d'importer ceux-ci dans tous les composants où j'ai besoin d'en faire usage.

407
00:30:54,060 --> 00:31:01,775
Donc, remarquez comment cette application angulaire a été mise à jour pour utiliser le SDK LoopBack.

408
00:31:01,775 --> 00:31:06,520
Maintenant, si vous voulez plus d'informations sur la façon dont le SDK LoopBack doit être utilisé,

409
00:31:06,520 --> 00:31:11,465
vous pouvez également consulter la documentation fournie par le Générateur de SDK LoopBack.

410
00:31:11,465 --> 00:31:14,425
Par conséquent, si vous accédez au Générateur de SDK LoopBack,

411
00:31:14,425 --> 00:31:19,440
un lien vers celui-ci est disponible dans les ressources supplémentaires de cette leçon,

412
00:31:19,440 --> 00:31:21,820
et dans le Générateur de SDK LoopBack,

413
00:31:21,820 --> 00:31:24,930
vous disposerez

414
00:31:24,930 --> 00:31:31,830
de toutes les informations dont vous avez besoin pour utiliser le SDK créé par le Générateur de SDK LoopBack.

415
00:31:31,830 --> 00:31:34,205
Donc, si vous allez à la documentation wiki.

416
00:31:34,205 --> 00:31:39,830
Dans la documentation wiki, beaucoup d'explications sur la façon dont le Générateur de SDK LoopBack peut

417
00:31:39,830 --> 00:31:46,050
être ou le SDK généré par le Générateur de SDK LoopBack doit être utilisé est tout donné ici.

418
00:31:46,050 --> 00:31:49,460
Donc, je viens de parcourir cette documentation pour comprendre comment

419
00:31:49,460 --> 00:31:53,555
utiliser le SDK qui est construit par le Générateur de SDK LoopBack,

420
00:31:53,555 --> 00:31:57,420
puis reconfiguré mon application Angular pour en faire usage

421
00:31:57,420 --> 00:32:02,090
pour interagir avec mon serveur LoopBack.

422
00:32:02,090 --> 00:32:06,715
Donc, avec cela, je vous l'ai rapidement démontré comment

423
00:32:06,715 --> 00:32:11,140
vous pouvez construire votre application Angular et

424
00:32:11,140 --> 00:32:15,270
tirer parti du SDK construit par le Générateur de SDK LoopBack

425
00:32:15,270 --> 00:32:20,365
afin d'accéder à votre serveur LoopBack depuis votre application Angular.

426
00:32:20,365 --> 00:32:26,210
Une approche similaire sera également appropriée pour votre application Ionic.

427
00:32:26,210 --> 00:32:31,610
Pour l'application Native Script, vous construisez le SDK avec NG2 natif dans

428
00:32:31,610 --> 00:32:37,835
la ligne de commande au lieu de NG2 Web comme nous l'avons utilisé lors de la création de ce SDK.

429
00:32:37,835 --> 00:32:41,890
Avec cette introduction rapide sur la façon dont nous pouvons utiliser

430
00:32:41,890 --> 00:32:44,815
le Générateur de SDK LoopBack pour construire le SDK et

431
00:32:44,815 --> 00:32:47,980
ensuite l'utiliser dans notre application Angular,

432
00:32:47,980 --> 00:32:52,300
ils arrivent à la fin de cet exercice.