[不需要Mac]将Firebase SDK嵌入Flutter应用程序并将其部署到iOS和Android上的过程–Codemagic


介绍

*本文是以下文章的续篇之一。

[不需要Mac]在iOS和Android上开发中的Flutter应用程序的部署过程-Codemagic Edition

在本文中,我将说明将Firebase SDK嵌入Flutter中以及从iOS和Android设备与Firebase控制台进行通信的过程。

完成Firebase SDK的嵌入具有以下优点。

  • 您可以在Firebase控制台中查看何时,何地以及何时运行您的应用程序。
  • 您可以使用Firebase API(FlutterFire)顺利嵌入链接代码。
  • 可以顺利合并使用用户的Google帐户的实施方式(例如,使用Google Photos和Flutter构建照片共享应用程序)。

从上面,我认为很多情况下该程序将成为开发的基础,因此我决定在该程序中进行总结。让我们开始吧。

致谢

Codemagic实用指南

本文记录了不使用Mac在Windows 10上执行Codemagic提供的以下步骤。感谢您提供有礼貌的指南。

  • 实用指南:Flutter Firebase Codemagic(iOS)
  • 实用指南:Flutter Firebase Codemagic(Android)

假设

本文将指导您逐步完成将Firebase SDk集成到您的iOS / Android应用程序中的步骤,以帮助下列人员:

  • 开发机器是Windows
  • 我没有Mac
  • 我想和Flutter一起发展
  • 已经注册了Apple Developer Program。

开发环境假设

请按照以下文章中的步骤使用Codemagic构建Flutter应用程序,以便您可以在iOS / Android设备上部署该应用程序。

  • [不需要Mac]在iOS和Android上开发中的Flutter应用程序的部署过程--Codemagic

源代码发布

由本文中的过程创建的源代码可在Github上获得。请同时参考。
https://github.com/atsuteru/flutter_firebase_0507/tree/Qiita-FirebaseSDK-v1.0

文本

1)在Firebase控制台

上注册应用

转到Firebase控制台并添加一个Firebase项目。
*如果您没有帐户,请创建一个。

  • 输入项目名称。
    Firebase コンソール - Google Chrome 2020_05_03 17_09_28.png

  • 保持启用Google Analytics(分析)。
    Firebase コンソール - Google Chrome 2020_05_03 17_09_39.png

  • 选择默认的Google Analytics(分析)帐户。
    Firebase コンソール - Google Chrome 2020_05_03 17_09_48.png

  • 2)将Android应用添加到Firebase应用,并将SDK嵌入Flutter的Android项目

    在Flutter控制台创建的"应用"页面上添加一个Android应用。

    在此之前,我需要一条信息。

    在随后的步骤中,您将需要输入对您的Android应用进行签名的证书的"指纹(SHA1)"。执行以下命令,检查在Codemagic中注册的密钥库(* .jks)的"指纹(SHA1)"。

    电源外壳

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    keytool -v -list -keystore flutter_firebase_0503.jks
    キーストアのパスワードを入力してください:
    キーストアのタイプ: PKCS12
    キーストア?プロバイダ: SUN
    キーストアには1エントリが含まれます
    別名: flutter_firebase_0503_key
    ...省略...
    証明書のフィンガプリント:
             SHA1: 59:F2:64:83:A9:12:E8:44:02:58:45:73:B7:41:1A:77:8D:32:13:B0
    ...省略...
  • 点击Android图标将其添加。
    Firebase コンソール - Google Chrome 2020_05_03 17_15_53.png

  • 输入应用信息。 Android软件包名称应与android/ap/src/profile/AndroidManifest.xml的软件包属性具有相同的值。对于用于调试的签名证书SHA-1,输入已检查的"指纹(SHA1)"。输入后,单击"注册应用程序"。
    Firebase コンソール - Google Chrome 2020_05_03 17_18_21.png

  • 在下一页上,下载配置文件google-services.json。 将下载的文件保存到プロジェクトルート/android/app/google-services.json。保存后,单击"下一步"。
    Firebase コンソール - Google Chrome 2020_05_03 17_18_35.png

  • 在您的Android项目中包括Firebase SDK。请按照此页面上的说明进行安装。请注意,"项目级别build.gradle"为android/build.gradle,"应用程序级别build.gradle"为android/app/build.gradle。这是在"每个块的末尾"添加"添加此行"部分的一种形式。您也可以跳过步骤"最后,在IDE出现的栏中单击立即同步"。如果可以,请单击"下一步"。
    Firebase コンソール - Google Chrome 2020_05_03 17_21_43.png

  • 最后,将显示用于确认与应用程序通信的页面。 我们稍后将检查通信,因此在此处选择"跳过此步骤"。
    Firebase コンソール - Google Chrome 2020_05_03 17_36_21.png

  • 在步骤4中,粘贴我在下面编辑的结果。

    android / build.gradle

    1
    2
    3
    4
    5
    6
    7
    buildscript {
        ...省略...
        dependencies {
            classpath 'com.android.tools.build:gradle:3.5.0'
            classpath 'com.google.gms:google-services:4.3.3'
        }
    }

    android / app / build.gradle

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    apply plugin: 'com.android.application'
    apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
    apply plugin: 'com.google.gms.google-services'

    android {
       ...(省略)...
    }

    ...(省略)...

    dependencies {
        testImplementation 'junit:junit:4.12'
        androidTestImplementation 'androidx.test:runner:1.1.1'
        androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
        implementation 'com.google.firebase:firebase-analytics:17.2.2'
    }

    另外,您添加到项目中的google-services.json包含不应添加到资源库中的信息。
    如下所示,将排除设置添加到android/.gitignore

    android / .gitignore

    1
    app/google-services.*

    相反,必须单独向Codemagic注册google-services.json。在这里,执行以下命令将google-services.json转换为base64格式的文件google-services.base64

    电源外壳

    1
    2
    cd $Env:userprofile\source\repos\flutter_firebase\flutter_firebase_0503
    openssl enc -base64 -in android/app/google-services.json -out android/app/google-services.base64

    这样就完成了Android的安装过程。接下来,让我们为iOS进行嵌入过程。

    3)将iOS应用添加到Firebase应用,并将SDK嵌入Flutter的iOS项目

    在Flutter控制台创建的"应用"页面上添加iOS应用。

  • 单击iOS图标将其添加。
    Firebase コンソール - Google Chrome 2020_05_03 17_45_19.png

  • 输入应用信息。 iOS捆绑包ID的值应与android/ap/src/profile/AndroidManifest.xml的包属性相同。仅在完成Apple Store Connect程序后才输入您的App Store ID。 (文章:[Mac不需要]将正在开发的Flutter应用程序部署到其他iOS设备的过程--Codemagic