บทความชุดนี้มีจุดประสงค์เพื่อเป็นแหล่งข้อมูลเริ่มต้นสำหรับผู้ที่สนใจพัฒนาแอพบน Windows 8 ซึ่งเป็นเทคโนโลยีการพัฒนาซอฟต์แวร์แบบใหม่ที่เพิ่งเผยแพร่สู่ตลาดพร้อมกับ Windows 8 และยังขาดเอกสารหรือคู่มือภาษาไทยอีกมาก

บทความชุดนี้ได้รับการสนับสนุนจากบริษัทไมโครซอฟท์ ประเทศไทย จำกัด แต่เนื้อหาทั้งหมดเขียนโดยทีมงาน Blognone

แนวทางการพัฒนาแอพบน Windows 8

แอพบน Windows 8 (เดิมทีเรียก Metro app แต่ภายหลังไมโครซอฟท์เปลี่ยนคำเรียกเป็น Windows Store app) ต่างไปจากแอพบนวินโดวส์แบบเดิมๆ มาก โดยมีลักษณะคล้ายกับแอพบนอุปกรณ์พกพามากกว่า

เทคโนโลยีเบื้องหลังของแอพเหล่านี้คือ WinRT ซึ่งเป็น API ชุดใหม่ที่เพิ่งมีใน Windows 8 และเทียบได้ใกล้เคียงกับ Win32 API ในวินโดวส์รุ่นก่อนๆ

รายละเอียดของ WinRT อ่านเพิ่มเติมได้จากบทความเก่าของ Blognone คือ รู้จักกับ Metro Style App และ WinRT คู่หูของการพัฒนาโปรแกรมบน Windows 8

การพัฒนาแอพบน Windows 8 สามารถเลือกภาษาโปรแกรมได้ทั้งหมด 3+1 แบบ ได้แก่

• JavaScript เป็นภาษาโปรแกรม และ HTML เป็นภาษากำหนด UI (เหมาะสำหรับนักพัฒนาเว็บ)
• C# หรือ Visual Basic เป็นภาษาโปรแกรม และ XAML เป็นภาษากำหนด UI (เหมาะสำหรับนักพัฒนาสาย .NET)
• C++ เป็นภาษาโปรแกรม และ XAML เป็นภาษากำหนด UI (เหมาะสำหรับนักพัฒนา C/C++)
• C++ เป็นภาษาโปรแกรม และ DirectX สำหรับการสร้างเกม (สำหรับการสร้างเกมบน Windows 8)

บทความชุดนี้จะใช้แนวทาง JavaScript/HTML เป็นหลัก เนื่องจากเป็นภาษาที่เข้าใจง่ายและใช้กันแพร่หลายในกลุ่มนักพัฒนาเว็บ ส่วนผู้ที่ต้องการใช้ภาษาโปรแกรมแบบอื่นๆ สามารถอ่านรายละเอียดได้เองจาก Getting started with Windows Store apps แล้วเลือกภาษาโปรแกรมที่ต้องการ

แหล่งข้อมูลเพิ่มเติมสำหรับการพัฒนาแอพบน Windows 8

รายละเอียดเพิ่มเติมของกระบวนการพัฒนาแอพบน Windows 8 นอกเหนือจากบทความชุดนี้ สามารถอ่านได้จากหน้าเว็บ Windows Dev Center ซึ่งเป็นศูนย์รวมข้อมูลด้านการพัฒนาแอพบน Windows 8 อย่างเป็นทางการของไมโครซอฟท์ (บทความชุดนี้จะอ้างอิงเอกสารเพิ่มเติมบนเว็บไซต์แห่งนี้เป็นระยะๆ เท่าที่จำเป็น)

สำหรับนักพัฒนาที่มีประสบการณ์สร้างแอพบน iOS มาก่อน ไมโครซอฟท์เตรียมเอกสารสอนการใช้งานมาให้เป็นกรณีพิเศษ โดยสอนการพอร์ตแอพจาก iOS ในแง่มุมต่างๆ เช่น การเปลี่ยนจากภาษา Objective-C มาเป็น C#, การแปลงดีไซน์แอพบน iPad มาเป็น Windows 8 หรือการเทียบ API ของทั้งสองแพลตฟอร์มให้ค้นหาได้ง่าย เป็นต้น ผู้ที่เข้าข่ายเข้าไปดูได้ที่ Resources for iOS developers

นอกจากข้อมูลบนหน้าเว็บแล้ว ไมโครซอฟท์ยังแจกอีบุ๊กสอนการเขียนโปรแกรมบน Windows 8 ฟรี โดยมีเนื้อหาครอบคลุมการสร้างแอพด้วย HTML, CSS, JavaScript สามารถดาวน์โหลดได้ที่ Microsoft Press (มีทั้งแบบ PDF, EPUB, MOBI)

ดาวน์โหลดและติดตั้งซอฟต์แวร์ที่จำเป็น

ซอฟต์แวร์ที่จำเป็นสำหรับการพัฒนาแอพบน Windows 8 มีดังนี้

