ก้าวแรกกับการพัฒนาแอปพลิเคชันบนสมาร์ทโฟนด้วย Flutter

          Flutter คือ SDK ที่ใช้ภาษา Dart ในการพัฒนาแอปพลิเคชันบนสมาร์ตโฟนที่สามารถทำงานข้ามแพลตฟอร์มบนระบบปฏิบัติการ Android และระบบปฏิบัติการ iOS ถูกพัฒนาโดย Google และแน่นอนว่าเป็น open source ที่สามารถนำไปใช้งานได้โดยไม่เสียค่าใช้จ่าย นอกจากนี้ Flutter จะช่วยทำให้ UI และประสิทธิภาพของแอปพลิเคชันที่ถูกสร้างขึ้นมามีความคล้ายกับ Native แอปพลิเคชัน แถม Google ก็ยังโฆษณาอีกว่า Flutter สามารถทำงานร่วมกับภาษา Native (ภาษา Java หรือ Kotlin ของ Android และภาษา ObjectiveC หรือ Swift ของ iOS) ได้อีกด้วย .....จะจริงหรือมั่ว ชัวร์หรือไม่ เราก็มาลองเล่นกันเลยดีกว่า

ติดตั้ง Flutter SDK

---

          เริ่มติดตั้ง Flutter SDK โดยการเข้าไปที่ Flutter Install

          ให้เลือกติดตั้งตามระบบปฏิบัติการของเพื่อน ๆ ในที่นี้ผมขอติดตั้งบน Windows ละกัน ซึ่งการจะเรียกใช้งาน Flutter นั้น ในเครื่องจำเป็นต้องมี PowerShell เวอร์ชัน 5.0ขึ้นไปและ Git for Window ก่อน ถ้าเป็นคอมพิวเตอร์ที่มีการอัปเดต Window อยู่เสมอ ๆ ก็คงไม่ต้องติดตั้ง PowerShell เพิ่ม ส่วนเพื่อน ๆ ที่ยังไม่ได้ติดตั้ง Git ก็สามารถย้อนกลับไปอ่านบทความ "วิธีติดตั้ง Git ก่อนเริ่มใช้งาน" ก่อนได้เลย

          อันดับถัดไปให้ดาวน์โหลด Flutter SDK จาก Flutter SDK โดยเลือกเวอร์ชันล่าสุด (ณ ปัจจุบันที่เขียนบทความนี้คือ Beta v0.6.0)

          หลังจากโหลดเสร็จ ก็จะได้ไฟล์ .zip มาตัวนึง ให้ทำการ Extract ไฟล์ออกมา แล้ว copy โฟล์เดอร์ flutter ไปเก็บไว้ในพาทที่ต้องการ (ในที่นี้ผมเอาไปไว้ใน E:\ ก็จะกลายเป็น E:\flutter\ ) ยกเว้นพาท C:\Program Files\ (เพราะในพาทนี้จะต้องการสิทธิ์ในการเขียนข้อมูล) จากนั้นเข้าไปยังโฟล์เดอร์ flutter และดับเบิ้ลคลิกไฟล์ flutter_console.bat ก็จะได้ Flutter Console ขึ้นมา เพียงแค่นี้เราก็พร้อมใช้งานคำสั่งของ Flutter แล้ว

          ขั้นตอนถัดไป ให้ติดตั้ง Android Studio โดยเพื่อน ๆ สามารถดูขั้นตอนติดตั้งได้ที่ "เตรียมความพร้อมก่อนจะพัฒนาโปรแกรมบน Android" จากนั้นเพื่อน ๆ จะต้องอัปเดต Android SDK (วิธีอัปเดตก็อยู่ล่าง ๆ ของบทความติดตั้งแล้ว) ต่อไปเราก็จะมาติดตั้ง Flutter Plugin ใน Android Studio เพื่อเพิ่มความสามารถในการพัฒนาแอปพลิเคชัน

          เปิด Android Studio ขึ้นมาแล้วคลิกที่ Configure > Plugins

          คลิก Browse repositoriess... จากนั้นกรอกคำว่า flutter ในช่องค้นหา แล้วคลิก Install ระบบจะถามโดยอัตโนมัติว่า "จะติดตั้ง plugin ของภาษา Dart ด้วยหรือไม่?" ก็ให้คลิก Yes ติดตั้งไปด้วยเลย รอจนติดตั้ง plugin เสร็จ Android Studio ก็จะ restart ตัวเอง

          กลับมาที่ Flutter Console ให้พิมพ์คำสั่ง  flutter doctor  เพื่อให้คุณหมอตรวจสอบว่าคอมพิวเตอร์ของเราพร้อมจะใช้งาน Flutter หรือยัง (ถ้าต้องการรายละเอียดเพิ่มเติม ให้พิมพ์  flutter doctor -v  แทน) โดยสิ่งที่คุณหมอจะตรวจสอบ ได้แก่

• Flutter SDK และ Dart SDK
• Android Toolchain เครื่องมือที่จำเป็นในการพัฒนา Android แอปพลิเคชัน
• iOS Toolchain เครื่องมือที่จำเป็นในการพัฒนา iPhone แอปพลิเคชัน
• โปรแกรมสำหรับเขียนโค้ดรวมถึง plugin ที่จะต้องใช้ (เช่น Android Studio IDE, IntelliJ IDEA, VS Code)
• การเชื่อมต่อกับสมาร์ตโฟนหรือ Emulator

          ผลจากการรันในเครื่องของผมจะเห็นได้ว่าไม่มี iOS Toolchain อยู่ (ซึ่งก็แน่อยู่แล้วเพราะผมไม่ได้ใช้ Macbook ฮา) และมี [!] อยู่ในบรรทัดสุดท้าย เนื่องจากยังไม่ได้เชื่อมต่อสมาร์ตโฟนเข้ากับคอมพิวเตอร์ (หรือเปิด Emulator) อ่านวิธีเชื่อมต่อสมาร์ตโฟน หรือวิธีเปิด Emulator

          หลังจากเชื่อมต่อสมาร์ตโฟนเข้ากับคอมพิวเตอร์หรือเปิด Emulator แล้ว ให้พิมพ์คำสั่งคุณหมอ  flutter doctor -v  เหมือนเดิม ก็จะพบว่าเครื่องหมาย [!] หายไปแล้ว ฟู่ กว่าจะมาถึงขั้นนี้ได้ก็ลำบากพอสมควรเหมือนกันนะเนี่ย แต่ไม่เป็นไร สู้ต่อไป! ทาเคชิ! .....เปิดโปรแกรม Android Studio มาต่อกันเลย

สร้างโปรเจค Flutter

---

          หลังจากติดตั้ง Flutter plugin แล้วจะมีเมนูใหม่โผล่ขึ้นมา ให้คลิก Start a new Flutter project ได้เลย

          เลือกที่ Flutter Application แล้วคลิกปุ่ม Next

          ให้กรอกข้อมูลของแอปพลิเคชัน จากนั้นคลิกปุ่ม Next

• Project Name: ชื่อโปรเจค ใช้เป็นอักษรตัวเล็กหรือ _ คั่นระหว่างคำ ไม่สามารถใช้อักษรพิเศษหรือช่องว่างได้
• Fultter SDK path: ตำแหน่งที่เก็บ SDK ของ Flutter ตามที่ได้ติดตั้งในบทความนี้ (ของผมเป็น E:\flutter)
• Project location: ตำแหน่งที่เก็บไฟล์โปรเจค
• Description: คำอธิบายโปรเจค

          ถัดไปให้กรอก Company domain หรือ URL ของเว็บไซต์ เพื่อจะใช้ในการสร้าง Package name *ชื่อ Package name คือชื่อรหัสประจำตัวของแอปฯ ซึ่งจะต้องห้ามซ้ำกับของแอปพลิเคชันอื่น จากนั้นก็คลิก Finish เป็นอันเสร็จสิ้นการสร้างโปรเจค

          คลิกปุ่มเล่นตรงแถบข้างบนโค้ด (หรือกด Shift + F10) เพื่อสั่งรันโปรเจค

          เท่านี้ก็ได้โปรแกรมง่าย ๆ ของ Flutter แล้ว สำหรับก้าวแรกในการพัฒนาแอปพลิเคชันแบบ Cross Platform ก็ขอจบลงเพียงเท่านี้ เอาไว้พบกันใหม่กับบทความถัดไป บ๊ายบาย ✋

ของแถม!!!

วิธีใช้งาน Flutter บน CMD

          ปกติคำสั่งของ Flutter จะถูกใช้งานบน Flutter Console เท่านั้น แต่ถ้าเพื่อน ๆ ต้องการใช้งานคำสั่งของ Flutter ใน Windows command prompt ก็ให้เพิ่ม Flutter ลงใน PATH environment variable ของคอมพิวเตอร์ก่อน

          คลิกขวาที่ My Computer แล้วเลือก Properties

          เลือก Advanced system settings

          คลิก Environment Variables…

          เลือกที่ Path ในส่วนของ System variable แล้วคลิก Edit...

          จะปรากฏหน้าต่างแบบนี้ขึ้นมา ให้คลิกที่ปุ่ม New

          ให้พิมพ์ตำแหน่งที่เก็บ bin ของ Flutter ในที่นี้ผมใส่เป็น E:\flutter\bin แล้วคลิกปุ่ม OK

          คลิก OK

          คลิก OK เท่านี้เราก็สามารถใช้คำสั่งของ Flutter ใน Windows command prompt ได้แล้ว ลองพิมพ์คำสั่ง  flutter doctor  ก็จะได้ผลลัพธ์เหมือนกับที่พิมพ์ใน Flutter Console

          เรียบร้อยจ้า!!

วิธีอัพเกรด Flutter

          ปัจจุบันนี้ Flutter อยู่ในช่วงตั้งไข่ ยังไม่ใช่เวอร์ชันเต็ม ซึ่งทีมพัฒนา Flutter ของ Google ก็พยายามพัฒนาความสามารถของ Flutter ให้สูงขึ้นเรื่อย ๆ โดยเราสามารถเช็คเวอร์ชันของ Flutter ที่เราใช้งานอยู่ได้ด้วยคำสั่ง

flutter --version

และเมื่อทีมพัฒนา Flutter ปล่อยเวอร์ชันใหม่ของ Flutter ออกมา เราก็จำเป็นต้องอัพเกรด Flutter ให้เป็นเวอร์ชันล่าสุดเพื่อเพิ่มความสามารถให้สูงขึ้นด้วยคำสั่ง

flutter upgrade

อีกหนึ่งเรื่องสำคัญที่เราจำเป็นต้องอัพเกรด Flutter ให้เป็นเวอร์ชันล่าสุด นั่นคือ โค้ดคำสั่งบางโค้ดอาจจะถูกยกเลิกออกไป ซึ่งส่งผลให้แอปพลิเคชันที่เราพัฒนาขึ้นมาเกิด Error จนไม่สามารถใช้ได้ เพราะงั้นเพื่อน ๆ ก็อย่าลืมอัพเกรด Flutter กันด้วยนะ