1
00:00:03,950 --> 00:00:06,525
В предыдущем упражнении

2
00:00:06,525 --> 00:00:09,990
мы уже настроили наш сервер Firebase как

3
00:00:09,990 --> 00:00:15,120
сервис с новым проектом, а также создали много

4
00:00:15,120 --> 00:00:19,620
данных в нашей базе данных, а затем настроили наше хранилище и

5
00:00:19,620 --> 00:00:25,120
настроили наш Firebase Server, чтобы действовать в качестве бэкэнда для нашего углового приложения.

6
00:00:25,120 --> 00:00:29,160
В этом упражнении мы рассмотрим модифицированную версию

7
00:00:29,160 --> 00:00:33,480
нашего углового приложения, которое использует бэкэнд Firebase

8
00:00:33,480 --> 00:00:37,500
в качестве сервиса для получения данных, а

9
00:00:37,500 --> 00:00:41,915
также хранения информации для пользователей на серверах.

10
00:00:41,915 --> 00:00:44,480
Кроме того, мы воспользуемся

11
00:00:44,480 --> 00:00:48,455
поддержкой аутентификации, которую Firebase предоставляет для аутентификации пользователей

12
00:00:48,455 --> 00:00:56,295
как с использованием электронной почты и пароля, так и с использованием учетной записи Google.

13
00:00:56,295 --> 00:00:59,775
Чтобы начать работу с этим упражнением,

14
00:00:59,775 --> 00:01:02,750
перейдите в удобное место на вашем компьютере, а

15
00:01:02,750 --> 00:01:07,190
затем клонируйте данный репозиторий Git, где я

16
00:01:07,190 --> 00:01:14,775
предоставил вам версию Angular Firebase нашего приложения Angular.

17
00:01:14,775 --> 00:01:17,490
Итак, введите git clone

18
00:01:17,490 --> 00:01:27,470
https://github.com/jmuppala/confusion-Angular6-Firebase.git,

19
00:01:27,470 --> 00:01:28,670
а затем клонируйте

20
00:01:28,670 --> 00:01:34,835
репозиторий Git, и как только репозиторий Git клонируется на ваш компьютер,

21
00:01:34,835 --> 00:01:43,355
а затем перейдите в путаницу Angular Firebase,

22
00:01:43,355 --> 00:01:47,570
которая будет создана в этот момент, а

23
00:01:47,570 --> 00:01:52,110
затем вы обратите внимание, что там уже установлена куча файлов.

24
00:01:52,110 --> 00:01:56,015
Давайте продолжим и сделаем установку npm, чтобы установить

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

26
00:02:01,890 --> 00:02:04,520
Эта версия также установит

27
00:02:04,520 --> 00:02:10,010
два дополнительных модуля узла под названием Firebase, а затем Angular fire два.

28
00:02:10,010 --> 00:02:15,525
Я объясню немного больше об этих двух узловых модулях позже в этом упражнении.

29
00:02:15,525 --> 00:02:18,915
После завершения установки проекта

30
00:02:18,915 --> 00:02:23,360
откройте проект в редакторе, а затем в проекте,

31
00:02:23,360 --> 00:02:27,830
перейдите в папку исходных сред, а

32
00:02:27,830 --> 00:02:32,420
затем откройте файл environment.ts, а в файле environment.ts

33
00:02:32,420 --> 00:02:36,980
вы увидите набор конфигурации Firebase, который вам

34
00:02:36,980 --> 00:02:42,130
нужно настроить с помощью собственная конфигурация сервера Firebase.

35
00:02:42,130 --> 00:02:45,105
Как мы уже видели в предыдущем упражнении,

36
00:02:45,105 --> 00:02:48,950
мы можем получить всю эту информацию, когда мы нажимаем на

37
00:02:48,950 --> 00:02:53,150
эту кнопку здесь под названием «Добавить Firebase в ваше веб-приложение», а затем

38
00:02:53,150 --> 00:02:56,809
скопировать эту информацию, а затем вставить эту информацию

39
00:02:56,809 --> 00:03:01,835
в ваш файл environment.ts, чтобы

40
00:03:01,835 --> 00:03:06,500
заменить их на ваш конкретный Конфигурация серверов Firebase

41
00:03:06,500 --> 00:03:10,940
для всей этой части информации, и как только это будет завершено,

42
00:03:10,940 --> 00:03:17,390
вы можете запустить свое угловое приложение, набрав «ng serve» в командной строке.

43
00:03:17,390 --> 00:03:21,735
Как только ваше угловое приложение скомпилировано с помощью «ng serve»,

44
00:03:21,735 --> 00:03:29,905
затем перейдите в браузер, а затем введите localhost: 4200 для загрузки в

45
00:03:29,905 --> 00:03:34,850
ваше угловое приложение, и вы заметите, что ваше угловое приложение компилируется,

46
00:03:34,850 --> 00:03:40,215
а затем загружается в ваш браузер, как и прежде.

47
00:03:40,215 --> 00:03:43,190
Итак, как только ваше приложение Angular работает и работает,

48
00:03:43,190 --> 00:03:47,585
вы заметите, что эта версия приложения Angular будет использовать

49
00:03:47,585 --> 00:03:51,260
сервер Firebase, который вы установили в

50
00:03:51,260 --> 00:03:55,625
предыдущем упражнении, и поэтому здесь вы увидите страницу «Главная», страницу

51
00:03:55,625 --> 00:04:00,030
«О», как мы видим здесь, и

52
00:04:00,030 --> 00:04:09,615
« Меню» и «Контакты», и, очевидно, так как мы не вошли в систему,

53
00:04:09,615 --> 00:04:14,975
страница «Мои избранные» отобразит сообщение об ошибке, говорящее, что ни один пользователь не вошел в систему.

54
00:04:14,975 --> 00:04:17,210
Итак, давайте войдем сами.

55
00:04:17,210 --> 00:04:20,760
Позвольте мне вернуться на «Домашнюю страницу», а затем мы сами войдем.

56
00:04:20,760 --> 00:04:22,475
Таким образом, когда вы нажимаете на кнопку входа,

57
00:04:22,475 --> 00:04:27,195
вы увидите типичную форму здесь с электронной почтой и информацией о пароле.

58
00:04:27,195 --> 00:04:30,715
Здесь вы также увидите дополнительную кнопку под названием «Войти с помощью Google».

59
00:04:30,715 --> 00:04:33,600
Поэтому позвольте мне войти с моей учетной записью Google.

60
00:04:33,600 --> 00:04:35,750
Таким образом, когда вы нажимаете на «Войти с Google»,

61
00:04:35,750 --> 00:04:41,180
то он откроет другое окно браузера, где вам будет предложено

62
00:04:41,180 --> 00:04:47,420
авторизоваться на использование вашего аккаунта Google этим сервером Firebase.

63
00:04:47,420 --> 00:04:49,475
Итак, позвольте мне продолжить и авторизовать

64
00:04:49,475 --> 00:04:53,845
это приложение, а затем, как только авторизация

65
00:04:53,845 --> 00:04:57,145
будет завершена, вы увидите, что ваше

66
00:04:57,145 --> 00:05:01,850
приложение на основе Firebase Angular запустится, и в правом углу

67
00:05:01,850 --> 00:05:06,200
вы сразу увидите, что ваше имя

68
00:05:06,200 --> 00:05:11,525
отображается здесь и с «Войти» теперь превратилась в кнопку «Выход».

69
00:05:11,525 --> 00:05:14,755
Таким образом, на данный момент

70
00:05:14,755 --> 00:05:17,530
вы должны иметь возможность видеть ваши избранные,

71
00:05:17,530 --> 00:05:20,310
и в этом случае, так как у нас нет избранного,

72
00:05:20,310 --> 00:05:22,155
так что в данный момент он будет пустым.

73
00:05:22,155 --> 00:05:27,830
Позвольте мне вернуться в «Меню», а затем добавить пару пунктов в «Мои избранные».

74
00:05:27,830 --> 00:05:32,235
Итак, я добавлю это блюдо в избранное.

75
00:05:32,235 --> 00:05:34,045
Итак, когда я нажимаю на это блюдо,

76
00:05:34,045 --> 00:05:41,110
вы сразу увидите значок превращается в наполненное сердце и позвольте мне также выбрать

77
00:05:41,110 --> 00:05:44,350
еще одно блюдо и добавить его в «Мои

78
00:05:44,350 --> 00:05:49,650
избранные», а затем теперь, когда вы перейдете к «Мои избранные»,

79
00:05:49,650 --> 00:05:52,510
вы увидите пару блюд, добавленных в

80
00:05:52,510 --> 00:05:56,330
ваши избранные, как вы ожидать и снова,

81
00:05:56,330 --> 00:06:02,540
вы можете удалить блюда, нажав на кнопку «Удалить» переключатель здесь, а затем нажмите

82
00:06:02,540 --> 00:06:09,695
на крестик, чтобы удалить элемент из списка избранного, как показано здесь.

83
00:06:09,695 --> 00:06:13,570
Теперь, мы также можем добавить, как вы поняли,

84
00:06:13,570 --> 00:06:17,660
мы можем пойти на любое блюдо, а затем добавить комментарии к этому блюду.

85
00:06:17,660 --> 00:06:19,190
Итак, позвольте мне добавить комментарий

