Использование React, Firebase и Ant Design для быстрого создания прототипов веб-приложений

Ссылка на оригинал - https://nrempel.com/guides/react-firebase-ant-design/, автор публикации - Nicholas Rempel

В этом руководстве я покажу вам, как использовать FirebaseReact и Ant Design в качестве строительных блоков для создания функциональных высококачественных веб-приложений. Чтобы проиллюстрировать это, мы рассмотрим пример создания приложения со списком задач.

В наши дни для веб-разработки доступно так много инструментов, что это может показаться парализующим. Какой сервер вы должны использовать? Какой интерфейс вы собираетесь выбрать? Обычно рекомендуемый подход заключается в использовании технологий, которые вы знаете лучше всего. Как правило, это означает выбор проверенной в бою базы данных, такой как PostgreSQL или MySQL, выбор инфраструктуры MVC для вашего веб-сервера (мой любимый - Adonis) и либо использование механизма визуализации этой среды, либо использование клиентской библиотеки javascript, такой как ReactJS или AngularJS.

Использование вышеуказанного подхода является продуктивным - особенно если у вас есть хороший шаблон для начала работы - но что, если вы хотите создать что-то быстро с почти нулевым временем установки? Иногда макет не передает достаточно информации клиенту; иногда вы хотите создать MVP очень быстро для нового продукта.

Исходный код для этого примера доступен здесь. Если вы ищете хорошую IDE для использования в этом руководстве, я настоятельно рекомендую Visual Studio Code.

Среда разработки React с использованием приложения Create React

React - это библиотека javascript для создания пользовательских интерфейсов. Библиотека «на основе компонентов» означает, что вы можете создавать строительные блоки и составлять интерфейс из этих повторно используемых компонентов. Create React App, с другой стороны, является средой React с нулевой конфигурацией. Он работает из коробки с одной командой оболочки и поддерживает вашу среду в актуальном состоянии.

Чтобы начать, установите Node.js для вашей системы, следуя инструкциям здесь .

Затем запустите новый проект Create React App:

npx create-react-app quick-todo && cd quick-todo

Теперь вы можете запустить веб-сервер разработки с:

npm start

Посетите http://localhost:3000/ в вашем браузере, и вы должны увидеть это:

Большой! Теперь у вас есть функциональная среда разработки React.

Интегрируйте Firebase с вашим приложением

Теперь, когда у вас есть среда разработки React, следующим шагом будет интеграция Firebase в ваше приложение. Основной продукт Firebase - это служба баз данных в реальном времени. Это означает, что вашим пользователям не нужно обновлять страницу, чтобы увидеть обновления состояния приложения, и с вашей стороны не требуется никаких дополнительных усилий, чтобы это произошло.

Перейдите на https://firebase.google.com и создайте аккаунт, если вы этого еще не сделали. Затем создайте новый проект под названием Firebase quick-todo.

Когда у вас есть проект Firebase, создайте базу данных Cloud Firestore:

Здесь мы не используем аутентификацию в базе данных, потому что мы создаем прототип. Когда вы создаете реальное приложение, вы захотите создать правильные правила безопасности, но давайте пока не будем об этом беспокоиться.

Хорошо, теперь, когда ваша база данных Firebase подготовлена, давайте интегрируем ее в ваше приложение React. В каталоге вашего проекта выполните следующую команду, чтобы установить необходимые зависимости:

npm i --save firebase @firebase/app @firebase/firestore

Затем, в вашем проекте, добавьте новый файл в src каталог с именем firestore.js следующего содержания:

firestore.js

import firebase from "@firebase/app";
import "@firebase/firestore";

const config = {
  apiKey: "<apiKey>",
  authDomain: "<authDomain>",
  databaseURL: "<databaseURL>",
  projectId: "<projectId>",
  storageBucket: "",
  messagingSenderId: "<messageingSenderId>"
};

const app = firebase.initializeApp(config);
const firestore = firebase.firestore(app);

export default firestore;

Убедитесь, что вы вставили apiKey и другие параметры из вашего собственного проекта. Вы можете найти их в настройках вашего проекта:

Хорошо! Теперь у нас есть доступ к базе данных Firebase в реальном времени в любом месте приложения путем импорта нашей firestore.js утилиты:

import firestore from "./firestore";

Установить Ant Design

Ant Design - это комплексная система проектирования, включающая полный набор компонентов React. Поскольку React основан на компонентах, довольно просто использовать компоненты React от Ant Design в качестве строительных блоков, чтобы быстро собрать прототип.

