1
00:00:00,000 --> 00:00:04,708
[MUSIC]

2
00:00:04,708 --> 00:00:08,762
В предыдущем упражнении мы уже настроили наш

3
00:00:08,762 --> 00:00:12,657
сервер Firebase как сервис с новым проектом.

4
00:00:12,657 --> 00:00:18,637
А также настроить много данных в нашей базе данных, а затем настроить наше хранилище и

5
00:00:18,637 --> 00:00:25,410
настроить сервер Firebase, чтобы действовать в качестве бэкэнда для нашего приложения React.

6
00:00:25,410 --> 00:00:30,670
В этом упражнении мы рассмотрим модифицированную версию нашего приложения React,

7
00:00:30,670 --> 00:00:36,080
которая использует внутренний сервер Firebase в качестве сервиса для

8
00:00:36,080 --> 00:00:42,200
получения данных, а также хранения информации для пользователей на сервере.

9
00:00:42,200 --> 00:00:46,430
Кроме того, мы воспользуемся поддержкой аутентификации, которую Firebase

10
00:00:46,430 --> 00:00:48,510
предоставляет для аутентификации пользователей.

11
00:00:48,510 --> 00:00:55,434
Как с использованием электронной почты и пароля, так и с использованием учетной записи Google.

12
00:00:57,091 --> 00:01:04,231
Чтобы начать работу с этим упражнением, перейдите в удобное место на вашем компьютере,

13
00:01:04,231 --> 00:01:09,347
а затем клонируйте данный репозиторий Git, я предоставил

14
00:01:09,347 --> 00:01:14,950
вам версию Firebase нашего приложения React.

15
00:01:14,950 --> 00:01:24,300
Поэтому введите git clone https://github.com/jmuppala/conFusion-Rea -

16
00:01:24,300 --> 00:01:27,470
CT-Firebase.git.

17
00:01:27,470 --> 00:01:30,450
А затем клонировать репозиторий Git.

18
00:01:30,450 --> 00:01:37,610
И как только репозиторий Git клонирован на ваш компьютер, затем перейдите

19
00:01:37,610 --> 00:01:47,340
в папку Confusion-React-FireBase, которая будет создана в этот момент.

20
00:01:47,340 --> 00:01:52,230
И тогда вы заметите, что куча файлов уже установлена там.

21
00:01:52,230 --> 00:01:56,820
Давайте продолжим и сделаем установку пряжи, чтобы установить все

22
00:01:56,820 --> 00:02:02,130
модули узла, от которых зависит это угловое приложение.

23
00:02:02,130 --> 00:02:07,140
Эта версия также установит дополнительные модули узлов под названием Firebase.

24
00:02:07,140 --> 00:02:12,850
Я объясню немного больше об этих модулях узлов позже в этом упражнении.

25
00:02:12,850 --> 00:02:18,420
После завершения установки проекта откройте проект в редакторе.

26
00:02:18,420 --> 00:02:24,290
А затем в проекте перейдите в исходную папку > Firebase, а

27
00:02:24,290 --> 00:02:26,700
затем откройте файл config.js.

28
00:02:26,700 --> 00:02:33,220
И в файле config.js вы увидите набор конфигурации Firebase,

29
00:02:33,220 --> 00:02:38,950
который вам нужно настроить с вашей собственной конфигурацией сервера Firebase.

30
00:02:38,950 --> 00:02:43,970
Как мы уже видели в предыдущем упражнении, мы можем получить всю эту информацию, когда мы

31
00:02:43,970 --> 00:02:49,940
нажимаем на эту кнопку здесь под названием Добавить Firebase в ваше веб-приложение.

32
00:02:49,940 --> 00:02:53,035
А затем скопируйте эту информацию, а

33
00:02:53,035 --> 00:02:58,162
затем вставьте эту информацию в файл config.js.

34
00:02:58,162 --> 00:03:03,786
Чтобы заменить их вашей конкретной конфигурацией серверов Firebase для

35
00:03:03,786 --> 00:03:06,280
всей этой части информации.

36
00:03:06,280 --> 00:03:10,844
И как только это будет завершено, вы можете запустить свое

37
00:03:10,844 --> 00:03:14,609
приложение React, набрав пряжу запуска в подсказке.