86
00:06:19,190 --> 00:06:28,260
здесь и в тот момент, когда вы отправляете комментарий,

87
00:06:28,260 --> 00:06:32,435
вы сразу увидите, что ваши комментарии будут отображаться здесь с

88
00:06:32,435 --> 00:06:41,825
именем автора комментария также включены здесь и с датой, как показано здесь.

89
00:06:41,825 --> 00:06:45,890
Таким образом, вы можете видеть, что подача

90
00:06:45,890 --> 00:06:49,955
комментариев пользователем будет поддерживаться для любого конкретного блюда.

91
00:06:49,955 --> 00:06:55,805
Позвольте мне добавить еще один любимый, и поэтому у этого пользователя будет пара избранных.

92
00:06:55,805 --> 00:06:58,180
Позвольте мне «Выйти» этого пользователя.

93
00:06:58,180 --> 00:07:02,930
Вернитесь на «Домашнюю страницу», а затем «Выйти» этого пользователя.

94
00:07:02,930 --> 00:07:07,715
Теперь мы будем авторизоваться с помощью другой учетной записи.

95
00:07:07,715 --> 00:07:13,490
Итак, я хотел бы - я установил

96
00:07:13,490 --> 00:07:17,840
эту учетную запись пароля электронной почты раньше, и поэтому мы будем

97
00:07:17,840 --> 00:07:22,865
входить в систему как этот другой пользователь, и как только другой пользователь вошел в систему,

98
00:07:22,865 --> 00:07:29,045
позвольте мне снова перейти в «Меню» и добавить пару элементов в

99
00:07:29,045 --> 00:07:36,904
избранное для этого конкретного пользователя

100
00:07:36,904 --> 00:07:40,700
и поэтому, когда вы вернетесь к «Мои избранные»,

101
00:07:40,700 --> 00:07:44,270
вы увидите эти элементы в списке для второго пользователя.

102
00:07:44,270 --> 00:07:46,775
Теперь, аналогично этому пользователю,

103
00:07:46,775 --> 00:07:51,560
позвольте мне снова отправить еще один комментарий этого пользователя.

104
00:07:51,560 --> 00:07:53,150
Так

105
00:08:01,000 --> 00:08:02,600
что, и вы

106
00:08:02,600 --> 00:08:07,445
увидите, что комментарии, представленные вторым пользователем, также добавляются в приложение.

107
00:08:07,445 --> 00:08:11,615
Итак, вот как ваше угловое приложение работает

108
00:08:11,615 --> 00:08:16,490
с Firebase в качестве бэкэнда как службы.

109
00:08:16,490 --> 00:08:18,529
Теперь, конечно, вам должно быть интересно,

110
00:08:18,529 --> 00:08:24,170
как мы перепроектировать наше угловое приложение, чтобы использовать Firebase вместо

111
00:08:24,170 --> 00:08:31,610
использования сервера Standard Express плюс MongoDB, который мы построили ранее?

112
00:08:31,610 --> 00:08:38,440
Для того, чтобы настроить приложение Angular для связи с Firebase Server,

113
00:08:38,440 --> 00:08:42,620
есть два модуля узлов, которые вам нужно установить в

114
00:08:42,620 --> 00:08:46,860
ваше угловое приложение, и один из них является модулем Firebase.

115
00:08:46,860 --> 00:08:49,730
Модуль Firebase, как вы видите здесь,

116
00:08:49,730 --> 00:08:55,190
предоставляет инструменты и инфраструктуру, которая позволяет вам взаимодействовать

117
00:08:55,190 --> 00:09:01,610
с сервером Firebase и установить это в ваше приложение,

118
00:09:01,610 --> 00:09:05,720
вы вводите, npm install минус save Firebase.

119
00:09:05,720 --> 00:09:07,610
Теперь вместе с этим

120
00:09:07,610 --> 00:09:11,395
есть еще один модуль под названием Angular Fire 2.

121
00:09:11,395 --> 00:09:13,725
Итак, Угловой огонь 2.

122
00:09:13,725 --> 00:09:20,535
Кроме того, снова я предоставил ссылки на эти два модуля в дополнительных ресурсах.

123
00:09:20,535 --> 00:09:23,795
AngularFire 2 - официальная библиотека

124
00:09:23,795 --> 00:09:27,290
для поддержки Firebase и Angular, и, как вы можете видеть,

125
00:09:27,290 --> 00:09:31,520
это наблюдаемая поддержка для угловых файлов.

126
00:09:31,520 --> 00:09:36,545
Таким образом, это работает, чтобы добавить к модулю Firebase npm, а затем

127
00:09:36,545 --> 00:09:42,125
дает вам наблюдаемый интерфейс, который мы можем использовать в вашем угловом приложении.

128
00:09:42,125 --> 00:09:44,930
Итак, мы будем использовать AngularFire 2.

129
00:09:44,930 --> 00:09:46,994
Таким образом, чтобы использовать AngularFire2,

130
00:09:46,994 --> 00:09:49,940
вам нужно установить как Firebase, так и AngularFire 2.

131
00:09:49,940 --> 00:09:51,345
Итак, одним выстрелом

132
00:09:51,345 --> 00:09:54,205
установите оба этих в свое угловое приложение.

133
00:09:54,205 --> 00:09:59,320
Теперь версия приложения Angular, которую я предоставил вам, автоматически

134
00:09:59,320 --> 00:10:06,250
устанавливает оба эти, как вы увидите, когда вы изучаете файл package.json.

135
00:10:06,250 --> 00:10:08,510
Теперь, как использовать эти два,

136
00:10:08,510 --> 00:10:12,245
я проиллюстрирую, что быстро запустив вас через

137
00:10:12,245 --> 00:10:17,280
модифицированный код для служб и пару компонентов, где мы

138
00:10:17,280 --> 00:10:19,955
используем Firebase и AngularFire2

139
00:10:19,955 --> 00:10:23,135
для изменения углового приложения, которое мы разработали

140
00:10:23,135 --> 00:10:30,140
ранее, чтобы использовать Сервер Firebase в качестве бэкэнда в качестве сервиса.

141
00:10:30,140 --> 00:10:34,075
Чтобы понять больше о том, как мы используем

142
00:10:34,075 --> 00:10:39,185
Firebase и AngularFire 2 в нашем угловом приложении,

143
00:10:39,185 --> 00:10:42,860
наша первая остановка находится в файле package.json.

144
00:10:42,860 --> 00:10:45,025
Таким образом, в файле package.json

145
00:10:45,025 --> 00:10:50,850
вы заметите, что я установил AngularFire2 здесь, а также мы установили

146
00:10:50,850 --> 00:10:57,510
Firebase для использования в этой версии углового приложения, которое я поставляю для вас.

147
00:10:57,510 --> 00:11:01,980
Итак, обратите внимание, что эти два будут автоматически установлены, когда вы вводите «npm

148
00:11:01,980 --> 00:11:07,720
install» после клонирования этого репозитория git, который я предоставил вам.

149
00:11:07,720 --> 00:11:11,220
Если вы начинали с нового приложения Angular,

150
00:11:11,220 --> 00:11:15,590
вы должны установить как AngularFire 2, так и Firebase,

151
00:11:15,590 --> 00:11:20,184
чтобы использовать использование Firebase в качестве бэкэнда в качестве сервиса.

152
00:11:20,184 --> 00:11:22,365
Теперь, установив эти два,

153
00:11:22,365 --> 00:11:27,360
давайте узнаем, как мы используем их в наших сервисах.

154
00:11:27,360 --> 00:11:30,030
Таким образом, лучший способ узнать, как использовать оба из

155
00:11:30,030 --> 00:11:33,640
них - посетить некоторые службы, которые мы

156
00:11:33,640 --> 00:11:36,930
настроили в нашем приложении, и понять, как мы

157
00:11:36,930 --> 00:11:42,130
используем использование AngularFire2 и Firebase.

158
00:11:42,130 --> 00:11:46,235
Итак, мы начнем с файла dash.service.ts.

159
00:11:46,235 --> 00:11:48,830
Итак, если вы перейдете в файл dish.service.ts,

160
00:11:48,830 --> 00:11:51,095
вы заметите, что здесь,

161
00:11:51,095 --> 00:11:55,235
в этой сервисе блюд,

162
00:11:55,235 --> 00:12:01,190
вы увидите, что я импортирую этот AngularFireStore, AngularFireStoreDocument

163
00:12:01,190 --> 00:12:08,115
и AngularFireStoreCollection из AngularFire в Firestore здесь.

164
00:12:08,115 --> 00:12:16,680
Таким образом, это приносит все, что мне нужно из моего модуля AngularFireStore npm,

165
00:12:16,680 --> 00:12:21,010
также вы заметите, что я импортирую все из

166
00:12:21,010 --> 00:12:27,615
FireBase/App в качестве Firebase в мое блюдо здесь.

167
00:12:27,615 --> 00:12:29,945
Итак, как только мы импортировали эти два,

168
00:12:29,945 --> 00:12:35,415
давайте взглянем на то, как мы перенастроим наш сервиз блюд здесь.

169
00:12:35,415 --> 00:12:37,435
Итак, если вы зайдете в сервисную службу,

170
00:12:37,435 --> 00:12:41,175
вы заметите, что я больше не использую HTTP-клиент.

