Самый простой способ (безусловно!) Создать настоящее веб-приложение React + Firebase

Самый простой способ (безусловно!) Создать настоящее веб-приложение React + Firebase

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

Эта статья покажет вам, как создать масштабируемое веб-приложение в реальном времени, сочетающее эти два аспекта. Вот живая демонстрация результата, минимальный локальный клон Yelp, который позволяет вам писать обзоры, используя вашу учетную запись Google:
Restaurants Guide

Вам не нужно писать ни одной строчки кода, чтобы добраться до этой точки, но код React (JavaScript / JSX) будет доступен для изменения и расширения.

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

React - это интерфейсная технология JavaScript, созданная Facebook. Вы можете думать о React как о важной части, которой не хватает в Интернете, потому что HTML описывает документы, а не пользовательские интерфейсы приложений. React - это простой способ определить структуру пользовательского интерфейса и то, как она обновляется с течением времени по мере изменения данных. Первоначально разработанная для веб-приложений, парадигма React оказалась настолько успешной, что с тех пор она была применена к множеству других целей: есть React Native для мобильных приложений, ReactVR для виртуальной реальности и скоро. В этом обсуждении мы сосредоточимся на React для Интернета.

Firebase - это набор сервисов от Google для создания серверной части мобильных и веб-приложений. Первоначально независимый стартап Firebase был приобретен Google и с тех пор интегрирован с глобальной облачной инфраструктурой Google. Центральным элементом Firebase является база данных, но она также предоставляет все другие услуги, необходимые для приложения: аутентификация, хранение файлов и облачные функции для запуска кода на сервере.

Первоначальный продукт Firebase назывался Realtime Database. После приобретения Google Firebase создала продукт баз данных нового поколения, и теперь он доступен как Cloud Firestore. (По состоянию на апрель 2018 года сервис официально все еще находится в стадии бета-тестирования, но уже работает очень надежно.)

Эта статья посвящена новинкам Cloud Firestore, а не «старой» базе данных Firebase. Это важно, потому что довольно легко запутаться в продуктах даже на веб-сайте Firebase.

Слоган Cloud Firestore - «Храните и синхронизируйте данные приложений в глобальном масштабе». Это быстро, работает в режиме реального времени, поддерживается инфраструктурой автоматического масштабирования Google и имеет приятный пользовательский интерфейс администратора, который упрощает управление данными без необходимости запоминать волшебные заклинания SQL. Это настоящая база данных нового поколения для приложений.

Единственный вопросительный знак - это цена. У Firebase есть хорошие бесплатные уровни и уровни 25 долларов в месяц, но помимо этого, они измеряются: вы платите за количество операций чтения и записи, выполненных пользователями. Что произойдет, если ваш сервис станет очень популярным? Многие люди возразят, что это хорошая проблема, но независимо от этого масштабируемость платформы Google означает, что вам не придется внезапно перестраивать всю серверную часть, если использование резко возрастет. Это фактор снижения затрат и управления рисками, который вы также должны учитывать. (Если вы все еще беспокоитесь, прочитайте эту статью: в конце у нас есть несколько дополнительных идей о том, как управлять ценовым риском Firebase.)

React Studio ❤ Cloud Firestore

Короче говоря, в Cloud Firestore есть что нравится. Но разработка приложений для совершенно новой базы данных требует значительного обучения. Если вы одновременно пытаетесь изучить современные методы React, это может быть довольно сложно.

Войдите в React Studio. Это бесплатное приложение, созданное Neonto, соединяет мир дизайна и разработки пользовательского интерфейса. Вы можете вносить данные в реальном времени, импортировать проекты из таких инструментов, как Sketch, используя наши плагины передачи, добавлять отзывчивость и взаимодействия, а также создавать полные потоки приложений. Один щелчок - и вы получите чистый код в полнофункциональной структуре приложения React (с использованием скаффолда Facebook Create-React-App).

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

Получить React Studio

Вы можете получить React Studio бесплатно по адресу: https://reactstudio.com

В настоящее время он доступен только для Mac. (Если вам нужна версия Windows, это возможно как часть индивидуализированной корпоративной версии - свяжитесь с [email protected]. Мы очень рады внести изменения, но учтите, что мы не можем сделать индивидуальная разработка для Windows, если вы не обязуетесь получить хотя бы 10 рабочих мест по долгосрочному контракту на техническое обслуживание.)

