AdvanceDeveloperFeaturedHTML5Mobile TechnologyNewbieObject Oriented TechnologyProgramming LanguageSocial Media MarketingTechnology

Lab: ออกแบบ และพัฒนา Mobile Web App ของคุณด้วย Sencha Touch 2

บทความนี้จะเป็นการแนะนำขั้นตอนในการออกแบบ และพัฒนาแอพพลิเคชันแบบ Mobile Web App ด้วย Framework ของ Sencha Touch 2 แบบทีละขั้นตอน

Lab: ออกแบบและพัฒนา Mobile Web App ของคุณด้วย Sencha Touch 2
Lab: ออกแบบและพัฒนา Mobile Web App ของคุณด้วย Sencha Touch 2

แน่นอนว่าก่อนอื่นต้องสร้างตัว Project ของคุณขึ้นมาก่อนให้ไปที่ Path Folder ของ Sencha Touch ของคุณด้วย CMD แล้วใช้คำง Sencha CMD สร้าง New App หรือ New Project ขึ้นมาใหม่

[วิธีการสามารถอ่านได้ที่บทความนี้ พัฒนา Mobile Web App ด้วย Sencha Touch 2.2.0 รู้จักกับ Sencha Cmd]

C:/>Appserv/www/SenchaTouch/sencha generate app MobileWeb C:/Appserv/www/MobileWeb

หลังจากนั้นก็มาเริ่มต้นกันครับ ในธีมที่ผมอยากจะพัฒนาแอพพลิเคชันนั้นผมอยากจะพัฒนาให้ Look & Feels ออกมาแบบ Windows Mobile หรือ Windows 8 มีธีมเป็นสีดำ
ให้ไปที่ Folder ของ Project เราครับ แล้วไปที่ Folder ที่ชื่อว่า resources/sass/app.scss
แก้ไข Sass ตามนี้ครับ

ให้เราไปที่ CMD แล้วก็ Compile ไฟล์ sass ด้วยคำสั่งนี้ครับ [ศึกษาได้ที่ เปลี่ยน Theme Sencha Touch ด้วย SASS และ Compass บน Windows และ OS X]

C:/>Appserv/www/MobileWeb/compass compile resources/sass

เมื่อเสร็จแล้วจะได้แอพพลิเคชันที่มีรูปแบบเป็น Windows Phone ครับ

ต่อมาให้แก้ไข Header ตามนี้

เพิ่ม เมนูของ Tab ด้านล่างดังนี้ครับ

Item แรกเป็นการใข้ Carousel หรือ Image Sliding เลื่อนภาพ โดยผมไปนำภาพมาจากเว็บไซต์ของผมอีกที

แนบด้วยการดึง Feed ของเว็บไซต์ http://www.lovedesigner.net/feed มาผ่าน JSONP ของ Google APIs ครับ
[5]

Item ที่สองหรือเมนูที่สองเป็นการดึง เหมือนข้อมูลเมื่อกี้แต่แสดงผลทั้งหน้า

หน้าสุดท้ายก็ใช้ HTML ธรรมดา แนบไฟล์รูปภาพปรกติครับ

ต่อจากนั้นก็มาปรับแต่ง sass และ Compile จนกว่าจะพอใจครับ

ซึ่งผลลัพธ์สุดท้ายที่ทำได้คือรูปแบบของ Mobile Web App แบบนี้ครับ

http://www.lovedesigner.net/m

4-6-2556 18-54-14

4-6-2556 18-54-19

4-6-2556 18-54-24

4-6-2556 18-54-29

ตอนนี้กำลังลองนำไปเขียนกับ UIWebView ของ XCode เพื่อขึ้น App Store ดูอีกที ไม่ยากใช่ไหมครับการเขียน Sencha Touch 2

หากใครสนใจนำ Source Code จากบทความนี้ก็สามารถเข้าไปดาวน์โหลดศึกษาได้ครับที่
https://github.com/banyapon/Sencha_Lovedesigner

Tags

Banyapon Poolsawasd

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

Related Articles

Leave a Reply

Back to top button
Close
Close

Adblock Detected

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