Tags:
Node Thumbnail

บทความชุดนี้มีจุดประสงค์เพื่อเป็นแหล่งข้อมูลเริ่มต้นสำหรับผู้ที่สนใจพัฒนาแอพบน 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

การพัฒนาแอพสำหรับ 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

Get latest news from Blognone

Comments

By: kinnykop on 14 December 2012 - 13:12 #518773
kinnykop's picture

เยี่ยมครับ

By: snowbellza
iPhoneWindows PhoneAndroidSymbian
on 14 December 2012 - 13:48 #518795
snowbellza's picture

ขอบคุณครับ ตอนนี้เขียนแอพบน vs2010 บน windows 7 อยู่ สงสัยคงต้องก้าวข้าม generation เร็วๆนี้


"มือใหม่"

By: PaPaSEK
ContributorAndroidWindowsIn Love
on 14 December 2012 - 14:27 #518816
PaPaSEK's picture

น่ารักมากครับไมโครซอฟท์

By: manster
iPhoneAndroidUbuntuWindows
on 14 December 2012 - 16:14 #518873
manster's picture

เพิ่งรู้ว่า Win8 sideload ไม่ได้

โห่ได้ไหมนี่

By: hisoft
ContributorWindows PhoneWindows
on 15 December 2012 - 08:30 #519110 Reply to:518873
hisoft's picture

ต้องทำใจครับ มันควบคุมง่ายกว่าสำหรับเค้า ไม่งั้นก็ต้องเลือกเป็นโปรแกรมแทนแอพ

หรือไม่ก็รอวันโดน Unlock/Jailbreak (ไม่มี root นะครับ :p)


The Phantom Thief

ฮือ อัพรูปเป็น gif ไม่ได้ (T-T)

By: manster
iPhoneAndroidUbuntuWindows
on 15 December 2012 - 09:37 #519120 Reply to:519110
manster's picture

สิ่งที่ผมแอนตี้ที่สุดของ iOS คือเรื่องนี้แหละ เครื่องเราเอง ทำไมต้องขออนุญาติเขียนโปรแกรมมาใช้เองด้วย

แต่โปรแกรมลงได้ก็ยังดี นึกว่าโปรแกรมก็ sideload ไม่ได้

By: piscessera
ContributoriPhoneWindows PhoneAndroid
on 14 December 2012 - 16:59 #518908
piscessera's picture

เคยลอง VS2012 ช่วง Windows 8 consumer preview ออกมาใหม่ๆ มี template ให้หมด เขียนสะดวกดี ผมว่าเค้าปูทางให้นักพัฒนามาดีมากๆ เลย เหลือแต่ marketing นี่แหละ ว่าจะไปได้ดี + ไวแค่ไหน สำหรับตัว windows 8 (ในใจคิดว่าคงต้องรอรุ่นถัดไปอีกรุ่นเหมือน windows 7 :P)

By: mr_mayz
iPhoneAndroidWindows
on 14 December 2012 - 17:04 #518916

ขอบคุณครับ

By: neonicus
Android
on 14 December 2012 - 20:25 #519007

ดีครับ อยากกระตุ้นให้appเยอะ ก็ต้องแบบนี้และ win-win


=========================
เบื่อพวกอวย แตะนิดแตะหน่อยไม่ได้

By: boycatbay
iPhoneWindows PhoneAndroidWindows
on 14 December 2012 - 21:10 #519019
boycatbay's picture

ผมมีทั้ง Windows 8 ทั้ง VS2012 ขาดแต่ความรู้ในการเขียนโปรแกรมแค่นั้นครับ สงสัยต้องไปศึกษา แต่ขอผ่านช่วงปลายปีไปก่อน เจอสอบกลางภาค ไม่มีเวลาทำอยากอื่น มากนัก


boycatbay

By: nrad6949
WriterAndroidBlackberryWindows
on 14 December 2012 - 21:21 #519024
nrad6949's picture

ดีครับที่กระตุ้นครับ

ปล. แต่จะดีกว่านี้มากถ้า Windows Store ยกเว้นค่าสมัครนักพัฒนาให้ :P


I'm ordinary man; who desires nothing more than just an ordinary chance to live exactly what he likes and do precisely what he wants.

By: terap
Windows PhoneAndroidRed HatUbuntu
on 14 December 2012 - 22:04 #519037
terap's picture

เสียดาย Windows 7 เพิ่งซื้อกลางปีเอง


งงกับที่ตัวเองพูดจริง ๆ

By: tontpong
Contributor
on 15 December 2012 - 23:12 #519268 Reply to:519037

