Flutter 中為Firebase提供多個構建環(huán)境分離配置

??新學一種技術還是很多可以寫的娃承，因為在學習和使用新技術過程中會遇到很多問題狸相，然后去研究解決闪朱。得到了經(jīng)驗值月匣，這種經(jīng)驗值值得記錄下來，主要是因為不記錄下奋姿，偶會忘的??~ 而且我會遇到锄开，那么其他人也會遇到的，所以記錄下方法称诗，把復雜留給偶萍悴，把簡單帶給大家。就是這么不要臉~

??好了寓免，不廢話了癣诱，接著上一節(jié)Flutter 如何運行和打包不同環(huán)境的package，今天我們講講如何為工程配置不同環(huán)境的Firebase袜香。

??老規(guī)矩撕予，先上酸菜~
《Flutter的撥云見日》系列文章如下：
1、Flutter中指定字體(全局或者局部蜈首，自有字庫或第三方)
2实抡、Flutter發(fā)布Package(Pub.dev或私有Pub倉庫)
3、Flutter中解決輸入框(TextField)被鍵盤遮擋問題
 4欢策、Flutter 如何在不同環(huán)境上運行和打包
 5吆寨、Flutter 中為Firebase提供多個構建環(huán)境分離配置

一、為什么要進行Firebase分離構建環(huán)境配置

??為啥要為Firebase分離構建環(huán)境配置呢踩寇，因為前面我們已經(jīng)為不同環(huán)境的配置和Url分離了環(huán)境啄清，設置了不同環(huán)境的main.dart文件。

??你想想姑荷，如果所有環(huán)境我們使用同一個Firebase工程盒延，那么像我們經(jīng)常使用Firebase的Crash缩擂、Analytics和Notification功能，如果不分離不同環(huán)境Firebase工程添寺，那么我們不能區(qū)分是開發(fā)環(huán)境還是生產(chǎn)環(huán)境的Crash胯盯，特別是Notification，不分離的話计露，到時候測試開發(fā)環(huán)境的推送發(fā)到了生產(chǎn)環(huán)境上博脑，那豈不是重大生產(chǎn)事故，估計得要殺程序員祭天了~票罐。

二叉趣、Firebase上建立不同環(huán)境工程

??我們一般要使用Firebase的話，就得注冊登錄啥的该押，這些就不說了疗杉，這些沒搞定的話，也到不了這里來的~嘿嘿蚕礼。

??我們一般對同一App工程要建立兩個Firebase工程烟具，一個是Dev和Stage環(huán)境共同使用的工程一般命名為：**_Dev，還有一個是testing環(huán)境和live環(huán)境共同使用的工程一般命名為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進行分離構建環(huán)境配置

3.1 首先我們需要在Android工程下/app/build.gradle中添加不同的flavor(熟悉Android的同學應該知道狸演，渠道打包的時候經(jīng)常要用到的)

android {
    flavorDimensions "FlutterApp"
    productFlavors {
        dev {
            dimension "FlutterApp"
        }

        product {
            dimension "FlutterApp"
        }
    }
}

可以看到如上代碼所示言蛇，我為我們的android工程配置了兩種風味dev和product。分別對應了dev和product严沥，開發(fā)和生產(chǎn)構建環(huán)境猜极。

3.2 在android工程app目錄下創(chuàng)建兩個環(huán)境目錄，并分別將剛剛下載的Firebase開發(fā)環(huán)境和生產(chǎn)環(huán)境的google-services.json文件添加進去

如圖3.1

圖3.1.png

這里值得注意的是消玄，兩個文件夾的命名必須和app/build.gradle中定義的一致。

以上就是Android端的配置過程丢胚，還是比較清晰簡單的翩瓜，Ios要復雜一點

四、Ios端為Firebase進行分離構建環(huán)境配置

4.1 首先携龟，我們需要和Android端類似在ios工程下新建一個Firebase文件夾兔跌，然后在下面分別建立幾個渠道環(huán)境的文件夾，然后分別添加從Firebase控制臺下載的不同環(huán)境的GoogleService-Info.plist文件

$\color{red}{(這里要注意的是峡蟋，在Firebase文件夾下的幾個目錄名會對應我們不同環(huán)境名坟桅，保持和android端一致)}$
如圖4.1所示：

圖4.1.png

4.2 然后华望，你需要為每種環(huán)境和構建配置的組合創(chuàng)建一個配置（默認情況下，有Debug仅乓，Release赖舟，Profile三個，你可以通過按Info/Configureation下的+號來復制這些配置：