38
00:03:14,609 --> 00:03:18,331
После того, как ваше приложение React скомпилировано, и поэтому

39
00:03:18,331 --> 00:03:23,890
здесь вы увидите домашнюю страницу, страницу о странице, как мы видим здесь.

40
00:03:23,890 --> 00:03:25,596
И меню.

41
00:03:27,900 --> 00:03:31,570
И контактную страницу.

42
00:03:31,570 --> 00:03:33,360
Давайте войдем сами,

43
00:03:33,360 --> 00:03:36,865
позволь мне вернуться на главную страницу, а затем мы сами войдем.

44
00:03:36,865 --> 00:03:38,800
Поэтому, когда вы нажимаете кнопку Вход,

45
00:03:38,800 --> 00:03:43,430
вы увидите типичную форму здесь с электронной почтой и информацией о пароле.

46
00:03:43,430 --> 00:03:47,010
Вы также увидите начальную кнопку здесь под названием Войти с помощью Google.

47
00:03:47,010 --> 00:03:49,740
Поэтому позвольте мне войти с моей учетной записью Google.

48
00:03:49,740 --> 00:03:54,885
Поэтому, когда вы нажмете на Вход с Google, он откроет другое

49
00:03:54,885 --> 00:04:01,095
окно браузера, где вам будет предложено авторизоваться для использования вашей учетной записи Google.

50
00:04:01,095 --> 00:04:07,745
Затем вы увидите, в правом углу, вы сразу увидите,

51
00:04:07,745 --> 00:04:13,285
что ваше имя отображается здесь, и с помощью кнопки входа теперь превращается в кнопку выхода из системы.

52
00:04:13,285 --> 00:04:19,340
Таким образом, на данный момент вы должны иметь возможность увидеть ваши избранные.

53
00:04:19,340 --> 00:04:22,240
И в этом случае, так как у нас нет фаворитов, так что

54
00:04:22,240 --> 00:04:24,110
в данный момент он будет пустым.

55
00:04:24,110 --> 00:04:29,610
Позвольте мне вернуться в меню, а затем добавить пару пунктов в избранное.

56
00:04:29,610 --> 00:04:35,990
Поэтому я добавлю это блюдо в избранное, поэтому, когда я нажимаю на это блюдо,

57
00:04:35,990 --> 00:04:41,350
вы сразу увидите значок превращается в наполненное сердце.

58
00:04:41,350 --> 00:04:47,597
И позвольте мне также выбрать еще одно блюдо и добавить его в избранное.

59
00:04:47,597 --> 00:04:52,526
Объявление тогда теперь, когда вы идете к моим фаворитам, вы увидите пару

60
00:04:52,526 --> 00:04:57,187
блюд, добавленных в ваши избранные, как вы ожидали.

61
00:04:57,187 --> 00:05:02,893
И снова, вы можете удалить блюда, нажав на

62
00:05:02,893 --> 00:05:09,270
крестик удаления, чтобы удалить элемент из вашего списка избранного, как показано здесь.

63
00:05:09,270 --> 00:05:14,181
Теперь мы также можем добавить, как вы понимаете, мы можем пойти на любое блюдо, а

64
00:05:14,181 --> 00:05:17,140
затем добавить комментарии к этому блюду.

65
00:05:17,140 --> 00:05:19,317
Поэтому позвольте мне добавить комментарий здесь.

66
00:05:25,868 --> 00:05:31,364
И как только вы отправите комментарий, вы сразу увидите, что

67
00:05:31,364 --> 00:05:38,562
ваш комментарий будет отображаться здесь с именем автора.

68
00:05:38,562 --> 00:05:41,572
И с этой датой, как показано здесь.

69
00:05:41,572 --> 00:05:46,592
Таким образом, вы можете видеть, что подача комментариев пользователем

70
00:05:46,592 --> 00:05:49,592
будет поддерживаться для любого конкретного блюда.

71
00:05:49,592 --> 00:05:54,294
Итак, вот как ваше приложение работает с этим

72
00:05:54,294 --> 00:05:58,211
Firebase в качестве бэкенда как службы.

