การสร้างและการติดตั้ง Mobile Application ด้วย Flutter

What is Flutter? 

Flutter เป็นเฟรมเวิร์กที่พัฒนาโดย Google ใช้พัฒนาแอปพลิเคชันบน Mobile ( Android, iOS ) เป็นหลัก ในตอนนี้ยังสามารถพัฒนาแอปพลิเคชันบน Windows MacOS และ Linux ได้อีกด้วย ปกติในปัจจุบันการพัฒนาแอปพลิเคชันบน Mobile จะมีอยู่ด้วยกัน 2 แบบได้แก่

• Native

• Hybrid

เราจะมาพูดถึงแบบแรกกันก่อนเลยก็คือ Native จะเป็นการพัฒนาแอปพลิเคชันที่เขียนแยกกันระหว่าง Android กับ iOS ใช้ภาษาต่างกันในการพัฒนา

ส่วนแบบ Hybrid จะเป็นการพัฒนาแอปพลิเคชันที่ใช้ภาษาเดียวกัน แต่สามารถสร้างออกมาได้ทั้ง Android และ iOS ปัจจุบัน แบบ Hybrid จะมีอยู่ด้วยกัน 2 เฟรมเวิร์ก ได้แก่ Flutter และ React Native

อ้าวแล้ว Flutter เป็นเฟรมเวิร์กแล้วจะใช้ภาษาโปรแกรมอะไรละ ?

โอเค Flutter จะมีพื้นฐานเป็นภาษา Dart ที่พัฒนาโดย Google นี่แหละโดยโครงสร้างของ Dart จะคล้าย ๆ กับ C, C++ และ Java โดยลักษณะจะเป็นแบบ Structure Programming แต่ก็ยังมีความเป็น OOP (Object Oriented Programming) หรือก็คือมี class และ inheritance ให้ใช้งานนั่นเอง

หลังจากที่เรารู้จัก Flutter แล้วว่าคืออะไร เรามาเริ่มติดตั้งและสร้างโปรเจกต์กันเลยดีกว่า

ในบทความนี้เราจะสอนติดตั้งสำหรับระบบระบบปฏิบัติการ Windows นะครับ

1. ขั้นตอนการติดตั้ง

Setting Up Flutter SDK

ให้เราเข้าไปดาวน์โหลด Flutter SDK

เสร็จแล้วทำการแตกไฟล์ .zip ให้เรียบร้อยหลังจากนั้นเราจะได้โฟลเดอร์ที่มีชื่อว่า Flutter แล้วก็ย้ายไฟล์ไปในโฟลเดอร์ที่เราต้องการ ยกตัวอย่างเช่น C:\src\

Set Up Environment Variables

เปิด Search Bar ของ Windows ขึ้นมา แล้วพิมพ์คำว่า env หลังจากนั้นให้เรากดเข้าไปที่ Edit the system environment variables

หลังจากนั้นจะขึ้นหน้าตาตามภาพประกอบด้านล่าง ให้กดไปที่หัวข้อของ Advanced แล้วกดไปที่ Environment Variables ตามที่วงกลมเอาไว้

หลังจากนั้นให้มองหา Variable ที่ชื่อ Path ใน System Variables แล้วกด Edit

ต่อมาให้เรากด New แล้วเพิ่ม Path ที่เราลง Flutter SDK เอาไว้ ยกตัวอย่างเช่น C:\src\flutter\bin เสร็จแล้วกด OK

Running Flutter Doctor 

เปิด Command Prompt ขึ้นมาเสร็จแล้ว พิมพ์คำสั่งว่า flutter –version จะได้ผลลัพธ์ตามภาพประกอบด้านล่าง

ผลลัพธ์ที่ได้จะบอกเราว่า ปัจจุบัน flutter sdk ที่ลงอยู่เป็นเวอร์ชันอะไร สำหรับในตัวอย่างปัจจุบันเป็นเวอร์ชัน 3.7.12 แต่ว่าถ้าเราพิมพ์แล้วไม่ขึ้นแสดงว่าเรา Set up ตัวของ Environment Variables Path ไม่ถูกต้อง

หลังจากนั้นให้ลองพิมพ์คำสั่ง flutter doctor ตัวผลลัพธ์ที่ได้จะบอกว่ายังขาดอะไรบ้าง

Install a Code Editor

Code Editor ที่ใช้ส่วนใหญ่จะมี

• Android studio

• VS Code

ในส่วนของบทความนี้จะแนะนำให้ลง Android Studio ดาวน์โหลดและติดตั้งให้เรียบร้อย

ต่อมาไปที่ Android Studio ไปที่ Configure>>Setting

ให้เลือกไปที่หัวข้อ Plugins ค้นหาคำว่า Flutter หลังจากนั้นทำการ Install ตัวของ Flutter

เป็นอันเสร็จเรียบร้อยสำหรับการติดตั้งตัวของ Android Studio

2.การสร้างโปรเจกต์ด้วย Flutter ด้วย Android Studio

เริ่มต้นไปที่ Android Studio กด New Flutter Project หลังจากนั้นเลือก Flutter SDK Path ตามที่ติดตั้งไว้ตอนแรกตามตัวอย่างจะเป็น C:\src\flutter\ ต่อมาก็จะขึ้นหน้าต่างให้เราตั้งชื่อรายละเอียดต่าง ๆ ให้เรียบร้อย ในส่วนของหัวข้อ Platforms สำหรับ Mobile Application ให้เลือกแค่ Android กับ iOS เสร็จแล้วกด Finish

เสร็จแล้วสำหรับการสร้าง Project หลังจากกด Finish จะเห็นตัวของ main.dart ขึ้นมาหน้าตาจะได้ตามภาพประกอบด้านล่าง

Setting Up an Emulator

การรัน Mobile Application สามารถรันได้ 2 แบบดังนี้

• เครื่องจริง

• Emulator

ในส่วนของบทความนี้จะแนะนำเป็นตัวของ Emulator บน Android Studio ให้กดไปที่ Device Manager ตรงมุมขวาด้านบนตามภาพประกอบด้านล่าง

หลังจากนั้นกดไปที่ Create Device ต่อมาเลือก Phone >> Pixel 3 แนะนำรุ่น Pixel 3 กด Next

System Image แนะนำเป็น API Level 30 กด Next

หลังจากนั้นกด Finish ก็จะเห็นตัวของ Emulator ที่สร้างมาตรง Device manager แล้วต่อมาให้กดเปิด Emulator ของเราขึ้นมา ตรง Icon Play 

Running Flutter Project

หลังจากเปิด Emulator ขึ้นมาแล้วจะเห็นชื่อของ ADB (Android Debug Bridge) บนแถบเครื่องมือ

ถ้าชื่อขึ้นแล้วสามารถกดรันโปรเจกต์ได้เลย ตรง Icon play สีเขียว ตามภาพประกอบด้านล่าง

รอสักพักตัวของ Emulator ของเราจะขึ้นแบบนี้

เสร็จแล้วววววว :D

เป็นยังไงกันบ้างสำหรับการสร้าง Flutter Project ครั้งแรก หวังว่าผู้อ่านจะได้รับรู้ และเข้าใจการสร้าง Flutter Project ในเบื้องต้นสำหรับระบบระบบปฏิบัติการ Windows หากผู้อ่านติดปัญหาตรงไหน สามารถแก้ปัญหาเบื้องต้นผ่านทาง Google ได้เลยนะ สำหรับวันนี้ขอขอบคุณทุกคนที่เข้ามาอ่านกันนะครับ

Have a nice day :>

แหล่งอ้างอิง

https://aws.amazon.com/th/what-is/flutter/

https://www.tamemo.com/post/172/dart-101-intro/

https://medium.com/@kaustubh8g/how-to-install-and-setup-flutter-to-run-your-first-app-a5dc71a669b

https://specphone.com/web/android-hack-adb-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/1652