Mobile Web App Development

Mobile Web App Development

ชุดการเรียน การพัฒนา Web App สำหรับอุปกรณ์พกพา
฿650.00
สินค้าชิ้นนี้จัดส่งฟรี!
จัดส่งได้ทันทีใน 24 ชั่วโมง


ชุดการเรียนนี้ จะแนะนำท่านอย่างตรงไปตรงมาเกี่ยวกับเรื่องของ Web App 

ซึ่งเมื่อพูดถึง Web App มันก็เป็นได้ทั้ง App ทั่วๆ ไป และก็ App for Mobile แต่คำว่า App มา Hot กันในเรื่องของ Mobile การพูดว่า "app" สั้นๆ ก็ตามความที่มันอยู่บนอุปกรณ์พกพาที่ต้องการความกะทัดรัด จากคำว่า application จึงกลายเป็นคำว่า app เหมือนกับ CWinApp นั่นแหละ

Web App ก็คือ การเอา Web มาทำให้อยู่ในรูปของ App คือ ทำให้ Web มีความสามารถที่ต่างออกไปจากแค่เว็บธรรมดาๆ ที่แสดงข้อมูลจากฐานข้อมูล, insert, Update, Register, Edit, แสดงตาราง, ลืมรหัสผ่าน, เปลี่ยนรหัสผ่าน ฯลฯ งานของเว็บที่มีแค่ระบบฐานข้อมูลเป็นเรื่องพื้นฐานที่โดยมากผู้ที่เรียนเขียนเว็บจะสามารถทำกันได้ แต่ Web App ที่ขึ้นชื่อว่า app นั้นจะต้องทำได้มากกว่านั้น และจะเป็นพื้นฐานให้กับ app ในยุคต่อๆ ไป

ผู้เขียนเคยเล็งเอาไว้ถึงการทำงานแบบ Based on browser ในสมัยที่ยังติดตั้ง Linux ตัว Slackware ลงบนคอมที่มี Harddisk แค่ 256MB ตอนนั้น Internet กำลังเข้ามา และเริ่มบูมขึ้นเรื่อยๆ จนเกิดโปรแกรมที่ทำงานผ่านหน้าเว็บ และวันนี้ การทำงานแบบ on Web Browser ก็มาถึง และต่อไป เรื่องของ Web App ก็จะกลายเป็นตัวเลือกหนึ่งในการสร้าง App ในยุคต่อๆ ไปที่ต้อง independent ไม่ขึ้นกับใครและ Cross Platform หรือ เขียนน้อยแต่ทำได้มาก 

แอพ หรือ app มาจาก Application หรือโปรแกรมประยุกต์ มันก็คือโปรแกรมที่ถูกพัฒนาขึ้นโดยการใช้ภาษาระดับสูงอย่าง C/C++/Java คอมไพล์ให้เป็นไบนารี่แล้วเอาไปติดตั้งโดยผ่านทาง Store ของ OS มือถือนั้นๆ จริงๆ ก็สามารถติดตั้งแบบภายนอกได้เหมือนกัน แต่การเขียน App แบบ Native อย่างนี้มันใช้เวลาและใช้ความรู้ในการเขียนโปรแกรมพอสมควร เอาง่ายๆ ผู้เขียนจะต้องมีความสามารถในด้านการเขียนโปรแกรม ซึ่งยกตัวอย่างครูที่สอนวิชาสังคมท่านหนึ่งอาจจะไม่มีโอกาสทำแอพแบบนั้นได้เลย 

