เล่นวิดีโออัตโนมัติ
จบเลคเชอร์อัตโนมัติ
เลคเชอร์ก่อนหน้า
จบเลคเชอร์ และไปยังเลคเชอร์ถัดไป
ค้นพบวิธีสร้างแอพ iOS และ Android ด้วย HTML5, PhoneGap, และ Ionic Framework
เป้าหมายของการสร้าง Mobile Application และเทคโนโลยีที่เกี่ยวข้อง
เรียนรู้โลกของการพัฒนาแอพจากข้าวไข่เจียว (6:17)
กำหนดเป้าหมายของการสร้าง Mobile App (5:21)
ทำความรู้จักการพัฒนา Mobile Application แบบ Hybrid
รู้จักกับการพัฒนา Mobile Application แบบ Hybrid (6:23)
ทำความรู้จักเทคโนโลยี PhoneGap (2:37)
ความแตกต่างระหว่าง PhoneGap และ Cordova (3:39)
โครงสร้างของ Cordova (3:55)
รู้จักกับ Ionic Framework
รู้จักกับ Ionic Framework (6:10)
เวอร์ชั่นของระบบที่ Ionic Framework รองรับ (1:47)
ระบบและโปรแกรมที่ใช้ใน Ionic Framework (1:48)
ใช้ Windows หรือ Mac ดี? (2:23)
Editor ที่ใช้ในการพัฒนา Cross Platform Mobile Application
Editor สำหรับใช้ในการพัฒนาแอพ Ionic (1:56)
ติดตั้งโปรแกรม Sublime Text (Windows) (1:23)
ติดตั้งโปรแกรม Sublime Text (Mac OS X) (1:35)
วิธีติดตั้ง Package Manager ให้ Sublime Text (1:57)
รายชื่อ Package ที่จะใช้ในหลักสูตร (0:28)
วิธีติดตั้ง Sublime Package สำหรับ Ionic Framework (1:21)
เตรียมเครื่อง Windows เพื่อพัฒนาแอพ Android
สิ่งที่ควรรู้สำหรับคนใช้ Windows (0:42)
วิธีติดตั้ง Chocolatey (2:17)
วิธีติดตั้ง Node JS (0:57)
วิธีติดตั้ง Cordova และ Ionic Framework (1:35)
วิธีติดตั้ง Git (1:06)
วิธีติดตั้ง JDK (2:16)
วิธีติดตั้ง Apache Ant (0:45)
วิธีติดตั้ง Android Studio และตั้งค่า Path ของ JDK และ Android SDK (10:14)
เตรียมเครื่อง Mac OS X เพื่อพัฒนาแอพ Android
ระบบและโปรแกรมที่ใช้บน Mac OS X (1:16)
วิธีติดตั้ง Node JS (1:27)
วิธีติดตั้ง Cordova และ Ionic Framework (1:57)
วิธีติดตั้ง Android Studio (4:36)
วิธีตั้งค่า PATH ของ Android SDK (4:24)
เตรียมเครื่อง Mac OS X เพื่อพัฒนาแอพ iOS
รู้จักกับ ios-sim และ ios-deploy (1:05)
วิธีติดตั้ง ios-sim (0:30)
วิธีติดตั้ง ios-deploy (1:00)
สร้างแอพแรกของพวกเรา
ทำความรู้จักกับ Ionic CLI (2:02)
วิธีสร้างโปรเจค Ionic (Windows) (1:38)
วิธีสร้างโปรเจค Ionic (Mac OS X) (1:51)
ทำความเข้าใจโครงสร้างของโปรเจค Ionic (2:25)
คำสั่งรัน Web Server: ionic serve (1:47)
วิธีทดสอบแอพบน Ionic Web Server (Windows) (1:45)
วิธีทดสอบแอพบน Ionic Web Server (Mac OS X) (1:42)
วิธีใช้ Live Reload (2:26)
การปรับแต่งแอพพลิเคชั่นเบื้องต้น
วิธีสร้าง และกำหนดไอคอนในแอพพลิเคชั่น ด้วย Ionic CLI (1:22)
วิธีสร้าง และกำหนด Splash Screen ในแอพพลิเคชั่น ด้วย Ionic CLI (1:29)
วิธีตั้ง ID ให้กับแอพพลิเคชั่น (App ID) (0:42)
วิธีตั้งชื่อแอพพลิเคชั่น (App Name) (0:48)
วิธีกำหนดเวอร์ชั่นของแอพ (App Version) (0:34)
เพิ่มและลบ Mobile Platform ให้โปรเจค Ionic
วิธีเพิ่ม/ลบ Android Platform (ใช้ได้ทั้ง Mac OS X และ Windows) (0:41)
วิธีเพิ่ม/ลบ iOS Platform (Mac OS X) (1:03)
รู้จักและใช้งาน Emulator สำหรับ iOS และ Android
รู้จักกับ Emulator (0:53)
รู้จักกับ Genymotion (1:04)
วิธีติดตั้ง Genymotion (Windows) (0:42)
วิธีติดตั้ง Genymotion (Mac OS X) (0:35)
วิธีเลือก และติดตั้ง Android Virtual Device บน Genymotion (1:12)
วิธีทดสอบแอพบน Genymotion (Mac OS X และ Windows) (1:25)
ทดสอบแอพบน iOS Simulator (Mac OS X)
วิธีเลือกและติดตั้ง iOS Simulator (0:23)
วิธีทดสอบแอพบน iOS Simulator ด้วย Command line (0:31)
วิธีทดสอบแอพบน iOS Simulator ด้วย Xcode (0:42)
ทดสอบแอพบนอุปกรณ์ Android (ใช้ได้ทั้ง Windows และ Mac OS X)
ทำความเข้าใจการทดสอบแอพ Android บนเครื่องจริง (1:47)
วิธีเปิด Developer Mode บน Android (1:47)
ตามหา USB Driver สำหรับอุปกรณ์ Android (Windows) (0:37)
วิธีจับคู่เครื่อง Android เข้ากับคอมพิวเตอร์ (ใช้ได้ทั้ง Windows และ OS X) (1:25)
ทดสอบรันแอพบน Android Device (ใช้ได้ทั้ง Windows และ OS X) (1:00)
ทดสอบแอพบนอุปกรณ์ iOS (OS X)
ทำความเข้าใจการทดสอบแอพ iOS บนเครื่องจริง (2:23)
วิธีเพิ่ม Apple Developer Account เข้า Xcode (0:54)
วิธีจับคู่เครื่อง iOS เข้ากับเครื่อง Mac (1:30)
ทดสอบรันแอพบนอุปกรณ์ iOS ด้วย Xcode (OS X) (0:59)
ทดสอบรันแอพบนอุปกรณ์ iOS ด้วย Terminal (OS X) (0:54)
เรียนรู้ Ionic UI: แอพคิด Vat 7%
รู้จักกับระบบ UI ของ Ionic (1:51)
หน้าตาแอพคิด Vat 7% (0:43)
เริ่มต้นสร้างโปรเจค แอพคิด Vat 7% (1:38)
สร้างหน้า Mobile Page: Pane (1:43)
ส่วนหัวของเพจ: ion-header-bar (1:48)
ส่วนเนื้อหา: ion-content (0:59)
กล่องข้อความรับข้อมูล: input (2:11)
สร้างปุ่ม Action: button (1:53)
ควบคุมข้อความ: Heading & Paragraph (0:47)
ทดสอบแอพ Vat 7% ภาค UI (0:46)
พื้นฐาน Angular JS: แอพคิด Vat 7%
ความเชื่อมโยงกันของ JavaScript และ Angular (3:44)
ทำความเข้าใจภาพรวมของ Angular ด้วยหนังไซไฟ (4:36)
รู้จักกับ Module (1:26)
Module คือสมองของแอพ (2:03)
รู้จักกับ Controller (1:43)
สร้างและใช้งาน Property ใน Controller (1:37)
วิธีใช้งาน Expression (1:46)
สร้าง Method ใน Controller (1:11)
วิธีใช้งาน ng-model กับ Web form (0:53)
ใช้งาน ng-click กับปุ่ม และ method (1:10)
ทดสอบแอพคิด Vat 7% ภาค Angular JS (0:29)
App #1: แอพรวมเบอร์โทรฉุกเฉิน
ตัวอย่างแอพรวมเบอร์โทรฉุกเฉิน (0:19)
เริ่มต้นโปรเจคแอพรวมเบอร์โทรฉุกเฉิน (1:25)
แสดงข้อมูลแบบ Array ด้วย ng-repeat (2:55)
สร้าง List งามๆ ด้วย ion-list ของ Ionic (0:58)
จัด layout ของ List Item (1:03)
กำหนด link เป็นเบอร์โทรออก (1:28)
ตั้งค่าให้แอพ สามารถเรียกใช้ระบบโทรศัพท์ได้ (1:23)
ทดสอบแอพ (0:48)
App #2: แอพอ่านข่าว จาก Web API (ภาค Mobile App)
ตัวอย่างแอพแสดงข่าว (0:59)
เริ่มต้นสร้างโปรเจค News Today (1:01)
สร้าง Template สำหรับหน้า Master และ Detail (2:24)
สร้าง ion-nav-bar และ ion-nav-view (0:45)
ตั้งค่า Routing ของแอพ (4:36)
สร้าง link จากหน้า Master ไปหน้า Detail (2:54)
กำหนดปุ่มย้อนกลับ (1:04)
สร้าง Controller สำหรับหน้า Master (4:12)
สร้าง Card UI เป็น List แสดงข่าว (3:50)
ใช้ Date Filter (1:46)
สร้าง Controller สำหรับหน้า Detail (1:47)
ส่งหัวข้อข่าวข้าม page ด้วย $state (4:40)
ดึงข้อมูลที่ส่งข้าม Page ด้วย $stateParams (4:03)
รู้จักกับ Service (3:12)
สร้าง Service จัดการข้อมูลข่าวแทน Controller (2:21)
เรียกใช้ Service ใน MasterController (1:59)
เรียกใช้ Service ใน DetailController (2:05)
สร้าง Layout แสดงรายละเอียดข่าวในหน้า Detail (1:49)
App #2: แอพอ่านข่าว จาก Web API (ภาค Web API)
วิธีติดตั้ง XAMPP (Windows) (1:42)
วิธีใช้งาน XAMPP (Windows) (3:08)
วิธีติดตั้ง Composer (Windows) (1:32)
วิธีติดตั้ง MAMP (OS X) (1:19)
วิธีใช้งาน MAMP (OS X) (2:54)
วิธีติดตั้ง Composer (OS X) (1:21)
วิธีติดตั้ง Slim Framework (1:57)
สร้าง Web API ด้วย Slim แบบง่ายๆ (4:52)
สร้าง Routing รับ GET Request ง่ายๆ (3:14)
แนวคิดการตรวจสอบ Error บน PHP Web API (1:25)
วิธีหา Log File (1:15)
วิธีเช็ค Error ใน Log File (2:10)
วิธี Response ค่ากลับจาก Web API เป็น JSON (2:35)
ดูข้อมูล JSON สบายตา บน Google Chrome ด้วย JSON View (1:27)
สร้าง Routing สำหรับ GET Request เพิ่มเติม (3:29)
แนวทางแก้ปัญหา Routing ของ Slim (2:12)
วิธี Response ค่า Array กลับจาก Web API เป็น JSON (3:58)
สร้าง Routing สำหรับ GET Request แบบมี URL Parameter (4:06)
สร้าง Routing สำหรับ POST Request (3:32)
แหล่งข้อมูลเพิ่มเติมสำหรับ Web API (1:08)
App #2: แอพอ่านข่าว จาก Web API (ภาครวมร่าง)
ดาวน์โหลดโปรเจค MyAPI (1:46)
สำรวจโปรเจค My API (1:23)
ทดสอบส่ง GET Request แบบธรรมดา (4:23)
วิธีแก้ปัญหาเรื่อง XMLHTTPRequest (3:16)
วิธีแสดง object ใน JavaScript Console (1:24)
ขอข้อมูล JSON แบบ Array (2:40)
วิธีส่งตัวแปรไปกับ GET Request (2:06)
วิธีส่ง POST Request (4:32)
วิธีสร้างส่วนเชื่อมต่อฐานข้อมูลใน Slim Web API (7:15)
App #2: แอพอ่านข่าวจาก Web API (ลองของจริง)
วิธีดาวน์โหลดและติดตั้ง News Web API (1:12)
วิธีเตรียมฐานข้อมูล (Mac) (2:04)
วิธีเตรียมฐานข้อมูล (Windows) (2:03)
วิธีดาวน์โหลดโปรเจคแอพอ่านข่าวเวอร์ชั่นพร้อมดึงข้อมูล (2:03)
สำรวจโปรเจคแอพอ่านข่าวเวอร์ชั่นอัพเดต (1:59)
วิธีใช้ Web API ดึงข่าวจากฐานข้อมูล (4:46)
วิธีใช้ Service ดึงข้อมูลข่าวจาก Web API (2:59)
วิธีปรับ MasterController ให้เรียกข้อมูลข่าวด้วย News Service (3:29)
วิธีเพิ่ม URL อ้างอิงไฟล์รูปภาพ (2:42)
วิธีแสดงไอคอน Loading ด้วย $ionicLoading (2:29)
วิธีดาวน์โหลดโปรเจคแอพอ่านข่าว เวอร์ชั่นตัวอย่างการลงชื่อเข้าใช้ (Sign in) (1:00)
สำรวจโปรเจคแอพอ่านข่าว เวอร์ชั่นตัวอย่าง Login (2:43)
วิธีเพิ่ม Method Sign In ใน News Service (4:51)
วิธีอ่านค่า JSON จาก POST Request ใน Web API (1:45)
วิธีเรียกใช้ News Service เพื่อส่งข้อมูลไปให้ Web API (2:38)
วิธีตรวจสอบการ Sign In และอนุญาตให้เข้าใช้งาน (2:13)
วิธีซ่อนปุ่ม Back ในหน้า Master (0:50)
วิธีสร้างไฟล์ Android Package (APK) สำหรับใช้งาน/อัพโหลดขึ้น Google Play Store
วิธีนำ Project เข้ามาใช้งานใน Android Studio (1:36)
วิธีสร้างไฟล์ APK ผ่าน Android Studio (4:46)
Teach online with
ทดสอบแอพ
จบเลคเชอร์ และไปยังเลคเชอร์ถัดไป