[MUSIC]
В предыдущем упражнении мы уже настроили наш
сервер Firebase как сервис с новым проектом.
А также настроить много данных в нашей базе данных, а затем настроить наше хранилище и
настроить сервер Firebase, чтобы действовать в качестве бэкэнда для нашего приложения React.
В этом упражнении мы рассмотрим модифицированную версию нашего приложения React,
которая использует внутренний сервер Firebase в качестве сервиса для
получения данных, а также хранения информации для пользователей на сервере.
Кроме того, мы воспользуемся поддержкой аутентификации, которую Firebase
предоставляет для аутентификации пользователей.
Как с использованием электронной почты и пароля, так и с использованием учетной записи Google.
Чтобы начать работу с этим упражнением, перейдите в удобное место на вашем компьютере,
а затем клонируйте данный репозиторий Git, я предоставил
вам версию Firebase нашего приложения React.
Поэтому введите git clone https://github.com/jmuppala/conFusion-Rea -
CT-Firebase.git.
А затем клонировать репозиторий Git.
И как только репозиторий Git клонирован на ваш компьютер, затем перейдите
в папку Confusion-React-FireBase, которая будет создана в этот момент.
И тогда вы заметите, что куча файлов уже установлена там.
Давайте продолжим и сделаем установку пряжи, чтобы установить все
модули узла, от которых зависит это угловое приложение.
Эта версия также установит дополнительные модули узлов под названием Firebase.
Я объясню немного больше об этих модулях узлов позже в этом упражнении.
После завершения установки проекта откройте проект в редакторе.
А затем в проекте перейдите в исходную папку > Firebase, а
затем откройте файл config.js.
И в файле config.js вы увидите набор конфигурации Firebase,
который вам нужно настроить с вашей собственной конфигурацией сервера Firebase.
Как мы уже видели в предыдущем упражнении, мы можем получить всю эту информацию, когда мы
нажимаем на эту кнопку здесь под названием Добавить Firebase в ваше веб-приложение.
А затем скопируйте эту информацию, а
затем вставьте эту информацию в файл config.js.
Чтобы заменить их вашей конкретной конфигурацией серверов Firebase для
всей этой части информации.
И как только это будет завершено, вы можете запустить свое
приложение React, набрав пряжу запуска в подсказке.
После того, как ваше приложение React скомпилировано, и поэтому
здесь вы увидите домашнюю страницу, страницу о странице, как мы видим здесь.
И меню.
И контактную страницу.
Давайте войдем сами,
позволь мне вернуться на главную страницу, а затем мы сами войдем.
Поэтому, когда вы нажимаете кнопку Вход,
вы увидите типичную форму здесь с электронной почтой и информацией о пароле.
Вы также увидите начальную кнопку здесь под названием Войти с помощью Google.
Поэтому позвольте мне войти с моей учетной записью Google.
Поэтому, когда вы нажмете на Вход с Google, он откроет другое
окно браузера, где вам будет предложено авторизоваться для использования вашей учетной записи Google.
Затем вы увидите, в правом углу, вы сразу увидите,
что ваше имя отображается здесь, и с помощью кнопки входа теперь превращается в кнопку выхода из системы.
Таким образом, на данный момент вы должны иметь возможность увидеть ваши избранные.
И в этом случае, так как у нас нет фаворитов, так что
в данный момент он будет пустым.
Позвольте мне вернуться в меню, а затем добавить пару пунктов в избранное.
Поэтому я добавлю это блюдо в избранное, поэтому, когда я нажимаю на это блюдо,
вы сразу увидите значок превращается в наполненное сердце.
И позвольте мне также выбрать еще одно блюдо и добавить его в избранное.
Объявление тогда теперь, когда вы идете к моим фаворитам, вы увидите пару
блюд, добавленных в ваши избранные, как вы ожидали.
И снова, вы можете удалить блюда, нажав на
крестик удаления, чтобы удалить элемент из вашего списка избранного, как показано здесь.
Теперь мы также можем добавить, как вы понимаете, мы можем пойти на любое блюдо, а
затем добавить комментарии к этому блюду.
Поэтому позвольте мне добавить комментарий здесь.
И как только вы отправите комментарий, вы сразу увидите, что
ваш комментарий будет отображаться здесь с именем автора.
И с этой датой, как показано здесь.
Таким образом, вы можете видеть, что подача комментариев пользователем
будет поддерживаться для любого конкретного блюда.
Итак, вот как ваше приложение работает с этим
Firebase в качестве бэкенда как службы.
Теперь, конечно, вам должно быть интересно, как мы перепроектировать наше приложение,
чтобы использовать Firebase вместо использования стандартного
сервера Express MongoDB, который мы построили ранее?
Для того, чтобы настроить приложение для связи с сервером Firebase,
вам необходимо установить модуль Firebase.
Модуль Firebase, как вы видите здесь, предоставляет инструмент и
инфраструктуру, которая позволяет вам взаимодействовать с сервером Firebase.
И чтобы установить это в свое приложение,
вы вводите install минус save firebase.
Теперь как использовать их?
Я проиллюстрирую это, быстро запустив вас через модифицированный код,
где мы используем Firebase для изменения приложения, которое мы разработали
ранее, чтобы использовать сервер Firebase в качестве бэк-энда в качестве сервиса.
Давайте проведем краткий обзор нашего модифицированного приложения React, чтобы понять,
как он был перенастроен для связи с нашим сервером Firebase.
Мы начнем наше путешествие в файле package.json.
И в файле package.json
вы заметите, что я добавил в модуль Firebase npm в это.
И поэтому, когда вы клонируете репозиторий Git и делаете установку пряжи,
модуль Firebase автоматически устанавливается в ваше приложение.
Если вы настраивали новое приложение React для
связи с сервером,
вам нужно явно установить модуль Firebase в ваше приложение.
Теперь после этого вы заметите изменения в папке Firebase.
Здесь мы уже видели конфигурационный файл.
Другой файл, который вы заметите здесь, называется firebase.js.
Теперь здесь мы настраиваем наше приложение для связи с
Firebase Server.
Поэтому мы импортируем конфигурацию здесь.
А затем импорт firebase из firebase.
И затем вы начинаете приложение здесь, поставляя конфигурацию в firebase,
поэтому здесь вы поставляете всю информацию о конфигурации
, чтобы ваш клиент мог взаимодействовать с Firebase Server.
Кроме того, я экспортирую некоторые из этих экспортных товаров
отсюда под названием auth, fireauth и так далее.
Они я буду использовать в создателях действий,
чтобы общаться с моим Firebase Server.
Теперь после этого основные изменения будут находиться в файле ActionCreators.
Теперь я не добавил никаких новых действий, но вместо этого вся связь
с сервером теперь изменена для связи с нашим Firebase Server.
Поэтому вместо того, чтобы использовать выборку, как мы делали ранее,
мы теперь собираемся использовать fierstore.
Как вы можете видеть, я импортировал auth, fierstore,
fireauth и firebasestore из модуля firebase, который
я установил ранее в папке firebase.
И тогда все это позволит мне общаться с моим Firebase Server.
Чтобы получить коллекцию из моего Firebase,
мы просто скажем fierstore.collection, а затем укажите имя коллекции.
И затем вы можете добавить в коллекцию, сказав, добавить, как вы можете видеть здесь,
который принимает конкретный элемент, который вы добавляете в свою коллекцию там.
Вот тот документ, который мы добавляем в нашу коллекцию.
Так что это для комментария к сообщению, как вы можете видеть здесь.
И когда вы публикуете это, вы получите обратно docRef,
который является ссылкой на документ,
который затем вы можете использовать, чтобы пойти и получить документ с вашего сервера.
Теперь способ работы Firebase заключается в том, что он будет предоставлять
идентификатор отдельно от фактического содержимого документов.
Таким образом, Firebase хранит идентификатор и сами данные документа по отдельности.
Поэтому здесь я должен явно объединить эти два вместе в
объект JavaScript здесь, называемый комментарием здесь.
Итак, как вы видите из документа, поэтому вы заметили, что когда я
вставляю элемент в коллекцию, он возвращает DocRef здесь.
И из DocRef, я могу получить идентификатор документа.
И поэтому то, что я делаю здесь, я
иду и получу соответствующий документ здесь.
И тогда, как только документ будет извлечен, теперь, конечно, документ должен существовать,
так что это должно быть всегда правдой, потому что мы только что вставили документ.
Но только ради полноты, я делаю явную проверку для этого.
И после этого данные, которые находятся в документе,
получают, сказав doc.data, как вы видите здесь.
И затем идентификатор документа получает doc.id.
Таким образом, эти два отдельные.
Но в нашем коде React мы всегда сохранили идентификатор и
данные вместе как один документ JSON здесь или объект JavaScript здесь.
Вот почему я комбинирую эти два вместе
в один объект JavaScript здесь, делая это.
Вы увидите, что я неоднократно делаю это для, например,
для дерзких рекламных акций и т. Д., Также в ActionCreators.
И затем после этого я добавляю комментарий в мой магазин Redux здесь,
а остальная часть кода остается таким.
Аналогичным образом, для получения блюд,
вы увидите, как мы извлекаем несколько блюд из Firebase.
Таким образом, мы видим firestore.collection блюда получить и получить блюда.
Теперь, когда вы получите это, он даст мне значение снимка,
которое является снимком текущего состояния этой коллекции, и из этого,
я должен войти и получить каждое блюдо.
И тогда я восстанавливаю свой набор блюд здесь.
Теперь обратите внимание, что, как я уже сказал, идентификатор и данные раздельны, поэтому
мне нужно объединить их вместе, потому что именно так я использую данные в своем
приложении React, поэтому я нажимаю это в массив блюд.
И затем, наконец, вернуть блюда, которые затем будут вставлены в мой
магазин Redux здесь.
Таким образом, такие изменения были сделаны в ActionCreators.
Теперь процесс входа и выхода из системы будет обрабатываться ниже здесь.
Таким образом, для входа, auth, который мы импортировали из firebase,
auth - это тот, который позволяет мне выполнять вход и выход из системы.
Поэтому, если вы регистрируетесь с помощью электронной почты и пароля,
он предоставляет этот метод под названием SigninWitheMailandPassword.
А затем вы указываете адрес электронной почты и пароль в качестве двух параметров здесь.
И тогда это позволит вам войти в систему.
И когда вы входите в систему, auth предоставляет этот объект под названием CurrentUser на auth.
Таким образом, вы получаете информацию пользователя, сказав auth.currentUser здесь.
А также я храню информацию о пользователе в своей базе данных.
Теперь я явно не отслеживаю какой-либо токен и
что-то подобное, потому что это автоматически отслеживается auth для меня,
который предоставляется модулем Firebase npm.
Поэтому я просто использую это для отслеживания текущего использования.
Если текущий пользователь равен нулю, я знаю, что
у моего клиента нет пользователя, зарегистрированного на сервере.
И аналогичным образом, чтобы выйти из системы пользователя, я просто говорю auth.signout.
Теперь опять же, документация о том, как использовать
модуль Filebase npm, доступна в документации Firebase.
Таким образом, вы можете легко посмотреть это, чтобы понять, как использовать
Firebase, чтобы использовать все эти различные функции
, доступные из модуля Firebase npm.
Кроме того, для избранного мы либо публикуем избранное, и поэтому
вам нужно опубликовать элементы, так что вы бы сказали добавить, и
когда вам нужно получить элемент, вы скажете получить.
И вы даже можете получить элемент из определенного документа в коллекциях.
Если вы хотите конкретный документ в коллекции, вы скажете .doc.
А затем вы указываете идентификатор документа здесь.
Вот как вы можете получить конкретный документ.
Также удаляйте избранное, извлекайте избранное и так далее.
Теперь, чтобы избранные хранились в моей Firebase,
избранные хранятся как идентификатор пользователя и идентификатор блюда здесь.
Теперь сам Firestore не имеет никакого способа заполнить
информацию о блюде в идентификатор блюда.
Поэтому я просто получаю всю информацию о блюде,
так что это каждый фаворит - пара, пользователь и идентификатор блюда.
Так что я просто принесу это в свои любимые.
Но тогда это также означает, что мне нужно изменить мой компонент избранного, чтобы
он мог использовать идентификатор блюда, а затем индексировать в блюда, которые
хранятся в моем магазине Redux, и получить информацию о блюде.
Или альтернативой было бы перейти на сервер, а затем получить информацию.
Но так как у меня уже есть данные о блюдах в моем магазине Redux,
потому что я уже сделал выборку блюд, чтобы получить всю информацию
о блюдах.
Я просто прямо вхожу в предмет посуды в моем Redux порвал и
получу эту информацию.
Таким образом, это также означает, что есть изменения в главном компоненте.
В главном компоненте вы заметите, что когда я делаю любимое здесь для
детали блюда, мне просто придется сравнить блюдо с этим DisHid.
Так что блюдо здесь, в моем любимом, это сам Дишид, так
что мне просто нужно сделать сравнение.
Таким образом, в DishID будет небольшое изменение этой строки.
А также вы заметите, что когда я называю фаворитов,
в дополнение к поставке их фаворитов,
я также поставляю блюда как один из реквизит для моих любимых.
Так что это еще одно изменение, которое вы заметите в главном компоненте.
И аналогичным образом, в любимом компоненте
вы заметите, что внутри избранного компонента внизу,
вы заметите, что, когда я визуализирую любимый компонент.
Затем, прямо здесь, в этой функции, const favorites,
то, что я делаю, это я иду в избранные
блюда, блюда - это массив всех DisHID здесь, поэтому я карту через это.
Так что посмотри на каждого дишида, а потом из блюд
я отфильтровал это конкретное блюдо.
И затем получил DisHid, поэтому
здесь вы увидите меня, используя фильтр массива JavaScript здесь.
Он отфильтрует эту конкретную информацию о блюде, а
затем визуализирует это конкретное блюдо.
Таким образом, это дополнительная работа, которую мне нужно сделать в моем любимом
компоненте, чтобы сделать каждое из блюд там.
Так вот, такого рода незначительные модификации вы заметите в паре компонентов, а
именно в деталях блюда, любимом и главном компоненте.
Вот где были внесены некоторые незначительные изменения, чтобы облегчить
приложение React, чтобы иметь возможность использовать Firebase Server.
Итак, это быстрый обзор того, как
мое приложение React было изменено для связи с моим Firebase Server.
Теперь, как и с Angularfire, у нас тоже был
Angularfire, который предоставил нам способ использовать вместе с Firebase для связи с сервером.
React не имеет такого аналога, поэтому я напрямую использую
модуль Firebase npm, который обеспечивает базовую базу доступа к серверу Firebase.
А затем использовать функции, которые он предоставляет для связи с моим
Firebase Server.
Проведите некоторое время снова, пройдя этот код, чтобы понять, как
я использовал модули Firebase npm для связи
с моим Firebase Server, который я установил в предыдущем упражнении.
С этим я дал вам краткий обзор того, как вы можете настроить
приложение React для взаимодействия с сервером Firebase как службой, а
затем иметь возможность поддерживать различные операции, которые у вас есть в вашем приложении.
Теперь, с этим, я завершу это конкретное упражнение, где я
проиллюстрировал в этом уроке о back-end как службе, а
также продемонстрировал Firebase как пример бэк-энда как сервиса.
[ МУЗЫКА]