Flutter 中为Firebase提供多个构建环境分离配置

  新学一种技术还是很多可以写的,因为在学习和使用新技术过程中会遇到很多问题,然后去研究解决。得到了经验值,这种经验值值得记录下来,主要是因为不记录下,偶会忘的😓~ 而且我会遇到,那么其他人也会遇到的,所以记录下方法,把复杂留给偶,把简单带给大家。就是这么不要脸~

  好了,不废话了,接着上一节Flutter 如何运行和打包不同环境的package,今天我们讲讲如何为工程配置不同环境的Firebase。

  老规矩,先上酸菜~
《Flutter的拨云见日》系列文章如下:
1、Flutter中指定字体(全局或者局部,自有字库或第三方)
2、Flutter发布Package(Pub.dev或私有Pub仓库)
3、Flutter中解决输入框(TextField)被键盘遮挡问题
4、Flutter 如何在不同环境上运行和打包
5、Flutter 中为Firebase提供多个构建环境分离配置

一、为什么要进行Firebase分离构建环境配置

  为啥要为Firebase分离构建环境配置呢,因为前面我们已经为不同环境的配置和Url分离了环境,设置了不同环境的main.dart文件。

  你想想,如果所有环境我们使用同一个Firebase工程,那么像我们经常使用Firebase的Crash、Analytics和Notification功能,如果不分离不同环境Firebase工程,那么我们不能区分是开发环境还是生产环境的Crash,特别是Notification,不分离的话,到时候测试开发环境的推送发到了生产环境上,那岂不是重大生产事故,估计得要杀程序员祭天了~。

二、Firebase上建立不同环境工程

  我们一般要使用Firebase的话,就得注册登录啥的,这些就不说了,这些没搞定的话,也到不了这里来的~嘿嘿。

  我们一般对同一App工程要建立两个Firebase工程,一个是Dev和Stage环境共同使用的工程一般命名为:**_Dev,还有一个是testing环境和live环境共同使用的工程一般命名为App应用名称。


图2.1.png

  接着,为Firebase工程添加Android和Ios项目配置,如图2.2


图2.2.png

为App项目添加名称和包名


图2.3.png

  最后,分别下载两个工程App的google配置文件:Android对应的是google-services.json;Ios对应的是GoogleService-Info.plish文件

三、Android端为Firebase进行分离构建环境配置

3.1 首先我们需要在Android工程下/app/build.gradle中添加不同的flavor(熟悉Android的同学应该知道,渠道打包的时候经常要用到的)
android {
    flavorDimensions "FlutterApp"
    productFlavors {
        dev {
            dimension "FlutterApp"
        }

        product {
            dimension "FlutterApp"
        }
    }
}

可以看到如上代码所示,我为我们的android工程配置了两种风味dev和product。分别对应了dev和product,开发和生产构建环境。

3.2 在android工程app目录下创建两个环境目录,并分别将刚刚下载的Firebase开发环境和生产环境的google-services.json文件添加进去

如图3.1


图3.1.png

这里值得注意的是,两个文件夹的命名必须和app/build.gradle中定义的一致。

以上就是Android端的配置过程,还是比较清晰简单的,Ios要复杂一点

四、Ios端为Firebase进行分离构建环境配置

4.1 首先,我们需要和Android端类似在ios工程下新建一个Firebase文件夹,然后在下面分别建立几个渠道环境的文件夹,然后分别添加从Firebase控制台下载的不同环境的GoogleService-Info.plist文件

\color{red}{(这里要注意的是,在Firebase文件夹下的几个目录名会对应我们不同环境名,保持和android端一致)}
如图4.1所示:

图4.1.png