73
00:05:58,211 --> 00:06:03,071
Теперь, конечно, вам должно быть интересно, как мы перепроектировать наше приложение,

74
00:06:03,071 --> 00:06:07,882
чтобы использовать Firebase вместо использования стандартного

75
00:06:07,882 --> 00:06:12,110
сервера Express MongoDB, который мы построили ранее?

76
00:06:13,220 --> 00:06:18,606
Для того, чтобы настроить приложение для связи с сервером Firebase,

77
00:06:18,606 --> 00:06:21,349
вам необходимо установить модуль Firebase.

78
00:06:21,349 --> 00:06:25,964
Модуль Firebase, как вы видите здесь, предоставляет инструмент и

79
00:06:25,964 --> 00:06:31,772
инфраструктуру, которая позволяет вам взаимодействовать с сервером Firebase.

80
00:06:31,772 --> 00:06:35,639
И чтобы установить это в свое приложение,

81
00:06:35,639 --> 00:06:40,141
вы вводите install минус save firebase.

82
00:06:40,141 --> 00:06:41,893
Теперь как использовать их?

83
00:06:41,893 --> 00:06:47,461
Я проиллюстрирую это, быстро запустив вас через модифицированный код,

84
00:06:47,461 --> 00:06:53,492
где мы используем Firebase для изменения приложения, которое мы разработали

85
00:06:53,492 --> 00:06:59,185
ранее, чтобы использовать сервер Firebase в качестве бэк-энда в качестве сервиса.

86
00:06:59,185 --> 00:07:04,065
Давайте проведем краткий обзор нашего модифицированного приложения React, чтобы понять,

87
00:07:04,065 --> 00:07:08,825
как он был перенастроен для связи с нашим сервером Firebase.

88
00:07:08,825 --> 00:07:11,933
Мы начнем наше путешествие в файле package.json.

89
00:07:11,933 --> 00:07:13,455
И в файле package.json

90
00:07:13,455 --> 00:07:18,820
вы заметите, что я добавил в модуль Firebase npm в это.

91
00:07:18,820 --> 00:07:24,020
И поэтому, когда вы клонируете репозиторий Git и делаете установку пряжи,

92
00:07:24,020 --> 00:07:27,880
модуль Firebase автоматически устанавливается в ваше приложение.

93
00:07:27,880 --> 00:07:31,810
Если вы настраивали новое приложение React для

94
00:07:31,810 --> 00:07:33,160
связи с сервером,

95
00:07:33,160 --> 00:07:38,850
вам нужно явно установить модуль Firebase в ваше приложение.

96
00:07:38,850 --> 00:07:44,880
Теперь после этого вы заметите изменения в папке Firebase.

97
00:07:44,880 --> 00:07:47,396
Здесь мы уже видели конфигурационный файл.

98
00:07:47,396 --> 00:07:51,410
Другой файл, который вы заметите здесь, называется firebase.js.

99
00:07:51,410 --> 00:07:55,227
Теперь здесь мы настраиваем наше приложение для связи с

100
00:07:55,227 --> 00:07:56,530
Firebase Server.

101
00:07:56,530 --> 00:07:58,744
Поэтому мы импортируем конфигурацию здесь.

102
00:07:58,744 --> 00:08:01,786
А затем импорт firebase из firebase.

103
00:08:01,786 --> 00:08:06,624
И затем вы начинаете приложение здесь, поставляя конфигурацию в firebase,

104
00:08:06,624 --> 00:08:10,838
поэтому здесь вы поставляете всю информацию о конфигурации

105
00:08:10,838 --> 00:08:14,835
, чтобы ваш клиент мог взаимодействовать с Firebase Server.

106
00:08:14,835 --> 00:08:19,738
Кроме того, я экспортирую некоторые из этих экспортных товаров

107
00:08:19,738 --> 00:08:23,280
отсюда под названием auth, fireauth и так далее.

108
00:08:23,280 --> 00:08:27,915
Они я буду использовать в создателях действий,

109
00:08:27,915 --> 00:08:31,524
чтобы общаться с моим Firebase Server.

110
00:08:33,371 --> 00:08:40,580
Теперь после этого основные изменения будут находиться в файле ActionCreators.

