Я разработчик программного обеспечения, недавно прошедший программу Grace Hopper, 17-недельный иммерсивный курс, посвященный полнофункциональному Javascript. Для моего последнего проекта мы с товарищами по команде решили исследовать мир React Native. Для разработчиков Javascript, имевших опыт работы с React, React Native был логичным выбором. У нас не было времени выучить другой язык (у нас было меньше 3 недель… ох!), но мы все равно хотели испытать себя с помощью новой технологии. Нашим первым препятствием была настройка аутентификации и сохранение аутентифицированного пользователя во всем состоянии приложения. В итоге мы использовали аутентификацию Firebase, которую было очень легко добавить, как только мы освоились. Я создал это руководство для начинающих React Native, которым нужна простая отправная точка при разработке приложения, требующего аутентификации.
Что будет охватывать этот учебник?
Мы рассмотрим настройку базовой структуры и потока аутентификации пользователей для приложения React Native. Мы настроим три основных экрана в React Native, добавим Firebase в приложение и будем использовать React Context API для сохранения аутентифицированного пользователя. Эта настройка может помочь вам начать работу перед реализацией собственных функций!
Начало работы с React Native
Лучший способ начать работу с React Native — ознакомиться с документами. Они предоставляют два варианта настройки среды разработки. Вы можете использовать Expo, набор инструментов, построенный на основе React Native, который позволяет настроить приложение и протестировать его на своем телефоне за считанные минуты. Основное преимущество Expo заключается в том, что он делает настройку, тестирование и совместное использование вашего приложения достаточно простыми для начинающего разработчика. Другой вариант — использовать React Native CLI для настройки вашего приложения, что потребует установки как XCode, так и Android Studio, если вы хотите разрабатывать как для iOS, так и для Android, и настроить проект сложнее. Однако он позволяет добавлять нативные модули и занимает меньше места, чем Expo. В этом уроке мы будем использовать Expo, чтобы сразу приступить к работе.
Просто следуйте инструкциям в документации в разделе Быстрый запуск Expo CLI, пока вы не сможете открыть свое приложение в текстовом редакторе (я использую VSCode) и просмотреть работающее приложение на своем телефоне. Вы можете заметить, что есть варианты Запустить на симуляторе iOS или Запустить на устройстве / эмуляторе Android. Вам нужно будет загрузить дополнительные инструменты для использования этих функций (вот информация для Android и iOS), которые мы не будем рассматривать в этой статье. Тем не менее, я определенно рекомендую использовать их, потому что тогда вы можете протестировать их на телефонах, отличных от того, который у вас есть!
Реагировать на нативные экраны
В React Native различные экраны нашего приложения будут компонентами, как и в обычном React. Давайте начнем с создания новой папки компонентов в нашем проекте и добавления трех новых файлов: Home.js, LogIn.js и SignUp.js.
mkdir components cd components && touch Home.js, LogIn.js, SignUp.js
Давайте добавим к этим компонентам код-заполнитель, чтобы не было ошибок при последующем тестировании. React Native предоставляет нам некоторые основные компоненты для создания пользовательского интерфейса, такие как <View> (аналогично <div> в HTML) и <Text> (как <p> в HTML). Мы должны импортировать эти компоненты в каждый файл, в котором мы их используем. Я просто добавил базовый текст на каждую страницу и кнопку на главной странице, которая в конечном итоге позволит нам выйти из аккаунта.
Реагировать на навигацию
Для моего приложения я хотел бы, чтобы пользователи могли просматривать мою домашнюю страницу, только если они вошли в систему, и иметь возможность перемещаться с экрана на экран. Мы можем использовать React Navigation для достижения этой цели. Установите эти пакеты внутри вашего проекта.
npm install @react-navigation/native @react-navigation/stack expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
Прямо сейчас мы все еще видим страницу по умолчанию в App.js. Давайте удалим все с этой страницы. Импортируйте три компонента, а также некоторые инструменты, которые вам понадобятся, из React Navigation. NavigationContainer будет управлять нашей навигацией и обычно размещается в корневом каталоге наших приложений (в нашем случае это App.js). Мы можем вызвать createStackNavigator, функцию, которая возвращает объект, содержащий свойства Screen и Navigator. Затем мы можем установить Screen элементов внутри Navigator и поместить Navigator внутри NavigationContainer. Я настроил базовый стек навигации, который в настоящее время показывает только экран входа в систему, потому что это первый экран в стеке. Наш следующий шаг — настроить аутентификацию пользователя с помощью Firebase, чтобы мы могли отображать экран Home, если пользователь вошел в систему!
Вы должны видеть экран LogIn только сейчас. Если у вас возникли проблемы, проверьте свою работу с веткой step_1_nav в исходниках.
Настроить Firebase
Давайте перейдем к Firebase, чтобы мы могли интегрировать его с нашим проектом. Зарегистрируйтесь, если у вас нет учетной записи Google, и перейдите к «Добавить проект» из «Перейти к консоли». Следуйте инструкциям по созданию проекта (ваш выбор, включать ли Google Analytics, я не делал для этого проекта).
Чтобы аутентифицировать пользователей с помощью электронной почты и пароля (метод, описанный в этом руководстве), перейдите к «Аутентификация» на боковой панели и включите «Электронная почта/пароль» в разделе «Метод входа». Firebase упрощает использование и других методов, таких как Google, Facebook или Apple OAuth!
Нажмите «Интернет», чтобы зарегистрировать свое приложение.
Вы получите объект firebaseConfig, который позволит нам подключить наше приложение к Firebase. Не добавляйте его так, как говорит вам Firebase… в конце концов, у нас не должно быть никаких тегов ‹script›, потому что у нас нет HTML в React Native!
Вернувшись в редактор кода, создайте новый файл firebase.js в главном каталоге проекта и npm install firebase. Мы собираемся добавить объект firebaseConfig в firebase.js и инициализировать приложение Firebase.
Реагировать на контекст
Далее мы будем использовать React Context API для доступа к аутентифицированному пользователю во всех областях нашего приложения. Для этого мы можем создать новый контекст и создать несколько методов, которые мы будем использовать в наших компонентах для прослушивания изменений в статусе аутентификации и доступа к вошедшему пользователю.
Теперь, когда у нас есть метод отслеживания статуса аутентификации пользователя, мы можем использовать этот метод внутри App.js. Мы будем использовать тернарное условное выражение для отображения главного экрана, если пользователь вошел в систему, и экрана входа в систему, если это не так. На самом деле мы еще не реализовали какие-либо возможности входа или регистрации, поэтому сейчас вы все еще должны видеть экран входа.
Прежде чем мы сможем войти в систему, мы должны зарегистрировать учетную запись! Давайте добавим несколько полей ввода в LogIn.js и кнопку «Зарегистрироваться», чтобы пользователи, у которых нет учетной записи, могли ее создать. Мы также должны добавить метод к нашему компоненту, который будет перенаправлять нас на экран регистрации, когда мы нажимаем кнопку.
Мы также добавим аналогичный код в SignUp.js с кнопкой возврата на страницу входа.
Теперь нам нужно отслеживать значения в полях ввода, чтобы мы могли передать эту информацию в Firebase. Я установил состояние React email и password на текст, введенный во входные данные, с помощью хука Reach useState. Теперь мы наконец можем добавить Firebase! Обязательно import {firebase} from "../firebase". Firebase поставляется со встроенным методом регистрации новых пользователей. Позвоните по номеру firebase.auth().createUserWithEmailAndPassword(email, password), чтобы зарегистрировать пользователя. Когда вы зарегистрируете ответ, вы увидите полезную информацию о пользователе, к которому у вас будет доступ. Если вы зайдете в свою учетную запись Firebase, вы должны увидеть только что созданного пользователя! Что еще более интересно, приложение должно автоматически переходить на главный экран, потому что текущий пользователь больше не null.
Далее мы добавим почти такой же код в LogIn.js, за исключением того, что вместо этого мы используем метод signInWithEmailAndPassword.
Чтобы протестировать нашу страницу входа в систему, мы должны выйти из системы… давайте добавим эту функциональность дальше! Вызовите метод firebase signOut. Вы выйдете из системы и будете перенаправлены на страницу входа!
Это все на сегодня! Это только первый шаг в настройке работающего мобильного приложения в React Native. Теперь вам решать, куда идти с ним!
Исходный код руководства: https://github.com/valerieingmann/react-native-firebase-auth
С этой отправной точкой мы с моими замечательными товарищами по команде создали AccountaBee, мобильное приложение, которое позволяет вам и вашим друзьям ставить еженедельные цели, отмечать их в течение недели и поддерживать социальную ответственность друг друга. Мы разработали собственный бэкэнд, используя Node.js, Express, PostgreSQL и Sequelize (развернутый на Heroku), но вы также можете хранить данные в базе данных реального времени Firebase или в Cloud Firestore. На нашем сервере мы интегрировали Firebase Admin SDK для проверки пользовательских токенов в наших маршрутах API. Учебник по этому скоро!
AccountaBee Github → https://github.com/AccountaBee
