hand lthand lbhand chand rt
18Jul, 2023
Language blog :
Thai
Share blog : 
18 July, 2023
Thai

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

By

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

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

What is Flutter? 

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

เราจะมาพูดถึงแบบแรกกันก่อนเลยก็คือ 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

Setting Up Flutter SDK

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

 

Set Up Environment Variables

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

Set Up Environment Variables

 

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

Environment Variables

 

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

Path in System Variables

 

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


Running Flutter Doctor 

 

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

Command Prompt

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

 

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

flutter doctor

Install a Code Editor

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

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

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

Android Studio

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

Plugin Flutter

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


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

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

New project

 

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

main.dart

 

Setting Up an Emulator

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

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

  • Emulator

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

Setting Up an Emulator

 

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

Select hardware

 

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

System Image

 

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

finish

 

Running Flutter Project

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

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

Running Flutter Project

 

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

Android 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

 

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

01
October, 2023
JS class syntax
1 October, 2023
JS class syntax
เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

By

4 mins read
Thai
01
October, 2023
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
1 October, 2023
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
01
October, 2023
จัดการ Array ด้วย Javascript (Clone Deep)
1 October, 2023
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact use bg 2
Contact use bg 3
Contact use bg 4
Contact use bg 5
Contact use bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.