1
00:00:03,650 --> 00:00:10,755
Ora che abbiamo completato lo sviluppo di un server API Rest completo utilizzando LoopBack,

2
00:00:10,755 --> 00:00:14,639
la prossima domanda immediata che sorgerà nella tua mente è,

3
00:00:14,639 --> 00:00:20,090
come adattiamo l'applicazione Angular per fare uso di questo server API Rest?

4
00:00:20,090 --> 00:00:23,135
Come abbiamo fatto nei casi precedenti,

5
00:00:23,135 --> 00:00:29,190
avremo anche bisogno di riconfigurare la nostra applicazione angolare per fare uso specifico

6
00:00:29,190 --> 00:00:31,385
degli endpoint API Rest e

7
00:00:31,385 --> 00:00:37,190
le varie richieste API Rest come esposto dal nostro server LoopBack.

8
00:00:37,190 --> 00:00:40,295
Ora, questo è dove trarremo vantaggio di

9
00:00:40,295 --> 00:00:46,865
un SDK LoopBack che può essere costruito automaticamente per noi utilizzando un modulo Node.

10
00:00:46,865 --> 00:00:51,214
Vedremo i nostri server LoopBack,

11
00:00:51,214 --> 00:00:56,975
vari endpoint API Rest e costruiremo automaticamente l'SDK,

12
00:00:56,975 --> 00:00:59,480
che possiamo quindi incorporare nella

13
00:00:59,480 --> 00:01:04,380
nostra applicazione Angular e quindi essere in grado di comunicare con il nostro server LoopBack,

14
00:01:04,380 --> 00:01:10,055
sia per l'autenticazione e anche per essere in grado di scambiare dati.

15
00:01:10,055 --> 00:01:13,000
Per iniziare a questo esercizio,

16
00:01:13,000 --> 00:01:17,045
clonare prima il repository git che contiene

17
00:01:17,045 --> 00:01:23,535
un'applicazione Angular parzialmente completata che comunica con il nostro server LoopBack.

18
00:01:23,535 --> 00:01:26,730
Quindi, per farlo, vai nella tua posizione comoda sul tuo computer.

19
00:01:26,730 --> 00:01:29,580
Quindi, eccomi qui nella mia cartella Coursera Angular.

20
00:01:29,580 --> 00:01:33,390
Ho intenzione di clonare il repository git

21
00:01:33,390 --> 00:01:35,680
digitando 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
e poi clonare questo repository git.

24
00:01:55,460 --> 00:01:58,645
Una volta che il repository git è clonato,

25
00:01:58,645 --> 00:02:08,355
allora ci sposteremo nella cartella Confusione Angular6 LoopBack e quindi

26
00:02:08,355 --> 00:02:12,370
eseguire un'installazione NPM per installare

27
00:02:12,370 --> 00:02:19,135
tutti i moduli nodo per questa applicazione angolare parzialmente completata.

28
00:02:19,135 --> 00:02:26,670
Per creare automaticamente il kit di sviluppo software LoopBack per il nostro server LoopBack,

29
00:02:26,670 --> 00:02:32,125
prenderemo l'aiuto di questo modulo nodo LoopBack SDK Builder.

30
00:02:32,125 --> 00:02:34,955
Quindi, questo LoopBack SDK Builder

31
00:02:34,955 --> 00:02:39,140
è un modulo nodo guidato dalla comunità che è effettivamente sviluppato

32
00:02:39,140 --> 00:02:46,380
dal LoopBack SDK Angular ufficiale che gli sviluppatori di LoopBack avevano rilasciato.

33
00:02:46,380 --> 00:02:50,160
Il Loopback SDK Angular supportato Angular JS.

34
00:02:50,160 --> 00:02:53,885
Quindi, questo è stato modificato in questo Loopback SDK Builder

35
00:02:53,885 --> 00:02:58,390
per supportare Angular due e sulle applicazioni.

36
00:02:58,390 --> 00:03:01,090
Quindi, il LoopBack SDK Builder,

37
00:03:01,090 --> 00:03:10,155
il modulo nodo stesso una volta installato nella cartella del progetto del server,

38
00:03:10,155 --> 00:03:13,610
quindi è possibile utilizzare LoopBack SDK Builder per

39
00:03:13,610 --> 00:03:18,810
passare automaticamente attraverso l'applicazione LoopBack che è già stata creata.

40
00:03:18,810 --> 00:03:22,190
Questo costruirà automaticamente tutto ciò di

41
00:03:22,190 --> 00:03:25,610
cui abbiamo bisogno per iniziare con la nostra applicazione Angular.

42
00:03:25,610 --> 00:03:27,765
Quindi, costruisce il kit di sviluppo software.

43
00:03:27,765 --> 00:03:30,155
Quindi, all'interno del kit di sviluppo software,

44
00:03:30,155 --> 00:03:35,995
LoopBack SDK Builder esporta

45
00:03:35,995 --> 00:03:41,930
tutte le interfacce, tutti i modelli per i vari dati che stiamo per memorizzare sul

46
00:03:41,930 --> 00:03:44,390
nostro server LoopBack e anche

47
00:03:44,390 --> 00:03:49,520
tutti i servizi API che possono essere utilizzati all'interno dell'applicazione Angular.

48
00:03:49,520 --> 00:03:55,485
Quindi, i tuoi modelli e i tuoi servizi vengono automaticamente per il viaggio una volta creato l'SDK.

49
00:03:55,485 --> 00:04:00,935
Ora è solo questione di incorporare questo SDK nella nostra applicazione Angular

50
00:04:00,935 --> 00:04:03,265
e quindi iniziare rapidamente.

51
00:04:03,265 --> 00:04:08,010
Dal momento che abbiamo già costruito la nostra applicazione Angular in un corso precedente,

52
00:04:08,010 --> 00:04:11,900
ho intenzione di retrofit quell'applicazione per utilizzare l'

53
00:04:11,900 --> 00:04:16,660
SDK LoopBack che esporteremo da questo LoopBack SDK Builder.

54
00:04:16,660 --> 00:04:18,620
Nel passaggio precedente,

