Basic React Native (สำหรับผู้เริ่มต้น)

ภาพรวมหัวข้อการอบรม

• Module 1: การเตรียมเครื่องมือและความพร้อมทั้งบน Mac และ Windows
• Module 2: ทบทวนพื้นฐานการเขียน React.JS
• Module 3: เริ่มต้นสร้างและทดสอบ React Native App
• Module 4: การสร้างและทำงานกับ UI Core Component
• Module 5: การสร้าง Navigation ระหว่างหน้าจอ
• Module 6: การเข้าถึง API ของระบบ
• Module 7: การทำงานกับกล้องถ่ายภาพและสแกนโค้ด
• Module 8: การพัฒนาแอพเชื่อมต่อกับ Rest API

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

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

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

Module 2: ทบทวนพื้นฐานการเขียน React.JS

• รู้จัก React.js
• แนะนำ JSX
• แนะนำ React Component
• การทำงานกับ Props
• State ใน React
• การใช้งาน React Router

Module 3: เริ่มต้นสร้างและทดสอบ React Native App

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

Module 4: การสร้างและทำงานกับ UI Core Component

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

Module 5: การสร้าง Navigation ระหว่างหน้าจอ

• รู้จักและติดตั้ง Library สำหรับทำ Navigation
• การเปลี่ยนหน้าจอด้วย Stack Navigator
• การปรับแต่ง Header Title
• การส่งข้อมูลระว่างหน้าจอ
• กากรสร้างและใช้งาน Bottom Tab Navigation

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

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

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

• แนะนำ Library สำหรับตรวจสอบ Permission
• การเลือกกล้องหน้า หลัง และการใช้แฟลช
• การถ่ายภาพ
• การถ่ายวิดีโอ
• การสแกน Barcode และ QR code
• การใช้งาน Library Image Picker

Module 8: การพัฒนาแอพเชื่อมต่อกับ Rest API

• การขึ้น Project Node.jS + Express สำหรับสร้าง Rest API
• การรับส่งข้อมูลระหว่าง Mobile App และ Web API Server
• การแสดง Loading... ระหว่างโหลดข้อมูลจาก API
• การส่งข้อมูลขาก Component ไปยัง Server
• การติดต่อกับฐานข้อมูลฝั่ง Server
• การสร้างรายการของ FlatList ด้วยข้อมูลจาก Server

ตัวอย่าง Workshop ในหลักสูตรนี้