如何用React和Firebase建立一个MVP

热门技术勘探工
259 阅读10分钟

How to Build an MVP with React and Firebase

当对一个想法进行原型设计时，建议你简化并只建立向市场推出产品所需的最小核心功能。这有助于你确定你的应用是否适合市场，然后再把时间和金钱浪费在一个没有人感兴趣的产品上。这被称为 "最小可行产品"（MVP）。在本教程中，你将学习如何使用React和Firebase（一个后台即服务平台）构建一个MVP。

为了提供最大的价值，我们不会一步一步地开发React+Firebase应用。取而代之的是，我将分解一个工作原型，并使用类似伪编码的语言解释关键概念。实际的代码是相当冗长的，因为它主要是前端逻辑，旨在处理许多方面，如状态管理、响应式UI设计和可访问性。

我的目标是向你展示构建与无服务器后端相连的Web界面的架构设计。我们将使用的完整的Firebase项目位于我们的GitHub资源库中。在本教程结束时，你应该能够在自己的MVP网络项目中应用这些概念。

为什么是Firebase？

如果你想在无服务器平台上构建一个Web应用，你会遇到无数的供应商，他们提供你构建产品所需的所有基本服务。这些服务包括认证、数据库、云功能、存储、分析等等。

如果你要为每项服务挑选最好的，你会有一个相当高的学习曲线，以弄清楚如何使所有这些服务在你的应用程序中一起工作。你还会使你的产品面临一些安全风险，因为你的产品为了工作会连接到多个端点。有一些措施可以保护你的应用程序，但大多数开发者都不知道有哪些安全问题需要堵塞。

Firebase是一个后端即服务的平台，方便地在一个屋檐下提供一些基本服务。这减少了学习曲线，也使构建安全的Web和移动应用程序变得更加容易。

这些Firebase服务包括。

  • 认证
  • 数据库
  • 存储
  • 云功能
  • 分析学
  • 托管

前提条件

请注意，本教程是为那些想快速学习如何为他们的项目使用Firebase的中高级React开发者编写的。我提供了一些额外的主题，在继续学习之前，你需要熟悉这些主题。

Firebase项目计划

我们要看的项目是一个简单的在线图书馆，将数据组织成书籍、作者和类别。下面是一个实体关系图。

entity relationship diagram

应用逻辑已经被组织成。

  • 屏幕容器（页面或视图）
  • 呈现组件（表单、表格）
  • 布局组件（页脚、导航条）
  • 可共享的用户界面组件（警报、模版、页眉）。
  • Firebase服务（数据库、存储）。
  • Firebase配置脚本（后端连接）。

下面是一个主要项目的架构图。

application architecture diagram

我们将使用下面的文件夹结构来组织我们的代码。

├── components
│   ├── entity (e.g. book)
│   │   ├── Card.jsx (-> BookCard)
│   │   ├── Detail.jsx (-> BookDetail)
│   │   ├── Form.jsx
│   │   └── List.jsx
│   └── ui
│       └── Component.jsx (e.g. PageHeader, Alert)
├── layout
│   ├── Footer.jsx
│   └── Navbar.jsx
├── screens
│   ├── entity
│   │   ├── Detail.jsx (-> ScreenBookDetail)
│   │   ├── Form.jsx (-> ScreenBookForm)
│   │   └── List.jsx
│   ├── category
│   │   ├── Form.jsx
│   │   └── List.jsx
│   ├── Home.jsx
│   └── NotFound.jsx
└── services
    └── Service.js (e.g. Database, Storage)

-> 符号表示的是一个功能组件的命名方式的例子。请查看本指南，了解更多关于前端应用程序的命名规则的信息。

Firebase项目设置

我们将使用的项目是用Vite+React模板搭建的脚手架。要在你的工作区设置该项目，只需打开终端并执行以下操作。

# Clone project
git clone git@github.com:sitepoint-editors/sitepoint-books-firebase.git
cd sitepoint-books-firebase

# Install dependencies
npm install

# Prepare environment config file
cp env.example .env.local

