Быстро добавляйте новые функции в свое веб-приложение с помощью расширений Firebase.

1. Введение

Цели

В этом практическом занятии вы добавите функциональность в приложение онлайн-маркетплейса с помощью расширений Firebase . Благодаря этому занятию вы поймете, как расширения могут помочь вам тратить меньше времени на разработку и управление приложениями.

3b6977f679c67db.png

Что вы построите

В этом практическом занятии вы добавите следующие функции в веб-приложение онлайн-маркетплейса:

  • Более быстрая загрузка изображений повышает удержание пользователей.
  • Ограничьте количество записей в базе данных, чтобы повысить производительность и снизить затраты.
  • Внедрить автоматическое удаление старых пользовательских данных для повышения уровня защиты пользовательских данных.

Что вы узнаете

  • Как найти расширения для распространенных сценариев использования
  • Как установить и настроить расширение в вашем проекте
  • Как поддерживать (отслеживать, обновлять и удалять) расширения в вашем проекте.

Данный практический урок посвящен расширениям Firebase. Подробную информацию о других продуктах Firebase, упомянутых в этом уроке, можно найти в документации Firebase и других практических уроках .

Что вам понадобится

  • Компьютер с установленным современным веб-браузером (рекомендуется Chrome).
  • Аккаунт Google

2. Создайте и настройте проект Firebase.

Создайте проект Firebase.

  1. Войдите в консоль Firebase, используя свою учетную запись Google.
  2. Нажмите кнопку, чтобы создать новый проект, а затем введите название проекта (например, FriendlyMarket ).
  3. Нажмите «Продолжить» .
  4. Если появится запрос, ознакомьтесь с условиями использования Firebase и примите их, после чего нажмите «Продолжить» .
  5. (Необязательно) Включите помощь ИИ в консоли Firebase (в Firebase она называется "Gemini").
  6. Для этого практического занятия вам не понадобится Google Analytics, поэтому отключите эту опцию.
  7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

В создаваемом вами приложении используются некоторые продукты Firebase, доступные для веб-приложений:

  • Аутентификация Firebase для простой идентификации ваших пользователей.
  • Firebase Realtime Database — это база данных для сохранения структурированных данных в облаке и получения мгновенных уведомлений об обновлении данных.
  • Облачное хранилище для Firebase позволяет сохранять изображения в облаке.

Теперь вы сможете включить и настроить эти продукты Firebase с помощью консоли Firebase.

Обновите свой тарифный план Firebase.

Для использования расширений Firebase и лежащих в их основе облачных сервисов, а также Cloud Storage for Firebase, ваш проект Firebase должен быть привязан к тарифному плану с оплатой по мере использования (Blaze) , то есть к учетной записи Cloud Billing .

Чтобы перейти на тарифный план Blaze для вашего проекта, выполните следующие шаги:

  1. В консоли Firebase выберите вариант обновления вашего тарифного плана .
  2. Выберите тарифный план Blaze. Следуйте инструкциям на экране, чтобы связать учетную запись Cloud Billing с вашим проектом.
    Если в рамках этого обновления вам потребовалось создать учетную запись Cloud Billing, возможно, вам нужно будет вернуться к процессу обновления в консоли Firebase, чтобы завершить обновление.

Включить вход по электронной почте

Хотя аутентификация не является основной темой этого практического занятия, важно иметь в вашем приложении какую-либо форму аутентификации, чтобы однозначно идентифицировать каждого пользователя. В данном случае вы будете использовать вход по электронной почте.

  1. В консоли Firebase нажмите «Разработка» на левой панели.
  2. Нажмите «Аутентификация» , а затем перейдите на вкладку «Способ входа» (или нажмите здесь , чтобы перейти непосредственно на вкладку «Способ входа» ).
  3. В списке поставщиков услуг входа выберите «Электронная почта/Пароль» , установите переключатель «Включить» в положение «Вкл.», а затем нажмите «Сохранить» .

ed0f449a872f7287.png

Включить базу данных в реальном времени

Приложение использует базу данных Firebase Realtime Database для сохранения товаров, выставленных на продажу.

  1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите «База данных реального времени» .
  2. Нажмите «Создать базу данных» .
  3. Выберите местоположение для вашей базы данных, затем нажмите «Далее» .
    Для создания настоящего приложения вам следует выбрать местоположение, расположенное недалеко от ваших пользователей.
  4. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
    На следующих этапах этого практического занятия вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению без добавления правил безопасности для вашей базы данных.
  5. Нажмите «Создать» .

Настройте правила безопасности для вашей базы данных.

Теперь вам нужно установить правила безопасности для этого приложения. Вот несколько базовых примеров правил, которые помогут защитить ваше приложение. Эти правила позволяют любому просматривать товары на продажу, но разрешают только авторизованным пользователям выполнять другие операции чтения и записи. Не беспокойтесь о деталях этих правил; вы просто скопируете и вставите их, чтобы запустить ваше приложение.

  1. В верхней части панели управления Realtime Database нажмите вкладку «Правила» .

e233a24a38b37e95.png

  1. Скопируйте и вставьте следующий набор правил в поле «Правила» на вкладке «Правила» :
    {
      "rules": {
        ".read": false,
        ".write": false,
          "drafts": {
            ".indexOn": "seller",
            ".read": "auth.uid !== null",
            ".write": "auth.uid !== null"
        },
        "sellers": {
            ".read": "auth.uid !== null",
            ".write": "auth.uid !== null"
        },
          "forsale": {
            ".read": true,
            ".write": "auth.uid !== null"
          }
      }
    }
    
  2. Нажмите «Опубликовать» .

Настройка облачного хранилища для Firebase

Приложение использует Cloud Storage for Firebase для сохранения изображений товаров, выставленных на продажу.

Вот как настроить Cloud Storage для Firebase в вашем проекте Firebase:

  1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите «Хранилище» .
  2. Нажмите « Начать» .
  3. Выберите местоположение для вашего хранилища по умолчанию.
    Для регионов US-WEST1 , US-CENTRAL1 и US-EAST1 доступен тариф "Всегда бесплатно" от Google Cloud Storage. Для регионов во всех остальных регионах действуют тарифные планы и правила использования Google Cloud Storage .
  4. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
    На следующих этапах этого практического занятия вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению без добавления правил безопасности для вашего хранилища.
  5. Нажмите «Создать» .

Настройте правила безопасности для вашего хранилища.

Теперь вам нужно установить правила безопасности для этого приложения. Эти правила разрешают публиковать новые изображения только авторизованным пользователям, но позволяют любому просматривать изображение для указанного товара.

  1. В верхней части панели управления хранилищем нажмите вкладку «Правила» .

e7003646b429500b.png

  1. Скопируйте и вставьте следующий набор правил в поле «Правила» на вкладке «Правила» :
    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /friendlymarket/{ImageId} {
          allow read;
          allow write: if request.auth != null;
        }
      }
    }
    
  2. Нажмите «Опубликовать» .

3. Запустите демонстрационное приложение.

Создайте форк проекта StackBlitz.

В этом практическом занятии вы создадите и развернете приложение с помощью StackBlitz — онлайн-редактора, в который интегрированы несколько рабочих процессов Firebase. Для работы со Stackblitz не требуется установка программного обеспечения или специальная учетная запись StackBlitz.

StackBlitz позволяет делиться проектами с другими. Другие пользователи, имеющие URL-адрес вашего проекта StackBlitz, могут видеть ваш код и создавать форки вашего проекта, но они не могут редактировать ваш проект StackBlitz.

  1. Чтобы получить исходный код, перейдите по этой ссылке: https://stackblitz.com/edit/friendlymarket-codelab .
  2. В верхней части страницы StackBlitz нажмите кнопку «Fork» .

