Используйте Firebase для хранения данных на бэкенде и разрабатывайте простые приложения с легкостью
По данным опроса Stack Overflow за 2023 год, 21,14 процента разработчиков используют Firebase, что делает ее четвертой по популярности облачной платформой. Это развивающаяся технология для бесшовной интеграции бэкенда
С Firebase вы можете разработать полнофункциональное приложение, не написав ни строчки кода бэкенда. Узнайте, как подключить ваше приложение React.js к Firebase уже сегодня и создавать приложения на ходу
Установите пакет Firebase
После создания приложения React перейдите в корневую папку проекта и установите пакет Firebase, выполнив команду:
npm install firebase
Добавьте ваше приложение React в проект Firebase
Следующий шаг – создать проект Firebase и связать его с вашим приложением React. Перейдите в консоль Firebase:
- Нажмите Добавить проект, чтобы начать новый проект Firebase.
- Введите имя проекта, затем нажмите Продолжить.
- Нажмите кнопку Продолжить на следующей странице.
- Выберите свой аккаунт Firebase из выпадающего списка или нажмите Создать новый аккаунт, если у вас его еще нет.
- Наконец, нажмите Создать проект.
- Нажмите кнопку Продолжить после завершения процесса.
- Далее нажмите на значок Web (</>) в левом верхнем углу следующей страницы, чтобы настроить Firebase для веб.
- Введите псевдоним для вашего приложения в соответствующее поле. Затем нажмите кнопку Зарегистрировать приложение.
- Скопируйте сгенерированный код и сохраните его для следующего шага (обсуждается в следующем разделе).
- Нажмите кнопку Продолжить в консоли.
- На следующей странице представлено множество вариантов. Прокрутите вниз и выберите Cloud Firestore, поскольку в данном случае вам нужно настроить только базу данных.
- Далее нажмите Создать базу данных.
- Нажмите Далее. Выберите предпочтительное местоположение Firestore из выпадающего списка.
- Затем нажмите Включить для создания базы данных Firestore.
Инициализация Firebase в вашем приложении React
Создайте новую папку в каталоге src вашего проекта. Вы можете назвать ее firebase_setup. Затем создайте файл firebase.js внутри этой папки. Затем вставьте сгенерированный ранее код в этот файл
Пока что вы можете хранить объект конфигурации (firebaseConfig) в файле.env. Но подумайте об использовании более безопасного способа маскировки секретов React в продакшене. Данные, которые вы храните в файле.env, могут легко утечь при сборке приложения
Если вы используете опцию.env, добавьте ‘REACT_APP’ к каждому имени переменной внутри.env. В противном случае ваше приложение не сможет прочитать строки. Кроме того, перезапускайте ваш React-сервер каждый раз, когда вы изменяете детали в файле.env
Например, чтобы ввести секретный ключ Firebase вашего приложения в файл.env:
REACT_APP_apiKey = yourFirebaseAccessKey
Таким образом, вы можете точно настроить сгенерированный код следующим образом:
import { initializeApp } from 'firebase/app';
import { getFirestore } from '@firebase/firestore'
const firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey,
authDomain: process.env.REACT_APP_authDomain,
projectId: process.env.REACT_APP_projectId,
storageBucket: process.env.REACT_APP_storageBucket,
messagingSenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId,
measurementId: process.env.REACT_APP_measurementId
};
const app = initializeApp(firebaseConfig);
export const firestore = getFirestore(app)
Проверьте подключение к Firebase
Вы можете протестировать соединение, отправив фиктивные данные в Firestore. Начните с создания папки handles в каталоге src вашего проекта. Создайте обработчик отправки внутри этого файла. Вы можете назвать его, например, handlesubmit.js:
import { addDoc, collection } from '@firebase/firestore'
import { firestore } from '/firebase_setup/firebase'
const handleSubmit = (testdata) => {
const ref = collection(firestore, 'test_data') // Firebase creates this automatically
let data = {
testData: testdata
}
try {
addDoc(ref, data)
} catch(err) {
console.log(err)
}
}
export default handleSubmit
Затем внутри App.js:
import './App.css';
import handleSubmit from '/handles/handlesubmit';
import { useRef } from 'react';
function App() {
const dataRef = useRef()
const submithandler = (e) => {
e.preventDefault()
handleSubmit(dataRef.current.value)
dataRef.current.value = ''
}
return (
<div className='App'>
<form onSubmit={submithandler}>
<input type= 'text' ref={dataRef} />
<button type = 'submit'>Save</button>
</form>
</div>
);
}
export default App;
Запустите ваше приложение React и попробуйте отправить данные через форму. Обновите консоль базы данных Firebase, чтобы увидеть отправленную информацию в вашей коллекции. Получив базовые знания, вы можете изучить множество других возможностей Firebase, чтобы понять, как лучше его использовать
Создавайте на ходу с помощью Firebase и React
Firebase – это универсальное решение backend-as-a-service, которое позволяет эффективно масштабировать ваше приложение. Подключив приложение React, вы сможете использовать его многочисленные возможности для создания сайта по своему вкусу
Например, набор инструментов аутентификации Firebase – одна из функций, которую вы, возможно, захотите изучить
Комментировать