e-book-บทที่ 3 ปรแกรมสำเร็จรูปในการพัฒนาโปรแกรมบนอุปกรณ์เคลื่อนที่

วิชา การเขียนโปรแกรมบนอปุ กรณเ์ คล่อื นทเี่ บื้องต้น
รหัส 20901-2005

หนว่ ยท่ี 3
เรื่อง โปรแกรมสำเร็จรูปในการพฒั นาโปรแกรมบนอุปกรณเ์ คลื่อนท่ี

โดย ... ครชู ำนาญการ วิทยาลยั เทคนคิ พงั งา
นางสมพร โมกษะรตั น์

หนว่ ยท่ี 3 โปรแกรมสำเรจ็ รปู ในการพฒั นาโปรแกรมบนอปุ กรณ์เคลอื่ นท่ี

ในบทนี่จะพูดถึงโปรแกรมโปรแกรมแรก กับ Visual Studio 2022 Community ซึ่งโปรแกรม Visual
studio 2020 นนั้ เปน็ โปรแกรมท่ีเปน็ เครือ่ งมอื ในการพฒั นาหรอื สร้างโปรแกรม ระบบต่างๆ บนฝง่ั Window หรือ
Mobile เป็น IDE ตัวนึงที่รองรับ Project ที่สร้างด้วยหลายๆภาษา เช่น C, C++ , C#, Python , GO โดยมีส่วน
เสริมหรือ Extension ทส่ี ามารถดาวนโ์ หลดเพม่ิ เตมิ ภายหลงั ได้

Visual Studio มีหลาย Editions โดยแต่ล่ะ Edition ก็จะต่างกันไม่มากเราจะเลือกใช้ Community
Editions เพราะเป็นรุ่นฟรีสำหรบั นักเรียนและนกั วิชาการอ่นื ๆ นกั พฒั นารายบุคคลโครงการโอเพนซอร์สและทีม
ทีไ่ มใ่ ช่องคก์ รขนาดเล็ก โดยมเี คร่ืองมือครบครนั พอสมควร
เนื้อหา

1. ลักษณะของโปรแกรม Visual Studio 2022 Community
2. การดาวนโ์ หลดและตดิ ตง้ั โปรแกรม Visual Studio 2022 Community
3. การเลือกและตดิ ต้งั SDK
1. ลกั ษณะของโปรแกรม Visual Studio 2022 Community
โปรแกรม Microsoft Visual Studio Professional 2022 เป็น โปรแกรมสำหรับผู้พัฒนาซอฟต์แวร์
(Developer Software) สำหรับผู้พัฒนา (Developer) ในรูปแบบของ IDE (Integrated Development
Environment) ที่ใช้ในการพัฒนาแอปพลิเคชันหรือเขียนโค้ดโปรแกรมเพื่อนำไปรันในระบบปฏิบัติการต่างๆ
โปรแกรมนถ้ี กู พฒั นาข้นึ มาเพอ่ื ออกแบบและพัฒนาแอปพลเิ คชนั จึงไดม้ ีการนำเทคโนโลยีทที่ นั สมัยประยุกต์เข้าไว้
ในโปรแกรมและเพือ่ ให้สามารถใช้โปรแกรมทำงานได้สะดวกสบายย่งิ ข้ึน มีการพฒั นาขั้นตอนการประมวลผล การ
แกไ้ ขจดุ บกพรอ่ ง (Debugging) โปรเจคให้สามารถทำงานไดง้ ่ายและรวดเรว็ ขนึ้
เป็นเคร่ืองมอื สำหรับการพัฒนา โปรแกรม/แอปพลเิ คชนั อันทรงประสิทธิภาพ สามารถสร้างแอปพลเิ คชัน
สำหรับอปุ กรณ์ท่ีหลากหลาย ไม่วา่ จะเปน็ เคร่อื ง PC, อุปกรณ์พกพา และเวบ็ แอปพลเิ คชัน ทมี่ ีระบบอินเทอร์เน็ต
คลาวดอ์ ย่เู บื้องหลงั และสามารถใช้พ้ืนฐานของแอปพลิคเคชันเดมิ หรอื องค์ความร้เู ดิมในการพฒั นาโปรแกรมท่ีมี
อยู่ เพื่อต่อยอดเป็นแอปพลิเคชันใหม่ๆ ที่สามารถทำงานได้ทั้งบนระบบ Android, iOS และ Windows ได้ด้วย
เครื่องมือในการพัฒนาโปรแกรมเพียงตัวเดียว และแน่นอนว่าโปรแกรมสำหรับนักพัฒนาตัวนี้ เป็นผลงานการ
พฒั นาของ บรษิ ทั Microsoft ท่ีเรารจู้ ักกนั เป็นอย่างดนี นั่ เอง
คุณสมบัติ และ ความสามารถ (Features)
1. กา้ วทันความตอ้ งการของยคุ ใหม่
โปรแกรมสำหรับพัฒนาโปรแกรม รุ่นโปร Microsoft Visual Studio ตอบความต้องการสำหรับการ
พัฒนาแอปพลิเคชันแบบ Cross-platform ที่รองรับทั้งการใช้งานบนเครื่องเดสก์ทอป และอุปกรณ์พกพาด้วย
เฟรมเวริ ์ก .NET MAUI พฒั นาหน้าเว็บแบบ Responsive ดว้ ยเฟรมเวริ ์ก Blazor ดว้ ยภาษา C#

นอกจากน้ี รวมถงึ การพัฒนา Debug และทดสอบ แอปพลเิ คชนั .NET และ C++ บนสภาพแวดล้อมการ
ทำงานของ Linux และยังสามารถทำการ Hot Reload กับการพัฒนาแอปพลิเคชัน .NET and C++ สามารถ
แกไ้ ขหนา้ เพจ ASP.NET ไดอ้ ยา่ งสะดวกรวดเร็วผา่ นการทำงานในมมุ มองแบบ Web Designer View

2. ยกระดับประสบการณก์ ารพฒั นาแอปพลิเคชนั บนอุปกรณ์พกพา
โปรแกรมสำหรับพัฒนาโปรแกรม รุ่นโปร Microsoft Visual Studio 2022 มาพร้อมกับฟีเจอร์ที่ช่วย
ยกระดับประสบการณ์การพัฒนาแอปพลิเคชันบนอุปกรณ์พกพา สร้างแอปพลิเคชันสำหรับ Android, iOS และ
Windows ไดอ้ ย่างไรข้ ้อจำกัด ด้วยเคร่ืองมือการพัฒนาสำหรบั มอื อาชีพ ฟีเจอรืการแชร์โคด้ และการ Debug
3. ลดความผิดพลาดในการเขียนโค้ด
โปรแกรมสำหรับพฒั นาโปรแกรม รนุ่ โปร Microsoft Visual Studio 2022 จะชว่ ยให้นักพฒั นาเขียนโคด้
ได้เร็วขึ้น และมีข้อผิดพลาดน้อยลง ด้วย IntelliSense ที่เป็นระบบตัวช่วยการเขียนโค้ด ที่จะช่วยให้การเขียน
คำส่ัง การประกาศตวั แปรต่างๆ รวมถึงสามารถแนะนำในการเปล่ียนชื่อฟงั ก์ชนั หรอื การเพม่ิ คา่ พารามิเตอร์ต่างๆ
เปน็ ต้น
4. เข้าใจโคด้ อย่างลกึ ซ้ึง
ด้วยเครอ่ื งมือ CodeLens ทีม่ อี ยู่ใน โปรแกรมสำหรบั พัฒนาโปรแกรม รนุ่ โปร Microsoft Visual Studio
2022 ทำให้เราค้นหารายละเอียดของการเปลี่ยนแปลงสำคัญ ๆ ที่เกิดขึ้นบนโค้ดที่พัฒนาขึ้นมาได้อย่างง่ายดาย
รวมถึงสามารถตรวจสอบผลกระทบที่เกิดขึน้ จากความเปลี่ยนแปลงน้นั และเมอ่ื มี Method ใดทีผ่ ่านการทำ Unit
Test ก็สามารถตรวจสอบขอ้ มูลอ้างองิ ทัง้ หมดเกย่ี วกบั การทำ Unit Test ไดอ้ ย่างงา่ ยดาย
5. ค้นหาบ๊ัก และแก้ไขอยา่ งรวดเรว็
โปรแกรมสำหรับพัฒนาโปรแกรม รุ่นโปร Microsoft Visual Studio 2022 มเี คร่ืองมอื อันทรงพลังสำหรับ
การค้นหาบั๊ก หรือข้อผิดพลาดที่เกิดขึ้นในการเขียนโปรแกรม เราสามารถสั่งหยุดการรันโค้ดได้ในจุดที่ต้องการ
ตรวจสอบบั๊ก ด้วยเทคนิค Breakpoint หรือสั่งหยุดการรันโค้ดดว้ ยเทคนิคอื่นๆ ได้ตามต้องการ หรือในกรณีที่รนั
โค้ดไปจนเลยจุดทีต่ ้องการตรวจสอบ หรือพบความเปล่ียนแปลงที่ไม่พึงประสงค์ ก็สามารถย้อนกลับไปยังบรรทัด
ของโคด้ ที่ต้องการได้ โดยทตี่ ้องเริ่มตน้ Session การ Debug ใหม่อกี ครั้ง
6. ใหบ้ ริการแอปพลเิ คชนั บนระบบคลาวด์ดว้ ย Azure
โปรแกรมสำหรับพัฒนาโปรแกรม รุ่นโปร Microsoft Visual Studio 2022 มีการผสานรวมกับบริการ
คลาวด์ Microsoft Azure เพื่อช่วยอำนวยความสะดวกในการเอา เว็บแอปพลิเคชัน หรือแอปพลิเคชัน ข้ึน
ให้บริการผ่าน การประมวลผลบนคลาวด์ (Cloud Computing)
โดยที่ผู้พัฒนา (Developer) สามารถพัฒนาแอปพลิเคชันแบบ Local ไม่ต้องล็อกอินเข้าระบบ Azure
ด้วยการใช้เครื่องมือ Emulator และเทมเพลตสำหรับการพัฒนาแอปพลิเคชันที่มีจัดเตรียมไว้ให้ และเมื่อพร้อม

แล้วที่จะนำแอปพลิเคชันขึ้นระบบคลาวด์ ก็เพียงแค่คลิก "คำสั่ง Publish" ไปยัง Azure ที่มีให้สั่งงานได้โดยตรง
จากโปรแกรม Visual Studio

7. รองรบั ภาษา และเฟรมเวริ ก์ ในการพัฒนาโปรแกรมทีห่ ลากหลาย
โปรแกรมสำหรับพัฒนาโปรแกรม รุ่นโปร Microsoft Visual Studio Professional 2022 รองรับการ
พฒั นา โปรแกรม/แอปพลิเคชนั ดว้ ยภาษา และเฟรมเวริ ก์ ท่หี ลากหลาย ครอบคลมุ ความต้องการของ Developer
ทกุ ระดบั อาทิ

➢ Windows
C#
VB
C++

➢ JavaScript
WPF
XAML

➢ Mobile
.NET
C++
Xamarin
XAML

8. ความต้องการของระบบ (System Requirements)
OS : - Windows 1 1 version 2 1 H2 or higher: Home, Pro, Pro Education, Pro for

Workstations, Enterprise, and Education (64-bit)
- Windows 10 version 1909 or higher: Home, Professional, Education, and

Enterprise (64-bit)
- Windows Server 2022: Standard and Datacenter (64-bit)
- Windows Server 2019: Standard and Datacenter (64-bit)
- Windows Server 2016: Standard and Datacenter (64-bit)

CPU : 1.8 GHz or faster 64-bit processor; Quad-core or better recommended. ARM
processors are not supported.

RAM : Minimum of 4 GB. of RAM. Many factors impact resources used; we
recommend 16 GB. RAM for typical professional solutions.

Hard disk space : Minimum of 850 MB. up to 210 GB. of available space, depending
on features installed; typical installations require 20-50 GB. of free space. We recommend
installing Windows and Visual Studio on a solid-state drive (SSD) to increase performance.

Video card : Video card that supports a minimum display resolution of WXGA (1,366
by 768); Visual Studio will work best at a resolution of 1,920 by 1,080 or higher.
2. การดาวน์โหลดโปรแกรม Visual Studio 2022 Community

รปู ที่ 3.1 หน้าตา่ งโปรแกรม Visual Studio 2022 Community
ก่อนใชง้ านโปรแกรมเราต้องทำการตดิ ตั้งโปรแกรม Visual Studio 2022 ไวบ้ นเครอื่ งคอมพวิ เตอร์รากอ่ นโดยมี
ขั้นตอนดังนี้

2.1 ดาวน์โหลด Visual Studio 2022 Community ไดท้ ี่ :https://visualstudio.microsoft.com/vs/
2.2 คลกิ Download Studio 2022 Community

รปู ท่ี 3.2 หนา้ เพจสำหรบั ดาวนโ์ หลด โปรแกรม

2.3 ไฟลส์ ำหรบั ติดตงั้ จะถกู เกบ็ ไวใ้ นตำแหน่งทเ่ี รากำหนด เชน่ ในโฟลเ์ ดอร์ ดาวน์โหลด เม่อื คลิกเข้าไปใน
โฟล์เดอรด์ าวน์โหลดจะเห็นไอคอนตัวติดตงั้ โปรแกรม

รูปที่ 3.3 ไอคอมโปรแกรมสำหรบั การตดิ ต้ัง
2.4 ดับเบ้ิลคลิกที่ Icon ตดิ ตง้ั โปรแกรม
2.5 เลอื กติดตง้ั ลักษณะเฉพาะ (Feature) ที่จะใชส้ รา้ ง project จากนั้นทำการติดต้งั เหมือนกบั โปรแกรม
ท่วั ๆไป สว่ น Features อน่ื ๆ สามารถท่ีจะติดต้งั เพิม่ เตมิ ทีหลงั ได้

รปู ที่ 3.4 Feature สำหรบั การติดต้งั

2.6 คลิกที่ป่มุ เลอื ก download All / then install

รปู ที่ 3.5 Feature สำหรบั การติดตัง้
2.7 รอดำเนนิ การติดต้งั จนกว่าโปรแกรมจะติดตงั้ เสรจ็ ส้ิน

รปู ท่ี 3.6 ตดิ ต้งั โปรแกรม Visual Studio Community 2022

2.8 หน้าตา่ งโปรแกรมเมื่อติดตง้ั โปรแกรมเสรจ็ ส้นิ แลว้

2.9 คลกิ ท่ีป่มุ รปู ที่ 3.7 หนา้ ตา่ งโปรแกรมเมื่อติดตั้งโปรแกรม

สรา้ งโปรเจคใหม่

2.9.1 คลกิ เลอื กภาษา C# 2.9.3 เลือก Project type เป็น Mobile

2.9.2 เลือก Platform เปน็ Android

2.9.4 กดป่มุ Next

รปู ที่ 3.8 สรา้ งโปรเจคใหม่

2.10 ตัง้ ชอ่ื โปรเจค

2.10.1 ต้ังชอ่ื โปรเจค๊
2.10.2 เลือกทเ่ี ก็บโปรเจ๊ค

2.10.3 คลกิ ปุ่ม Next

รปู ท่ี 3.9 ตง้ั ชอื่ โปรเจค
2.11 โปรแกรมจะกำหนด Framwork สามารถท่ีจะเปลีย่ น Version ได้
2.12 คลิกปุม่ Create

2.11

2.12

รปู ท่ี 3.10 กำหนด Framwork

2.13 หน้าต่างเร่มิ ตน้ ของโปรแกรมเมื่อสรา้ งโปรเจค็ เสร็จเรยี บร้อยแลว้

รูปที่ 3.11 หนา้ ต่างเร่มิ ตน้ ของโปรแกรม

3. การตดิ ตงั้ SDK
SDK ซึ่งย่อมาจาก Software Development Kit คือเครื่องมือที่เอาไว้สำหรับพัฒนาโปรแกรมหรือ

แอพพิเคชั่นบนระบบ Android OS ซึ่งทาง Google พัฒนาออกมาเพื่อแจกจ่ายให้นักพัฒนาแอพพลิเคชั่น หรือ
ผู้สนใจทั่วไปดาวน์โหลดไปใช้กนั โดยไม่มีค่าใชจ้ ่าย และน่ีกเ็ ปน็ หนงึ่ ในปัจจัยที่ทำให้แอพพลเิ คชั่นบนแอนดรอยด์น้ัน
เพิ่มขึ้น อย่างรวดเร็ว ซึ่งในชุด SDK นั้นจะมีโปรแกรมและไลบรารี่ตา่ งๆ ที่จำเป็นต่อการพัฒนาแอพพลิเคช่นั บน
แอนดรอยด์ อย่างเช่น Emulator ซึ่งทำให้ผู้ใช้สามารถสร้างแอพพลิเคชั่นและนำมาทดลองรันบนตัวอีมูเลเตอร์
กอ่ น โดยมีสภาวะแวดล้อมเหมือนมือถอื ท่ีรนั ระบบปฏบิ ตั กิ ารแอนดรอยดจ์ ริงๆ
ข้ันตอนการตดิ ตง้ั
3.1 คลิกที่เมนู Tools >> คลิกเลือก Android >> คลิกเลอื ก Android SDK Manager..

รูปท่ี 3.12 การตดิ ตัง้ SDK

3.2 เลอื ก Platforms SDK

รปู ท่ี 3.13 Platforms SDK

3.3 คลกิ ปุ่ม Apply Changes

รปู ที่ 3.14 Platforms SDK
โปรแกรมทำการติดต้งั SDK ลงบนเครอ่ื งคอมพิวเตอร์เป็นอันเสร็จสนิ้ แลน้ สามารถทำขั้นตอนต่อไปได้เลย
4. การเพมิ่ Emulator

Android Emulator ชว่ ยในการสรา้ ง Android Virtual Device (ADV) บนพีซี สามารถใช้สำหรบั เรียกใช้
Apps จาก Google Play Store บน Windows หรือ macOS สามารถติดตั้งใช้งานและถอนการติดต้ัง
แอปพลิเคชนั Android ไดเ้ ช่นเดยี วกบั อุปกรณ์ Android ทม่ี ีอยูจ่ ริง ทุกคนต้ังแตเ่ กมเมอรไ์ ปจนถึงนักพัฒนาแอป
Android สามารถใช้ได้ ช่วยให้นักพัฒนา Android ได้รับความสะดวกในการทดสอบแอปบนอีมูเลเตอร์เพียงตัว
เดยี วโดยเปลี่ยนโปรไฟลอ์ ปุ กรณ์แทนทจ่ี ะสลับไปมาระหว่างอุปกรณ์จริงหลายเครอื่ ง

ขอ้ ดีของการใช้ Android Emulator
1. ประโยชนใ์ นด้านการเล่นเกม
2. จอใหญก่ ว่า เห็นชัดกวา่
3. การควบคุมท่แี มน่ ยำ 100% ด้วยเมาสแ์ ละคียบ์ อร์ด
4. เกม Android เฉพาะมอื ถอื บนพซี ี
5. เลน่ หลาย ๆ เกมในเวลาเดยี วกัน

ประโยชนใ์ นดา้ นอน่ื ๆ
1. ไมต่ อ้ งกังวลเร่อื งแบตเตอรร์ ี่
2. ไม่จำเปน็ ต้องใช้โทรศํพท์ราคาแพง
3. ทำทุกสง่ิ ไปได้พรอ้ มๆกัน
4. ปราศจากการโดนขัดจงั หวะด้วยสายเรียกเข้าหรอื ขอ้ ความ

ข้นั ตอนการติดตั้ง Android Emulator
4.1 . คลกิ ทีเ่ มนู Tools >> Android >> คลิกเลือก Android Device Manager..

รปู ที่ 3.15 การตดิ ตั้ง Android Emulator

4.2 คลิกที่ปมุ่

รปู ท่ี 3.16 เพิม่ Android Emulator

4.3 เลอื กร่นุ ของ Android Emulator ท่ีต้องการ
4.4 คลกิ ปุ่ม Create

รูปท่ี 3.17 ร่นุ ของ Android Emulator
4.5 เมื่อติดตงั้ Android Emulator เสร็จสน้ิ แล้วใหค้ ลกิ ที่ปุ่ม Run Anyway เพื่อเปดิ การทำงาน
ของ Android Emulator

รูปท่ี 3.18 ติดตั้ง Android Emulator

รูปที่ 3.19 Android Emulator

4.6 คลิกที่ปุ่ม เพอ่ื รันโปรเจ็ค

ขอ้ สงั เกตุ กรณีท่ีเราติดตั้ง Android Emulator ไวห้ ลายตัวเราต้องทำการเลอื กรุ่นทจ่ี ะทำการรัน

ก่อนเสมอ

รูปท่ี 3.20 รนั โปรเจค็

4.7 โปรเจ็ครนั ได้ไม่มีข้อผดิ พลาด และ Android Emulator แสดงขอ้ ความวา่ “Hello Android“

รูปที่ 3.21 ผลการรนั โปรเจ็ค
เป็นอนั เสร็จสิน้ น่ันคอื โปรแกรมสามารถรนั และทำงานไดป้ กติ