55
00:04:18,620 --> 00:04:20,030
hai appena installato

56
00:04:20,030 --> 00:04:23,420
l'applicazione angolare parzialmente completata che è

57
00:04:23,420 --> 00:04:27,305
già stata adattata per utilizzare l'SDK di LoopBack.

58
00:04:27,305 --> 00:04:30,070
Quindi, andiamo avanti e costruiamo

59
00:04:30,070 --> 00:04:33,855
il LoopBack SDK e quindi distribuirlo nella nostra applicazione Angular,

60
00:04:33,855 --> 00:04:41,605
quindi andiamo avanti e compilare la nostra applicazione Angular e iniziare con esso.

61
00:04:41,605 --> 00:04:44,390
Per configurare LoopBack SDK,

62
00:04:44,390 --> 00:04:51,830
andare alla cartella del server LoopBack nella scheda terminale o nella finestra di comando.

63
00:04:51,830 --> 00:04:57,355
Quindi eccomi nella mia cartella del server LoopBack.

64
00:04:57,355 --> 00:04:58,855
Quindi, in questa cartella,

65
00:04:58,855 --> 00:05:14,185
lasciami andare avanti e installare quel LoopBack

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

67
00:05:16,960 --> 00:05:19,535
Una volta installato il builder,

68
00:05:19,535 --> 00:05:22,625
andiamo avanti e costruiamo l'SDK di LoopBack.

69
00:05:22,625 --> 00:05:24,835
Per costruire il LoopBack SDK,

70
00:05:24,835 --> 00:05:34,460
prenderemo l'aiuto dello strumento da riga di comando LB-SDK che questo modulo LoopBack SDK,

71
00:05:34,460 --> 00:05:36,370
configura automaticamente per noi.

72
00:05:36,370 --> 00:05:42,060
Quindi, per accedervi, diremo,. /node moduli.

73
00:05:42,060 --> 00:05:43,610
Quindi, nei moduli del nodo,

74
00:05:43,610 --> 00:05:47,570
c'è la cartella a.bin che viene creata automaticamente ogni volta che si

75
00:05:47,570 --> 00:05:51,770
installano vari moduli nodo nella cartella lì.

76
00:05:51,770 --> 00:05:55,040
Quindi, per andare alla cartella the.bin,

77
00:05:55,040 --> 00:06:01,540
accederemo a questo comando LB-SDK lì,

78
00:06:01,540 --> 00:06:03,490
che viene installato automaticamente,

79
00:06:03,490 --> 00:06:07,850
quindi chiameremo questo server larghezza. /server.js,

80
00:06:12,430 --> 00:06:20,310
e abbiamo bisogno di specificare il percorso per l'applicazione angolare che abbiamo appena configurato.

81
00:06:20,310 --> 00:06:23,180
Quindi, la mia applicazione Angular è attualmente nei

82
00:06:23,180 --> 00:06:28,865
miei documenti Coursera angolare Confusione cartella angolare LoopBack.

83
00:06:28,865 --> 00:06:31,410
Quindi, fammi copiare quella parte.

84
00:06:31,410 --> 00:06:36,470
Quindi lasciami andare nel mio terminale o nella finestra di comando

85
00:06:36,470 --> 00:06:41,600
in cui sto cercando di configurare il mio SDK LoopBack.

86
00:06:41,600 --> 00:06:43,490
Quindi, al prompt,

87
00:06:43,490 --> 00:06:45,995
dal momento che è nella cartella I miei documenti,

88
00:06:45,995 --> 00:06:55,540
ho intenzione di digitare il percorso completo di questo a partire dalla mia cartella principale nel mio mac.

89
00:06:55,540 --> 00:06:57,680
Se si utilizza Windows,

90
00:06:57,680 --> 00:07:04,370
assicurarsi che questo percorso indichi il percorso completo a partire dai due punti C o dai due punti D, a

91
00:07:04,370 --> 00:07:07,540
seconda di quale unità si sta installando sul computer Windows.

92
00:07:07,540 --> 00:07:12,650
Quindi, il percorso completo della cartella LoopBack angolare,

93
00:07:12,650 --> 00:07:15,505
e quindi diremo,

94
00:07:15,505 --> 00:07:21,900
/SRC, la cartella di origine lì, e quindi app.

95
00:07:21,900 --> 00:07:24,710
Quindi, stiamo andando a distribuire l'SDK

96
00:07:24,710 --> 00:07:30,120
nella cartella condivisa nella sottocartella SDK lì.

97
00:07:30,430 --> 00:07:36,680
Vogliamo che questo LoopBack SDK Builder

98
00:07:36,680 --> 00:07:43,570
distribuisca automaticamente la versione Web NG2 dell'SDK.

99
00:07:43,570 --> 00:07:45,879
Quindi, questa è la versione che supporterà

100
00:07:45,879 --> 00:07:50,380
le applicazioni web e la nostra applicazione Angular in questo caso.

101
00:07:50,380 --> 00:07:54,870
Se stai costruendo questo per un'applicazione script nativa, allora dirai,

102
00:07:54,870 --> 00:08:00,050
NG2 nativo per creare l'SDK per l'applicazione Native Script.

103
00:08:00,050 --> 00:08:02,380
Dal momento che sto costruendo la mia applicazione Angular,

104
00:08:02,380 --> 00:08:04,580
dirò semplicemente, NG2 web,

105
00:08:04,580 --> 00:08:08,190
e poi lascio che Loopback SDK Builder

106
00:08:08,190 --> 00:08:12,230
crei automaticamente il kit di sviluppo software e quindi lo distribuisca

107
00:08:12,230 --> 00:08:20,780
nella mia cartella app/condivisa/sdk di origine delle applicazioni Angular lì.

108
00:08:20,780 --> 00:08:23,715
Quindi, dopo alcuni secondi,

109
00:08:23,715 --> 00:08:29,915
l'SDK viene creato e distribuito nella mia applicazione Angular.

110
00:08:29,915 --> 00:08:33,250
Ora, prima di avviare la mia applicazione Angular,

