พัฒนา Application ครั้งเดียวใช้ได้ทุกแพลตฟอร์ม | Skooldio Workshop: Ionic React Fundamentals
WORKSHOP.HEADER

Ionic React Fundamentals

พัฒนา Application ครั้งเดียวใช้ได้ทุกแพลตฟอร์ม

SECTION_TITLE.PROMOTION

5 ที่สุดท้าย !! รอบสุดท้าย หมดแล้วหมดเลย !!

Ionic React Bundle ประกอบด้วย

  1. คอร์สออนไลน์ Ionic React Fundamentals (มูลค่า 1,490 บาท) เริ่มเรียนได้ภายใน 24 ชม. หลังการสมัครเสร็จสิ้น
  2. Virtual Workshop Ionic React Fundamentals (มูลค่า 7,900 บาท)
  3. แถมฟรี!! คอร์สออนไลน์ Mastering Web Development with React (มูลค่า 2,990 บาท) เริ่มเรียนได้ภายใน 24 ชม. หลังการสมัครเสร็จสิ้น

​

ทุนสนับสนุน 2 ต่อ!!

  1. หลักสูตรนี้ได้รับการอุดหนุนจากสำนักงานส่งเสริมเศรษฐกิจดิจิทัล (depa Digital Manpower Fund) จากราคาเต็ม 12,380 บาท ผู้เรียนชำระเพียง 2,900 บาท
  2. เรียนจบ ทำแบบฝึกหัดครบตามเกณฑ์ที่กำหนด รับทุนสนับสนุนเพิ่มอีก 2,000 บาท เสมือนชำระเพียง 900 บาท (ทางเราจะทำเรื่องคืนเงินหลังจากจบโครงการ)

​

** จำกัดไม่เกิน 5 คนต่อบริษัทตามเงื่อนไขการอุดหนุนจาก depa

SECTION_TITLE.OVERVIEW

คอร์ส Ionic นี้เป็นคอร์สสำหรับผู้ที่มีความรู้ภาษา HTML CSS JavaScript ที่สนใจจะทำ App/Mobile App โดยใช้เวลาเรียน และเวลาทำไม่นาน แต่สามารถสร้าง App ได้ทุก Platform (iOS/Android/macOS/Windows/PWA) โดยคอร์สนี้จะมีเนื้อหาตั้งแต่การใช้ library ยอดฮิตอย่าง React.js ไปจนถึงการสร้าง App ด้วย Ionic Framework ไปจนถึงการนำโปรเจกต์ Web จาก React มาเปลี่ยนเป็น App ได้ใน 15 นาที

​

Hybrid Application คืออะไร?

Hybrid Application เป็นการพัฒนา Application โดยใช้ภาษาที่ใช้พัฒนา Web เช่น HTML, CSS, JavaScript และ Library ต่าง ๆ เช่น Angular React Vue แต่ก็สามารถดึง Native Feature เช่น กล้อง หรือ GPS และสามารถทำเป็น Application นำไปลง Play Store หรือ App Store ได้ เรียกได้ว่า พัฒนาครั้งเดียว ได้ทุกแพลตฟอร์ม

​

ข้อดีของ Hybrid Application

  1. Write Once, Run Anywhere: พัฒนาครั้งเดียว สามารถใช้ได้ทุกแพลตฟอร์ม ไม่ว่าจะเป็น iOS/Android/Windows/macOS/PWA/Electron
  2. Use the Talent You Already Have: ใช้ภาษาที่คุ้นเคยอยู่แล้ว เช่น HTML, CSS, JavaScript
  3. Brand Consistency: สามารถส่งมอบประสบการณ์การใช้ที่ดี และเท่ากันให้กับทุกคน และทุกแพลตฟอร์ม
  4. Build for the Future: เราสามารถมั่นใจได้ว่า App ของเราจะไม่ตกยุค เนื่องจากเทคโนโลยีใหม่ ๆ ที่เข้ามา ก็มักจะมาพร้อมกับการเชื่อมต่อตาม Web Standard ด้วย

​

Ionic Framework คืออะไร?

Ionic เป็นเครื่องมือ Open Source ที่จะช่วยคุณพัฒนา Hybrid Application และ Progressive Web Application ที่กำลังเป็นที่นิยมมากขึ้นในปัจจุบัน ด้วยความสามารถที่ได้ Lighthouse PWA Score สูงสุดถึง 100% และยังมีการ Integrate กับ Framework ยอดนิยมตัวอื่น ๆ เช่น Angular, React และ Vue อีกด้วย อีกทั้งยังมีการ Integrate ฟังก์ชั่นต่าง ๆ อีกมากมาย เช่น Facebook, Firebase, Apple Pay ซึ่งสามารถศึกษาข้อมูลเพิ่มเติมได้ที่นี่ เพราะเหตุนี้เององค์กรใหญ่ระดับโลก เช่น Airbus, EA Games หรือกระทั่ง NASA ถึงเลือกใช้

​

​

เวิร์คชอปนี้เหมาะสำหรับ

องค์กร หรือ Start-up ที่มีสายอาชีพ Front-End Developer, Software Engineer, Software Developer, Web Programmer, Web Developer ที่สนใจสายงานด้าน Application/Web Application ที่

  • ต้องการพัฒนา Application ที่ไม่ต้องใช้ประสิทธิภาพในการทำงานจาก Hardware มากนัก (ตัวอย่างของ App ที่ต้องการประสิทธิภาพในการทำงานสูง เช่น เกม หรือแอปที่เกี่ยวข้องกับ Graphic สูง ๆ ฯลฯ) และต้องการความรวดเร็วในการพัฒนา เพื่อเพิ่มโอกาสทางธุรกิจให้กับองค์กรตนเอง โดยไม่เสียประสบการณ์การใช้ของ User
  • ต้องการพัฒนา Application ที่ใช้กันเองภายในองค์กร เพื่อเพิ่มประสิทธิภาพองค์กรโดยรวมได้มากยิ่งขึ้น โดยไม่ต้องคำนึงถึงแพลตฟอร์มของคนในองค์กร
  • ต้องการเริ่มพัฒนา Application หรือมีทีมนักพัฒนาไม่เยอะมาก แต่ต้องการพัฒนา Application บนทุกแพลตฟอร์มโดยไม่ต้องขยายทีม
  • ต้องการเพิ่มประสิทธิภาพ และลดเวลาในการทำงาน และต้องการขยายโอกาสในการทำงานของตน

​

สิ่งที่คุณจะได้รับจากเวิร์คชอปนี้

  • สามารถใช้ React ตั้งแต่ระดับพื้นฐานอย่างการใช้ JSX, React Component และ Component Lifecycle
  • ได้ลองใช้เครื่องมือ และ Library ที่สำคัญต่าง ๆ เช่น React Router, Styled Components และ Redux เพื่อให้สามารถนำ React ไปใช้ทำงานได้จริง
  • ได้ทำโปรเจคจริงด้วย React
  • ออกแบบ และพัฒนา Application โดยใช้เครื่องมือ Ionic ได้
  • สามารถนำ Application ขึ้นทุก Platform ได้ ตั้งแต่ Web Application จนไปถึง iOS/Android Native Application โดยใช้โค้ดเพียงชุดเดียว
  • ช่วยให้คุณ และองค์กรของคุณประหยัดเวลา และทรัพยากรในการพัฒนา Application ได้

​

ความรู้พื้นฐาน และการเตรียมตัว

  • มีความรู้พื้นฐานวิทยาการคอมพิวเตอร์ วิศวกรรมคอมพิวเตอร์ หรือเทียบเท่า
  • มีความสนใจในการทำ Application/Web Application และมีความรู้ความเข้าใจเบื้องต้นเกี่ยวกับเทคโนโลยีที่เกี่ยวข้อง
  • มีทักษะในการเขียนโปรแกรม ถ้าเคยเขียน JavaScript (ES6), HTML / CSS มาก่อนจะช่วยให้ติดตามเนื้อหาได้ง่ายขึ้น

​

โดยหลักสูตรนี้เกิดขึ้นจากความร่วมมือของ CU Innovation Hub และ Skooldio ซึ่งได้รับทุนสนับสนุนจากสำนักงานส่งเสริมเศรษฐกิจดิจิทัล (depa)

SECTION_TITLE.INSTRUCTOR

ปัญจมพงศ์ เสริมสวัสดิ์ศรี (Google Developers Expert in Web Technologies) | Skooldio Instructor
ปัญจมพงศ์ เสริมสวัสดิ์ศรี
Google Developers Expert in Web Technologies
WORKSHOP.INSTRUCTOR.SEE_PROFILE
ณัฐนันท์ ฉันทานุรักษ์ (Lead Software Engineer, แอปพลิเคชั่น Learn Anywhere) | Skooldio Instructor
ณัฐนันท์ ฉันทานุรักษ์
Lead Software Engineer, แอปพลิเคชั่น Learn Anywhere
WORKSHOP.INSTRUCTOR.SEE_PROFILE

SECTION_TITLE.COURSE_OUTLINE

01

[Online Course] Mastering Web Development with React

  • Introduction
    • Why Using Frontend Framework
    • What is React?
    • Declarative vs Imperative
  • React Concepts and Features
    • Main Concepts
    • JSX
    • React Element & Component
    • State & Props
    • Virtual DOM
  • Hands-on Project
    • Setting Up Environment
    • Creating React App Using create-react-app
    • What We are Building
    • Introducing DevTools
    • Initializing Sudoku Board
    • Thinking in React
    • Creating
    • Event & State
    • Add More Props
    • Placing the State
    • Lifting State Up
    • Pre-filling State
    • Pre-filling State (Exercise)
    • Passing onChange into
    • Completing the Game
    • Validation Function Explanation
    • Code Refactoring (Separate Components, Use Functional Component)
    • Component Lifecycle
    • Implementing Component Lifecycle
    • Adding Timer to Sudoku App
    • Calling API in React
    • Calling API in Sudoku
  • Redux
    • Why Redux?
    • Digging Deep into Redux
    • Action Creator, Reducer, connect()
    • Creating Store & Provider
  • Styled Components
    • Why Styled Components?
    • Basic Example of Styled Components
    • How Does Styled Components Library Work?
    • Style Custom Component
    • Adding Props in Styled Components
    • Nesting and Using CSS
  • React Router
    • What is React Router?
    • Switch & Route
    • Route Props
    • Using withRouter()
  • Managing Large Project
    • Setting Up Directory Structure
    • Examples of Structure
    • Choosing the Best Structure for Your App
    • There is No Perfect Solution
    • Separating View and Logic
    • Higher-Order Components
    • Render Props
    • React Hooks
  • Introduction
    • What is Hybrid Application?
    • Cross platform development comparison: React Native and Flutter
    • Hybrid vs Native
    • What is Ionic?
    • Course Overview
  • Ionic Core Concepts
    • Fundamentals
    • Cross Platform Architecture
    • Web Views
    • What are PWAs?
    • Capacitors
  • Ionic React
    • Create Ionic React project with single command
    • Take a look in Ionic React Component
    • React Component with Style
    • Navigation/Routing
    • Ionic React Lifecycles
    • Testing
    • Build a Native App
  • Running on All Devices
    • Run App with Browser
    • Run App with Emulator
    • Run App on Real Device
    • Run App with Desktop App
    • Development with Live Reload
  • Building App with Ionic Components
    • List Tasks
    • Create Task (with multiple type of form components)
    • Notification Badge
    • Showing Alert
    • List Project with Card
    • Add Loading Page
    • Navigation/Routing
    • Action List
    • Custom Layout
  • Let's Do Advanced Things
    • Using Storage
    • Play around with Lifecycle
    • Connect with Camera (Start using Native API): Taking a photo, Saving a photo, Loading a photo, Platform specific logic, Testing on Real Device
  • Using Native APIs
    • Get device Info
    • Vibration
    • Geolocation
    • Barcode Scanner
    • Push notification
    • File System
  • Adding Ionic React to an Existing React Project
  • Building Your Capacitor Plugin
    • Create plugin with Capacitor
    • Modify Plugin Native Code
    • Deploy Plugin
    • Using the new Plugin
  • Deployments
    • Modify Splash Screen
    • Generate App Icon
    • iOS App Store
    • Android Play Store
    • Electron Desktop App