22c44cf92ed26208.png

Теперь у вас есть копия исходного кода в качестве собственного проекта StackBlitz. Поскольку вы не авторизовались, ваша «учетная запись» называется @anonymous , но это нормально. У проекта уникальное имя и уникальный URL-адрес. Все ваши файлы и изменения сохраняются в этом проекте StackBlitz.

Добавьте веб-приложение Firebase в проект.

  1. В StackBlitz откройте файл src/firebase-config.js . Именно сюда вы добавите объект конфигурации Firebase.
  2. Вернувшись в консоль Firebase, перейдите на страницу обзора вашего проекта, нажав кнопку «Обзор проекта» в верхнем левом углу.
  3. В центре страницы обзора вашего проекта нажмите на значок веб-страницы. 58d6543a156e56f9.png создать новое веб-приложение Firebase. 88c964177c2bccea.png
  4. Зарегистрируйте приложение под псевдонимом FriendlyMarket Codelab .
  5. Для этого практического задания не ставьте галочку рядом с пунктом «Также настройте Firebase Hosting для этого приложения» . Вместо этого вы будете использовать панель предварительного просмотра StackBlitz.
  6. Нажмите «Зарегистрировать приложение» .
  7. Скопируйте объект конфигурации Firebase вашего приложения в буфер обмена. Не копируйте теги <script> . Примечание: Если вам потребуется найти конфигурацию позже, следуйте инструкциям здесь .

6c0519e8f48a3a6f.png

  1. Нажмите «Продолжить» в консоли .

Добавьте конфигурацию вашего проекта в ваше приложение:

  1. Вернитесь в StackBlitz и перейдите к файлу src/firebase-config.js .
  2. Вставьте фрагмент вашей конфигурации в файл. После этого он должен выглядеть примерно так (но со значениями вашего проекта в объекте конфигурации):

177602cbe84f873d.png

С чего начинается создание этого приложения?

Взгляните на интерактивный предварительный просмотр в правой части экрана StackBlitz:

f3ec800f27fa49b7.png

Этот практический урок по программированию даст вам базовый код для приложения-маркетплейса. Любой пользователь может просмотреть список товаров, выставленных на продажу, и перейти по ссылке на страницу с подробным описанием товара. Если пользователь авторизован, он увидит контактную информацию продавца, чтобы договориться о цене и купить товар.

Попробуйте приложение:

  1. Войдите в систему с помощью кнопки в верхней части главного экрана. Вы можете использовать вымышленный адрес электронной почты, имя и пароль.
  2. Чтобы создать объявление, нажмите кнопку «Продать что-нибудь» в правом нижнем углу.
  3. В поле "Название" введите Xylophone .
  4. В поле «Запрашиваемая цена» введите 50 .
  5. В поле «Описание товара» введите следующее: This high quality xylophone can be used to play music.
  6. Загрузите это изображение ксилофона на свой компьютер и загрузите его с помощью кнопки "ИЗОБРАЖЕНИЕ ВАШЕГО ПРЕДМЕТА" .

  1. После заполнения всех полей и загрузки изображения нажмите кнопку «Опубликовать» .
  2. Найдите своё новое объявление. Щёлкните по товару, чтобы просмотреть его подробную информацию, а затем разверните панель с контактными данными продавца .
  3. Вернитесь в консоль Firebase. На панели управления «База данных» вы увидите запись о товаре, который вы разместили, в узле forsale . На панели управления «Хранилище» вы также найдете изображение, которое вы загрузили, в пути friendlymarket .

4. Найдите и установите расширение.

Проблема

Проведя исследование пользовательского опыта для вашего приложения, вы обнаруживаете, что большинство пользователей посещают ваш сайт со смартфонов, а не с компьютеров. Однако статистика также показывает, что пользователи мобильных устройств, как правило, покидают ваш сайт («отток») всего через несколько секунд.