111
00:08:33,250 --> 00:08:36,730
lasciami avviare il mio server LoopBack,

112
00:08:36,730 --> 00:08:40,820
e prima di farlo andrò in un'altra scheda terminale

113
00:08:40,820 --> 00:08:44,900
qui e poi avviare il mio server MongoDB,

114
00:08:44,900 --> 00:08:45,955
così bene dirò,

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

116
00:08:55,790 --> 00:08:57,890
avviare il mio server MongoDB.

117
00:08:57,890 --> 00:09:02,760
Innanzitutto, fammi avviare il mio server LoopBack.

118
00:09:02,760 --> 00:09:07,710
Quindi, al prompt NPM start,

119
00:09:07,710 --> 00:09:12,140
e il mio server LoopBack dovrebbe essere attivo e in esecuzione in breve tempo.

120
00:09:12,140 --> 00:09:17,555
Quindi, ora andando alla mia applicazione LoopBack,

121
00:09:17,555 --> 00:09:20,645
lasciami aprire questa applicazione nel

122
00:09:20,645 --> 00:09:25,890
mio codice di Visual Studio in modo che possiamo guardare il codice sorgente.

123
00:09:27,500 --> 00:09:31,665
Una volta che la mia applicazione è aperta nel codice di Visual Studio,

124
00:09:31,665 --> 00:09:37,315
lasciami prendere in una nuova finestra desktop.

125
00:09:37,315 --> 00:09:45,200
Quindi, fammi anche avviare la mia distribuzione dell'applicazione Angular

126
00:09:45,200 --> 00:09:53,645
digitando ngServe al prompt e attendere che la mia applicazione Angular venga compilata.

127
00:09:53,645 --> 00:09:57,785
Una volta che la mia applicazione Angular è stata compilata e applicata,

128
00:09:57,785 --> 00:10:00,910
lasciami andare su un browser

129
00:10:00,910 --> 00:10:04,810
e quindi prima eseguire il checkout di questa applicazione Angular.

130
00:10:04,810 --> 00:10:06,935
Andando al browser,

131
00:10:06,935 --> 00:10:09,455
lasciami aprire una nuova scheda qui,

132
00:10:09,455 --> 00:10:13,760
e quindi digita localhost: 4200 e vedrai

133
00:10:13,760 --> 00:10:18,345
l'applicazione angolare distribuita a questa finestra del browser qui,

134
00:10:18,345 --> 00:10:21,070
e puoi vedere che la Home,

135
00:10:21,070 --> 00:10:25,095
la pagina Chi siamo con tutti i dati,

136
00:10:25,095 --> 00:10:32,740
quindi il Menu e anche i Miei Preferiti.

137
00:10:34,120 --> 00:10:38,410
Attualmente che non mostra nulla perché

138
00:10:38,410 --> 00:10:42,640
nessun utente è connesso e la pagina dei contatti, proprio come prima.

139
00:10:42,640 --> 00:10:47,520
Quindi, per accedere, lasciami accedere come utente e poi scriverò il

140
00:10:47,520 --> 00:10:52,540
mio nome utente e una password qui,

141
00:10:52,540 --> 00:10:59,030
e poi una volta effettuato l'accesso, sarai in grado di vedere che quando vado a I miei preferiti,

142
00:10:59,030 --> 00:11:04,665
i Preferiti di questo particolare utente verranno visualizzati qui.

143
00:11:04,665 --> 00:11:08,680
Proprio come prima, possiamo digitare commenti e quindi inviare commenti,

144
00:11:08,680 --> 00:11:13,515
e quindi anche aggiungere elementi ai preferiti e così via.

145
00:11:13,515 --> 00:11:16,900
Tutte le funzionalità che avete visto con le versioni precedenti

146
00:11:16,900 --> 00:11:22,740
dell'applicazione Angular sono supportate anche in questa versione dell'applicazione Angular.

147
00:11:22,740 --> 00:11:28,860
Anche affinché il tuo server LoopBack sia in grado di servire immagini,

148
00:11:28,860 --> 00:11:36,235
tutti questi dati verranno memorizzati nel codice del server nella cartella client del codice server.

149
00:11:36,235 --> 00:11:39,975
Quindi, nella cartella client del mio server LoopBack,

150
00:11:39,975 --> 00:11:43,010
si noti che ho creato questa sottocartella

151
00:11:43,010 --> 00:11:47,365
denominata immagini e quindi memorizzato tutte le immagini nella sottocartella.

152
00:11:47,365 --> 00:11:52,010
Ora, affinché queste immagini vengano servite e anche

153
00:11:52,010 --> 00:11:58,930
la cartella client venga utilizzata come cartella pubblica per il mio server LoopBack,

154
00:11:58,930 --> 00:12:02,630
quindi in un paio di modifiche che devo apportare al mio server LoopBack.

155
00:12:02,630 --> 00:12:05,100
Ora, la prima cosa che devi fare è

156
00:12:05,100 --> 00:12:08,275
andare nella cartella di avvio e nella cartella di avvio,

157
00:12:08,275 --> 00:12:12,250
vedresti questo file root.js qui,

158
00:12:12,250 --> 00:12:15,025
che contiene queste informazioni qui.

159
00:12:15,025 --> 00:12:18,410
Ora, puoi eliminare il file root.js

160
00:12:18,410 --> 00:12:22,330
o semplicemente rinominare il file root.js in qualcos'altro.

161
00:12:22,330 --> 00:12:29,630
Quindi qui, vedi che ho rinominato questo file in root.jsold con l'estensione jsold.

162
00:12:29,630 --> 00:12:34,190
Ora, questo file non dovrebbe più contenere l'estensione the.js.

163
00:12:34,190 --> 00:12:37,430
Quindi, qualsiasi cosa diversa dall'estensione the.js va bene.

164
00:12:37,430 --> 00:12:39,975
Quindi, ciò significa che in questo caso,

165
00:12:39,975 --> 00:12:45,250
il mio server LoopBack, all'avvio non eseguirà il codice in questa cartella.

