В предыдущем упражнении
мы уже настроили наш сервер Firebase как
сервис с новым проектом, а также создали много
данных в нашей базе данных, а затем настроили наше хранилище и
настроили наш Firebase Server, чтобы действовать в качестве бэкэнда для нашего углового приложения.
В этом упражнении мы рассмотрим модифицированную версию
нашего углового приложения, которое использует бэкэнд Firebase
в качестве сервиса для получения данных, а
также хранения информации для пользователей на серверах.
Кроме того, мы воспользуемся
поддержкой аутентификации, которую Firebase предоставляет для аутентификации пользователей
как с использованием электронной почты и пароля, так и с использованием учетной записи Google.
Чтобы начать работу с этим упражнением,
перейдите в удобное место на вашем компьютере, а
затем клонируйте данный репозиторий Git, где я
предоставил вам версию Angular Firebase нашего приложения Angular.
Итак, введите git clone
https://github.com/jmuppala/confusion-Angular6-Firebase.git,
а затем клонируйте
репозиторий Git, и как только репозиторий Git клонируется на ваш компьютер,
а затем перейдите в путаницу Angular Firebase,
которая будет создана в этот момент, а
затем вы обратите внимание, что там уже установлена куча файлов.
Давайте продолжим и сделаем установку npm, чтобы установить
все модули узла, от которых зависит это угловое приложение.
Эта версия также установит
два дополнительных модуля узла под названием Firebase, а затем Angular fire два.
Я объясню немного больше об этих двух узловых модулях позже в этом упражнении.
После завершения установки проекта
откройте проект в редакторе, а затем в проекте,
перейдите в папку исходных сред, а
затем откройте файл environment.ts, а в файле environment.ts
вы увидите набор конфигурации Firebase, который вам
нужно настроить с помощью собственная конфигурация сервера Firebase.
Как мы уже видели в предыдущем упражнении,
мы можем получить всю эту информацию, когда мы нажимаем на
эту кнопку здесь под названием «Добавить Firebase в ваше веб-приложение», а затем
скопировать эту информацию, а затем вставить эту информацию
в ваш файл environment.ts, чтобы
заменить их на ваш конкретный Конфигурация серверов Firebase
для всей этой части информации, и как только это будет завершено,
вы можете запустить свое угловое приложение, набрав «ng serve» в командной строке.
Как только ваше угловое приложение скомпилировано с помощью «ng serve»,
затем перейдите в браузер, а затем введите localhost: 4200 для загрузки в
ваше угловое приложение, и вы заметите, что ваше угловое приложение компилируется,
а затем загружается в ваш браузер, как и прежде.
Итак, как только ваше приложение Angular работает и работает,
вы заметите, что эта версия приложения Angular будет использовать
сервер Firebase, который вы установили в
предыдущем упражнении, и поэтому здесь вы увидите страницу «Главная», страницу
«О», как мы видим здесь, и
« Меню» и «Контакты», и, очевидно, так как мы не вошли в систему,
страница «Мои избранные» отобразит сообщение об ошибке, говорящее, что ни один пользователь не вошел в систему.
Итак, давайте войдем сами.
Позвольте мне вернуться на «Домашнюю страницу», а затем мы сами войдем.
Таким образом, когда вы нажимаете на кнопку входа,
вы увидите типичную форму здесь с электронной почтой и информацией о пароле.
Здесь вы также увидите дополнительную кнопку под названием «Войти с помощью Google».
Поэтому позвольте мне войти с моей учетной записью Google.
Таким образом, когда вы нажимаете на «Войти с Google»,
то он откроет другое окно браузера, где вам будет предложено
авторизоваться на использование вашего аккаунта Google этим сервером Firebase.
Итак, позвольте мне продолжить и авторизовать
это приложение, а затем, как только авторизация
будет завершена, вы увидите, что ваше
приложение на основе Firebase Angular запустится, и в правом углу
вы сразу увидите, что ваше имя
отображается здесь и с «Войти» теперь превратилась в кнопку «Выход».
Таким образом, на данный момент
вы должны иметь возможность видеть ваши избранные,
и в этом случае, так как у нас нет избранного,
так что в данный момент он будет пустым.
Позвольте мне вернуться в «Меню», а затем добавить пару пунктов в «Мои избранные».
Итак, я добавлю это блюдо в избранное.
Итак, когда я нажимаю на это блюдо,
вы сразу увидите значок превращается в наполненное сердце и позвольте мне также выбрать
еще одно блюдо и добавить его в «Мои
избранные», а затем теперь, когда вы перейдете к «Мои избранные»,
вы увидите пару блюд, добавленных в
ваши избранные, как вы ожидать и снова,
вы можете удалить блюда, нажав на кнопку «Удалить» переключатель здесь, а затем нажмите
на крестик, чтобы удалить элемент из списка избранного, как показано здесь.
Теперь, мы также можем добавить, как вы поняли,
мы можем пойти на любое блюдо, а затем добавить комментарии к этому блюду.
Итак, позвольте мне добавить комментарий
здесь и в тот момент, когда вы отправляете комментарий,
вы сразу увидите, что ваши комментарии будут отображаться здесь с
именем автора комментария также включены здесь и с датой, как показано здесь.
Таким образом, вы можете видеть, что подача
комментариев пользователем будет поддерживаться для любого конкретного блюда.
Позвольте мне добавить еще один любимый, и поэтому у этого пользователя будет пара избранных.
Позвольте мне «Выйти» этого пользователя.
Вернитесь на «Домашнюю страницу», а затем «Выйти» этого пользователя.
Теперь мы будем авторизоваться с помощью другой учетной записи.
Итак, я хотел бы - я установил
эту учетную запись пароля электронной почты раньше, и поэтому мы будем
входить в систему как этот другой пользователь, и как только другой пользователь вошел в систему,
позвольте мне снова перейти в «Меню» и добавить пару элементов в
избранное для этого конкретного пользователя
и поэтому, когда вы вернетесь к «Мои избранные»,
вы увидите эти элементы в списке для второго пользователя.
Теперь, аналогично этому пользователю,
позвольте мне снова отправить еще один комментарий этого пользователя.
Так
что, и вы
увидите, что комментарии, представленные вторым пользователем, также добавляются в приложение.
Итак, вот как ваше угловое приложение работает
с Firebase в качестве бэкэнда как службы.
Теперь, конечно, вам должно быть интересно,
как мы перепроектировать наше угловое приложение, чтобы использовать Firebase вместо
использования сервера Standard Express плюс MongoDB, который мы построили ранее?
Для того, чтобы настроить приложение Angular для связи с Firebase Server,
есть два модуля узлов, которые вам нужно установить в
ваше угловое приложение, и один из них является модулем Firebase.
Модуль Firebase, как вы видите здесь,
предоставляет инструменты и инфраструктуру, которая позволяет вам взаимодействовать
с сервером Firebase и установить это в ваше приложение,
вы вводите, npm install минус save Firebase.
Теперь вместе с этим
есть еще один модуль под названием Angular Fire 2.
Итак, Угловой огонь 2.
Кроме того, снова я предоставил ссылки на эти два модуля в дополнительных ресурсах.
AngularFire 2 - официальная библиотека
для поддержки Firebase и Angular, и, как вы можете видеть,
это наблюдаемая поддержка для угловых файлов.
Таким образом, это работает, чтобы добавить к модулю Firebase npm, а затем
дает вам наблюдаемый интерфейс, который мы можем использовать в вашем угловом приложении.
Итак, мы будем использовать AngularFire 2.
Таким образом, чтобы использовать AngularFire2,
вам нужно установить как Firebase, так и AngularFire 2.
Итак, одним выстрелом
установите оба этих в свое угловое приложение.
Теперь версия приложения Angular, которую я предоставил вам, автоматически
устанавливает оба эти, как вы увидите, когда вы изучаете файл package.json.
Теперь, как использовать эти два,
я проиллюстрирую, что быстро запустив вас через
модифицированный код для служб и пару компонентов, где мы
используем Firebase и AngularFire2
для изменения углового приложения, которое мы разработали
ранее, чтобы использовать Сервер Firebase в качестве бэкэнда в качестве сервиса.
Чтобы понять больше о том, как мы используем
Firebase и AngularFire 2 в нашем угловом приложении,
наша первая остановка находится в файле package.json.
Таким образом, в файле package.json
вы заметите, что я установил AngularFire2 здесь, а также мы установили
Firebase для использования в этой версии углового приложения, которое я поставляю для вас.
Итак, обратите внимание, что эти два будут автоматически установлены, когда вы вводите «npm
install» после клонирования этого репозитория git, который я предоставил вам.
Если вы начинали с нового приложения Angular,
вы должны установить как AngularFire 2, так и Firebase,
чтобы использовать использование Firebase в качестве бэкэнда в качестве сервиса.
Теперь, установив эти два,
давайте узнаем, как мы используем их в наших сервисах.
Таким образом, лучший способ узнать, как использовать оба из
них - посетить некоторые службы, которые мы
настроили в нашем приложении, и понять, как мы
используем использование AngularFire2 и Firebase.
Итак, мы начнем с файла dash.service.ts.
Итак, если вы перейдете в файл dish.service.ts,
вы заметите, что здесь,
в этой сервисе блюд,
вы увидите, что я импортирую этот AngularFireStore, AngularFireStoreDocument
и AngularFireStoreCollection из AngularFire в Firestore здесь.
Таким образом, это приносит все, что мне нужно из моего модуля AngularFireStore npm,
также вы заметите, что я импортирую все из
FireBase/App в качестве Firebase в мое блюдо здесь.
Итак, как только мы импортировали эти два,
давайте взглянем на то, как мы перенастроим наш сервиз блюд здесь.
Итак, если вы зайдете в сервисную службу,
вы заметите, что я больше не использую HTTP-клиент.
Вместо этого я впрыскиваю AFS, который является AngularFireStore в конструктор здесь.
AngularFireStore - это тот, который дает мне
доступ к бэкенду Firebase в качестве службы.
Теперь также напомним, что мы уже настроили все детали
нашего сервера, а также проект filestore в файле environment.ts ранее.
Таким образом, вы должны были настроить эту информацию уже там
о том, как ваше Angular приложение должно использовать
ваш проект на основе Firestore на
вашем сервере Firestore для доступа к данным, которые вы настроили там.
Таким образом, это даст мне доступ к моему облачному
Firestore в моем проекте Firebase, который я создал.
Теперь AuthService, конечно же, тот же Authservice, который мы использовали раньше,
но он изменился, чтобы использовать угловую поддержку Firebase.
Мы посетим AuthService, чтобы узнать, как он был обновлен.
Теперь AuthService даст нам доступ к
этому методу под названием GetAuthState, который вернется в наблюдаемом.
Это наблюдаемое, когда мы подписываемся на него,
даст нам информацию в качестве пользователя, которая содержит информацию пользователя.
Итак, я получу это, а затем настрою CurrentUser в моем приложении
в качестве пользователя, возвращаемого этим наблюдаемым здесь.
Таким образом, когда мы посещаем AuthService,
мы узнаем, что этот GetAuthState вернет для
нас, и поэтому информация CurrentUser может
быть получена из любого из
других сервисов, потому что мы уже вводим AuthService здесь.
Теперь давайте посмотрим, как здесь реализован метод GetDiss.
Теперь, ранее в методе GetDishes,
мы использовали HTTP-клиент для доступа к серверу по базовому URL+/Dishes.
Теперь в этом случае,
чтобы получить доступ к коллекции на моем сервере Firebase, мы скажем это.afs.
Итак, это то, что AngularFire2 предоставляет нам.
AFS, как вы видите, является AngularFireStore, который мы ввели здесь, и поэтому мы говорим
this.afs.collection, и здесь мы
будем указывать конкретную коллекцию, к которой мы обращаемся здесь.
Напомним, что мы создали блюда, акции
и коллекции лидеров на моем сервере Firebase.
Таким образом, это напрямую дает мне доступ
к моей коллекции блюд здесь и из коллекции блюд,
я могу либо do.ValueChanges, который
вернет всю информацию в бизнес-коллекции для меня,
или я могу сделать. SnapshotChanges, который
вернет дополнительную информацию, включая идентификатор блюд.
Итак, если вместо того, чтобы делать SnapShotChanges,
если я скажу ValueChanges,
он вернет только информацию о блюде, но он не вернет
идентификаторы блюд, но поскольку мне понадобятся идентификаторы моих блюд,
поэтому я использую.snapshotChanges в этом случае.
Итак, когда вызывается.SnapShotChanges,
это вернется, как вы видите наблюдаемый, который
я сопоставляю, и поэтому возвращаемое значение, которое вызывается как действия, и эти действия
, опять же, будут наблюдаемыми, которые я буду отображать каждое действие в
этих действиях, а затем извлекать данные из действия, которое вернулся сюда.
Таким образом, действие - это значение, которое возвращается для каждого из
действий, и это действие содержит полезную нагрузку и содержит внутри этого темного поля.
Теперь это то, что я понял, прочитав
документацию для AngularFire2, и
поэтому, когда мы вызываем эту функцию данных на этом action.payload.doc,
это даст мне данные.
Данные для этого конкретного блюда, которые
получены из моей коллекции блюд на стороне сервера.
Таким образом, каждый документ там будет возвращен здесь, а
затем я получу идентификатор для этого, сказав action.payload.doc.id.
Вот где идентификатор этого будет
переноситься, а затем я присоединю их вместе и
верну это как документ блюдо обратно в мои различные компоненты оттуда,
я буду вызвать этот метод GetDishs.
Итак, как вы помните,
из компонента меню
я вызываю метод GetDiss, чтобы получить
информацию обо всех блюдах в моей коллекции.
Коллекция. Таким образом, каждое из этих блюд, которое возвращается в качестве документа, будет восстановлен в
объект JavaScript с идентификатором, вставленным здесь, а также
данные, которые извлекаются из этого действия payload.doc.doc.data.
Теперь это то, что вы узнаете, прочитав документацию AngularFire2.
Теперь, поскольку я уже сделал эту часть,
я показываю вам точный код, который вы должны
использовать, чтобы извлечь данные, а затем передать
эти данные обратно вашему компоненту, который будет вызывать метод GetDiss здесь.
Таким образом, делая это для каждого из документов там,
этот документ будет восстановлен в
объект блюда, который мы
используем в нашем угловом приложении, и поэтому мы можем даже получить доступ к идентификатору.
Если вы просто сделаете изменения стоимости,
он просто вернет все документы сами, но без идентификаторов документов.
Таким образом, эта дополнительная работа должна быть выполнена в рамках вашего сервиса, чтобы
вернуть информацию правильно,
чтобы MyComponents могли использовать эту информацию.
Аналогично, для метода GetDish,
поэтому обратите внимание, как я обращаюсь к информации для конкретного блюда.
Опять же, мы скажем this.afs, а затем вы заметите, что я
saying.doc, а затем здесь для метода the.doc,
я поставляю блюда косой черты, а затем идентификатор конкретного блюда.
Теперь, причина, по которой я предоставил ID,
идентификатор здесь приходит в качестве параметра для метода GetDish здесь.
Теперь, чтобы этот идентификатор был поставлен,
мне нужно иметь возможность предоставить этот идентификатор в
методе GetDiss, поэтому, когда мое меню будет создано,
каждое блюдо будет иметь свой идентификатор, прикрепленный к нему там.
Этот идентификатор передается здесь, и поэтому я буду получать доступ к документу в этот момент.
Итак, AngularFire2 позволяет вам получить доступ к
определенному документу, который находится внутри коллекции, сказав косаю черту имени коллекции,
а также идентификатор документа или вы можете сказать это.afs.collection блюда, как вы слышали,
коллекции посуды и then.doc, а затем предоставить doc и ID в скобках там.
Итак, это еще один способ обращения к конкретному блюду.
Опять же, я подписываюсь на SnapShotChanges, и это вернет действие, которое затем
снова сопоставляется в том же формате, чтобы
построить объект блюда здесь вместе с идентификатором здесь.
Теперь Firebase сохраняет идентификатор отдельно от
самого документа, и поэтому я должен явно выполнить
эту реконструкцию, чтобы получить
документ блюда таким образом, чтобы использовать MyComponents.
Затем я построил свой собственный сервер с помощью Express и MongoDB,
идентификатор автоматически был там в самом документе, и поэтому было очень
легко получить это и передать его обратно на сторону клиента.
Теперь, для GetFeaturedDish,
напомним, что для GetFeaturedDish,
мы ищем те блюда, в которых функция установлена в true.
Теперь, вот где AngularFire2 позволяет нам
построить запрос и предоставить этот запрос здесь для этой коллекции.
Здесь я говорю this.afs коллекции блюд здесь,
поэтому я все еще использую коллекцию, но затем посмотрите
на второй параметр для этого вызова здесь.
Это говорит о ref, где ссылка ссылается на каждый документ, который находится в этой коллекции.
В этом рефе говорится, что ref, и здесь я могу
использовать этот запрос, который слышит так, что сказы.where.
Таким образом, это означает, что каждый из документов, где признакам,
как вы можете видеть, синтаксис довольно легко следовать здесь, где говорится, где показано.
Теперь обратите внимание, что функция поставляется как строка здесь,
а затем следующий
оператор равен, так что вы можете даже сказать больше, меньше,
больше или равно меньше или равно любой из этих вещей,
но обратите внимание, что это должно быть внутри котировок здесь, а затем вы скажет правду.
Таким образом, везде, где привилегированное свойство документа установлено в true,
извлеките все из них.
Таким образом, этот запрос извлечет только те документы
из коллекции блюд, где функция установлена в true,
а затем вернет только эти документы из этой коллекции здесь,
и оттуда я собираюсь изменения снимков, и это
вернет массив документов, и оттуда я их сопоставлю
в отдельные документы блюдо, а затем, поскольку я
обеспечил, что только один из этих документов будет иметь функцию, установленную в true.
Таким образом, он вернет только один из них, но он вернет его как массив.
Поэтому я создаю это
с квадратной скобкой ноль первого элемента массива,
и действительно он будет содержать только один элемент, потому что только один элемент в моей коллекции
будет соответствовать этому конкретному запросу, который я установил здесь с волной здесь.
Здесь есть другие настройки запросов, вы также можете использовать что-то, называемое порядком.
Таким образом, вы можете заказать коллекцию по определенному свойству
и некоторому другому набору параметров запроса, которые доступны.
Теперь это поддерживается Firebase в облаке Firestore,
и это то, что мы можем использовать с помощью AngularFire2 для разработки
кода в вашем угловом приложении для выполнения запроса с самой стороны клиента.
Таким образом, это собирается вернуть конкретную особенность блюда.
Теперь, снова getDishid будет похож на то, что мы сделали ранее.
Таким образом, никаких модификаций нет.
Теперь, для PostComment снова,
потому что Firebase с облачным Firestore бета,
не имеет понятия населения,
и так далее, что мы видели ранее.
Итак, что я собираюсь сделать для комментариев, это то, что я собираюсь опубликовать эти комментарии как
коллекция, для которой заключена внутри каждого блюда.
Таким образом, каждое блюдо будет иметь свою коллекцию комментариев об этом конкретном блюде.
Когда я отправлю комментарий, я собираюсь использовать DishID,
а затем информацию о комментарии.
Итак, что я делаю здесь, так это то, что я собираюсь сначала
запросить блюда, а затем получить это конкретное блюдо.
Итак, вы можете видеть, что я использую другой способ запроса для конкретного документа.
Итак, здесь я говорю это afs.collection («блюда») .doc diShid.
Таким образом, я могу использовать этот способ доступа к определенному документу, если я хочу.
Другой способ, конечно, вы уже видели с помощью
метода GetDish, где я говорю, что doc fishes slash плюс ID.
Итак, два разных способа обращения к конкретному документу внутри
коллекции здесь, а затем DishID, а затем коллекция и комментарии.
Таким образом, это говорит в
этой коллекции для этого конкретного документа с этим DishID,
есть коллекция, которая включена в
этот документ, и эта коллекция имеет комментарии к имени.
Таким образом, это вложенность коллекции
внутри документа, который находится в другом соединении более высокого уровня.
Таким образом, этот вид вложенности коллекций разрешен
Firebase Cloud Store Beta до 100 уровней глубиной, если вы хотите выбрать.
Итак, внутри этой коллекции,
я собираюсь добавить.
Итак, как вы добавляете документ в коллекцию?
Чтобы добавить документ в коллекцию,
используйте метод добавления в коллекции здесь.
Итак, вы можете видеть, что в комментариях коллекции
я делаю добавление здесь, а затем
это фактический документ, который будет добавлен здесь.
Итак, в самом документе
вы увидите, что у меня есть свойство автора здесь, где я установил текущий идентификатор,
а также я установил имя для автора здесь,
я обслуживаю только первый раз здесь, поэтому здесь я говорю это текущее отображаемое имя пользователя.
Если отображаемое имя истинно, я установлю его на это текущее отображаемое имя пользователя.
Если учетная запись пользователя не имеет отображаемого имени, прикрепленного к ней, я просто буду
использовать эту текущую электронную почту пользователя в качестве свойства первого имени здесь.
Таким образом, этот документ, который содержит комментарий,
автоматически также несет это поле имени,
и это то, что я собираюсь использовать для отображения
информации, когда я отображаю комментарии в моем компоненте DishDetail.
Итак, обратите внимание, что я фактически дублирую информацию здесь в каждом из комментариев.
Но это нормально, поскольку они хранятся как
документы Json на Firebase, это нормально
дублировать некоторую информацию в комментариях здесь.
Но если вы хотите получить более подробную информацию о текущем пользователе,
у вас уже есть ссылка на идентификатор пользователя здесь, поэтому вы можете фактически пойти и получить
документ для конкретного пользователя, а затем
получить дополнительную информацию о пользователе, если вы решите.
Теперь, когда я использовал Mongo DB плюс Mongo,
вы видели, что я просто использую идентификатор текущего пользователя для
автора, а затем я буду использовать заполнение для заполнения этой информации.
Теперь бета-версия Cloud Firestore на данный момент не имеет
никакой концепции этого заполнения, насколько я могу видеть из документации,
возможно, будущая версия может поддерживать способ извлечения
информации из другого документа и
автоматического заполнения ее в текущий документ.
Когда это произойдет, то этот код нужно будет изменить, чтобы воспользоваться этим.
Но сейчас, как я вижу,
бета-версия Firestore не имеет возможности
заполнять информацию из другого документа в текущий документ.
Вот почему я просто реплицирую только ту
информацию, которая мне действительно нужна, когда я отображаю комментарий в
моем компоненте dishdetail здесь, а затем внизу
вы можете видеть, что у меня есть рейтинг и комментарий здесь, а затем также,
обратите внимание, что я создаю
эти два дополнительные поля в моем комментарии здесь называются «createDat» и «updateDat».
Обратите внимание, как я помещаю временную метку для «CreateDat».
Firebase, теперь, что это Firebase, я использую здесь,
эта Firebase - это именно то, что я импортировал здесь, как из приложения Firebase.
Таким образом, это предоставляет мне, как вы видите здесь ниже,
что предоставляет мне такое же значение поля Firestore.
Таким образом, этот вызов timestamp сервера значений полей firestorm
вернет текущую временную метку для
меня, и это информация, которую я собираюсь хранить в «CreateDat».
Теперь, когда я вставил все документы здесь,
вы увидели, что я вручную создал это поле «CreateDat» для каждого из документов.
Теперь это способ сделать то же самое из
нашего углового кода на
стороне клиента и то же самое для поля «UpdateDat», которое вы увидите здесь.
Итак, когда вы публикуете новый комментарий,
вы видите, что именно так вы добавите новый комментарий на этот сервер.
Теперь это возвращает обещание, и вот информация,
которую я использую здесь, чтобы построить это обещание здесь.
Затем этот другой метод здесь говорит «getComments»,
этот «getComments, как вы можете видеть, он получает доступ к блюдам коллекции AFS,
doc DishID, а затем комментарии коллекции и уведомление о том, что здесь
я не собираюсь требовать каждого идентификатора комментариев,
который я не буду использовать в моем Angular петиция в любом случае,
поэтому вместо использования изменений моментального снимка
я просто использую изменения значения, и это вернет
все документы в этой коллекции комментариев для этого конкретного документа
DishID из коллекции посуды здесь, и это будет возвращено,
и эти комментарии, которые я буду отображать в мой компонент dashdetail.
Теперь, в Mongos, вы видели, что тот факт, что я включил UserID, означает,
что я мог бы сделать копуляцию этой информации сейчас с Firebase,
нет способа заполнить общую информацию здесь,
поэтому я явно иду, а затем заполняю комментарии в
моей disdetail для получения всех комментариев об
этом конкретном блюде, когда я отображаю их в компоненте dishdetail.
Итак, вы видите, что мне пришлось
немного настроить угловой код, чтобы справиться с тем фактом, что
Firebase не поддерживает определенные вещи, которые mongos поддерживает,
по крайней мере, в тот момент, когда бета-версия Cloud Firestore не поддерживает эти вещи,
и поэтому мне пришлось работать над тем, что Firebase позволяет мне
хранить и извлекать с сайта сервера Firebase.
Теперь нам также интересно побывать здесь в сервисе Auth.
Служба Auth здесь снова,
обратите внимание, что в службе Auth здесь я импортирую этот AngularFireAuth из
AngularFire в подмодуль npm здесь.
Итак, здесь вы можете видеть, что я импортирую AngularFireAuth, и это
дает мне доступ к аспекту аутентификации Firebase.
Теперь давайте посмотрим, как аутентификация Firebase на самом деле работает из нашего углового приложения.
Теперь мы начнем это с рассмотрения того, как логин реализован.
Итак, здесь я реализую логин,
где я использую электронную почту и пароль.
Итак, эта часть, когда я импортирую AngularFireAuth здесь,
обратите внимание, что конструктор, который я вводит AngularFireAuth в свой конструктор.
Таким образом, это добавит службу AngularFireAuth
в мой конструктор, и это даст мне доступ к
проверке подлинности Firebase на сайте сервера, чтобы я мог аутентифицировать пользователей.
Итак, если я хочу аутентифицировать пользователя, который входит в систему с помощью электронной почты и пароля.
Эта функция входа - это та, которая будет вызываться,
когда я введу свой адрес электронной почты и пароль в
диалоговом окне входа, который я всплываю, а затем нажимаю
на кнопку отправки или кнопку
входа здесь, эта функция входа будет вызываться и
информация пользователя, но я получаю из здесь передается компонент входа.
Поэтому, когда он приходит сюда,
я собираюсь использовать этот aAuth, как вы видите, я только что ввел его в конструктор,
и это поставляет этот объект Auth здесь,
который предоставляет этот метод под названием «вход с электронной почтой и паролем».
Таким образом, этот вход с помощью электронной почты и пароля принимает два параметра здесь, как вы
ожидаете имя пользователя или адрес электронной почты и пароль здесь.
Таким образом, эти две части информации я предоставляю
его в качестве двух параметров для этого входа с электронной почтой и паролем.
Итак, когда вы нажмете на это, вы увидите, что он
говорит, что первый должен быть электронной почтой, а второй должен быть паролем.
Теперь, как я его установил,
этот объект пользователя, который входит, содержит электронную почту в
user.username здесь и пароль в свойстве password объекта пользователя.
Итак, когда это
будет получено, тогда я опубликую эту информацию, а затем, когда это будет успешно завершено,
это означает, что пользователь вошел в систему правильно,
если есть ошибка,
то вы поймаете ошибку здесь прямо сейчас, я
не делаю ничего конкретно с ошибкой, которую вы можете
хотите распечатать это сообщение об ошибке, чтобы указать, что пользователь не может войти в систему и так далее.
Итак, я не реализовал эту часть сделки здесь,
я просто оставляю ее там, если вы хотите, чтобы консоль регистрировала
эту информацию, вы можете сделать это при возникновении ошибок.
Теперь для выхода, в Firebase.
Опять же мы берем помощь AAuth, который мы ввели и Auth на него,
и это предоставляет этот метод под названием «выйти»,
который при вызове выведет текущего зарегистрированного
пользователя, и поэтому это один из способов обработки этого.
Теперь вам должно быть интересно, как я обрабатываю часть входа в Google.
Теперь это также обрабатывается с помощью AAuth, поэтому модуль AngularFire2, который я использую,
предоставляет эту информацию для этих методов для нас через
модуль Firebase, который также используется в AngularFire2,
и поэтому этот метод поставляется под названием sign-in с pop и когда
мы делаем вход с pop- здесь обратите внимание, что я указываю здесь.
Итак, я говорю «новый FireBase.auth.googleAuthProvider».
Теперь вы также можете сделать FireBase.auth.FacebookAuthProvider и другие.
Таким образом, как вы видели из предыдущего упражнения,
Firebase позволяет вам выполнять сторонний вход с помощью Google,
Facebook, GitHub и Twitter.
Таким образом, вы можете настроить их соответствующим образом,
так как я включил только авторизацию Google.
Так вот как я настрою его на использование
моей авторизации Google здесь, и эта единственная строка кода, которую я заключил здесь,
является той, которая вызывает всплывающее окно браузера, который предлагает мне разрешить
моему Firebase использовать авторизацию Google с помощью моего аккаунта Google здесь.
Так что это вторая часть, которую я установил здесь.
Поэтому обратите внимание, что сервис Auth значительно
упростился по сравнению с тем, что мы сделали с предыдущей версией этого приложения.
Таким образом, вы можете сравнить две версии, чтобы увидеть, как это отличается от другой.
Теперь, не только то, что этот aAuth, который мы ввели здесь,
часть AngularFireAuth, которую мы ввели здесь,
также обеспечивает этот наблюдаемый под названием «AuthState».
Этот authState наблюдаемый, может быть подписан, и этот «authState» наблюдаемый,
как вы видите здесь,
который я объявил здесь как наблюдаемый FireBase.User.
Так что это информация, которая применяется здесь, а также мы можем установить
другую переменную здесь, называемую текущим пользователем, который имеет тип пользователя Firebase здесь.
Таким образом, этот afAuthState является наблюдаемым, на который
я могу подписаться, и всякий раз, когда этот
authState изменяется, AuthState отслеживает состояние аутентификации
пользователя, вошел ли пользователь в систему или вышел из системы, и если пользователь вошел в систему,
тогда это будет подписаться, вернет мне информацию о пользователе и из
информации о пользователе мы можем получить много информации, включая отображаемое имя
, адрес электронной почты, идентификатор профиля, а затем
изображение аватара для пользователя, если он был настроен для конкретных учетных записей.
Все это будет предоставлено нам автоматически пользователем.
Таким образом, когда вы нажимаете на «пользователь», а затем точка,
вы увидите, что он предоставляет всю эту информацию для нас.
Таким образом, это отображаемое имя электронной почты,
независимо от того, проверено ли письмо или нет, и так далее.
Так что некоторые вещи, которые представляют особый интерес для нас.
Фото URL, который может быть использован для получения информации аватара для пользователя,
идентификатор провайдера, который указывает, кто
предоставляет эту информацию для вас, это будет либо идентификатор Facebook,
Google ID и GitHub ID и так далее, и дополнительная информация даже токен обновления.
Таким образом, вы видите, что куча информации
предоставляется вам через пользовательский объект, который
возвращается этим Authstate, когда вы подписываетесь на него,
а также позвольте мне обратить ваше внимание на UID идентификатора пользователя,
и это то, что можно использовать для индексации пользователя в нашем приложении.
Таким образом, это служба аутентификации, как я
установил ее для использования аутентификации Firebase в этом приложении.
Итак, два изменения, которые я отразил вам, чтобы показать,
как мои службы модифицируются для использования Firebase.
Большая часть обновлений, которые я сделал для моего приложения Angular,
находится в службах, чтобы использовать установленную Firebase.
Таким образом, из-за ребенка, структурированного углового приложения,
компоненты были просто в зависимости от услуг, а
услуги были те, которые мы разговариваем с бэк-энд.
Таким образом, большинство обновлений, которые я сделал для
моего углового приложения, включают просто обновление этих служб, чтобы
использовать бэкэнд Firebase Google в качестве службы с двумя модулями npm,
Firebase и AngularFireAuth здесь.
Итак, вы увидите, что большая часть обновлений ограничена
всеми этими службами, которые у меня есть в папке служб моего углового приложения.
Конечно, мне нужно было сделать немного
минимальных корректировок в компонент dishdetail
и компонент заголовка, чтобы заставить его работать с Firebase.
Вы можете быстро посетить headercomponent.ts,
headercomponent.html и dishdetailcomponent.tsfile, чтобы увидеть, как
изменился код между предыдущей версией
и текущей версией приложения Angular,
предыдущей версией, я имею в виду версию, которую мы использовали для
общаясь с нашим
сервером X плюс плюс Mongo DB, который мы использовали в предыдущем упражнении.
Еще одно место, где вы увидите, как я делаю изменения,
интересно, в любимом сервисе.
В любимом сервисе,
как я хранил избранное пользователя,
заключается в том, что избранное - это коллекция на
моем сайте сервера, а сам фаворит содержит документы.
Каждый документ содержит идентификатор пользователя и идентификатор блюда.
Таким образом, конкретный пользователь может иметь
несколько документов, каждый из которых хранит идентификатор пользователя и идентификатор блюда.
Таким образом, коллекция из них вместе определит все избранное для конкретного пользователя.
Я обнаружил, что это лучший способ организации этих данных в Firebase.
В нашем MongoDB plus mongos
вы видели, что я вложил в массив идентификаторов посуды в
документ избранного, а затем определил любимую схему таким образом.
Здесь я использую
один отдельный документ для отслеживания каждого из избранного для каждого из пользователей.
Теперь, поскольку Firebase поддерживает запросы, поэтому
я могу запросить свой Firebase и извлечь все документы, имеющие одинаковые идентификаторы пользователей,
которые соответствуют пользователю, который в настоящее время вошел в систему, а затем
извлечь соответствующие идентификаторы посуды из избранного.
Затем я пойду, а затем запрошу мой сервер
и получу информацию о блюде для каждого из этих блюд.
Таким образом, он включает в себя несколько поездок на сервер, чтобы получить
всю информацию о моих любимых блюдах, прежде чем я смогу отобразить свой список избранных.
Но это лучший способ, которым я мог бы заставить Firebase работать с моим приложением Angular.
Возможно, в будущем
Firebase Cloud Firestone может расширить, чтобы
позволить что-то вроде заполнения, что мы сделали с монго.
В этом случае я буду обновлять код, чтобы использовать этот способ
получения всей информации о блюде автоматически.
Таким образом, бремя создания этого составного документа будет перенесено на сайт сервера.
Сейчас мой клиент делает большую часть работы здесь.
Теперь, когда вы войдете сюда,
вы увидите, что в методе getFavorites
вы увидите, как я обращаюсь к моим избранным здесь.
Поэтому, когда я делаю «Getfavorites», я запрашиваю
эту коллекцию избранного, но
замечаю, что здесь я говорю «ref where - это идентификатор пользователя».
Этот идентификатор пользователя, который я получаю здесь.
Итак, в конструкторе моего любимого сервера
я подписываюсь на эту службу Auth в состоянии Get Auth в службе Auth.
Итак, в службе Auth, если вы войдете,
вы увидите этот метод под названием Get Auth state здесь.
Состояние Get Auth возвращает this.AuthState,
который я определил прямо там.
Итак, это будет наблюдаемым, как вы видите, я объявляю здесь.
Итак, это наблюдаемый тот, который я собираюсь
использовать в моем любимом сервисе, а затем подписаться на это.
Таким образом, в любое время изменения информации пользователя это будет автоматически отражаться здесь.
Итак, вы видели, что даже в предыдущем приложении я использовал наблюдаемый,
чтобы отразить пользовательскую информацию в моем компоненте заголовка.
Подобный подход,
который я использую в компоненте «Избранное» здесь,
чтобы получить идентификатор пользователя для текущего зарегистрированного пользователя.
Поэтому, когда я запрашиваю коллекцию My Favorites,
я буду запрашивать и извлекать только те документы, в которых пользователь соответствует этому.
Тогда я использую только изменения значений здесь.
Итак, я извлекаю только все документы,
что меня не волнует идентификатор самого документа избранного в данный момент.
Итак, я просто извлекаю их все и использую их.
Если пользователь не вошел в систему, и, как вы можете видеть,
я бросаю ошибку здесь с наблюдаемым высказыванием:
«пользователь не вошел в систему», это то, что отображается в моей любимой речи там.
Теперь IsFavorites также обновляется здесь,
но в isFavorites я делаю, я иду в БД.
Теперь здесь я получу доступ к базе данных, сказав:
«DB равен firebase.firestore».
Напомним, что я импортирую Firebase здесь,
импортирую звезду как Firebase здесь.
Сам Angular Firestore не предоставляет мне метод
выполнения нескольких сложных запросов здесь.
Угловой пожарный магазин или Угловой огонь не дает мне сделать это.
Поэтому я должен прибегнуть к использованию Firebase Firestore.
Итак, когда я говорю Firebase Firestore,
это дает мне ссылку на базу данных Firestore, а затем я могу войти в эту базу данных,
а затем сказать «избранное коллекции БД», а затем я могу делать несколько запросов здесь.
Итак, я говорю, .where пользователь this.wheredish - это идентификатор блюда.
Итак, если я хочу получить конкретный фаворит.
Чтобы проверить, является ли конкретное блюдо фаворитом пользователя, я получаю
этот конкретный документ, где пользователь и блюдо соответствуют этим двум,
если они не совпадают, то он вернется с пустым.
Итак, я извлекаю, а затем возвращаю это значение здесь.
Теперь, тогда я публикую избранное,
вы видите, как я это делаю, я говорю, что это избранное коллекции AFS, и я скажу «добавить».
Посмотрите на документ, который я храню в своем избранном.
Сам документ содержит идентификатор пользователя и идентификатор блюда.
Таким образом, эти две части информации заключены здесь, и если
нет, то он отклонит обещание без входа в систему пользователя.
Аналогично, для любимого удаления, который я реализовал здесь.
Проведите некоторое время снова, пройдя этот код, чтобы понять, как я
использовал Firebase и Angular fire для модулей npm,
чтобы общаться с моим сервером Firebase, который я установил в предыдущем упражнении.
С этим я дал вам краткий обзор того,
как вы можете настроить свое угловое приложение для взаимодействия с сервером
Firebase в качестве службы, а затем иметь возможность
поддерживать различные операции, которые у вас есть в вашем угловом приложении.
Как я уже продемонстрировал ранее,
это угловое приложение выглядит точно так же, как
предыдущая версия приложения Angular, где мы
использовали нашу собственную версию нашего сервера Express MongoDB.
Теперь, с этим я завершу это конкретное упражнение, где я проиллюстрировал в
этом уроке о бэкенде как службе, а также продемонстрировал
Firebase как пример бэкенда как сервиса.