如圖4.2.1所示：

圖4.2.1.png

一般來說有幾個渠道環(huán)境夸楣，Debug宾抓，Release和Profile就需要分別設置幾個相對應的配置：如圖4.2.2

圖4.2.2.png

4.3 再次，我們需要對于每種渠道環(huán)境新增Scheme豫喧，為每種渠道環(huán)境復制新增Runner Scheme

4.3.1 點擊New Scheme石洗，如圖4.3.1所示:

圖4.3.1.png

4.3.2 在彈出的對話框中Target選擇最底下的Runner，Name需要命名為和4.2中Firebase下的目錄名一致(即渠道環(huán)境名紧显，并與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 最后花椭，我們需要添加自定義構建步驟，用來在構建應用時將對應環(huán)境的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環(huán)境是default折柠，也就是說是默認的Scheme運行的話宾娜，將從Firebase/default文件夾下讀取并復制GoogleService-Info.plist文件。

整體就是讀取渠道環(huán)境扇售，然后從Firebase對應的環(huán)境文件夾下復制GoogleService-Info.plist文件到工程目錄下前塔。

五、配置了Firebase分離環(huán)境后承冰，如何運行Flutter工程

5.1 在Android Studio上運行程序

我們設置了不同渠道環(huán)境后华弓，我們需要針對我們Flutter工程下的Channel進行對應設置，在《Flutter 如何運行和打包不同環(huán)境的package》困乒。這一節(jié)中我們講到了為Flutter配dev寂屏、stage、live環(huán)境，并為其添加了運行配置迁霎。

這里的話我們只需要在這幾個main.dart的運行配置中添加Build flavor就可以了吱抚，對運行android和Ios都適用(如圖5.1)

圖5.1.png

我們不同的應用環(huán)境就對應不同的渠道環(huán)境，如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 然后，對于你想應用選不同的運行環(huán)境的話婚苹，可以在Flutter/Generated.xcconfig中修改為你所需要的運行環(huán)境main.dart文件(如圖5.2.2)岸更，紅框改成對應環(huán)境的main.dart就可以了

image.png

5.3 命令行運行

flutter run --flavor dev -t lib/main_dev.dart
--flavor dev: 代表的是dev的渠道環(huán)境
-t lib/main_dev.dart: 代表的是應用運行的環(huán)境main.dart文件

六、配置了Firebase分離環(huán)境后膊升，如何打包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分離環(huán)境的另一種設想實踐(驗證不成功，僅記錄)

??以上廓译，配置Firebase分離環(huán)境完成了评肆，功能測試都沒啥問題，但是感覺系不系挺繁瑣的非区，Android和IOS兩端都需要去配置瓜挽。

7.1 那我們能不能換一種思維，正如我們前邊已經(jīng)配置了Flutter App的運行環(huán)境征绸，在應用程序中我們其實是知道我們所處的運行環(huán)境久橙，dev? stage？或是live管怠。那么我們能不能把不同渠道環(huán)境的GoogleSerivce-Info.plist和google-services.json文件下載并對于放到Flutter工程下asset目錄中淆衷，并為其建立不懂文件夾以區(qū)分。如圖7.1

圖7.1.png

7.2 配置文件已經(jīng)放好渤弛，我們就可以判斷運行環(huán)境和運行平臺(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

到這里感覺像那么回事，一運行發(fā)現(xiàn)不行瑞筐，Android和IOS兩端還是需要放置初始的配置文件，他們首先會使用初始配置信息去解析initialize First Firebase App!!!

Flutter Firebase的說明配置連接如下：
https://firebase.flutter.dev/docs/overview/

到此，此路不通聚假，白費功夫块蚌，有此想法的，打住膘格，已經(jīng)幫你們探坑了~~~

八峭范、結語

??最后的話，這篇文章寫起來挺費事的瘪贱，內(nèi)容比較多纱控。又涉及兩個端。偶也是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

后面的文章隨性而為吧，遇到啥就寫啥球昨，待寫的歷史主題躺了一堆在草稿里尔店，慢慢來，反正是一直寫主慰，一直爽~

申明：禁用于商業(yè)用途嚣州，如若轉載，請附帶原文鏈接共螺。http://www.reibang.com/p/d38db2397a27蟹蟹~

PS: 寫文不易该肴，覺得沒有浪費你時間，請給個點贊~ ??