166
00:12:45,250 --> 00:12:51,745
Ora, quando guardi il codice nel file root.js che è stato configurato in precedenza,

167
00:12:51,745 --> 00:12:55,605
hai visto che il router è stato configurato in modo tale che,

168
00:12:55,605 --> 00:13:00,955
quando accedi alla barra che è la cartella principale dei tuoi server,

169
00:13:00,955 --> 00:13:05,170
allora sarà semplicemente servire lo stato dei server LoopBack e in effetti,

170
00:13:05,170 --> 00:13:08,175
questo è ciò che abbiamo visto il nostro server LoopBack serve

171
00:13:08,175 --> 00:13:15,055
l'uptime e l'ultimo tempo di riavvio per il nostro server.

172
00:13:15,055 --> 00:13:16,590
Non vogliamo che lo faccia,

173
00:13:16,590 --> 00:13:20,920
invece vogliamo che il nostro server LoopBack sia in grado di utilizzare qualsiasi cosa abbiamo

174
00:13:20,920 --> 00:13:25,390
inserito nella cartella client come cartella pubblica e quindi

175
00:13:25,390 --> 00:13:27,900
qualsiasi applicazione client può essere distribuita

176
00:13:27,900 --> 00:13:31,590
nella cartella client del mio server LoopBack e dovrebbe essere

177
00:13:31,590 --> 00:13:39,250
accessibile quando accediamo a LoopBack ai suoi punti finali della barra standard.

178
00:13:39,250 --> 00:13:43,940
Quindi, questa è la radice della cartella del server.

179
00:13:43,940 --> 00:13:46,890
Quindi, per farlo, la prima cosa che devi fare è

180
00:13:46,890 --> 00:13:50,560
cambiare questo nome di file root.js in root.

181
00:13:50,560 --> 00:13:53,245
ad esempio, puoi semplicemente rinominarlo in

182
00:13:53,245 --> 00:13:56,440
root.jsold o puoi semplicemente eliminare quel file.

183
00:13:56,440 --> 00:14:00,325
Tale file non sarà necessario in questa versione del mio server LoopBack.

184
00:14:00,325 --> 00:14:01,840
Ora, non solo,

185
00:14:01,840 --> 00:14:08,265
la seconda parte che devi riconfigurare è andare nel file middleware.json qui.

186
00:14:08,265 --> 00:14:10,230
Il file middleware.json.

187
00:14:10,230 --> 00:14:12,170
Nel file middleware.json,

188
00:14:12,170 --> 00:14:14,605
se scorri verso il basso,

189
00:14:14,605 --> 00:14:17,195
vedrai che qui,

190
00:14:17,195 --> 00:14:23,755
originariamente questo conterrà semplicemente i file: e poi una parentesi vuota qui.

191
00:14:23,755 --> 00:14:26,505
Ora, in quella parentesi vuota

192
00:14:26,505 --> 00:14:28,420
qui, aggiungi questo codice qui,

193
00:14:28,420 --> 00:14:36,430
che dice loopback #static e dice parametri $!.. /client.

194
00:14:36,820 --> 00:14:41,025
Quindi, questo indicherà al mio server LoopBack

195
00:14:41,025 --> 00:14:45,670
che la cartella client che è disponibile qui

196
00:14:45,670 --> 00:14:53,800
dovrebbe essere utilizzata come cartella pubblica statica per il mio server LoopBack.

197
00:14:53,800 --> 00:14:58,790
Quindi, qualsiasi cosa inserita nella cartella client è accessibile dal mio server.

198
00:14:58,790 --> 00:15:05,725
Quindi, questa è la modifica aggiuntiva che devi fare al file middleware.json.

199
00:15:05,725 --> 00:15:08,235
Quindi, una volta che si eseguono queste due modifiche,

200
00:15:08,235 --> 00:15:15,030
il server LoopBack sarà tutto configurato per servire i dati, incluse

201
00:15:15,030 --> 00:15:17,940
le immagini che si sta andando a mettere

202
00:15:17,940 --> 00:15:22,575
nella sottocartella immagini sotto la cartella client qui.

203
00:15:22,575 --> 00:15:28,475
Quindi, assicurati di copiare le immagini nella cartella client qui e il secondo è quello di

204
00:15:28,475 --> 00:15:34,625
andare al file middleware.json nella cartella server

205
00:15:34,625 --> 00:15:37,265
e quindi aggiornare questa parte.

206
00:15:37,265 --> 00:15:43,860
Una volta fatto questo, allora queste immagini possono essere accessibili semplicemente accedendo

207
00:15:43,860 --> 00:15:48,760
al /images/ il nome del file immagine per accedere a

208
00:15:48,760 --> 00:15:54,120
queste immagini perché i nostri piatti

209
00:15:54,120 --> 00:16:00,390
, leader e le promozioni richiedono questi file immagine e

210
00:16:00,390 --> 00:16:03,525
così che sarà disponibile per noi

211
00:16:03,525 --> 00:16:08,080
dal server LoopBack e anche qualunque cosa tu abbia inserito nella cartella client.

212
00:16:08,080 --> 00:16:14,050
Quindi, ad esempio, è possibile preparare la cartella di distribuzione

213
00:16:14,050 --> 00:16:16,920
per l'applicazione Angular e semplicemente copiare

214
00:16:16,920 --> 00:16:21,025
l'intero contenuto della cartella di distribuzione nella cartella client qui,

215
00:16:21,025 --> 00:16:25,220
e quindi se si accede al server LoopBack nel

216
00:16:25,220 --> 00:16:30,850
suo endpoint radice standard,

217
00:16:30,850 --> 00:16:37,565
l'applicazione Angular sarà servito automaticamente dal server LoopBack.

218
00:16:37,565 --> 00:16:43,950
Quindi, queste sono le due modifiche che è necessario apportare al server LoopBack.

219
00:16:43,950 --> 00:16:49,700
Ovviamente, devi essere curioso di sapere come è costruito esattamente questo SDK,

220
00:16:49,700 --> 00:16:52,820
dove esattamente è questo SDK e come