Чтобы начать использовать систему компонентов Ant Design React, установите antd:

npm i --save antd

Все вместе

Теперь у нас есть все инструменты, необходимые для создания нашего прототипа. Давайте используем нашу среду для создания высокоточного прототипа приложения todo.

Во-первых, давайте очистим наш лист. Изменение App.jsи App.css так , что они выглядят так:

App.js

import React, { Component } from "react";

import "./App.css";

class App extends Component {
  render() {
    return <div className="App" />;
  }
}

export default App;

App.cs

@import "~antd/dist/antd.css";

.App {
  text-align: center;
}

Обратите внимание, как мы импортировали CSS для antd.

Теперь давайте настроим некоторую базовую структуру для нашего приложения todo. Мы можем использовать компонент antd Layout для этого:

App.js

import React, { Component } from "react";
import { Layout } from "antd";

import "./App.css";

const { Header, Footer, Content } = Layout;

class App extends Component {
  render() {
    return (
      <Layout className="App">
        <Header className="App-header">
          <h1>Quick Todo</h1>
        </Header>
        <Content className="App-content">Content</Content>
        <Footer className="App-footer">&copy; My Company</Footer>
      </Layout>
    );
  }
}

export default App;

App.css

@import "~antd/dist/antd.css";

.App {
  text-align: center;
}

.App-header h1 {
  color: whitesmoke;
}

.App-content {
  padding-top: 100px;
  padding-bottom: 100px;
}

После внесения этих изменений мы можем запустить наш сервер разработки. Вы должны посеять что-то вроде этого:

Теперь мы можем использовать наш firestore.js модуль, который мы создали ранее, чтобы начать добавлять задачи в нашу базу данных Firebase в реальном времени. Вы можете прочитать больше о том, как использовать Firebase Cloud Firestore здесь.

Давайте пройдемся по следующим изменениям в нашем исходном коде:

App.js

import React, { Component } from "react";
import { Layout, Input, Button } from "antd";

// We import our firestore module
import firestore from "./firestore";

import "./App.css";

const { Header, Footer, Content } = Layout;

class App extends Component {
  constructor(props) {
    super(props);
    // Set the default state of our application
    this.state = { addingTodo: false, pendingTodo: "" };
    // We want event handlers to share this context
    this.addTodo = this.addTodo.bind(this);
  }

  async addTodo(evt) {
    // Set a flag to indicate loading
    this.setState({ addingTodo: true });
    // Add a new todo from the value of the input
    await firestore.collection("todos").add({
      content: this.state.pendingTodo,
      completed: false
    });
    // Remove the loading flag and clear the input
    this.setState({ addingTodo: false, pendingTodo: "" });
  }

  render() {
    return (
      <Layout className="App">
        <Header className="App-header">
          <h1>Quick Todo</h1>
        </Header>
        <Content className="App-content">
          <Input
            ref="add-todo-input"
            className="App-add-todo-input"
            size="large"
            placeholder="What needs to be done?"
            disabled={this.state.addingTodo}
            onChange={evt => this.setState({ pendingTodo: evt.target.value })}
            value={this.state.pendingTodo}
            onPressEnter={this.addTodo}
          />
          <Button
            className="App-add-todo-button"
            size="large"
            type="primary"
            onClick={this.addTodo}
            loading={this.state.addingTodo}
          >
            Add Todo
          </Button>
        </Content>
        <Footer className="App-footer">&copy; My Company</Footer>
      </Layout>
    );
  }
}

export default App;

App.css

@import "~antd/dist/antd.css";

.App {
  text-align: center;
}

.App-header h1 {
  color: whitesmoke;
}

.App-content {
  padding-top: 100px;
  padding-bottom: 100px;
}

.App-add-todo-input {
  max-width: 300px;
  margin-right: 5px;
}

.App-add-todo-button {
}

С этими изменениями вы можете видеть, что теперь у нас есть вклад в наше приложение для добавления новых задач.

Добавление задач еще не отображается в пользовательском интерфейсе, но вы можете просмотреть свою базу данных Firebase, чтобы увидеть любые добавленные задачи!

Последний шаг к созданию полнофункционального приложения todo - показать список задач и позволить пользователю завершить их. Для этого мы можем использовать компонент List из Ant Design для отображения неполных задач. Возьмите следующий исходный код, например:

App.js

import React, { Component } from "react";
import { Layout, Input, Button, List, Icon } from "antd";

// We import our firestore module
import firestore from "./firestore";

import "./App.css";

const { Header, Footer, Content } = Layout;

