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 для загружаемых пользователем изображений, так что следите за обновлениями!

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *