Ionic เป็นเฟรมเวิร์คที่มีผู้นิยมใช้เป็นจำนวนมาก เนื่องจากนักพัฒนาส่วนใหญ่ มีพื้นฐานด้านเว็บและฐานข้อมูลอยู่แล้ว จึงเริ่มต้นใช้งานได้อย่างรวดเร็ว ด้วยเครื่องมือที่ Ionic เตรียมให้ รวมไปถึงตัวโค้ดโปรแกรมที่อ่านง่าย ซึ่งเป็นข้อดีในแง่การพัฒนาโปรแกรม และการดูแล/ต่อยอดโปรแกรมในอนาคต

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

• เข้าใจหลักการของ Cross Platform Mobile App ได้
• เข้าใจหลักการของ Web Service API และรับส่งข้อมูลด้วย JSON
• สามารถเขียน TypeScript / Angular เบื้องต้นได้
• สามารถใช้ Ionic Command Line การใช้ Component และ Native Component
• สร้างโมบายแอพที่สามารถใช้งานได้
• เข้าใจหลักการและสามารถนำแอพมาไปติดตั้งใช้งานได้

กลุ่มเป้าหมาย

• ผู้ที่สนใจการพัฒนาโมบายแอพลิเคชั่น
• นักเรียน นักศึกษา ที่ต้องการทำโครงงานคอมพิวเตอร์
• พนักงาน Tech Startup ที่ต้องการเพิ่ม Platform ระบบลงในโมบาบแอพ
• พนักงานบริษัทที่ต้องการสร้างแอพลิเคชั่นที่ใช้งานได้จริง
• กลุ่มโปรแกรมเมอร์ที่ต้องการ สร้างระบบงานผ่านมือถือ

ความรู้พื้นฐาน

• สามารถใช้คอมพิวเตอร์ได้คล่อง
• สามารถใช้ Command Line หรือ Terminal ได้ค่อนข้างคล่อง
• พื้นฐานการพัฒนาเว็บ เช่น เว็บเซิร์ฟเวอร์ เบราเซอร์ HTML และ Web Service เป็นต้น
• มีความรู้ด้านภาษา JavaScript พอสมควร
• มีความรู้ด้านการเขียน Stylesheet (CSS) พอสมควร

สิ่งที่ต้องเตรียมมา

• เครื่องคอมพิวเตอร์ Notebook
• ดาวน์โหลดโปรแกรม Visual Studio Code (จำเป็น)
• ดาวน์โหลดโปรแกรม Android Studio และ SDK Tool (จำเป็น)

สิ่งที่จะได้รับในการอบรม

• เอกสารคู่มือ
• ตัวอย่างโค้ด
• เวิร์คชอฟที่สามารถทำงานได้

ระยะเวลาในการอบรม

• 12 ชั่วโมง (2 วัน)

ผู้สอน

• อาจารย์เอกสิทธิ์ ศรีสุขะ

ราคาคอร์สอบรม

• ท่านละ 9,500 บาท ( ราคาไม่รวมภาษีมูลค่าเพิ่ม )

เนื้อหาการอบรม

Getting Started

• ติดตั้ง Node.js และ npm
• ติดตั้งและตั้งค่าปลั๊กอิน Visual Studio Code
• ติดตั้ง Android Studio และ SDK

Install Ionic Framework and CLI

• ติดตั้ง Ionic Framework
• ติดตั้ง Ionic CLI
• การสร้างโปรเจ็กต์
• การรันโปรเจ็กต์
• การเพิ่ม Android Platform
• การรันโปรเจ็กต์ด้วย Android Emulator
• หน้าที่และโครงสร้างไฟล์ต่างๆ ของโปรเจ็กต์

Basic TypeScript, Angular and SCSS

• เริ่มต้นกับ TypeScript
• การประกาศตัวแปร และชนิดข้อมูล
• Interface / Class และ Object
• Arrays
• Export / Import Module
• Templates
• Angular Directive, Events and Data Binding
• การใช้ SCSS ตกแต่งหน้าจอเบื้องต้น

Page, Navigation and Passing Data

• การสร้าง Page
• Routing
• การทำ Navigation
• การส่งข้อมูลไปใน Page อื่น
• Page Life Cycle
• การใช้ Navbar และ Toolbar

Basic Ionic Component Usage

• รู้จักกับ Component
• Tabs
• Icons
• Label
• Input
• Button
• Toasts
• Refresher

Forms and Validations

• สร้างฟอร์มรับข้อมูล
• การตรวจสอบข้อมูลในฟอร์ม
• การแสดงข้อผิดพลาด

Backend API

• แนะนำ Backend API
• ทดสอบการทำงานด้วยโปรแกรม Postman
• ติดตั้ง Backend API ที่จะใช้ใน Workshop
• แนะนำการใช้งาน API สำหรับ Workshop
• ทดสอบ POST Request ด้วยโปรแกรม Postman

Connect API using HTTP Service

• สร้าง Service Component ด้วย CLI
• เชื่อมต่อ API ด้วย Angular HTTP Service
• แสดงผลข้อมูล ด้วย Service
• จัดการเพิ่ม แก้ไข ลบข้อมูลโดยใช้ Service
• การเพิ่ม Progress ขณะโหลดข้อมูล
• การสั่งให้โหลดข้อมูลโดยใช้ Refresher

Ionic Native Components

• ใช้งาน Call Number
• ใช้งาน Barcode Scanner
• ใช้งาน Camera และ Upload รูปภาพ

App Authentication with Login / Logout

• การใช้งาน Local Storage
• สร้าง Login และ Logout
• การ Login กับ Backend ด้วย Service โดยใช้ Json Web Token (JWT)
• การ Login ด้วย Facebook Login

Push Notification

• รู้จักกับ Push Notification
• การทำ Push Notification เพื่อส่งข้อมูลไปยัง App ของผู้ใช้

Styling Your App with SCSS

• การตกแต่งหน้าจอ
• การเพิ่ม Font เข้ามาใช้งาน
• การจัดรูปแบบการแสดงผลด้วย Pipes

Deploy Application

• การเตรียมไอคอน
• การสร้าง Splash Screen
• การ Build App ทั้ง Android และ IOS

Workshop