class App extends Component {
  constructor(props) {
    super(props);
    // Set the default state of our application
    this.state = { addingTodo: false, pendingTodo: "", todos: [] };
    // We want event handlers to share this context
    this.addTodo = this.addTodo.bind(this);
    this.completeTodo = this.completeTodo.bind(this);
    // We listen for live changes to our todos collection in Firebase
    firestore.collection("todos").onSnapshot(snapshot => {
      let todos = [];
      snapshot.forEach(doc => {
        const todo = doc.data();
        todo.id = doc.id;
        if (!todo.completed) todos.push(todo);
      });
      // Sort our todos based on time added
      todos.sort(function(a, b) {
        return (
          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
        );
      });
      // Anytime the state of our database changes, we update state
      this.setState({ todos });
    });
  }

  async completeTodo(id) {
    // Mark the todo as completed
    await firestore
      .collection("todos")
      .doc(id)
      .set({
        completed: true
      });
  }

  async addTodo() {
    if (!this.state.pendingTodo) return;
    // Set a flag to indicate loading
    this.setState({ addingTodo: true });
    // Add a new todo from the value of the input
    await firestore.collection("todos").add({
      content: this.state.pendingTodo,
      completed: false,
      createdAt: new Date().toISOString()
    });
    // Remove the loading flag and clear the input
    this.setState({ addingTodo: false, pendingTodo: "" });
  }

  render() {
    return (
      <Layout className="App">
        <Header className="App-header">
          <h1>Quick Todo</h1>
        </Header>
        <Content className="App-content">
          <Input
            ref="add-todo-input"
            className="App-add-todo-input"
            size="large"
            placeholder="What needs to be done?"
            disabled={this.state.addingTodo}
            onChange={evt => this.setState({ pendingTodo: evt.target.value })}
            value={this.state.pendingTodo}
            onPressEnter={this.addTodo}
            required
          />
          <Button
            className="App-add-todo-button"
            size="large"
            type="primary"
            onClick={this.addTodo}
            loading={this.state.addingTodo}
          >
            Add Todo
          </Button>
          <List
            className="App-todos"
            size="large"
            bordered
            dataSource={this.state.todos}
            renderItem={todo => (
              <List.Item>
                {todo.content}
                <Icon
                  onClick={evt => this.completeTodo(todo.id)}
                  className="App-todo-complete"
                  type="check"
                />
              </List.Item>
            )}
          />
        </Content>
        <Footer className="App-footer">&copy; My Company</Footer>
      </Layout>
    );
  }
}

export default App;

App.css

@import "~antd/dist/antd.css";

.App {
  text-align: center;
}

.App-header h1 {
  color: whitesmoke;
}

.App-content {
  padding-top: 100px;
  padding-bottom: 100px;
}

.App-add-todo-input {
  max-width: 300px;
  margin-right: 5px;
}

.App-add-todo-button {
}

.App-todos {
  background-color: white;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.App-todo {
  /* position: relative; */
}

.App-todo-complete {
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 24px;
}

С этими последними изменениями мы можем видеть список задач, которые добавляются в наше приложение в виде списка:

И там у нас это есть! Используя React, Firebase и Ant Design, мы смогли быстро создать высококачественное веб-приложение. Использование этих инструментов поможет вам создать что-то функциональное и эстетически приятное в кратчайшие сроки.

Это может быть очень полезным, когда вам нужно продемонстрировать функциональность приложения кому-то, не тратя слишком много времени на его создание.


В этом руководстве основное внимание уделяется использованию инструментов для быстрого создания прототипов, но я думаю, что этот подход также можно использовать для создания готовых к работе веб-приложений. Ant Design может быть тематическим, а Firebase чрезвычайно масштабируемым.

Единственный вопрос использования Firebase поверх традиционного веб-сервера - это стоимость. Для приложений с большим количеством пользователей Firebase может быстро дорого обойтись; однако использование традиционного подхода веб-сервера и базы данных также может быть дорогостоящим для размещения. Кроме того, вам также нужно учитывать время и стоимость создания, настройки и управления вашим веб-сервером и базой данных!

Если вы хотите опубликовать ваше новое веб-приложение, чтобы другие могли его увидеть, вы можете следовать моему руководству по развертыванию приложений Firebase.

Не нашли ответ на свой вопрос? Возможно, вы найдете решение проблемы на нашем канале в Youtube! Здесь мы собрали небольшие, но эффективные инструкции. Смотрите и подписывайтесь на наш youtube-канал!

Смотреть на Youtube