แต่ถ้าเรามองถึง Web App มันก็คือการเอา Web มาใส่ความสามารถให้เหมือนกับ App ซึ่งท่านแค่ศึกษาเรื่องของการทำเว็บ HTML ก็สามารถสร้างเนื้อหาขึ้นมาได้แล้ว ใส่รูปได้ และถ้าศึกษาต่ออีกนิด ก็ใส่การตอบสนองเล็กๆ น้อยๆ ทำแบบทดสอบ online ได้ ทำสื่อการเรียนวิชาสังคมได้ และถ้าออกแบบให้อยู่ในรูปของ Mobile มันก็จะง่ายมากขึ้นในการสำหรับการเข้าถึงโดยใช้อุปกรณ์พกพา ซึ่ง Web Browser บนเครื่องเหล่านั้นรองรับมาตรฐาน HTML และเทคนิคลูกเล่นต่างๆ กันได้หมด ดังนั้น มันจึงเป็น Platform ที่น่าสนใจและต่อยอดไอเดียให้กว้างขึ้นได้ ไม่ใช่เฉพาะต้องมานั่งหน้าจอคอมพิวเตอร์และใช้ Mouse คลิกเท่านั้น 

Web App ด้วยความสามารถของ Script มันสามารถทำอะไรได้หลายๆ อย่างเหมือนกับที่ App แบบไบนารี่ทำได้ มีแต่ข้อจำกัดบางอย่างที่ในบางลักษณะงานและโดยมากแล้วก็แทบจะไม่จำเป็นเลย พอเป็นแบบนี้แล้ว ถ้าคิดจะพัฒนา app สักตัวล่ะก็ การพัฒนา Web App ก็เป็นตัวเลือกที่น่าสนใจไม่น้อยเลยทีเดียว

map2.png

ชุดการเรียนนี้ จะนำท่านเข้าสู่การใช้ HTML, CSS และ JavaScript โดยใช้ชุดคำสั่ง jQuery Mobile ในการพัฒนา Web App for Mobile ซึ่งเราจะชี้เข้าไปที่ Platform ของอุปกรณ์พกพา การออกแบบ Interface ก็จะเน้นไปที่การใช้งานที่รวดเร็ว กดได้ทั่วจอ และแสดงข้อมูลได้ครบถ้วนชัดเจน ฯลฯ ขอบเขตของการออกแบบ App จะมีปลายทางที่ชัดเจนมากขึ้น และพัฒนาได้ในระยะเวลาอันสั้น



ในชุดการสอนนี้มีอะไรบ้าง

1. DVD วีดีโอสอนทั้งหมด 1 แผ่น บันทึกเป็นวีดีโอเต็มจอภาพ ขนาด 1366x768 (H.264 AAC HD)

2. คู่มือการเรียนแบบ PDF 

** ตั้งแต่ปี 2017 เป็นต้นไป คู่มือการเรียนจะส่งให้กับผู้เรียนทาง E-Mail ในรูปแบบ PDF โดยผู้เรียนสามารถเปิดอ่านจากหน้าจอคอมพิวเตอร์หรือพิมพ์ออกมาอ่านได้ (ไม่อนุญาตให้เผยแพร่หรือทำซ้ำ ใช้เฉพาะการเรียนรู้ส่วนบุคคลเท่านั้น)


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

1. รู้จัก HTML, เขียน Script ได้เบื้องต้น <ดูชุดการเรียน HTML>

2. jQuery เบื้องต้น <ดูชุดการเรียน jQuery>

ถ้าหากท่านมีพื้นฐานเหล่านี้แล้ว ขึ้นชุดการเรียนนี้ได้เลยไม่ต้องย้อนกลับมา


ตัวอย่างวีดีโอ





สารบัญ


1. แนะนำสู่ Web App 

เปรียบเทียบ Web App กับ Native App ข้อแตกต่าง ขอบเขต และการเขียนที่ต่างกัน

2. เริ่มต้นด้วย Layout 

เริ่มต้นเขียนโดยเริ่มจาก Layout ง่ายๆ แบ่งเป็น Page และภายในก็แบ่งออกเป็นส่วนๆ กันอย่างไร


3. การเพิ่ม Page

มาดูการเพิ่ม Page ใหม่และการ Link ไปแบบต่างๆ การทำ Transition และการทำ Page ให้เป็น Dialog

4. ทดสอบบน Safari, Chrome, Firefox

5. การทำปุ่ม

