Home / Flutter  / เริ่มต้นการพัฒนาแอพฯ Cross Platform ด้วย Flutter ของ Google การติดตั้ง

เริ่มต้นการพัฒนาแอพฯ Cross Platform ด้วย Flutter ของ Google การติดตั้ง

บทเรียนสำหรับผู้ที่ต้องการพัฒนาแอพพลิเคชัน Cross-Platform จาก Google ที่ชื่อว่า Flutter ซึ่งสามารถ Publish แอพพลิเคชันของเราได้ทั้ง iOS และ Android

นานมากที่เราจะเห็นภาษาของ Google ที่ชื่อว่า dart ปรากฏมานานแม้แต่ใน Google Open Source มันก็ยังดูลึกลับ ปล่อยให้ Go Lang มาชิงความเด่นก่อน แต่ตอนนี้เราจะมีโอกาสได้สัมผัสเจ้า dart ได้ดีขึ้น ผ่าน SDK ที่ทาง Google ยืนยันว่ามันทำงานได้ดีเป็น Cross-Platform ที่เทียบเท่า React และ ionic เจ้านั่นก็คือ Flutter ซ้ำยังทำงานได้สบายๆ กับ Firebase ด้วยนะ

Flutter เป็นชุดพัฒนาซอฟต์แวร์ (Software Development Kit) หรือ SDK ภาษาใต้ภาษา dart ที่นักพัฒนาสามารถสร้างแอพพลิเคชันแบบ Cross-Platform (เขียนที่เดียว รันได้หลากหลาย) เจาะจงบนแพลตฟอร์มของ Android และแพลตฟอร์มของ iOS ที่ถูกใจคือมันรองรับ UI ของ Material Design นี่แหละครับที่ถูกใจเลย

ไม่พูดมากเจ็บคอ มาเริ่มติดตั้งกันดีกว่า

สำหรับ Windows

ไปดาวน์โหลด Stable SDK ที่ https://flutter.io/docs/get-started/install 

หรือกด Link นี่เลย https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip

ทำการแตกโฟลเดอร์ zip วางตำแหน่งของ Location ตัว Flutter SDK ของเราไว้ใน Path ที่เราต้องการเช่น C:\src\flutter

ข้อห้าม อย่า! วางในโฟลเดอร์ C:\Program Files\

เปิดไฟล์ bin/flutter.bat ในโฟลเดอร์นั้นต่อมาตั้งค่า Environment ของ Windows เรา

ตั้งค่าเรียก Path ไปยังโฟลเดอรืที่เราเก็บ Flutter ไว้ ตามรูป:

รันคำสั่ง นี้ใน command prompt:

เป็นอันเสร็จ

สำหรับ Mac OSX

เริ่มต้นให้เปิด Terminal ขึ้นมาเราจะทำการ Clone Git Repository (ถ้าไม่มี Git ในเครื่องไปเรียนมาซะ ถือว่า บาปหนา!) รันคำสั่ง:

หรือจะดาวน์โหลดเอาก็ได้ที่ https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.0.0-stable.zip

git clone -b dev https://github.com/flutter/flutter.git

รันคำสั่งต่อไปนี้

เข้าไปรันไฟล์ flutter/bin/flutter.bat

ถ้าจะทำการตั้งให้ค่านี้อยู่ตลอดเวลาเปิด Terminal ใหม่โดยไม่ต้อง ชี้ Path ให้รัน

ต่อมาใส่ค่านี้ลงไปใน .bash_profile

โดยแทนค่า [PATH_TO_FLUTTER_GET_DIRECTORY] เป็น Path ของคุณ ในตัวอย่างของผมคือ documents/flutter

เป็นอันเสร็จ ลองทดสอบโดยพิมพ์

แล้วลองรันคำสั่ง

เสร็จแล้วให้เช็ค SDK อีกทีโดยการรัน คำสั่งข้างล่างอีกที

ส่วนมากจะเจอ อะไรเล็กน้อยก็แก้ไขไปเช่น:

ถ้าหากว่าลงตัว SDK ของ Flutter เป็นที่เรียบร้อยแล้ว ต่อมาเราจะมาตั้งค่า Editor ของเราหน่อยแล้วกัน ในตัวอย่างนี้ผมใช้ Visual Studio Code ซึ่งเราต้องเพิ่ม Extension หนึ่งที่จะทำให้เราเขียน Editor ของ dart ได้

กดที่ Link: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

เอาล่ะเปิด AVD จาก Android Studio ขึ้นมาก่อน, หลังจากนั้น รันคำสั่งนี้:

หลังจากนั้นลองทดสอบโดย

ดูว่ารันได้ไหม:

เรียบร้อย:

ปัญหา สำหรับ OSX บน Mac เพิ่มเติม

หาก Flutter Command not Found ทั้งที่ทำตามไปแล้วให้ลอง:

ใส่

แล้วเซฟ ปิด Terminal หลังจากนั้น

แค่นั้นครับ 🙂

Comments

POST TAGS:

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.