Скачайте плагин Firebase

React Studio имеет продвинутую систему плагинов, которая позволяет переключаться между серверными приложениями так же легко, как загружать другой плагин в графическом интерфейсе.

В последней версии React Studio 1.5 мы добавили плагин для подключения к Firebase Cloud Firestore. Вы можете найти его в магазине плагинов - нажмите кнопку на панели инструментов. Несмотря на то, что у плагина есть номинальная цена в кредитах магазина, вы получаете бесплатные кредиты после установки React Studio, поэтому плагин Firebase не будет стоить вам никаких денег.

Когда плагин будет установлен из Магазина, вас спросят, хотите ли вы открыть пример проекта. Выберите этот вариант, потому что мы будем использовать пример проекта в этом руководстве. (Если вы случайно пропустили его, не волнуйтесь: пример проекта был сохранен в папке «Документы».)

Планируем путешествие: что есть в демонстрационном приложении "Рестораны"

Как упоминалось в начале, мы собираемся создать локальный клон Yelp, например:
Restaurants Guide

Когда вы загрузили плагин Firebase из React Studio Plugin Store, вы получили пример проекта, который в точности совпадает с демонстрацией этого руководства по ресторанам. (Если у вас еще нет плагина, см. Шаги выше.) На этом этапе у вас должен быть открыт проект. Обратите внимание, что в нем отсутствует настройка Firebase - вам потребуется предоставить информацию о собственной базе данных, чтобы приложение работало. Мы сделаем это в ближайшее время в качестве первого шага.

Вот краткое изложение видимых пользователям функций в нашем приложении:

• Экран входа. Аутентификация (вход) с использованием входа в систему Google. Вам нужно только войти в систему, чтобы написать отзыв, поэтому есть возможность продолжить, не входя в систему.
• Главный экран. Список ресторанов. Список адаптивный (переключается на меньшее количество столбцов на узком мобильном экране). Каждый пункт ресторана содержит кнопку «Подробности», которая переводит вас на отдельный экран.
• Экран сведений о ресторане. Отображает подробную информацию о ресторанах и список отзывов о месте. В правом нижнем углу есть плавающая кнопка действия со знаком +, позволяющая добавить отзыв.
• Экран «Написать отзыв». Простая форма со следующими данными: ваше изображение пользователя (полученное из вашего логина Google), ваше имя и адрес электронной почты (также из логина), заголовок, рейтинг в звездочках от одного до пяти. , и сам текст отзыва.

Это основные видимые пользователю функции нашего «локального клона Yelp». Однако есть еще пара особенностей, которые мы должны учитывать при проектировании. Полезно взглянуть на карту проекта в React Studio, поскольку она раскрывает все элементы, которые на самом деле вносят свой вклад в дизайн UX:

Мы видим несколько вещей, которые не были упомянуты в приведенном выше списке видимых пользователю функций:

• Фактически, это два блока «Вход в систему»: один в начале, а другой прямо перед экраном записи обзора. Этот проверяет, что пользователь вошел в систему, прежде чем позволить пользователю продолжить. Если вход уже был доступен, шлюз входа автоматически переходит на следующий экран, поэтому мы могли его не увидеть.
• С правой стороны есть два компонента верхнего уровня для формы звезды, пустая и заполненная версии. Они используются на экране «Написать отзыв». Мы используем плагин Rating, и у него есть возможность получать внешний вид от внешних компонентов. Их наличие на верхнем уровне дает нам полезное представление о пользовательских элементах пользовательского интерфейса, которые есть в проекте.
• На главном экране используется компонент с именем UserInfo. Это предоставляет информацию для входа в систему в правом верхнем углу экрана.

Настройка базы данных

Давайте перейдем к Firebase. Вы можете создать бесплатную учетную запись для Cloud Firestore на сайте продукта. После настройки учетной записи перейдите в Firebase Console и создайте проект для демонстрационного приложения Рестораны.

Выберите свой новый проект и перейдите в базу данных. Убедитесь, что «Cloud Firestore (бета)» выбран с помощью кнопки вверху (рядом с большим белым заголовком «База данных»).

