Contents
Xin chào! Mình là Hồng Vân và sau đây là bài viết tiếp theo của mình. Bài viết với chủ đề Customize Run & Debug trong Flutter.
Trước khi đi vào chủ đề chính thì mình xin tự giới thiệu.
Mình là Lê Hồng Vân, là nữ và là 1 dev iOS chân chính, có kinh nghiệm gần 4 năm trong ngôn ngữ lập trình Swift.
Còn nếu mọi việc ổn rồi, thì …
Bắt đầu thôi!
Chuẩn bị
Về mặt kiến thức, bạn cần thông thạo Flutter cơ bản trước nhóe. Còn về mặt tools & versions, mình sẽ sử dụng các công cụ như sau:
- IDE:
- VSCode version 1.67.0
- Android Studio Bumblebee version 2021.1.1 Patch 3
- XCode version 13.3.1
- Flutter SDK version 2.10.5
Ngoài ra, bài viết Customize Run and Debug cũng là bài tiếp theo của bài Flavor trong Flutter. Nên nếu bạn chưa đọc qua nó, thì có thể tham khảo ở link sau:
Khát quát về Launch Configuration
VS Code giúp bạn đơn giản hoá việc khởi chạy và debug các cấu hình custom của app. Để làm được điều đó, VS Code sẽ đọc file launch.json nằm trong folder .vscode và việc chúng ta cần làm là viết các cấu hình custom chúng ta muốn vào đấy.
Và các cấu hình custom này được gọi là launch configuration.
Khi bạn cài Dart & Flutter extension vào VSCode, nó sẽ đi kèm với 1 trình khởi chạy mặc định. Đó là lý do vì sao bạn vẫn có thể chạy ứng dụng mà không có file launch.json.
Tóm lại, launch configuration không phải là tính năng của Dart hay Flutter. Nó là một cấu hình để mở rộng khả năng của VS Code. Nếu các bạn sử dụng Android Studio để build code flutter, thì có lẽ bài viết này không dành cho bạn rồi.
Ahihi!
Cấu hình file launch.json
Tạo file
Đầu tiên, mình sẽ hướng dẫn cách tạo file launch.json:
-
Bạn vào tab
Run and Debugvà click vào create a launch.json file.
- Sau khi click thì bạn sẽ thấy 1 file như thế này
-
File có nội dung ban đầu với cấu trúc json như sau:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "demo_flavor",
"request": "launch",
"type": "dart"
},
{
"name": "demo_flavor (profile mode)",
"request": "launch",
"type": "dart",
"flutterMode": "profile"
},
{
"name": "demo_flavor (release mode)",
"request": "launch",
"type": "dart",
"flutterMode": "release"
}
]
}
Trong object configurations chính là các launch configuration mà các bạn có thể custom.
Thuộc tính
Để mình giải thích về một số thuộc tính của launch configuration nhé!
-
name: (bắt buộc có) tên của launch configuration sẽ xuất hiện trong menu xổ xuống của tab Run & Debug.Là cái menu này nè!
-
request: (bắt buộc có) có 2 loại là launch và attach, để phân biệt giữa chúng thì các bạn đọc thêm tại đây. -
type: (bắt buộc có) loại debbuger sử dụng -
args: các tham số được truyền vào -
program: file để khởi chạy khi launch debugger
Còn rất nhiều tham số mà bạn có thể tham khảo tại Launch.json attributes nhưng cơ bản với Dart thì chỉ cần chừng đó là đủ rồi.
Bạn không cần phải quá lo lắng về việc hiểu sâu về các thuộc tính này. Vì khi, các bạn tạo ra file
launch.jsonthì VSCode đã chọn sẵn các thuộc tính phù hợp nhất với mình rồi!
Customize run & debug with Flutter Flavors
Dịch nghĩa tiêu đề ra là Tuỳ chỉnh trình khởi chạy và gỡ rối với các môi trường của Flutter. Nghe khá khoai nên mình xin phép giữ tiếng Anh cho tiêu đề.
Về Flutter Flavors, các bạn có thể tham khảo lại bài viết trước của mình tại link này (link GitHub cho chính chủ nhóe!)
Mình sẽ define 3 launch configuration tương ứng với 3 flavor là dev, staging và product.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
// 1
"name": "dev",
// 2
"request": "launch",
// 3
"type": "dart",
// 4
"args": ["--flavor", "dev"]
},
{
"name": "staging",
"request": "launch",
"type": "dart",
"args": ["--flavor", "staging"]
},
{
"name": "product",
"request": "launch",
"type": "dart",
"args": ["--flavor", "product"]
}
]
}
Giải thích một chút:
-
1: Mình chọn cách đặt tên theo tên flavor cho dễ phân biệt -
2và3: request và type sẽ được giữ nguyên theo đề xuất của VS Code -
4: Chúng ta sử dụng tham số là--flavorvới value là các flavor tương ứng mà mình đã config ở bài trước. Các bạn có thắc mắc vì sao tham số là--flavorkhông? Ở đây chúng ta sẽ pass những argument vào câu lệnhflutter run. Như hướng dẫn ở phần thực thi, câu lệnh chúng ta sẽ thực hiện khi run app Flutter với flavor làflutter run --flavor {tên flavor tương ứng}.
Thực thi
Tới bước này, bạn đã hoàn thành mong muốn là build được các flavor bằng nút build của IDE mà không cần chạy lệnh rồi đó!
Thử chọn từng launch configuration trên Run Menu và bấm nút thôi!
Kết quả: Bạn có thể thấy 3 cái app với 3 tên khác nhau tương ứng với các flavor do mình đã tạo ở bước trước đó!
- Android
- iOS
Tạm kết
Qua 2 bài viết của mình, bạn đã biết cách
-
Cấu hình các flavor cho Flutter.
-
Sử dụng launch configuration để custom run và debug theo ý muốn của mình.
Có lẽ bạn sẽ cảm thấy còn thiếu thiếu gì đó về Flavor. Chúng ta đã có những app name khác nhau, có những application id (android) hay bundle identifier (iOS) khác nhau và tương ứng với từng flavor nhưng còn những đặc trưng nhất của chúng là api url, key service thì sao? Phải làm như thế nào để định nghĩa mỗi api url riêng cho từng flavor?
Câu trả lời cho các câu hỏi trên, thì bạn tham khảo bài viết này nhóe!
Okay! Tới đây, mình xin kết thúc bài viết về Customize Run & Debug trong Flutter . Nếu có gì thắc mắc hay góp ý cho mình thì bạn có thể để lại bình luận hoặc gởi email theo trang Contact.
- Bạn có thể checkout source code tại đây.
- Nguồn tham khảo:
-
Follow me more:
- Facebook: https://www.facebook.com/van.may.750/
- Email : lehongvan.develop@gmail.com
- LinkedIn: https://www.linkedin.com/in/le-van-935231150/
Cảm ơn bạn đã đọc bài viết này!
Related Posts:
