Article for MobileDeveloperFeaturedHTML5JavaScriptLifestyle'nTrendMarketing to mobileMobile TechnologyNewbieObject Oriented TechnologyProgramming LanguageSocial Media MarketingWeb Service Technology

Sencha Touch กับการแสดงข้อมูลจาก JSON สำหรับพัฒนา Mobile Web App

บทเรียนนี้จะเป็นการพัฒนา Mobile Web App ด้วย Framework Sencha Touch 2 ด้วยการทำงานร่วมกับ Webservice รูปแบบ JSON ครับ
เอาเป็นว่าขอต่อเนื่องจากบทความก่อนหน้านี้เลยแล้วกันจากบทความ

รอบนี้จะเป็นการพัฒนาแอพพลิเคชันของคุณตัวแรก

Sencha Touch กับ JSON
Sencha Touch กับ JSON

ให้เปิด cmd ขึ้นมา ทำการพิมพ์คำสั่ง

C:/Appserv/www/sencha_touch> sencha generate app Project1 C:/appserv/www/Project1

กด Enter รอการ Create ตัว Project ของเราเสร็จเรียบร้อยจาก Sencha Cmd

คำสั้ง Sencha Cmd
คำสั้ง Sencha Cmd
สร้าง Project ขึ้นมา
สร้าง Project ขึ้นมา

เมื่อเสร็จเรียบร้อยให้ทำการรันตัวโปรเจ็คของเราผ่าน บราวเซอร์กันหน่อยครับพิมพ์ไปที่

http://127.0.01/Project1/

จะเห็นแอพพลิเคชันของเราในรูปแบบปรกติอยู่ที่นี่

แอพพลิเคชันเบื้องต้น
แอพพลิเคชันเบื้องต้น

เปิดโปรแกรม Text Editor ขึ้นมาครับตัวไหนก็ได้แล้วก็ เปิดไฟล์ C:/Apperv/www/Project1/app/view/Main.js ขึ้นมา

จะเจอ Code เบื้องต้นที่ Generate มาจาก Sencha Cmd

ไปที่บรรทัดส่วนของ

สังเกตว่าแอพพลิเคชันของเราจะมี หน้าจอการทำงานที่สร้างขึ้นมาแล้ว 2 หน้าคือ หน้า “Welcome to Sencha Touch 2” และหน้า “Getting Started” ครับใน Code ตำแหน่งนี้

โดยมีการแบ่งแต่ละหน้าด้วย

และ

หากต้องการเพิ่ม หน้าใหม่ ซึ่งผมจะใช้ Icon เป็นรูป settings หรือเฟือง แล้วมี Title ว่า News Feed ผมสามารถเพิ่มโดยการ เพิ่ม , ต่อท้าย } ของ item ล่าสุด แล้วใส่ code ต่อไปนี้

ต่อไปเราจะใช้ข้อมูล Feed จากเว็บไซต์ มาแปลงเป็น JSON Web Service ด้วย Google API ครับ
http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&
ตัวอย่างที่ผมจะไปเอา Feed มานั้นคือ Feed ของเว็บไซต์ ข่าวอย่าง Manager ไปหา RSS มาครับ
ทำการแปลง RSS ให้เป็น JSON โดยการยิง URL ต่อไปนี้ครับ

http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://www.manager.co.th/RSS/Home/Breakingnews.xml

โดยค่า num นั้นคือจำนวน ข่าวที่ต้องการจะโชว์เบื้องต้นผมใส่ไป 10 ก่อน ถ้าถูกต้อง บาวเซอร์เราจะแสดงผลแบบนี้ครับ

แปลง Feed เป็น JSON
แปลง Feed เป็น JSON

ต่อมากลับมาที่ Main.js ใส่ Code ไปนี้ลงไปต่อท้าย “,”

ถ้าไม่ผิดพลาดอะไร ลองรันที่ แอพพลเคชันของเราจะได้เมนู Tab ใหม่ขึ้นมาชื่อว่า News Feed

เพิ่ม News Feed
เพิ่ม News Feed

ลองทดสอบกดดู จะได้หน้าจอแบบนี้

ไปที่ NewsFeed
ไปที่ NewsFeed

และถ้ากดที่ข่าว หน้าจอแอพพลิเคชันของเราจะเลื่อนไปแสดงผลหน้า content ทันที

หน้าเนื้อหาข่าว
หน้าเนื้อหาข่าว

ถือว่าเป็นอีกหนึ่งบทเรียนที่น่าสนใจครับกับการเริ่มต้นพัฒนาแอพพลิเคชันเชื่อมต่อ Web Service อย่าง JSON ครับ

ดาวน์โหลด Source Code ได้ที่:

https://code.google.com/p/daydev/downloads/detail?name=Project1.zip

Tags

Banyapon Poolsawasd

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน