ในบทความตอนที่ผ่านๆ มาเราได้เรียนรู้การพัฒนาแอพลิเคชันโดยใช้ความสามารถต่างๆ ของ 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 ด้านซ้ายล่างของพื้นที่ทำงาน คลิกเลือกอีลิเมนต์