171
00:12:41,175 --> 00:12:48,975
Вместо этого я впрыскиваю AFS, который является AngularFireStore в конструктор здесь.

172
00:12:48,975 --> 00:12:51,520
AngularFireStore - это тот, который дает мне

173
00:12:51,520 --> 00:12:55,815
доступ к бэкенду Firebase в качестве службы.

174
00:12:55,815 --> 00:13:01,785
Теперь также напомним, что мы уже настроили все детали

175
00:13:01,785 --> 00:13:09,450
нашего сервера, а также проект filestore в файле environment.ts ранее.

176
00:13:09,450 --> 00:13:12,595
Таким образом, вы должны были настроить эту информацию уже там

177
00:13:12,595 --> 00:13:16,180
о том, как ваше Angular приложение должно использовать

178
00:13:16,180 --> 00:13:20,930
ваш проект на основе Firestore на

179
00:13:20,930 --> 00:13:27,710
вашем сервере Firestore для доступа к данным, которые вы настроили там.

180
00:13:27,710 --> 00:13:32,290
Таким образом, это даст мне доступ к моему облачному

181
00:13:32,290 --> 00:13:39,400
Firestore в моем проекте Firebase, который я создал.

182
00:13:39,400 --> 00:13:43,410
Теперь AuthService, конечно же, тот же Authservice, который мы использовали раньше,

183
00:13:43,410 --> 00:13:51,175
но он изменился, чтобы использовать угловую поддержку Firebase.

184
00:13:51,175 --> 00:13:55,095
Мы посетим AuthService, чтобы узнать, как он был обновлен.

185
00:13:55,095 --> 00:14:00,410
Теперь AuthService даст нам доступ к

186
00:14:00,410 --> 00:14:06,345
этому методу под названием GetAuthState, который вернется в наблюдаемом.

187
00:14:06,345 --> 00:14:08,965
Это наблюдаемое, когда мы подписываемся на него,

188
00:14:08,965 --> 00:14:15,855
даст нам информацию в качестве пользователя, которая содержит информацию пользователя.

189
00:14:15,855 --> 00:14:21,465
Итак, я получу это, а затем настрою CurrentUser в моем приложении

190
00:14:21,465 --> 00:14:28,995
в качестве пользователя, возвращаемого этим наблюдаемым здесь.

191
00:14:28,995 --> 00:14:30,699
Таким образом, когда мы посещаем AuthService,

192
00:14:30,699 --> 00:14:33,085
мы узнаем, что этот GetAuthState вернет для

193
00:14:33,085 --> 00:14:35,700
нас, и поэтому информация CurrentUser может

194
00:14:35,700 --> 00:14:36,940
быть получена из любого из

195
00:14:36,940 --> 00:14:41,165
других сервисов, потому что мы уже вводим AuthService здесь.

196
00:14:41,165 --> 00:14:45,570
Теперь давайте посмотрим, как здесь реализован метод GetDiss.

197
00:14:45,570 --> 00:14:47,710
Теперь, ранее в методе GetDishes,

198
00:14:47,710 --> 00:14:55,920
мы использовали HTTP-клиент для доступа к серверу по базовому URL+/Dishes.

199
00:14:55,920 --> 00:14:57,425
Теперь в этом случае,

200
00:14:57,425 --> 00:15:07,255
чтобы получить доступ к коллекции на моем сервере Firebase, мы скажем это.afs.

201
00:15:07,255 --> 00:15:10,710
Итак, это то, что AngularFire2 предоставляет нам.

202
00:15:10,710 --> 00:15:16,345
AFS, как вы видите, является AngularFireStore, который мы ввели здесь, и поэтому мы говорим

203
00:15:16,345 --> 00:15:19,810
this.afs.collection, и здесь мы

204
00:15:19,810 --> 00:15:23,010
будем указывать конкретную коллекцию, к которой мы обращаемся здесь.

205
00:15:23,010 --> 00:15:26,315
Напомним, что мы создали блюда, акции

206
00:15:26,315 --> 00:15:30,415
и коллекции лидеров на моем сервере Firebase.

207
00:15:30,415 --> 00:15:34,065
Таким образом, это напрямую дает мне доступ

208
00:15:34,065 --> 00:15:38,595
к моей коллекции блюд здесь и из коллекции блюд,

209
00:15:38,595 --> 00:15:42,740
я могу либо do.ValueChanges, который

210
00:15:42,740 --> 00:15:47,115
вернет всю информацию в бизнес-коллекции для меня,

211
00:15:47,115 --> 00:15:50,440
или я могу сделать. SnapshotChanges, который

212
00:15:50,440 --> 00:15:53,990
вернет дополнительную информацию, включая идентификатор блюд.

213
00:15:53,990 --> 00:15:56,660
Итак, если вместо того, чтобы делать SnapShotChanges,

214
00:15:56,660 --> 00:15:59,310
если я скажу ValueChanges,

215
00:15:59,310 --> 00:16:03,110
он вернет только информацию о блюде, но он не вернет

216
00:16:03,110 --> 00:16:07,890
идентификаторы блюд, но поскольку мне понадобятся идентификаторы моих блюд,

217
00:16:07,890 --> 00:16:13,335
поэтому я использую.snapshotChanges в этом случае.

218
00:16:13,335 --> 00:16:16,090
Итак, когда вызывается.SnapShotChanges,

219
00:16:16,090 --> 00:16:19,505
это вернется, как вы видите наблюдаемый, который

220
00:16:19,505 --> 00:16:27,195
я сопоставляю, и поэтому возвращаемое значение, которое вызывается как действия, и эти действия

221
00:16:27,195 --> 00:16:31,800
, опять же, будут наблюдаемыми, которые я буду отображать каждое действие в

222
00:16:31,800 --> 00:16:38,930
этих действиях, а затем извлекать данные из действия, которое вернулся сюда.

223
00:16:38,930 --> 00:16:44,525
Таким образом, действие - это значение, которое возвращается для каждого из

224
00:16:44,525 --> 00:16:50,765
действий, и это действие содержит полезную нагрузку и содержит внутри этого темного поля.

225
00:16:50,765 --> 00:16:53,200
Теперь это то, что я понял, прочитав

226
00:16:53,200 --> 00:16:57,010
документацию для AngularFire2, и

227
00:16:57,010 --> 00:17:03,705
поэтому, когда мы вызываем эту функцию данных на этом action.payload.doc,

228
00:17:03,705 --> 00:17:05,875
это даст мне данные.

229
00:17:05,875 --> 00:17:09,510
Данные для этого конкретного блюда, которые

230
00:17:09,510 --> 00:17:14,160
получены из моей коллекции блюд на стороне сервера.

231
00:17:14,160 --> 00:17:18,760
Таким образом, каждый документ там будет возвращен здесь, а

232
00:17:18,760 --> 00:17:24,205
затем я получу идентификатор для этого, сказав action.payload.doc.id.

233
00:17:24,205 --> 00:17:27,855
Вот где идентификатор этого будет

234
00:17:27,855 --> 00:17:32,030
переноситься, а затем я присоединю их вместе и

235
00:17:32,030 --> 00:17:40,035
верну это как документ блюдо обратно в мои различные компоненты оттуда,

236
00:17:40,035 --> 00:17:42,150
я буду вызвать этот метод GetDishs.

237
00:17:42,150 --> 00:17:43,345
Итак, как вы помните,

238
00:17:43,345 --> 00:17:44,690
из компонента меню

239
00:17:44,690 --> 00:17:47,400
я вызываю метод GetDiss, чтобы получить

240
00:17:47,400 --> 00:17:51,090
информацию обо всех блюдах в моей коллекции.

241
00:17:51,090 --> 00:17:58,505
Коллекция. Таким образом, каждое из этих блюд, которое возвращается в качестве документа, будет восстановлен в

242
00:17:58,505 --> 00:18:03,420
объект JavaScript с идентификатором, вставленным здесь, а также

243
00:18:03,420 --> 00:18:09,540
данные, которые извлекаются из этого действия payload.doc.doc.data.

244
00:18:09,540 --> 00:18:16,455
Теперь это то, что вы узнаете, прочитав документацию AngularFire2.

245
00:18:16,455 --> 00:18:19,470
Теперь, поскольку я уже сделал эту часть,

246
00:18:19,470 --> 00:18:22,755
я показываю вам точный код, который вы должны

247
00:18:22,755 --> 00:18:26,160
использовать, чтобы извлечь данные, а затем передать

248
00:18:26,160 --> 00:18:33,500
эти данные обратно вашему компоненту, который будет вызывать метод GetDiss здесь.

249
00:18:33,500 --> 00:18:37,090
Таким образом, делая это для каждого из документов там,

250
00:18:37,090 --> 00:18:39,180
этот документ будет восстановлен в

251
00:18:39,180 --> 00:18:44,800
объект блюда, который мы

252
00:18:44,800 --> 00:18:51,500
используем в нашем угловом приложении, и поэтому мы можем даже получить доступ к идентификатору.

253
00:18:51,500 --> 00:18:53,365
Если вы просто сделаете изменения стоимости,

254
00:18:53,365 --> 00:18:59,825
он просто вернет все документы сами, но без идентификаторов документов.