В Cloud Firestore все данные хранятся в «документах», которые похожи на строки таблицы в традиционной базе данных. Каждый документ должен принадлежать к коллекции, которая, в свою очередь, очень похожа на таблицу в традиционной базе данных.

Нажмите «Добавить коллекцию» и сделайте так, чтобы оно называлось «рестораны»:

Щелкните «Далее». Теперь вас попросят определить первый документ для этой новой коллекции. Этот шаг важен, поскольку он определяет тип данных, которые ваше приложение будет хранить в этой коллекции. (Это примерно эквивалентно созданию схемы таблицы в традиционной базе данных SQL, если этот мир вам знаком. Разница в том, что коллекции Firebase не применяют схему: каждый документ может также содержать другие поля в дополнение к тем, которые вы предоставляете вот для первого.)

Для описания ресторана нам понадобится ряд полей:

• адрес ресторана
• restaurantCoverImage
• restaurantDescription
• restaurantEmail
• restaurantName
• restaurantOpeningHours
• restaurantPhone
• restaurantWWW

Для простоты используйте для всех тип «строка». На скриншоте выше показан пример заполнения этих полей в исходном документе.

(Вам не обязательно использовать одни и те же имена - например, вы можете отказаться от префикса «ресторан» - но если вы измените имена полей, вам нужно будет обновить документ React Studio, чтобы использовать совпадающие имена свойств где угодно. данные связаны. Кроме того, прежде чем это сделать, см. ниже объяснение того, почему существует префикс.)

Как только вы откроете первый ресторан, сделайте то же самое с отзывами. Создайте новую коллекцию с названием «отзывы»:

… И заполните первый документ этими полями, опять же типа «строка»:

• restaurantID
• reviewDate
• reviewRating
• reviewText

В случае с ресторанами добавление префикса «ресторан» во все поля казалось излишним. Но в обзоре мы видим преимущество этого стиля именования, потому что одно из полей называется «restaurantID», а не «обзор [что-то]». Это позволяет нам легко взглянуть на поля и заметить, что есть внешняя ссылка на другую коллекцию.

Наша модель данных для «локального клона Yelp» очень проста. Эти две коллекции совершенно очевидны, за исключением одной ссылки «restaurantID», которая связывает отзывы с ресторанами.

Коллекции и документы получают автоматически сгенерированные идентификаторы объектов - длинные строки с цифрами и буквами, например x3LBcxO4JwXc2. Эти идентификаторы объектов уникальны и могут использоваться для поиска любого фрагмента данных в базе данных Cloud Firestore.

Чтобы сделать обзор, который всегда «принадлежит» определенному ресторану, все, что нам нужно было сделать, это создать это поле «restaurantID». Наше клиентское приложение (созданное в React Studio) будет отвечать за то, чтобы любые новые отзывы, создаваемые пользователями, содержали действительный идентификатор документа в поле «restaurantID». Если в коллекции каким-то образом есть отзывы, не имеющие значения для этого поля, это ничего не нарушает - эти обзоры просто нигде не будут отображаться, потому что клиентское приложение всегда запрашивает отзывы, отфильтрованные по определенному идентификатору ресторана с использованием запрос. Позже мы увидим, как это работает на стороне React Studio.

Настройка прав доступа к базе данных

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

По-прежнему в разделе «База данных» перейдите на страницу «Правила»:

Введите следующее правило безопасности, как показано выше:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

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

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

Настройка аутентификации Firebase

Чтобы логин работал, нам нужно включить аутентификацию Firebase. Перейдите на вкладку «Аутентификация» и выберите страницу «Метод входа»:

Включите пока только вход в систему Google. (Вы можете включить другие, но у них есть свои причуды: некоторым, таким как Twitter и Facebook, нужны ключи API от поставщиков услуг, в то время как другие, такие как электронная почта и телефон, не предоставляют все данные, которые мы используем в демонстрации, например user изображения аватаров. Чтобы упростить задачу, мы сначала воспользуемся Google.)

Подключение Firebase к проекту React Studio

Теперь мы закончили настройку Firebase и можем перейти в React Studio.

