В первой части этой серии руководств, посвященной созданию приложения на основе чата в React Native, мы узнали, как создавать повторно используемые элементы формы с помощью библиотеки react-native-paper UI. Наряду с этим мы узнали, как установить библиотеку навигации react-navigation и настроить базовый навигатор стека аутентификации с использованием двух маршрутов.

В этом руководстве давайте начнем использовать серверную службу для добавления функций в реальном времени в приложение чата. Для наших серверных служб я собираюсь использовать Firebase. Мы рассмотрим, как установить и настроить Firebase SDK в приложении React Native с помощью модуля react-native-firebase, а также настроить и настроить аутентификацию электронной почты. Чтобы следовать этому руководству и будущим публикациям, вам потребуется активный проект Firebase.

Создайте новый проект Firebase из консоли

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

Создайте новый проект, как показано ниже:

Заполните детали вашего проекта Firebase:

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

Теперь убедитесь, что включен метод входа по электронной почте. В консоли Firebase перейдите в раздел «Аутентификация» в боковом меню.

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

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

Если вы использовали react-native-firebase версию 5 или ниже, то, вероятно, заметили, что это был монорепозиторий, который использовался для управления всеми зависимостями Firebase из одного модуля.

Версия 6 этой библиотеки требует, чтобы вы устанавливали только те зависимости, основанные на функциях Firebase, которые вы хотите использовать. Например, в текущем приложении для поддержки функции аутентификации электронной почты вам необходимо установить пакеты auth и core.

В окне терминала выполните следующую команду:

Добавьте учетные данные Firebase в свое приложение iOS

Firebase предоставляет файл с именем GoogleService-Info.plist, который содержит все ключи API, а также другие учетные данные для аутентификации для устройств iOS.

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

Перейдите в раздел «Ваши приложения» и щелкните значок iOS, чтобы выбрать платформу.

Введите данные приложения и нажмите «Зарегистрировать приложение».

Затем загрузите файл GoogleService-Info.plist, как показано ниже:

Откройте Xcode, затем откройте файл /ios/ChatApp.xcodeproj. Щелкните правой кнопкой мыши имя проекта и выберите параметр «Добавить файлы», а затем выберите файл, который нужно добавить в этот проект.

Затем откройте ios/ChatApp/AppDelegate.m и добавьте следующий заголовок:

В том же файле в методе didFinishLaunchingWithOptions добавьте следующий метод настройки:

Наконец, вернитесь в окно терминала, чтобы установить поды:

Убедитесь, что вы создали приложение для iOS:

Вот и все. Конфигурация Firebase SDK и учетных данных в приложении React Native завершена.

Создайте домашний экран

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

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

Создайте новый компонент экрана с именем HomeScreen.js внутри каталога src/screens/ с помощью следующего фрагмента кода:

Создать навигатор домашнего стека

Создайте новый файл навигатора стека с именем HomeStack.js внутри src/navigation.js. Здесь мы сохраним те маршруты, которые доступны только после входа в систему. Вы можете рассматривать их как защищенные маршруты.

Откройте этот файл и добавьте следующий фрагмент кода. Ничего нового в плане создания навигатора стека не происходит:

Создайте поставщика аутентификации

В этом разделе мы создадим поставщика аутентификации, чтобы проверить, вошел ли пользователь в систему или нет, и получить к нему доступ, если он вошел в систему.

Создайте новый файл с именем AuthProvider.js внутри src/navigation/. Начните с импорта следующих операторов:

Затем создайте AuthContext и обязательно экспортируйте его, поскольку вы собираетесь использовать его на нескольких разных экранах.

В React.js Context API предназначен для обмена глобальными данными для дерева компонентов React. Когда вы создаете контекст (как указано выше), необходимо передать значение по умолчанию. Это значение используется, когда компонент не имеет подходящего поставщика.

Провайдер позволяет компонентам React подписываться на изменения контекста. Чтобы создать поставщика аутентификации, экспортируйте функцию с именем AuthProvider. Этот провайдер позволит компонентам экрана получить доступ к текущему пользователю в приложении. Определите переменную состояния с именем user.

В опоре value выше также были определены некоторые функции. Эти функции теперь доступны для использования в любом месте дерева компонентов экранов с помощью React Context.

Каждая из функций использует методы Firebase для взаимодействия с серверной службой Firebase в реальном времени. Для функций входа и регистрации требуются email и password пользователя для проверки / сохранения учетных данных. Метод выхода из системы вызывает простой signOut() метод.

Все эти методы Firebase доступны в пакете @react-native-firebase/auth. Обратите внимание, что все эти функции являются асинхронными действиями, и поэтому использование синтаксиса async await помогает.

Обертывание маршрутов с помощью провайдера аутентификации

Теперь провайдер аутентификации создан, но как его использовать для набора компонентов в текущем дереве приложения? Что ж, мы должны обернуть этого провайдера вокруг Routes, чтобы получить доступ к вспомогательным функциям и значению текущего user (как описано в предыдущем разделе) в компонентах экрана навигатора аутентификации.

Откройте файл navigation/index.js и измените его следующим образом:

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

Проверьте, вошел ли пользователь в систему или нет

Чтобы проверить, вошел ли пользователь в систему, давайте изменим файл navigation/Routes.js. Используя значение user от поставщика аутентификации, мы переключаемся между навигаторами стека. Для начала импортируем следующие операторы:

Из приведенного выше фрагмента пока игнорируйте компонент Loading. Вы собираетесь создать его в конце этого раздела.

Теперь внутри функции Routes определите две переменные состояния, initializing и loading, чтобы проверить, вошел ли пользователь в систему или нет. Также из значения контекста выберите user и setUser.

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

Наконец, создайте новый файл компонента с именем Loading.js внутри каталога src/components/. Этот компонент будет отвечать за отображение счетчика загрузки.

Завершение приложения

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

Начните с открытия LoginScreen.js. Импортируйте useContext из React и AuthContext из AuthProvider.

Внутри функции LoginScreen обязательно добавьте опору onPress, как показано ниже:

Точно так же нам нужно изменить файл SignupScreen.js:

Наконец, измените HomeScreen, чтобы добавить кнопку выхода, и когда пользователь находится в состоянии входа в систему, отобразите его пользователя uid (уникальный идентификатор в Firebase для различения и хранения разных пользователей).

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

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

Заключение

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

Что дальше?

В следующем посте этой серии мы собираемся изучить, как создать модальный экран с помощью react-navigation навигатора стека. Этот модальный экран будет иметь отдельный навигатор, а также будет использоваться для создания новой комнаты чата.

Затем мы собираемся добавить базу данных Firebase NoSQL Firestore и добавить запрос для сохранения имени комнаты чата в коллекции.

Вот часть 3 👇



Приложение чата с React Native (часть 3): добавление Firestore для создания и хранения комнат чата
Создание структуры и потока навигации для создания чатов и управления ими. .comet.ml



Вы можете найти полный исходный код этого проекта в этом репозитории Github.

👉 Вот список ресурсов, используемых в этом руководстве:

💙 Чтобы узнать больше о React Native, ознакомьтесь с этими ресурсами:

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

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

Если вы хотите внести свой вклад, отправляйтесь на наш призыв к участникам. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и Comet Newsletter), присоединиться к нам в » «Slack и подписаться на Comet в Twitter и LinkedIn для получения ресурсов, событий и гораздо больше, что поможет вам быстрее и лучше строить лучшие модели машинного обучения.