255
00:18:59,825 --> 00:19:04,920
Таким образом, эта дополнительная работа должна быть выполнена в рамках вашего сервиса, чтобы

256
00:19:04,920 --> 00:19:07,835
вернуть информацию правильно,

257
00:19:07,835 --> 00:19:10,865
чтобы MyComponents могли использовать эту информацию.

258
00:19:10,865 --> 00:19:13,370
Аналогично, для метода GetDish,

259
00:19:13,370 --> 00:19:17,695
поэтому обратите внимание, как я обращаюсь к информации для конкретного блюда.

260
00:19:17,695 --> 00:19:22,020
Опять же, мы скажем this.afs, а затем вы заметите, что я

261
00:19:22,020 --> 00:19:26,660
saying.doc, а затем здесь для метода the.doc,

262
00:19:26,660 --> 00:19:32,650
я поставляю блюда косой черты, а затем идентификатор конкретного блюда.

263
00:19:32,650 --> 00:19:35,150
Теперь, причина, по которой я предоставил ID,

264
00:19:35,150 --> 00:19:39,350
идентификатор здесь приходит в качестве параметра для метода GetDish здесь.

265
00:19:39,350 --> 00:19:41,985
Теперь, чтобы этот идентификатор был поставлен,

266
00:19:41,985 --> 00:19:44,450
мне нужно иметь возможность предоставить этот идентификатор в

267
00:19:44,450 --> 00:19:47,480
методе GetDiss, поэтому, когда мое меню будет создано,

268
00:19:47,480 --> 00:19:51,205
каждое блюдо будет иметь свой идентификатор, прикрепленный к нему там.

269
00:19:51,205 --> 00:19:56,575
Этот идентификатор передается здесь, и поэтому я буду получать доступ к документу в этот момент.

270
00:19:56,575 --> 00:20:01,260
Итак, AngularFire2 позволяет вам получить доступ к

271
00:20:01,260 --> 00:20:07,125
определенному документу, который находится внутри коллекции, сказав косаю черту имени коллекции,

272
00:20:07,125 --> 00:20:15,430
а также идентификатор документа или вы можете сказать это.afs.collection блюда, как вы слышали,

273
00:20:15,430 --> 00:20:22,540
коллекции посуды и then.doc, а затем предоставить doc и ID в скобках там.

274
00:20:22,540 --> 00:20:26,725
Итак, это еще один способ обращения к конкретному блюду.

275
00:20:26,725 --> 00:20:32,680
Опять же, я подписываюсь на SnapShotChanges, и это вернет действие, которое затем

276
00:20:32,680 --> 00:20:35,480
снова сопоставляется в том же формате, чтобы

277
00:20:35,480 --> 00:20:39,495
построить объект блюда здесь вместе с идентификатором здесь.

278
00:20:39,495 --> 00:20:42,410
Теперь Firebase сохраняет идентификатор отдельно от

279
00:20:42,410 --> 00:20:46,300
самого документа, и поэтому я должен явно выполнить

280
00:20:46,300 --> 00:20:49,010
эту реконструкцию, чтобы получить

281
00:20:49,010 --> 00:20:54,750
документ блюда таким образом, чтобы использовать MyComponents.

282
00:20:54,750 --> 00:20:59,660
Затем я построил свой собственный сервер с помощью Express и MongoDB,

283
00:20:59,660 --> 00:21:03,995
идентификатор автоматически был там в самом документе, и поэтому было очень

284
00:21:03,995 --> 00:21:09,235
легко получить это и передать его обратно на сторону клиента.

285
00:21:09,235 --> 00:21:13,610
Теперь, для GetFeaturedDish,

286
00:21:13,610 --> 00:21:15,620
напомним, что для GetFeaturedDish,

287
00:21:15,620 --> 00:21:20,870
мы ищем те блюда, в которых функция установлена в true.

288
00:21:20,870 --> 00:21:25,790
Теперь, вот где AngularFire2 позволяет нам

289
00:21:25,790 --> 00:21:31,180
построить запрос и предоставить этот запрос здесь для этой коллекции.

290
00:21:31,180 --> 00:21:36,440
Здесь я говорю this.afs коллекции блюд здесь,

291
00:21:36,440 --> 00:21:39,520
поэтому я все еще использую коллекцию, но затем посмотрите

292
00:21:39,520 --> 00:21:43,140
на второй параметр для этого вызова здесь.

293
00:21:43,140 --> 00:21:49,405
Это говорит о ref, где ссылка ссылается на каждый документ, который находится в этой коллекции.

294
00:21:49,405 --> 00:21:53,330
В этом рефе говорится, что ref, и здесь я могу

295
00:21:53,330 --> 00:21:58,100
использовать этот запрос, который слышит так, что сказы.where.

296
00:21:58,100 --> 00:22:04,695
Таким образом, это означает, что каждый из документов, где признакам,

297
00:22:04,695 --> 00:22:10,445
как вы можете видеть, синтаксис довольно легко следовать здесь, где говорится, где показано.

298
00:22:10,445 --> 00:22:15,240
Теперь обратите внимание, что функция поставляется как строка здесь,

299
00:22:15,240 --> 00:22:17,175
а затем следующий

300
00:22:17,175 --> 00:22:22,230
оператор равен, так что вы можете даже сказать больше, меньше,

301
00:22:22,230 --> 00:22:25,345
больше или равно меньше или равно любой из этих вещей,

302
00:22:25,345 --> 00:22:30,375
но обратите внимание, что это должно быть внутри котировок здесь, а затем вы скажет правду.

303
00:22:30,375 --> 00:22:35,105
Таким образом, везде, где привилегированное свойство документа установлено в true,

304
00:22:35,105 --> 00:22:36,620
извлеките все из них.

305
00:22:36,620 --> 00:22:40,545
Таким образом, этот запрос извлечет только те документы

306
00:22:40,545 --> 00:22:45,250
из коллекции блюд, где функция установлена в true,

307
00:22:45,250 --> 00:22:50,195
а затем вернет только эти документы из этой коллекции здесь,

308
00:22:50,195 --> 00:22:53,770
и оттуда я собираюсь изменения снимков, и это

309
00:22:53,770 --> 00:22:59,350
вернет массив документов, и оттуда я их сопоставлю

310
00:22:59,350 --> 00:23:04,270
в отдельные документы блюдо, а затем, поскольку я

311
00:23:04,270 --> 00:23:09,700
обеспечил, что только один из этих документов будет иметь функцию, установленную в true.

312
00:23:09,700 --> 00:23:13,030
Таким образом, он вернет только один из них, но он вернет его как массив.

313
00:23:13,030 --> 00:23:14,980
Поэтому я создаю это

314
00:23:14,980 --> 00:23:20,195
с квадратной скобкой ноль первого элемента массива,

315
00:23:20,195 --> 00:23:25,210
и действительно он будет содержать только один элемент, потому что только один элемент в моей коллекции

316
00:23:25,210 --> 00:23:30,745
будет соответствовать этому конкретному запросу, который я установил здесь с волной здесь.

317
00:23:30,745 --> 00:23:36,470
Здесь есть другие настройки запросов, вы также можете использовать что-то, называемое порядком.

318
00:23:36,470 --> 00:23:41,000
Таким образом, вы можете заказать коллекцию по определенному свойству

319
00:23:41,000 --> 00:23:47,310
и некоторому другому набору параметров запроса, которые доступны.

320
00:23:47,310 --> 00:23:51,480
Теперь это поддерживается Firebase в облаке Firestore,

321
00:23:51,480 --> 00:23:56,890
и это то, что мы можем использовать с помощью AngularFire2 для разработки

322
00:23:56,890 --> 00:24:03,850
кода в вашем угловом приложении для выполнения запроса с самой стороны клиента.

323
00:24:03,850 --> 00:24:09,280
Таким образом, это собирается вернуть конкретную особенность блюда.

324
00:24:09,360 --> 00:24:15,355
Теперь, снова getDishid будет похож на то, что мы сделали ранее.

325
00:24:15,355 --> 00:24:16,890
Таким образом, никаких модификаций нет.

326
00:24:16,890 --> 00:24:21,370
Теперь, для PostComment снова,

327
00:24:21,370 --> 00:24:27,820
потому что Firebase с облачным Firestore бета,

328
00:24:27,820 --> 00:24:31,720
не имеет понятия населения,

329
00:24:31,720 --> 00:24:34,015
и так далее, что мы видели ранее.

330
00:24:34,015 --> 00:24:39,890
Итак, что я собираюсь сделать для комментариев, это то, что я собираюсь опубликовать эти комментарии как

331
00:24:39,890 --> 00:24:46,140
коллекция, для которой заключена внутри каждого блюда.

332
00:24:46,140 --> 00:24:52,040
Таким образом, каждое блюдо будет иметь свою коллекцию комментариев об этом конкретном блюде.

333
00:24:52,040 --> 00:24:54,965
Когда я отправлю комментарий, я собираюсь использовать DishID,

334
00:24:54,965 --> 00:24:57,905
а затем информацию о комментарии.

335
00:24:57,905 --> 00:25:01,735
Итак, что я делаю здесь, так это то, что я собираюсь сначала

336
00:25:01,735 --> 00:25:07,175
запросить блюда, а затем получить это конкретное блюдо.

337
00:25:07,175 --> 00:25:11,555
Итак, вы можете видеть, что я использую другой способ запроса для конкретного документа.

338
00:25:11,555 --> 00:25:16,070
Итак, здесь я говорю это afs.collection («блюда») .doc diShid.

339
00:25:16,440 --> 00:25:22,660
Таким образом, я могу использовать этот способ доступа к определенному документу, если я хочу.

340
00:25:22,660 --> 00:25:25,610
Другой способ, конечно, вы уже видели с помощью

341
00:25:25,610 --> 00:25:33,375
метода GetDish, где я говорю, что doc fishes slash плюс ID.

342
00:25:33,375 --> 00:25:38,185
Итак, два разных способа обращения к конкретному документу внутри

343
00:25:38,185 --> 00:25:44,460
коллекции здесь, а затем DishID, а затем коллекция и комментарии.

344
00:25:44,460 --> 00:25:46,840
Таким образом, это говорит в

345
00:25:46,840 --> 00:25:51,100
этой коллекции для этого конкретного документа с этим DishID,

346
00:25:51,100 --> 00:25:54,140
есть коллекция, которая включена в

347
00:25:54,140 --> 00:25:57,180
этот документ, и эта коллекция имеет комментарии к имени.

348
00:25:57,180 --> 00:25:59,660
Таким образом, это вложенность коллекции

349
00:25:59,660 --> 00:26:03,125
внутри документа, который находится в другом соединении более высокого уровня.

350
00:26:03,125 --> 00:26:07,110
Таким образом, этот вид вложенности коллекций разрешен

351
00:26:07,110 --> 00:26:13,590
Firebase Cloud Store Beta до 100 уровней глубиной, если вы хотите выбрать.

352
00:26:13,590 --> 00:26:15,700
Итак, внутри этой коллекции,

353
00:26:15,700 --> 00:26:17,420
я собираюсь добавить.

354
00:26:17,420 --> 00:26:20,310
Итак, как вы добавляете документ в коллекцию?

355
00:26:20,310 --> 00:26:22,105
Чтобы добавить документ в коллекцию,

356
00:26:22,105 --> 00:26:24,755
используйте метод добавления в коллекции здесь.

357
00:26:24,755 --> 00:26:27,600
Итак, вы можете видеть, что в комментариях коллекции

358
00:26:27,600 --> 00:26:30,380
я делаю добавление здесь, а затем

359
00:26:30,380 --> 00:26:33,655
это фактический документ, который будет добавлен здесь.

360
00:26:33,655 --> 00:26:35,280
Итак, в самом документе

361
00:26:35,280 --> 00:26:40,645
вы увидите, что у меня есть свойство автора здесь, где я установил текущий идентификатор,

362
00:26:40,645 --> 00:26:44,665
а также я установил имя для автора здесь,

363
00:26:44,665 --> 00:26:50,885
я обслуживаю только первый раз здесь, поэтому здесь я говорю это текущее отображаемое имя пользователя.

364
00:26:50,885 --> 00:26:55,625
Если отображаемое имя истинно, я установлю его на это текущее отображаемое имя пользователя.

365
00:26:55,625 --> 00:27:00,960
Если учетная запись пользователя не имеет отображаемого имени, прикрепленного к ней, я просто буду

366
00:27:00,960 --> 00:27:06,420
использовать эту текущую электронную почту пользователя в качестве свойства первого имени здесь.

367
00:27:06,420 --> 00:27:11,035
Таким образом, этот документ, который содержит комментарий,

368
00:27:11,035 --> 00:27:13,150
автоматически также несет это поле имени,

369
00:27:13,150 --> 00:27:16,140
и это то, что я собираюсь использовать для отображения

370
00:27:16,140 --> 00:27:22,495
информации, когда я отображаю комментарии в моем компоненте DishDetail.

371
00:27:22,495 --> 00:27:28,710
Итак, обратите внимание, что я фактически дублирую информацию здесь в каждом из комментариев.

372
00:27:28,710 --> 00:27:31,865
Но это нормально, поскольку они хранятся как

373
00:27:31,865 --> 00:27:34,160
документы Json на Firebase, это нормально

374
00:27:34,160 --> 00:27:36,990
дублировать некоторую информацию в комментариях здесь.

375
00:27:36,990 --> 00:27:40,245
Но если вы хотите получить более подробную информацию о текущем пользователе,

376
00:27:40,245 --> 00:27:45,280
у вас уже есть ссылка на идентификатор пользователя здесь, поэтому вы можете фактически пойти и получить

377
00:27:45,280 --> 00:27:48,150
документ для конкретного пользователя, а затем

378
00:27:48,150 --> 00:27:51,485
получить дополнительную информацию о пользователе, если вы решите.

379
00:27:51,485 --> 00:27:54,830
Теперь, когда я использовал Mongo DB плюс Mongo,

380
00:27:54,830 --> 00:27:57,950
вы видели, что я просто использую идентификатор текущего пользователя для

381
00:27:57,950 --> 00:28:01,650
автора, а затем я буду использовать заполнение для заполнения этой информации.

382
00:28:01,650 --> 00:28:05,150
Теперь бета-версия Cloud Firestore на данный момент не имеет

383
00:28:05,150 --> 00:28:10,240
никакой концепции этого заполнения, насколько я могу видеть из документации,

384
00:28:10,240 --> 00:28:14,335
возможно, будущая версия может поддерживать способ извлечения

385
00:28:14,335 --> 00:28:16,800
информации из другого документа и

386
00:28:16,800 --> 00:28:19,270
автоматического заполнения ее в текущий документ.

387
00:28:19,270 --> 00:28:24,500
Когда это произойдет, то этот код нужно будет изменить, чтобы воспользоваться этим.

388
00:28:24,500 --> 00:28:26,725
Но сейчас, как я вижу,

389
00:28:26,725 --> 00:28:29,560
бета-версия Firestore не имеет возможности

390
00:28:29,560 --> 00:28:33,000
заполнять информацию из другого документа в текущий документ.

391
00:28:33,000 --> 00:28:36,040
Вот почему я просто реплицирую только ту

392
00:28:36,040 --> 00:28:39,860
информацию, которая мне действительно нужна, когда я отображаю комментарий в

393
00:28:39,860 --> 00:28:43,660
моем компоненте dishdetail здесь, а затем внизу

394
00:28:43,660 --> 00:28:47,945
вы можете видеть, что у меня есть рейтинг и комментарий здесь, а затем также,

395
00:28:47,945 --> 00:28:49,740
обратите внимание, что я создаю

396
00:28:49,740 --> 00:28:57,370
эти два дополнительные поля в моем комментарии здесь называются «createDat» и «updateDat».

397
00:28:57,370 --> 00:29:01,785
Обратите внимание, как я помещаю временную метку для «CreateDat».

398
00:29:01,785 --> 00:29:05,785
Firebase, теперь, что это Firebase, я использую здесь,

399
00:29:05,785 --> 00:29:12,050
эта Firebase - это именно то, что я импортировал здесь, как из приложения Firebase.

400
00:29:12,050 --> 00:29:15,850
Таким образом, это предоставляет мне, как вы видите здесь ниже,

401
00:29:15,850 --> 00:29:20,395
что предоставляет мне такое же значение поля Firestore.

402
00:29:20,395 --> 00:29:25,260
Таким образом, этот вызов timestamp сервера значений полей firestorm

403
00:29:25,260 --> 00:29:28,390
вернет текущую временную метку для

404
00:29:28,390 --> 00:29:32,605
меня, и это информация, которую я собираюсь хранить в «CreateDat».

405
00:29:32,605 --> 00:29:35,255
Теперь, когда я вставил все документы здесь,

406
00:29:35,255 --> 00:29:40,435
вы увидели, что я вручную создал это поле «CreateDat» для каждого из документов.

407
00:29:40,435 --> 00:29:44,110
Теперь это способ сделать то же самое из

408
00:29:44,110 --> 00:29:47,895
нашего углового кода на

409
00:29:47,895 --> 00:29:53,040
стороне клиента и то же самое для поля «UpdateDat», которое вы увидите здесь.

410
00:29:53,040 --> 00:29:55,270
Итак, когда вы публикуете новый комментарий,

411
00:29:55,270 --> 00:30:00,330
вы видите, что именно так вы добавите новый комментарий на этот сервер.

412
00:30:00,330 --> 00:30:03,630
Теперь это возвращает обещание, и вот информация,

413
00:30:03,630 --> 00:30:07,410
которую я использую здесь, чтобы построить это обещание здесь.

414
00:30:07,410 --> 00:30:10,930
Затем этот другой метод здесь говорит «getComments»,

415
00:30:10,930 --> 00:30:16,930
этот «getComments, как вы можете видеть, он получает доступ к блюдам коллекции AFS,

416
00:30:16,930 --> 00:30:22,420
doc DishID, а затем комментарии коллекции и уведомление о том, что здесь

417
00:30:22,420 --> 00:30:26,580
я не собираюсь требовать каждого идентификатора комментариев,

418
00:30:26,580 --> 00:30:31,220
который я не буду использовать в моем Angular петиция в любом случае,

419
00:30:31,220 --> 00:30:33,230
поэтому вместо использования изменений моментального снимка

420
00:30:33,230 --> 00:30:36,285
я просто использую изменения значения, и это вернет

