Read,FirebaseおよびAntの設計を用いた迅速プロトタイプアプリケーション

このガイドで使用する方法を示しますFirebase , React , and Ant Design ビルド機能ブロック、高忠実度のWebアプリケーションを構築する.これを説明するには、ToDoリストのアプリを構築する例を通過します.
最近では、それが麻痺していると感じることができるウェブ開発のために利用できるツールがたくさんあります.どのサーバーを使用する必要がありますか?どのようなフロントエンドのフレームワークを選択する予定ですか?通常、推奨されるアプローチは、あなたが最もよく知っている技術を使用することです.一般的に、これはバトルテストのようなデータベースを選択することを意味しますPostgreSQL or MySQL , MVCフレームワークを選択するAdonis ), そして、そのフレームワークのレンダリングエンジンを使用するか、クライアント側のJavaScriptライブラリを使用しますReactJS or AngularJS .
上記のアプローチを使用することは生産的です--特にあなたが始めるために良いBoilerplateがあるならば、しかし、あなたがほぼゼロセットアップ時間で速く何かを構築したいならば、どうですか?時々、モックアップはクライアントに十分な情報を伝えません場合によっては、新しい製品のためのMVPの超高速を構築したい.
この例のソースコードは利用可能ですhere . このガイドで使用する良いIDEを探しているなら、.

反応を使用した反応環境

React ユーザインタフェースを構築するためのJavaScriptライブラリです.ライブラリは“コンポーネントベース”の意味を構築ブロックを作成し、これらの再利用可能なコンポーネントをインターフェイスを作成できます.Create React App , 他方、ゼロ構成反応環境である.これは、1つのシェルコマンドを使用してボックスから動作し、最新の状態にあなたの環境を保持します.
始めるには、ノードをインストールします.あなたのシステムのためのhere .
次に、新規作成の反応アプリケーションプロジェクトを起動します.

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

さて、開発Webサーバーを起動できます.

npm start

訪問http://localhost:3000/ ブラウザでは次のようになります.

すごい!現在、機能的な反応の開発環境があります.

アプリケーションをFireBase統合

今あなたが反応の開発環境を持っている、次のステップはあなたのアプリケーションにFireBaseを統合することです.FireBaseのコア製品は、リアルタイムデータベースサービスです.これは、ユーザーがアプリケーションの状態への更新を参照してくださいページを更新する必要はありません、それはあなたの部分に余分な努力を取ることを意味します.
ヘッドオーバーhttps://firebase.google.com そして、あなたがすでにいないならば、口座をつくってください.次に、新しいFireBaseプロジェクトを作成しますquick-todo .
Firebaseプロジェクトがあると、「FireFirestore」データベースを用意します.



ここでは、プロトタイプを構築しているので、データベース上で認証を使用していません.実際のアプリケーションをビルドすると、適切な作成する必要がありますsecurity rules しかし、今のところ心配しないでください.
さあ、あなたのFirebaseデータベースが準備された今、あなたの反応アプリに統合させましょう.プロジェクトディレクトリで次のコマンドを実行し、必要な依存関係をインストールします.

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

次に、プロジェクトに新しいファイルを追加しますsrc ディレクトリfirestore.js 次のコンテンツを使用します.

ファイアストア.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 あなた自身のプロジェクトからの他のパラメータ.プロジェクトの設定でこれらを見つけることができます.

OK!今、我々はアプリケーション内のどこにでもリアルタイムのFireBaseデータベースへのアクセスを我々の輸入によってfirestore.js ユーティリティ

import firestore from "./firestore";

Antデザインのインストール

Ant Design 反応コンポーネントの完全なスイートを含む包括的なデザインシステムです.反応はコンポーネントベースですので、Antデザインの反応コンポーネントをビルドブロックとして使用して、すぐにプロトタイプをまとめることは簡単です.
Ant DesignのReply Component Systemを使用して起動するにはantd :

npm i --save antd

すべて一緒に引く

我々は今、我々のプロトタイプを構築するために必要なすべてのツールを持っています.我々の環境を使用して、TODOアプリの高忠実度プロトタイプを構築しましょう.
まず、スレートをきれいにしましょう.変更するApp.js and App.css このように見えます.

アプリ。js

import React, { Component } from "react";

import "./App.css";

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

export default App;

アプリ。cs

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

.App {
  text-align: center;
}

CSSのインポート方法に注意してくださいantd .
今、私たちのtodoアプリのいくつかの基本的な構造を設定してみましょう.私たちはantd Layout コンポーネント:

アプリ。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;

アプリ。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のクラウドファイアウォールを使用する方法についての詳細を読むことができますhere .
次のソースコードの変更を見てみましょう.

アプリ。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;

アプリ。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 {
}

これらの変更を使用すると、我々は現在、新しいtodosを追加するアプリケーションに入力を持っていることがわかります.

ToDoを追加するにはまだUIに表示されませんが、あなたが追加したすべての参照を参照してFireBaseデータベースを閲覧することができます!

完全に機能todoアプリを持っている最後のステップは、todosのリストを表示し、それらを完了するユーザーを許可することです.これを行うには、List Antデザインからのコンポーネントは、不完全なtodosを示します.次のソースコードを取得します.

アプリ。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;

アプリ。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;
}

これらの最終的な変更点で、リストとしてアプリケーションに追加されたToDoSを見ることができます.

そして、我々はそれを持っている!反応、Firebase、およびAntのデザインを使用して、我々はすぐに高忠実度のWebアプリケーションを作成することができた.これらのツールを使用すると、何か機能的で、審美的に時間がないの作成を支援することができます.
これは非常に多くの時間を費やすことなく、誰かにアプリの機能を発揮する必要があるときに非常に貴重なことができます.
このガイドは、すぐにプロトタイプを構築するツールを使用することに焦点を当てますが、私はこのアプローチはまた、生産準備のWebアプリケーションを作成するために使用することができますと思います.蟻設計can be themed そして、Firebaseは非常にスケーラブルです.
伝統的なウェブサーバ上のfirebaseを使用する唯一の質問はコストです.多くのユーザーとアプリケーションの場合は、FireBase迅速に高価なことがありますしかし、WebServerとデータベースの伝統的なアプローチを使用しても、ホストに高価になることができます.また、アカウントの時間とコストを考慮して、設定し、あなたのウェブサーバやデータベースを管理する必要があります!
当初公開nrempel.com