111
00:08:40,580 --> 00:08:46,222
Теперь я не добавил никаких новых действий, но вместо этого вся связь

112
00:08:46,222 --> 00:08:51,866
с сервером теперь изменена для связи с нашим Firebase Server.

113
00:08:51,866 --> 00:08:55,478
Поэтому вместо того, чтобы использовать выборку, как мы делали ранее,

114
00:08:55,478 --> 00:08:57,979
мы теперь собираемся использовать fierstore.

115
00:08:57,979 --> 00:09:02,466
Как вы можете видеть, я импортировал auth, fierstore,

116
00:09:02,466 --> 00:09:07,237
fireauth и firebasestore из модуля firebase, который

117
00:09:07,237 --> 00:09:11,260
я установил ранее в папке firebase.

118
00:09:11,260 --> 00:09:16,170
И тогда все это позволит мне общаться с моим Firebase Server.

119
00:09:16,170 --> 00:09:20,320
Чтобы получить коллекцию из моего Firebase,

120
00:09:20,320 --> 00:09:25,050
мы просто скажем fierstore.collection, а затем укажите имя коллекции.

121
00:09:25,050 --> 00:09:29,250
И затем вы можете добавить в коллекцию, сказав, добавить, как вы можете видеть здесь,

122
00:09:29,250 --> 00:09:37,570
который принимает конкретный элемент, который вы добавляете в свою коллекцию там.

123
00:09:37,570 --> 00:09:40,110
Вот тот документ, который мы добавляем в нашу коллекцию.

124
00:09:40,110 --> 00:09:43,500
Так что это для комментария к сообщению, как вы можете видеть здесь.

125
00:09:43,500 --> 00:09:48,270
И когда вы публикуете это, вы получите обратно docRef,

126
00:09:48,270 --> 00:09:51,260
который является ссылкой на документ,

127
00:09:51,260 --> 00:09:56,570
который затем вы можете использовать, чтобы пойти и получить документ с вашего сервера.

128
00:09:56,570 --> 00:10:00,180
Теперь способ работы Firebase заключается в том, что он будет предоставлять

129
00:10:00,180 --> 00:10:04,700
идентификатор отдельно от фактического содержимого документов.

130
00:10:04,700 --> 00:10:10,550
Таким образом, Firebase хранит идентификатор и сами данные документа по отдельности.

131
00:10:10,550 --> 00:10:15,450
Поэтому здесь я должен явно объединить эти два вместе в

132
00:10:15,450 --> 00:10:18,260
объект JavaScript здесь, называемый комментарием здесь.

133
00:10:18,260 --> 00:10:23,450
Итак, как вы видите из документа, поэтому вы заметили, что когда я

134
00:10:23,450 --> 00:10:29,710
вставляю элемент в коллекцию, он возвращает DocRef здесь.

135
00:10:29,710 --> 00:10:34,180
И из DocRef, я могу получить идентификатор документа.

136
00:10:34,180 --> 00:10:36,610
И поэтому то, что я делаю здесь, я

137
00:10:36,610 --> 00:10:39,464
иду и получу соответствующий документ здесь.

138
00:10:39,464 --> 00:10:44,305
И тогда, как только документ будет извлечен, теперь, конечно, документ должен существовать,

139
00:10:44,305 --> 00:10:49,015
так что это должно быть всегда правдой, потому что мы только что вставили документ.

140
00:10:49,015 --> 00:10:53,032
Но только ради полноты, я делаю явную проверку для этого.

141
00:10:53,032 --> 00:10:57,576
И после этого данные, которые находятся в документе,

142
00:10:57,576 --> 00:11:01,822
получают, сказав doc.data, как вы видите здесь.

143
00:11:01,822 --> 00:11:05,658
И затем идентификатор документа получает doc.id.

144
00:11:05,658 --> 00:11:07,073
Таким образом, эти два отдельные.

145
00:11:07,073 --> 00:11:12,708
Но в нашем коде React мы всегда сохранили идентификатор и

146
00:11:12,708 --> 00:11:20,530
данные вместе как один документ JSON здесь или объект JavaScript здесь.

147
00:11:20,530 --> 00:11:23,340
Вот почему я комбинирую эти два вместе