先不要启动开发服务器，因为我们需要先设置我们的Firebase后端，我们将在下一步进行设置。

Firebase设置

到Firebase去，用你的Google账户登录。然后。

  1. 创建一个新的Firebase项目，并把它叫做SitePointBooks 。

  2. 不要为这个项目启用谷歌分析。点击创建项目按钮。

  3. 在Firebase控制台中，创建一个新的Web App，并将其称为sitepoint-books-app 。你可以访问Firebase控制台，如下面的截图所示。
    firebase-mvp-create-project

  4. 在下一步，给你的应用程序起个名字（可以和项目名称一样），然后点击注册应用程序。

  5. 在添加Firebase SDK部分，选择使用npm并复制输出。
    03-firebase-web-app-config
    有大量的Firebase SDK可用。你可以在这里找到更多关于这些的信息。

  6. 最后，记下你的Firebase配置，然后点击继续到控制台。

请注意，Firebase的API密钥可以安全地暴露给公众，因为对后端资源的访问是通过Firebase的安全规则来保护的。也就是说，它们只能被认证的用户访问。不幸的是，在本教程中，我们需要禁用它们，因为我们不会处理Firebase认证。

为了快速设置，你可以简单地把提供的脚本复制到一个firebase.js 文件中。然而，我更喜欢用.env.local 文件来保存Firebase的配置设置。这里有一个Firebase配置的例子。

VITE_API_FIREBASE_API_KEY=AIzaSyDfoP234E8waxeN8QZVrkA5LXqjjyPeFYs
VITE_API_FIREBASE_AUTH_DOMAIN=sitepointdemo-26ea0.firebaseapp.com
VITE_API_FIREBASE_PROJECT_ID=sitepointdemo-26ea0
VITE_API_FIREBASE_STORAGE_BUCKET=sitepointdemo-26ea0.appspot.com
VITE_API_FIREBASE_MESSAGING_SENDER_ID=292100755259
VITE_API_FIREBASE_FIREBASE_APP_ID=1:292100755259:web:38be20c9ab080b4ab1b11e

不要使用这些Firebase配置设置，因为它们是为一个临时项目创建的。

请注意，这只是防止在你的仓库中存储Firebase配置的密钥。一旦你构建和部署了你的应用程序，恶意攻击者就很容易通过浏览器检查工具获得这些密钥。这表明了设置认证的重要性。

目前，我们的Firebase后端是空的。在接下来的步骤中，我们将用数据来填充它。

云存储

Firebase的云存储是一项允许开发者存储图片、视频、音频和其他用户生成的内容的服务。在本教程中，我们只用它来存储图片。前往 "存储 "页面，点击 "开始"按钮。会出现一个弹出的向导。只需接受默认规则并为你的默认存储桶选择一个位置。点击完成后，一个存储桶将在短时间内为你创建。

在下一个页面，执行以下操作。

  1. 创建以下文件夹。

    • categories
    • books

  2. 上传我通过这个zip文件提供的图片。你应该有以下的结构。
    04-firebase-cloud-storage

  3. 点击 "规则"选项卡，更新安全规则，以允许我们未经认证的应用程序访问这些文件。请注意，以下设置将把你的存储后端暴露给公众。

    rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

Firebase使用一种基于通用表达式语言的自定义语言来定义其安全规则。由于涉及到学习曲线，我们无法在这篇文章中讨论它。请看关于这个主题的官方文档。

一旦你完成了用提供的图片填充你的云存储，你就可以进行下一步了。

云火库

对于数据库，我们将使用Cloud Firestore，它是一个可扩展的NoSQL数据库，允许开发者使用集合来构造数据。旧的Firebase实时数据库也是一个NoSQL数据库，但它将你的所有数据存储在一个平面嵌套的JSON结构中，很难查询。

在你的控制台，前往Firestore数据库页面，点击创建数据库按钮。一个弹出的向导会出现。

  1. 在第一页，设置以测试模式启动，允许在未来30天内对数据库进行不安全的访问。
  2. 在下一页，设置数据库区域，然后点击启用按钮。

