ตอนก่อนหน้านี้เราได้ สร้าง Project การวางหน้าจอโดยไม่พึ่ง Framework จาก Microsoft  กันแล้ว เอาละ เรามาต่อกันดีกว่า กับการทำ App blognone ด้วย WinJS ซึ่งคราวนี้จะเป็นเรื่องการดึงข้อมูลจากภายนอกมาดูบ้าง จะทำได้อย่างไร ขยับเข้ามาใกล้ๆ แล้วเรามาดูไปพร้อมกัน

วาง Layout เล่นก่อน

อย่างแรกเลย ถ้าเราจะแสดงผล ก็ต้องมี Layout ครับ ผมวางไว้ง่ายๆ แบบตัวอย่างด้านนี้ (เดี๋ยวคงต้องให้ Designer ผมช่วยอีกทีเรื่องความสวย) ซึ่งโค๊ดโดยรวมก็คือ เป็น Div แบบ inline-block วางเรียงกันไป แต่ละ div คือ 1 คอลัมน์ในการแสดงผล ข้างใน div ใช้ tag article สำหรับแสดงเนื้อหา จากตัวอย่าง ใน div แรก มี article เดียว ส่วน div ถัดๆ มา มีทั้งหมด 3 article

ถ้าดูจาก DOM Explorer ก็จะเห็นเป็นอย่างนี้

สำหรับในเรื่องของ CSS ผมว่าเป็นเทคนิคของแต่ละคน ขอไม่ลงรายละเอียดแล้วกันนะ

ดึงเนื้อหาจากเว็บ Blognone

ทีนี้ ก็มาถึงขั้นตอนการดึงข้อมูลจากเว็บ Blognone แล้ว หลายๆ คนคงจะคิดว่า จะต้องหา RSS Feed หรือว่า ATOM เพื่อใช้ในการดึง แต่ว่าวันนี้ผมขอเสนออีกไอเดีย ที่ผมใช้บ่อยมากๆ ก็คือการดึงหน้าเว็บเขามาตรงๆ เลยครับ!

ไอเดียก็คือ ผมจะใช้ jQuery ไปดาวน์โหลดหน้าเว็บเขามา แล้วจากนั้นก็ใช้ jQuery ไปควานหาข้อมูลที่ผมต้องการ สร้างเป็น JSON เอาไว้ แล้วจากนั้น นำเอาข้อมูลนี้ไปใช้งานต่อครับ ฟังดูอาจจะยาว แต่ไม่ยากครับ ลองมาดูกัน

เอา JQuery มาก่อน

พอได้ยินว่า ต้องใช้ jQuery ก็อย่าเพิ่งไปเว็บ jQuery เพื่อดาวน์โหลดครับ ผมมีวิธีง่ายกว่านั้น ลองคลิกขวาที่ Project แล้วเลือก Manage Nuget Packages

จากนั้น เลือก Online จากด้านขวา แล้วค้นหาว่า jQuery จากนั้นกด Install

เราก็จะได้ไฟล์ jQuery อยู่ในโฟลเดอร์ Scripts ก็แล้วแต่นะว่า จะย้ายมาที่ Folder “js” หรือเปล่า ผมทิ้งไว้อย่างนั้นแหละ เผื่อ Update

พอได้ jQuery มาแล้ว เราก็ลากมันมาเอาไว้ใน default.html เลยครับ เราจะได้ใช้ได้ แล้วจากนั้น เปิด default.js ขึ้นมาเพื่อทำการแก้ไข

สำหรับความสามารถเทพของ VS11 (และเวอร์ชั่นก่อนๆ) คือมันสามารถแสดง Documentation ของ jQuery ได้ด้วย แต่เราต้องช่วยมันเล็กน้อยโดยการใส่

/// <reference path="Scripts/jquery-1.7.1-vsdoc.js" />

ลงไปที่ด้านบน จากนั้น เวลาเราพิมพ์ในไฟล์ default.js เจ้า Visual Studio ก็จะรู้แล้วว่า ต้องไปดูดเอา Documentation ของไฟล์ vsdoc มาแสดง แจ่มมะละ

ทำความรู้จักกับ WinJS.xhr

แต่เพราะว่า ถ้าเราใช้  $.ajax เรียกเว็บ Blognone ตรงๆ มันจะไม่ผ่านครับ เนื่องจากติดที่ Policy ที่ป้องกันการที่เราดูดหน้าเว็บมา แล้วเอาหน้าเว็บ Inject เข้ามาใน App ซึ่ง Code บนเว็บ จะรันด้วยสิทธิ์เดียวกับ App ซึ่งสามารถใช้งาน Resource หลายอย่างได้ (จริงๆ ก็ติดมาตั้งแต่ Cross-site Scripting แล้ว) เราจึงต้องใช้ WinJS.xhr แทน ซึ่งก็ใช้ไม่ยากหรอกครับ ตามนี้เลย

เนื่องจากว่าไฟล์ default.js เขาเขียนมาแบบ OOP คือ พยายามทำให้มันเป็นคลาส กำหนด Scope ให้กับตัวแปรและฟังก์ชั่นต่างๆ เราก็เลยต้องเขียนแบบนี้แหละ จากนั้น ถ้าเราลองรันดู ก็จะพบว่า ข้อความใน JavaScript Console จะปรากฏมาแบบนี้ แสดงว่า ข้อมูลถูกอ่านมาเรียบร้อย

ต่อไปก็ เราจะต้องไปล้วงเอาข้อมูลออกมาจากเว็บ Blognone กันละ

ล้วงข้อมูลด้วย jQuery

เสร็จแล้ว เราก็ทำการเปิดเว็บ http://www.blognone.com ด้วย Internet Explorer หรือจะยี่ห้ออื่นก้อตามถนัดแล้วกด F12 เพื่อมองโครงสร้างของเว็บ

จะเห็นว่าโครงสร้างของ blognone มีดังนี้

• ข่าว อยู่ใน div มีคลาสว่า node ภายใต้ div ใหญ่ คลาส content-container
  • หัวข้อข่าว อยู่ใน tag a ที่อยู่ข้างใน div มีคลาสว่า content-title-box และมี link ให้ด้วย
    
  • ข้อมูลเกียวกับการโพส อยู่ใน span คลาส submitted
    
  • สำหรับ badge ต่างๆ อยู่ใน div คลาสชื่อ user_badges เป็น tag img
    
  • ภาพประจำข่าว เอามาจาก img ที่อยู่ใน div คลาสชื่อ node-image
    
  • เนื้อข่าว เอามาจาก div ที่มีคลาสว่า node-content แต่ว่าโค๊ดผิด   เราจะหา div ที่มี attribute itemprop แทน
    
• สำหรับ Featured เหมือนกัน แต่ว่าอยู่ใน div คลาส sticky
  

เอาละ เมื่อเรารู้โครงสร้างแล้ว เราก็มาเขียน jQuery กัน ผมให้ดูนะ ไม่ให้ Copy (ไปเขียนเอง )

แน่นอนว่า ถ้าจะให้โค๊ดรันได้ จะต้องมีการประกาศ BlognonNews เป็น Array ไว้ก่อน เพราะว่าเราเปิดโหมด strict ไว้ในไฟล์ default.js ด้วยคำสั่ง “use strict” ถ้าเกิดว่าไม่ประกาศมันจะ compile ไม่ผ่าน

อธิบายโค๊ด

สำหรับคนที่ไม่เคยใช้ หรือไม่คล่อง jQuery นี่น่าจะช่วยอธิบายได้ครับ

1. จะเห็นว่า เราสามารถใช้ ฟังก์ชั่น find ของ jQuery แล้วกรอกข้อความลงไป เหมือนกับการเขียน Selector ของ CSS เลยทีเดียว จากทีเห็นก็คือ ผมเลือกเอา div ที่มีคลาส node ทุกตัว ที่อยู่ใต้ content-container ตรงๆ ไม่มีอะไรขวางออกมา
2. ฟังก์ชั่น each ใช้ในการ iterate หรือว่า ลูปเข้าไปใน div ที่มีคลาส node ที่ตัวที่ผมหาเจอ จริงๆ แล้วสามารถใช้ for ธรรมดาก็ได้ เพราะว่า newsDiv นั้นจริงๆ คือ Array ธรรมดา แต่ว่าใช้ each จะอ่านเข้าใจง่ายกว่า สังเกตว่า each รับ parameter เป็นฟังก์ชั่น แบบนีเรียกว่า functional programming คือเราสามารถส่ง function ไปเป็น parameter ของอีกฟังก์ชั่นหนึ่งได้
   • เพื่อให้อ่านง่ายๆ และอาจจะทำให้โค๊ดเร็วขึ้นอีกหน่อย ผมเปลี่ยน $(this) เป็น me ก่อน จะได้ไม่ต้องรัน $(this) หลายรอบ
   • สังเกตว่า เราสามารถใช้ me.find ต่อได้อีก แบบนี้จะเป็นการหาเฉพาะภายใน div ที่มีคลาส node เท่านั้น (เป็น Loop ซ้อน Loop)
   • ฟังก์ชั่น text จะเอาข้อความทั้งหมดออกมาให้ ไม่ต้องเสียเวลาไปหาตัวปลายสุดเพื่อเอาข้อความ
3. เราสามารถสร้าง Object ขึ้นมาดื้อๆ ได้เลยใน JavaScript สังเกตว่าผมใช้ ‘name’ เป็นชื่อ แล้วใส่โค๊ดข้างหลังเป็นค่า ถ้าตอนรัน จะได้เป็น Object แบบนี้เลยครับ
   
   สำหรับฟังก์ชั่น GetBadges กับ FixURL ผมให้ไปคิดเป็นการบ้านนะ

หลังจากรันจบ เราก็จะได้ข้อมูลออกมาในรูป JSON อย่างสวยงาม

ซึ่งเราสามารถเรียกใช้งานฟังก์ชั่นที่เขียนได้ ดังนี้

ยังมีต่อ

ในตอนต่อไป เดี๋ยวเราจะเอาข้อมูลที่ได้หยอดข้อมูลลงไปในหน้าเว็บด้วย Handlebars Template Engine ลองมาติดตามกันครับ

ตอนอื่นๆ:

1. สร้าง Project การวางหน้าจอโดยไม่พึ่ง Framework จาก Microsoft ฯลฯ
2. ใช้ jQuery ดึงข้อมูลจาก Blognone
3. หยอดข้อมูลลงไปในหน้าเว็บด้วย Handlebars Template Engine