421
00:30:36,285 --> 00:30:42,170
все документы в этой коллекции комментариев для этого конкретного документа

422
00:30:42,170 --> 00:30:47,455
DishID из коллекции посуды здесь, и это будет возвращено,

423
00:30:47,455 --> 00:30:53,320
и эти комментарии, которые я буду отображать в мой компонент dashdetail.

424
00:30:53,320 --> 00:30:58,210
Теперь, в Mongos, вы видели, что тот факт, что я включил UserID, означает,

425
00:30:58,210 --> 00:31:02,920
что я мог бы сделать копуляцию этой информации сейчас с Firebase,

426
00:31:02,920 --> 00:31:05,740
нет способа заполнить общую информацию здесь,

427
00:31:05,740 --> 00:31:10,870
поэтому я явно иду, а затем заполняю комментарии в

428
00:31:11,210 --> 00:31:15,250
моей disdetail для получения всех комментариев об

429
00:31:15,250 --> 00:31:20,000
этом конкретном блюде, когда я отображаю их в компоненте dishdetail.

430
00:31:20,000 --> 00:31:22,830
Итак, вы видите, что мне пришлось

431
00:31:22,830 --> 00:31:26,480
немного настроить угловой код, чтобы справиться с тем фактом, что

432
00:31:26,480 --> 00:31:29,765
Firebase не поддерживает определенные вещи, которые mongos поддерживает,

433
00:31:29,765 --> 00:31:33,605
по крайней мере, в тот момент, когда бета-версия Cloud Firestore не поддерживает эти вещи,

434
00:31:33,605 --> 00:31:38,420
и поэтому мне пришлось работать над тем, что Firebase позволяет мне

435
00:31:38,420 --> 00:31:45,365
хранить и извлекать с сайта сервера Firebase.

436
00:31:45,365 --> 00:31:51,640
Теперь нам также интересно побывать здесь в сервисе Auth.

437
00:31:51,640 --> 00:31:54,060
Служба Auth здесь снова,

438
00:31:54,060 --> 00:31:59,875
обратите внимание, что в службе Auth здесь я импортирую этот AngularFireAuth из

439
00:31:59,875 --> 00:32:06,435
AngularFire в подмодуль npm здесь.

440
00:32:06,435 --> 00:32:11,005
Итак, здесь вы можете видеть, что я импортирую AngularFireAuth, и это

441
00:32:11,005 --> 00:32:15,970
дает мне доступ к аспекту аутентификации Firebase.

442
00:32:15,970 --> 00:32:21,690
Теперь давайте посмотрим, как аутентификация Firebase на самом деле работает из нашего углового приложения.

443
00:32:21,690 --> 00:32:26,300
Теперь мы начнем это с рассмотрения того, как логин реализован.

444
00:32:26,300 --> 00:32:28,775
Итак, здесь я реализую логин,

445
00:32:28,775 --> 00:32:31,420
где я использую электронную почту и пароль.

446
00:32:31,420 --> 00:32:38,090
Итак, эта часть, когда я импортирую AngularFireAuth здесь,

447
00:32:38,090 --> 00:32:44,910
обратите внимание, что конструктор, который я вводит AngularFireAuth в свой конструктор.

448
00:32:44,910 --> 00:32:47,260
Таким образом, это добавит службу AngularFireAuth

449
00:32:47,260 --> 00:32:50,240
в мой конструктор, и это даст мне доступ к

450
00:32:50,240 --> 00:32:55,975
проверке подлинности Firebase на сайте сервера, чтобы я мог аутентифицировать пользователей.

451
00:32:55,975 --> 00:33:01,555
Итак, если я хочу аутентифицировать пользователя, который входит в систему с помощью электронной почты и пароля.

452
00:33:01,555 --> 00:33:04,490
Эта функция входа - это та, которая будет вызываться,

453
00:33:04,490 --> 00:33:07,300
когда я введу свой адрес электронной почты и пароль в

454
00:33:07,300 --> 00:33:10,110
диалоговом окне входа, который я всплываю, а затем нажимаю

455
00:33:10,110 --> 00:33:13,735
на кнопку отправки или кнопку

456
00:33:13,735 --> 00:33:16,120
входа здесь, эта функция входа будет вызываться и

457
00:33:16,120 --> 00:33:20,845
информация пользователя, но я получаю из здесь передается компонент входа.

458
00:33:20,845 --> 00:33:22,985
Поэтому, когда он приходит сюда,

459
00:33:22,985 --> 00:33:29,410
я собираюсь использовать этот aAuth, как вы видите, я только что ввел его в конструктор,

460
00:33:29,410 --> 00:33:33,995
и это поставляет этот объект Auth здесь,

461
00:33:33,995 --> 00:33:38,715
который предоставляет этот метод под названием «вход с электронной почтой и паролем».

462
00:33:38,715 --> 00:33:43,530
Таким образом, этот вход с помощью электронной почты и пароля принимает два параметра здесь, как вы

463
00:33:43,530 --> 00:33:49,495
ожидаете имя пользователя или адрес электронной почты и пароль здесь.

464
00:33:49,495 --> 00:33:53,310
Таким образом, эти две части информации я предоставляю

465
00:33:53,310 --> 00:33:57,290
его в качестве двух параметров для этого входа с электронной почтой и паролем.

466
00:33:57,290 --> 00:33:59,965
Итак, когда вы нажмете на это, вы увидите, что он

467
00:33:59,965 --> 00:34:03,790
говорит, что первый должен быть электронной почтой, а второй должен быть паролем.

468
00:34:03,790 --> 00:34:05,455
Теперь, как я его установил,

469
00:34:05,455 --> 00:34:09,590
этот объект пользователя, который входит, содержит электронную почту в

470
00:34:09,590 --> 00:34:16,735
user.username здесь и пароль в свойстве password объекта пользователя.

471
00:34:16,735 --> 00:34:18,925
Итак, когда это

472
00:34:18,925 --> 00:34:24,670
будет получено, тогда я опубликую эту информацию, а затем, когда это будет успешно завершено,

473
00:34:24,670 --> 00:34:27,430
это означает, что пользователь вошел в систему правильно,

474
00:34:27,430 --> 00:34:29,075
если есть ошибка,

475
00:34:29,075 --> 00:34:31,510
то вы поймаете ошибку здесь прямо сейчас, я

476
00:34:31,510 --> 00:34:33,960
не делаю ничего конкретно с ошибкой, которую вы можете

477
00:34:33,960 --> 00:34:38,820
хотите распечатать это сообщение об ошибке, чтобы указать, что пользователь не может войти в систему и так далее.

478
00:34:38,820 --> 00:34:42,070
Итак, я не реализовал эту часть сделки здесь,

479
00:34:42,070 --> 00:34:45,390
я просто оставляю ее там, если вы хотите, чтобы консоль регистрировала

480
00:34:45,390 --> 00:34:48,740
эту информацию, вы можете сделать это при возникновении ошибок.

481
00:34:48,740 --> 00:34:51,495
Теперь для выхода, в Firebase.

482
00:34:51,495 --> 00:34:56,610
Опять же мы берем помощь AAuth, который мы ввели и Auth на него,

483
00:34:56,610 --> 00:34:58,975
и это предоставляет этот метод под названием «выйти»,

484
00:34:58,975 --> 00:35:01,815
который при вызове выведет текущего зарегистрированного

485
00:35:01,815 --> 00:35:05,610
пользователя, и поэтому это один из способов обработки этого.

486
00:35:05,610 --> 00:35:09,795
Теперь вам должно быть интересно, как я обрабатываю часть входа в Google.

487
00:35:09,795 --> 00:35:17,980
Теперь это также обрабатывается с помощью AAuth, поэтому модуль AngularFire2, который я использую,

488
00:35:17,980 --> 00:35:22,780
предоставляет эту информацию для этих методов для нас через

489
00:35:22,780 --> 00:35:28,880
модуль Firebase, который также используется в AngularFire2,

490
00:35:28,880 --> 00:35:33,105
и поэтому этот метод поставляется под названием sign-in с pop и когда

491
00:35:33,105 --> 00:35:37,280
мы делаем вход с pop- здесь обратите внимание, что я указываю здесь.

492
00:35:37,280 --> 00:35:42,650
Итак, я говорю «новый FireBase.auth.googleAuthProvider».

493
00:35:42,650 --> 00:35:48,200
Теперь вы также можете сделать FireBase.auth.FacebookAuthProvider и другие.

494
00:35:48,200 --> 00:35:52,170
Таким образом, как вы видели из предыдущего упражнения,

495
00:35:52,170 --> 00:35:58,835
Firebase позволяет вам выполнять сторонний вход с помощью Google,

496
00:35:58,835 --> 00:36:01,520
Facebook, GitHub и Twitter.

497
00:36:01,520 --> 00:36:04,440
Таким образом, вы можете настроить их соответствующим образом,

498
00:36:04,440 --> 00:36:07,260
так как я включил только авторизацию Google.

499
00:36:07,260 --> 00:36:10,470
Так вот как я настрою его на использование

500
00:36:10,470 --> 00:36:16,160
моей авторизации Google здесь, и эта единственная строка кода, которую я заключил здесь,

501
00:36:16,160 --> 00:36:23,650
является той, которая вызывает всплывающее окно браузера, который предлагает мне разрешить

502
00:36:23,650 --> 00:36:31,580
моему Firebase использовать авторизацию Google с помощью моего аккаунта Google здесь.

503
00:36:31,580 --> 00:36:34,210
Так что это вторая часть, которую я установил здесь.

504
00:36:34,210 --> 00:36:38,929
Поэтому обратите внимание, что сервис Auth значительно

505
00:36:38,929 --> 00:36:44,170
упростился по сравнению с тем, что мы сделали с предыдущей версией этого приложения.

506
00:36:44,170 --> 00:36:49,755
Таким образом, вы можете сравнить две версии, чтобы увидеть, как это отличается от другой.

507
00:36:49,755 --> 00:36:54,410
Теперь, не только то, что этот aAuth, который мы ввели здесь,

508
00:36:54,410 --> 00:36:57,365
часть AngularFireAuth, которую мы ввели здесь,

509
00:36:57,365 --> 00:37:01,800
также обеспечивает этот наблюдаемый под названием «AuthState».

510
00:37:01,800 --> 00:37:08,045
Этот authState наблюдаемый, может быть подписан, и этот «authState» наблюдаемый,

511
00:37:08,045 --> 00:37:10,130
как вы видите здесь,

512
00:37:10,130 --> 00:37:15,880
который я объявил здесь как наблюдаемый FireBase.User.

513
00:37:15,880 --> 00:37:21,400
Так что это информация, которая применяется здесь, а также мы можем установить

514
00:37:21,400 --> 00:37:27,465
другую переменную здесь, называемую текущим пользователем, который имеет тип пользователя Firebase здесь.

515
00:37:27,465 --> 00:37:31,610
Таким образом, этот afAuthState является наблюдаемым, на который

516
00:37:31,610 --> 00:37:35,570
я могу подписаться, и всякий раз, когда этот

517
00:37:35,570 --> 00:37:38,935
authState изменяется, AuthState отслеживает состояние аутентификации

518
00:37:38,935 --> 00:37:42,780
пользователя, вошел ли пользователь в систему или вышел из системы, и если пользователь вошел в систему,

519
00:37:42,780 --> 00:37:47,930
тогда это будет подписаться, вернет мне информацию о пользователе и из

520
00:37:47,930 --> 00:37:53,475
информации о пользователе мы можем получить много информации, включая отображаемое имя

521
00:37:53,475 --> 00:37:58,475
, адрес электронной почты, идентификатор профиля, а затем

522
00:37:58,475 --> 00:38:04,535
изображение аватара для пользователя, если он был настроен для конкретных учетных записей.

523
00:38:04,535 --> 00:38:07,555
Все это будет предоставлено нам автоматически пользователем.

524
00:38:07,555 --> 00:38:10,660
Таким образом, когда вы нажимаете на «пользователь», а затем точка,

525
00:38:10,660 --> 00:38:14,445
вы увидите, что он предоставляет всю эту информацию для нас.

526
00:38:14,445 --> 00:38:16,870
Таким образом, это отображаемое имя электронной почты,

527
00:38:16,870 --> 00:38:19,835
независимо от того, проверено ли письмо или нет, и так далее.

528
00:38:19,835 --> 00:38:22,855
Так что некоторые вещи, которые представляют особый интерес для нас.

529
00:38:22,855 --> 00:38:29,325
Фото URL, который может быть использован для получения информации аватара для пользователя,

530
00:38:29,325 --> 00:38:32,430
идентификатор провайдера, который указывает, кто

531
00:38:32,430 --> 00:38:35,755
предоставляет эту информацию для вас, это будет либо идентификатор Facebook,

532
00:38:35,755 --> 00:38:43,415
Google ID и GitHub ID и так далее, и дополнительная информация даже токен обновления.

533
00:38:43,415 --> 00:38:46,390
Таким образом, вы видите, что куча информации

534
00:38:46,390 --> 00:38:49,840
предоставляется вам через пользовательский объект, который

535
00:38:49,840 --> 00:38:53,285
возвращается этим Authstate, когда вы подписываетесь на него,

536
00:38:53,285 --> 00:38:57,400
а также позвольте мне обратить ваше внимание на UID идентификатора пользователя,

537
00:38:57,400 --> 00:39:01,830
и это то, что можно использовать для индексации пользователя в нашем приложении.

538
00:39:01,830 --> 00:39:05,950
Таким образом, это служба аутентификации, как я

539
00:39:05,950 --> 00:39:10,325
установил ее для использования аутентификации Firebase в этом приложении.

540
00:39:10,325 --> 00:39:14,730
Итак, два изменения, которые я отразил вам, чтобы показать,

541
00:39:14,730 --> 00:39:19,180
как мои службы модифицируются для использования Firebase.

542
00:39:19,180 --> 00:39:23,605
Большая часть обновлений, которые я сделал для моего приложения Angular,

543
00:39:23,605 --> 00:39:28,115
находится в службах, чтобы использовать установленную Firebase.

544
00:39:28,115 --> 00:39:31,900
Таким образом, из-за ребенка, структурированного углового приложения,

545
00:39:31,900 --> 00:39:34,390
компоненты были просто в зависимости от услуг, а

546
00:39:34,390 --> 00:39:37,330
услуги были те, которые мы разговариваем с бэк-энд.

547
00:39:37,330 --> 00:39:39,660
Таким образом, большинство обновлений, которые я сделал для

548
00:39:39,660 --> 00:39:43,040
моего углового приложения, включают просто обновление этих служб, чтобы

549
00:39:43,040 --> 00:39:50,660
использовать бэкэнд Firebase Google в качестве службы с двумя модулями npm,

550
00:39:50,660 --> 00:39:53,815
Firebase и AngularFireAuth здесь.

551
00:39:53,815 --> 00:39:58,690
Итак, вы увидите, что большая часть обновлений ограничена

552
00:39:58,690 --> 00:40:04,285
всеми этими службами, которые у меня есть в папке служб моего углового приложения.

553
00:40:04,285 --> 00:40:06,710
Конечно, мне нужно было сделать немного

554
00:40:06,710 --> 00:40:09,615
минимальных корректировок в компонент dishdetail

555
00:40:09,615 --> 00:40:15,430
и компонент заголовка, чтобы заставить его работать с Firebase.

556
00:40:15,430 --> 00:40:19,485
Вы можете быстро посетить headercomponent.ts,

557
00:40:19,485 --> 00:40:25,760
headercomponent.html и dishdetailcomponent.tsfile, чтобы увидеть, как

558
00:40:25,760 --> 00:40:29,210
изменился код между предыдущей версией

559
00:40:29,210 --> 00:40:32,070
и текущей версией приложения Angular,

560
00:40:32,070 --> 00:40:36,360
предыдущей версией, я имею в виду версию, которую мы использовали для

561
00:40:36,360 --> 00:40:39,490
общаясь с нашим

562
00:40:39,490 --> 00:40:43,230
сервером X плюс плюс Mongo DB, который мы использовали в предыдущем упражнении.

563
00:40:43,230 --> 00:40:48,265
Еще одно место, где вы увидите, как я делаю изменения,

564
00:40:48,265 --> 00:40:51,640
интересно, в любимом сервисе.

565
00:40:51,640 --> 00:40:52,930
В любимом сервисе,

566
00:40:52,930 --> 00:40:55,280
как я хранил избранное пользователя,

567
00:40:55,280 --> 00:40:58,410
заключается в том, что избранное - это коллекция на

568
00:40:58,410 --> 00:41:02,015
моем сайте сервера, а сам фаворит содержит документы.

569
00:41:02,015 --> 00:41:06,550
Каждый документ содержит идентификатор пользователя и идентификатор блюда.

570
00:41:06,550 --> 00:41:09,210
Таким образом, конкретный пользователь может иметь

571
00:41:09,210 --> 00:41:13,335
несколько документов, каждый из которых хранит идентификатор пользователя и идентификатор блюда.

572
00:41:13,335 --> 00:41:20,035
Таким образом, коллекция из них вместе определит все избранное для конкретного пользователя.

573
00:41:20,035 --> 00:41:25,865
Я обнаружил, что это лучший способ организации этих данных в Firebase.

574
00:41:25,865 --> 00:41:29,195
В нашем MongoDB plus mongos

575
00:41:29,195 --> 00:41:34,230
вы видели, что я вложил в массив идентификаторов посуды в

576
00:41:34,230 --> 00:41:40,575
документ избранного, а затем определил любимую схему таким образом.

577
00:41:40,575 --> 00:41:43,010
Здесь я использую

578
00:41:43,010 --> 00:41:47,395
один отдельный документ для отслеживания каждого из избранного для каждого из пользователей.

579
00:41:47,395 --> 00:41:50,295
Теперь, поскольку Firebase поддерживает запросы, поэтому

580
00:41:50,295 --> 00:41:55,545
я могу запросить свой Firebase и извлечь все документы, имеющие одинаковые идентификаторы пользователей,

581
00:41:55,545 --> 00:41:58,585
которые соответствуют пользователю, который в настоящее время вошел в систему, а затем

582
00:41:58,585 --> 00:42:02,405
извлечь соответствующие идентификаторы посуды из избранного.

583
00:42:02,405 --> 00:42:05,250
Затем я пойду, а затем запрошу мой сервер

