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

สำหรับเทมเพลตที่ทางไมโครซอฟท์เตรียมไว้ให้มีสองชุด คือ

• Travel and Place แอพลิเคชันสำหรับแนะนำสถานที่ท่องเที่ยว
• Keeping Fruit เกมแคชชวลเก็บของ

ในบทความตอนนี้จะแนะนำเฉพาะการแก้ไขเทมเพลต Travel and Place เท่านั้น ส่วนอีกเทมเพลตหนึ่งสามารถอ่านวิธีการแก้ไขได้จากเอกสารที่แนบมาพร้อมกับเทมเพลต

ลักษณะแอพลิเคชัน

แอพลิเคชัน Travel and Place จะประกอบด้วยหน้าหลัก แสดงข้อมูลเบื้องต้นและสภาพอากาศของจังหวัด (ดึงข้อมูลสภาพอากาศจากอินเทอร์เน็ต) ภาพประกอบ (ดึงภาพจากอินเทอร์เน็ตหรือเลือกใส่รูปภาพเองก็ได้) และรายการสถานที่น่าสนใจต่างๆ (ฝังไว้ในซอร์สโค้ดของแอพลิเคชัน) เมื่อผู้ใช้คลิกที่สถานที่ใดๆ จะปรากฎ FlyOut ให้ค้นหารายละเอียดเพิ่มเติม หรือเพิ่มกำหนดการไปยังสถานที่นั้นๆ ลงใน Hotmail Calendar ได้ทันที

ตัวอย่างแอพลิเคชันที่สร้างจากเทมเพลตนี้ และเผยแพร่บน Windows Store แล้ว เช่น Paradise Beach Phuket, Wonderful Place Hua Hin, Nightlife Chiang Mai เป็นต้น

โดยในบทความนี้เราจะนำเทมเพลต Travel and Place มาแก้ไขข้อมูลและหน้าตาใหม่ให้กลายเป็นแอพลิเคชัน Nan is not a number ซึ่งเป็นแอพลิเคชันแนะนำสถานที่น่าสนใจในจังหวัดน่านแทน

สำหรับการแก้ไขข้อมูลและดีไซน์เล็กๆ น้อยๆ จากเทมเพลตนี้ เราจะเปิดโปรเจกต์ด้วย Blend for Visual Studio (ซึ่งติดตั้งมาพร้อมกับ Visual Studio อยู่แล้ว) โดยเปิดโปรแกรม จากนั้นคลิกที่ปุ่ม Open Project... แล้วเลือกเปิดไฟล์นามสกุล sln ของโปรเจกต์เทมเพลตขึ้นมาเพื่อแก้ไข

การแก้ไขข้อมูลจังหวัด

การแก้ไขข้อมูลจังหวัด ให้เลือกเปิดไฟล์ jsdb/overviewData.js จากพาเนล Projects ทางด้านซ้ายบนของพื้นที่ทำงาน จะปรากฎตัวแปรต่างๆ ให้เราแก้ไขชื่อจังหวัดที่ตัวแปร cityName, แก้ไขคำอธิบายที่ตัวแปร overviewDescription, ส่วนรหัสจังหวัดซึ่งจะใช้สำหรับแสดงสภาพอากาศนั้น ให้ค้นหาจากเอพีไอของ wxbug โดยเข้าไปยังที่อยู่ http://i.wxbug.net/REST/SP/getLocationsXML.aspx?api_key=mxf782bm8qdy2chx25sn6ej2&SearchString=CityName (เปลี่ยนคำว่า CityName ให้เป็นชื่อเมืองที่ต้องการ) จากนั้นคัดลอก citycode ที่ตรงกับชื่อเมืองที่ต้องการมาใช้

การแก้ไขรูปภาพ

เทมเพลตนี้ได้เตรียมช่องทางให้เรากำหนดรูปภาพได้สองช่องทาง คือค้นหารูปผ่านอินเทอร์เน็ต หรือจะใส่รูปเข้าไปเองก็ได้ โดยเลือกเปิดไฟล์ jsdb/imageData.js จากพาเนล Projects

