FLutter build with Flavor (part-1) - Basic

Mỗi dự án chạy thường sẽ có nhiều môi trường để làm việc khác nhau. Để thuận tiện thường sẽ phân ra 3 môi trường là develop, staging và production. Mỗi môi trường build chúng ta sẽ có một base url API, config firebase... khác nhau. Do đó mỗi lần build chúng ta sẽ thay nó bằng code rồi build ư. Đặc biệt là trong Flutter sẽ có thêm cả Platform khác nhau như iOS, Android nữa chứ. Làm sao bây giờ? Không phải xoắn, đến với bài này chúng ta sẽ được cấu hình project theo từng môi trường khác nhau. Khi đó build or gõ 1 dòng lệnh đơn giải là nó có thể trỏ đến môi trường mà chúng ta mong muốn. Chiến thôi nào!!!!!

Đầu tiên là tạo dự án. Cái này tự xử đi nhé. Không hướng dẫn nữa đâu. Và mình cũng hướng dẫn về tạo 2 môi trường dev -> develop và stg -> staging. Còn lại thì tương tự thôi :D

Android:

Đối với android thì khá là dễ để ta có thể cấu hình. Có thế chỉ cần vài dòng là có thể chiến ngon ngay được. :D.

Đầu tiên mở cái file app/build.gradle lên nhé. Sửa đại khái trong thẻ android của file đó thôi nhé

defaultConfig {
    applicationId "vn.pirago.cou" 
}

Trong đó ta cần chú ý đến cái  "applicationId". cái này sẽ là cái mã định danh cho ứng dụng. giờ chúng ta cần thêm một số khai báo cho phần cấu hình build vào dưới thẻ "defaultConfig"

    flavorDimensions "flavor"
    productFlavors {
        dev {
            dimension "flavor"
            applicationIdSuffix = ".dev"
            resValue "string", "app_name", "Build-[DEV]"
        }
        stg {
            dimension "flavor"
            applicationIdSuffix = ".stg"
            resValue "string", "app_name", "Build-[STG]"
        }
    }

Đại để là nhìn nó sẽ như này nè:

Giải thích nhanh 1 số giá trị để xác định app nhé.
applicationIdSuffix: cái này sẽ dựa vào cái id chính đã chú ý ở trên để thêm vào 1 chuỗi string để tạo ra 1 appID mới.("vn.pirago.cou" -> "vn.pirago.cou.dev")
resValue: cái này sẽ thêm vào 1 chuỗi string với key là 'app_name', giá trị là 'Build-[DEV]'.

Giờ tìm và mở file 'AndroidManifest.xml' trong thư mục 'android' lên nhé. Đổi 'android:label="build_flavor"' -> 'android:label="@string/app_name"' để đổi tên app như cấu hình mong muốn ở trước nhé.

Giờ chạy lệnh:

flutter run -t lib/main.dart --flavor dev --debug
và
flutter run -t lib/main.dart --flavor stg --debug

Đối với Android đến đây tạm thời OK rồi. sang iOS làm tiếp nhể!

iOS:

Mở xCode ra chiến tiếp nào. Mở Manage Scheme lên cái nhể.

Chọn cái Manage Schemes... kia nhé. Nó sẽ mở ra 1 cái sửa sổ mới. Tại cửa sổ mới thì chọn dấu ... ở dưới rồi Duplicate cái Scheme mặc định lên nhé

Đặt lại tên cho nó. Thường mình sẽ đặt luôn là 'dev' và 'stg' luôn cho dễ nhớ. Cái mặc định thì cứ để đó sau này làm luôn cho cái Production cho nó nhanh.

Sau đó nó được như hình dưới

Trở về màn hình chính của xCode chọn Project -> Runner. Chú ý đến phần 'Configuration' nhé. Sẽ cấu hình build tại đây. Công việc tại đây sẽ là tạo config build cho từng schemes đã tạo trước đó.

Cái này tuỳ bạn muốn build gì thì tạo thêm thôi. Ví dụ như là cần build debug chạy thôi. còn muốn Archive release các kiểu thì tạo của cái đó luôn. Cái mặc định thì cứ để đó làm production sau này cũng được. Còn nếu muốn dùng cho dev or stg thì rename đi thôi.

Run thử phát xem sao nhể! :D

Cứ phải là OK luôn! Một nhát ăn luôn.
Giờ đến phần name và bundleID theo flavor thôi. Trờ lại xCode nào các bạn ơi.

Lần này chọn Runner trong phần TARGETS nhé. Tiếp theo chọn 'Build Setting' trong ô tìm kiếm gõ vào 'bundle id' nó sẽ ra cái 'Product Bundle Indentifier'. Click vào mũi tên cho nó mở rộng ra nhé. :D

Chọn bundle id muốn đổi và click đúp nhé. Đổi tên và Enter là xong thôi.

Làm lần lượt cho từ cái cái thôi. Xong địa khái sẽ ra như bên dưới nhé!

Giờ đến phần tên của App. Đối với cách này thì sẽ có nhiều cách. nhưng đây là cách dễ làm và dễ tiếp cận nhất. Làm tương tự như bundle ID thôi. gõ tìm kiếm là 'name' sau đó đổi tên App theo mong muốn. Sẽ được như dưới.

Cuối cùng là cần chỉnh sửa một chút ở file info.plist. Tại đây thì khoá 'Bundle display name' ta cần sửa 1 chút phần value để nó nhận phần Name mà ta đã thay đổi trước đó. Thông thường khi tạo ra nó sẽ là tên mặc định mình cần đổi qua:

$(PRODUCT_NAME)

Nhưng cách này có 1 nhược điểm là khi archive để upload lên store connect nếu đặt tên có ký tự đặc biệt sẽ không verify được. Nên có 1 cách khác là tạo User-Definer cho nó.

Click vào dấu + rồi chọn Add User Defined Setting nhé. Sau đó sẽ ra như dưới

Cái NEW_SETTING thì mình sẽ đặt tên. VD: APP_NAME_FLAVOR. Rồi làm như bước đặt tên ở trên. Trong info.plist thì thay $(PRODUCT_NAME) -> $(APP_NAME_FLAVOR). Nếu làm theo hướng này thì bước đặt tên ở trên ko cần nữa. Đổi thành mặc định là ok. :D

Như vậy là xong. Chạy thử lệnh xem ok không nhể.

Đấy! Ra luôn 2 app 2 name khác nhau! Húp vội. Nói chung là ez. Tạm thời dừng P1 tại đây thôi. Phần tiếp theo sẽ là mở rộng để có thể chạy được api riêng biệt theo Flavor đã setting nhé. Thân ái!

Part 1
Part 2
Part 3