วงแหวนเว็บ

ติดตั้ง Flutter และ Android SDK แล้วเริ่มสร้างแอพ

บทความนี้เกี่ยวกับการติดตั้งซอฟต์แวร์ที่สำคัญกับการพัฒนา Application ด้วย Flutter Framework และเริ่มสร้างโปรเจคแรกขึ้นมา

ติดตั้ง Flutter และ Android SDK แล้วเริ่มสร้างแอพ

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

บทความนี้จะขอพุดถึงการเริ่มใช้งานแอพเฟรมเวิร์คตัวหนึ่งที่มาแรงและผู้พัฒนาคือ Google นั่นก็คือ Flutter นี่เอง โดยเจ้า Flutter นี่เป็น UI เฟรมเวิร์ค แบบ Open Source ที่ Google เริ่มปล่อยออกมาเมื่อปี 2017 นี่เอง การพัฒนาแอพใช้ภาษา Dart สามารถรันได้บนหลาย OS เลย บทความนี้จะขอยกตัวอย่างการติดตั้ง Flutter บน windows 10 ละกันนะ (เนื่องจากผู้เขียนใช้อยู่) เพื่อไม่ให้เสียเวลา เรามาอยู่ Required Spectification ของคอมที่จะลงก่อนเลย

Item requirement
OS Windows 7 ขึ้นไป, สถาปัตยกรรมชนิด 64 bit หรือ x86-64 based
Disk Space 1.32 GB ขึ้นไป (ไม่รวม IDE/tools)
Tools Windows PowerShell 5.0 ขึ้นไป, Git เวอร์ชั่น 2 ขึ้นไป ติดตั้งให้เรียบร้อยก่อนลง Flutter

ขั้นตอนที่เราจะทำต่อไปนี้ จะเริ่มจากการติดตั้ง Software ต่างๆ จนไปถึง เปิดแอพ Flutter ได้สำเร็จ ขออธิบายเรียงตามลำดับขั้นตอนดังนี้

ติดตั้ง Flutter

เมื่อเครื่องพร้อม ให้เรา Download ไฟล์ ที่นี่

Windows install
How to install on Windows.
https://flutter.dev/docs/get-started/install/windows

เมื่อดาวน์โหลดมาแล้ว ให้ทำตามขั้นตอนต่อไปนี้

1.)แตกไฟล์ที่ดาวน์โหลด แล้วเข้าไปในโฟลเดอร์เพื่อเอาไฟล์ทั้งหมดออกมา (Ctrl+x ก็ได้)
2.)สร้างโฟลเดอร์ตาม path แบบนี้ เช่น C:\src\flutter แล้วเอาไฟล์ที่ได้ไปวาง (ให้สร้าง path ใหม่ ห้ามวางใน C:\Program Files\)

Tip : ถ้าไม่อยากดาวน์โหลดจากหน้าเว็บ ก็เปิด Windows PowerShell แล้วใส่คำสั่งนี้แทน

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

3.)กดปุ่ม Start ไปที่ช่อง search หรือถ้าไม่มีก็เข้า Settings > ใส่ env ที่ช่อง search > เลือก Edit The System Environment Variables ไปที่ Advanced กดปุ่ม Environment Variables
4.)ดูตรง User variables คลิกที่ Path แล้วกดปุ่ม Edit… จากนั้น กดปุ่ม New
5.)ไปที่โฟลเดอร์ตามข้อ 2 กดเข้าไปจนถึง flutter\bin แล้วก็อป path มาวาง แล้วกด OK เท่านี้ก้เรียบร้อยสำหรับการ set up path
6.)เปิด Windows PowerShell ใส่คำสั่ง

C:\src\flutter>flutter doctor

7.)ตัว command จะเช็คสถานะการติดตั้ง Flutter ให้ แล้วจะพ่นข้อความออกประมานนี้

Downloading Material fonts...                                       0.7s
Downloading Gradle Wrapper...                                       0.3s
Downloading package sky_engine...                                   0.3s
Downloading flutter_patched_sdk tools...                            0.9s
Downloading flutter_patched_sdk_product tools...                    0.6s
Downloading windows-x64 tools...                                    1.8s
Downloading windows-x64/font-subset tools...                        0.4s
Downloading android-arm-profile/windows-x64 tools...                0.3s
Downloading android-arm-release/windows-x64 tools...                0.3s
Downloading android-arm64-profile/windows-x64 tools...              0.3s
Downloading android-arm64-release/windows-x64 tools...              0.3s
Downloading android-x64-profile/windows-x64 tools...                0.3s
Downloading android-x64-release/windows-x64 tools...                0.3s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[!] Android Studio (not installed)
[!] VS Code (version 1.52.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

แปลความได้ว่า ตอนนี้มีการติดตั้ง Flutter แล้ว แต่ยังไม่มีการติดตั้ง Android SDK (Android Toolchain), Android Studio, VS Code และสร้าง Android Virtual Device หรือ AVD (Connected device) ซึ่งต่อไปเราจะทำการติดตั้ง Android Studio ลงในเครื่องก่อนเพื่อใช้งาน Android Emulator เปิดอุปกรณ์ Android จำลองขึ้นมา

ติดตั้ง Android Studio

https://www.android.com/intl/th_th/

สามารถเข้าไปดาวน์โหลดไฟล์ได้ที่นี่

Download Android Studio and SDK tools | Android Developers
<!-- hide description -->
https://developer.android.com/studio

เราวางแผนเอาไว้ว่าจะใช้ VS Code ในการพัฒนาแอพ ในที่นี้จึงไม่ตั้งค่า Android Studio แต่จะใช้แค่ Android Emulator แต่ก่อนอื่นต้องติดตั้ง Android SDK และยอมรับเงื่อนไขของ Android License เสียก่อน

Android Toolchain

แบ่งขั้นตอนออกมาเป็น 2 ส่วนคือ ส่วนติดตั้ง Android SDK สำหรับเป็น Platform ที่บรรจุ Library ต่างๆที่ใช้พัฒนาแอพ Flutter และส่วนติดตั้ง Android License ทำให้ machine ยอมรับเงื่อนไขของ Android

Android SDK

วิธีการตั้งค่า

เปิด Android Studio แล้ว ไปที่ Configure > SDK Manager
ตรง Appearance & Behavior กดที่ System Settings > Android SDK

Appearance & Behavior > System Settings > Android SDK

เลือกเวอร์ชั่นที่ต้องการ โดยคลิกที่ Check Box

Copy path ตรง Android SDK Location เอาไว้

ตรง Plugins ให้หาปลั๊กอินที่ชื่อ Flutter แล้วกด Install

Flutter plugin

โปรแกรมจะแจ้งว่า ปลั้กอิน Flutter ต้องการให้เราลง Dart ด้วย ก็กด Install ไป

Install ไปด้วย

เปิดโปรแกรม Edit The System Environment Variables ขึ้นมา ไปที่ Advanced กดปุ่ม Environment Variables

ตรง User variables ถ้าหากยังไม่มีการเพิ่ม path ของ Android SDK ให้กด New

ตรง Variable name ใส่ ANDROID_SDK_ROOT และ ตรง Variable value ใส่ path ที่ copy มาจาก Android SDK Location เสร็จแล้วกด OK

วาง path ลงไป

ตรง User variables คลิกที่ Path แล้วกดปุ่ม Edit

วาง path ที่ copy มาจาก Android SDK Location สามอัน

อันแรก พิมพ์ \tools ต่อท้าย

Android\Sdk\tools

อันที่สอง พิมพ์ \tools\bin ต่อท้าย

Android\Sdk\tools\bin

อันสุดท้าย พิมพ์ \platform-tools ต่อท้าย แล้วกด OK

Android\Sdk\platform-tools

เมื่อตั้งค่าเสร็จแล้ว ลองเช็คสถานะจากคำสั่ง flutter doctor อีกครั้ง จะได้สถานะแบบนี้

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 4.1.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

มีการลง Android SDK แล้วแต่ยังไม่มี License (Android licenses not accepted) มาติดตั้งกันต่อเลยฮะ

ลง Android License

เราต้องลง License เพื่อให้เครื่องเราสามารถเข้าถึง Android ได้ โดยต้องติดตั้งเพื่อยอมรับเงื่อนไขของ Android License ทำได้โดยการใช้คำสั่ง

flutter doctor --android-licenses

ระบบจะพ่นข้อความออกมาเยอะมากๆ โดยให้เรากด Y (Yes) ไปทุกๆครั้งที่มีคำถาม

เมื่อเสร็จแล้ว ให้เช็คการติดตั้งอีกที โดยใส่คำสั่ง flutter doctor
จะมีอัพเดทการติดตั้งออกมาเป็นแบบนี้

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

การติดตั้ง License เป็นอันเรียบร้อย ขั้นตอนต่อไป ทำการตั้งค่าเพื่อสร้าง AVD เพื่อใช้ดป็นเครื่องจำลอง (Emulator) กันครับ

สร้าง Android Virtual Device (AVD)

เป็นการติดตั้งเครื่องจำลอง Android ใช้เวลาที่เราจะเทสต์รันแอพของเรานั่นเองครับ

ขั้นตอนการตั้งค่าและเปิดใช้งาน

เปิด Android Studio แล้ว แล้วไปที่ Configure > AVD Manager
คลิกที่ Create Virtual Device

+ Create Virtual Device โลด

ใน Category เลือก Phone แล้วเลือก pixel ที่ต้องการ จากนั้นกด Next

ในที่นี้เลือก Pixel 4 นะ

คลิก Download รุ่นระบบที่ต้องการ จากนั้นกด Next

เลือกรุ่น Android ที่ต้องการได้เลย

รอการติดตั้งจนเสร็จ แล้วกดปุ่ม Finish

รอจนแถบฟ้าเต็ม แล้วกด Finish

ถึงขั้นตอนนี้ เราสามารถกดใช้งานเครื่องจำลองได้แล้ว โดยกดเครื่องหมายสามเหลี่ยมที่อยู่ตรง Actions

กดปุ่มสามเหลี่ยมตรงคอลัมน์ Actions เพื่อเปิดเครื่องขึ้นมา
ทาดา!!! มือถือมาแว้ว

เช็คสถานะกันหน่อยซิ ที่หน้าจอ terminal ใช้คำสั่ง flutter doctor อีกที ดูดิเป็นไง

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (1 available)

แบบนี้แปลว่า สร้างและเชื่อมต่อ AVD เรียบร้อย

ติดตั้ง VS Code

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
ดาวน์โหลดได้ที่นี่

ทำการติดตั้ง VS Code เพื่อใช้เป็น Code Editor

เมื่อติดตั้งเสร็จแล้ว ลองใช้คำสั่ง flutter doctor เพื่อเช็คสถานะการติดตั้งอีกครั้ง

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.52.1)
[✓] Connected device (1 available)

โอเค แบบนี้ถือว่าติดตั้งด้วยความเรียบร้อยดี จากนั้นเราไปสร้างโปรเจคกันฮะ

สร้างโปรเจค Flutter และ build บน AVD

สร้างโฟลเดอร์ แล้วเข้า path ไปที่โฟลเดอร์นั้น จากนั้นใช้คำสั่ง

flutter create <project_name>

ในที่นี่ เราใช้ชื่อโปรเจคว่า mybasicapp นะ

รอจนการสร้างไฟล์ต่างๆสำเร็จเสร็จสิ้น จนเห็นข้อความขึ้นมาแบบนี้

Running "flutter pub get" in mybasicapp...                          2.6s
Wrote 71 files.

All done!
[✓] Flutter: is fully installed. (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)
[✓] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 30.0.3)
[!] Android Studio: is partially installed; more components are available. (version 4.1.0)
[✓] VS Code: is fully installed. (version 1.52.1)
[✓] Connected device: is fully installed. (1 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd mybasicapp
  $ flutter run

Your application code is in mybasicapp\lib\main.dart.

กดเข้าไปดูไฟล์ที่สร้าง ผ่าน VS Code

จากนั้น กด Shift + Ctrl + P เพื่อใส่คำสั่ง เลือก Flutter: Launch Emulator

เลือก Flutter: Launch Emulator

จะมี list ให้เลือก Emulator เราก็เลือกอันแรก เพราะสร้างไว้แค่เดียว

เลือกเครื่องที่เราสร้างไว้เมื่อกี้

จากนั้น เครื่องจะทำการเชื่อมต่อโปรเจคกับ Emulator ให้ อาจจะมีหน้าต่าง Security Alert ขึ้นแบบนี้สำหรับการใช้งานครั้งแรก ให้กด Allow access ไป

ถ้าเจอแบบนี้ ก็กด Allow access

เมื่อเชื่อมต่อเสร็จแล้ว ให้กด F5 เพื่อเริ่ม build แอพ บนเครื่องจำลอง

รอจนเสร็จจะได้แอพ Flutter บนเครื่องแล้วเรียบร้อย

แอพมาแน้ววว โดยปรากฏตัวเป็น Default App กดเพิ่มตัวเลข

จบการติดตั้งไปจนถึงสร้างแอพ Flutter ครั้งแรก ต่อไปเราจะเริ่มสร้างแอพขึ้นมาเป็นรูปแบบไหน ก็ทำได้ โดยการแก้ไข Default App ให้เป็นแบบที่เราต้องการ ซึ่งเราจะเห็นว่า พื้นฐานโค้ดของแอพใช้ภาษา Dart เนอะ ดังนั้น จึงควรรู้พื้นฐานภาษาก่อนจะไปเริ่มทำแอพนะฮะ แล้วพบกันบทความหน้า

Reference

Flutter


Share Tweet Send
0 Comments
Loading...
You've successfully subscribed to Toupawa Studio
Great! Next, complete checkout for full access to Toupawa Studio
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.