หากต้องการให้แอพลิเคชันค้นหารูปผ่านอินเทอร์เน็ต ให้แก้ไขค่า useOnlineImageSearch เป็น true และแก้ไขค่า imageSearchKeyword ให้เป็นคีย์เวิร์ดที่ต้องการใช้ค้นรูป

หากต้องการใส่รูปเข้าไปเอง ให้คัดลอกรูปภาพใส่ลงในไดเรกทอรี images จากนั้นแก้ไขค่า heroImageURL ให้เป็นที่อยู่ของภาพที่จะเป็นภาพหลัก (ภาพใหญ่สุดที่จะเห็นเป็นภาพแรก) และแก้ไขค่า thumbImageURL ให้เป็นรายการที่อยู่ของภาพที่จะแสดงในส่วนอื่นๆ โดยจะต้องใส่รูปจำนวนเท่าเดิมที่เทมเพลตได้ระบุไว้(หรือจะใช้วิธีคัดลอกภาพมาใส่แล้วตั้งชื่อให้ตรงกับรูปแบบเดิมก็ได้)

การแก้ไขรายการสถานที่

เทมเพลตนี้มีรายการสถานที่ให้แสดงผลทั้งหมด 3 รายการ โดยเราสามารถกำหนดชื่อหัวข้อของแต่ละรายการ (เช่น สถานที่ท่องเที่ยว, ร้านอาหาร) ได้เอง แต่ละรายการจะมีรายละเอียดเหมือนๆ กัน คือสามารถกำหนดชื่อ ที่อยู่ หมายเลขโทรศัพท์ และคำอธิบายเพิ่มเติมได้

เราสามารถแก้ไขได้โดยเลือกเปิดไฟล์ jsdb/listData1.js, jsdb/listData2.js, และ jsdb/listData3.js จากนั้นแก้ไขค่า listName_1 หรือ listName_2 หรือ listName_3 จากพาเนล Projects ให้เป็นชื่อหัวข้อของรายการที่ต้องการ และแก้ไขค่า array1, array2, array3 ให้มีข้อมูลสถานที่ต่างๆ ตามต้องการ

การเปลี่ยนสีในส่วนต่างๆ ของแอพลิเคชัน

เราสามารถเปลี่ยนสีพื้นหลัง สีของรายการสถานที่ ทั้งส่วนหัวข้อรายการ ส่วนที่แสดงรายการ รวมถึงส่วนหัวของ flyout ได้ง่ายๆ โดยเริ่มจากเลือกเปิดไฟล์ pages/cityDetail/cityDetail.html จากพาเนล Projects

หากโปรเจกต์ตัวอย่างสามารถแสดงผลในพื้นที่ทำงานได้ เราสามารถคลิกที่ส่วนต่างๆ ของเทมเพลตเพื่อปรับตั้งคุณสมบัติต่างๆ ได้เอง แต่หากไม่แสดงผลสามารถเลือกอีลิเมนต์ที่จะแก้ไขผ่านพาเนล Live DOM ที่ด้านซ้ายล่างของพื้นที่ทำงาน โดยเริ่มต้นเราจะแก้ไขสีพื้นหลังของหน้าจอ โดยคลิกเลือกอีลิเมนต์ flexBox ด้านขวาของพื้นที่ทำงานจะปรากฎพาเนล CSS Properties ของอีลิเมนต์ที่คลิกเลือกไว้ ให้คลิกที่สีท้ายคำว่า background-color เพื่อเลือกสีพื้นหลัง

ที่พาเนล Live DOM ด้านซ้ายล่างของพื้นที่ทำงาน คลิกเลือกอีลิเมนต์

<

div> smallHeaderDiv จากนั้นดูที่พาเนล CSS Properties ด้านขวา สามารถแก้สีพื้นหลังของหัวข้อรายการได้โดยคลิกที่สีหลังคำว่า background-color และแก้ไขสีตัวอักษรหัวข้อรายการได้โดยคลิกที่สีหลังคำว่า color

