Эта страница переведена с помощью Cloud Translation API.

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

1. Введение

Цели

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

Что ты построишь

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

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

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

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

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

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

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

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

Создать проект Firebase

В консоли Firebase нажмите «Добавить проект» и назовите проект Firebase FriendlyMarket .
Щелкните параметры создания проекта. Примите условия Firebase. Пропустите настройку Google Analytics, поскольку вы не будете использовать Analytics в этом приложении.
Подождите, пока проект будет подготовлен, а затем нажмите Продолжить .

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

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

Теперь вы включите и настроите эти продукты Firebase, используя консоль Firebase.

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

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

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

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

В разделе «Разработка» на левой панели консоли Firebase нажмите «База данных» .
Прокрутите страницу вниз за панель Cloud Firestore и нажмите «Создать базу данных» на панели «База данных в реальном времени ».

Выберите «Запустить в заблокированном режиме» , а затем нажмите «Включить» .

Установите правила безопасности

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

В верхней части панели управления базой данных реального времени щелкните вкладку «Правила» .

е233a24a38b37e95.png

Скопируйте и вставьте следующий набор правил в поле правил на вкладке «Правила» :

{
  "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"
      }
  }
}

Нажмите «Опубликовать» .

Включить облачное хранилище

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

В разделе «Разработка» на левой панели консоли Firebase нажмите «Хранилище» .
Нажмите «Начать» .

Примите настройки по умолчанию для создания сегмента хранилища по умолчанию (нажмите « Далее» , сохраните местоположение по умолчанию и нажмите «Готово »).

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

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

Скопируйте и вставьте следующий набор правил в поле правил на вкладке «Правила» :

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    
    match /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }
    
  }
}

Нажмите «Опубликовать» .

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

Форк проекта StackBlitz

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

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

Перейдите по этому URL-адресу для начального кода: https://stackblitz.com/edit/Friendlymarket-codelab .
В верхней части страницы StackBlitz нажмите Fork .

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

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

В StackBlitz просмотрите файл src/firebase-config.js . Здесь вы добавите объект конфигурации Firebase.
Вернувшись в консоль Firebase, перейдите на страницу обзора вашего проекта, нажав «Обзор проекта» в левом верхнем углу.
В центре страницы обзора вашего проекта щелкните значок Интернета. чтобы создать новое веб-приложение Firebase.
Зарегистрируйте приложение под ником FriendlyMarket Codelab .
Для этой лаборатории кода не устанавливайте флажок «Также настроить хостинг Firebase для этого приложения ». Вместо этого вы собираетесь использовать панель предварительного просмотра StackBlitz.
Нажмите Зарегистрировать приложение .
Скопируйте объект конфигурации Firebase вашего приложения в буфер обмена. Не копируйте теги <script> . Примечание. Если вам понадобится найти конфигурацию позже, следуйте инструкциям здесь .

Нажмите «Продолжить работу с консолью ».

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

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

Какова отправная точка для этого приложения?

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

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

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

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

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

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

Проблема

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

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

Решение

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

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

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

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

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

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

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

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

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

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

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

public, max-age=31536000

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

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

Установка с помощью интерфейса командной строки 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 .

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

В StackBlitz откройте файл src/firebase-refs.js .
Замените существующую функцию 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)
  };
}

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

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

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

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

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

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

5. Перенастройте расширение

Проблема

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

Решение

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

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

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

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

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

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

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

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

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

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

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

Посмотрите это в действии

Убедитесь, что вы вошли в систему под той учетной записью, которую использовали для публикации ксилофона или латте.
Создайте несколько черновиков:
Нажмите кнопку «Продать что-нибудь» в правом нижнем углу приложения.
Измените заголовок , указав «Черновик 1».
Прокрутите вниз до раздела «Черновики» и просмотрите количество черновиков. Их должно быть как минимум два.
Нажмите кнопку ДРУЖЕСТВЕННЫЙ РЫНОК в верхней панели приложения. Таким образом, у вас будет сохраненный черновик, но вам не нужно будет его публиковать.
Повторите эти действия для «Черновика 2», «Черновика 3» и т. д. до «Черновика 6».
Когда вы создаете «Черновик 6», обратите внимание, что «Черновик 1 исчезает из раздела «Черновики» .
Как и в случае с расширением Resize Images, вы можете проверить журналы функций, чтобы узнать, какие функции сработали.

К сожалению, лимит черновиков слишком мал.

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

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

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

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

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

Проблема

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

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

Решение

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

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

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

Давайте поговорим о настраиваемости

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

Однако расширения не могут решить все проблемы, и проблема удаления пользовательских данных — хороший тому пример. Хотя расширение «Удалить пользовательские данные» устраняет текущую жалобу о том, что электронные письма по-прежнему доступны после того, как пользователь удаляет свою учетную запись, расширение не удалит все. Например, список элементов по-прежнему доступен, и любые изображения в Cloud Storage также останутся. Расширение «Удалить пользовательские данные» позволяет нам настроить путь к облачному хранилищу для удаления, но поскольку пользователи могут загружать множество разных файлов с множеством разных имен, вы не сможете настроить это расширение для автоматического удаления этих артефактов. Для подобных ситуаций лучше подойдут облачные функции для Firebase , чтобы вы могли написать код, соответствующий модели данных вашего приложения.

Расширения и оплата

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

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

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

Посмотрите это в действии

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

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

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

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

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

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

Что дальше?

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

Перевести текстовые строки в Cloud Firestore (требуется платежный аккаунт)
Добавляйте новых пользователей в списки адресов электронной почты Mailchimp (требуется учетная запись для выставления счетов)
Сократить URL-адреса (требуется платежный аккаунт)

Вам нужно больше пользовательского серверного кода?

Ознакомьтесь с лабораторией кода Cloud Functions для Firebase

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

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

Узнайте более подробную информацию о расширениях:

Просмотрите исходный код и документацию для каждого расширения на GitHub.
Узнайте о разрешениях и доступе, предоставленном расширению.

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

1. Введение

Цели

Что ты построишь

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

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

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

Создать проект Firebase

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

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

Установите правила безопасности

Включить облачное хранилище

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

Форк проекта StackBlitz

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

Какова отправная точка для этого приложения?

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

Проблема

Решение

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

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

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

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

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

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

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

5. Перенастройте расширение

Проблема

Решение

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

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

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

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

Посмотрите это в действии

К сожалению, лимит черновиков слишком мал.

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

Проблема

Решение

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

Давайте поговорим о настраиваемости

Расширения и оплата

Посмотрите это в действии

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

Что дальше?

Вам нужно больше пользовательского серверного кода?

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