Firebase与Flutte App集成实例

背景知识视频教程

• 适用于iOS的Firebase和Firestore
• 使用Firebase的Flutter
• Flutter开发训练集

介绍

我们将构建的应用程序是事件应用程序，用户可以在其中查看事件的程序以及时间表的详细信息。 所有数据将在Firebase项目中远程托管。 这些事件将存储在Cloud Firestore数据库中。

一旦通过身份验证，用户将能够通过按下星号图标来选择他们喜欢的活动部分。 这样，“收藏夹”也将被远程保存。

以下屏幕截图显示了该应用程序的主屏幕：

该应用程序的另一个有趣方面是处理身份验证。 这通常是一个繁琐的过程，但是好消息是，使用Firebase和Flutter处理身份验证非常简单。 您可以在以下屏幕截图中看到该应用程序的身份验证屏幕：

添加Firebase

如前所述，Firebase是可用于在云中构建应用程序的一组工具。 由于它是一项云服务，因此您无需在设备上安装任何软件。

Firebase中提供的工具涵盖了您通常需要自行构建的大多数服务，包括身份验证，数据库和文件存储，仅举几例。 连接到Firebase的客户端（在我们的示例中是Flutter应用）直接与这些后端服务进行交互，而无需任何中间件服务器端服务。 这意味着，当您使用Firestore数据库时，您将直接在Flutter应用中编写查询！ 这与传统的应用程序开发完全不同，后者通常需要编写客户端和服务器软件，这可能是在开发需要后端服务的应用程序时使用Firebase的主要优势。 您无需使用PHP，Java或C＃编写，安装或维护Web服务。 您将直接通过Flutter应用处理Firebase。

在访问控制台之前，将要求您进行身份验证。 如果您几乎没有任何Google帐户，则可以从身份验证页面免费创建一个。 因此，让我们开始，如下所示：

Firebase中所有服务的容器都是一个项目。 因此，我们将通过创建一个新的Firebase项目开始构建我们的应用程序。

Firebase项目是Firebase的顶级实体。 每个Firebase功能（包括Cloud Firestore和Authentication）都属于一个Firebase项目，来自客户端应用程序的连接是通过该项目本身进行的。

单击“添加项目”按钮（或“新项目”，具体取决于控制台界面）后，您需要选择一个项目名称。 我们将其称为事件，如以下屏幕截图所示：

接下来，只需按继续以继续配置新项目并接受条款和条件

在下一个屏幕中，系统将要求您为Firebase项目设置Google Analytics（分析）。 本项目不需要。

再次单击继续，几秒钟后将创建您的项目。 现在，我们有了将在应用程序中使用的Firebase项目。 在该过程结束时，您应该看到类似于以下屏幕截图中的页面：

这是Firebase项目概述页面，其中包含项目名称（在这种情况下为事件）和计费计划（Spark计划表示这是免费计划）； 在页面左侧，您具有可以添加到项目中的主要工具。

现在，我们的Firebase项目已构建，让我们创建一个Firestore数据库并添加一些我们将在应用程序中读取的数据。

创建Firestone数据库

我们已经建立了一个使用SQL数据库的应用程序。 Firestore数据库是NoSQL数据库。 这两种存储数据的方式和更改存储解决方案的方式截然不同。 在Firebase中，您有两个不同的数据库工具：Cloud Firestore和实时数据库。 两者都是NoSQL数据库，但是它们的体系结构却大不相同。 Cloud Firestore是最新的，它是大多数新项目的推荐选择，因为它具有更直观的数据模型，更快的查询和增强的扩展选项。

让我们先看看如何创建Cloud Firestore数据库，然后重点介绍有关如何考虑NoSQL数据库中数据的一些技巧。 要创建Cloud Firestore数据库，请执行以下步骤：

在“ Firebase项目概述”页面的左侧，单击“数据库”链接。

在此处，在“ Cloud Firestore”窗格下，单击“创建数据库”按钮。

在“创建数据库”窗口中，选择“以测试模式启动”，因为该选项允许未经身份验证访问数据，如以下屏幕截图所示：

稍后，我们还将向项目添加身份验证。

点击下一步。 系统将要求您选择Cloud Firestore的位置。 选择一个靠近您和您的用户访问数据的位置。 例如，当我住在欧洲时，我将选择西欧选项之一。

最后，单击“完成”。

现在，您已经创建了Cloud Firestore数据库，并且应该看到类似于以下屏幕截图所示的页面。

现在，我们将插入一些数据，如下所示：

单击开始收集。 集合是一组文档的容器。 将此容器称为event_details，然后单击“下一步”。

从那里，在“文档ID”选项中，单击“自动ID”，然后添加一些字段和值，如以下屏幕截图所示，然后单击“保存”：

使用相同的字段并根据您的喜好更改值，对其他两个文档重复该过程。

集成Firebase

配置Android app

配置iOS app

测试集成

EventDetail模型类

创建事件详情屏幕

添加授权

详情参阅http://viadean.com/flutter_firebase_app.html