Expo Workshop 1 : ใช้งาน Expo บน browser

หากต้องการเขียนแอพบน Browser ก็สามารถทำได้ โดยเรายังคงใช้งาน Expo.dev

1. Sign Up Expo.dev

1.1 เข้าสู่เว็บไซต์ https://expo.dev คลิกที่ Sign Up มุมบนขวา เพื่อเข้าใช้งาน expo .dev (สามารถ save project ได้)

1.2 กรอกข้อมูล Email Username และ Password ให้ครบถ้วน จากนั้นคลิก Sign Up
(Capture หน้าจอ)



1.3 จะปรากฎชื่อผู้ใช้อยู่ทางด้านซ้ายมือของหน้าจอ คลิกที่ชื่อผู้ใช้ด้านล่าง เลือก Docs
(Capture หน้าจอ)



1.4 หน้าต่าง docs.expo.dev จะปรากฎ เลื่อนเมาส์ลงมาด้านล่าง คลิกที่ Try Expo in your browser
(Capture หน้าจอ)



2. ทดสอบสร้าง Project บน Expo.dev
2.1 หลังจากคลิกที่ Try Expo in your browser จะปรากฎหน้าต่าง https://snack.expo.dev เพื่อสร้าง project ดังรูป
(Capture หน้าจอ)



2.2 ตั้งชื่อ project แรกบน browser ชื่อ exapp2- ตามด้วยชื่อของนักศึกษา ตัวอย่างจะใช้เป็น exapp2-waraporn
(Capture หน้าจอ)



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



2.4 เปิดไฟล์ App.js ขึ้นมาแล้วแก้โค๊ด line ที่ 13 พร้อมเปลี่ยนเป็นชื่อของนักศึกษา
(Capture หน้าจอ)



2.5 ซ้ายมือที่โฟลเดอร์ assets ให้ Import files รูปของนักศึกษา จำนวน 1 รูป
(Capture หน้าจอ)



2.6 ไฟล์ App.js เพิ่มการเรียกใช้รูปภาพ Image
(Capture หน้าจอ)



2.7 ที่ line 15 ลบ tag card ทิ้ง จากนั้นพิมพ์ tag Image เพื่อเพิ่มรูปภาพพร้อม
(Capture หน้าจอ)



2.8 กำหนดคุณสมบัติ ปรับขนาดของรูป เนื่องจากรูปที่เรียกใช้มีขนาดไฟล์ไม่เท่ากัน
(Capture หน้าจอ)



2.9 เพิ่มการจัดตำแหน่งรูป ที่ line 27
(Capture หน้าจอ)



2.10 เพิ่มข้อความด้วย tag text ที่ line 19
(Capture หน้าจอ)



2.11 กำหนดคุณสมบัติ สีข้อความสีน้ำเงิน ที่ line 40
(Capture หน้าจอ)



2.12 Download project โดยคลิกที่สัญลักษณ์ Download as zip จะได้โฟลเดอร์ชื่อ exapp2-waraporn ให้นำโฟลเดอร์ดังกล่าว ส่งในไดร์ฟงาน







2.13 สามารถนำโฟลเดอร์ที่ได้ ไปใช้งานกับ VS code ได้ค่ะ