148
00:11:23,340 --> 00:11:26,800
в один объект JavaScript здесь, делая это.

149
00:11:26,800 --> 00:11:30,490
Вы увидите, что я неоднократно делаю это для, например,

150
00:11:30,490 --> 00:11:35,510
для дерзких рекламных акций и т. Д., Также в ActionCreators.

151
00:11:35,510 --> 00:11:41,640
И затем после этого я добавляю комментарий в мой магазин Redux здесь,

152
00:11:41,640 --> 00:11:44,250
а остальная часть кода остается таким.

153
00:11:44,250 --> 00:11:47,016
Аналогичным образом, для получения блюд,

154
00:11:47,016 --> 00:11:52,980
вы увидите, как мы извлекаем несколько блюд из Firebase.

155
00:11:52,980 --> 00:11:58,330
Таким образом, мы видим firestore.collection блюда получить и получить блюда.

156
00:11:58,330 --> 00:12:02,520
Теперь, когда вы получите это, он даст мне значение снимка,

157
00:12:02,520 --> 00:12:06,680
которое является снимком текущего состояния этой коллекции, и из этого,

158
00:12:06,680 --> 00:12:10,690
я должен войти и получить каждое блюдо.

159
00:12:10,690 --> 00:12:15,400
И тогда я восстанавливаю свой набор блюд здесь.

160
00:12:15,400 --> 00:12:18,990
Теперь обратите внимание, что, как я уже сказал, идентификатор и данные раздельны, поэтому

161
00:12:18,990 --> 00:12:23,495
мне нужно объединить их вместе, потому что именно так я использую данные в своем

162
00:12:23,495 --> 00:12:27,660
приложении React, поэтому я нажимаю это в массив блюд.

163
00:12:27,660 --> 00:12:32,980
И затем, наконец, вернуть блюда, которые затем будут вставлены в мой

164
00:12:32,980 --> 00:12:34,380
магазин Redux здесь.

165
00:12:34,380 --> 00:12:39,642
Таким образом, такие изменения были сделаны в ActionCreators.

166
00:12:39,642 --> 00:12:45,843
Теперь процесс входа и выхода из системы будет обрабатываться ниже здесь.

167
00:12:45,843 --> 00:12:51,445
Таким образом, для входа, auth, который мы импортировали из firebase,

168
00:12:51,445 --> 00:12:56,372
auth - это тот, который позволяет мне выполнять вход и выход из системы.

169
00:12:56,372 --> 00:12:59,363
Поэтому, если вы регистрируетесь с помощью электронной почты и пароля,

170
00:12:59,363 --> 00:13:03,940
он предоставляет этот метод под названием SigninWitheMailandPassword.

171
00:13:03,940 --> 00:13:10,250
А затем вы указываете адрес электронной почты и пароль в качестве двух параметров здесь.

172
00:13:10,250 --> 00:13:14,010
И тогда это позволит вам войти в систему.

173
00:13:14,010 --> 00:13:20,985
И когда вы входите в систему, auth предоставляет этот объект под названием CurrentUser на auth.

174
00:13:20,985 --> 00:13:26,455
Таким образом, вы получаете информацию пользователя, сказав auth.currentUser здесь.

175
00:13:26,455 --> 00:13:31,235
А также я храню информацию о пользователе в своей базе данных.

176
00:13:31,235 --> 00:13:33,879
Теперь я явно не отслеживаю какой-либо токен и

177
00:13:33,879 --> 00:13:37,945
что-то подобное, потому что это автоматически отслеживается auth для меня,

178
00:13:37,945 --> 00:13:40,606
который предоставляется модулем Firebase npm.

179
00:13:40,606 --> 00:13:43,723
Поэтому я просто использую это для отслеживания текущего использования.

180
00:13:43,723 --> 00:13:49,078
Если текущий пользователь равен нулю, я знаю, что

181
00:13:49,078 --> 00:13:53,840
у моего клиента нет пользователя, зарегистрированного на сервере.

182
00:13:53,840 --> 00:13:59,510
И аналогичным образом, чтобы выйти из системы пользователя, я просто говорю auth.signout.

183
00:13:59,510 --> 00:14:04,370
Теперь опять же, документация о том, как использовать