• ระบบปฏิบัติการ Windows 8
• Microsoft Visual Studio Express 2012 for Windows 8

Windows 8

การพัฒนาแอพสำหรับ Windows 8 จำเป็นต้องทำบนระบบปฏิบัติการ Windows 8 เท่านั้น ไม่สามารถพัฒนาบนวินโดวส์รุ่นเก่ากว่านี้ได้

ปัจจุบันไมโครซอฟท์ตั้งราคาขาย Windows 8 ต่ำลงมากเมื่อเทียบกับราคาของวินโดวส์รุ่นก่อนๆ การลงทุนซื้อหามาใช้งานพัฒนาแอพจึงง่ายกว่าเดิมมาก อย่างไรก็ตาม ถ้ายังไม่อยากเสียเงินจริงๆ ไมโครซอฟท์ก็มี Windows 8 Enterprise รุ่นใช้งานได้ฟรี 90 วันให้ดาวน์โหลดไปทดลองได้ก่อน (ข่าวเก่า Blognone)

ผู้ที่ต้องการดาวน์โหลด Windows 8 รุ่นทดสอบ สามารถเข้าไปดาวน์โหลดได้ที่ Windows 8 evaluation for developers

สำหรับวิธีการดาวน์โหลดและติดตั้ง Windows 8 อ่านรายละเอียดได้จากบทความ ขั้นตอนการดาวน์โหลดและติดตั้ง Windows 8 แบบ Upgrade

Visual Studio Express 2012 for Windows 8

เครื่องมือพัฒนาแอพบน Windows 8 มีทางเลือกให้นักพัฒนา 2 ทาง ได้แก่ การใช้ Visual Studio 2012 ตัวเต็ม (ไม่ว่าจะเป็น edition ใดก็ตาม) ซึ่งต้องเสียเงินซื้อ หรือใช้ Visual Studio Express 2012 ที่ดาวน์โหลดมาใช้งานได้ฟรี (ในบทความชุดนี้จะอ้างอิงจาก Visual Studio Express 2012 เป็นหลัก)

โปรแกรมในชุดที่มากับ Visual Studio Express 2012 มีดังนี้

• Microsoft Visual Studio Express 2012 for Windows 8 ตัวเครื่องมือหลัก
• Blend for Microsoft Visual Studio 2012 for Windows 8 ตัวช่วยออกแบบ UI ของแอพ
• Windows 8 software development kit (SDK) ชุดเครื่องมือเสริมสำหรับการพัฒนาแอพ
• project template สำหรับการสร้างแอพใหม่

ตัว Visual Studio Express 2012 เองก็มีหลาย edition ให้เลือกใช้งาน ซึ่งกรณีนี้ต้องเป็น Visual Studio Express 2012 for Windows 8 เท่านั้น ดาวน์โหลดกันได้จาก Visual Studio Download แล้วเลือกรุ่นให้ตรงกับที่ระบุ


วิธีการดาวน์โหลดและติดตั้งมี 2 แบบให้เลือกคือ Install now (ดาวน์โหลดไฟล์ .exe ขนาดเล็กก่อน ตัวติดตั้งจะดาวน์โหลดไฟล์ที่เหลือให้) และ Download now (ดาวน์โหลดไฟล์ .iso ให้ครบแล้วค่อยติดตั้งทีเดียว) ถ้าไม่มีความจำเป็นอะไรพิเศษ ก็ควรเลือกใช้วิธีแรก

เมื่อดาวน์โหลดตัวติดตั้งเสร็จและเรียกขึ้นมาทำงาน จะเห็นหน้าจอดังภาพ ตัวโปรแกรมต้องใช้พื้นที่ขนาด 2.71GB เพื่อติดตั้งไฟล์ทั้งหมด (อย่าลืมคลิก agree เพื่อติดตั้งด้วย)


หลังดาวน์โหลดและติดตั้งโปรแกรมเรียบร้อย เมื่อรันโปรแกรม Visual Studio Express 2012 (ต่อไปจะย่อว่า VS2012) ขึ้นมาครั้งแรก ตัวโปรแกรมจะแจ้งให้เราลงทะเบียน มิฉะนั้นจะใช้งานได้เพียง 30 วันเท่านั้น ให้กดลิงก์ Register online เพื่อลงทะเบียนผ่านหน้าเว็บของไมโครซอฟท์


เมื่อกรอกข้อมูลส่วนตัวเล็กน้อย จะได้ Product Key เพื่อกรอกลงใน VS2012 ให้เสร็จสิ้นกระบวนการ


การขอใบอนุญาตนักพัฒนา

ผู้ที่สร้างแอพบน Windows 8 จำเป็นต้องมี “ใบอนุญาตนักพัฒนา” (developer license) เพื่อติดตั้งและทดสอบแอพของตัวเองภายในเครื่อง มิฉะนั้นตัวระบบปฏิบัติการ Windows 8 จะไม่ยอมให้ติดตั้งแอพนอก Windows Store หรือที่ไมโครซอฟท์เรียกว่า sideload ได้

