สัปดาห์ที่ 6: ปล่อยแอปจริง (Deployment)

เป้าหมายสัปดาห์นี้: ใส่ ไอคอน + ชื่อแอป เป็นของตัวเอง แล้ว build เป็นไฟล์ APK ติดตั้งบนมือถือจริง ส่งให้เพื่อนใช้ได้

สัปดาห์สุดท้าย! วันนี้ MyDiary จะกลายจาก "โปรเจกต์ในเครื่องพัฒนา" เป็น "แอปจริงที่ติดตั้งได้"

ก่อนเริ่ม: สัปดาห์นี้เราจะทำอะไร

• ใส่ ไอคอนแอป เป็นของตัวเอง
• ตั้ง ชื่อแอป ที่แสดงบนมือถือ
• เข้าใจ debug vs release (โหมดพัฒนา vs โหมดจริง)
• build APK (ไฟล์ติดตั้งแอป)
• ติดตั้งบนมือถือจริง + ส่งให้เพื่อน

เส้นทางสัปดาห์นี้:

ส่วน A: แต่งแอป      → ไอคอน + ชื่อ
ส่วน B: build APK    → debug vs release + สร้างไฟล์
ส่วน C: ติดตั้งจริง   → ลงมือถือ + แจกจ่าย

ส่วนที่ 1: ทำความเข้าใจ "อะไรเป็นอะไร"

1.1 ตอนนี้แอปเรารันยังไง

ตลอด 5 สัปดาห์ เรารันแอปบน emulator/มือถือที่ต่อสายกับคอมพิวเตอร์ ผ่านโหมดพัฒนา

ปัญหา: ถ้าถอดสาย/ปิดคอม แอปหาย เพราะมันยังไม่ใช่แอปที่ติดตั้งจริง

1.2 APK คืออะไร

APK (Android Package) = ไฟล์ติดตั้งแอปของ Android (เหมือนไฟล์ .exe ของ Windows) - มีไฟล์ APK 1 ไฟล์ = ติดตั้งแอปได้ - ส่งไฟล์ให้เพื่อน = เพื่อนติดตั้งแอปเราได้

1.3 Debug vs Release — 2 โหมดของแอป

สรุป: ตอนแจกจริงต้อง build แบบ release เพื่อให้แอปเร็วและไฟล์เล็ก

1.4 ไอคอนและชื่อแอป

• ไอคอน = รูปที่แสดงบนหน้าจอมือถือ (ตอนนี้เป็นโลโก้ Flutter default)
• ชื่อแอป = ข้อความใต้ไอคอน (ตอนนี้เป็น "mydiary")

สัปดาห์นี้เปลี่ยนทั้งสองให้เป็นของตัวเอง

ส่วนที่ 2: เตรียมเครื่องมือ

2.1 เปิดโปรเจกต์เดิม

เปิด mydiary จากสัปดาห์ 5 (แอปที่มีล็อกอิน + cloud ครบแล้ว)

2.2 เตรียมรูปไอคอน

เตรียมรูปสี่เหลี่ยมจัตุรัส (แนะนำ 1024×1024 px) รูปแบบ PNG — จะใช้เป็นไอคอนแอป

ทำเองใน Canva/Figma หรือหารูปฟรี (ระวังลิขสิทธิ์) เก็บไว้ในโฟลเดอร์โปรเจกต์ เช่น assets/icon.png

ส่วนที่ 3: ลงมือทำทีละขั้น

ส่วน A: แต่งแอป

ขั้นที่ 1 เปลี่ยนชื่อแอป

เป้าหมาย: เปลี่ยนชื่อที่แสดงใต้ไอคอนบนมือถือ

เปิด android/app/src/main/AndroidManifest.xml หาบรรทัด android:label:

<application
    android:label="MyDiary"          <!-- เปลี่ยนตรงนี้เป็นชื่อที่ต้องการ -->
    ...>

อธิบาย: android:label = ชื่อที่แสดงบนมือถือ — เปลี่ยนเป็นชื่อแอปของคุณ (เช่น "ไดอารีของฉัน")

ขั้นที่ 2 — เปลี่ยนไอคอนแอป

เป้าหมาย: ใส่ไอคอนของตัวเอง (ใช้ package ช่วย)

ขั้น 1 ติดตั้ง package สร้างไอคอน:

flutter pub add dev:flutter_launcher_icons

ขั้น 2 เพิ่มการตั้งค่าใน pubspec.yaml (ท้ายไฟล์)

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon.png"      # ที่อยู่รูปไอคอน

ขั้น 3 เพิ่ม assets ใน pubspec.yaml (ใต้ flutter:) ถ้ามี flutter: อยู่แล้วให้เพิ่ม assets เข้าไปไม่ต้องเพิ่มใหม่

flutter:
  assets:
    - assets/icon.png

ขั้น 4 สั่งสร้างไอคอน:

flutter pub run flutter_launcher_icons