221
00:16:52,820 --> 00:16:56,045
farò effettivamente a utilizzarlo all'interno della mia applicazione Angular.

222
00:16:56,045 --> 00:17:01,955
Quindi, per fare ciò, andiamo alla nostra applicazione Angular e nella cartella sorgente,

223
00:17:01,955 --> 00:17:04,375
sotto la cartella dell'app di origine,

224
00:17:04,375 --> 00:17:06,565
ora quando apri la cartella condivisa,

225
00:17:06,565 --> 00:17:13,235
vedrai che c'è una sottocartella qui denominata SDK e all'interno di questa sottocartella SDK,

226
00:17:13,235 --> 00:17:16,365
troverai un sacco di file qui,

227
00:17:16,365 --> 00:17:22,565
lb.config.ts, index.ts e all'interno dei socket di archiviazione,

228
00:17:22,565 --> 00:17:25,330
dei servizi e all'interno del servizio,

229
00:17:25,330 --> 00:17:28,255
sono disponibili servizi personalizzati e servizi di base qui

230
00:17:28,255 --> 00:17:31,960
e i vari modelli che vengono distribuiti qui.

231
00:17:31,960 --> 00:17:36,630
I modelli contengono effettivamente le strutture del modello

232
00:17:36,630 --> 00:17:42,605
per i nostri vari modelli che stiamo implementando.

233
00:17:42,605 --> 00:17:45,280
Ora, questo è l'SDK di LoopBack.

234
00:17:45,280 --> 00:17:49,430
Questo codice viene creato automaticamente per te e, se vuoi,

235
00:17:49,430 --> 00:17:52,800
puoi semplicemente entrare e

236
00:17:52,800 --> 00:17:57,030
passare attraverso questi file per vedere solo ciò che è disponibile lì.

237
00:17:57,030 --> 00:18:00,560
Assicurarsi di non modificare nessuno dei file in

238
00:18:00,560 --> 00:18:02,940
questa sottocartella SDK perché questo viene

239
00:18:02,940 --> 00:18:06,040
creato automaticamente dal Loopback SDK Builder

240
00:18:06,040 --> 00:18:10,355
e questo conterrà tutto ciò che è configurato in modo che

241
00:18:10,355 --> 00:18:15,125
il server LoopBack sia accessibile dall'applicazione Angular.

242
00:18:15,125 --> 00:18:19,240
I servizi che farò uso sono tutti disponibili qui.

243
00:18:19,240 --> 00:18:21,630
Ora, come facciamo a sfruttare questo?

244
00:18:21,630 --> 00:18:25,600
Quindi, per aiutarti a capire come facciamo uso di questo,

245
00:18:25,600 --> 00:18:33,725
visitiamo il nostro componente di casa e poi vediamo come il componente di casa è ora aggiornato.

246
00:18:33,725 --> 00:18:35,855
Quindi, quando vai al componente di casa,

247
00:18:35,855 --> 00:18:44,125
noterai che ora sto importando piatti da.. /shared/sdk/models.

248
00:18:44,125 --> 00:18:47,950
Quindi, questi sono i modelli che vengono automaticamente esportati

249
00:18:47,950 --> 00:18:52,390
nell'SDK dal mio Loopback SDK Builder.

250
00:18:52,390 --> 00:18:57,010
Quindi, questo è dove il mio modello di piatti sarà definito lì.

251
00:18:57,010 --> 00:18:59,450
Quindi, ho intenzione di sfruttare il modello dei piatti.

252
00:18:59,450 --> 00:19:06,290
Allo stesso modo, il servizio stesso è disponibile come questo DishesAPI,

253
00:19:06,290 --> 00:19:15,220
come puoi vedere qui e questo DishesAPI è nel.. /shared/sdk/services cartella qui.

254
00:19:15,220 --> 00:19:18,280
Allo stesso modo, le promozioni e le promozioni API,

255
00:19:18,280 --> 00:19:20,110
e leader e leader API.

256
00:19:20,110 --> 00:19:24,750
Quindi, questi sono tutti costruiti automaticamente per me dal Loopback SDK Builder.

257
00:19:24,750 --> 00:19:26,720
Ora, poi vai nel codice,

258
00:19:26,720 --> 00:19:31,045
ora noterai che dichiarerò il piatto come piatti,

259
00:19:31,045 --> 00:19:35,455
promozione come promozioni, e leader come/leader.

260
00:19:35,455 --> 00:19:39,955
Questi tre sono i modelli esportati da Loopback SDK Builder.

261
00:19:39,955 --> 00:19:44,905
Si noti anche come ho riconfigurato i tre servizi qui.

262
00:19:44,905 --> 00:19:48,090
Ora, il mio servizio di piatti si riferisce all'API dei piatti,

263
00:19:48,090 --> 00:19:50,950
ai servizi di promozione che si riferiscono alle API delle promozioni

264
00:19:50,950 --> 00:19:55,825
e al servizio leader dell'API dei leader,

265
00:19:55,825 --> 00:19:59,980
e noto anche come accedo al servizio piatto qui.

266
00:19:59,980 --> 00:20:06,290
Quindi, dirò che questo servizio piatto trovare uno e dove caratterizzato uguale a vero.

267
00:20:06,290 --> 00:20:14,539
Quindi, questo è dove ricordi che nel mio LoopBack riposo API Explorer, l'

268
00:20:14,539 --> 00:20:20,405
avevo digitato nel filtro lì,

269
00:20:20,405 --> 00:20:23,490
quindi ho provato a trovare i piatti lì.

270
00:20:23,490 --> 00:20:27,260
Quindi, questo è esattamente quello che sto facendo qui anche nel mio codice qui.

271
00:20:27,260 --> 00:20:30,140
Quindi, questo

272
00:20:30,140 --> 00:20:34,140
findOne, quindi fornito con questo, troverà un oggetto e poi lo restituirà qui,

273
00:20:34,140 --> 00:20:38,240
e poi che sto assegnando ciascuno a questo piatto qui e

274
00:20:38,240 --> 00:20:43,510
il resto della mia applicazione Angular funziona esattamente allo stesso modo di prima.