Из любопытства вы тестируете свой сайт на мобильных устройствах (узнайте, как это сделать здесь ). Вы обнаруживаете, что изображения загружаются очень долго и вообще не кэшируются в браузере. Длительное время загрузки наблюдается при каждом просмотре страницы!

Решение

Изучив информацию об оптимизации изображений , вы решаете предпринять два шага для улучшения скорости загрузки изображений:

  • Сжимайте изображения. Даже мобильные телефоны делают снимки с гораздо более высоким разрешением, чем необходимо для работы этого приложения. Уменьшение размера файла ускорит время загрузки без заметного снижения разрешения в приложении.
  • Кэширование . По умолчанию объекты Cloud Storage имеют заголовки, которые указывают браузерам не кэшировать изображения, а это значит, что браузер пользователя будет повторно загружать одно и то же изображение снова и снова! К счастью, вы можете изменить эти заголовки, чтобы разрешить кэширование. И клиентский SDK Cloud Storage , и SDK Firebase Admin позволяют устанавливать эти заголовки.

Для сжатия изображений вам потребуется либо ограничить качество загрузки, либо использовать серверный процесс для изменения размера изображений. Давайте рассмотрим компромиссы:

  • На стороне клиента . Для обработки данных на стороне клиента можно просто ограничить размер загружаемых изображений. Это означает, что вам не нужно писать или поддерживать какую-либо новую серверную логику. Однако это также означает, что вашим продавцам придется самим разбираться, как изменять размер своих изображений, что является неудобным и неинтуитивным препятствием для создания нового объявления.
  • На стороне сервера . Если вы используете Cloud Functions для Firebase, вы можете запустить функцию , которая автоматически изменяет размер изображения при загрузке. Это означает, что продавцы могут загружать изображения любого размера (без дополнительных усилий с их стороны), а ваша функция на стороне сервера сможет автоматически изменять размер изображения. Для этой функции даже есть пример !

Похоже, что серверная часть — это оптимальный вариант. Но эта идея всё ещё предполагает клонирование примера , следование инструкциям по настройке , а затем развертывание функции с помощью Firebase CLI. Изменение размера изображений кажется таким распространённым вариантом использования. Неужели нет более простого решения?

Более простое решение

Вам повезло. Есть более простое решение: расширения Firebase! Давайте посмотрим каталог доступных расширений на сайте Firebase .

e6bc3874cf23f34f.png

Посмотрите! Есть расширение под названием "Изменение размера изображений". Выглядит многообещающе.

Давайте используем это расширение в вашем приложении!

Установите расширение

  1. Нажмите «Подробнее», чтобы просмотреть дополнительную информацию об этом расширении. В разделе «Что вы можете настроить » расширение позволяет задать желаемые размеры для изменения, а также установить заголовок кэша. Отлично!
  2. На странице с подробной информацией о расширении нажмите кнопку «Установить в консоли» . Вы перейдете на страницу консоли Firebase, где будет перечислены все ваши проекты.
  3. Выберите проект FriendlyMarket , который вы создали для этого практического занятия.
  4. Следуйте инструкциям на экране, пока не дойдете до шага «Настройка расширения» . Инструкции покажут краткое описание расширения, а также любые ресурсы, которые оно создаст, и необходимые ему роли доступа.
  5. В поле заголовка ** Cache-Control ** для изображений измененного размера введите следующее:

public, max-age=31536000

  1. Остальные параметры оставьте по умолчанию.
  2. Нажмите «Установить расширение» .

Пока вы ждете завершения установки...

Установка с помощью интерфейса командной строки Firebase.

Если вам удобнее работать с инструментами командной строки, расширения также можно устанавливать и управлять ими с помощью Firebase CLI! Просто используйте команду firebase ext , доступную в последней версии CLI. Дополнительную информацию можно найти здесь .

