Basic React Native with Expo

รายละเอียดหลักสูตร

Section 1: การเตรียมเครื่องมือและความพร้อมทั้งบน Mac และ Windows

• แนะนำสเปกและคุณสมบัติเครื่องที่จะติดตั้งเครื่องมือสำหรับ React.JS / React Native
• ขั้นตอนการติดตั้ง Node.JS
• ขั้นตอนการติดตั้ง Visual Studio Code (VS Code) และส่วนเสริม (Extension) ที่จำเป็นสำหรับ React Native

Section 2: เริ่มต้นสร้างและทดสอบ React Native App ด้วย Expo

• ภาพรวมการพัฒนาแอพด้วย React Native
• การสร้างขึ้นโปรเจ็กต์ React Native ด้วย Expo CLI
• แนะนำโครงสร้างโปรเจ็กต์ React Native Expo
• การทดสอบรันแอพบน Emulator (Android/iOS)
• การรันแอพทดสอบบนเครื่องจริง (Android)

Section 3: การทำ Navigation ด้วย Expo Router แบบ File-based routing

• What is Expo Router?
• app directory
• Create a route
• File name conventions
• _layout file
• Root layout
• Stack navigator
• Navigating between routes
• Groups
• Tab navigator
• Not found routes
• Dynamic routes
• Access parameters from dynamic segments

Section 4: การออกแบบ UI ด้วย Styling with NativeWind

• What is NativeWind?
• Install NativeWind in Expo
• React Native concepts
• Units
• Platform Differences
• Style Specificity
• Safe Area Insets
• Customization
• Configuration
• Content
• Theme
• Colors
• Layouts
• Flexbox & Grid
• Spacing
• Sizing
• Typography
• Background
• Border
• Effect

Section 5: เรียนรู้ UI Core Component ต่าง ๆ ใน React Natvie

• รู้จัก Component View
• การทำงานกับ Component Text
• ใช้งาน Component Button
• เรียนรู้และใช้งาน Component ในกลุ่ม Touchable
• การใช้งาน Component Alert
• การใช้งาน Component Modal แสดง Popup
• การใช้งาน Component TextInput รับข้อมูล
• ใช้งาน Component Switch สำหรับตัวเลือกรายการ
• แสดงรูปภาพด้วย Component Image
• ใช้งาน Component ScrollView, FlatList และ SectionList
• แนะนำการใช้งาน Iconicons

Section 6: การเข้าถึง API ของระบบ

• การตรวจสอบขนาดหน้าจอ
• ทิศทางการหมุนหน้าจอ
• ตรวจสอบสถานะการเชื่อมต่อ Internet
• การ link ไปยังแอปอื่นๆ
• การจัดเก็บข้อมูลด้วย AsyncStorage

Section 7: การทำงานกับกล้องถ่ายภาพและการสแกนโค้ด

• การใช้งานกล้องสำหรับถ่ายภาพ
• การสแกน Barcode และ QR code

Section 8: การพัฒนา REST API ด้วย Node.JS Express และ Prisma ร่วมกับ Supabase

• รู้จัก Prisma ข้อดีข้อเสียต่างๆ
• รู้จัก Supabase
• การสมัครและสร้างฐานข้อมูลบน Supabase
• การขึ้น Project Node.js + Express + Prisma + Supabase สำหรับสร้าง Rest API
• ติดตั้ง Prisma เข้ามาใน Project Node.js Express
• เชื่อมต่อกับฐานข้อมูล Supabase
• เขียน API สำหรับการเรียกดู เพิ่ม แก้ไข ลบ ข้อมูล บน Prisma ผ่าน Supabase
• เขียน API สำหรับการ Auth (Login / Register)
• เขียน API สำหรับการอ่านข้อมูลตามเงื่อนไขต่างๆ
• เขียน API ใน Express สำหรับการอัพโหลดไฟล์ภาพ

Section 9: Workshop "AuraShop" กับ Node.js Express API เชื่อมต่อ Supabase

• สร้างโปรเจ็กต์ React Native ใหม่ด้วย Expo
• ติดตั้ง Tailwind CSS UI ด้วย NativeWind
• วางโครงสร้างโปรเจ็กต์ตามแนวทาง File-based Routing ของ Expo Router
• ออกแบบหน้า Welcome Screen
• ออกแบบหน้า Login และ Register
• ออกแบบหน้าหลัก (Home) แสดงรายการสินค้า
• ออกแบบหน้าค้นหา (Search) สินค้า
• ออกแบบหน้าเพิ่ม (Create) สินค้าใหม่
• ออกแบบหน้า Profile ของผู้ใช้
• การรับส่งข้อมูลระหว่าง Mobile App และ Web API Server
• การแสดง Loading... ระหว่างโหลดข้อมูลจาก API
• การส่งข้อมูลจาก Component ไปยัง Server
• การติดต่อกับฐานข้อมูลฝั่ง Server
• การสร้างรายการของ FlatList ด้วยข้อมูลจาก Server

Section 10: การ Build และ Deploy แอปผ่าน EAS Build

• รู้จัก EAS Build ของ Expo
• การสมัครและเปิดใช้บริการ EAS
• การติดตั้งเครื่องมือ CLI เพิ่มเติม
• การทดสอบ Build Android App ด้วย EAS
• การทดสอบ Build iOS App ด้วย EAS
• การปรับระบบมา Build บนเครื่องผู้ใช้
• แนวทางการส่งแอปเข้าสู่ App Store และ Google Play

Workshop "AuraShop" กับ Node.JS Express API เชื่อมต่อ Supabase