AdvanceArticle for MobileDeveloperjQueryLifestyle'nTrendMarketing to mobileMobile TechnologyNewbiePHPProgramming LanguageSocial Media MarketingTechnology

Sencha Touch 2.0 Framework ตอนที่ 1: พัฒนา Apps ตัวแรกของคุณ

Work Shop เริ่มต้นสำหรับนักพัฒนาในการสร้าง Mobile Web Apps ด้วย Framework ของ Sencha Touch 2.0 ที่ไม่ยากเกินไปครับแรกเริ่มจำเป็นต้องมีการดาวน์โหลดตัว SDK ของ Sencha Framework ก่อนครับซึ่งอาจจะต้องเข้าไปที่เว็บไซต์ http://www.sencha.com แล้วเลือกไปที่เมนู Products แล้วดาวน์โหลด Sencha Touch เวอร์ชัน Open Source ที่ติดสัญญา GPLv3 มาก่อนครับในเวอร์ชันที่ผมใช้พัฒนานี้เป็นตัว Sencha Touch 2.0.1.1.1 นะครับ แต่ถ้าต้องการ Support แบบเต็มพิกัดล่ะก็ให้ลองซื้อ Comercial Version ไปเลยก็สบายใจดีครับ

หน้าเว็บไซต์ Sencha Touch Framework
หน้าเว็บไซต์ Sencha Touch Framework

เบื้องต้นนี้ผมจะไม่ใช้ SDK Tools ของ Sencha Framework ในการพัฒนาร่วมกับ EClipse และ Xcode นะครับ เป็นแค่ HTML และ Java Script อย่างเดียวมา Edit ไปก่อนครับ ตัวแอพพลิเคชันแรกนี้น่าจะเป็นตัว Getting Start ของทาง Sencha เลยครับถ้าดาวน์โหลดมาจะเห็นชุดไฟล์ และ ตัวอย่างของมันมาให้หลาย Project ครับหลักๆ เลยที่ควรอยู่กับเราตลอดคือ โฟล์เดอร์ src ครับซึ่งจะต้องมี และเผื่อจะทำการ Hook Source ไว้ด้วย

ไปดาวน์โหลดที่นี่ครับ
ไปดาวน์โหลดที่นี่ครับ
สำหรับดาวน์โหลดครับ
สำหรับดาวน์โหลดครับ

ตัวอย่างแอพพลิเคชันที่จะพาไปพัฒนานั้นก็คือเจ้าแอพพลิเคชันตัวนี้ครับ จริงๆ มันคือ แอพพลิเคชันสำหรับเรียนรู้เบื้องต้นของ Sencha Framework เลยก็ว่าได้

เริ่มต้นพัฒนากันหน่อยดีกว่า

คราวนี้ก่อนจะเริ่มต้นพัฒนาแอพพลิเคชันนั้นจำเป็นต้องมีการ ติดตั้ง Framework ลงไปก่อน ให้คลายไฟล์ของ Sencha Framework ออกมาแล้วอัพโหลดไว้ครับ พอเราจะสร้าง Project ใหม่นะครับใน โฟล์เดอร์ของ Framework ในที่นี้ผมตั้งชื่อว่า “apps” ครับ เพราะตัวอย่างของ Project ใน Examples ส่วนใหญ่จะใช้ Path ของโฟล์เดอร์ src อยู่มากการเรียกจะต้องเรียกออกไป 2 ชั้นคือ “../../src” ซึ่งผมขี้เกียจ Hook Code ครับ

ผมเลยออกแบบ Structure ดังรูปครับ

วางโครงสร้าง แอพพลิเคชัน ของเราแบบนี้นะครับ ตั้งชื่อว่า "apps"
วางโครงสร้าง แอพพลิเคชัน ของเราแบบนี้นะครับ ตั้งชื่อว่า “apps”

ต่อจากนั้นเอา Source Code ที่ผมออกแบบไว้ไปวางไว้ที่ โฟล์เดอร์ Apps ครับ ดาวน์โหลดได้ที่นี่ Sencha Touch 2.0 Framework Sample File (Version 1.0.0)

ตัวแอพพลิเคชันของ Sencha Touch 2.0 ตัวนี้ใช้ Framework เป็นหลักดังนั้นจะเน้นหนักที่การเขียน Model มากกว่า View ครับ และ Extension ที่จะใช้ในตัวอย่างนี้คือ Tab Panel ครับ วิธีการเรียกใช้ TabPanel เบื้องต้นนั้นให้ใช้คำสั่งนี้ครับ

เริ่มต้นสร้าง ชื่อขอ Class ตัวแอพพลิเคชันที่เราจะสร้างมาก่อน

ต่อมาก็มาเพิ่มในส่วนของ Contact Form ครับ จำเป็นต้องใช้ Extension ของ FieldSet เข้ามาช่วย เผื่อจะใช้สำหรับการ แท็บปุ่มแล้วเปลี่ยนหน้า

เริ่มต้นโดยการเพิ่มส่วนนี้เข้าไปครับ โดยแทรกจากตำแหน่งที่ เว้นว่างไว้ครับ

ลองรันบน Browser ของ Chrome ครับจะเห็นผลลัพธ์ดังนี้

รันบน Browser ของ Chrome
รันบน Browser ของ Google Chrome

แสดงผลได้โอเค! แปลว่าถ้าลองไปรันผ่าน Browser ของสมาร์ทโฟนอย่าง iPhone และ Android ดูผลลัพธ์ก็น่าจะเป็นที่น่าพอใจครับ

ทดสอบดู ก็โอเค
ทดสอบดู ก็โอเค

ดูตัวอย่างได้ที่นี่ครับ
QRCode
หรือ Click ผ่านเว็บนี้ก็ได้ที่นี่ครับ :Sencha Touch2 Sample Demo

ถ้าเอาไปพัฒนาร่วมกับ Phonegap ดูน่าจะเวิร์คครับ หวังว่าตัวอย่างนี้คงช่วยจุดประกายทางเลือกสำหรับนักพัฒนาแอพพลิเคชันบนสมาร์ทโฟนได้นะครับ

Tags

Asst. Prof. Banyapon Poolsawas

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

Related Articles

One Comment

Leave a Reply

Back to top button
Close
Close

Adblock Detected

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