184
00:14:04,370 --> 00:14:09,060
модуль Filebase npm, доступна в документации Firebase.

185
00:14:09,060 --> 00:14:14,238
Таким образом, вы можете легко посмотреть это, чтобы понять, как использовать

186
00:14:14,238 --> 00:14:18,993
Firebase, чтобы использовать все эти различные функции

187
00:14:18,993 --> 00:14:23,443
, доступные из модуля Firebase npm.

188
00:14:23,443 --> 00:14:27,999
Кроме того, для избранного мы либо публикуем избранное, и поэтому

189
00:14:27,999 --> 00:14:32,454
вам нужно опубликовать элементы, так что вы бы сказали добавить, и

190
00:14:32,454 --> 00:14:36,333
когда вам нужно получить элемент, вы скажете получить.

191
00:14:36,333 --> 00:14:41,455
И вы даже можете получить элемент из определенного документа в коллекциях.

192
00:14:41,455 --> 00:14:45,245
Если вы хотите конкретный документ в коллекции, вы скажете .doc.

193
00:14:45,245 --> 00:14:49,015
А затем вы указываете идентификатор документа здесь.

194
00:14:49,015 --> 00:14:51,585
Вот как вы можете получить конкретный документ.

195
00:14:53,465 --> 00:14:56,265
Также удаляйте избранное, извлекайте избранное и так далее.

196
00:14:56,265 --> 00:15:01,640
Теперь, чтобы избранные хранились в моей Firebase,

197
00:15:01,640 --> 00:15:09,100
избранные хранятся как идентификатор пользователя и идентификатор блюда здесь.

198
00:15:09,100 --> 00:15:13,680
Теперь сам Firestore не имеет никакого способа заполнить

199
00:15:13,680 --> 00:15:15,800
информацию о блюде в идентификатор блюда.

200
00:15:15,800 --> 00:15:21,214
Поэтому я просто получаю всю информацию о блюде,

201
00:15:21,214 --> 00:15:27,694
так что это каждый фаворит - пара, пользователь и идентификатор блюда.

202
00:15:27,694 --> 00:15:30,431
Так что я просто принесу это в свои любимые.

203
00:15:30,431 --> 00:15:35,859
Но тогда это также означает, что мне нужно изменить мой компонент избранного, чтобы

204
00:15:35,859 --> 00:15:40,091
он мог использовать идентификатор блюда, а затем индексировать в блюда, которые

205
00:15:40,091 --> 00:15:45,560
хранятся в моем магазине Redux, и получить информацию о блюде.

206
00:15:45,560 --> 00:15:49,194
Или альтернативой было бы перейти на сервер, а затем получить информацию.

207
00:15:49,194 --> 00:15:53,560
Но так как у меня уже есть данные о блюдах в моем магазине Redux,

208
00:15:53,560 --> 00:15:58,234
потому что я уже сделал выборку блюд, чтобы получить всю информацию

209
00:15:58,234 --> 00:15:59,474
о блюдах.

210
00:15:59,474 --> 00:16:05,492
Я просто прямо вхожу в предмет посуды в моем Redux порвал и

211
00:16:05,492 --> 00:16:08,190
получу эту информацию.

212
00:16:08,190 --> 00:16:12,250
Таким образом, это также означает, что есть изменения в главном компоненте.

213
00:16:12,250 --> 00:16:18,894
В главном компоненте вы заметите, что когда я делаю любимое здесь для

214
00:16:18,894 --> 00:16:25,343
детали блюда, мне просто придется сравнить блюдо с этим DisHid.

215
00:16:25,343 --> 00:16:29,188
Так что блюдо здесь, в моем любимом, это сам Дишид, так

216
00:16:29,188 --> 00:16:31,540
что мне просто нужно сделать сравнение.

217
00:16:31,540 --> 00:16:35,334
Таким образом, в DishID будет небольшое изменение этой строки.

218
00:16:35,334 --> 00:16:39,503
А также вы заметите, что когда я называю фаворитов,

219
00:16:39,503 --> 00:16:42,786
в дополнение к поставке их фаворитов,

220
00:16:42,786 --> 00:16:47,322
я также поставляю блюда как один из реквизит для моих любимых.