一旦数据库被初始化，我们就可以继续填充数据库了。在你开始填充之前，你应该知道Firestore数据库用户界面不支持在连接两个集合时的自动链接和验证。所以你需要打开第二个浏览器标签，从一个记录中复制一个ID到一个参考字段，如下图所示。

firestore-place-id

你还需要确保当你把ID值粘贴到参考字段时，周围没有空白。否则，当你执行查询时，将返回一个空对象。说完这些，你就可以开始创建和填充你的Firestore数据库了，如下所示。

  • authors收集，所有字段类型都是字符串。
名称
达伦-琼斯
Mike Aboagye
  • categories 集合，所有字段类型都是字符串。
姓名覆盖
javascript类别/javascript.png
蟒蛇类别/python.png
反应categories/react.png
  • books收集，除了author_id 和category_id ，所有的字段类型都是字符串。你必须手动复制相关的唯一ID(place_id)到参考字段，如上面的截图所示。
标题学会用JavaScript编码数据科学。工具和技能
覆盖面books/learn-to-code-with-javascript.jpgbooks/data science - tools & skills.png
笔者的名字（参考）/authors/{place id}（作者）。/authors/{place id}/作者/{place id}。
类别_id(参考)/categories/{place id}/类别/{place id}。/categories/{place id}/类别/{地点}。
描述这本简单易懂又有趣的指南是你编码之旅的完美起点。你将学习使用JavaScript--地球上最流行的编程语言--但你所掌握的技术也将为你继续使用其他语言打下基础。本书收集了一些数据科学中最常用的工具的深度指南，如Pandas和PySpark，以及你作为一个数据科学家所需要的一些技能。
网址www.sitepoint.com/premium/boo…www.sitepoint.com/premium/boo…

请看下面的截图，作为如何设置数据库结构的一个例子。

cloud firestore database

启动开发服务器

随着数据库的填充，我们现在可以执行npm run dev ，并浏览到localhost:3000 ，与项目互动。请注意，这是一个为学习而建立的原型应用程序，并不是所有的功能都能完全实现。

app book detail

Firebase项目逻辑

现在让我们开始分解这个项目，这样你就可以了解前端接口是如何建立的，以便与Firebase后端连接和交互。本教程的重点将主要放在状态管理逻辑上。如果你对这个Firebase项目中使用的用户界面代码不熟悉，请参考以下文档，了解项目中使用的UI库。

路由

为一个涉及两个以上实体的项目建立一个CRUD接口，很快就会变得复杂。对于路由，我使用了React Router并使用标准化的语法实现了一个路由结构。就是说。

  • list route:/{entity}
  • 创建路由。/{entity}/create
  • 编辑路由。/{entity}/edit/:id
  • 详细路线。/{entity}/:id

下面是一个简化的视图，说明路由是如何在以下方面实现的 App.jsx:

import React from "react";
import { Route, Switch } from "react-router-dom";

// Layout components
import Footer from "@/layout/Footer";
import Navbar from "@/layout/Navbar";

// Screen(pages or views) containers
import Home from "@/screens/Home";
import NotFound from "@/screens/NotFound";
import ScreenBookList from "@/screens/book/List";
import ScreenBookForm from "@/screens/book/Form";
import ScreenBookDetail from "@/screens/book/Detail";

function App() {
  return (
    <div>
      <header>
        <Navbar />
      </header>
      <main>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route exact path="/book">
            <ScreenBookList />
          </Route>
          <Route path="/book/edit/:id">
            <ScreenBookForm />
          </Route>
          <Route path="/book/detail/:id">
            <ScreenBookDetail />
          </Route>
          <Route path="/book/create">
            <ScreenBookForm />
          </Route>
          <Route component={NotFound} />
        </Switch>
      </main>
      <Footer />
    </>
  );
}

请注意，ScreenBookForm 已经被重新用于创建和编辑路由。你以后会看到如何用一个表单容器来处理这两个用例。接下来，我们将看看React应用如何连接到Firebase后端。

继续阅读《如何用React和Firebase在SitePoint上构建一个MVP》。

avatar
文章
阅读
粉丝