เนื้อหาที่จะนำเสนอในบทความครับการติดตั้งอุปกรณ์ และเครื่องมือที่จำเป็น- Genymotion- Flutterทำการทดสอบแอปพลิเคชันคร่าว ๆ ครับ- ไม่ได้ลงลึกถึงรายละเอียดในการเขียนโค้ดครับ ในตอนที่ 1 จะทำการทดลองผ่าน command prompt เท่านั้นครับ ขออนุญาตเกริ่นคร่าว ๆ ครับ- ณ ปัจจุบันนี้มือถือเป็นสิ่งที่ขาดไม่ได้สำหรับผู้คนเรียกได้ว่ากลายเป็นปัจจัยที่สำคัญต่อการดำรงชีพไปแล้วเนื่องด้วยมือถือมีแอปพลิเคชั่นต่าง ๆ มากมายที่อำนวยให้กับเรา แต่บางครั้งเราก็ไม่เจอกับแอพพลิเคชั่นที่ตรงกับความต้องการเราจริง ๆ จะดีแค่ไหนถ้าเกิดเราสามารแอปพลิเคชันเองได้ และก็ตอบสนองกับความต้องการของตัวเองได้- เป้าหมายในการเขียนครั้งนี้ก็เพื่อแบ่งปันความรู้ที่ผมมี และที่สำคัญก็เพื่อทบทวนในสิ่งที่ตัวเองเคยเรียนไปแล้วด้วยภายในตัว Flutter คืออะไร - Flutter คือ framework หรือประมาณว่างานสำเร็จรูปที่เราสามารถนำไปใช้เพื่อพัฒนาต่อได้ โดยใช้ภาษา dart ในการเขียน ถูกพัฒนาโดย google ทำไมถึงใช้ Flutter- พัฒนารอบเดียวใช้ได้ทั้ง iOS, Android ( react native ก็เหมือนกัน )- มีงานสำเร็จรูปมากมายที่เราสามารถนำไปใช้ได้เลยส่วนที่ 1 เตรียมอุปกรณ์กันเถอะ1) ลง Flutter กันก่อน- https://flutter.dev/docs/get-started/install/windows เข้าตามลิงก์นี้เลยครับ แล้วกดดาวน์โหลด flutter sdk(software development kit)credit: https://flutter.dev2) ทำการแตกไฟล์หรือ unzip แล้วก็เก็บไว้ใน path ที่เราชอบครับ โดยผมจะเก็บไว้ใน Drive D ภายใต้โฟลเดอร์ Flutter-workspace3) เพื่ม path เพื่อให้สามารถเรียกใช้ผ่าน command prompt ได้ (ฟังชื่อดูน่ากลัวแต่ไม่ยากอย่างที่คิดครับ)3.1) พิมพ์ “ environment variable ” ลงในช่องค้นหาครับแล้วกด enter 3.2) หลังจากนั้นจะมีหน้าแบบนี้โผล่ออกมาครับกดเลือก advanced แล้วก็กดปุ่มที่ highlight ครับ 3.3) ขั้นตอนต่อมากด Path ให้ขึ้น highlight แบบนี้ครับ แล้วกด edit* มันจะมี 2 อันนะครับ ระหว่าง user variable กับ system variable เราเลือกเฉพาะ user variable ครับ 3.4) ต่อมานำที่อยู่ของ folder flutter ที่เราเพิ่งโหลดนำลงไปใส่ครับโดยการกด new แล้วจะมีช่องว่างให้เราใส่ครับ* ต้องมี bin ต่อท้ายด้วยนะครับ** เพื่ม path เรียบร้อย แนะนำให้รีสตาร์ท (restart) คอมรอบหนึ่งครับ4) ขั้นตอนต่อมาจะเป็นการโหลด genymotion เพื่อใช้ในการทดสอบแอปพลิเคชันของเราครับผม4.1) https://www.genymotion.com/ เข้าไปตามลิงก์นี้ครับผม กดเลือก " desktop sign in "credit: https://www.genymotion.com/ 4.2) หลังจากนั้นต้องทำการสมัครก่อนถึงจะสามารถดาวน์โหลดได้ครับcredit: https://www.genymotion.com/ 4.3) พอ login เข้ามาแล้วก็จะสามารถดาวน์โหลดได้ โดยสามารถใช้ได้ฟรีถ้าเป็นตัว personal use ครับcredit: https://www.genymotion.com/ทำการลง Genymotion ลงเครื่องครับเหมือนการติดตั้งโปรแกรมทั่วไปเลยครับ 4.4) ทดสอบโปรแกรม genymotion เริ่มต้นโดยการเปิดโปรแกรมครับ 4.5) เราสามารถเลือกได้ครับว่าเราอยากจะใช้โทรศัพท์รุ่นไหน และระบบปฏิบัติการ android ตัวไหนในการทดสอบแอปพลิเคชันครับผม* ผมเลือกเป็น google pixel 2 กด double click จะมีหน้าแบบนี้โผล่ออกมาครับผม หลักจากนั้นกด install เพื่อติดตั้ง emulator ตัวนี้ 4.6) หลังจากลงเสร็จมันจะไปโผล่ใน my installed devices ครับ ทีนี้เราก็เปิด emulator ได้แล้วครับโดยการกด double click ที่ชื่อของ emulator ครับ ของผมก็เป็น Google Pixel 2 * รอสักครู่ครับ จะได้หน้า emulator หน้าตาประมาณนี้โผล่ออกมาครับส่วนที่ 2 ลองใช้ Flutter กันดู1) พิมพ์ cmd ลงในช่องค้นหาครับผม และกด enter 2) command prompt จะโผล่ออกมาจากนั้นเราจะทำการสร้าง folder และสร้าง flutter app ผ่าน command prompt กันคัรบ 3) พอผมเปิดออกมา ณ ตอนนี้ผมอยู่ใน Drive C วิธีการย้ายไปยัง Drive D ก็คือการพิมพ์- " d: " 4) ต่อมาสร้าง folder ครับ โดยการพิมพ์- " mkdir flutter-workspace " 5) เราจะทำการไปยังโฟลเดอร์ flutter-workspace ครับโดยการพิมพ์- " cd flutter-workspace "ตอนนี้ผมอยู่ใน folder flutter-workspace เป็นที่เรียบร้อยครับ 6) ต่อมาเราจะทำการสร้าง แอปพลิเคชันกันครับโดยการพิมพ์- " flutter create myapp "* myapp คือชื่อแอปพลิเคชันของเราครับ เราสามารถตั้งเป็นอะไรก็ได้ครับหลังจากนั้นก็รอสักครู่ครับผม 7) หลังจากนั้นเราต้องทำการเข้าไปยังข้างในโฟลเดอร์ myapp ครับ โดยการพิมพ์- " cd myapp " 8) สิ่งต่อมาที่จะทำก็คือการเช็คว่า flutter ของเรายังขาดอะไรอีกบ้างไหมโดยการพิมพ์ - " flutter doctor "* ไม่ต้องสนใจปัญหาของ Android studio ครับผม** สำหรับใครที่ติดปัญหา android-license วิธีแก้ให้พิมพ์- " flutter doctor --android-licenses " 9) ต่อมาดูว่าตอนนี้มี emulator ตัวไหนพร้อมให้เราใช้บ้างโดยการพิมพ์- " flutter devices " * ถ้าไม่มี device ที่ connected เลยให้ลองทำการปิด emulator และเปิดใหม่ครับผม 10) ขั้นตอนสุดท้ายครับ ลองรันแอปพลิเคชันของเราโดยการพิมพ์ (อาจจะต้องประมาณ 1-2 นาทีครับผม)- " flutter run "เสร็จสิ้น !ตอนที่ 1 ของซีรี่ย์ก็คงจบลงแค่นี้ครับ ขอบคุณครับผมตอนที่ 2 จะเป็นการลงโค้ดครับ + กับการติดตั้ง IDE ครับผม