Firebase как простая база данных для приложения React
Firebase — это универсальный бэкэнд в качестве поставщика услуг (BaaS), который предоставляет базу данных, аутентификацию, облачное хранилище среди множества своих сервисов. В этом руководстве вы узнаете, как использовать службу базы данных реального времени Firebase в приложении React.
Вы собираетесь создать простое приложение со списком команд, в котором пользователи могут добавлять, удалять и редактировать информацию о членах команды.
Создайте приложение базы данных
Во-первых, вам нужно создать приложение в консоли Firebase.
Затем отправляйтесь в База данных меню и прокрутите немного вниз до Выберите базу данных реального времени раздел.
Установите правила безопасности для запуска в режим тестирования.
(это делает вашу базу данных небезопасной, но для целей данного руководства это допустимо.)
Наконец, получите конфигурацию, необходимую для интеграции Firebase в ваше веб-приложение.
Возьмите исходный код из этого codeandbox и разветвите его:
И поместите свои учетные данные в файл конфигурации:
const config = {
apiKey: "{YOUR KEY}",
authDomain: "{YOUR KEY}",
databaseURL: "{YOUR KEY}",
}
export default config;
Настройка вашего приложения React
Запустите приложение React с помощью create-react-app
npx create-react-app react-firebase-basic
Затем установите firebase и Bootstrap (так что вы можете не писать свой собственный css).
npm i firebase bootstrap
Затем вы можете удалить все из src/ так как вам не нужно большинство шаблонов
Создание config.js файл
Напишем конфигурацию Firebase в отдельном config.js файл:
const config = {
apiKey: "{YOUR KEY}",
authDomain: "{YOUR KEY}",
databaseURL: "{YOUR KEY}",
}
export default config;
Вы импортируете эту конфигурацию в свой App.js потом.
Написать index.js файл
Этот файл будет служить точкой входа в React:
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Создание вашего приложения
Пришло время написать свой App.js файл. Давайте инициализируем наше приложение Firebase в конструкторе:
import React from 'react';
import Firebase from 'firebase';
import config from './config';
class App extends React.Component {
constructor(props){
super(props);
Firebase.initializeApp(config.firebase);
this.state = {
developers: []
}
}
Затем можно написать логику получения и сохранения данных: writeUserdata запишет наше состояние в базу данных, а getUserData создаст прослушиватель на / путь, и на value изменения, мы назначим значение снимка как состояние.
writeUserData = () => {
Firebase.database().ref('/').set(this.state);
console.log('DATA SAVED');
}
getUserData = () => {
let ref = Firebase.database().ref('/');
ref.on('value', snapshot => {
const state = snapshot.val();
this.setState(state);
});
console.log('DATA RETRIEVED');
}
Положите эти writeUserData а также getUserData в componentDidMount а также componentDidUpdate соответственно.
componentDidMount() {
this.getUserData();
}
componentDidUpdate(prevProps, prevState) {
if (prevState !== this.state) {
this.writeUserData();
}
}
Все, что осталось, это написать рендеринг и обработать логику формы отправки: developers массив из state и поместите каждый элемент в компонент карты. Каждая карта будет иметь кнопку удаления и обновления. При нажатии кнопки «Удалить» мы отфильтруем конкретный элемент, а при нажатии «Обновить» мы получим данные элемента в форму.
handleSubmit будет вставлять данные, когда uid значение false и обновлять данные, когда это true. мы используем refs для получения данных из входных данных формы.
render() {
const { developers } = this.state;
return(
<div className="container">
<div className="row">
<div className='col-xl-12'>
<h1>Firebase Development Team</h1>
</div>
</div>
<div className='row'>
<div className='col-xl-12'>
{
developers
.map(developer =>
<div key={developer.uid} className="card float-left" style={{width: '18rem', marginRight: '1rem'}}>
<div className="card-body">
<h5 className="card-title">{ developer.name }</h5>
<p className="card-text">{ developer.role }</p>
<button onClick={ () => this.removeData(developer) } className="btn btn-link">Delete</button>
<button onClick={ () => this.updateData(developer) } className="btn btn-link">Edit</button>
</div>
</div>
)
}
</div>
</div>
<div className='row'>
<div className='col-xl-12'>
<h1>Add new team member here</h1>
<form onSubmit={ this.handleSubmit }>
<div className="form-row">
<input type='hidden' ref='uid' />
<div className="form-group col-md-6">
<label>Name</label>
<input type="text" ref='name' className="form-control" placeholder="Name" />
</div>
<div className="form-group col-md-6">
<label>Role</label>
<input type="text" ref='role' className="form-control" placeholder="Role" />
</div>
</div>
<button type="submit" className="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
)
}
handleSubmit = (event) => {
event.preventDefault();
let name = this.refs.name.value;
let role = this.refs.role.value;
let uid = this.refs.uid.value;
if (uid && name && role){
const { developers } = this.state;
const devIndex = developers.findIndex(data => {
return data.uid === uid
});
developers[devIndex].name = name;
developers[devIndex].role = role;
this.setState({ developers });
}
else if (name && role ) {
const uid = new Date().getTime().toString();
const { developers } = this.state;
developers.push({ uid, name, role })
this.setState({ developers });
}
this.refs.name.value = '';
this.refs.role.value = '';
this.refs.uid.value = '';
}
removeData = (developer) => {
const { developers } = this.state;
const newState = developers.filter(data => {
return data.uid !== developer.uid;
});
this.setState({ developers: newState });
}
updateData = (developer) => {
this.refs.uid.value = developer.uid;
this.refs.name.value = developer.name;
this.refs.role.value = developer.role;
}
Теперь ваше приложение React готово к чтению и установке данных в вашу базу данных Firebase. Вот финальная демонстрация снова:
Вы можете задаться вопросом, безопасно ли помещать ключ Firebase Api в конфигурацию, где его могут легко получить опытные программисты. На самом деле это нормально, потому что в Firebase есть правила безопасности, которые гарантируют, что только аутентифицированные пользователи могут получить доступ к вашей базе данных. Я просто не устанавливал правила безопасности в этом руководстве.
В следующем посте я напишу более полное руководство, которое охватывает аутентификацию, правила базы данных и использование облачного хранилища Firebase для загружаемых пользователем изображений, так что следите за обновлениями!
