เริ่มต้น Sencha Touch 2 ในการพัฒนา Web Mobile app โดย HTML5
ในปัจจุบันนั้นปฎิเสธไม่ได้ว่า app บน smart phone หรือมือถือสมัยรวมไปถึงอุปกรณ์ mobile นั้นได้รับความนิยมมาก แต่ในการพัฒนาบนหลาย platform ของแต่ละอุปกรณ์นั้นยังลำบากอยู่ วิธีที่เป็นอีก 1 ทางเลือกคือการใช้ html5 ในการพัฒนาเพื่อเป็นในรูปแบบของ web หรือจะทำการแปลงจาก html 5 ในการเป็น application โดยใช้ phone gap โดย framework ในการพัฒนาโดยใช้ html 5 ที่ได้รับความนิยมนั้นก็มีชื่อของ sencha touch ติดโผขึ้นมา โดยในรุ่นปัจจุบันนั้นเป็นเวอร์ชั่น 2 แล้วซึ่งผมลองศึกษาในการพัฒนา application บน android ดูปัญหาส่วนใหญ่ ในการพัฒนา android application นั้นอยู่ที่การเขียน ui ขึ้นมานั้นเอง แต่หากใช้ html 5 นั้นปัญหาของ UI จะลดลงไปเพราะมันง่ายขึ้นมากแต่ด้านความเร็วในการประมวลผลนั้นจะช้าลง เพราะฉะนั้นการใช้ html5 นั้นจะสามารถตอบโจทย์ application ที่ไม่ต้องการใช้งานประมวลผลที่ซัฐซ้อนเท่าไรได้ และในบทความนี้ผมจะเขียนถึงการเริ่มต้นในการเรียนรู้ sencha touch 2 ครับ
Sencha touch เราสามารถ Download จากทางเว็บไซต์ Sencha
โดยที่ Sencha Touch จะต้องกรอก email เพื่อให้ระบบตอบเมล์พร้อมลิงค์ Download ไปให้นะครับ
หลังจากที่ดาวโหลด Sencha Touch แล้วก็ให้ทำการแตกไฟล์นำไปไว้บน web server โดยของผมเป็น apache จะเอาไปวางไว้ที่ folder www หรือถ้าเป็น iis server ก็นำไปไว้ที่ inetpub/www นั้นเอง
จากรูปในเครื่องผมเอาไว้วางไว้ที่ D:\AppServ\www\touch-2.2.1 เพราะ web server ผมอยู่ใน folder นี้ครับ โดย folder ที่ได้จากการแตกไฟล์ที่โหลดมาผมเปลี่ยนชื่อเป็น touch-2.2.1
ตอนมาให้เราทำการติดตั้ง sencha command เพื่อที่จะได้ command ในการช่วยทำงาน โดยเราจะต้องมี JDK ติดตั้งบนเครื่องก่อน โดยเราสามารถได้จาก web site นี้ครับ Java
เมื่อติดตั้ง Sencha command แล้วก็ให้เข้าไปที่ command line ของ window แล้วลองพิมพ์คำสั่งว่า sencha
หากติดตั้ง sencha command ได้สำเร็จเมื่อพิมพ์คำสั่งจะได้ดังรูป
ต่อจากนั้นก็ใช้ command line ไปยัง path ที่เราเอาไฟล์ sencha touch ไปวางไว้
จากนั้นก็ใช้คำสั่งในการ generate project app ใหม่ขึ้นมา โดยรูปแบบคำสั่งมีดังนี้
sencha generate app nameApp /path/to/app
โดยที่ผมลองในตัวอย่างจะใช้คำสั่ง sencha generate app thaicoding thaicoding ผลที่ได้ก็คือจะได้ folder thaicoding ขึ้นมาและมี app ที่ชื่อว่า thaicoding
เมื่อลองรันผ่าน url บน google chrome ดูจะได้ดังรูป http://localhost/touch-2.2.1/thaicoding/
ต่อมาลองดูใน folder ที่ได้จากการ generate ขึ้น แล้วเข้าไปดูใน folder app มันจะประกอบด้วย folder หลักๆ คือ controller, model, view, store
โดยมันจะใช้หลักการ MVC ในการพัฒนานั้นเองแต่จะมี store ขึ้นมาเพื่อเป็นตัวในการเก็บข้อมูลที่มีโครงสร้างตามที่โมเดลกำหนดไว้
ที่นี้ไฟล์หลักๆที่กำหนดค่าในการทำงานคือ app.js เมื่อเปิดไฟล์ขึ้นมาดู
จะเห็นว่ามีการเรียกใช้ในส่วนของ view ที่ชื่อว่า Main
เมื่อเราเข้าไปใน folder app/view จะเห็นไฟล์ Main.js ลองทำการแก้ไข้ในส่วนของ title ของ item title bar และแก้ไข html ดังรูป
จากนั้นลองรันผ่าน url บน google chrome อีกครั้งโดยของผมคือ path http://localhost/touch-2.2.1/thaicoding/
ซึ่งก็จะได้ดังรูป นี้ก็เป็นการติดตั้งและเริ่มที่จะเขียน web mobile app โดยใช้ sencha touch โดยภาษาที่ใช้จะเป็น html 5 , javascript, ext js ครับผม