(Необязательно) Узнайте больше о заголовках Cache-Control

Значение заголовка Cache-Control public, max-age=31536000 означает, что изображение будет кэшироваться до 1 года. Для получения дополнительной информации о заголовке Cache-Control ознакомьтесь с этой документацией .

Обновить клиентский код

Установленное вами расширение записывает уменьшенное изображение в тот же контейнер, что и исходное. К имени файла уменьшенного изображения добавляются заданные размеры. Таким образом, если путь к исходному файлу выглядел как friendlymarket/user1234-car.png , то путь к файлу уменьшенного изображения будет выглядеть как friendlymarket/user1234-car_200x200.png .

Давайте обновим приложение, чтобы оно загружало изображения уменьшенного размера, а не изображения в полном размере.

  1. В StackBlitz откройте файл src/firebase-refs.js .
  2. Замените существующую функцию getImageRef следующим кодом, чтобы создать ссылку на измененное изображение:
export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Проверьте это

Поскольку это расширение отслеживает загрузку новых изображений, ваше существующее изображение не будет изменено в размере.

Создайте новую запись, чтобы увидеть расширение в действии:

  1. Чтобы перейти на главный экран, нажмите на значок Friendly Market в верхней панели приложения.
  2. Чтобы создать объявление, нажмите кнопку «Продать что-нибудь» в правом нижнем углу приложения.
  3. В поле «Заголовок» введите Coffee
  4. В поле «Запрашиваемая цена» введите 1
  5. В поле «Описание товара» введите следующее: Selling one cafe latte. It has foam art in the shape of a bear .
  6. Скачайте это изображение чашки кофе на свой компьютер и загрузите его с помощью кнопки «ИЗОБРАЖЕНИЕ ВАШЕГО ПРЕДМЕТА» .
  7. После заполнения всех полей и загрузки изображения нажмите «Опубликовать» . Вы увидите объявление о кофе под ксилофоном!
  8. На панели управления «Функции» в консоли Firebase перейдите на вкладку «Журналы» . Вы увидите записи из журнала функции, подтверждающие её выполнение.

486d1226be84bb44.png

  1. Перейдите на панель управления «Хранилище» , чтобы увидеть как исходное изображение кофе, так и его уменьшенную версию в разделе friendlymarket .
  2. В окне предварительного просмотра StackBlitz несколько раз перезагрузите главный экран вашего приложения. Вы заметите, что изображение кофе загружается значительно быстрее, чем изображение ксилофона.

Изображение загружается быстрее при первой загрузке страницы, потому что оно меньше по размеру, а при последующих обновлениях страницы оно загружается из кэша браузера, а не инициирует сетевой запрос.

5. Перенастройте добавочный номер.

Проблема

Ваше приложение автоматически сохраняет черновики объявлений продавцов. Пользователям нравится эта функция, но статистика вызывает некоторое беспокойство. Согласно отчетам, фактически публикуется только около 10% черновиков, а остальные 90% просто занимают место в базе данных.

Решение

После некоторых приблизительных расчетов вы понимаете, что вам нужно сохранять одновременно всего около пяти черновиков.

Помните каталог расширений Firebase? Возможно, для этой ситуации уже есть готовое решение. Давайте установим расширение Limit Child Nodes , чтобы автоматически поддерживать количество сохраненных черновиков на уровне пяти или меньше. Расширение будет удалять самый старый черновик всякий раз, когда добавляется новый.

  1. Нажмите кнопку «Установить» на странице с подробной информацией о расширении .
  2. Выберите проект Firebase, который вы используете для своего веб-приложения для маркетплейса.
  3. Следуйте инструкциям на экране, пока не дойдете до шага «Настройка расширения» .
  4. В поле «Путь к базе данных в реальном времени» введите drafts . Это путь в базе данных, где сохраняются черновики.
  5. Для параметра «Максимальное количество сохраняемых узлов» введите 5 Это означает, что для каждого объявления будет сохранено пять черновиков, и если будет добавлен ещё один, самый старый черновик будет автоматически удалён.
  6. Нажмите «Установить расширение» .