Windows 7 เพิ่งซื้อกลางปี <== ไม่ได้ pro สิทธิ์อัพเปน win8 หรอ :?

By: terap
Windows PhoneAndroidRed HatUbuntu
on 16 December 2012 - 23:18 #519495 Reply to:519268
terap's picture

เพิ่งไปทำมาครับ กำลังโหลด Windows 8 อยู่เลย


งงกับที่ตัวเองพูดจริง ๆ

By: EThaiZone
ContributorAndroidUbuntuWindows
on 14 December 2012 - 22:41 #519054
EThaiZone's picture

ของเขาดีนะ แต่มาไวไป - -*

product cycle ยังไม่ครบรอบก็มีตัวใหม่มา


มันไม่ง่ายเลยที่จะทำ GIF ให้มีขนาดน้อยกว่า 20kB

By: ohmini
Contributor
on 14 December 2012 - 23:16 #519061
ohmini's picture

อื้อหือ ซื้อโฆษณามาเลยทีเดียว เจ๋งมากๆ

By: idmaximum
iPhoneAndroidWindows
on 14 December 2012 - 23:39 #519064
idmaximum's picture

เยี่ยมครับ


Mobile App / Web Development → www.idmaximum.com

By: phongphan117
AndroidWindows
on 15 December 2012 - 14:07 #519172

ไม่เข้าใจ ทำไมต้องซ่อนบทความ

By: inkirby
ContributoriPhoneAndroidIn Love
on 15 December 2012 - 14:12 #519175 Reply to:519172
inkirby's picture

Ad-Block?


Dream high, work hard.

By: KnightBaron
ContributoriPhoneAndroidRed Hat
on 23 December 2012 - 21:01 #521905 Reply to:519175
KnightBaron's picture

จริงด้วยครับ Ad-Block บล็อคหายทั้งบทความเลย เหอะๆ


Aosekai

By: adente
ContributorSUSESymbianWindows
on 15 December 2012 - 19:42 #519228 Reply to:519172
adente's picture

ลง ad block ไว้หรือเปล่า ผมเห็นบทความนี้ตอนไปเล่นเครื่องคอมพิวเตอร์เพื่อน เหมือนกัน

By: tonhady
Red HatUbuntu
on 16 December 2012 - 20:57 #519452
tonhady's picture

JavaScript ได้อย่างเดียวเรา -.-


MyBlog.

By: TeamKiller
ContributoriPhone
on 19 December 2012 - 18:49 #520658 Reply to:519452
TeamKiller's picture
  • JavaScript
  • VB
  • C#
  • C++
By: Zaneter on 19 December 2012 - 12:25 #520452
Zaneter's picture

เขียน Windows 8 app
ไม่ยากจริงๆครับ
สำหรับคนที่ยังไม่ชำนาญ หา Template มาลองทำ ลองดัดแปลงดูก่อนก็ดีนะครับ


In the name of Zane

By: komsanw
iPhoneWindows PhoneAndroidRed Hat
on 19 December 2012 - 14:51 #520535
komsanw's picture

http://channel9.msdn.com/Series/Windows-Store-apps-for-Absolute-Beginners-with-C-
ลองดูตามนี้


หวึ๋ยๆ

By: verdantleaf on 19 December 2012 - 23:07 #520758
verdantleaf's picture

ขออนุญาตครับ

สวัสดีชาว windows phone8 กรุ้ป
มีอะไรที่เกี่ยวกับ wp8 มาคุยในนี้ได้หมดครับ
ช่วยๆกันแชร์นะครับ คนจะได้เยอะๆ
http://www.facebook.com/groups/wpthailand/

ซึ่งเราจะเห็นกรุ๊ปอีกกรุ๊ปนึงที่มี wp7 และ wp7.8 รวมอยู่ด้วย ผมจึงขออนุญาตแยกออกมาอีกทีเพื่อให้ได้รับข้อมูลตรงจุด wp8 เท่านั้นครับ

By: inkirby
ContributoriPhoneAndroidIn Love
on 19 December 2012 - 23:34 #520767 Reply to:520758
inkirby's picture

ผมว่าเริ่มฝากบ่อยเกินไปแล้วล่ะครับ

แนะนำว่าไผฝากใน forum ดีกว่ามาแปะแบบนี้บ่อยๆ นะครับ ก่อนจะโดนข้อหาสแปมซะก่อน


Dream high, work hard.

By: MzChewiize
Windows PhoneAndroidUbuntu
on 23 December 2012 - 20:58 #521903
MzChewiize's picture

เจ๋งงง มาแล้วๆๆ


MzChewiize : End user