SECTION_TITLE.SCHEDULE

BATCH_OVERLAY.PASSED
31
Oct

Sat, 31 Oct 2020, 02:30 - 10:00

Ionic React Bundle

3,900.00
บาท
12,380.00
บาท
BATCH_OVERLAY.PASSED
27
Nov

Fri, 27 Nov 2020, 02:30 - 10:00

Ionic React Bundle

4,900.00
บาท
12,380.00
บาท
BATCH_OVERLAY.PASSED
26
Dec

Sat, 26 Dec 2020, 02:30 - 10:00

Ionic React Bundle

4,900.00
บาท
12,380.00
บาท
BATCH_OVERLAY.PASSED
31
Jan

Sun, 31 Jan 2021, 02:30 - 10:00

Ionic React Fundamentals รุ่นที่ 3

4,900.00
บาท
12,380.00
บาท
BATCH_OVERLAY.PASSED
28
Feb

Sun, 28 Feb 2021, 02:30 - 10:00

Ionic React Fundamentals รุ่นที่ 4

2,900.00
บาท
12,380.00
บาท
BATCH_OVERLAY.PASSED
18
Mar

Thu, 18 Mar 2021, 02:30 - 10:00

Ionic React Fundamentals รุ่นที่ 5 (รุ่นสุดท้าย)

2,900.00
บาท
12,380.00
บาท
WORKSHOP.BATCHES.REQUEST

SECTION_TITLE.FAQS

Q:

ต้องการซื้อเวิร์คชอปในนามบริษัท

A:

หากต้องการสมัครในนามบริษัทหรือต้องการเอกสารเพิ่มเติม (ใบเสนอราคา, รายละเอียดหลักสูตร, เอกสารประกอบการชำระเงินอื่นๆ)

สามารถติดต่อเราได้ที่ hello@skooldio.com โดยส่งรายละเอียดดังต่อไปนี้

  • ชื่อบริษัท, ที่อยู่บริษัท, เลขประจำตัวผู้เสียภาษี
  • จำนวนผู้เรียน ชื่อ, อีเมล, เบอร์ติดต่อ ของแต่ละท่าน

A:

กรณีแจ้งยกเลิกการเข้าร่วมอบรม

  • หากแจ้งยกเลิกก่อนวันอบรมอย่างน้อย 14 วัน จะได้รับเงินคืนเต็มจำนวน
  • หากแจ้งยกเลิกก่อนวันอบรมอย่างน้อย 7 วัน จะได้รับเงินคืน 50%
  • หากแจ้งยกเลิกก่อนวันอบรมน้อยกว่า 7 วัน บริษัทขอสงวนสิทธิ์ในการคืนเงิน

A:

ผู้เข้าอบรมทุกท่านจะได้รับอีเมลแจ้งการเตรียมตัว ก่อนวันอบรมประมาณ 5-7 วัน

ในวันอบรมผู้เรียนทุกท่านจะได้รับ

  • อาหารกลางวัน 1 มื้อ, อาหารว่าง
  • เอกสารประกอบการเรียนต่างๆ
  • หนังสือและเอกสารสรุปเนื้อหาหลักสูตร
  • ใบกำกับภาษีในกรณีสมัครในนามบริษัท

สำหรับองค์กร

ซื้อคอร์สให้พนักงาน ลดหย่อนภาษี เทียบเท่าส่วนลดสูงสุด 50%

อ่านเพิ่มเติม