• slider-image
  • slider-image
  • slider-image
  • slider-image

พัฒนาแอพแบบ Cross Platform สำหรับ Android และ iOS ด้วย Ionic Framework พื้นฐานถึงขั้นกลาง

พัฒนาแอพแบบ Cross Platform สำหรับ Android และ iOS ด้วย Ionic Framework พื้นฐานถึงขั้นกลาง

การพัฒนาแอพพลิเคชั่นสมัยใหม่นอกจากความสวยงามของ UI และ UX แล้ว ความง่ายและความรวดเร็วในการพัฒนาเป็นอีกปัจจัยหนึ่งที่นักพัฒนาต้องการ ด้วยเทคโนโลยีที่ก้าวหน้าทุกวัน การแข่งขันที่สูงขึ้น เวลาจึงเป็นเรื่องสำคัญเป็นอย่างมาก นักพัฒนาจึงต้องมองหาแนวทางใหม่ ๆ ในการพัฒนาแอพพลิเคชั่นที่ตอบโจทย์ความต้องการของตัวเองมากขึ้น

Ionic Framework เป็นหนึ่งในเครื่องมือที่กำลังได้รับความนิยมอย่างสูงในการพัฒนาแอพแบบ Hybrid โดยใช้เทคโนโลยีของเว็บไซต์ในการออกแบบและสร้างแอพพลิเคชั่นของเราขึ้นมา นั่นหมายความว่า เราสามารถใช้ภาษา HTML, CSS และ JavaScript พื้นฐานทั่วไปมาสร้างแอพพลิเคชั่นได้ทันที โดยรองรับทั้ง Android และ iOS และ Windows Phone ในการพัฒนาครั้งเดียว ทำให้เราสามารถลดเวลาในการพัฒนาลงไปได้อย่างมาก อีกทั้งตัว Ionic framework เองมีการใช้ Command-line interface (CLI) เข้ามาช่วยในการจัดการดูแลบริการต่างๆ ในการสร้างหน้า หรือ การติดตั้งให้ง่ายขึ้นอีกด้วย และถ้าต้องการเข้าถึงฟีเจอร์ที่เป็น Native ก็จะเข้าถึงผ่าน Runtime ของ Cordova ที่สำคัญสามารถใช้โค้ดเดียวกันรันทีเดียวสองแพลตฟอร์มได้เลย iOS และ Android

เขียนครั้งเดียว ได้ทั้ง Android และ iOS เรียน 24 ชั่วโมงจบ ครบทุกประเด็น สำหรับมือใหม่จนถึงขั้นใช้งานจริง

รอบการเปิดอบรม

สาขากรุงเทพฯ (ลาดพร้าว)

วันที่ 30 - 2 พฤศจิกายน 2017

ลงทะเบียนจอง    ขอใบเสนอราคา
สาขาชลบุรี(บ้านสวน)

วันที่ 27 - 30 พฤศจิกายน 2018

ลงทะเบียนจอง    ขอใบเสนอราคา

วิดีโอแนะนำคอร์ส:

ดาวน์โหลดไฟล์รายละเอียดคอร์ส:

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

  • เข้าใจแนวคิดของการพัฒนาแอพแบบ Hybrid ทั้ง iOS และ Android
  • เข้าใจศักยภาพและขีดจำกัดของเทคโนโลยี Cordova / IONIC Framework
  • สามารถเขียน Mobile App ด้วยภาษา HTML, CSS, และ JavaScript รวมถึงใช้งาน PhoneGap/Cordova, Angular JS และ Ionic Framework ในการพัฒนา Mobile App
  • สามารถออกแบบ และสร้าง UI ของ Mobile App ที่ใช้งานได้ง่ายและสวยงาม
  • สามารถสร้าง Mobile App ที่จัดการข้อมูลใน MySQL Database
  • สามารถสร้าง Mobile App ที่รับส่งข้อมูลกับ Web Service ได้
  • เรียนรู้การใช้งาน Plugin เพื่อควบคุมเซ็นเซอร์บนอุปกรณ์ iOS และ Android ได้
  • สามารถอัพโหลด Mobile App ของตัวเองขึ้น App Store และ Play Store ได้

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

  • บุคคลทั่วไป
  • Programmer
  • Web Developer
  • Web Master
  • Mobile Developer
  • IT Manager
  • ผู้ที่ต้องการใช้ Web technology สร้าง hybrid mobile application ที่นำไปใช้งานได้บน Mobile Platform ยอดนิยมอย่าง iOS, Android และ Windows Phone

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

  • ใช้งานคอมพิวเตอร์พื้นฐานบนระบบปฎิบัติการวินโดว์หรือ mac ได้
  • มีประสบการณ์ด้านการทำงานกับ HTML, CSS, และ Javascript
  • ใช้งานอินเตอร์เน็ตและเว็บไซต์พื้นฐานได้
  • ไม่จำเป็นต้องเคยทำ Mobile App มาก่อน
  • ไม่จำเป็นต้องเคยใช้ JQuery หรือ Angular Framework มาก่อน

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

  • 24 ชั่วโมง

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

  • ราคาปกติ 7,500 บาท โปรโมชั่นลด 10% เหลือ 6,750 บาท

วิทยากรผู้สอน:

คอร์สที่ควรอบรมก่อนหน้า:

  • ไม่มี

คอร์สต่อเนื่องที่แนะนำ:

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

หมายเหตุ ในการเรียนสามารถใช้เครื่อง Windows หรือ Mac อย่างใดอย่างหนึ่งก็ได้
เนื้อหาจะใช้ Ionic Framework รุ่นล่าสุด (ปัจจุบันเวอร์ชั่น 3.x.x) ในการเรียนรู้ แต่จะมีการพูดถึงเวอร์ชั่นก่อนหน้าด้วย

รู้จักกับการพัฒนา Mobile Application แบบ Hybrid

Module 1: รู้จักกับการพัฒนา Mobile Application แบบ Hybrid

  • รู้จักกับการพัฒนา Mobile Application แบบ Hybrid
  • แนวคิดการพัฒนาแอพแบบ Cross Platform ทั้ง Android และ iOS
  • ทำความเข้าใจแนวคิดของ Cordova framework
  • ทำความเข้าใจแนวคิดของ Ionic framework

 

การติดตั้งและเตรียมระบบ

Module 2: การติดตั้งและเตรียมระบบ

  • ระบบและโปรแกรมที่ใช้บน Windows
  • ระบบและโปรแกรมที่จะใช้บน Mac
  • การติดตั้ง Microsoft Visual Studio Code สำหรับเขียนโปรแกรม
  • การลงส่วนเสริม (Extension) ให้กับ Visual Studio Code
  • วิธีติดตั้ง JDK (Java Development Kit)
  • การกำหนด (config)  Path ของ JDK
  • วิธีติดตั้ง Node JS บน Windows
  • วิธีติดตั้ง Node JS บน MacOS
  • วิธีติดตั้ง Git และกำหนดค่าเริ่มต้น สำหรับ Windows
  • วิธีติดตั้ง Git และกำหนดค่าเริ่มต้น สำหรับ MacOS
  • วิธีการติดตั้ง Android Studio และการ Config Path บน Windows
  • วิธีการติดตั้ง Android Studio และการ Config Path บน Mac OS
  • การติดตั้ง Cordova และ Ionic framework
  • ลง  Driver ADB interface  บน Windows สำหรับเชื่อมต่อกับ Smart Phone Android

 

รู้จักกับ Ionic Framework

Module 3: รู้จักกับ Ionic Framework

  • แนะนำเวอร์ชั่นของ Ionic และความแตกต่าง
  • ระบบและโปรแกรมที่ใช้ใน Ionic framework
  • ทำความรู้จัก Ionic CLI
  • สร้างโปรเจ็กต์แรกใน Ionic framework
  • ทำความเข้าใจโครงสร้างของโปรเจค Ionic
  • คำสั่งรัน Web server: ionic serve
  • ทดสอบใช้งาน Ionic Serve
  • วิธีแสดงแอพแบบ 2 แพลตฟอร์มบน Ionic Serve

 

พื้นฐาน Angular , TypeScript และ Sass สำหรับ Ionic

Module 4: พื้นฐาน Angular , TypeScript และ Sass สำหรับ Ionic

  • พื้นฐาน Angular
  • Angular Module
  • Angular Decorators
  • Angular Components
  • พื้นฐาน TypeScript
  • ชนิดข้อมูลของ TypeScript และการประกาศตัวแปร
  • พื้นฐาน Sass (Syntactically Awesome StyleSheets)
  • แนวทางประยุกต์ใช้งาน Angular + TypeScript + Sass กับ Ionic 3

 

การสร้างหน้า Page , Basic Navigation และการส่งข้อมูลระหว่างเพจ (Passing Data)

Module 5: การสร้างหน้า Page , Basic Navigation และการส่งข้อมูลระหว่างเพจ (Passing Data)

  • การใช้คำสั่ง Ionic CLI สร้าง Page
  • ทดลองสร้างเพจใหม่ พร้อมแก้ไขเมนู
  • พื้นฐานการใช้งาน Navigation 
  • การ Push หน้าเพจขึ้นมาแสดง
  • การ Pop หน้าเพจ
  • การกำหนดเพจให้เป็น root page
  • การส่งข้อมูลระหว่างหน้าเพจ (Passing Data between Pages)
  • การปรับแต่งรูปแบบการเปลี่ยนหน้าเพจ (Configuring Page Transitions)
  • ทำความเข้าใจวงจรการทำงานของเพจ (Page Lifecycle) ใน Ionic

 

Ionic Components

Module 6: Ionic Components

  • การออกแบบหน้าแอพพลิเคชั่นด้วย Component ที่ Ionic เตรียมไว้
  • เรียนรู้การใช้งาน Component ขั้นประยุกต์
  • การสร้างเพจแบบ Master  Detail
  • การใช้งาน HTTP Services และ Provider ใน Ionic
  • การสร้างแบบฟอร์ม
  • การตรวจสอบความถูกต้องของข้อมูล (Validations)
  • การเพิ่มข้อมูลไปที่ส่วน Backend

 

การใช้งาน Git Version Control กับ Ionic

Module 7: การใช้งาน Git Version Control กับ Ionic

  • การ Config โปรแกรม git ก่อนเริ่มใช้งาน
  • การ init git ในโปรเจ็กต์ Ionic
  • การ Add ข้อมูลเข้า git ผ่านโปรแกรม VS Code
  • การ Commit ข้อมูลใน VS Code
  • การส่งข้อมูล (push) ขึ้น Github / Bitbucket
  • การ Clone Project Ionic จาก github / Bitbucket มาใช้งาน
  • การติดตั้ง Node module component ในโปรเจ็กต์ที่ clone มา
  • การ add และ commit อัตโนมัตใน VS Code

 

การเก็บข้อมูลแบบ Local ด้วย Ionic Storage

Module 8: การเก็บข้อมูลแบบ Local ด้วย Ionic Storage

  • การติดตั้ง Storage
  • ขั้นตอนการใช้งานและเก็บข้อมูลแบบ Key/Value
  • การใช้งาน  Ionic Storage เพื่อเก็บข้อมูลแบบฐานข้อมูล (SQLite) แสดง เพิ่ม ลบ แก้ไข
  • การใช้งาน Ionic View สำหรับทดสอบบนเครื่องจริง

 

การใช้งาน web API (httpclient) แบบ RESTful Web Service

Module 9: การใช้งาน web API (httpclient) แบบ RESTful Web Service

  • สร้าง Web API ด้วย PHP framework อย่างง่ายๆ
  • ดึงข้อมูลจากฐานข้อมูล MySQL มาแสดงผลใน Web API
  • วิธีแสดงผลข้อมูลจาก Web API เป็น  JSON
  • เรียกใช้งาน  API ด้วย Angular 5 Restful API/Web Services และ RxJS
  • การจัดการข้อมูลได้จาก Web API ด้วย Observable
  • การดึงข้อมูลจาก Web Service มาแสดงผลใน Listviews
  • การเพิ่มตัวช่วย Loading แสดงหน้าจอโหลดข้อมูล
  • การเพิ่ม Component Pull to refresh เพื่ออัพเดทข้อมูลใหม่
  • การปรับแต่งการ Scroll ข้อมูลให้มีประสิทธิภาพด้วย VirtualScroll

 

การเขียน Ionic เชื่อมต่อกับ Firebase

Module 10: การเขียน Ionic เชื่อมต่อกับ Firebase

  • การสร้าง Account ใน Firebase
  • การใช้งาน Realtime Database
  • การทำ CRUD (แสดง เพิ่ม ลบ แก้ไข) ข้อมูลใน Firebase

 

การใช้งาน Ionic Native