4.2 然后,你需要为每种环境和构建配置的组合创建一个配置(默认情况下,有Debug,Release,Profile三个, 你可以通过按Info/Configureation下的+号来复制这些配置:

如图4.2.1所示:


图4.2.1.png

一般来说有几个渠道环境,Debug,Release和Profile就需要分别设置几个相对应的配置:如图4.2.2


图4.2.2.png
4.3 再次,我们需要对于每种渠道环境新增Scheme,为每种渠道环境复制新增Runner Scheme

4.3.1 点击New Scheme,如图4.3.1所示:


图4.3.1.png

4.3.2 在弹出的对话框中Target选择最底下的Runner,Name需要命名为和4.2中Firebase下的目录名一致(即渠道环境名,并与Android端保持一致,后面就不多重复,必须两端保持一致)
如图4.3.2所示:


图4.3.2.png

4.3.3 编辑你刚刚建好的Scheme(如图4.3.3.1),并为该Runner下的Run、Profile和Archive Task分别选择对应的Build Configuration配置,也就是dev Runner选择dev的build配置,product Runner选择product的build配置(如图4.3.3.2)


如图4.3.3.1.png
如图4.3.3.2.png
4.4 最后,我们需要添加自定义构建步骤,用来在构建应用时将对应环境的GoogleService-Info.plist复制到Runner中

4.4.1 首先,我们需要在Runner下的BuildPhases中点击“+”,添加一个"New Run Script Phases",并可以命名为“Firebase Run Script”(如图4.4.1)


图4.4.1.png

4.4.2 然后,我们需要将下面这一段脚本复制到我们刚刚添加的Script Phases中

# Type a script or drag a script file from your workspace to insert its path.
# Type a script or drag a script file from your workspace to insert its path.
environment="default"

# Regex to extract the scheme name from the Build Configuration
# We have named our Build Configurations as Debug-dev, Debug-prod etc.
# Here, dev and prod are the scheme names. This kind of naming is required by Flutter for flavors to work.
# We are using the $CONFIGURATION variable available in the XCode build environment to extract 
# the environment (or flavor)
# For eg.
# If CONFIGURATION="Debug-prod", then environment will get set to "prod".
if [[ $CONFIGURATION =~ -([^-]*)$ ]]; then
environment=${BASH_REMATCH[1]}
fi

echo $environment

# Name and path of the resource we're copying
GOOGLESERVICE_INFO_PLIST=GoogleService-Info.plist
GOOGLESERVICE_INFO_FILE=${PROJECT_DIR}/Firebase/${environment}/${GOOGLESERVICE_INFO_PLIST}

# Make sure GoogleService-Info.plist exists
echo "Looking for ${GOOGLESERVICE_INFO_PLIST} in ${GOOGLESERVICE_INFO_FILE}"
if [ ! -f $GOOGLESERVICE_INFO_FILE ]
then
echo "No GoogleService-Info.plist found. Please ensure it's in the proper directory."
exit 1
fi

# Get a reference to the destination location for the GoogleService-Info.plist
# This is the default location where Firebase init code expects to find GoogleServices-Info.plist file
PLIST_DESTINATION=${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app
echo "Will copy ${GOOGLESERVICE_INFO_PLIST} to final destination: ${PLIST_DESTINATION}"

# Copy over the prod GoogleService-Info.plist for Release builds
cp "${GOOGLESERVICE_INFO_FILE}" "${PLIST_DESTINATION}"

仔细读一读脚本,其实还是比较简单的,默认的Scheme环境是default,也就是说是默认的Scheme运行的话,将从Firebase/default文件夹下读取并复制GoogleService-Info.plist文件。

整体就是读取渠道环境,然后从Firebase对应的环境文件夹下复制GoogleService-Info.plist文件到工程目录下。

五、配置了Firebase分离环境后,如何运行Flutter工程

5.1 在Android Studio上运行程序

我们设置了不同渠道环境后,我们需要针对我们Flutter工程下的Channel进行对应设置,在《Flutter 如何运行和打包不同环境的package》。这一节中我们讲到了为Flutter配dev、stage、live环境,并为其添加了运行配置。

这里的话我们只需要在这几个main.dart的运行配置中添加Build flavor就可以了,对运行android和Ios都适用(如图5.1)


图5.1.png

我们不同的应用环境就对应不同的渠道环境,如dev、stage就可以设置为dev,testing和live就可以设置为product。

5.2 在Xcode上运行Ios端应用

5.2.1 这里很简单,比如说你想运行dev的渠道就选择dev Sheme运行,运行product渠道就选择product Sheme运行(如图5.2.1)


图5.2.1.png

5.2.2 然后,对于你想应用选不同的运行环境的话,可以在Flutter/Generated.xcconfig中修改为你所需要的运行环境main.dart文件(如图5.2.2),红框改成对应环境的main.dart就可以了


image.png
5.3 命令行运行
flutter run --flavor dev -t lib/main_dev.dart
--flavor dev: 代表的是dev的渠道环境
-t lib/main_dev.dart: 代表的是应用运行的环境main.dart文件

六、配置了Firebase分离环境后,如何打包Flutter工程

Android打包命令:
flutter build apk --flavor dev -t lib/main_dev.dart --split-debug-info ***AppName/V1.0.0

IOS打包命令:
flutter build ios --profile --flavor dev -t lib/main_dev.dart

七、关于Firebase分离环境的另一种设想实践(验证不成功,仅记录)

  以上,配置Firebase分离环境完成了,功能测试都没啥问题,但是感觉系不系挺繁琐的,Android和IOS两端都需要去配置。

7.1 那我们能不能换一种思维,正如我们前边已经配置了Flutter App的运行环境,在应用程序中我们其实是知道我们所处的运行环境,dev? stage?或是live。 那么我们能不能把不同渠道环境的GoogleSerivce-Info.plist和google-services.json文件下载并对于放到Flutter工程下asset目录中,并为其建立不懂文件夹以区分。如图7.1
图7.1.png
7.2 配置文件已经放好,我们就可以判断运行环境和运行平台(dev还是live,android还是ios),并分别解析配置文件(原生也是需要解析配置文件,只不过是Firebase插件自己干了)

如下所示代码:

  initFirebase(){
    switch(Channel.currentChannel){
      case APPChannel.DEV:
        initFirebaseApp(filePath: Platform.isIOS ? LocalFilePath.dev_ios_firebase_info_path : LocalFilePath.dev_android_firebase_info_path);
        break;
      case APPChannel.STAGE:
      case APPChannel.TESTING:
      case APPChannel.LIVE:
        initFirebaseApp(filePath: Platform.isIOS ? LocalFilePath.product_ios_firebase_info_path : LocalFilePath.product_android_firebase_info_path);
        break;
    }
  }
7.3 通过解析对应的配置文件,得到了很多key。我们就可以把这些Key通过Firebase flutter插件initializeApp一下,相当于自己个给他传递配置信息。

如图7.3所示:


图7.3.png

到这里感觉像那么回事,一运行发现不行,Android和IOS两端还是需要放置初始的配置文件,他们首先会使用初始配置信息去解析initialize First Firebase App!!!

Flutter Firebase的说明配置连接如下:
https://firebase.flutter.dev/docs/overview/

到此,此路不通,白费功夫,有此想法的,打住,已经帮你们探坑了~~~

八、结语

  最后的话,这篇文章写起来挺费事的,内容比较多。又涉及两个端。偶也是google了一番,下面附上英文版原文,英语好的自己看吧
1. Multiple Builds Environment in Flutter for Firebase Using Provider and Flavor
2. Separating Build Environment Configurations in Flutter with Firebase — Doing it the right way

后面的文章随性而为吧,遇到啥就写啥,待写的历史主题躺了一堆在草稿里,慢慢来,反正是一直写,一直爽~

申明:禁用于商业用途,如若转载,请附带原文链接。https://www.jianshu.com/p/d38db2397a27蟹蟹~

PS: 写文不易,觉得没有浪费你时间,请给个点赞~ 😁

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 161,873评论 4 370
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,483评论 1 306
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,525评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,595评论 0 218
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,018评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,958评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,118评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,873评论 0 208
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,643评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,813评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,293评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,615评论 3 262
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,306评论 3 242
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,170评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,968评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,107评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,894评论 2 278