การใช้ Code Push ใน Flutter

การใช้ Code Push ใน Flutter: อัปเดตแอปโดยไม่ต้อง Release ใหม่

ในโลกของการพัฒนาแอปพลิเคชัน การอัปเดตแอปอย่างรวดเร็วและราบรื่นเป็นสิ่งสำคัญอย่างยิ่ง ผู้ใช้คาดหวังว่าแอปพลิเคชันจะได้รับการปรับปรุงและแก้ไขข้อผิดพลาดอยู่เสมอ การอัปเดตแอปแบบดั้งเดิมนั้นต้องอาศัยการส่งแอปเวอร์ชันใหม่ไปยัง App Store หรือ Play Store ซึ่งอาจใช้เวลานานและทำให้ผู้ใช้บางส่วนไม่ได้รับการอัปเดตทันที โซลูชันหนึ่งที่ช่วยแก้ปัญหานี้คือ Code Push

Code Push คือเทคโนโลยีที่ช่วยให้เราสามารถอัปเดตโค้ดของแอปพลิเคชันได้โดยตรงไปยังอุปกรณ์ของผู้ใช้ โดยไม่ต้องผ่านกระบวนการ Review และ Release ใหม่บน App Store หรือ Play Store การอัปเดตเหล่านี้เรียกว่า Over-The-Air (OTA) Updates ซึ่งช่วยให้เราสามารถแก้ไขข้อผิดพลาด ปรับปรุงคุณสมบัติ หรือเพิ่มฟีเจอร์ใหม่ ๆ ได้อย่างรวดเร็วและมีประสิทธิภาพ

CodePush คืออะไร?

CodePush เป็นบริการของ Microsoft App Center ที่ช่วยให้เราสามารถเผยแพร่การอัปเดตไปยังแอปพลิเคชัน React Native, Cordova, และ Flutter ได้โดยตรง การอัปเดตเหล่านี้จะถูกส่งไปยังอุปกรณ์ของผู้ใช้โดยอัตโนมัติเมื่อแอปพลิเคชันเปิดขึ้น หรือเมื่อผู้ใช้รีสตาร์ทแอป

ข้อดีของการใช้ Code Push:

อัปเดตได้รวดเร็ว: สามารถแก้ไขข้อผิดพลาดและปรับปรุงแอปได้ทันที โดยไม่ต้องรอการอนุมัติจาก App Store หรือ Play Store
ลดความยุ่งยาก: ลดขั้นตอนการ Release แอปใหม่ ทำให้ทีมพัฒนาสามารถโฟกัสกับการพัฒนาคุณสมบัติใหม่ ๆ ได้มากขึ้น
ปรับปรุงประสบการณ์ผู้ใช้: ผู้ใช้จะได้รับการอัปเดตล่าสุดโดยไม่ต้องดาวน์โหลดแอปเวอร์ชันใหม่
ทดสอบคุณสมบัติใหม่ได้ง่าย: สามารถปล่อยการอัปเดตให้กับกลุ่มผู้ใช้เป้าหมายเพื่อทดสอบคุณสมบัติใหม่ก่อนที่จะปล่อยให้ผู้ใช้ทั้งหมด
rollback ได้ง่าย: หากการอัปเดตมีปัญหา สามารถย้อนกลับไปใช้เวอร์ชันก่อนหน้าได้อย่างรวดเร็ว

ข้อควรระวังในการใช้ Code Push:

ไม่เหมาะกับการอัปเดต Native Code: Code Push เหมาะสำหรับการอัปเดต JavaScript, HTML, CSS, และ Assets เท่านั้น หากมีการเปลี่ยนแปลง Native Code (เช่น Java/Kotlin สำหรับ Android หรือ Swift/Objective-C สำหรับ iOS) จะต้อง Release แอปใหม่ผ่าน App Store หรือ Play Store
ความเสี่ยงด้านความปลอดภัย: การอัปเดตโค้ดผ่าน OTA อาจมีความเสี่ยงด้านความปลอดภัย หากไม่มีการป้องกันที่เหมาะสม ผู้ไม่หวังดีอาจแทรกแซงการอัปเดตและฝังโค้ดที่เป็นอันตรายได้
ข้อกำหนดของ App Store และ Play Store: App Store และ Play Store มีข้อกำหนดเกี่ยวกับการอัปเดตแอป หากใช้ Code Push มากเกินไป อาจละเมิดข้อกำหนดและทำให้แอปถูกถอดออกจาก Store ได้

การใช้งาน Code Push ใน Flutter

ในการใช้งาน Code Push ใน Flutter เราจะต้องติดตั้งและตั้งค่า Plugin ที่เกี่ยวข้อง รวมถึงการกำหนดค่า App Center Account และ CodePush Deployment Key

ขั้นตอนการติดตั้งและตั้งค่า:

สร้าง App Center Account: หากยังไม่มี App Center Account ให้สร้างได้ที่ https://appcenter.ms/
สร้าง App ใน App Center: สร้างแอปพลิเคชันใหม่ใน App Center สำหรับทั้ง Android และ iOS
ติดตั้ง CodePush CLI: ติดตั้ง CodePush Command Line Interface (CLI) โดยใช้ npm:
```
npm install -g code-push
```
Login เข้า App Center ด้วย CodePush CLI:
```
code-push login
```
ติดตั้ง CodePush Plugin ใน Flutter Project: เพิ่ม `flutter_code_push` dependency ใน `pubspec.yaml`:
```
dependencies:
  flutter_code_push: ^1.0.0 # ตรวจสอบเวอร์ชันล่าสุดที่ pub.dev
```
Get Dependencies:
```
flutter pub get
```
เพิ่ม CodePush Deployment Key: เพิ่ม CodePush Deployment Key ใน `Info.plist` (iOS) และ `AndroidManifest.xml` (Android)
- iOS (Info.plist):
```
<key>CodePushDeploymentKey</key>
<string>YOUR_IOS_DEPLOYMENT_KEY</string>
```
- Android (AndroidManifest.xml):
```
<meta-data android:name="com.microsoft.codepush.CODE_PUSH_KEY"
    android:value="YOUR_ANDROID_DEPLOYMENT_KEY" />
```
Deployment Key สามารถหาได้จาก App Center โดยไปที่ App -> Deploy -> CodePush -> Staging/Production