Первое, что нам нужно, это связать проект React Studio с вашей новой базой данных Cloud Firestore. Щелкните значок шестеренки рядом с «Обзор проекта», чтобы открыть настройки проекта. Затем нажмите «Добавить Firebase в свое веб-приложение», как показано ниже:

Firebase покажет вам фрагмент кода HTML + JavaScript. Он содержит конфигурацию, которую нам нужно скопировать в React Studio:

Однако React Studio не нужна вся эта HTML-энчилада тегов ‹script›. Все, что вам нужно скопировать, это то, что находится в фигурных скобках после «var config =» (но не забудьте включить фигурные скобки).

В React Studio откройте вкладку «Данные» и нажмите «Настройка подключаемого модуля данных…».

Слева вы увидите список всех подключаемых модулей данных в этом проекте. Хотя в списке показаны все возможные типы, такие как Google Sheets и Generic JSON, они пусты - единственный элемент находится в Firebase (Cloud Firestore) и называется firebase-restaurantguide. Щелкните по нему. Затем щелкните текстовую область под «Firebase config (JSON)» и вставьте туда свою конфигурацию Firebase, например:

Нажмите «Закрыть», чтобы закрыть страницу настройки подключаемого модуля данных.

Затем щелкните вкладку «Рестораны», чтобы просмотреть эту таблицу данных, и нажмите кнопку «Обновить данные из службы». Вы должны увидеть данные о вашем ресторане Firebase в React Studio. (Если вы получили сообщение об ошибке индекса, не беспокойтесь, это легко исправить - см. Ниже в разделе Как добавить индекс в свою коллекцию Firebase.) Сделайте то же самое для обзоров: откройте лист и нажмите «Обновить данные из службы».

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

Нажмите «Открыть в веб-браузере» на панели инструментов React Studio. Это сначала экспортирует копию клиентского приложения как проект React, затем запускает локальный веб-сервер (по URL-адресу localhost: 3000) и открывает этот сайт в веб-браузере по умолчанию. После завершения экспорта вы должны увидеть, как в браузере открывается копия приложения «Ресторанный гид», но отображаются данные, которые вы ввели ранее в Firebase Console.

Все должно работать из коробки. Вы можете войти в систему с любым количеством учетных записей Google и публиковать обзоры в одном ресторане, который вы настроили в базе данных. (Когда пользователи входят в систему, их информация добавляется в список пользователей в Firebase Console ›Проверка подлинности. Это удобный способ узнать, кто использует ваше приложение.)

Как коллекции Firebase связаны с таблицами данных React Studio

Есть две важные концепции, которые связывают Cloud Firestore с React Studio. Первый - это таблицы данных, которые похожи на «просмотры» ваших коллекций Firebase. Второй - свойства React, которые будут связаны с полями в ваших документах Firebase.

Давайте сначала посмотрим, как настроены таблицы данных. Вы можете создать любое количество таблиц данных в React Studio, но обычно они будут точно соответствовать вашим коллекциям Cloud Firestore. На вкладке «Данные» нажмите «Рестораны». Это отображает таблицу с именем, ну, Рестораны:

Содержимое таблицы данных загружается из Firebase, но это не происходит автоматически - ее нужно запускать вручную. (Это необходимо для обеспечения единообразия при проектировании.) Нажмите «Обновить данные из службы», и вы увидите, что появятся данные из коллекции ресторанов Firebase.

В правом нижнем углу несколько интересных настроек. Идентификатор коллекции - это имя коллекции, связанной с этой таблицей данных. Запрос - это свободное поле, в которое вы можете вводить запросы, написанные в формате запроса Cloud Firestore.

Эти запросы на самом деле являются вызовами методов JavaScript с использованием Cloud Firestore API. Вы можете связать эти методы с точкой, как показано в примерах Cloud Firestore (см. Ссылку выше). Для листа «Рестораны» у нас есть два связанных вместе метода запроса: сначала orderBy (), затем limit (). Вызов orderBy () просто гарантирует, что данные возвращаются в алфавитном порядке по названию ресторана. Однако с вызовом limit () происходит нечто более особенное. Его значение:

limit($slot('ds_numberOfRestaurants'))

$ slot - это специальная форма шаблона, доступная для запросов в React Studio. Это позволяет вам искать значение слота данных во время выполнения. Слоты данных - это переменные верхнего уровня, которые вы можете определять и изменять в React Studio (вы можете найти их на вкладке «Данные» в разделе «Слоты»).

В этом случае значение запроса limit () считывается из слота данных с именем ds_numberOfRestaurants. Что происходит, так это то, что мы хотим позволить пользователю выбирать, сколько ресторанов будет отображаться на главном экране. Если вы посмотрите на демонстрационное приложение, вы увидите эту опцию в правом верхнем углу. Итак, когда пользователь выбирает значение в пользовательском интерфейсе, оно сохраняется в слоте данных. Поскольку в таблице данных Restaurants есть запрос, который относится к слоту данных, он будет перезагружаться всякий раз, когда значение слота данных обновляется. Все механизмы для отслеживания слотов данных и перезагрузки данных из Firebase автоматически генерируются для вас - все, что вам нужно сделать, это использовать синтаксис $ slot в запросе, а React Studio позаботится обо всем остальном.

Взгляните на лист данных обзоров дальше. Там есть более сложный запрос:

Мы снова видим вызов метода orderBy (), но до этого есть метод where (), который выглядит следующим образом:

where("restaurantID", "==", "$slot('ds_selectedRestaurantId')")

Метод запроса where () имеет решающее значение, поскольку он позволяет нам фильтровать информацию, которую мы хотим получить от коллекции. В этом случае нам нужны только обзоры, в которых значение поля restaurantId равно значению слота данных ds_selectedRestaurantId в React Studio. Как обсуждалось выше, использование синтаксиса $ slot в запросе гарантирует, что таблица данных будет обновляться всякий раз, когда обновляется значение слота данных. На практике происходит следующее: когда пользователь нажимает кнопку «Подробности» для определенного ресторана, идентификатор этого ресторана сохраняется в слоте данных, что затем приводит к обновлению таблицы данных.

Довольно просто, правда? Посмотрим, как это делается на самом деле. Но сначала краткий обходной путь, чтобы исправить отсутствующий индекс, обычную ситуацию при работе с запросами Cloud Firestore.

Как добавить индекс в вашу коллекцию Firebase

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

К счастью, разработчики Firebase упростили решение этой проблемы. Сообщение об ошибке содержит ссылку на консоль Firebase.

Вы можете просто скопировать ссылку из сообщения об ошибке React Studio, вставить ее в веб-браузер, и вы попадете на экран с нужным индексом:

Просто нажмите «Создать индекс», затем вернитесь в React Studio и перезагрузите данные в таблицу данных.

Свойства и взаимодействия для компонента "Ресторан"

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

Этот компонент пользовательского интерфейса повторяется в списке ресторанов. Тема слишком велика, чтобы ее здесь освещать, но чтобы узнать больше о том, как связаны данные, списки и свойства, ознакомьтесь с этим подробным руководством:
Создание списков и использование данных в реальном времени в React Studio

В верхнем левом углу холста вы можете увидеть список свойств, таких как restaurantName, restaurantAddress и т. Д. Тонкие синие линии от этих имен указывают на элементы пользовательского интерфейса, которые связаны с каждой собственностью. Чтобы связывание данных работало правильно, используемые имена свойств должны совпадать с полями документа в вашей коллекции Firebase Restaurants ранее. Вы можете щелкнуть любой элемент, чтобы просмотреть его на панели «Инспектор» справа, а затем открыть вкладку «Данные», чтобы просмотреть, как связаны свойства.

Посмотрим, как происходит взаимодействие. Нажмите кнопку «Подробности» на холсте. Выберите вкладку «Взаимодействие», и вы увидите следующее:

Здесь много чего происходит. Взаимодействие с касанием фактически связано с двумя действиями - вы можете определить это по цифрам 1/2 вверху рядом с надписью «Когда пользователь нажимает». Первым действием является «Сохранить данные», а его целью является слот данных с именем ds_selectedRestaurantId. (Помните, что это тот же слот данных, который использовался в запросе для таблицы данных Reviews.)

