1
00:00:03,650 --> 00:00:10,755
Ora che abbiamo completato lo sviluppo di un server API REST a tutti gli effetti 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 React per fare uso di questo server API REST?

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

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

6
00:00:29,190 --> 00:00:31,410
degli endpoint API REST e

7
00:00:31,410 --> 00:00:37,960
delle varie richieste API REST come esposto dal nostro server Loopback.

8
00:00:38,150 --> 00:00:42,075
Per iniziare a questo esercizio,

9
00:00:42,075 --> 00:00:45,275
clonare innanzitutto il repository git che contiene

10
00:00:45,275 --> 00:00:51,140
una riapplicazione completata che comunica con il nostro server Loopback.

11
00:00:51,140 --> 00:00:54,760
Quindi, per farlo, vai nella tua posizione comoda sui tuoi computer.

12
00:00:54,760 --> 00:00:58,370
Ho intenzione di clonare il repository git

13
00:00:58,370 --> 00:01:00,640
digitando 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
e poi clonare questo repository git.

16
00:01:19,430 --> 00:01:22,665
Una volta che il repository git è clonato,

17
00:01:22,665 --> 00:01:30,780
allora ci sposteremo nella cartella Confusion-react-loopback e

18
00:01:30,780 --> 00:01:39,355
quindi eseguire un'installazione di filati per installare tutti i moduli nodo per questa applicazione.

19
00:01:39,355 --> 00:01:42,315
Prima di avviare l'applicazione React,

20
00:01:42,315 --> 00:01:46,300
assicurarsi che il server Loopback sia configurato correttamente.

21
00:01:46,300 --> 00:01:47,705
Nel server Loopback,

22
00:01:47,705 --> 00:01:49,410
nella cartella client,

23
00:01:49,410 --> 00:01:54,425
spostare le immagini che abbiamo dato come il file images.zip,

24
00:01:54,425 --> 00:01:56,780
decomprimerlo, e quindi spostare le immagini nella

25
00:01:56,780 --> 00:02:00,540
cartella immagini sotto la cartella client come mostrato qui.

26
00:02:00,540 --> 00:02:08,660
Inoltre, rinominare il file root.js come root.jsold o eliminare il file root.js.

27
00:02:08,660 --> 00:02:13,310
Non abbiamo più bisogno di questo nella nostra applicazione perché vogliamo assicurarci che

28
00:02:13,310 --> 00:02:21,050
il nostro server stia salvando i contenuti dalla cartella client.

29
00:02:21,050 --> 00:02:22,740
Quindi, per raggiungere questo obiettivo,

30
00:02:22,740 --> 00:02:25,265
apriamo il file middleware.json

31
00:02:25,265 --> 00:02:27,845
e nel file middleware.json,

32
00:02:27,845 --> 00:02:32,980
nella parte file,

33
00:02:32,980 --> 00:02:38,435
aggiungetelo nella parte file del file middleware.json.

34
00:02:38,435 --> 00:02:46,320
Quindi, diremo, Loopback static and params: dollar bank dot dot slash client»,

35
00:02:46,320 --> 00:02:49,595
che indica che il tuo server Loopback salverà

36
00:02:49,595 --> 00:02:53,555
il contenuto statico dalla cartella client qui.

37
00:02:53,555 --> 00:02:55,890
Dopo aver apportato queste modifiche

38
00:02:55,890 --> 00:03:00,080
, è possibile avviare il server.

39
00:03:00,360 --> 00:03:04,100
Assicurati che il tuo server MongoDB sia

40
00:03:04,100 --> 00:03:07,860
attivo e funzionante prima di avviare il tuo server Loopback.

41
00:03:07,860 --> 00:03:14,690
Quindi, dopo di che, compileremo e lanceremo il nostro client React.

42
00:03:14,690 --> 00:03:20,345
Ora, ancora una volta assicurandoti che il tuo server MongoDB e il tuo server Loopback funzionino,

43
00:03:20,345 --> 00:03:22,810
vai al terminale e aggiungi il terminale.

44
00:03:22,810 --> 00:03:31,405
Tipo filato iniziare per avviare la nostra applicazione Loopback, l'applicazione React.

45
00:03:31,405 --> 00:03:34,980
Quindi, quando l'applicazione

46
00:03:34,980 --> 00:03:40,750
si avvia nel browser, noterai che l'applicazione React basata su Loopback si comporta

47
00:03:40,750 --> 00:03:46,670
esattamente allo stesso modo delle versioni precedenti dell'applicazione React.

48
00:03:46,670 --> 00:03:48,670
Così, qui abbiamo la Homepage,

49
00:03:48,670 --> 00:03:52,725
poi abbiamo la pagina Chi siamo come vediamo qui,

50
00:03:52,725 --> 00:03:56,770
quindi la pagina del menu in cui le voci di menu sono elencate qui,

51
00:03:56,770 --> 00:04:00,260
la pagina Contattaci come previsto.

52
00:04:00,260 --> 00:04:04,535
Quindi lasciami tornare alla Homepage e poi accedi come amministratore.

