Tags:
Windows 8

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

Comments

By: kinnykop
kinnykop's blog
on 14/12/12 12:12 #518773 toggle
kinnykop's picture

เยี่ยมครับ

By: snowbellza
iPhoneAndroid
snowbellza's blog
on 14/12/12 12:48 #518795 toggle
snowbellza's picture

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


"มือใหม่"

By: PaPaSEK
ContributorAndroidWindowsIn Love
PaPaSEK's blog
on 14/12/12 13:27 #518816 toggle
PaPaSEK's picture

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

By: manster
iPhoneAndroidUbuntuWindows
manster's blog
on 14/12/12 15:14 #518873 toggle
manster's picture

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

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

By: hisoft
ContributorWindows PhoneWindows
hisoft's blog
on 15/12/12 7:30 #519110 Reply to:518873 toggle
hisoft's picture

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

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


The Phantom Thief

By: manster
iPhoneAndroidUbuntuWindows
manster's blog
on 15/12/12 8:37 #519120 Reply to:519110 toggle
manster's picture

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

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

By: piscessera
ContributoriPhoneWindows PhoneAndroid
piscessera's blog
on 14/12/12 15:59 #518908 toggle
piscessera's picture

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

By: mr_mayz
iPhoneAndroidWindows
mr_mayz's blog
on 14/12/12 16:04 #518916 toggle
mr_mayz's picture

ขอบคุณครับ

By: neonicus
Android
neonicus's blog
on 14/12/12 19:25 #519007 toggle
neonicus's picture

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


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

By: boycatbay
Windows PhoneAndroid
boycatbay's blog
on 14/12/12 20:10 #519019 toggle
boycatbay's picture

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


boycatbay

By: nrad6949
ContributorWindows PhoneAndroidBlackberry
nrad6949's blog
on 14/12/12 20:21 #519024 toggle
nrad6949's picture

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

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


เด็กรัฐศาสตร์ที่ชอบคอมพิวเตอร์

By: terap
Windows Phone
terap's blog
on 14/12/12 21:04 #519037 toggle
terap's picture

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

By: tontpong
Contributor
tontpong's blog
on 15/12/12 22:12 #519268 Reply to:519037 toggle
tontpong's picture

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

By: terap
Windows Phone
terap's blog
on 16/12/12 22:18 #519495 Reply to:519268 toggle
terap's picture

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

By: EThaiZone
ContributorSymbianUbuntuWindows
EThaiZone's blog
on 14/12/12 21:41 #519054 toggle
EThaiZone's picture

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

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


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

By: ohmini
Contributor
ohmini's blog
on 14/12/12 22:16 #519061 toggle
ohmini's picture

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

By: idmaximum
idmaximum's blog
on 14/12/12 22:39 #519064 toggle
idmaximum's picture

เยี่ยมครับ


Mobile App / Web Design → www.idmaximum.com

By: phongphan117
phongphan117's blog
on 15/12/12 13:07 #519172 toggle
phongphan117's picture

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

By: inkirby
ContributoriPhoneAndroidIn Love
inkirby's blog
on 15/12/12 13:12 #519175 Reply to:519172 toggle
inkirby's picture

Ad-Block?


Dream high, work hard.

By: KnightBaron
ContributoriPhoneRed HatWindows
KnightBaron's blog
on 23/12/12 20:01 #521905 Reply to:519175 toggle
KnightBaron's picture

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


Aosekai

By: adente
ContributorSUSESymbianWindows
adente's blog
on 15/12/12 18:42 #519228 Reply to:519172 toggle
adente's picture

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

By: tonhady
Red HatUbuntu
tonhady's blog
on 16/12/12 19:57 #519452 toggle
tonhady's picture

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


MyBlog.

By: TeamKiller
ContributorAndroid
TeamKiller's blog
on 19/12/12 17:49 #520658 Reply to:519452 toggle
TeamKiller's picture
  • JavaScript
  • VB
  • C#
  • C++
By: Zaneter
Zaneter's blog
on 19/12/12 11:25 #520452 toggle
Zaneter's picture

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


In the name of Zane

By: komsanw
komsanw's blog
on 19/12/12 13:51 #520535 toggle
komsanw's picture

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


แมวเหมียว

By: verdantleaf
verdantleaf's blog
on 19/12/12 22:07 #520758 toggle
verdantleaf's picture

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

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

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

By: inkirby
ContributoriPhoneAndroidIn Love
inkirby's blog
on 19/12/12 22:34 #520767 Reply to:520758 toggle
inkirby's picture

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

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


Dream high, work hard.

By: MzChewiize
Windows PhoneAndroidUbuntu
MzChewiize's blog
on 23/12/12 19:58 #521903 toggle
MzChewiize's picture

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


MzChewiize : End user