This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
เล่นวิดีโออัตโนมัติ
จบเลคเชอร์อัตโนมัติ
เลคเชอร์ก่อนหน้า
จบเลคเชอร์ และไปยังเลคเชอร์ถัดไป
ค้นพบวิธีสร้างแอพ 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)
เรียนรู้โลกของการพัฒนาแอพจากข้าวไข่เจียว
ทำความเข้าใจขั้นตอน และสิ่งที่คุณจะเจอในการพัฒนา Mobile Application แบบง่ายๆ ด้วยข้าวไข่เจียว
จบเลคเชอร์ และไปยังเลคเชอร์ถัดไป