ที่พาเนล Live DOM ด้านซ้ายล่างของพื้นที่ทำงาน คลิกเลือกอีลิเมนต์ placesToEatListView (อยู่ถัดจาก

<

div> smallHeaderDiv ที่เพิ่งเลือกไป) จากนั้นดูที่พาเนล CSS Properties ด้านขวา สามารถแก้สีพื้นหลังของรายการได้โดยคลิกที่สีหลังคำว่า background-color

ที่พาเนล Live DOM ด้านซ้ายล่างของพื้นที่ทำงาน คลิกเลือกอีลิเมนต์ learnMoreFlyoutHeader จากนั้นดูที่พาเนล CSS Properties ด้านขวา สามารถแก้สีพื้นหลังของส่วนหัว flyout ได้โดยคลิกที่สีหลังคำว่า background-color

ที่พาเนล Live DOM ด้านซ้ายล่างของพื้นที่ทำงาน คลิกเลือกอีลิเมนต์ learnMoreFlyoutContent(อยู่ถัดจาก learnMoreFlyoutHeader ที่เพิ่งเลือกไป) จากนั้นดูที่พาเนล CSS Properties ด้านขวา สามารถแก้สีพื้นหลังของ flyout ได้โดยคลิกที่สีหลังคำว่า background-color และแก้สีตัวอักษรของ flyout ได้โดยคลิกที่สีหลังคำว่า color (สีตัวอักษรที่แก้ไขจะไม่มีผลกับบาง flyout)

นอกจากนี้เราสามารถทดสอบแก้ไขคุณสมบัติอื่นๆ หรือคุณสมบัติของอีลิเมนต์อื่นๆ ได้ตามต้องการ โดยเลือกอีลิเมนต์ที่จะแก้ไข จากพาเนล Live DOM แล้วทดลองแก้ไขค่าในพาเนล CSS Properties จากนั้นทดลองรันแอพลิเคชันเพื่อดูผลลัพท์โดยเรียกเมนู Project > Run Project หรือกดปุ่ม F5 บนคีย์บอร์ด

การแก้ไขสีและไอคอนของแอพลิเคชัน

การแก้ไขสีและไอคอนของหน้า splash screen จะต้องใช้โปรแกรม Visual Studio for Windows 8 ดังนี้

1. เปิดโปรแกรม Visual Studio for Windows 8 ขึ้นมา เรียกเมนู File > Open Project... แล้วเลือกเปิดไฟล์นามสกุล sln ของโปรเจกต์เดียวกันกับที่แก้ไขไปแล้วก่อนหน้านี้
2. เมื่อเปิดแล้วให้เปิดไฟล์ package.appxmanifest จากพาเนล Solution Explorer ด้านบนขวาของพื้นที่ทำงาน จะปรากฎหน้าแก้ไขข้อมูลของแอพลิเคชัน
3. จากนั้นดูที่แท็บ Applicatipon UI หัวข้อ Visual Assets ให้คลิกเลือก All Image Assets จากรายการด้านซ้าย จากนั้นแก้ไขชื่อแอพลิเคชัน สีพื้นหลังของไอคอนและ splash screen และไอคอนได้ตามต้องการ โดยเราจะใส่เฉพาะภาพที่ขนาดเป็น Scale 100 หรือจะใส่ทุกขนาดก็ได้ แต่หากใส่ภาพทุกขนาดแล้วพบข้อผิดพลาด ให้ลบไฟล์ภาพเก่าออกก่อน

เสร็จสิ้น

เมื่อแก้ไขแอพลิเคชันเสร็จเรียบร้อยแล้ว สามารถนำแอพลิเคชันขึ้นเผยแพร่บน Windows Store ได้ โดยดูวิธีการเพิ่มเติมจากบทความ การเขียนแอพลิเคชันสำหรับ Windows 8 App Store ตอนที่ 6: Notification และการส่งแอพพลิเคชั่นเข้า Store ส่วนผู้อ่านที่ต้องการดาวน์โหลดตัวอย่างแอพลิเคชันที่เราแก้ไขเสร็จแล้วไปทดสอบสามารถดาวน์โหลดซอร์สโค้ดได้ที่นี่

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