Значение, которое сохраняется в слоте данных, берется из свойства компонента. Эта часть несколько неочевидна и требует пояснений. Чтобы получить идентификатор ресторана, относящийся к текущему элементу, мы получаем доступ к свойству с именем document_key. Как это работает?

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

Но что такое «document_key»? В Firebase такого поля не было. Это значение фактически предоставляется плагином Cloud Firestore, который помещает туда идентификатор документа.

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

Затем нажмите маленькую кнопку «2», чтобы показать другое действие:

Это действие имеет тип «Перейти» и ведет к экрану RestaurantDetails. Действия связаны друг с другом, поэтому, когда пользователь нажимает на эту кнопку, сначала значение document_key сохраняется в слоте данных, а затем выполняется это действие «Перейти к».

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

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

Мы можем открыть экран RestaurantDetails, чтобы понять, почему это полезно:

В верхнем левом углу холста мы снова видим используемые свойства. Некоторые из них помечены как «переносимые навигацией», например restaurantCoverImage, restaurantName и т. Д. Эти свойства были просто скопированы из элемента списка, приведенного здесь.

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

Элемент входа в Firebase

Ранее мы видели плагин данных Cloud Firestore, когда вставляли конфигурацию. На самом деле это не единственный плагин, который был установлен в React Studio, когда вы загрузили пакет Firebase из React Studio Plugin Store. Есть еще один под названием Firebase Login, и вы можете увидеть его в действии в блоках Login Gate.

Дважды щелкните окно входа в систему, которое находится рядом с экраном Написать отзыв. Затем нажмите элемент «Зарегистрироваться в Google», и вы увидите настройки для плагина Firebase Login:

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

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

Перейдите на вкладку Экран:

Для правильной работы входа в Firebase важно выбрать тип входа «Веб-сервис» и выбрать нужный плагин в меню кнопки «Сервис».

Конец - а может, начало чего-то великого

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

• Создание списков и использование оперативных данных
• Разработка адаптивных веб-макетов
• Задатки компонента
• Познакомьтесь с компилятором дизайна

Чтобы оставить вас с прощальной мыслью ... Если вас беспокоит цена Firebase, подумайте о том, что вы только что прочитали о том, как плагины Firebase работают в React Studio. Напомним: есть плагин веб-сервиса Cloud Firestore, который отвечает за загрузку данных в таблицы и отправку данных форм в базу данных, а затем есть еще один плагин Firebase Login, который был помещен в Login Gate для обеспечения пользовательского интерфейса аутентификации.

Что, если вы захотите заменить Firebase другим сервером? Все, что вам нужно сделать, это заменить эти два плагина чем-нибудь другим. Это может быть либо пользовательская серверная часть, либо другая компания типа «Backend-as-a-Service». Каким бы ни был бэкэнд, вы можете обернуть его в плагин React Studio, потому что плагины на самом деле являются просто шаблонами генерации кода JavaScript.

Если вы хотите убедиться в этом сами, откройте диспетчер плагинов из меню плагинов React Studio, затем выберите плагин Cloud Firestore и нажмите «Изменить». Вы увидите структуру плагина прямо здесь. Все это написано на JavaScript и размещено в файловой системе в виде пакета. Чтобы заменить его другим сервером, вы можете буквально сделать копию плагина Cloud Firestore и заменить шаблоны кодогенерации.

Таким образом React Studio дает вам совершенно новую гибкость в интерфейсе. В вашей кодовой базе больше нет вариантов, связанных с серверной частью, а вместо этого они изолированы в плагинах. Хотите выйти из Firebase? Поменяйте местами плагины, нажмите «Экспорт», и вдруг ваш интерфейс будет подключен к другой службе. Выполнение такого рода глубокой модификации базы кода вручную может потребовать много работы и легко создать новые ошибки.

Подробнее об интеграции React Studio и Backend

Обновление 24 января 2019 г.

Мы выпустили серию видео из пяти шагов на Youtube, посвященную созданию приложения для чата с помощью React Studio и серверной части Firebase Cloud Firestore. Найдите полный плейлист серии ниже.

Https://www.youtube.com/watch?v=1OZFsgHa3fE&list=PLKrYy47a9BRleRGnLAarv5zkf_2eDUrh6

Спасибо за чтение и до скорой встречи в удивительном мире Firebase и React Studio!