696 lines
37 KiB
Typst
696 lines
37 KiB
Typst
#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 ออกมาได้ และไม่ใช่เป้าหมายของโครงงานนี้เช่นกัน
|
|
|
|
== การทดสอบ
|
|
|
|
== การวิเคราะห์ข้อมูล
|