275
00:20:43,510 --> 00:20:47,490
Ora, si noti anche che nel costruttore,

276
00:20:47,490 --> 00:20:52,945
si noti come ho configurato questo chiamato LoopBack config.

277
00:20:52,945 --> 00:20:59,685
Ora, per eseguire la configurazione di LoopBack in ogni componente di cui si sta facendo uso,

278
00:20:59,685 --> 00:21:09,280
è necessario importare questa configurazione di LoopBack da questa cartella SDK condivisa qui e anche,

279
00:21:09,280 --> 00:21:13,790
questa versione API che dichiaro.

280
00:21:14,410 --> 00:21:19,340
Ho aggiornato questo file baseurl.ts.

281
00:21:19,340 --> 00:21:21,720
Quindi nella cartella URL di base,

282
00:21:21,720 --> 00:21:31,330
ho aggiornato questo al mio nome dei due punti del computer 3.000.

283
00:21:31,330 --> 00:21:35,510
Quindi, questo assicurati di sostituirlo con

284
00:21:35,510 --> 00:21:42,460
l'indirizzo IP o il nome del tuo computer specifico su cui stai eseguendo.

285
00:21:42,460 --> 00:21:50,350
Quindi, assicurati di aggiornare l'URL di base qui e la versione API qui è semplicemente una stringa.

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

287
00:21:52,560 --> 00:21:58,790
Quindi questi due verranno utilizzati nel mio file component.ts di casa.

288
00:21:58,790 --> 00:22:02,560
Quindi sto importando questa versione API qui e LoopbackConfig.

289
00:22:02,560 --> 00:22:05,475
Il BaseURL che sto già iniettando

290
00:22:05,475 --> 00:22:10,640
nel mio costruttore qui in modo che sia già disponibile qui,

291
00:22:10,640 --> 00:22:14,890
e quindi nel mio costruttore del mio componente,

292
00:22:14,890 --> 00:22:19,440
ho bisogno di fare queste due istruzioni qui.

293
00:22:19,440 --> 00:22:22,190
Quindi, diremo, «LoopBack imposta l'URL

294
00:22:22,190 --> 00:22:25,120
di base sull'URL di base» che è lo stesso di quello che ho appena

295
00:22:25,120 --> 00:22:31,950
iniettato lì e poi guardare indietro sulla versione API impostata su versione API qui.

296
00:22:31,950 --> 00:22:36,695
Quindi questi due ho bisogno di configurare nel mio componente di casa

297
00:22:36,695 --> 00:22:41,815
e anche qualsiasi altro componente in cui sto accedendo al mio server LoopBack,

298
00:22:41,815 --> 00:22:43,425
ho bisogno di configurarlo.

299
00:22:43,425 --> 00:22:48,060
Ora, il costruttore di SDK di LoopBack suggerisce che dobbiamo

300
00:22:48,060 --> 00:22:53,880
farlo in ogni singolo componente qui.

301
00:22:53,880 --> 00:23:01,775
Inoltre, noterai che se vai al file dell'app module.ts nel file dell'app module.ts,

302
00:23:01,775 --> 00:23:08,610
ho rimosso tutti gli input di tutti gli altri servizi e invece sto importando

303
00:23:08,610 --> 00:23:15,480
questo qui chiamato import SDK Browser module da share SDK qui.

304
00:23:15,480 --> 00:23:18,110
Modulo Browser SDK qui,

305
00:23:18,110 --> 00:23:24,075
e se vai giù negli input qui,

306
00:23:24,075 --> 00:23:31,635
vedrai che ho configurato questo modulo Browser SDK. ForRoot qui negli input.

307
00:23:31,635 --> 00:23:38,180
Quindi questo modulo SDK Browser viene configurato automaticamente quando costruiamo il nostro SDK LoopBack e

308
00:23:38,180 --> 00:23:41,000
abbiamo solo bisogno di importarlo nel nostro

309
00:23:41,000 --> 00:23:44,705
file module.ts dell'app e anche notare che i fornitori,

310
00:23:44,705 --> 00:23:46,895
qui è dove abbiamo configurato i nostri servizi,

311
00:23:46,895 --> 00:23:49,540
non contiene più nessuno dei servizi perché

312
00:23:49,540 --> 00:23:52,745
viene come parte del mio SDK LoopBack,

313
00:23:52,745 --> 00:23:56,715
quindi l'unica cosa che sto fornendo è l'URL di base qui.

314
00:23:56,715 --> 00:24:02,510
Ho rimosso tutti gli altri dal mio file module.ts dell'app qui.

315
00:24:03,180 --> 00:24:07,325
Quindi, questo è un cambiamento che noterete.

316
00:24:07,325 --> 00:24:11,720
Quindi, allo stesso modo, se si va al file Informazioni su component.ts,

317
00:24:11,720 --> 00:24:14,740
il file component.ts DishDetail,

318
00:24:14,740 --> 00:24:19,740
il file component.ts dei preferiti e anche il file component.ts del menu.

319
00:24:19,740 --> 00:24:22,420
Quindi diamo un'occhiata al file component.ts del menu.

320
00:24:22,420 --> 00:24:25,190
Quindi vedrai qui di nuovo che sto importando questi

321
00:24:25,190 --> 00:24:29,370
quattro e poi nel mio componente di menu sto dicendo,

322
00:24:29,370 --> 00:24:33,075
API per piatti dei servizi Dish e poi sto

323
00:24:33,075 --> 00:24:37,400
configurando la versione del set di LoopbackConfig BaseUrl SetAPI.

324
00:24:37,400 --> 00:24:42,550
L' ho già fatto nel repository Angular che

325
00:24:42,550 --> 00:24:49,235
ti ho fornito per la mia applicazione angolare per il server LoopBack,

326
00:24:49,235 --> 00:24:54,220
e inoltre, vedrai che ho appena apportato alcune modifiche qui.

327
00:24:54,220 --> 00:25:00,225
Quindi, se si desidera trovare tutti gli elementi dal servizio piatto in modo da dire semplicemente

328
00:25:00,225 --> 00:25:03,335
dishservice.Find e che restituirà

329
00:25:03,335 --> 00:25:09,100
tutti i piatti che ci sono nel mio server LoopBack qui.

330
00:25:09,100 --> 00:25:11,425
Quindi e' quello che sto recuperando qui.

331
00:25:11,425 --> 00:25:15,435
Quindi il resto del codice dovrebbe apparire familiare qui tranne che qui chiamo

332
00:25:15,435 --> 00:25:20,010
piatti è uguale a piatti e matrice di piatti qui.

333
00:25:20,010 --> 00:25:22,995
Quindi questo è il cambiamento che vedrete nel componente del menu.

334
00:25:22,995 --> 00:25:28,810
Ora, devi chiederti come funziona l'autenticazione utente in questo caso.

335
00:25:28,810 --> 00:25:32,275
Per l'autenticazione utente, consentitemi di attirare la vostra attenzione su

336
00:25:32,275 --> 00:25:35,800
due punti in cui sto facendo uso dell'autenticazione utente.

337
00:25:35,800 --> 00:25:38,735
Andiamo prima al componente di login.

338
00:25:38,735 --> 00:25:40,990
Quindi, nel componente di accesso,

339
00:25:40,990 --> 00:25:46,030
vedresti che nel componente di accesso sto importando questi due qui,

340
00:25:46,030 --> 00:25:49,970
l'API del cliente che è i servizi che mi consentono di

341
00:25:49,970 --> 00:25:54,245
eseguire l'autenticazione utente e l'accesso e la disconnessione,

342
00:25:54,245 --> 00:25:57,430
e anche sto importando il modello del cliente e il modello di

343
00:25:57,430 --> 00:26:00,995
token di accesso e nel componente di login,

344
00:26:00,995 --> 00:26:06,320
vedresti che dal servizio Auth ora non è altro che API del cliente e

345
00:26:06,730 --> 00:26:15,670
inoltre noterai che nel componente di login quando viene inviato il modulo di login,

346
00:26:15,670 --> 00:26:19,530
chiamo questo AuthService.Login.

347
00:26:19,530 --> 00:26:24,655
Questa funzione di accesso è disponibile tramite l'API del cliente.

348
00:26:24,655 --> 00:26:30,775
Ricordiamo quando abbiamo provato ad accedere utilizzando l'esploratore API di riposo LoopBack,

349
00:26:30,775 --> 00:26:36,500
stavamo usando l'endpoint del cliente per accedere al sistema.

350
00:26:36,500 --> 00:26:39,310
Quindi questo è esattamente quello che sto facendo nel codice qui.

351
00:26:39,310 --> 00:26:43,335
Quindi diremo questo AuthService.Login e qui vedete

352
00:26:43,335 --> 00:26:47,930
che ci vogliono questi parametri gratuiti qui,

353
00:26:47,930 --> 00:26:55,425
il nome utente e la password come primo oggetto JavaScript qui,

354
00:26:55,425 --> 00:27:01,755
e poi sto specificando anche questo user.remember., .remember è la bandiera

355
00:27:01,755 --> 00:27:08,310
dalla casella di controllo Remember me che abbiamo nel nostro dialogo dei componenti di accesso lì.

356
00:27:08,310 --> 00:27:12,180
Quindi, quando l'utente controlla che le informazioni dell'utente verranno

357
00:27:12,180 --> 00:27:16,095
automaticamente mantenute dall'SDK.

358
00:27:16,095 --> 00:27:18,945
Il servizio Auth fornito all'interno dell'SDK.

359
00:27:18,945 --> 00:27:21,275
Quindi, ora vedi che non ho bisogno di

360
00:27:21,275 --> 00:27:24,290
implementare esplicitamente alcun servizio di autorizzazione che è

361
00:27:24,290 --> 00:27:26,940
automaticamente disponibile per me tramite

362
00:27:26,940 --> 00:27:31,565
l'API del cliente disponibile come servizio qui.

363
00:27:31,565 --> 00:27:35,320
Quindi, è così che accedo all'utente qui,

364
00:27:35,320 --> 00:27:38,275
e quando l'utente accede a questo restituirà

365
00:27:38,275 --> 00:27:45,015
un oggetto JavaScript e dall'oggetto JavaScript ottengo il

366
00:27:45,015 --> 00:27:50,930
res.user.. l'utente fornisce le informazioni dell'utente per me e sto

367
00:27:50,930 --> 00:27:57,355
semplicemente inviando questo al mio HeaderComponent qui.

368
00:27:57,355 --> 00:27:59,860
Quindi andando nel HeaderComponent.

369
00:27:59,860 --> 00:28:02,235
Quindi andiamo nel componente di intestazione,

370
00:28:02,235 --> 00:28:04,620
e nel file HeaderComponent.ts,

371
00:28:04,620 --> 00:28:09,670
vedrai che di nuovo qui sto importando l'API del cliente e il

372
00:28:09,670 --> 00:28:18,115
cliente qui e anche noterai che nell'API del cliente,

373
00:28:18,115 --> 00:28:23,830
specifico qui nota che sto dicendo che

374
00:28:23,830 --> 00:28:29,880
questo cliente è questo AuthService GetCachedCurrent.

375
00:28:29,880 --> 00:28:34,190
Quindi, se un utente è bloccato negli

376
00:28:34,190 --> 00:28:38,660
utenti attualmente connessi, le informazioni vengono lanciate in AuthService che non è altro che l'API del cliente.

377
00:28:38,660 --> 00:28:43,775
Quindi, quando chiamo questo getCachedCurrent questo restituirà l'utente attualmente connesso.

378
00:28:43,775 --> 00:28:45,570
Se nessun utente è connesso,

379
00:28:45,570 --> 00:28:46,820
questo restituirà null.

380
00:28:46,820 --> 00:28:51,865
Quindi questo è un modo in cui posso verificare se un utente è attualmente connesso o meno.

381
00:28:51,865 --> 00:28:55,690
Quindi, se l'utente è attualmente connesso, questo.customer

382
00:28:55,690 --> 00:28:59,740
otterrà le informazioni sul cliente che viene caricato in.

383
00:28:59,740 --> 00:29:02,385
Le informazioni del cliente, tra cui nome, cognome,

384
00:29:02,385 --> 00:29:11,190
e-mail e il profilo dell'altro utente, saranno disponibili per questo oggetto questo.customer.

385
00:29:11,190 --> 00:29:16,080
Quindi, qui sto controllando per assicurarmi che questo.customer non sia nullo.

386
00:29:16,080 --> 00:29:19,265
Se non è nullo, salverò il nome utente su

387
00:29:19,265 --> 00:29:23,100
this.customer.username e in questo modo quando

388
00:29:23,100 --> 00:29:26,705
il nome utente è impostato, la mia intestazione nella

389
00:29:26,705 --> 00:29:31,690
barra degli strumenti nel mio HeaderComponent rifletterà il nome dell'utente lì.

390
00:29:31,690 --> 00:29:37,820
Ora, per disconnettere l'utente tutto ciò che sto facendo è che sto impostando il nome utente e

391
00:29:37,820 --> 00:29:45,665
le variabili cliente su null e quindi ho semplicemente chiamato authService.log,

392
00:29:45,665 --> 00:29:51,075
AuthServices è CustomerAPI.logout, ed è così che disconnetto l'utente.

393
00:29:51,075 --> 00:29:52,760
Quando l'utente si disconnette,

394
00:29:52,760 --> 00:29:55,750
le sue credenziali vengono distrutte.

395
00:29:55,750 --> 00:30:02,360
Ora, tutto questo viene gestito automaticamente dal servizio API del cliente

396
00:30:02,360 --> 00:30:09,075
disponibile nel mio SDK LoopBack che ho appena costruito lì.

397
00:30:09,075 --> 00:30:13,830
Quindi, noti che come LoopBack SDK Builder costruisce i

398
00:30:13,830 --> 00:30:19,430
servizi e i modelli e tutto ciò di cui ho bisogno e nella mia applicazione Angular,

399
00:30:19,430 --> 00:30:22,360
sto semplicemente importando quelli e poi

400
00:30:22,360 --> 00:30:25,450
facendoli uso per configurare la mia applicazione Angular.

401
00:30:25,450 --> 00:30:27,065
Quindi, una volta creato

402
00:30:27,065 --> 00:30:32,510
l'SDK LoopBack utilizzando LoopBack SDK Builder, tutto ciò che mi rimane è

403
00:30:32,510 --> 00:30:40,545
l'implementazione dei componenti e dei loro modelli di visualizzazione che si trovano tutto il resto.

404
00:30:40,545 --> 00:30:45,480
I servizi sono creati automaticamente per me da LoopBack SDK Builder,

405
00:30:45,480 --> 00:30:49,160
i modelli vengono creati automaticamente per me e tutto ciò che devo fare è

406
00:30:49,160 --> 00:30:54,060
importarli in tutti i componenti in cui ho bisogno di farne uso.

407
00:30:54,060 --> 00:31:01,775
Quindi, si noti come questa applicazione angolare è stata aggiornata per fare uso di LoopBack SDK.

408
00:31:01,775 --> 00:31:06,520
Ora, se si desidera ulteriori informazioni su come utilizzare LoopBack SDK,

409
00:31:06,520 --> 00:31:11,465
è anche possibile consultare la documentazione fornita da LoopBack SDK Builder.

410
00:31:11,465 --> 00:31:14,425
Pertanto, se si accede a LoopBack SDK Builder,

411
00:31:14,425 --> 00:31:19,440
un collegamento a questo è disponibile nelle risorse aggiuntive per questa lezione

412
00:31:19,440 --> 00:31:21,820
e nel LoopBack SDK Builder,

413
00:31:21,820 --> 00:31:24,930
si dispone

414
00:31:24,930 --> 00:31:31,830
di tutte le informazioni necessarie per utilizzare l'SDK creato da LoopBack SDK Builder.

415
00:31:31,830 --> 00:31:34,205
Quindi se vai alla documentazione wiki.

416
00:31:34,205 --> 00:31:39,830
Nella documentazione wiki molte spiegazioni di come può

417
00:31:39,830 --> 00:31:46,050
essere LoopBack SDK Builder o che l'SDK generato da LoopBack SDK Builder dovrebbe essere usato è tutto qui.

418
00:31:46,050 --> 00:31:49,460
Quindi, ho appena esaminato questa documentazione per capire come

419
00:31:49,460 --> 00:31:53,555
utilizzare l'SDK creato da LoopBack SDK Builder,

420
00:31:53,555 --> 00:31:57,420
e quindi riconfigurato la mia applicazione Angular per farne uso

421
00:31:57,420 --> 00:32:02,090
per interagire con il mio server LoopBack.

422
00:32:02,090 --> 00:32:06,715
Quindi con questo, ti ho rapidamente dimostrato come

423
00:32:06,715 --> 00:32:11,140
puoi creare la tua applicazione Angular e

424
00:32:11,140 --> 00:32:15,270
sfruttare l'SDK creato da LoopBack SDK

425
00:32:15,270 --> 00:32:20,365
Builder per accedere al tuo server LoopBack dall'interno dell'applicazione Angular.

426
00:32:20,365 --> 00:32:26,210
Un approccio simile sarà appropriato anche per l'applicazione ionica.

427
00:32:26,210 --> 00:32:31,610
Per l'applicazione Native Script si crea l'SDK con NG2 nativo

428
00:32:31,610 --> 00:32:37,835
nella riga di comando invece di NG2 Web come abbiamo usato quando abbiamo creato questo SDK.

429
00:32:37,835 --> 00:32:41,890
Con questa rapida introduzione a come possiamo fare uso di

430
00:32:41,890 --> 00:32:44,815
LoopBack SDK Builder per costruire l'SDK e

431
00:32:44,815 --> 00:32:47,980
quindi utilizzarlo all'interno della nostra applicazione Angular,

432
00:32:47,980 --> 00:32:52,300
arrivano alla fine di questo esercizio.