โครงการอบรม iPhone, iPad and Android Application Development using React-Native (การพัฒนาแอปบนไอโฟน ไอแพด และเอนดรอยด์ด้วยรีเอคเนทีฟ) รุ่นที่ 1

หลักการและเหตุผล

     หลักสูตรนี้เหมาะสำหรับผู้ที่ต้องการเป็นนักพัฒนา iOS และ Android Application สำหรับ iPhone, iPad และอุปกรณ์ Android เป็นการพัฒนาซอฟต์แวร์ด้วย React Native Framework โดยใช้ภาษา Java Script และ Java Script Extension (JSX) ซึ่งเป็นภาษาที่เรียนรู้ง่ายและได้รับความนิยมสูงในปัจจุบัน สำหรับใช้ในการพัฒนาโมบายแอปได้ทั้งบนระบบปฏิบัติการวินโดวส์หรือแมคโอเอส โดยแอปที่สร้างขึ้นด้วย React-Native สามารถติดตั้งได้ทั้งบนระบบไอโอเอส (ต้องใช้แมคและ Xcode ในการติดตั้ง แอปบนแอปสโตร์) และเอนดรอยด์ (ใช้วินโดวส์และ Expo) โดยการสร้างแอปครั้งเดียวแต่สามารถทำงานได้ทั้งสองระบบหลัก  พร้อมกัน โดยผู้พัฒนาไม่จำเป็นต้องรู้ภาษา swift (ios) หรือ java (android) แต่เรียนรู้เพียงภาษาเดียวคือภาษา JSX โดย React-Native จะทำการแปลงโปรแกรม JSX เป็นโปรแกรมของไอโอเอสและเอนดรอยด์ให้โดยอัตโนมัติ โดยต้องติดตั้ง Xcode หรือ Android Studio ไปพร้อมกันกับ React-Native เพื่อให้สามารถใช้งาน simulator และอุปกรณ์จริงได้  ทั้งนี้ผู้เข้ารับการอบรมจะได้เรียนรู้วิธีการติดตั้งระบบ Node.JS และ Node Modules ต่างๆที่จำเป็นในการสร้าง components ของ React-Native บนแพลตฟอร์มไอโอเอสหรือเอนดรอยด์ เรียนรู้เครื่องมือในการพัฒนาแอปคือ Visual Studio Code, Expo, XCode และทักษะต่างๆที่จำเป็นในการพัฒนาแอป ตั้งแต่พื้นฐานการเขียนโปรแกรมด้วยภาษา JSX การสร้าง UI ด้วย react-native components และ custom components การใช้งาน props และ state ซึ่งเป็นส่วนที่สำคัญของ react-native การติดตั้งแอปบน Simulator และ iPhone, iPad หรืออุปกรณ์เอนดรอยด์ รวมไปถึงการส่งแอปไปติดตั้งในแอปสโตร์และเพลย์สโตร์
     ตัวอย่างโมบายแอปที่พัฒนาด้วย React Native ได้แก่ Facebook, Instragram, Skype, Baidu, Office365, Wix, Messenger, Tesla, Discord  เป็นต้น

วัตถุประสงค์

  1. เพื่อให้ผู้เข้าอบรม เรียนรู้ระบบ React-Native และ JSX
  2. เพื่อให้ผู้เข้าอบรม สร้างแอปบนระบบไอโอเอส ไอโฟนและไอแพด
  3. เพื่อให้ผู้เข้าอบรม สร้างแอปบนระบบเอนดรอยด์

หัวข้อการฝีกอบรม

1.Getting Start with React-Native

1.1 React JS
1.2 Node.Js
1.3 Visual Studio Code
1.4 Expo
1.5 React Native Documnetation

2.React-Native Basics (Course Goals App)

2.1  Exploring Core Components & Component Styling
2.2  Working With Core Components
2.3  Styling React Native Apps
2.4  Exploring Layouts & Flexbox
2.5  Handling Events
2.6  Making Content Scrollable with ScrollView
2.7  Optimizing Lists with FlatList
2.8  Handling Taps with the Pressable Component
2.9  Adding a Modal Screen
2.10 Working with Images & Colors

3.Components, Layouts and Styling (Numbers Guessing App)

3.1 Screen Components
3.2 Custom Buttons
3.3 Configuring the TextInput component
3.4 Linear Gradient
3.5 Background Image
3.6 Game Logic
3.7 Alert component
3.8 Game Screen
3.9 Random Numbers
3.10 Game Over Screen
3.11 Icons (Button Icons)
3.12 Logging Game Rounds
3.13 Finishing Touches

4. React Navigation (Meals App)

4.1  Navigation Container
4.2  Displaying Items in a Grid using FlatList
4.3  Default Navigation Screen
4.4  Navigation Between Two Screens
4.5  Using Route Parameters To Pass Data Between Screens
4.6  Displaying Meals
4.7  Screen Headers & Backgrounds
4.8  Meal Details Screen
4.9  Navigation Header Buttons
4.10 Adding Drawer Navigation & Creating a Drawer

5.App State Management

5.1 Managing App-wide State with Context
5.2 Using the Created Context with use Context
5.3 Managing Favorite Meals with the Context API

6.Bottom Tab Navigation (Expense App)

6.1  App Components to Display Expenses
6.2  Dummy Expense Data
6.3  Expenses List
6.4  Date Format
6.5  Making Expense Items Tappable
6.6  Adding a "Delete" Button
6.7  Adding Custom Buttons
6.8  Managing App-wide State With Context
6.9  Using Context From Inside Components
6.10 Deleting & Updating Expenses

7. Handling User Input

7.1  Custom Input Component
7.2  Configuring the Form Input Elements
7.3  Styling Form Input
7.4  Form Layout
7.5  Handling User Input
7.6  Managing Form State & Submission
7.7  Working with Entered Data
7.8  Setting & Using Default Values
7.9  Form Validation
7.10 Providing Visual Validation Feedback

8. Integrate Firebase Realtime Database

8.1  Backend Setup using Firebase
8.2  Axios
8.3  Sending POST Http Requests
8.4  async and await
8.4  Fetching Backend Data  with GET Requests
8.5  Using Response Data from POST Requests
8.6  Updating & Deleting Backend Data (UPDATE & DELETE Requests)
8.7 Handling Request Errors

9. Integrate Firebase User Authentication

9.1  Backend Firebase Atuthentication Setup
9.2  Signup & Login Screens
9.3  Sending Authentication Requests to the Backend Firebase
9.4  Creating New Users
9.5  Logging Users In
9.6  Authentication Error Handling
9.7  Storing & Managing the User Authentication State (with Context)
9.8  Authentication Token
9.9  Protecting Screens
9.10 Storing Auth Tokens on the Device & Logging Users In Automatically

10. Using Native Camera, Location and Map

10.1  Location and Camera setup
10.2  Adding a "Favorite Places" List
10.3  Editing the Favorite Place Items
10.4  Adding an "Add Place" Screen and Navigation
10.5  Adding a Header Button
10.6  Custom Form
10.7  Taking Photos on Android
10.8  Showing an Image Preview
10.9  Locating Users
10.10  Adding a Location Preview Map
10.11  Adding an Interactive Map (Google Maps & Apple Maps)
10.12  Adding Map Markers
10.13  Manage Picked Locations
 10.14  Adding a Form Submit Button
10.15  Managing Location & Image State in the Form
10.16  Converting Picked Locations to Human-Readable Addresses
10.17  Passing Entered Data to the "AllPlaces" Screen
10.18  Outputting a List Of Places
10.19  Insert Data into the SQLite Database
10.20  Fetching Places from the SQLite Database
10.21  Adding the Place Details Screen
10.22  Fetching Place Detail Data from the Database
10.23  Showing a Readonly Map

11.Practical App
11.1 mini project workshop
12.Publishing React Native App
12.1  Publishing Apps: An Overview
12.2  Building Expo Apps with EAS
12.3  EAS for iOS
12.4  Building for iOS Without Expo
12.5  Building for Android Without Expo
12.6  Configuring Android Apps
12.7  Configuring iOS Apps

13.Notifications
13.1  Local Notification
13.2  Scheduling Notifications
13.3  Handling Incoming Notifications
13.4  Local Notifications – Permissions
13.5  Push Notifications
13.6  Push Token
13.7  Sending Push Notifications

คุณสมบัติผู้เข้าอบรม

ผู้ที่มีความรู้พื้นฐานคอมพิวเตอร์ และเขียนโปรแกรมภาษาหนึ่งภาษาใดได้

รูปแบบการอบรม

ทฤษฎีและฝึกปฏิบัติ (Workshop)


วันที่รับสมัคร

01/01/2567 - 13/05/2567


ข้อมูลวันที่อบรม

ลำดับ วันที่อบรม สถานที่อบรม เวลาอบรมบรรยาย เวลาอบรมปฏิบัติ
1. 28/05/2567 - 30/05/2567 มหาวิทยาลัยเทคโนโลยีมหานคร 18 ชม. 18 ชม.

ค่าใช้จ่าย

7,200.00 บาท


โปรโมชั่น

1.บุคคลทั่วไป ลดทันที 20 % จากราคาปกติ
2.ศิษย์เก่า, นักศึกษา และบุคลากรของ ม.เทคโนโลยีมหานคร ลด 25% จากราคาปกติ


รหัสกิจกรรม CPD

-


จำนวนหน่วยพัฒนา CPD

-




ช่องทางอื่นๆ

ประชาสัมพันธ์

ปฏิทินปี 2568

Privacy Notice

inh

สิ่งที่น่าสนใจ

เกี่ยวกับเรา

สำนักฝึกอบรมและพัฒนาทรัพยากรมนุษย์ มหาวิทยาลัยเทคโนโลยีมหานคร

140 ถนนเชื่อมสัมพันธ์ แขวงกระทุ่มราย เขตหนองจอก กรุงเทพฯ 10530

โทรศัพท์.
  • 0-2988-3666
  • 092-2464638
E-mail.
  • training@mut.ac.th
  • training.mut@gmail.com