53
00:04:04,535 --> 00:04:11,000
Quindi, accedi come amministratore,

54
00:04:11,000 --> 00:04:14,480
e poi sarai in grado di vedere i miei preferiti.

55
00:04:14,480 --> 00:04:19,075
Ho effettuato l'accesso in precedenza e poi ho aggiunto un elemento ai miei preferiti.

56
00:04:19,075 --> 00:04:24,290
Passiamo ora al Menu e poi aggiungiamo un secondo elemento in I miei preferiti.

57
00:04:24,290 --> 00:04:27,930
Quindi, qui aggiungeremo questo elemento nei preferiti,

58
00:04:27,930 --> 00:04:34,850
e poi si sarebbe in grado di vedere che entrambi questi elementi sono ora in I miei preferiti.

59
00:04:34,850 --> 00:04:38,194
Analogamente, è possibile eliminare elementi dai preferiti.

60
00:04:38,194 --> 00:04:42,020
Quindi, andiamo avanti e cancelliamo questo dai nostri Preferiti.

61
00:04:42,020 --> 00:04:43,490
Tornando alla voce di menu,

62
00:04:43,490 --> 00:04:47,550
aggiungiamo un commento a uno dei piatti.

63
00:04:47,550 --> 00:04:49,560
Quindi, lasciami fare clic su questo piatto,

64
00:04:49,560 --> 00:04:51,855
e poi invieremo un commento.

65
00:04:51,855 --> 00:05:01,980
Quindi, quando inviamo un commento,

66
00:05:01,980 --> 00:05:05,175
come puoi vedere, il commento viene aggiunto nel

67
00:05:05,175 --> 00:05:09,710
nostro server lì come

68
00:05:09,710 --> 00:05:15,690
previsto e il risultato è mostrato nella pagina Dettagli piatto qui.

69
00:05:15,690 --> 00:05:18,660
Tornando nuovamente alla Homepage,

70
00:05:19,260 --> 00:05:24,650
troviamo che la nostra applicazione React è ora in grado di comunicare con

71
00:05:24,650 --> 00:05:27,740
il server Loopback e quindi ottenere

72
00:05:27,740 --> 00:05:31,465
i dati dal server e interagire con il server come previsto.

73
00:05:31,465 --> 00:05:35,160
Ora, naturalmente, la domanda che sorgerebbe nella tua mente è,

74
00:05:35,160 --> 00:05:41,455
come fa questa applicazione Loopback a comunicare con il server Loopback?

75
00:05:41,455 --> 00:05:47,610
Ora, questo è dove vorremmo notare che per Loopback,

76
00:05:47,610 --> 00:05:51,495
poiché il server Loopback espone gli endpoint API REST, la

77
00:05:51,495 --> 00:05:55,575
mia applicazione React è in grado di accedere al server Loopback presso

78
00:05:55,575 --> 00:05:59,860
gli endpoint API REST corrispondenti e quindi comunicare con il server,

79
00:05:59,860 --> 00:06:07,845
come abbiamo fatto con il nostro server API REST che avevamo implementato in precedenza.

80
00:06:07,845 --> 00:06:15,020
Quindi, andiamo avanti e diamo un'occhiata al codice per l'applicazione React modificata.

81
00:06:15,020 --> 00:06:17,690
Andando al codice della nostra applicazione,

82
00:06:17,690 --> 00:06:23,200
le principali modifiche che noterai saranno nel file ActionCreators.js.

83
00:06:23,200 --> 00:06:27,620
Qui, si noterà che stiamo comunicando con

84
00:06:27,620 --> 00:06:33,930
il server Loopback invece del server API REST che avevamo in precedenza.

85
00:06:33,930 --> 00:06:37,550
Quindi, il recupero ora accederà al server Loopback presso

86
00:06:37,550 --> 00:06:43,800
l'endpoint api/commenti o l'endpoint api/piatti e così via.

87
00:06:43,800 --> 00:06:52,350
Quindi, tutte queste richieste di recupero sono tutte aggiornate per accedere al nostro server Loopback istantaneo.

88
00:06:52,700 --> 00:06:56,215
Quindi, noterai cambiamenti simili lì.

89
00:06:56,215 --> 00:07:00,095
Ora, oltre ad accedere al nostro server Loopback,

90
00:07:00,095 --> 00:07:08,190
quindi andiamo al codice di accesso qui.

91
00:07:08,190 --> 00:07:09,750
Quindi, nell'utente di accesso,

92
00:07:09,750 --> 00:07:18,035
stiamo postando un recupero all'endpoint BaseURL e API/clienti/Login,

93
00:07:18,035 --> 00:07:25,260
e quindi forniremo le credenziali nel corpo del messaggio di richiesta che si spegne.

94
00:07:25,260 --> 00:07:27,215
In risposta a ciò,

95
00:07:27,215 --> 00:07:29,830
il server invierà la risposta.

96
00:07:29,830 --> 00:07:33,950
La risposta contiene quindi le informazioni sul token.

97
00:07:33,950 --> 00:07:38,905
Le informazioni sul token vengono restituite sotto forma di