Initialize CodePush ใน Flutter App: Wrap `MaterialApp` ด้วย `CodePush` Widget ใน `main.dart`:

import 'package:flutter/material.dart';
import 'package:flutter_code_push/flutter_code_push.dart';

void main() {
  runApp(
    CodePush(
      deploymentKey: 'YOUR_DEPLOYMENT_KEY', // แทนที่ด้วย Deployment Key ของคุณ
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Code Push Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Code Push Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

การ Deploy Updates ด้วย CodePush CLI:

เมื่อต้องการ Deploy Update ให้ใช้คำสั่ง `code-push release-flutter`:

code-push release-flutter -a YOUR_APP_OWNER/YOUR_APP_NAME -d Staging

โดยที่:

`YOUR_APP_OWNER` คือชื่อ Owner ของ App ใน App Center
`YOUR_APP_NAME` คือชื่อ App ใน App Center
`-d Staging` คือ Deployment Environment (สามารถเป็น Staging หรือ Production)

คำสั่งนี้จะสร้าง bundle ของโค้ด Flutter และส่งไปยัง App Center จากนั้น App Center จะเผยแพร่การอัปเดตไปยังอุปกรณ์ของผู้ใช้ที่ใช้ Deployment Key ที่ถูกต้อง

การจัดการ Updates ใน Flutter App:

คุณสามารถควบคุมการอัปเดตใน Flutter App ได้โดยใช้ `CodePush` Widget หรือ Methods ต่างๆ เช่น:

`CodePush.checkForUpdate()`: ตรวจสอบว่ามีการอัปเดตใหม่หรือไม่
`CodePush.sync()`: ดาวน์โหลดและติดตั้งการอัปเดต
`CodePush.restartApp()`: รีสตาร์ทแอปเพื่อใช้การอัปเดตใหม่

ตัวอย่างการตรวจสอบและติดตั้งการอัปเดตเมื่อแอปเปิดขึ้น:

@override
void initState() {
  super.initState();
  _checkForUpdates();
}

Future<void> _checkForUpdates() async {
  await CodePush.sync(
    installMode: InstallMode.ON_NEXT_RESTART, // หรือ InstallMode.IMMEDIATE
    updateDialog: true, // แสดง Dialog ให้ผู้ใช้ยืนยันการอัปเดต
  );
}

Trade-offs และแนวปฏิบัติที่ดี:

เลือก Install Mode ที่เหมาะสม: `InstallMode.ON_NEXT_RESTART` จะติดตั้งการอัปเดตเมื่อแอปถูกรีสตาร์ท ในขณะที่ `InstallMode.IMMEDIATE` จะติดตั้งทันที ซึ่งอาจรบกวนการใช้งานของผู้ใช้ เลือกใช้ตามความเหมาะสมของแต่ละสถานการณ์
แจ้งเตือนผู้ใช้: แสดง Dialog หรือ Notification เพื่อแจ้งให้ผู้ใช้ทราบว่ามีการอัปเดตใหม่ เพื่อให้ผู้ใช้ทราบว่าแอปมีการเปลี่ยนแปลง
ทดสอบการอัปเดต: ก่อนที่จะปล่อยการอัปเดตไปยัง Production ให้ทดสอบใน Staging Environment ก่อน เพื่อให้แน่ใจว่าการอัปเดตทำงานได้อย่างถูกต้อง
ตรวจสอบขนาดการอัปเดต: การอัปเดตที่มีขนาดใหญ่เกินไปอาจใช้เวลานานในการดาวน์โหลดและติดตั้ง ทำให้ผู้ใช้รู้สึกไม่ดี พยายามลดขนาดการอัปเดตให้เล็กที่สุด
ใช้ CodePush อย่างระมัดระวัง: อย่าใช้ CodePush สำหรับการเปลี่ยนแปลง Native Code หรือการเปลี่ยนแปลงที่สำคัญที่อาจทำให้แอปทำงานผิดพลาด

สรุป

Code Push เป็นเครื่องมือที่มีประโยชน์อย่างยิ่งสำหรับการอัปเดตแอป Flutter อย่างรวดเร็วและมีประสิทธิภาพ ช่วยให้เราสามารถแก้ไขข้อผิดพลาด ปรับปรุงคุณสมบัติ และเพิ่มฟีเจอร์ใหม่ ๆ ได้โดยไม่ต้องรอการอนุมัติจาก App Store หรือ Play Store อย่างไรก็ตาม การใช้ Code Push ต้องทำด้วยความระมัดระวังและคำนึงถึงข้อควรระวังต่าง ๆ เพื่อให้มั่นใจว่าการอัปเดตเป็นไปอย่างราบรื่นและปลอดภัย

ในบทความถัดไป เราจะพูดถึงเรื่อง Deep Linking ใน Flutter ซึ่งเป็นอีกหนึ่งเครื่องมือที่มีประโยชน์ในการปรับปรุงประสบการณ์ผู้ใช้และการตลาดของแอปพลิเคชัน