Создайте базу данных для хранения и синхронизации данных и, наконец, разверните приложение в Firebase.
Cloud Firestore - это гибкая и масштабируемая база данных NoSQL от Google. Он обновляет ваше приложение почти в режиме реального времени по мере изменения ваших внутренних данных. Он также обеспечивает автономную поддержку, любые локальные изменения синхронизируются с облаком, когда ваше устройство снова в сети. Это превосходно!
Cloud Firestore предлагает бесплатную квоту, так что смело приступайте.
Оглавление
- Подготовка
- Создание проекта Firebase
- Создание базы данных Cloud Firestore
- Добавление Firebase в ваше веб-приложение
- Обновление некоторых компонентов
- Тестирование приложения
- Подготовка к развертыванию
- Развертывание в Firebase
- Другие настройки
Подготовка
В этом руководстве мы будем использовать приложение React, созданное в предыдущем руководстве, в качестве основы:
Вы можете скачать приложение из моего репозитория на GitHub.
Создание проекта Firebase
Перейдите в Консоль Firebase и нажмите Создать проект. Если у вас уже есть несколько проектов, нажмите Добавить проект.
Введите название проекта, затем нажмите «Продолжить»:
Установите флажок «Не сейчас», затем нажмите «Создать проект»:
Когда ваш новый проект будет готов, нажмите «Продолжить».
Создание базы данных Cloud Firestore
Перейдите в «База данных» и нажмите «Создать базу данных»:
Отметьте на данный момент «тестовый режим», затем нажмите «Далее»:
Не забудьте изменить правила для защиты данных при использовании в производственной среде.
Задайте местоположение для данных Cloud Firestore, затем нажмите «Готово»:
Добавление Firebase в ваше веб-приложение
Перейдите на главную (Обзор проекта) и щелкните значок </>:
Введите свой псевдоним приложения, затем нажмите «Зарегистрировать приложение»:
Пропустите следующий шаг и нажмите «Перейти к консоли».
Создание конфигурации Firebase
Сначала установите модуль Firebase:
yarn add firebase
Создайте новый файл с именем firebase.js в каталоге src:
Замените firebaseConfig значения конфигурацией вашего приложения.
Как получить конфигурацию проекта Firebase для вашего приложения
Вернитесь в Firebase и нажмите кнопку приложение под названием вашего проекта. Затем нажмите значок шестеренки в открывшемся окне:
Прокрутите вниз и отметьте «Конфигурация»:
Скопируйте и вставьте фрагмент в свой файл конфигурации.
Обновление некоторых компонентов
Приложение
Откройте файл App.js и удалите Context. Мы больше не будем его использовать:
Список книг
Откройте файл BookList.js и обновите его следующим образом:
Установите useState Hook вместо useContext() и укажите пустой массив в качестве начального состояния.
Мы можем прослушать документ в нашей базе данных Cloud Firestore с помощью метода onSnapshot(). Чтобы удалить документ, используйте метод delete().
В компоненте Navbar мы использовали побочные эффекты, не требующие очистки, но здесь мы используем побочные эффекты с очисткой. Например, когда мы настраиваем подписку, как в этом случае, нам нужно выполнить очистку, чтобы избежать утечки памяти. Как и выше, мы вернули функцию для очистки от нашего эффекта. Функция unsub() отключает нашего слушателя. Очистка выполняется при отключении компонента.
Какой пустой массив [] передан в качестве второго аргумента? В React Docs говорится:
Если вы хотите запустить эффект и очистить его только один раз (при монтировании и размонтировании), вы можете передать пустой массив (
[]) в качестве второго аргумента.
Если это не будет выполнено, возникнет бесконечный цикл.
Эффект Hook может быть немного трудным для понимания. Я рекомендую вам несколько раз прочитать Использование обработчика эффектов в React Docs.
BookForm
Откройте файл BookForm.js и обновите его следующим образом:
Когда мы используем метод add() для создания документа, Cloud Firestore автоматически генерирует идентификатор. Если вы хотите указать идентификатор для создаваемого документа, используйте метод set().
Тестирование приложения
Давайте запустим локальный сервер и протестируем приложение:
yarn start
Добавьте несколько элементов из формы:
Отображаются добавленные элементы.
Они также хранятся в базе данных Cloud Firestore.
Наконец, попробуйте удалить некоторые элементы. Они были удалены из вашей базы данных? Если да, то поздравляю!
Подготовка к развертыванию
Чтобы создать производственную сборку, используйте следующую команду для оптимизации:
yarn build
Папка build должна была быть создана в корневом каталоге вашего приложения.
Теперь мы готовы к развертыванию.
Развертывание в Firebase
Выполните следующие команды из корневого каталога вашего приложения.
Установите Firebase CLI:
yarn global add firebase-tools
Войдите в Google:
firebase login
Инициализируйте свой проект:
firebase init
Выберите «Хостинг», затем нажмите Ввод:
Выберите «Использовать существующий проект»:
Затем выберите свой проект.
Укажите «build» для своего общедоступного каталога. После этого ответьте «Нет» и пропустите запись build/index.html:
Разверните на хостинге Firebase:
firebase deploy
После завершения развертывания перейдите в раздел «Хостинг» в Firebase и щелкните домен своего приложения:
Есть два домена, оба из которых действительны.
Это сработало? Попробуйте на своем смартфоне!
Другие настройки
Настроить поведение хостинга Firebase
Перейдите на страницу "О себе" или "Контакты" и обновите страницу. Должна возникнуть 404 ошибка. Поскольку маршрутизатор React Router выполняет маршрутизацию, он отлично работает на стороне клиента, но дает сбой на стороне сервера, если мы не заставим наш сервер их понимать. Эту проблему можно решить, настроив перезапись хостинга Firebase.
Откройте файл firebase.json и укажите URL-адрес rewrites следующим образом:
Снова выполните следующие команды и посмотрите, работает ли это:
yarn build firebase deploy
Обновить .gitignore
Откройте файл .gitignore и добавьте каталог .firebase:
Он содержит информацию, которая не является частью вашего проекта, и ее следует игнорировать.
Это конец этого урока. На следующем этапе я напишу о том, как создать React PWA (прогрессивное веб-приложение).
Исходный код, используемый в этом руководстве, доступен на GitHub.
Оставьте комментарий ниже, если у вас есть какие-либо вопросы или проблемы. Вы также можете связаться со мной через Twitter.
Спасибо за чтение :)