584
00:42:05,250 --> 00:42:08,475
и получу информацию о блюде для каждого из этих блюд.

585
00:42:08,475 --> 00:42:13,325
Таким образом, он включает в себя несколько поездок на сервер, чтобы получить

586
00:42:13,325 --> 00:42:18,680
всю информацию о моих любимых блюдах, прежде чем я смогу отобразить свой список избранных.

587
00:42:18,680 --> 00:42:24,180
Но это лучший способ, которым я мог бы заставить Firebase работать с моим приложением Angular.

588
00:42:24,180 --> 00:42:26,945
Возможно, в будущем

589
00:42:26,945 --> 00:42:30,740
Firebase Cloud Firestone может расширить, чтобы

590
00:42:30,740 --> 00:42:34,475
позволить что-то вроде заполнения, что мы сделали с монго.

591
00:42:34,475 --> 00:42:38,570
В этом случае я буду обновлять код, чтобы использовать этот способ

592
00:42:38,570 --> 00:42:42,705
получения всей информации о блюде автоматически.

593
00:42:42,705 --> 00:42:48,420
Таким образом, бремя создания этого составного документа будет перенесено на сайт сервера.

594
00:42:48,420 --> 00:42:51,740
Сейчас мой клиент делает большую часть работы здесь.

595
00:42:51,740 --> 00:42:53,795
Теперь, когда вы войдете сюда,

596
00:42:53,795 --> 00:42:56,400
вы увидите, что в методе getFavorites

597
00:42:56,400 --> 00:42:59,495
вы увидите, как я обращаюсь к моим избранным здесь.

598
00:42:59,495 --> 00:43:02,835
Поэтому, когда я делаю «Getfavorites», я запрашиваю

599
00:43:02,835 --> 00:43:06,220
эту коллекцию избранного, но

600
00:43:06,220 --> 00:43:12,545
замечаю, что здесь я говорю «ref where - это идентификатор пользователя».

601
00:43:12,545 --> 00:43:15,335
Этот идентификатор пользователя, который я получаю здесь.

602
00:43:15,335 --> 00:43:18,320
Итак, в конструкторе моего любимого сервера

603
00:43:18,320 --> 00:43:22,855
я подписываюсь на эту службу Auth в состоянии Get Auth в службе Auth.

604
00:43:22,855 --> 00:43:25,075
Итак, в службе Auth, если вы войдете,

605
00:43:25,075 --> 00:43:28,615
вы увидите этот метод под названием Get Auth state здесь.

606
00:43:28,615 --> 00:43:33,175
Состояние Get Auth возвращает this.AuthState,

607
00:43:33,175 --> 00:43:35,575
который я определил прямо там.

608
00:43:35,575 --> 00:43:39,760
Итак, это будет наблюдаемым, как вы видите, я объявляю здесь.

609
00:43:39,760 --> 00:43:41,800
Итак, это наблюдаемый тот, который я собираюсь

610
00:43:41,800 --> 00:43:46,755
использовать в моем любимом сервисе, а затем подписаться на это.

611
00:43:46,755 --> 00:43:53,720
Таким образом, в любое время изменения информации пользователя это будет автоматически отражаться здесь.

612
00:43:53,720 --> 00:43:59,180
Итак, вы видели, что даже в предыдущем приложении я использовал наблюдаемый,

613
00:43:59,180 --> 00:44:04,525
чтобы отразить пользовательскую информацию в моем компоненте заголовка.

614
00:44:04,525 --> 00:44:06,030
Подобный подход,

615
00:44:06,030 --> 00:44:08,600
который я использую в компоненте «Избранное» здесь,

616
00:44:08,600 --> 00:44:13,055
чтобы получить идентификатор пользователя для текущего зарегистрированного пользователя.

617
00:44:13,055 --> 00:44:16,385
Поэтому, когда я запрашиваю коллекцию My Favorites,

618
00:44:16,385 --> 00:44:22,825
я буду запрашивать и извлекать только те документы, в которых пользователь соответствует этому.

619
00:44:22,825 --> 00:44:26,220
Тогда я использую только изменения значений здесь.

620
00:44:26,220 --> 00:44:29,210
Итак, я извлекаю только все документы,

621
00:44:29,210 --> 00:44:34,650
что меня не волнует идентификатор самого документа избранного в данный момент.

622
00:44:34,650 --> 00:44:37,970
Итак, я просто извлекаю их все и использую их.

623
00:44:37,970 --> 00:44:40,690
Если пользователь не вошел в систему, и, как вы можете видеть,

624
00:44:40,690 --> 00:44:43,620
я бросаю ошибку здесь с наблюдаемым высказыванием:

625
00:44:43,620 --> 00:44:50,735
«пользователь не вошел в систему», это то, что отображается в моей любимой речи там.

626
00:44:50,735 --> 00:44:53,960
Теперь IsFavorites также обновляется здесь,

627
00:44:53,960 --> 00:44:57,685
но в isFavorites я делаю, я иду в БД.

628
00:44:57,685 --> 00:45:02,795
Теперь здесь я получу доступ к базе данных, сказав:

629
00:45:02,795 --> 00:45:06,135
«DB равен firebase.firestore».

630
00:45:06,135 --> 00:45:09,610
Напомним, что я импортирую Firebase здесь,

631
00:45:09,610 --> 00:45:12,270
импортирую звезду как Firebase здесь.

632
00:45:12,270 --> 00:45:17,970
Сам Angular Firestore не предоставляет мне метод

633
00:45:17,970 --> 00:45:23,970
выполнения нескольких сложных запросов здесь.

634
00:45:23,970 --> 00:45:29,495
Угловой пожарный магазин или Угловой огонь не дает мне сделать это.

635
00:45:29,495 --> 00:45:33,390
Поэтому я должен прибегнуть к использованию Firebase Firestore.

636
00:45:33,390 --> 00:45:35,840
Итак, когда я говорю Firebase Firestore,

637
00:45:35,840 --> 00:45:42,310
это дает мне ссылку на базу данных Firestore, а затем я могу войти в эту базу данных,

638
00:45:42,310 --> 00:45:48,780
а затем сказать «избранное коллекции БД», а затем я могу делать несколько запросов здесь.

639
00:45:48,780 --> 00:45:55,470
Итак, я говорю, .where пользователь this.wheredish - это идентификатор блюда.

640
00:45:55,470 --> 00:45:59,380
Итак, если я хочу получить конкретный фаворит.

641
00:45:59,380 --> 00:46:03,640
Чтобы проверить, является ли конкретное блюдо фаворитом пользователя, я получаю

642
00:46:03,640 --> 00:46:08,285
этот конкретный документ, где пользователь и блюдо соответствуют этим двум,

643
00:46:08,285 --> 00:46:12,110
если они не совпадают, то он вернется с пустым.

644
00:46:12,110 --> 00:46:16,610
Итак, я извлекаю, а затем возвращаю это значение здесь.

645
00:46:16,610 --> 00:46:18,900
Теперь, тогда я публикую избранное,

646
00:46:18,900 --> 00:46:25,770
вы видите, как я это делаю, я говорю, что это избранное коллекции AFS, и я скажу «добавить».

647
00:46:25,770 --> 00:46:29,260
Посмотрите на документ, который я храню в своем избранном.

648
00:46:29,260 --> 00:46:32,130
Сам документ содержит идентификатор пользователя и идентификатор блюда.

649
00:46:32,130 --> 00:46:36,030
Таким образом, эти две части информации заключены здесь, и если

650
00:46:36,030 --> 00:46:41,295
нет, то он отклонит обещание без входа в систему пользователя.

651
00:46:41,295 --> 00:46:44,915
Аналогично, для любимого удаления, который я реализовал здесь.

652
00:46:44,915 --> 00:46:48,735
Проведите некоторое время снова, пройдя этот код, чтобы понять, как я

653
00:46:48,735 --> 00:46:53,375
использовал Firebase и Angular fire для модулей npm,

654
00:46:53,375 --> 00:47:02,170
чтобы общаться с моим сервером Firebase, который я установил в предыдущем упражнении.

655
00:47:02,170 --> 00:47:05,880
С этим я дал вам краткий обзор того,

656
00:47:05,880 --> 00:47:10,280
как вы можете настроить свое угловое приложение для взаимодействия с сервером

657
00:47:10,280 --> 00:47:13,980
Firebase в качестве службы, а затем иметь возможность

658
00:47:13,980 --> 00:47:19,970
поддерживать различные операции, которые у вас есть в вашем угловом приложении.

659
00:47:19,970 --> 00:47:21,905
Как я уже продемонстрировал ранее,

660
00:47:21,905 --> 00:47:24,150
это угловое приложение выглядит точно так же, как

661
00:47:24,150 --> 00:47:26,690
предыдущая версия приложения Angular, где мы

662
00:47:26,690 --> 00:47:31,915
использовали нашу собственную версию нашего сервера Express MongoDB.

663
00:47:31,915 --> 00:47:38,510
Теперь, с этим я завершу это конкретное упражнение, где я проиллюстрировал в

664
00:47:38,510 --> 00:47:42,020
этом уроке о бэкенде как службе, а также продемонстрировал

665
00:47:42,020 --> 00:47:46,630
Firebase как пример бэкенда как сервиса.