221
00:16:47,322 --> 00:16:51,711
Так что это еще одно изменение, которое вы заметите в главном компоненте.

222
00:16:51,711 --> 00:16:54,990
И аналогичным образом, в любимом компоненте

223
00:16:54,990 --> 00:16:59,996
вы заметите, что внутри избранного компонента внизу,

224
00:16:59,996 --> 00:17:04,933
вы заметите, что, когда я визуализирую любимый компонент.

225
00:17:04,933 --> 00:17:09,761
Затем, прямо здесь, в этой функции, const favorites,

226
00:17:09,761 --> 00:17:14,113
то, что я делаю, это я иду в избранные

227
00:17:14,113 --> 00:17:19,338
блюда, блюда - это массив всех DisHID здесь, поэтому я карту через это.

228
00:17:19,338 --> 00:17:23,591
Так что посмотри на каждого дишида, а потом из блюд

229
00:17:23,591 --> 00:17:27,545
я отфильтровал это конкретное блюдо.

230
00:17:27,545 --> 00:17:29,484
И затем получил DisHid, поэтому

231
00:17:29,484 --> 00:17:33,023
здесь вы увидите меня, используя фильтр массива JavaScript здесь.

232
00:17:33,023 --> 00:17:36,419
Он отфильтрует эту конкретную информацию о блюде, а

233
00:17:36,419 --> 00:17:38,687
затем визуализирует это конкретное блюдо.

234
00:17:38,687 --> 00:17:43,415
Таким образом, это дополнительная работа, которую мне нужно сделать в моем любимом

235
00:17:43,415 --> 00:17:48,840
компоненте, чтобы сделать каждое из блюд там.

236
00:17:48,840 --> 00:17:55,900
Так вот, такого рода незначительные модификации вы заметите в паре компонентов, а

237
00:17:55,900 --> 00:17:59,840
именно в деталях блюда, любимом и главном компоненте.

238
00:17:59,840 --> 00:18:05,410
Вот где были внесены некоторые незначительные изменения, чтобы облегчить

239
00:18:05,410 --> 00:18:09,980
приложение React, чтобы иметь возможность использовать Firebase Server.

240
00:18:09,980 --> 00:18:12,790
Итак, это быстрый обзор того, как

241
00:18:12,790 --> 00:18:17,870
мое приложение React было изменено для связи с моим Firebase Server.

242
00:18:17,870 --> 00:18:23,257
Теперь, как и с Angularfire, у нас тоже был

243
00:18:23,257 --> 00:18:29,680
Angularfire, который предоставил нам способ использовать вместе с Firebase для связи с сервером.

244
00:18:29,680 --> 00:18:35,659
React не имеет такого аналога, поэтому я напрямую использую

245
00:18:35,659 --> 00:18:41,472
модуль Firebase npm, который обеспечивает базовую базу доступа к серверу Firebase.

246
00:18:41,472 --> 00:18:46,165
А затем использовать функции, которые он предоставляет для связи с моим

247
00:18:46,165 --> 00:18:47,382
Firebase Server.

248
00:18:47,382 --> 00:18:52,506
Проведите некоторое время снова, пройдя этот код, чтобы понять, как

249
00:18:52,506 --> 00:18:57,534
я использовал модули Firebase npm для связи

250
00:18:57,534 --> 00:19:03,090
с моим Firebase Server, который я установил в предыдущем упражнении.

251
00:19:03,090 --> 00:19:08,293
С этим я дал вам краткий обзор того, как вы можете настроить

252
00:19:08,293 --> 00:19:13,957
приложение React для взаимодействия с сервером Firebase как службой, а

253
00:19:13,957 --> 00:19:20,012
затем иметь возможность поддерживать различные операции, которые у вас есть в вашем приложении.

254
00:19:20,012 --> 00:19:24,632
Теперь, с этим, я завершу это конкретное упражнение, где я

255
00:19:24,632 --> 00:19:28,758
проиллюстрировал в этом уроке о back-end как службе, а

256
00:19:28,758 --> 00:19:33,645
также продемонстрировал Firebase как пример бэк-энда как сервиса.

257
00:19:33,645 --> 00:19:36,995
[ МУЗЫКА]