Module 11: การใช้งาน Ionic Native

  • กำหนด Runtime Permission
  • การติดต่อกับกล้องถ่ายภาพ (Camera)
  • การเขียนคำสั่งเรียกใช้งานกล้องถ่ายภาพ
  • การเลือกภาพจาก gallery
  • การอัพโหลดภาพที่ถ่ายขึ้น Server
  • การใช้งาน Barcode และ QR Code Scanner
  • การใช้งาน InAppBrowser
  • การใช้งาน Toasts

 

การใช้งาน Google Map ใน Ionic

Module 12: การใช้งาน Google Map ใน Ionic

  • เพิ่ม Google Map ลงใน Ionic App
  • ปรับแต่ง Google Map
  • เพิ่มฟังก์ชันให้ผู้ใช้ปักหมุด (marker) ในแผนที่ได้
  • เลือกแสดงผลพิกัดปัจจุบันที่ผู้ใช้เลือก
  • บันทึกพิกัดที่เลือกลงฐานข้อมูลผ่าน Web API
  • การใช้งาน Google Place

 

การทำ Push Notifications ใน Ionic

Module 13: การทำ Push Notifications ใน Ionic

  • การขอ API Key สำหรับ Push ข้อมูลใน Android
  • การขอ certificate สำหรับ Push ใน iOS ผ่าน APNS
  • การ setting Ionic App to generate device token
  • การตั้งค่า Server สำหรับ Push Notifications
  • การปรับแต่ง Icon และเสียงของการ Push Notifications
  • การทดสอบทั้งบน Android และ iOS

 

การจัดการข้อมูลการแสดงผลด้วย Pipes

Module 14: การจัดการข้อมูลการแสดงผลด้วย Pipes

  • รู้จัก Pipes ใน Ionic frameworks
  • การใช้งาน Built-in pipes ใน Angular
  • การสร้าง Custom Pipes ใน  Ionic
  • การจัดการข้อมูลแบบ upercase, lowercase, number, percent, currency และ date formatting

 

การปรับแต่งรายละเอียดของแอพพลิเคชั่น

Module 15: การปรับแต่งรายละเอียดของแอพพลิเคชั่น

  • การปรับแต่งไอคอน (Icon) และ Splash Screen ของแอพ
  • การปรับเปลี่ยนชื่อและไอดีของแอพ
  • การปรับแต่งการแสดงผลแอพ แนวตั้ง หรือแนวนอนตามต้องการ

 

Workshop แอพอ่านข่าวเชื่อมต่อจาก Web Service

Module 16: Workshop แอพอ่านข่าวเชื่อมต่อจาก Web Service

  • การเตรียมโปรเจ็กต์
  • การออกแบบหน้าจอด้วย Ionic Component
  • การใส่ Navigation ในแอพพลิเคชั่น
  • การเตรียมฐานข้อมูลสำหรับ web service
  • การใช้ PHP framework สร้าง Web API
  • แสดงผลข้อมูลเป็น JSON
  • สร้าง Route สำหรับการ GET Request
  • การดึงข้อมูลรูปภาพและเนื้อหาข่าวมาแสดงใน listview ของ Ionic
  • การสร้างหน้ารายละเอียด (Detail) ของข่าว
  • การปรับแต่งความเรียบร้อยด้วยการใส่ Loading component และ Pull to refresh
  • การทดสอบ Build และ Run ขึ้นอุปกรณ์ (device) จริง

 

Workshop การถ่ายภาพหรือเลือกจาก gallery และอัพโหลดขึ้น Server

Module 17: Workshop การถ่ายภาพหรือเลือกจาก gallery และอัพโหลดขึ้น Server

  • เตรียมฐานข้อมูลสำหรับเก็บข้อมูลที่อัพโหลด
  • เขียน Web Service สำหรับการอัพโหลดไฟล์รูป และแสดงผล
  • สร้างโปรเจ็กต์ใน Ionic พร้อมออกแบบหน้าจอ UI ด้วย Ionic Component
  • ติดตั้ง Cordova Plugin ต่าง ๆ ที่เกี่ยวข้องกับการถ่ายรูป การจัดการไฟล์ และการอัพโหลดไฟล์ขึ้น Server
  • เขียนคำสั่งเรียกใช้งานกล้องถ่ายภาพ
  • เขียนคำสั่งจัดการภาพที่ถ่าย ย่อ ลดขนาด หมุนภาพ
  • เขียนชุดคำสั่งอัพโหลดไฟล์ผ่าน Web Service
  • แสดงผลไฟล์ภาพที่ถ่ายโดยดึงจากข้อมูลจาก  Web API ที่สร้างไว้
  • การปรับแต่งความเรียบร้อยด้วยการใส่ Loading component และ Pull to refresh
  • การทดสอบ Build และ Run ขึ้นอุปกรณ์ (device) จริง

 

Workshop แอพสแกน BarCode / QR Code สินค้าใน Stock

Module 18: Workshop แอพสแกน BarCode / QR Code สินค้าใน Stock

  • เตรียมฐานข้อมูล Stock สินค้า
  • เขียนเว็บ API แสดง Stock สินค้า
  • เขียนเว็บ API รับข้อมูล BarCode จากแอพ และค้นหารายการสินค้า
  • สร้างโปรเจ็กต์ใน Ionic พร้อมออกแบบหน้าจอ UI ด้วย Ionic Component
  • ติดตั้ง Cordova Plugin ต่าง ๆ ที่เกี่ยวข้องกับกับการเรียกใช้งานกล้อง เรียกใช้งาน BarCode / QR Code Scanner 
  • เขียนคำสั่งส่งข้อมูลไปค้นหารายการสินค้าผ่าน Web API
  • แสดงผลรายละเอียดสินค้าที่ค้นพบจาก Web API
  • การปรับแต่งความเรียบร้อยด้วยการใส่ Loading component และ Pull to refresh
  • การทดสอบ Build และ Run ขึ้นอุปกรณ์ (device) จริง

 

Workshop การออก Report ใน Ionic app

Module 19: Workshop การออก Report ใน Ionic app

  • การแสดงผลข้อมูล Report จาก Web API
  • การแสดงผลกราฟแบบต่าง (แท่ง เส้น โดนัท) ด้วย Chart.js ใน Ionic
  • การ Export ข้อมูลออกเป็น PDF
  • การ Export ข้อมูลออกเป็น ZIP
  • การ Export ข้อมูลออกเป็น CSV
  • การออก Report เป็นรายสัปดาห์ เดือน รายปี และอื่น ๆ ตามต้องการ
  • การปรับแต่งความเรียบร้อยด้วยการใส่ Loading component และ Pull to refresh
  • การทดสอบ Build และ Run ขึ้นอุปกรณ์ (device) จริง

 

แนวทางการ Publish App ขึ้น Store

Module 20: แนวทางการ Publish App ขึ้น Store

  • การตั้งค่า Bundle ID, App Name, เลขเวอร์ชันใหักับ App
  • การลดขนาดไฟล์รูปภาพก่อน Build App
  • การปรับแต่ง Icon และ Splash Screen ก่อนขึ้น Store
  • การ Publish to Google Play Store
  • การ Publish to Apple AppStore

 

Template Ionic สำหรับแอพร้านอาหาร

Template Ionic สำหรับแอพร้านอาหาร

 

Bonus พิเศษส่งท้าย

  • ตัวอย่าง Workshop การส่งข้อมูลแจ้งเตือนใน Line group และไลน์ส่วนตัว
  • ตัวอย่าง Workshop ระบบตัดชำระเงินผ่าน PayPal
  • ตัวอย่าง Workshop การสร้าง QR Code เพื่อไว้ชำระเงิน
  • แถม Template Ionic สำหรับแอพอ่านข่าว แอพร้านอาหาร และแอพถ่ายภาพแสดงแกลอรี่
  • แถมไฟล์ภาพ Icon และ Splash Screen ที่ออกแบบจาก Photoshop (PSD)

คำค้นหา:

หลักสูตร Ionic Frameworkอบรม Ionicสอน ionicเรียนสร้าง app androidสอนเขียนแอพ iosCross Platform Mobile Apphtml5angular 5สถาบันฝึกอบรม ionicจัดอบรมหลักสูตร cross platformหลักสูตร android และ iosสอน ionic3อบรม ioinc3workshop ionic2workshop ionic3อาจารย์สอน ionicสถานที่เรียน ionicสร้างโปรเจ็กต์ด้วย ionicสอน ioinc ราคาถูกสอน ioinc ชลบุรี สอนเขียนแอพกรุงเทพสอนเขียนแอพ android ชลบุรี สอนเขียนแอพ ios android ชลบุรีจัดอบรมนอกสถานที่ cross platformอบรมนอกสถานที่ ionic

อัพเดทข้อมูลเมื่อ:

  • 2018-03-07 14:16:19