อธิบาย: package นี้สร้างไอคอนหลายขนาดให้อัตโนมัติ (มือถือต้องการหลายขนาด) จากรูปเดียวที่เราให้

รันคำสั่งสำเร็จ (เห็นข้อความ Successfully generated)

ส่วน B: build APK

ขั้นที่ 3 ทดสอบโหมด release ก่อน build

เป้าหมาย: ลองรันแบบ release ดูว่าแอปทำงานปกติ

flutter run --release

อธิบาย: รันแอปในโหมด release (เร็วกว่า debug) — ทดสอบว่าทุกอย่างยังทำงาน โดยเฉพาะ Firebase ต้องต่อเน็ตได้

แอปรันโหมด release ได้ ล็อกอิน + cloud ทำงานปกติ

ขั้นที่ 4 — build ไฟล์ APK

เป้าหมาย: สร้างไฟล์ APK สำหรับติดตั้ง

flutter build apk --release

รอสักครู่ (ครั้งแรกอาจนาน 2-5 นาที) จนขึ้น:

✓ Built build/app/outputs/flutter-apk/app-release.apk

อธิบาย - คำสั่งนี้สร้างไฟล์ APK แบบ release - ไฟล์อยู่ที่ build/app/outputs/flutter-apk/app-release.apk - ไฟล์นี้แหละที่เอาไปติดตั้ง/แจกได้

ขั้นที่ 5 หาไฟล์ APK

เป้าหมาย: หาไฟล์ APK เพื่อเอาไปใช้

ไฟล์อยู่ที่ (จากโฟลเดอร์โปรเจกต์):

build/app/outputs/flutter-apk/app-release.apk

วิธีเปิดโฟลเดอร์: - VS Code: คลิกขวาที่ไฟล์ → Reveal in File Explorer - หรือเปิด File Explorer ไปตามเส้นทางด้านบน ขนาดไฟล์: ปกติ 20-50 MB (มี Flutter engine + โค้ดเรา)

ส่วน C: ติดตั้งจริง

ขั้นที่ 6 ติดตั้งบนมือถือตัวเอง

เป้าหมาย: ติดตั้ง APK บนมือถือจริง (ไม่ต้องต่อคอม)

วิธีที่ 1 ส่งไฟล์เข้ามือถือ: 1. ส่งไฟล์ APK เข้ามือถือ (ผ่าน LINE/อีเมล/Google Drive/สาย USB) 2. เปิดไฟล์บนมือถือ → กดติดตั้ง 3. ถ้าขึ้นเตือน "ติดตั้งจากแหล่งที่ไม่รู้จัก" → อนุญาต (Settings → Install unknown apps)

วิธีที่ 2 — ติดตั้งผ่านสาย:

flutter install

(มือถือต้องต่อสายและเปิด USB debugging)

ขั้นที่ 7 — พิธีแลกกันติดตั้ง

เป้าหมาย: ส่งแอปให้เพื่อนติดตั้ง — พิสูจน์ว่าเป็นแอปจริง

1. ส่งไฟล์ APK ให้เพื่อน (หรือแลกกัน)
2. เพื่อนติดตั้งบนมือถือเพื่อน
3. เพื่อน สมัครบัญชีของตัวเอง → เขียนบันทึกของเพื่อน
4. สังเกต: บันทึกของเพื่อนอยู่บนมือถือเพื่อน แยกจากของเรา

สรุปสิ่งที่ได้สัปดาห์นี้

สิ่งที่นักศึกษาได้: แอป MyDiary ที่มีครบทุกอย่างของแอปจริง — UI, ฐานข้อมูล, API, ล็อกอิน, cloud, ความปลอดภัย, ติดตั้งได้ = โครงของแอปจริง

ทักษะที่ได้: Widget, State, Navigation, Form, SQLite, async/await, REST API, FutureBuilder/StreamBuilder, Firebase Auth, Firestore, Security Rules, Build/Deploy

ต่อยอด: Semester Project

โครง MyDiary นี้ยกไปทำเป็นแอปอะไรก็ได้ใน Semester Project แค่เปลี่ยนธีมและ field - แอปจดรายรับ-รายจ่าย - แอป To-do list - แอปรีวิวร้านอาหาร - แอปบันทึกการออกกำลังกาย - ฯลฯ

ของเสริมที่หยิบไปใส่ได้: กล้อง/รูปภาพ, แผนที่/GPS, Push Notification — ทำให้แอปเด่นขึ้น

ภาคผนวก: จุดที่นักศึกษามักติด

• โปรเจกต์กับ Pub Cache อยู่คนละไดรฟ์ (IllegalArgumentException: this and base files have different roots:) เปิดไฟล์ android/gradle.properties → เพิ่มบรรทัดนี้ลงไปท้ายไฟล์:

kotlin.incremental=false

แล้วล้าง cache + build ใหม่:

flutter clean
flutter build apk --release