Day 1/100 — Flutter coding

เริ่มต้นการเรียนรู้อีกครั้ง ก่อนหน้านี้ผมเองเคยได้สัมผัสการเรียนแอปพลิเคชันด้วยภาษา flutter framework มาแล้วบ้าง แต่ก็ไปได้ไม่ถึงฝัน อาจจะด้วยปัญหาต่าง ๆ นา ๆ ครั้งนี้เอาใจช่วยผมด้วยนะครับทุกคน …

Table of content

• แนะนำให้รู้จัก
• โครงสร้าง Project
• โครงสร้าง Main App
• เริ่มต้นทำ Recipe App ตามในหนังสือ

แนะนำให้รู้จัก

ช่วงเริ่มต้นของการเรียนรู้ ผมจะทำการเรียนรู้ผ่านหน้งสือที่ชื่อว่า flutter apprentice ของสำนัก raywenderlich ใครที่สนใจสามารถเข้า link นี้ได้เลย และผมจะเรียนรู้แบบกระโดดไป กระโดดมา ฮา ๆ แต่วันคงมีคำถามคาใจมาจากวันก่อนหน้า และคำถามนั้นแหละจะเป็นเครื่องมือที่ผมใช้ในการเรียนนั้น

ก่อนอื่นมา install framework กันก่อนครับ ผมจะไม่ลงรายละเอียดตรงนี้นะ ส่วนคนไหนสนใจผมมี link แนะนำให้ไปทำต่อตามนี้ครับ install flutter framework

เครื่องมือที่ผมใช้ในการเรียนครั้งนี้

1. VSCode
2. Xcode, Android Studio (ภาคบังคับต้องลง เนื่องจากตัว SDK จะนำเหล่า compiler พวกนี้ไป build เป็นแอป .apk หรือ .ipa)
3. Flutter dev tool

หลังจากที่ได้ install แล้วหรือคนไหนติดปัญหาอะไรให้ใช้คำสั่ง

flutter doctor

สถานะ flutter doctor เพื่อเตรียมความพร้อมของเครื่องมือ

ถ้าได้ ✅ ครบแล้ว ให้ไปลง plugin flutter ใน vscode รอได้เลย

plugin flutte ใน VSCode

คราวนี้เราพร้อมกันแล้วจริง ๆ นะ มาลองรัน demo app กันแบบ cool cool เหมือนทำแอปเองกันดีกว่า

บนหน้าจอ VSCode ให้กด CMD + Shift + P แล้วพิมพ์คำว่า “flutter” จะเจอเมนูให้เลือกดังนี้ นี้คือเครื่องมือที่เราจะมาเรียนรู้วิธีใช้ไปพร้อม ๆ กันครับ

ขั้นแรกให้เลือก new project แล้วลอง run โปรแกรมดูได้เลย ทุกคนต้องการหน้าตาแบบนี้ ซึ่งเป็นหน้าตา classic สำหรับผู้เริ่มต้นเขียน flutter เหมือนที่เวลาเราเรียนภาษาเขียนโปรแกรมก็จะเริ่มต้นด้วย print “Hello World”

Demo APP

Learning Chapter วันนี้ มีด้วยกัน 2 เรื่องคือ (1) โครงสร้างของ project directory (2) โครงสร้างของ main app ที่ใช้ในการเปิด app ขึ้นมา

โครงสร้างของ Project

โครงสร้างของ project flutter

อย่าพึ่งตกใจไปว่าทำไมมีโฟลเดอร์เยอะไปหมดเราไม่ไล่ดูแต่ละอันกัน

โฟลเดอร์ Platform

โฟลเดอร์ที่ชื่อ android, ios, linux, macOS, we, windows พวกนี้จะเป็นที่เก็บไฟล์หลังจากที่ตัว flutter sdk ทำการ build เป็น app ของแต่ละ platform โดยปกติเราจะไม่ค่อยได้ใช้งานกันยกเว้นเป็นบางกรณีที่แต่ละ platform มีความจำเป็นต้องแก้ไข อาจจะเป็น parameter บางตัว แต่คงไม่ถึงขั้นไปแก้ทั้ง app แน่นอน ฉะนั้นเราปล่อยผ่านไปได้เลยสำหรับวันนี้

โฟลเดอร์และไฟล์ที่ถูกสร้างขึ้นอัตโนมัติ

โฟลเดอร์ที่ชื่อว่า .dart_tool, .idea, build จะถูกสร้างขึ้นหลังจากที่เรากด build โดย SDK จะสร้างเป็น cache ไว้สำหรับทดสอบโปแกรม

ไฟล์ที่ชื่อว่า .metadata, .package, pubspec.lock ไฟล์เหล่านี้ถูกสร้างขึ้นเพื่อใช้เป็น dependency management

โฟลเดอร์และไฟล์ที่เราสนใจสำหรับพัฒนาโปรแกรมใน flutter

โฟลเดอร์ที่ชื่อว่า lib เป็นที่เก็บ source code ที่เราพัฒนาโปรแกรมขึ้นมา โฟลเดอร์นี้จะถูกใช้เป็นหลัก

โฟลเดอร์ชื่อว่า test เป็นที่เก็บ source code ของตระกูล unit test, ui test

