Finish Flutter heading
This commit is contained in:
@@ -0,0 +1,695 @@
|
||||
#import "../PageTemplate.typ": *
|
||||
#import "@preview/tiaoma:0.3.0"
|
||||
#import "@preview/fletcher:0.5.8" as fletcher: diagram, edge, node
|
||||
#import fletcher.shapes: circle, diamond, pill
|
||||
#show: chapter-page
|
||||
#set heading(numbering: "บทที่ 1")
|
||||
|
||||
#heading([#linebreak()วิธีการดำเนินโครงงาน])
|
||||
#set heading(numbering: "1.1")
|
||||
|
||||
#i ในการดำเนินการศึกษาครั้งนี้
|
||||
คณะผู้จัดทำโครงงานได้ศึกษาข้อมูลเบื้องต้นในการสร้างเครื่องยืนยันตัวตนด้วย NFC
|
||||
และได้ดำเนินการตามขั้นตอนนี้
|
||||
|
||||
+ วางแผนการดำเนินงาน
|
||||
+ การออกแบบ
|
||||
+ วัสดุอุปกรณ์
|
||||
+ ขั้นตอนการประกอบ
|
||||
+ การทดลอง
|
||||
+ การวิเคราะห์ข้อมูล
|
||||
|
||||
== วางแผนการดำเนินงาน
|
||||
|
||||
#show table.cell.where(y: 1): strong
|
||||
#set par(leading: 0.5em)
|
||||
|
||||
#let arrow = [
|
||||
#place(
|
||||
left + horizon,
|
||||
text(weight: "bold", size: 14pt)[#sym.arrow.l],
|
||||
dx: -5pt,
|
||||
dy: -0.7pt,
|
||||
)
|
||||
#place(
|
||||
horizon,
|
||||
line(length: 100%, stroke: (thickness: 1pt)),
|
||||
dx: 0pt,
|
||||
dy: 0pt,
|
||||
)
|
||||
#place(
|
||||
right + horizon,
|
||||
text(weight: "bold", size: 14pt)[#sym.arrow.r],
|
||||
dx: 5pt,
|
||||
dy: -0.7pt,
|
||||
)
|
||||
]
|
||||
|
||||
=== แผนขั้นตอนและวิธีการดำเนินงาน
|
||||
|
||||
#table(
|
||||
columns: 12,
|
||||
align: (
|
||||
left + horizon,
|
||||
center,
|
||||
center,
|
||||
center,
|
||||
center,
|
||||
center,
|
||||
center,
|
||||
center,
|
||||
center,
|
||||
center,
|
||||
center,
|
||||
center,
|
||||
),
|
||||
table.header(
|
||||
table.cell(
|
||||
[ขั้นตอนการ\ ดำเนินการ],
|
||||
rowspan: 2,
|
||||
),
|
||||
table.cell(
|
||||
[พ.ศ.2568],
|
||||
colspan: 3,
|
||||
),
|
||||
table.cell(
|
||||
[พ.ศ.2569],
|
||||
colspan: 8,
|
||||
),
|
||||
[ต.ค.],
|
||||
[พ.ย.],
|
||||
[ธ.ค.],
|
||||
[ม.ค.],
|
||||
[ก.พ.],
|
||||
[มี.ค],
|
||||
[เม.ย],
|
||||
[พ.ค.],
|
||||
[มิ.ย.],
|
||||
[ก.ค.],
|
||||
[ส.ค.],
|
||||
),
|
||||
[ศึกษาค้นคว้าข้อมูล],
|
||||
table.cell(arrow, colspan: 3),
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[เสนอหัวข้อ], arrow, [], [], [], [], [], [], [], [], [], [],
|
||||
[เสนอครั้งที่ 1], [], arrow, [], [], [], [], [], [], [], [], [],
|
||||
[ออกแบบและสร้าง], [], table.cell(arrow, colspan: 5), [], [], [], [], [],
|
||||
[จัดซื้ออุปกรณ์ทดลอง],
|
||||
[],
|
||||
table.cell(arrow, colspan: 3),
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
[ทดลองการทำงาน], [], [], table.cell(arrow, colspan: 4), [], [], [], [], [],
|
||||
[ปรับปรุงแก้ไข], [], [], [], [], table.cell(arrow, colspan: 5), [], [],
|
||||
[เสนอครั้งที่ 2], [], [], [], arrow, [], [], [], [], [], [], [],
|
||||
[จัดทำรูปเล่ม], table.cell(arrow, colspan: 11),
|
||||
[นำเสนอโครงงาน], [], [], [], [], [], [], [], [], [], [], [],
|
||||
)
|
||||
|
||||
#show: page-theme
|
||||
#set par(leading: 0.5em)
|
||||
|
||||
=== ผังการดำเนินงาน
|
||||
|
||||
#diagram(
|
||||
node-stroke: 1pt,
|
||||
spacing: 2em,
|
||||
node((0, 0), [เริ่มต้น], shape: pill),
|
||||
edge("-|>"),
|
||||
node((0, 1), shape: circle, radius: 1em),
|
||||
edge("-|>"),
|
||||
node((0, 2), [ศึกษาข้อมูลและทฤษฏีที่เกี่ยวข้อง], width: 2.5in),
|
||||
edge("-|>"),
|
||||
node((0, 3), [ออกแบบและวางแผนการดําเนินงาน], width: 2.5in),
|
||||
edge("-|>"),
|
||||
node((0, 4), [เครื่องยืนยันตัวตนด้วย NFC], width: 2.5in),
|
||||
edge("-|>"),
|
||||
node((0, 5), [ทดสอบประสิทธิภาพ], shape: diamond),
|
||||
edge("r,u,u,u,u,l", "-|>", [ไม่ผ่าน]),
|
||||
edge("-|>", [ผ่าน]),
|
||||
node((0, 6), [จัดทำเอกสาร], width: 2.5in),
|
||||
edge("-|>"),
|
||||
node((0, 7), [นำเสนอ], width: 2.5in),
|
||||
edge("-|>"),
|
||||
node((0, 8), [สิ้นสุด], shape: pill),
|
||||
)
|
||||
|
||||
#pagebreak()
|
||||
|
||||
=== ผังการทำงาน
|
||||
|
||||
#diagram(
|
||||
node-stroke: 1pt,
|
||||
spacing: 2em,
|
||||
node([เริ่มต้น], shape: pill),
|
||||
edge("-|>"),
|
||||
node((1, 0), [ตั้งค่า LittleFS]),
|
||||
edge("-|>"),
|
||||
|
||||
node((1, 2), [มี Wi-Fi บันทึก\ ไว้อยู่หรือไม่], shape: diamond),
|
||||
edge("l", "-|>", [ไม่มี]),
|
||||
edge((1, 2), (1, 3), "-|>", [มี]),
|
||||
|
||||
node((0, 2), [รอรับรายละเอียดเครือข่าย\ (ESP-Touch)]),
|
||||
edge("d,r", "-|>"),
|
||||
node((1, 3), [เชื่อมต่อเครือข่าย]),
|
||||
edge("-|>"),
|
||||
|
||||
node((0, 4), [มีอุปกรณ์ควบคุม\ หลักแล้วหรือไม่], shape: diamond),
|
||||
edge("-|>", [ไม่มี]),
|
||||
edge("d", "-|>", [มี]),
|
||||
|
||||
node((1, 4), [สร้างโทเค็นสำหรับการยืนยัน\ อุปกรณ์ควบคุมหลัก]),
|
||||
edge("-|>"),
|
||||
|
||||
node((1, 5), [รออุปกรณ์ควบคุมหลัก\ แตะเซนเซอร์ NFC]),
|
||||
edge("-|>"),
|
||||
|
||||
node((0, 5), [ตั้งค่าเซิร์ฟเวอร์ HTTPS]),
|
||||
edge("-|>"),
|
||||
|
||||
node((0, 6), shape: circle, radius: 1em),
|
||||
edge("-|>"),
|
||||
|
||||
node((0, 7), [มีการแตะเซนเซอร์\ NFC ขาเข้าหรือไม่], shape: diamond),
|
||||
edge("-|>", [ไม่มี]),
|
||||
|
||||
node((0, 9), [มีคนผ่านเซนเซอร์ PIR\ โดยไม่ได้รับอนุญาตหรือไม่], shape: diamond),
|
||||
edge((0, 9), (0, 10), [ไม่มี]),
|
||||
edge((0, 7), (1, 6), "-|>", [มี]),
|
||||
|
||||
node((1, 6), [อยู่ในโหมดลงทะเบียน\ หรือไม่], shape: diamond),
|
||||
edge("-|>", [ใช่]),
|
||||
edge((1, 6), (2, 7), [ไม่]),
|
||||
|
||||
node((1, 7), [นำ ID อุปกรณ์เข้า\ สู่รายการทะเบียน]),
|
||||
edge((1, 7), (0.6, 7), (0, 9), "-|>"),
|
||||
|
||||
node((2, 7), [ID ของอุปกรณ์อยู่\ ในทะเบียนหรือไม่], shape: diamond),
|
||||
edge("-|>", [อยู่]),
|
||||
edge((2, 7), (1, 8), "-|>", [ไม่อยู่], label-sep: -5pt),
|
||||
|
||||
node((2, 8), [ส่งเสียงคอนเฟิร์ม]),
|
||||
edge((2, 8), (2, 8.5), (0.4, 8.5), (0, 9), "-|>"),
|
||||
|
||||
node((1, 8), [ส่งเสียงแสดงความผิดพลาด]),
|
||||
edge((1, 8), (0.5, 8), (0, 9), "-|>"),
|
||||
|
||||
node((1, 9), [แจ้งเตือนทางเสียง\ และแอปพลิเคชัน]),
|
||||
edge((1, 9), (0, 10), "-|>"),
|
||||
edge((0, 10), (1, 10), "-|>", [มี]),
|
||||
|
||||
node((0, 10), [มีคำขอ HTTPS\ ใหม่หรือไม่], shape: diamond),
|
||||
edge((0, 10), (-2, 10), "-|>", [ไม่มี], label-pos: 10%),
|
||||
edge((0, 9), (1, 9), "-|>", [มี], label-anchor: "center", label-sep: -8pt),
|
||||
|
||||
node((1, 10), [ประมวลผลคำขอ HTTPS]),
|
||||
edge((1, 10), (1, 11), (-2, 11), (-2, 10), "-|>"),
|
||||
|
||||
node((-2, 10), shape: circle, radius: 1em),
|
||||
edge((-2, 10), (-2, 6), (0, 6), "-|>"),
|
||||
)
|
||||
|
||||
#pagebreak()
|
||||
#set par(leading: 1em)
|
||||
|
||||
== การออกแบบ
|
||||
|
||||
== วัสดุอุปกรณ์
|
||||
|
||||
+ บอร์ด ESP32 (NodeMCU)
|
||||
+ กล่องพลาสติก
|
||||
+ Buzzer
|
||||
+ เซนเซอร์ PIR
|
||||
+ เซนเซอร์ NFC 2 ชิ้น
|
||||
|
||||
== ขั้นตอนการประกอบ
|
||||
|
||||
โครงงานแบ่งออกเป็น 3 โมดูล
|
||||
|
||||
+ โมดูลเซนเซอร์ NFC ขาเข้าและบอร์ด ESP32
|
||||
+ โมดูลเซนเซอร์ NFC ขาออก
|
||||
+ โมดูลเซนเซอร์ PIR
|
||||
|
||||
#show heading: it => {
|
||||
if it.level > 2 {
|
||||
block(
|
||||
it,
|
||||
inset: (left: -3em * (it.level - 2)),
|
||||
)
|
||||
} else {
|
||||
it
|
||||
}
|
||||
}
|
||||
|
||||
=== โมดูลเซนเซอร์ NFC ขาออก
|
||||
|
||||
#i ดำเนินการเจาะรูบริเวณตัวกล่องเพื่อใช้เป็นช่องสำหรับสายไฟ
|
||||
จากนั้นนำสายไฟร้อยผ่านช่องดังกล่าวและต่อเข้ากับเซนเซอร์ NFC ให้เรียบร้อยตามขั้นตอน
|
||||
|
||||
=== การติดตั้งอุปกรณ์
|
||||
|
||||
=== การเขียนเฟิร์มแวร์ <writingFirmware>
|
||||
|
||||
#iii โครงงานนี้ใช้ซอฟต์แวร์ PlatformIO ในการสร้างและจัดการโปรเจกต์เฟิร์มแวร์
|
||||
โดยหากต้องการเพียงแค่เขียนเฟิร์มแวร์ลงไปยังบอร์ด ESP32 คุณจำเป็นต้องใช้ซอฟต์แวร์หลัก ๆ คือ
|
||||
PlatformIO Core และ Git (ไม่จำเป็น แต่เพื่อความสะดวกสบาย) อย่างไรก็ตาม PlatformIO
|
||||
จำเป็นต้องใช้ Python เวอร์ชัน 3.6 ขึ้นไปด้วยเช่นกัน ดังนั้นคุณจำเป็นต้องติดตั้ง Python
|
||||
ด้วยหากคุณยังไม่มี
|
||||
|
||||
#iii ในขั้นตอนแรก โปรดเปิดเทอร์มินัลของคุณ ซึ่งโดยทั่วไปแล้วคุณสามารถค้นหาแอปพลิเคชัน#jb
|
||||
"Terminal" ได้เลย โดยบน Windows 10 เวอร์ชั่นใหม่ ๆ และ Windows 11 จะมาพร้อมกับแอปพลิเคชัน
|
||||
Windows Terminal อย่างไรก็ตาม เมื่อเปิดแล้ว โปรดตรวจสอบให้แน่ใจว่าคุณกำลังใช้ PowerShell
|
||||
และไม่ใช่ Command Prompt
|
||||
|
||||
#iii โดยในปัจจุบัน Python เวอร์ชันล่าสุดคือ Python 3.14.2 โดยคุณสามารถติดตั้ง Python และ Git
|
||||
บน Windows ได้ด้วยการใช้คำสั่งต่อไปนี้
|
||||
|
||||
```sh
|
||||
winget install Python.Python.3.14 Git.Git -e -s winget
|
||||
```
|
||||
|
||||
#iii สำหรับระบบปฏิบัติการอื่นนั้น โดยปกติแล้วจะไม่ต้องติดตั้ง Python
|
||||
เพิ่มเนื่องจากมีติดมากับระบบปฏิบัติการอยู่แล้ว อย่างไรก็ตาม บน Linux อาจต้องมีการติดตั้งการรองรับ
|
||||
Virtual Environment แยก โดยแต่ละระบบจะมีชื่อแพคเกจไม่เหมือนกัน โดยบน Debian, Fedora,
|
||||
และ Arch สามารถใช้คำสั่งต่อไปนี้ในการติดตั้งทั้ง Python Virtual Environment และ Git
|
||||
พร้อมกันได้
|
||||
|
||||
#pagebreak()
|
||||
|
||||
```sh
|
||||
# Debian
|
||||
sudo apt install python3-venv git
|
||||
# Fedora
|
||||
sudo dnf install python3-virtualenv git
|
||||
# Arch
|
||||
sudo pacman -S python-virtualenv git
|
||||
```
|
||||
|
||||
#show raw.where(block: true): set block(below: 2em)
|
||||
|
||||
==== การติดตั้ง PlatformIO Core ผ่านแพคเกจ
|
||||
|
||||
#iiii หากคุณใช้ Fedora Linux หรือ Arch Linux (หรือลูก ๆ ของมัน) คุณสามารถติดตั้งแพคเกจ
|
||||
PlatformIO ได้โดยตรง โดยมีคำสั่งดังนี้:
|
||||
|
||||
```sh
|
||||
# Fedora Linux
|
||||
sudo dnf install platformio
|
||||
# Arch Linux
|
||||
sudo pacman -S platformio-core
|
||||
```
|
||||
|
||||
- หากคุณติดตั้งแพคเกจ Fedora นั้นแล้ว คุณไม่จำเป็นที่จะต้องติดตั้งกฎ udev ด้วยตนเอง
|
||||
(ที่จะถูกกล่าวถึงใน@pioudev)
|
||||
- หากคุณใช้ Arch คุณสามารถติดตั้งแพคเกจกฎ udev ได้โดยตรงโดยไม่ต้องดาวน์โหลดเอง
|
||||
```sh
|
||||
sudo pacman -S --asdeps platformio-core-udev
|
||||
```
|
||||
|
||||
==== การติดตั้ง PlatformIO Core ผ่านสคริปต์
|
||||
|
||||
#iiii ถัดไป ในการติดตั้ง PlatformIO Core สามารถทำได้โดยการใช้สคริปต์ติดตั้ง โดยสำหรับ `curl`
|
||||
สามารถใช้คำสั่งนี้ได้:
|
||||
|
||||
```sh
|
||||
curl -fsSL -o get-platformio.py https://raw.githubusercontent.com/platformio/platformio-core-installer/master/get-platformio.py
|
||||
```
|
||||
|
||||
หรือหากต้องการใช้ `wget`:
|
||||
|
||||
```sh
|
||||
wget -O get-platformio.py https://raw.githubusercontent.com/platformio/platformio-core-installer/master/get-platformio.py
|
||||
```
|
||||
|
||||
#pagebreak()
|
||||
|
||||
หรือสำหรับ PowerShell, สามารถใช้ `iwr` (หรือชื่อเต็มคือ `Invoke-WebRequest`) ได้:
|
||||
|
||||
```sh
|
||||
iwr -OutFile get-platformio.py -Uri https://raw.githubusercontent.com/platformio/platformio-core-installer/master/get-platformio.py
|
||||
```
|
||||
|
||||
(มีการเว้นบรรทัดใหม่เนื่องจากพื้นที่ไม่เพียงพอ โปรดอย่าเว้นบรรทัดเมื่อพิมพ์คำสั่งจริง)
|
||||
|
||||
#iiii แล้วดังนั้นจึงใช้คำสั่ง `python3 get-platformio.py`
|
||||
ในการรันสคริปต์ติดตั้งที่ได้ทำการดาวน์โหลดมา โดยค่าเริ่มต้นแล้ว PlatformIO
|
||||
จะไม่เพิ่มตนเองเข้าไปยังตัวแปรสิ่งแวดล้อม PATH
|
||||
ซึ่งจำเป็นในการใช้คำสั่งจากที่ใหนก็ได้โดยไม่ต้องกล่าวถึงไฟล์พาธ
|
||||
|
||||
#iiii โดยสำหรับ Linux แล้วนั้น คุณต้องเพิ่ม `$HOME/.local/bin/` เข้าไปยัง PATH ของคุณ
|
||||
โดยหากคุณใช้ Bash คุณสามารถแก้ไข `~/.bash_profile` และเพิ่มบรรทัดนี้เข้าไปได้:
|
||||
|
||||
```sh
|
||||
export PATH=$PATH:$HOME/.local/bin
|
||||
```
|
||||
|
||||
#iiii หากคุณใช้ Zsh สามารถใช้โคดเดียวกันได้ เพียงแต่คุณต้องแก้ไขไฟล์ `~/.zprofile` หรือ
|
||||
`~/.zshrc` แทน
|
||||
|
||||
โดยบน Windows มีขั้นตอนดังนี้:
|
||||
|
||||
+ กด Windows + R
|
||||
+ พิมพ์ `sysdm.cpl` และกด Enter
|
||||
+ ในหน้าต่าง *System Properties* คลิกไปยังแท็บ *Advanced*
|
||||
+ คลิกปุ่ม *Environment Variables*
|
||||
|
||||
หลังจากนั้น เลือกตัวแปร *Path* ในส่วน *User variables* แล้วจึงกด *Edit* แล้วเพิ่ม
|
||||
`%USERPROFILE%\.platformio\penv\Scripts\` เข้าไปในรายการ
|
||||
|
||||
==== 99-platformio-udev.rules <pioudev>
|
||||
|
||||
#iiii ผู้ใช้ Linux จำเป็นที่จะต้องติดตั้งกฎ udev โดยสามารถดูไฟล์กฎ udev เวอร์ชันล่าสุดได้ที่
|
||||
https://raw.githubusercontent.com/platformio/platformio-core/develop/platformio/assets/system/99-platformio-udev.rules
|
||||
|
||||
*หมายเหตุ:* โปรดตรวจสอบว่า PID และ VID ของบอร์ดคุณอยู่ในไฟล์กฎนั้น โดยคุณสามารถดู PID/VID
|
||||
ของบอร์ดคุณได้ผ่านคำสั่ง `pio device list`
|
||||
|
||||
#iiii โดยไฟล์นั้นต้องถูกวางอยู่ที่ `/etc/udev/rules.d/99-platformio-udev.rules`
|
||||
(ตำแหน่งที่ดีที่สุด) หรือ `/lib/udev/rules.d/99-platformio-udev.rules`
|
||||
(อาจจำเป็นสำหรับบางระบบที่พัง)
|
||||
|
||||
โปรดใช้คำสั่งต่อไปนี้ในการดาวน์โหลดและวางไฟล์นั้นไว้ในสถานที่ที่ถูกต้อง:
|
||||
|
||||
```sh
|
||||
curl -fsSL https://raw.githubusercontent.com/platformio/platformio-core/develop/platformio/assets/system/99-platformio-udev.rules | sudo tee /etc/udev/rules.d/99-platformio-udev.rules
|
||||
```
|
||||
|
||||
หรือคุณก็สามารถดาวน์โหลดไฟล์นั้นด้วยตัวเองและคัดลอกมันไปในโฟลเดอร์ที่หมายได้เช่นกัน
|
||||
|
||||
```sh
|
||||
sudo cp 99-platformio-udev.rules /etc/udev/rules.d/99-platformio-udev.rules
|
||||
```
|
||||
|
||||
หลังจากนั้น รีสตาร์ทบริการ udev:
|
||||
|
||||
```sh
|
||||
sudo service udev restart
|
||||
```
|
||||
หรือ:
|
||||
```sh
|
||||
sudo udevadm control --reload-rules
|
||||
sudo udevadm trigger
|
||||
```
|
||||
|
||||
หลังจากติดตั้งไฟล์นี้แล้ว ถอดสายที่เชื่อมต่อระหว่างบอร์ดและคอมพิวเตอร์ของคุณแล้วเสียบมันใหม่
|
||||
|
||||
==== การดาวน์โหลดโปรเจกต์
|
||||
|
||||
#iiii สามารถใช้ Git ในการ clone โปรเจกต์ได้ด้วยคำสั่งต่อไปนี้:
|
||||
|
||||
```sh
|
||||
git clone https://gitskette.dailitation.xyz/linesofcodes/liteauth-firmware32.git
|
||||
```
|
||||
|
||||
#iiii โดย Git นั้นจะทำการโคลนโปรเจกต์ไปที่โฟลเดอร์ `liteauth-firmware32`
|
||||
เนื่องจากเป็นชื่อของ Git repository หรือหากไม่ต้องการใช้ Git กรุณาไปที่
|
||||
https://gitskette.dailitation.xyz/linesofcodes/liteauth-firmware32 และทำการคลิกปุ่ม
|
||||
*Code* แล้วกด *Download ZIP* หรือ *Download TAR.GZ* แล้วทำการแตกไฟล์ได้ตามปกติ
|
||||
|
||||
หลังจากนั้น ไปที่โฟลเดอร์ของคุณในเทอร์มินัลโดยใช้คำสั่ง `cd`
|
||||
|
||||
#pagebreak()
|
||||
|
||||
==== คำสั่ง PlatformIO เบื้องต้น
|
||||
|
||||
#[
|
||||
#set list(indent: 9.25em)
|
||||
- `pio run --list-targets`: ดูรายการเป้าหมายคำสั่งรัน
|
||||
- `pio run upload`: รันเป้าหมายอัพโหลด
|
||||
ซึ่งนี่คือคำสั่งที่คุณควรจะใช้ในการเขียนเฟิร์มแวร์ลงบนบอร์ด
|
||||
- `pio device monitor`: เปิด Serial Monitor
|
||||
]
|
||||
|
||||
#iiii *หมายเหตุ:* โปรดใช้คำสั่งประเภท `pio run` ในโฟลเดอร์ของโปรเจกต์
|
||||
|
||||
=== สร้างไฟล์แอปพลิเคชันด้วยตนเอง
|
||||
|
||||
#iii โครงงานนี้ใช้แอปพลิเคชันที่สร้างขึ้นมาเอง โดยในการพัฒนาแอปพลิเคชัน
|
||||
อย่างน้อยต้องมีส่วนประกอบดังกล่าวก่อน
|
||||
|
||||
- Flutter
|
||||
- Git (ซึ่งคุณจะติดตั้งแล้วหากคุณทำตาม@writingFirmware)
|
||||
|
||||
#iii อย่างไรก็ตาม Flutter มีข้อจำกัดว่า มีเพียง Android
|
||||
เท่านั้นที่ไม่ว่าแพลตฟอร์มไหนก็จะสามารถคอมไพล์ไฟล์ `.apk` ออกมาได้ ดังนั้น
|
||||
การสร้างแอปพลิเคชันสำหรับ Linux ต้องทำบน Linux เท่านั้น และการสร้างแอปพลิเคชันสำหรับ Windows
|
||||
ต้องทำบน Windows เท่านั้น
|
||||
|
||||
==== การติดตั้งโปรแกรมเขียนโคด
|
||||
|
||||
#iiiii จริง ๆ แล้วนั้น Flutter สามารถทำงานกับโปรแกรมเขียนโคดใดก็ได้
|
||||
แต่มีโปรแกรมเหล่านี้ที่อาจมีประสบการณ์การพัฒนาที่ดีกว่าโปรแกรมอื่น:
|
||||
|
||||
- Visual Studio Code (VS Code)
|
||||
- Android Studio
|
||||
- JetBrains IntelliJ
|
||||
- Firebase Studio
|
||||
|
||||
#iii โครงงานนี้ใช้โปรแกรมเขียนโคด Android Studio เป็นหลักเนื่องจากแอปพลิเคชันโครงงานมี
|
||||
Android เป็นเป้าหมายหลัก และ Android SDK สามารถจัดการได้ง่ายกว่าใน Android Studio
|
||||
|
||||
#iii การติดตั้ง Flutter สามารถทำได้สองวิธีด้วยกัน คือการติดตั้งผ่าน Visual Studio Code (VS
|
||||
Code) และการติดตั้งด้วยตนเอง โดยหากต้องการใช้ VS Code เป็นโปรแกรมเขียนโคดอยู่แล้ว
|
||||
สามารถติดตั้งผ่าน VS Code ได้เลย แต่ก่อนอื่น ต้องทำการติดตั้งโปรแกรมและไลบรารีพื้นฐานที่จำเป็นสำหรับ
|
||||
Flutter ก่อน
|
||||
|
||||
#pagebreak()
|
||||
|
||||
==== การติดตั้งโปรแกรมและไลบรารีที่จำเป็น
|
||||
|
||||
#[
|
||||
#set enum(indent: 9.25em)
|
||||
+ Windows: ติดตั้ง Git สำหรับ Windows ซึ่งคุณสามารถดูขั้นตอนการติดตั้งได้ที่
|
||||
https://git-scm.com/install/windows หรือเพียงแค่ใช้คำสั่งด้านล่าง
|
||||
#afigure(
|
||||
```sh
|
||||
winget install --id Git.Git -e --source winget
|
||||
```,
|
||||
kind: image,
|
||||
caption: [คำสั่งในการติดตั้ง Git],
|
||||
)
|
||||
+ Linux: โปรดดู@flLinuxDetails สำหรับรายละเอียดแพคเกจและคำสั่งที่ต้องใช้สำหรับระบบต่าง ๆ
|
||||
|
||||
+ macOS: ใช้คำสั่งต่อไปนี้ในการติดตั้งเครื่องมือ Xcode ต่าง ๆ รวมถึง Git
|
||||
#afigure(
|
||||
```sh
|
||||
xcode-select --install
|
||||
```,
|
||||
kind: image,
|
||||
caption: [คำสั่งในการติดตั้งเครื่องมือ Xcode],
|
||||
)
|
||||
]
|
||||
|
||||
==== การติดตั้งผ่าน Visual Studio Code
|
||||
|
||||
#block(inset: (left: 8.25em))[
|
||||
#set enum(indent: 1em)
|
||||
+ เปิด VSCode
|
||||
+ ติดตั้งส่วนขยาย Flutter \
|
||||
อยู่ภายใต้ ID `Dart-Code.flutter` ทั้งบน Visual Studio Marketplace และ OpenVSX
|
||||
+ ติดตั้ง Flutter ด้วย VS Code
|
||||
+ เปิด 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
|
||||
จะสามารถใช้ผ่านเทอร์มินัลได้
|
||||
+ เมื่อเสร็จสิ้น ใช้คำสั่ง `flutter doctor -v` ในเทอร์มินัลที่คุณเลือกเพื่อตรวจสอบการติดตั้ง
|
||||
Flutter ของคุณ \
|
||||
หากคำสั่งไม่เจอหรือเกิดข้อผิดพลาดขึ้น ตรวจสอบ
|
||||
https://docs.flutter.dev/install/troubleshoot สำหรับข้อมูลเพิ่มเติม
|
||||
]
|
||||
|
||||
==== การติดตั้งด้วยตนเอง
|
||||
|
||||
#iiii แนะนำให้ทำตาม https://docs.flutter.dev/install/manual#install-flutter
|
||||
เนื่องจากกระบวนการนี้ต้องใช้ข้อมูลที่ใหม่ล่าสุด
|
||||
|
||||
1. ดาวน์โหลด Flutter (สามารถหาปุ่มดาวน์โหลดได้จากลิงก์ด้านบน)
|
||||
2. สร้างโฟลเดอร์สำหรับเก็บ Flutter SDK
|
||||
3. ทำการแตกไฟล์ที่ดาวน์โหลดมา
|
||||
4. เพิ่ม Flutter เข้าไปยัง PATH ของคุณ (วิธีการขึ้นอยู่กับระบบปฏิบัติการ)
|
||||
5. ยืนยันความถูกต้องของการติดตั้งของคุณด้วยคำสั่ง `flutter doctor -v`
|
||||
|
||||
==== ข้อมูลเกี่ยวกับแพลตฟอร์ม
|
||||
|
||||
===== Android <flAndroid>
|
||||
|
||||
#iiiii ในการพัฒนาแอปพลิเคชัน Android โดยใช้เฟรมเวิร์ก Flutter
|
||||
จำเป็นต้องใช้ส่วนประกอบเครื่องมือพัฒนา Android ดังนี้
|
||||
|
||||
- Android SDK (API Level 36 ณ เวลาที่พิมพ์)
|
||||
- Android SDK Build-Tools
|
||||
- Android SDK Command-line Tools
|
||||
- Android SDK Platform-Tools
|
||||
- Android Emulator (ไม่บังคับ)
|
||||
|
||||
โดยแนะนำให้จัดการและติดตั้งเครื่องมือเหล่านี้ผ่าน Android Studio
|
||||
|
||||
#iiiii ในการติดตั้ง Android SDK ควรติดตั้ง Android SDK
|
||||
ล่าสุดถึงแม้ว่าอุปกรณ์ของคุณจะใช้เวอร์ชันที่เก่ากว่านั้น
|
||||
เพื่อความมั่นใจว่าแอปพลิเคชันจะสามารถใช้กับอุปกรณ์ที่ใหม่ล่าสุดได้
|
||||
|
||||
#iiiii แอปพลิเคชัน 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
|
||||
|
||||
#iiiiii Java และ Kotlin เป็นภาษาสำคัญสำหรับการพัฒนาแอปพลิเคชัน Android ถึงอย่างไรก็ตาม
|
||||
แอปพลิเคชัน Flutter นั้นถูกเขียนด้วยภาษา Dart แต่ยังจำเป็นต้องมีโคด Java และ Kotlin
|
||||
เล็กน้อยเพื่อเริ่มต้นแอปพลิเคชัน Flutter
|
||||
|
||||
#iiiiii โดยปกติแล้ว Flutter จะสร้างโคดพื้นฐานขึ้นมาให้สำหรับการเริ่มแอปพลิเคชันแบบพื้นฐาน
|
||||
ดังนั้นจึงไม่จำเป็นต้องมีการเขียนโคด Java หรือ Kotlin เอง แต่ในบางกรณี
|
||||
อาจต้องเขียนโคดเพิ่มเองหากมีความต้องการเข้าถึงฟีเจอร์พื้นฐานระบบที่ Flutter ไม่มี API
|
||||
เพื่อให้เข้าถึงได้และไม่มีแพคเกจเพื่อรองรับฟีเจอร์ที่ต้องการ
|
||||
|
||||
#iiiiii โครงการนี้ใช้ Java 21 (JetBrains Runtime/Azul Zulu OpenJDK)
|
||||
เป็นหลักในการทำงานกับ Gradle แต่แอปพลิเคชัน Android ที่ผลิตออกมานั้น
|
||||
เพื่อให้เข้ากับเวอร์ชันที่เก่ากว่าของระบบปฏิบัติการได้ ใช้ Java 11
|
||||
|
||||
====== Gradle
|
||||
|
||||
#iiiiii Gradle เป็นเครื่องมือสร้างระบบอัตโนมัติสำหรับการพัฒนาซอฟต์แวร์หลายภาษา จัดการงานต่าง ๆ
|
||||
เช่น การคอมไพล์ การแพ็คเกจ การทดสอบ การปรับใช้ และการเผยแพร่ ภาษาที่รองรับ ได้แก่ Java
|
||||
(รวมถึงภาษา Kotlin, Groovy, Scala ที่ใช้ JDK), C/C++ และ JavaScript Gradle
|
||||
พัฒนาต่อยอดจากแนวคิดของ Apache Ant และ Apache Maven และนำเสนอภาษาเฉพาะโดเมนที่ใช้
|
||||
Groovy และ Kotlin ซึ่งต่างจากการกำหนดค่าโครงการที่ใช้ XML ที่ Maven ใช้ Gradle
|
||||
ใช้กราฟแบบอะไซคลิกกำกับทิศทางเพื่อจัดการการอ้างอิง กราฟนี้ใช้เพื่อกำหนดลำดับของงานที่ควรดำเนินการ
|
||||
Gradle ทำงานบน Java Virtual Machine
|
||||
|
||||
#iiiiii Gradle คือเครื่องมือหลักที่ใช้ในการจัดการโปรเจกต์ Java ส่วนใหญ่ รวมถึงโปรเจกต์ Android
|
||||
โดยในโครงการนี้ จะใช้ Gradle เวอร์ชัน 8.14.3 เป็นหลัก
|
||||
|
||||
#iiiiii โดยปกติแล้ว ผู้พัฒนานั้นไม่มีความจำเป็นที่จะต้องแตะต้อง Gradle ด้วยตนเอง และ Flutter
|
||||
จะทำการจัดการเอง แต่หากมีความจำเป็นต้องใช้คำสั่ง Gradle ด้วยตนเอง จะมีสคริปต์ `gradlew` (หรือ
|
||||
`gradlew.bat` สำหรับผู้ใช้ Windows) ภายในโฟลเดอร์ `android` ของโปรเจกต์ Flutter
|
||||
เสมอเพื่อเรียกใช้ Gradle ที่ถูกดาวน์โหลดมาสำหรับโปรเจกต์นั้น ๆ
|
||||
|
||||
===== Linux <flLinuxDetails>
|
||||
|
||||
#iiiii เช่นเดียวกับ Android ที่กล่าวไปข้างต้น Flutter
|
||||
มีการสร้างโคดสำหรับการเปิดแอปพลิเคชันแบบพื้นฐาน แต่สำหรับ Linux แล้วนั้น Flutter ใช้โคด C++
|
||||
และเฟรมเวิร์ก CMake ในการสร้างรากฐานของแอปพลิเคชัน
|
||||
|
||||
#iiiii ในการพัฒนาแอปพลิเคชันสำหรับ Linux ต้องติดตั้งโปรแกรมเพิ่มเติม (build dependencies)
|
||||
ขยายความคือ ด้านบนคือสิ่งที่จำเป็นหากมีระบบอื่นเป็นเป้าหมาย แต่หากต้องการพัฒนาแอปพลิเคชัน Linux
|
||||
ต้องติดตั้งโปรแกรมในรายการด้านล่างเพิ่ม
|
||||
|
||||
#grid(
|
||||
columns: 2,
|
||||
column-gutter: 1in,
|
||||
[
|
||||
- GTK 3 (ไลบรารีสำหรับการพัฒนา)
|
||||
- pkg-config
|
||||
- ไลบรารี GNU Standard C++ v3
|
||||
],
|
||||
[
|
||||
- Clang
|
||||
- CMake
|
||||
- Ninja
|
||||
],
|
||||
)
|
||||
|
||||
#iiiii การติดตั้งไลบรารีและโปรแกรมที่กล่าวไปข้างต้นจะแตกต่างกันไปแต่ละการแจกจ่าย Linux และ
|
||||
Flutter ใช้ไลบรารีพื้นฐานดังกล่าวในการทำงานของแอปพลิเคชัน (runtime dependencies)
|
||||
|
||||
- GTK 3
|
||||
- blkid
|
||||
- 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],
|
||||
)
|
||||
|
||||
====== 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],
|
||||
)
|
||||
|
||||
===== macOS/iOS
|
||||
|
||||
#iiiii การพัฒนาแอปพลิเคชันสำหรับ macOS และ iOS นั้นต้องทำบน#jb macOS
|
||||
เท่านั้นและจำเป็นต้องพึ่งพาเครื่องมือ Xcode แต่เนื่องจากในโครงงานนี้ไม่มีผู้ใช้ macOS
|
||||
จึงไม่สามารถสร้างไบนารีสำหรับ macOS และ iOS ออกมาได้ และไม่ใช่เป้าหมายของโครงงานนี้เช่นกัน
|
||||
|
||||
== การทดสอบ
|
||||
|
||||
== การวิเคราะห์ข้อมูล
|
||||
Reference in New Issue
Block a user