Пока вы ждете завершения установки...

Расширения мониторинга

При установке расширения создается несколько функций. Возможно, вам захочется проверить, как часто эти функции запускаются, или просмотреть журналы и частоту ошибок. Подробную информацию о том, как отслеживать работу расширения, см. в разделе «Управление установленными расширениями» . Следуйте инструкциям в документации, чтобы просмотреть функции, созданные расширением «Изменение размера изображений» на предыдущем шаге.

Удаление расширений

Чтобы удалить расширение из проекта, у вас может возникнуть соблазн удалить отдельные функции, созданные этим расширением, но это может привести к непредсказуемому поведению, поскольку одно расширение может создавать несколько функций. Узнайте, как удалить расширение, в документации.

Удаление расширения приводит к удалению всех его ресурсов (например, функций) и учетной записи службы, созданной для данного экземпляра расширения. Однако любые артефакты, созданные расширением (например, измененные изображения), останутся в вашем проекте после удаления расширения.

Установка нескольких копий расширения в рамках одного проекта

Вы не ограничены установкой только одного экземпляра данного расширения в проекте. Если вы хотите ограничить количество записей в другом пути, вы можете установить еще один экземпляр этого расширения. Однако для целей этого практического занятия вы установите расширение только один раз.

Посмотрите, как это работает.

  1. Убедитесь, что вы вошли в систему с той же учетной записью, которую использовали для публикации изображения ксилофона или латте.
  2. Создайте несколько черновиков:
  3. Нажмите кнопку «Продать что-нибудь» в правом нижнем углу приложения.
  4. Измените заголовок на «Черновик 1».
  5. Прокрутите вниз до раздела «Черновики» и посмотрите количество черновиков. Их должно быть не менее двух.
  6. Нажмите кнопку FRIENDLY MARKET в верхней панели приложения. Таким образом, у вас будет сохраненный черновик, но его не нужно будет публиковать.
  7. Повторите то же самое для «Черновика 2», «Черновика 3» и так далее до «Черновика 6».
  8. При создании «Черновика 6» обратите внимание, что «Черновик 1» исчезнет из раздела «Черновики» .
  9. Как и в случае с расширением Resize Images, вы можете проверить журналы функций, чтобы увидеть, какие функции были запущены.

Ой, лимит черновиков для сохранения слишком мал.

Ваша служба поддержки связывается с вами и сообщает, что некоторые из ваших самых активных продавцов жалуются на удаление черновиков до того, как они успевают их опубликовать. Вы сверяете свои расчеты с коллегой и понимаете, что ошиблись в 10 000 раз!

Как это исправить? Давайте перенастроим установленное расширение!

  1. В левой панели консоли Firebase нажмите «Расширения» .
  2. На карточке установленного расширения нажмите «Управление» .
  3. В правом верхнем углу нажмите «Перенастроить расширение» .
  4. Измените максимальное количество узлов до 50000 .
  5. Нажмите « Сохранить ».

И это всё, что вам нужно сделать! Пока расширение обновляется, вы можете связаться со службой поддержки и сообщить им, что исправление уже внедряется.

6. Автоматическое удаление пользовательских данных.

Проблема

Ваша служба поддержки снова связалась с вами. Продавцы, удалившие свои аккаунты, по-прежнему получают письма от других пользователей, и они недовольны! Эти продавцы ожидали, что их адреса электронной почты будут удалены из вашей системы при удалении их аккаунтов.

На данный момент служба поддержки удаляет данные каждого пользователя вручную, но должен быть более эффективный способ! Подумайте об этом и представьте себе задачу создания собственного пакетного задания, которое будет периодически запускаться и удалять адреса электронной почты из удалённых учётных записей. Но удаление данных пользователей кажется довольно распространённой проблемой. Возможно, расширения Firebase помогут решить и эту проблему.

