เป้าหมายของการสร้าง Mobile Application และเทคโนโลยีที่เกี่ยวข้อง
ทำความรู้จักการพัฒนา Mobile Application แบบ Hybrid
รู้จักกับ Ionic Framework
Editor ที่ใช้ในการพัฒนา Cross Platform Mobile Application
เตรียมเครื่อง Windows เพื่อพัฒนาแอพ Android
เตรียมเครื่อง Mac OS X เพื่อพัฒนาแอพ Android
เตรียมเครื่อง Mac OS X เพื่อพัฒนาแอพ iOS
สร้างแอพแรกของพวกเรา
-
ทำความรู้จักกับ 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)
การปรับแต่งแอพพลิเคชั่นเบื้องต้น
เพิ่มและลบ Mobile Platform ให้โปรเจค Ionic
รู้จักและใช้งาน Emulator สำหรับ iOS และ Android
ทดสอบแอพบน iOS Simulator (Mac OS X)
ทดสอบแอพบนอุปกรณ์ Android (ใช้ได้ทั้ง Windows และ Mac OS X)
ทดสอบแอพบนอุปกรณ์ iOS (OS X)
เรียนรู้ 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
