VScode Workshop 2 : สร้าง และทดสอบแอพพลิเคชันด้วยอุปกรณ์จริง

จุดเด่นของการสร้าง React Native แอพพลิเคชัน ผ่าน Expo คือ มีแพ็กเกจ หรือโมดูลต่างๆ ให้เลือกใช้งานมากมาย และ Expo ยังสามารถทดสอบกับอุปกรณ์จริงได้อย่างง่ายดาย

1. ทดสอบแอพพลิเคชันด้วยอุปกรณ์จริง

1.1 เปิด VS Code และเรียกโปรเจคที่ทำไว้ในใบงานก่อน ไปที่คำสั่ง View เลือก Terminal หน้าต่าง Terminal จะปรากฎด้านล่าง และแสดงพาธที่อยู่ของโปรเจค C:\Users\cmtc\test-first-waraporn (แล้วแต่พาธที่คุณเลือกไว้)


1.2 จากนั้นพิมพ์ npm start แล้วกดปุ่ม Enter


1.3 จากปรากฎ URL และ QR Code สำหรับเชื่อมต่อกับอุปกรณ์


1.4 ดาวน์โหลดแอพ Expo Go บน App Store หรือ Play Store (ใบงานนี้ใช้ expo sdk 54)


1.5 เข้าใช้งานแอพ Expo Go ดังรูป โดยให้เราเลือกพิมพ์ Enter URL manually หรือ Scan QR Code อย่างใดอย่างหนึ่ง (หากเลือก URL ให้พิมพ์ exp://.... ให้ตรงกันกับที่ปรากฎข้อ 1.4) และตัว Wifi ที่เลือกใช้ต้องเป็นตัวเดียวกันทั้ง PC และ Smartphone จึงจะสามารถเชื่อมต่อกันได้

1.6 หากเชื่อมต่อกันได้ แอพจะแสดงชื่อโปรเจคดังกล่าวขึ้นมา จากนั้นกดที่โปรเจค จะรันเข้าสู่หน้าต่างแรกของโปรเจค และแสดงข้อความดังรูป


2 เรียกใช้งานคอมโพเนนต์ Component

2.1 ที่โปรเจคบน VScode เปิดไฟล์ App.js ขึ้นมา จากนั้นเพิ่มข้อความที่ line 8 (เป็นชื่อคุณเอง ตัวอย่างนี้ใช้ Miss Waraporn Panfa) ดังรูป


2.2 ทำการบันทึกไฟล์ จากนั้นหน้าแอพจะรีเฟรชใหม่อัตโนมัติ ดังรูป


2.3 เข้าไปดาวน์โหลดไฟล์รูป บนไดรฟ์รายวิชา ที่โฟลเดอร์ใบงานชื่อ vscode.jpg (นำไฟล์มาใส่ที่โฟลเดอร์ assets)


2.4 เพิ่ม Image คอมโพเนนต์ที่ใช้แสดงรูปภาพ โดยใช้แท็ก Image ที่ line 2 และเรียกใช้ที่ line 9



2.5 ทำการบันทึกไฟล์ จากนั้นหน้าแอพจะรีเฟรชใหม่อัตโนมัติ ดังรูป


2.6 จะเห็นได้ว่าไฟล์รูปมีขนาดใหญ่เกินไป ต้องทำการปรับลดให้เหมาะสมกับหน้าจอแอพ โดยตั้งชื่อพร๊อพเพอร์ตี้ชื่อ logo เพื่อระบุขนาดของรูป และเรียกใช้งาน StyleSheet (line 9 และ 12)



2.7 ทำการบันทึกไฟล์ จากนั้นหน้าแอพจะรีเฟรชใหม่อัตโนมัติ ดังรูป


2.8 เพิ่ม Button คอมโพเนนต์แสดงการกดปุ่ม โดยใช้แท็ก Button และเพิ่มพร๊อพเพอร์ตี้ชื่อ textH1 และ textH2 กำหนดสี และขนาด font ตัวอักษร




2.9 ทำการบันทึกไฟล์ จากนั้นหน้าแอพจะรีเฟรชใหม่อัตโนมัติ ดังรูป