ไฟล์ที่ชื่อว่า pubspec.yaml เป็นไฟล์ setting ของ flutter ซึ่งเราก็สนใจที่ต้องเรียนรู้ว่ามีอะไรให้แก้ไขได้บ้าง และที่สำคัญเป็นไฟล์ที่เราไว้จัดการ dependecies คล้าย ๆ กับ Cocoapods ใน iOS หรือ Gradle ใน Android

ไฟล์ที่ชื่อว่า .gitignore เอาไว้สำหรับให้ version control ไม่สนใจ path หรือ ชื่อ โฟลเดอร์หรือไฟล์ที่เราไม่ต้องการเข้าไปไว้ใน git ยกตัวอย่างเช่น โฟลเดอร์ตระกูลที่ถูกสร้างขึ้นอัตโนมัติ

โครงสร้าง Main App

ก่อนอื่นเราต้องมาทำความเข้าใจกันสักนิด ผมอยากเข้าใจว่า pubspec.yaml ทำหน้าที่อะไรบ้าง เราสามารถไปดูได้จาก link นี้

pubspec.yaml

ถ้าดูจากโครงสร้างก็จะเห็นว่าสำคัญไม่น้อยที่เกี่ยวกับการพัฒนา ทั้งใน
เรื่องการสร้าง plugin เพื่อทำเป็น common module หรือเป็น 3rd party lib
เรื่องการเรียกใช้ dependecise
เรื่องการใส่ Assets, font

มาดูในส่วนของ main.dart น่าจะเป็นหัวใจของการพัฒนาเลยก็ว่าได้

main.dart อยู่ในโฟลเดอร์ lib

โครงสร้าง main.app

ถ้าสังเกตุจะเห็นว่าจุด entry หรือจุดทางเข้า ของตัวโปรแกรมจะเริ่มจาก void main() คล้าย ๆ กับในหลาย ๆ ภาษา (ที่ไม่ใช่ iOS และ Android ฮา ๆ )

ทำไมต้องเริ่มจาก main.dart

ผมพบว่ามันคือการตั้ง default มาจากทางผู้พัฒนา sdk แต่เรายังสามารถที่จะสร้าง lib หรือ build ใดๆ โดยไม่ให้เริ่มจาก main.dart ได้

เราสามารถสรุปได้ว่า พื้นฐานโปรแกรมทั้งหมดมาจาก dart และทางผู้พัฒนา flutter sdk ได้สร้างฟังก์ชันที่ชื่อว่า runApp(*) และนำ Widget ที่ถูกเขียนขึ้นไปแสดงผล ผมเน้นย้ำคำว่า widget เพราะว่าถ้าดูจากโครงสร้างด้านบนจะเห็นว่ามี 3 components ที่ทำงานเป็นหลัก (1) StatelessWidget (2) StatefulWidget และ (3) State

เพราะฉะนั้น step ถัดไปของการเรียนรู้จะเริ่มต้นที่ Widget 📌

เริ่มต้นทำ Recipe App ตามในหนังสือ

หลังจากเราทดลองเปลี่ยนชื่อ class ที่เราจะสร้างตัว app แล้วผมพบว่าใน widget เป็น class ล่างสุดหรือเรียกว่า foundamental class คล้ายๆ uiview ใน iOS และที่เราจะใช้ในการพัฒนามากที่สุดมี 2 class คือ (1) Stateless widget (2) Stateful widget

เปลี่ยน Styling และ title app

Recipe Calculator

เคลียร์ code ที่เป็น demo app แล้วมาสรุปภาพรวมกัน

ภาพรวม source code ที่ได้เคลียร์ออกไป

เริ่มต้นจาก RecipeApp เพื่อสร้าง Stateless widget โดย return MaterialApp ซึ่งเจ้า MaterialApp เป็น Stateful widget (แอบงงแต่ผมจะไปหาคำตอบมา แล้วใน MaterialApp ก็มีพารามิเตอร์ที่ชื่อว่า home เอาไว้สำหรับเป็น main route

ใน code ผมสร้าง instance ที่ชื่อว่า MyHomePage เข้าไปใน MaterialApp นั้นเรามาดูต่อกันเลย ภายใน MyHomePage จะเป็นส่วนที่เก็บข้อมูล data เอาไว้ใช้ใน State เมื่อเราทำการ override function ที่ชื่อว่า create state เราสามารถสร้าง UI ลงไปตอนนี้ได้เลย

ในส่วนของหน้า UI ก็สร้างเจ้า Scaffold เจ้านี้คือ Material widget ตัวหนึ่ง ผมคิดว่าหลาย ๆ เคยได้รู้เกี่ยวกับ Material design ของ Google ในส่วนของ code ก็ใส่ AppBar (เจ้านี้ก็ widget นะ) และในส่วนของ body ก็ใช้ SafeArea ชื่อนี้คุ้น ๆ กันไหม ยกเครดิตให้พี่เค้าหน่อย ใครสนใจ SafeArea มาจาก Apple และถูกนำมาใช้ใน flutter ด้วย

Scaffold widget

หน้าตา app หลังจากเคลียร์ code ของ demo app แล้ว

สรุป

สำหรับวันนี้เราได้เรียนรู้เบื้องลึก เบื้องหลังกันไปแล้ว ในวันพรุ้งนี้ผมจะไปลุยเรื่อง widget ต่อ แล้วมาติดตามกันใหม่นะครับ

สำหรับโค๊ตผมจะอัพไว้ที่ Github repo