我们的应用程序现在已经有了一个好看的UI,但是我们还没有一个后端。所以我们要买一个云服务器,然后再安装数据库?当然不是!我们可以使用Firebase平台作为后端,那么Firebase是什么呢?

Firebase一开始只是一个移动后端即服务平台,自2014年10月被Google收购后,被谷歌改造成了针对移动开发(iOS和Android)和Web开发的一个完整后端解决方案,2016年谷歌在I/O大会上推出了Firebase的新版本,Firebase提供了一个SDK和一个控制台,用于创建和管理Android、iOS和Web等多个平台的应用。总而言之,就是功能强大~

在这篇文章中,我们将在Firebase上配置Flutter项目。需要注意的是,如果正在开发iOS,那么我们必须使用macOS,而在macOS中,想要在Flutter应用程序中使用Firebase插件,则需要一些其他工具:

  1. 安装homebrew。
  2. 打开终端并运行以下命令来安装CocoaPods:
brew install cocoapods
pod setup

创建一个新Firebase项目

回到正题,在Firebase上配置Flutter项目的第一步是创建一个新的Firebase项目,它会自动生成一个实时数据库。我们在浏览器中打开Firebase控制台,由于Firebase是谷歌提供的服务,所以需要使用谷歌账户登陆,如果没有谷歌账户,那么就注册一个呗!

打开并登陆Firebase控制台后,选择“添加项目”。将我们的项目命名为“Talk Casually App”,并设置国家/地区,然后单击“创建项目”。

添加特定平台的Firebase配置信息

接下来,为了支持在iOS和Android设备之间发送和接收聊天消息,我们需要将由Firebase控制台生成的特定于平台的配置文件添加到IntelliJ项目中。我们稍后将在项目中添加Flutter包的Firebase包装器,使用此配置信息连接到共享数据库。”

Flutter项目文件结构

在添加特定于平台的Firebase配置信息之前,我们需要对Flutter项目的文件结构有大概的了解,Flutter项目中的重要文件包括:

为Android配置Firebase

第一步,在IntelliJ工作区中,打开android/app/src/main文件夹中的AndroidManifest.xml文件,复制package属性的字符串值。比如我们的项目将使用com.yourcompany.talk_casually

第二步,在Firebase控制台中,打开Firebase项目,然后单击“将 Firebase 添加到您的 Android 应用”。

第三步,我们需要获取调试签名证书的SHA1值,打开一个终端,并运行Java提供的keytool工具来获取证书的SHA1指纹。

// Windows终端
keytool -exportcert -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore
// Mac/Linux终端
keytool -exportcert -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

第四步,在“调试签名证书 SHA1”字段中,添加我们在上面获取到的调试证书指纹值。然后单击“注册应用”。

Firebase生成了一个google-services.json文件,其中包含Android应用程序的配置详细信息,以连接到我们刚创建的Firebase服务。然后将此文件下载到我们的开发机上,然后不需要在向导中完成其他步骤。

第五步,将google-services.json文件移动到android/app文件夹中。我们的项目目录树应如下所示:

为iOS配置Firebase

第一步,在Xcode中,通过在终端窗口中运行open ios/Runner.xcworkspace来打开Runner.xcworkspace文件。

第二步,单击左上角的项目菜单中的Runner以显示General选项卡,然后在Bundle Identifier字段中复制字符串值。比如这个项目,我们将使用com.yourcompany.friendlychat。如果查看配置文件,该字段对应于CFBundleIdentifier键。

第三步,我们在Firebase控制台中,打开Firebase项目,因为我们之前已经为Android配置了Firebase,所以选择“添加其他应用 > iOS”。

第四步,在“iOS 软件包 ID”字段中,粘贴从第二步复制的字符串值。然后单击“注册应用”。

第五步,Firebase会生成一个GoogleService-Info.plist文件,其中包含iOS应用程序的配置详细信息,以连接到我们创建的Firebase服务。将此文件下载到我们的开发机上。

第六步,将生成的GoogleService-Info.plist文件拖到Xcode中的Runner项目的Runner目录中,因此Google登录框架可以确定您的客户端ID。

集成FlutterFire包

要将Firebase功能添加到Flutter应用程序,我们需要使用开源的FlutterFire包装器。这个软件包将Firebase API的一部分暴露给了Flutter,适用于Android和iOS。外部API的支持通过插件实现。

使用Android开发的插件需要编辑build.gradle文件并将插件添加到pubspec.yaml。对于iOS开发,只需要pubspec.yaml更改。需要注意的是,要在Android上运行下面的代码,我们需要在Android测试设备上安装最新版本的Google Play services的APK。

配置Android插件

第一步,将jitpack添加到根级的build.gradle文件(android/build.gradle)。

allprojects {repositories {jcenter()maven { url "https://jitpack.io" }}
}

第二步,将规则添加到根级别build.gradle文件,以包含google-services插件。

buildscript {repositories {jcenter()}dependencies {classpath 'com.android.tools.build:gradle:2.2.3'classpath 'com.google.gms:google-services:3.0.0'}
}

第三步,将Google服务的应用插件添加到应用级build.gradle文件(/android/app/build.gradle)的末尾。

apply plugin: 'com.google.gms.google-services'

将插件添加到应用程序

将此项目所需的插件添加到Flutter项目文件中的pubspec.yaml中,如下所示:

name: talk_casually
description: A new flutter project.dependencies:flutter:sdk: flutterimage_picker: ^0.0.2google_sign_in: ^0.0.2firebase_analytics: ^0.0.2firebase_auth: ^0.0.2firebase_database: ^0.0.4firebase_storage: ^0.0.2

更新并保存此文件后,单击main.dart选项卡。IntelliJ会在上方显示一个提示,提醒我们重新加载pubspec.yaml。选择Get dependencies以检索其他软件包,并在Flutter项目中使用它们。另一个选择是在终端窗口中运行flutter packages get命令,而不使用IntelliJ。

Flutter实战一Flutter聊天应用(五)相关推荐

  1. Flutter实战一Flutter聊天应用(十五)

    在上一篇文章<Flutter实战一Flutter聊天应用(十四)>中,我们完成了注册屏幕.为了保持应用程序入口只有一个,即登陆屏幕,用户注册完成之后会返回手机号码.密码到登陆屏幕,让用户点 ...

  2. Flutter实战一Flutter聊天应用(汇总)

    纸聊 这个应用程序使用Google的Flutter移动框架开发,是一个实时聊天应用程序,为了能专注于APP设计,应用程序的服务端使用Googler的Firebase平台.程序程序的名称为纸聊,意为像传 ...

  3. Flutter实战一Flutter聊天应用(十六)

    在上一篇文章<Flutter实战一Flutter聊天应用(十五)>中,我们完成了登陆屏幕.在用户登陆成功后,会在本地创建一个LandingInformation文件,以使应用程序在启动时可 ...

  4. Flutter实战一Flutter聊天应用(二十)

    在上一篇文章<Flutter实战一Flutter聊天应用(十九)>中,我们完成了删除用户的逻辑,就是将会话的有效性设置为false就可以了.那么当会话的有效性为false时,用户再次添加该 ...

  5. Flutter实战一Flutter聊天应用(十九)

    在上一篇文章中,我们完成了聊天列表的用户界面与功能代码.在用户添加完会话后,聊天列表会增加对应的会话项,通过点击会话项,可以进入聊天屏幕.在这一篇文章中,我们主要是修改lib/chat_screen. ...

  6. Flutter实战一Flutter聊天应用(二十一)

    在这一系列的前二十篇文章里,我们已经完成了最主要的添加.删除好友,并与好友聊天,还可以发送图片的功能.这一篇文章会完成个人资料与设置相关的功能,并将应用发布上线. 之前设置了个人资料的入口按钮,现在我 ...

  7. Flutter实战一Flutter聊天应用(十八)

    在上一篇文章中,我们完成了基本的添加聊天功能,但是还没有在聊天列表显示添加的新聊天,在这篇文章中我们将实现这个功能--在聊天列表中展示所有的聊天. 首先,我们在/lib目录下新建一个group_cha ...

  8. Flutter实战一Flutter聊天应用(十)

    首先,我们要修复一下之前几篇文章中存在的缺陷.在发送超过两行的消息时,屏幕上显示的消息不会自动换行,会超出最大宽度.我们可以通过将Text包装在Container控件中,再添加一个width属性,使其 ...

  9. Flutter实战一Flutter聊天应用(九)

    在这篇文章中,我们将允许用户在聊天消息中发送图像,从设备检索图像文件,并将文本和图像数据存储在Google云端存储Bucket中.由于我们使用Firebase云储存,应用程序将变得更加健壮和可扩展.它 ...

最新文章

  1. OpenGL 矩阵变换
  2. 2020移动apn接入点哪个快_为什么都是4G网你的就没别人快?跟我这样设置,网速直线提升...
  3. Kubernetes-NodePort(十七)
  4. 项目运行报错java.sql.SQLSyntaxErrorException: Table ‘sell.hibernate_sequence‘ doesn‘t exist
  5. Excel计数(count)可视化
  6. 观察者模式 - dom事件 / 自定义事件 / Promise 我的理解
  7. 小甲鱼python课后题简书_MOOC_Python语言程序设计(嵩天)课后练习_第二周
  8. HashTable源码简单介绍
  9. 软件测试初学者学习资料汇总大全(校招、工作进阶通用)
  10. Eclipse项目环境配置
  11. JAVA远程读取服务器文件
  12. 一键生成AppIcon 多种尺寸图标
  13. wxwidgets自定义事件+调试
  14. hive编写自定义UDF函数
  15. mac Error: ENOENT: no such file or directory, stat ‘/.VolumeIcon.icns
  16. 关于虚拟机VMware中打开Ubuntu20.04提示AMD-V处于禁用状态解决办法(基于MSI微星主板)
  17. Scratch创作-从入门到精通
  18. python cv2什么意思_cv2,CV2是什么意思
  19. 苹果注定要输给欧盟,USB-C成为标准接口已是大势所趋
  20. Ubuntu QQ2009

热门文章

  1. N---Exponentiation
  2. nlp-tutorial代码注释1-1,语言模型、n-gram简介
  3. Gradient Descent(机器学习之梯度下降法)
  4. ## CSP 201612-1 中间数(C语言)(100分)
  5. Adaboost算法的学习笔记~
  6. 关于音频PCM数据2字节(16位)byte与64位double之间的转换
  7. GitLab CI 中激活Anaconda环境
  8. node下使用jquery
  9. “迭代期内无变更”与研发心理学(承诺管理,MosCoW方法)
  10. 【100题】第三十六 比赛淘汰问题(谷歌笔试)