98
00:07:38,905 --> 00:07:44,790
ID del messaggio di risposta.

99
00:07:44,790 --> 00:07:47,325
Quindi, l'ID stesso funge da token.

100
00:07:47,325 --> 00:07:49,545
Quindi, il messaggio di risposta stesso,

101
00:07:49,545 --> 00:07:55,200
ho intenzione di salvare questo nel mio archivio locale come mostrato qui.

102
00:07:55,200 --> 00:07:59,320
Stringify il messaggio di risposta e poi lo memorizziamo lì dentro.

103
00:07:59,320 --> 00:08:06,945
Questo messaggio di risposta, Response.id, contiene il token.

104
00:08:06,945 --> 00:08:12,815
Pertanto, il response.id funge da token Web JSON per accedere al server Loopback.

105
00:08:12,815 --> 00:08:15,650
Quindi, ecco perché noterai che nelle

106
00:08:15,650 --> 00:08:19,235
situazioni in cui ho bisogno di accedere al server, quindi ad esempio,

107
00:08:19,235 --> 00:08:25,520
noteremo che quando stiamo recuperando o postando il tuo preferito sul server,

108
00:08:25,520 --> 00:08:28,550
noterai che ottengo il token dicendo,

109
00:08:28,550 --> 00:08:30,420
lascia che token, JSON analizza,

110
00:08:30,420 --> 00:08:33,990
localStorage, getItem, token qui,

111
00:08:33,990 --> 00:08:38,890
e poi nel campo di intestazione Autorizzazione,

112
00:08:38,890 --> 00:08:44,300
ho detto che il campo Autorizzazione deve essere token.id qui come mostrato qui.

113
00:08:44,300 --> 00:08:51,380
Quindi, è così che saremo in grado di autenticarci al server Loopback.

114
00:08:51,380 --> 00:08:55,450
Quindi, qui vedi che dice, BaseURL, api/preferiti,

115
00:08:55,450 --> 00:08:59,440
e quindi ottenere l'elenco dei preferiti dal server,

116
00:08:59,440 --> 00:09:03,430
e quindi salvarlo nel nostro negozio redux.

117
00:09:03,430 --> 00:09:06,710
Quindi, beh, gran parte del codice rimane lo stesso,

118
00:09:06,710 --> 00:09:09,740
ad eccezione degli aggiornamenti che abbiamo fatto per

119
00:09:09,740 --> 00:09:13,455
accedere agli endpoint dell'API REST di Loopbacks.

120
00:09:13,455 --> 00:09:22,665
Ora, per Angular, abbiamo un SDK di Loopback che può essere costruito per la nostra applicazione Angular.

121
00:09:22,665 --> 00:09:27,070
Ma per React, non esiste tale supporto disponibile da Loopback,

122
00:09:27,070 --> 00:09:30,460
e quindi dobbiamo ricorrere all'accesso diretto agli

123
00:09:30,460 --> 00:09:34,840
endpoint dell'API REST di Loopback come mostrato qui usando il recupero,

124
00:09:34,840 --> 00:09:38,860
e quindi siamo in grado di comunicare con il server Loopback.

125
00:09:38,860 --> 00:09:42,115
Con questa rapida comprensione di come

126
00:09:42,115 --> 00:09:48,360
la nostra applicazione React è stata aggiornata per accedere al nostro server Loopback,

127
00:09:48,360 --> 00:09:51,795
completiamo l'esame del server Loopback.

128
00:09:51,795 --> 00:09:56,980
Dedicate un po' più di tempo alla ricerca di alcuni componenti e

129
00:09:56,980 --> 00:10:02,340
verificate come utilizzano le informazioni ottenute dal server Loopback.

130
00:10:02,340 --> 00:10:06,530
Noterete che la maggior parte dei componenti rimane esattamente la stessa di prima,

131
00:10:06,530 --> 00:10:13,650
ad eccezione di alcune piccole modifiche nel componente preferito per ottenere

132
00:10:13,650 --> 00:10:18,495
le informazioni dal server Loopback

133
00:10:18,495 --> 00:10:22,700
e quindi utilizzarle per eseguire il rendering dell'elenco degli elementi preferiti.

134
00:10:22,700 --> 00:10:29,545
Oltre a questo, gran parte delle modifiche sono limitate al file ActionCreators.js,

135
00:10:29,545 --> 00:10:34,260
dove abbiamo aggiornato il recupero per utilizzare l'URL per il

136
00:10:34,260 --> 00:10:41,125
nostro server Loopback per essere in grado di accedere ai vari endpoint API REST.

137
00:10:41,125 --> 00:10:48,460
Quindi, con questo, ti ho rapidamente dimostrato come puoi costruire la tua applicazione.

138
00:10:48,460 --> 00:10:51,590
Con questa rapida introduzione a come

139
00:10:51,590 --> 00:10:54,755
utilizzare il Loopback all'interno della nostra applicazione,

140
00:10:54,755 --> 00:10:59,110
arriviamo alla fine di questo esercizio.