การเขียนแท็กให้เป็นปุ่ม และการใส่รูปไอคอน

6. มาลองเขียนแอพง่ายๆ กัน

มาลองเขียนแอพง่ายๆ กันโดยใช้ JavaScript ช่วยโซ้ยคำตอบ

7. การเขียนโค้ดให้หาคำตอบ

สืบเนื่องจากบทที่ 6 มาเขียนโค้ดต่อเพื่อคำนวณค่ากัน

8. การทำ Header Bars และ Footer Bars

9. เขียนแอพ Numbers ภาค 1

มาเขียนแอพง่ายๆ สักตัว โดยใช้ JavaScript + PHP ช่วย มาดูกันว่าถ้าเราจะแทรกโค้ด PHP ใน Layout จะทำได้อย่างไร และจะดึงค่าผลลัพธ์จาก PHP มาใส่ไว้ใน JavaScript ได้อย่างไร

10. เขียนแอพ Numbers ภาค 2

ต่อจากบทที่ 9 มาดูการตรวจคำตอบกัน

11. เขียนแอพ Numbers ภาค 3

ต่อจากบทที่ 10 มาดูการแสดงผลของการตรวจคำตอบกัน โดยเราจะใช้ฟังก์ชั่นของ JavaScript ให้มีการ Delay สักเดี๋ยวก่อนที่จะผลัดไปหน้าต่อไป

12. รันบนอุปกรณ์ต่างๆ

มาดูผลการรันบนอุปกรณ์ที่ต่างๆ กัน

13. การทำอุปกรณ์ Collapse กัน

14. การทำ Collapse เยอะๆ จาก Text File

มาดูการทำตัว Collapse โดยโหลดข้อมูลจาก Text File (.txt) โดยในบทนี้ เราจะต้องใช้ PHP ในการโหลดข้อมูลและแสดงตัว Collapse ขึ้นมาจากโค้ด PHP เอง มาดูการเขียนกันว่าเราจะเขียนแทรกโค้ด PHP ได้อย่างไร

15. การทำ Collapse เยอะๆ จาก MySQL

ลองนึกถึงการดึงข้อมูลมาจาก MySQL มาใส่ในตัว Collapse นี้กัน คล้ายๆ กับบทที่แล้ว แต่เราเปลี่ยนต้นทางจาก Text File ไปเป็น MySQL

16. การทำ Popup

การทำหน้า Popup ที่ใช้แสดงข้อความง่ายๆ และการทำ Transition ของ Popup 

17. เรื่องของ Form ภาค 1

การทำ <Form> และการ Submit ข้อมูลส่งให้กับ PHP บทนี้ ท่านจะได้รู้จักกับการสร้าง Label ผูกกับ Text Box


18. เรื่องของ Form ภาค 2 

เมื่อรับข้อมูลจากฟอร์มแล้ว ส่งต่อให้กับ PHP เพิ่มข้อมูลเข้าไปใน MySQL โดยตรวจสอบด้วยว่ามีข้อมูลนี้หรือยัง 


19. ทำเพจให้เป็น Dialog

มาดูการทำให้ฟอร์มอยู่ในรูปของ Dialog กัน มาดูกันว่ามันจะยังทำการ Submit ได้เหมือนเดิมหรือไม่ และจะแก้ไขได้อย่างไร

20. การตรวจจับ Event ในเพจ

การจับ Event ในเพจทำได้อย่างไร เมื่อเพจถูกโหลด และเมื่อถูกซ่อน เราตรวจจับแล้วเราจะเขียนโค้ดให้ตอบสนองกับอะไรได้บ้าง


21. การตรวจจับการ Swipe

มาดูการเขียนโค้ดตรวจจับการ Swipe, Scroll, การ Tap และการ Tap ค้างเอาไว้ 1 วินาทีกัน

22. รู้จักกับ Panel

Panel จะช่วยให้เรามีพื้นที่ในการแสดงผลมากยิ่งขึ้น มาดูการแสดงผล Panel ด้านซ้ายและด้านขวากัน