Решение

Вы настроите расширение «Удаление пользовательских данных» таким образом, чтобы оно автоматически удаляло узел users/uid из базы данных, когда пользователь удаляет свою учетную запись.

  1. Нажмите кнопку «Установить» на странице с подробной информацией о расширении .
  2. Выберите проект Firebase, который вы используете для своего веб-приложения для маркетплейса.
  3. Следуйте инструкциям на экране, пока не дойдете до шага «Настройка расширения» .
  4. Для путей к базе данных в реальном времени введите sellers/{UID} . Часть sellers — это узел, дочерние элементы которого содержат адреса электронной почты пользователей, а {UID} — это подстановочный знак. При такой конфигурации расширение будет знать, что когда пользователь с UID 1234 удаляет свою учетную запись, расширение должно удалить sellers/1234 из базы данных.
  5. Нажмите «Установить расширение» .

Пока вы ждете завершения установки...

Давайте поговорим о возможности индивидуальной настройки.

В этом практическом занятии вы увидели, что расширения Firebase могут помочь в решении распространенных задач, и что расширения можно настраивать в соответствии с потребностями вашего приложения.

Однако расширения не могут решить все проблемы, и вопрос удаления пользовательских данных — хороший тому пример. Хотя расширение Delete User Data решает проблему, связанную с тем, что электронные письма остаются доступными после удаления учетной записи пользователем, оно не удалит всё. Например, список товаров останется доступным, и любые изображения в Cloud Storage также сохранятся. Расширение Delete User Data позволяет настроить путь к Cloud Storage для удаления, но поскольку пользователи могут загружать множество различных файлов с разными именами, вы не сможете настроить это расширение для автоматического удаления этих файлов. В подобных ситуациях Cloud Functions for Firebase может подойти лучше, поскольку позволяет писать код, специфичный для модели данных вашего приложения.

Продления и выставление счетов

Сами по себе расширения Firebase бесплатны (вы платите только за используемые ресурсы), но за некоторые из необходимых расширению ресурсов может взиматься плата. Этот практический пример разработан для выполнения без платного аккаунта. Однако, оформив тарифный план Flame или Blaze, вы получите доступ ко множеству действительно интересных расширений Firebase.

Например, вы можете сокращать URL-адреса , запускать рассылку электронных писем , экспортировать коллекции в BigQuery и многое другое! Полный каталог расширений можно посмотреть здесь .

Если вам нужно какое-либо расширение, но оно пока недоступно, мы будем рады узнать о нем! Отправьте запрос на добавление функции в службу поддержки Firebase , чтобы предложить новое расширение.

Посмотрите, как это работает.

После завершения установки расширения удалите пользователя и посмотрите, что произойдет:

  1. В консоли Firebase перейдите на панель управления вашей базой данных Realtime Database .
  2. Разверните раздел sellers .
  3. Информация о каждом продавце вводится по его пользовательскому UID. Выберите UID пользователя.
  4. В консоли Firebase перейдите на панель управления аутентификацией и найдите UID этого пользователя.
  5. Разверните меню справа от UID и выберите «Удалить учетную запись» .

2e03923c9d7f1f29.png

  1. Вернитесь на панель управления вашей базы данных в реальном времени . Информация о продавце будет удалена!

7. Поздравляем!

Несмотря на то, что в этом практическом занятии вы написали не так много кода, вы добавили важные функции в свое приложение для маркетплейса.

Вы научились обнаруживать, настраивать, устанавливать и перенастраивать расширения. Кроме того, вы узнали, как отслеживать установленные расширения и как удалять их при необходимости.

Что дальше?

Ознакомьтесь с некоторыми другими расширениями:

Нужен дополнительный собственный серверный код?

Другие полезные документы

Управление расширениями:

Изучение тонкостей работы с расширениями: