Workshop 4 : ใช้งาน 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



1.3 จะปรากฎชื่อผู้ใช้อยู่ทางด้านซ้ายมือของหน้าจอ



1.4 คลิกที่เมนู Docs ด้านบนซ้าย เพื่อเรียกใช้ docs.expo.dev



1.5 เลื่อนเมาส์ลงมาด้านล่าง คลิกที่ Try Expo in your browser

2 ทดสอบสร้าง Project บน Expo.dev

2.1 หน้าต่าง https://snack.expo.dev จะสร้าง project มาให้ดังรูป



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



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



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



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







2.6 ไฟล์ App.js เพิ่มการเรียกใช้รูปภาพ Image







2.7 เพิ่มข้อความที่ line ที่ 17 พร้อมเปลี่ยนสี ที่ line 42



2.8 Download project จะได้โฟลเดอร์ชื่อ exapp2-waraporn ให้นำโฟลเดอร์ดังกล่าว ส่งในไดร์ฟงาน







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