กระบวนการขอใบอนุญาตไม่เสียค่าใช้จ่ายและไม่มีอะไรซับซ้อน สามารถทำได้เลยจากตัวโปรแกรม VS2012 โดยตรง ขอเพียงแค่มี Microsoft Account เท่านั้น (ซึ่งผู้ที่ติดตั้ง Windows 8 ย่อมมีอยู่แล้ว)

เมื่อกรอก Product Key ของ VS2012 เรียบร้อยแล้ว และเปิดโปรแกรมขึ้นมาครั้งแรก จะเห็นหน้าต่างบอกให้เรายื่นขอใบอนุญาตนักพัฒนา ดังภาพ


กดปุ่ม Agree แล้วโปรแกรมจะให้เราล็อกอินด้วย Microsoft Account ที่ต้องการใช้เป็นบัญชีนักพัฒนา


เพียงแค่นี้เราจะได้ใบอนุญาตนักพัฒนาจากไมโครซอฟท์แล้ว โดยใบอนุญาตจะมีวันหมดอายุ (เบื้องต้นคือสิ้นปี 2012) ซึ่งกดต่อใหม่ได้เรื่อยๆ


เมื่อติดตั้ง VS2012 และได้ใบอนุญาตนักพัฒนาเรียบร้อย ก็เป็นอันเสร็จสิ้นกระบวนการเตรียมเครื่องมือสำหรับพัฒนาแอพแล้ว

หมายเหตุ:

• คำว่า “ใบอนุญาตนักพัฒนา” ในที่นี้เป็นคนละส่วนกับ “บัญชีนักพัฒนาบน Windows Store” (Windows Store developer account) สำหรับการนำแอพไปเผยแพร่บน Windows Store ซึ่งต้องเสียเงิน และจะกล่าวถึงละเอียดในบทความตอนถัดๆ ไป
• รายละเอียดเพิ่มเติมของการขอใบอนุญาตนักพัฒนา สามารถอ่านได้จากบทความ Get a developer license (Windows Store apps)

เริ่มต้นกับ Visual Studio Express 2012

ผู้ที่เพิ่งเคยใช้ Visual Studio เป็นครั้งแรกอาจต้องทำความคุ้นเคยกับตัวโปรแกรมอยู่บ้าง แต่คนที่เคยใช้ Visual Studio หรือเครื่องมือพัฒนาโปรแกรมแบบ IDE มาก่อน (เช่น Eclipse, NetBeans หรือ Xcode) คงหัดใช้ได้ไม่ยากนัก เพราะแนวคิดของโปรแกรมใกล้เคียงกันมาก

Visual Studio 2012 ใช้อินเทอร์เฟซแบบ multi-pane ใกล้เคียงกับโปรแกรมกราฟิกของ Adobe โดยสามารถเปิดไฟล์ซอร์สโค้ดได้หลายไฟล์พร้อมกัน และสลับไฟล์ที่ใช้งานด้วยอินเทอร์เฟซแบบแท็บ

ขั้นตอนแรกคือสร้าง “โครงการ” หรือ Project สำหรับพัฒนาแอพขึ้นมาใหม่ โดยคลิกที่ลิงก์ New Project… ในหน้า Start Page ที่แสดงให้เห็นตั้งแต่เปิดโปรแกรม หรือผ่านเมนู File > New Project ก็ได้

ในหน้าต่าง New Project ให้เลือก Template ในคอลัมน์ด้านซ้ายมือเป็น JavaScript > Windows Store และเลือก Blank App ในคอลัมน์ตรงกลาง ที่สำคัญอย่าลืมตั้งชื่อโครงการตามต้องการ ซึ่งในบทความชุดนี้จะใช้แอพตัวอย่างชื่อ CloudEditor สาธิต

หลังกด OK เพื่อสร้างโครงการใหม่ หน้าจอของ VS2012 จะเปลี่ยนไปจากเดิม โดยแสดงโค้ดของเทมเพลตพื้นฐานให้แทน ซึ่งรายละเอียดการสร้างแอพจะกล่าวถึงต่อไปในตอนหน้า

หมายเหตุ: บทความชุดนี้จะไม่สอนการสร้างแอพ Hello, world และจะใช้ตัวอย่างเป็น CloudEditor แทน ผู้ที่สนใจศึกษาการสร้างแอพด้วยตัวเองก่อน สามารถอ่านเองได้ที่ Create a "Hello, world" app (Windows Store apps using JavaScript and HTML)

สารบัญบทความ

บทความชุด การเขียนแอพลิเคชันสำหรับ Windows 8 App Store

• ตอนที่ 1: เตรียมตัวและติดตั้ง
• ตอนที่ 2: เริ่มต้นสร้างแอพแก้ไขข้อความ
• ตอนที่ 3: บันทึกสถานะและการทำงานกับไฟล์
• ตอนที่ 4: แชร์ข้อมูลและเมนูตั้งค่า
• ตอนที่ 5: เชื่อมต่อกับ Azure Mobile Service
• ตอนที่ 6: Notification และการส่งแอพพลิเคชั่นเข้า Store