267 lines
18 KiB
Typst
267 lines
18 KiB
Typst
#import "../PageTemplate.typ": *
|
|
|
|
== สร้างไฟล์แอปพลิเคชันด้วยตนเอง
|
|
|
|
#h(1.7em) โครงงานนี้ใช้แอปพลิเคชันที่สร้างขึ้นมาเอง โดยในการพัฒนาแอปพลิเคชัน
|
|
อย่างน้อยต้องมีส่วนประกอบดังกล่าวก่อน
|
|
|
|
#set enum(indent: 1.7em)
|
|
1. Flutter
|
|
2. Git (ซึ่งคุณจะติดตั้งแล้วหากคุณทำตาม@writingFirmware)
|
|
|
|
#h(1.7em) อย่างไรก็ตาม Flutter มีข้อจำกัดว่า มีเพียง Android
|
|
เท่านั้นที่ไม่ว่าแพลตฟอร์มไหนก็จะสามารถคอมไพล์ไฟล์ `.apk` ออกมาได้ ดังนั้น
|
|
การสร้างแอปพลิเคชันสำหรับ Linux ต้องทำบน Linux เท่านั้น และการสร้างแอปพลิเคชันสำหรับ Windows
|
|
ต้องทำบน Windows เท่านั้น
|
|
|
|
=== การติดตั้งโปรแกรมเขียนโคด
|
|
|
|
#iii จริง ๆ แล้วนั้น Flutter สามารถทำงานกับโปรแกรมเขียนโคดใดก็ได้
|
|
แต่มีโปรแกรมเหล่านี้ที่อาจมีประสบการณ์การพัฒนาที่ดีกว่าโปรแกรมอื่น
|
|
|
|
#set enum(indent: 4.1em)
|
|
1. Visual Studio Code (VS Code)
|
|
2. Android Studio
|
|
3. JetBrains IntelliJ
|
|
4. Firebase Studio
|
|
|
|
#iii โครงงานนี้ใช้โปรแกรมเขียนโคด Android Studio เป็นหลักเนื่องจากแอปพลิเคชันโครงงานมี
|
|
Android เป็นเป้าหมายหลัก และ Android SDK สามารถจัดการได้ง่ายกว่าใน Android Studio
|
|
|
|
#iii การติดตั้ง Flutter สามารถทำได้สองวิธีด้วยกัน คือการติดตั้งผ่าน Visual Studio Code (VS
|
|
Code) และการติดตั้งด้วยตนเอง โดยหากต้องการใช้ VS Code เป็นโปรแกรมเขียนโคดอยู่แล้ว
|
|
สามารถติดตั้งผ่าน VS Code ได้เลย แต่ก่อนอื่น ต้องทำการติดตั้งโปรแกรมและไลบรารีพื้นฐานที่จำเป็นสำหรับ
|
|
Flutter ก่อน
|
|
|
|
=== การติดตั้งโปรแกรมและไลบรารีที่จำเป็น
|
|
|
|
1. สำหรับ Windows ติดตั้ง Git สำหรับ Windows ซึ่งคุณสามารถดูขั้นตอนการติดตั้งได้ที่
|
|
https://git-scm.com/install/windows หรือเพียงแค่ใช้คำสั่งด้านล่าง
|
|
#figure(
|
|
```sh
|
|
winget install --id Git.Git -e --source winget
|
|
```,
|
|
kind: image,
|
|
caption: [คำสั่งในการติดตั้ง Git],
|
|
)
|
|
2. สำหรับ Linux โปรดดู@flLinuxDetails
|
|
สำหรับรายละเอียดแพคเกจและคำสั่งที่ต้องใช้สำหรับระบบต่าง ๆ
|
|
3. สำหรับ macOS ใช้คำสั่งต่อไปนี้ในการติดตั้งเครื่องมือ Xcode ต่าง ๆ รวมถึง Git
|
|
#figure(
|
|
```sh
|
|
xcode-select --install
|
|
```,
|
|
kind: image,
|
|
caption: [คำสั่งในการติดตั้งเครื่องมือ Xcode],
|
|
)
|
|
|
|
=== การติดตั้งผ่าน Visual Studio Code
|
|
|
|
#[
|
|
#set enum(indent: 4.1em)
|
|
1. เปิด VSCode
|
|
2. ติดตั้งส่วนขยาย Flutter ซึ่งอยู่ภายใต้ ID `Dart-Code.flutter` ทั้งบน Visual Studio
|
|
Marketplace และ OpenVSX
|
|
3. ติดตั้ง Flutter ด้วย VS Code
|
|
|
|
#listy(
|
|
indent: 5.5em,
|
|
numbering: thai-numbering,
|
|
[เปิด Command Palette ด้วยเมนู _View > Command Palette_ หรือกด Ctrl + Shift +
|
|
P],
|
|
[ใน Command Palette พิมพ์ `flutter`],
|
|
[เลือก _Flutter: New Project_],
|
|
[VS Code จะให้คุณเลือก Flutter SDK บนคอมพิวเตอร์ของคุณ เลือก _Download SDK_],
|
|
[เมือหน้าไดอะลอก _Select Folder for Flutter SDK_ แสดงขึ้น เลือกสถานที่ที่คุณอยากติดตั้ง
|
|
Flutter],
|
|
[คลิก _Clone Flutter_ โดยในระหว่างการดาวน์โหลด VS Code จะแสดงการแจ้งเตือนนี้
|
|
```
|
|
Downloading the Flutter SDK. This may take a few minutes.
|
|
```
|
|
การดาวน์โหลดนี้จะใช้เวลาสองสามนาที หากคุณเชื่อว่าการดาวน์โหลดหยุดชะงัก คุณสามารถคลิก
|
|
_Cancel_ แล้วเริ่มต้นการติดตั้งใหม่ได้],
|
|
[คลิก _Add SDK to PATH_ และเมื่อเสร็จสิ้น จะมีการแจ้งเตือน
|
|
```
|
|
The Flutter SDK was added to your PATH
|
|
```],
|
|
[VS Code อาจแสดงการแจ้งเตือนเกี่ยวกับการเก็บข้อมูลของ Google หากคุณยินยอม คลิก _OK_],
|
|
[เพื่อความแน่ใจ กรุณาปิดเทอร์มินัลทุกหน้าต่างหรือรีสตาร์ท VS Code เพื่อให้แน่ใจว่า Flutter
|
|
จะสามารถใช้ผ่านเทอร์มินัลได้],
|
|
)
|
|
|
|
4. เมื่อเสร็จสิ้น ใช้คำสั่ง `flutter doctor -v` ในเทอร์มินัลที่คุณเลือกเพื่อตรวจสอบการติดตั้ง
|
|
Flutter ของคุณ หากคำสั่งไม่เจอหรือเกิดข้อผิดพลาดขึ้น ตรวจสอบ
|
|
https://docs.flutter.dev/install/troubleshoot สำหรับข้อมูลเพิ่มเติม
|
|
]
|
|
|
|
=== การติดตั้งด้วยตนเอง
|
|
|
|
#iii แนะนำให้ทำตาม https://docs.flutter.dev/install/manual#install-flutter
|
|
เนื่องจากกระบวนการนี้ต้องใช้ข้อมูลที่ใหม่ล่าสุด
|
|
|
|
#[
|
|
#set enum(indent: 4.1em)
|
|
1. ดาวน์โหลด Flutter (สามารถหาปุ่มดาวน์โหลดได้จากลิงก์ด้านบน)
|
|
2. สร้างโฟลเดอร์สำหรับเก็บ Flutter SDK
|
|
3. ทำการแตกไฟล์ที่ดาวน์โหลดมา
|
|
4. เพิ่ม Flutter เข้าไปยัง PATH ของคุณ (วิธีการขึ้นอยู่กับระบบปฏิบัติการ)
|
|
5. ยืนยันความถูกต้องของการติดตั้งของคุณด้วยคำสั่ง `flutter doctor -v`
|
|
]
|
|
|
|
=== ข้อมูลเฉพาะแพลตฟอร์ม
|
|
|
|
==== Android <flAndroid>
|
|
|
|
#h(7.3em) ในการพัฒนาแอปพลิเคชัน Android โดยใช้เฟรมเวิร์ก Flutter
|
|
จำเป็นต้องใช้ส่วนประกอบเครื่องมือพัฒนา Android ดังนี้
|
|
|
|
#[
|
|
#set enum(indent: 7.3em)
|
|
1. Android SDK (API Level 36 ณ เวลาที่พิมพ์)
|
|
2. Android SDK Build-Tools
|
|
3. Android SDK Command-line Tools
|
|
4. Android SDK Platform-Tools
|
|
5. Android Emulator (ไม่บังคับ)
|
|
]
|
|
|
|
โดยแนะนำให้จัดการและติดตั้งเครื่องมือเหล่านี้ผ่าน Android Studio
|
|
|
|
#h(7.3em) ในการติดตั้ง Android SDK ควรติดตั้ง Android SDK
|
|
ล่าสุดถึงแม้ว่าอุปกรณ์ของคุณจะใช้เวอร์ชันที่เก่ากว่านั้น
|
|
เพื่อความมั่นใจว่าแอปพลิเคชันจะสามารถใช้กับอุปกรณ์ที่ใหม่ล่าสุดได้
|
|
|
|
#h(7.3em) แอปพลิเคชัน Android จะมี SDK/API level เป้าหมาย (Target SDK/API level) และ
|
|
SDK/API level ขั้นต่ำ (Minimum SDK/API level) โครงงานนี้ ณ เวลาที่พิมพ์ ใช้ API level
|
|
เป้าหมาย 36 (Android 16) และ API level ขั้นต่ำ 24 (Android 7) ซึ่งรวมกันแล้ว
|
|
แอปพลิเคชัน#jb Android จะสามารถติดตั้งได้บนระบบตั้งแต่ API level ขั้นต่ำจนถึง API level
|
|
เป้าหมาย หรือก็คือ แอปพลิเคชันในโครงงานนี้สามารถติดตั้งได้ตั้งแต่บนระบบ Android 7 ถึง Android 16
|
|
นั่นเอง
|
|
|
|
===== Java/Kotlin
|
|
|
|
#h(11.3em) Java และ Kotlin เป็นภาษาสำคัญสำหรับการพัฒนาแอปพลิเคชัน Android ถึงอย่างไรก็ตาม
|
|
แอปพลิเคชัน Flutter นั้นถูกเขียนด้วยภาษา Dart แต่ยังจำเป็นต้องมีโคด Java และ Kotlin
|
|
เล็กน้อยเพื่อเริ่มต้นแอปพลิเคชัน Flutter
|
|
|
|
#h(11.3em) โดยปกติแล้ว Flutter จะสร้างโคดพื้นฐานขึ้นมาให้สำหรับการเริ่มแอปพลิเคชันแบบพื้นฐาน
|
|
ดังนั้นจึงไม่จำเป็นต้องมีการเขียนโคด Java หรือ Kotlin เอง แต่ในบางกรณี
|
|
อาจต้องเขียนโคดเพิ่มเองหากมีความต้องการเข้าถึงฟีเจอร์พื้นฐานระบบที่ Flutter ไม่มี API
|
|
เพื่อให้เข้าถึงได้และไม่มีแพคเกจเพื่อรองรับฟีเจอร์ที่ต้องการ
|
|
|
|
#h(11.3em) โครงการนี้ใช้ Java 21 (JetBrains Runtime/Azul Zulu OpenJDK)
|
|
เป็นหลักในการทำงานกับ Gradle แต่แอปพลิเคชัน Android ที่ผลิตออกมานั้น
|
|
เพื่อให้เข้ากับเวอร์ชันที่เก่ากว่าของระบบปฏิบัติการได้ ใช้ Java 11
|
|
|
|
===== Gradle
|
|
|
|
#h(11.3em) Gradle เป็นเครื่องมือสร้างระบบอัตโนมัติสำหรับการพัฒนาซอฟต์แวร์หลายภาษา
|
|
จัดการงานต่าง ๆ เช่น การคอมไพล์ การแพ็คเกจ การทดสอบ การปรับใช้ และการเผยแพร่ ภาษาที่รองรับ
|
|
ได้แก่ Java (รวมถึงภาษา Kotlin, Groovy, Scala ที่ใช้ JDK), C/C++ และ JavaScript Gradle
|
|
พัฒนาต่อยอดจากแนวคิดของ Apache Ant และ Apache Maven และนำเสนอภาษาเฉพาะโดเมนที่ใช้
|
|
Groovy และ Kotlin ซึ่งต่างจากการกำหนดค่าโครงการที่ใช้ XML ที่ Maven ใช้ Gradle
|
|
ใช้กราฟแบบอะไซคลิกกำกับทิศทางเพื่อจัดการการอ้างอิง กราฟนี้ใช้เพื่อกำหนดลำดับของงานที่ควรดำเนินการ
|
|
Gradle ทำงานบน Java Virtual Machine
|
|
|
|
#h(11.3em) Gradle คือเครื่องมือหลักที่ใช้ในการจัดการโปรเจกต์ Java ส่วนใหญ่ รวมถึงโปรเจกต์
|
|
Android โดยในโครงการนี้ จะใช้ Gradle เวอร์ชัน 8.14.3 เป็นหลัก
|
|
|
|
#h(11.3em) โดยปกติแล้ว ผู้พัฒนานั้นไม่มีความจำเป็นที่จะต้องแตะต้อง Gradle ด้วยตนเอง และ Flutter
|
|
จะทำการจัดการเอง แต่หากมีความจำเป็นต้องใช้คำสั่ง Gradle ด้วยตนเอง จะมีสคริปต์ `gradlew` (หรือ
|
|
`gradlew.bat` สำหรับผู้ใช้ Windows) ภายในโฟลเดอร์ `android` ของโปรเจกต์ Flutter
|
|
เสมอเพื่อเรียกใช้ Gradle ที่ถูกดาวน์โหลดมาสำหรับโปรเจกต์นั้น ๆ
|
|
|
|
==== Linux <flLinuxDetails>
|
|
|
|
#h(7.3em) เช่นเดียวกับ Android ที่กล่าวไปข้างต้น Flutter
|
|
มีการสร้างโคดสำหรับการเปิดแอปพลิเคชันแบบพื้นฐาน แต่สำหรับ Linux แล้วนั้น Flutter ใช้โคด C++
|
|
และเฟรมเวิร์ก CMake ในการสร้างรากฐานของแอปพลิเคชัน
|
|
|
|
#h(7.3em) ในการพัฒนาแอปพลิเคชันสำหรับ Linux ต้องติดตั้งโปรแกรมเพิ่มเติม#jb (build
|
|
dependencies) ขยายความคือ ด้านบนคือสิ่งที่จำเป็นหากมีระบบอื่นเป็นเป้าหมาย
|
|
แต่หากต้องการพัฒนาแอปพลิเคชัน Linux ต้องติดตั้งโปรแกรมในรายการหน้าถัดไปเพิ่ม
|
|
|
|
#pagebreak()
|
|
|
|
#[
|
|
#set enum(indent: 7.3em)
|
|
1. GTK 3 (ไลบรารีสำหรับการพัฒนา)
|
|
2. pkg-config
|
|
3. ไลบรารี GNU Standard C++ v3
|
|
4. Clang
|
|
5. CMake
|
|
6. Ninja
|
|
]
|
|
|
|
#h(7.3em) การติดตั้งไลบรารีและโปรแกรมที่กล่าวไปข้างต้นจะแตกต่างกันไปแต่ละการแจกจ่าย Linux และ
|
|
Flutter ใช้ไลบรารีพื้นฐานดังกล่าวในการทำงานของแอปพลิเคชัน (runtime dependencies)
|
|
|
|
#[
|
|
#set enum(indent: 7.3em)
|
|
1. GTK 3
|
|
2. blkid
|
|
3. LZMA
|
|
]
|
|
|
|
แต่โดยทั่วไปแล้ว ไลบรารีเหล่านี้ควรถูกติดตั้งมาอยู่แล้วหากคุณใช้ graphical desktop ทั่วไป
|
|
|
|
===== Debian
|
|
|
|
#afigure(
|
|
```sh
|
|
# Development dependencies:
|
|
sudo apt install curl git unzip xz-utils zip libglu1-mesa
|
|
|
|
# Linux build dependencies:
|
|
sudo apt install clang cmake ninja-build pkg-config libgtk-3-dev libstdc++-12-dev
|
|
|
|
# Runtime dependencies:
|
|
sudo apt install libgtk-3-0 libblkid1 liblzma5
|
|
```,
|
|
kind: image,
|
|
caption: [คำสั่งในการติดตั้งรายการแพคเกจต่าง ๆ บน Debian],
|
|
)
|
|
|
|
#v(0.5em)
|
|
|
|
===== Fedora Linux
|
|
|
|
#afigure(
|
|
```sh
|
|
# Development dependencies:
|
|
sudo dnf install curl git unzip xz zip mesa-libglu
|
|
|
|
# Linux build dependencies:
|
|
sudo dnf install clang cmake ninja-build pkgconf gtk3
|
|
|
|
# Runtime dependencies:
|
|
sudo dnf install gtk3 libblkid xz
|
|
```,
|
|
kind: image,
|
|
caption: [คำสั่งในการติดตั้งรายการแพคเกจต่าง ๆ บน Fedora Linux],
|
|
)
|
|
|
|
===== Arch Linux
|
|
|
|
#afigure(
|
|
```sh
|
|
# Development dependencies:
|
|
sudo pacman -S --needed curl git unzip xz zip glu
|
|
|
|
# Linux build dependencies:
|
|
sudo pacman -S --needed clang cmake ninja pkgconf gtk3
|
|
|
|
# Runtime dependencies:
|
|
sudo pacman -S --needed util-linux-libs xz gtk3
|
|
```,
|
|
kind: image,
|
|
caption: [คำสั่งในการติดตั้งรายการแพคเกจต่าง ๆ บน Arch Linux],
|
|
)
|
|
|
|
#v(0.5em)
|
|
|
|
==== macOS/iOS
|
|
|
|
#h(7.3em) การพัฒนาแอปพลิเคชันสำหรับ macOS และ iOS นั้นต้องทำบน macOS
|
|
เท่านั้นและจำเป็นต้องพึ่งพาเครื่องมือ Xcode แต่เนื่องจากในโครงงานนี้ไม่มีผู้ใช้ macOS
|
|
จึงไม่สามารถสร้างไบนารีสำหรับ macOS และ iOS ออกมาได้ และไม่ใช่เป้าหมายของโครงงานนี้เช่นกัน
|