Как интегрировать Firebase с приложением React Native Expo
Firebase — мощная платформа backend-as-a-service (BaaS) с инструментами для аутентификации, баз данных реального времени, аналитики и др. При разработке на React Native с использованием Expo, интеграция Firebase — простой и быстрый способ добавить надежные функции, такие как аутентификация и синхронизация данных.
В этой статье мы рассмотрим, как интегрировать Firebase в приложение React Native Expo всего за 5 минут. Мы пройдем этапы настройки Firebase для проекта Expo, использования аутентификации Firebase для регистрации и входа пользователей, а также работы с базой данных Firebase Realtime для хранения и получения данных.
Начнем!
Предварительные требования
Перед началом убедитесь, что у вас есть:
- Установленный Node.js.
- Существующий проект Expo (создайте его с помощью
expo init, если его нет). - Аккаунт и проект Firebase (создайте проект в Firebase Console, если его нет).
Шаг 1: Установка Firebase SDK для Expo
Expo упрощает установку пакетов Firebase. Откройте терминал, перейдите в каталог проекта Expo и установите зависимости Firebase:
expo install firebaseЭто установит необходимый Firebase SDK.
Шаг 2: Настройка Firebase в консоли
- Перейдите в Firebase Console.
- Создайте новый проект, если у вас его еще нет.
- Добавьте Firebase в приложение:
- Для веб-приложения (Expo использует веб-настройки)
- В Firebase Console выберите «Веб» (</>), чтобы добавить новое веб-приложение.
- Скопируйте сгенерированный Firebase объект конфигурации.
Типичный объект конфигурации Firebase выглядит так:
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};Шаг 3: Настройка Firebase в приложении React Native
После получения конфигурации Firebase настройте ее в приложении React Native Expo. Откройте App.js (или другую точку входа) и инициализируйте Firebase:
import React, { useState } from 'react';
import { TextInput, Button, View, Text } from 'react-native';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
// Your Firebase config object
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};
// Initialize Firebase if it's not already initialized
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app(); // Use the default app
}
const App = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [user, setUser] = useState(null);
const signUp = async () => {
try {
await firebase.auth().createUserWithEmailAndPassword(email, password);
alert('User created!');
} catch (error) {
alert(error.message);
}
};
const signIn = async () => {
try {
await firebase.auth().signInWithEmailAndPassword(email, password);
alert('User signed in!');
} catch (error) {
alert(error.message);
}
};
const signOut = async () => {
try {
await firebase.auth().signOut();
setUser(null);
alert('User signed out!');
} catch (error) {
alert(error.message);
}
};
return (
<View style={{ padding: 20 }}>
<TextInput
placeholder="Email"
value={email}
onChangeText={setEmail}
style={{ borderBottomWidth: 1, marginBottom: 10 }}
/>
<TextInput
placeholder="Password"
secureTextEntry
value={password}
onChangeText={setPassword}
style={{ borderBottomWidth: 1, marginBottom: 20 }}
/>
<Button title="Sign Up" onPress={signUp} />
<Button title="Sign In" onPress={signIn} />
<Button title="Sign Out" onPress={signOut} />
{user && <Text>Welcome, {user.email}</Text>}
</View>
);
};
export default App;Здесь происходит следующее:
- Инициализация Firebase: Firebase инициализируется с помощью объекта конфигурации из Firebase Console.
- Аутентификация: приложение включает базовые функции регистрации и входа пользователей через Firebase Authentication.
Теперь Firebase подключен, и вы можете использовать его сервисы, например, аутентификацию.
Шаг 4: Использование базы данных Firebase Realtime (необязательно)
Firebase предлагает базу данных Realtime для синхронизации данных между клиентами в реальном времени. Добавим пример для хранения и получения данных.
Сначала установите модуль базы данных Firebase:
import 'firebase/database';Затем используйте API Firebase Realtime Database:
const writeData = () => {
firebase.database().ref('/users/1').set({
name: 'John Doe',
email: email,
}).then(() => {
alert('Data saved!');
}).catch(error => alert(error.message));
};
const readData = () => {
firebase.database().ref('/users/1').once('value')
.then(snapshot => {
const data = snapshot.val();
alert('User data: ' + JSON.stringify(data));
})
.catch(error => alert(error.message));
};В этом примере:
writeData(): сохраняет данные пользователя в базе данных.readData(): извлекает сохраненные данные пользователя.
Шаг 5: Запуск приложения
Теперь, после интеграции Firebase Authentication и Realtime Database, запустите приложение.
Для Expo CLI:
expo startОтсканируйте QR-код приложением Expo Go на телефоне, чтобы протестировать регистрацию, вход и хранение данных в Firebase.
Заключение
Вы успешно интегрировали Firebase в приложение React Native Expo за несколько простых шагов! Теперь у вас есть база для создания надежных приложений с такими функциями, как аутентификация и синхронизация данных в реальном времени, используя Firebase.
В этой статье вы научились:
- Устанавливать Firebase SDK в приложение Expo.
- Настраивать Firebase Authentication для регистрации и входа пользователей.
- Записывать и читать данные из Firebase Realtime Database.
- Запускать приложение и тестировать функциональность Firebase.
С помощью инструментов Firebase вы можете легко расширить функциональность приложения, добавив push-уведомления, облачное хранилище, аналитику и другие возможности.
