เริ่มต้น Sencha Touch 2 ในการพัฒนา Web Mobile app โดย HTML5

sencha

เริ่มต้น 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

Sencha touch เราสามารถ Download จากทางเว็บไซต์ Sencha

Sencha Touch

Sencha Command

โดยที่ Sencha Touch จะต้องกรอก email เพื่อให้ระบบตอบเมล์พร้อมลิงค์ Download ไปให้นะครับ

หลังจากที่ดาวโหลด Sencha Touch แล้วก็ให้ทำการแตกไฟล์นำไปไว้บน web server โดยของผมเป็น apache จะเอาไปวางไว้ที่ folder www หรือถ้าเป็น iis server ก็นำไปไว้ที่ inetpub/www นั้นเอง

sencha

จากรูปในเครื่องผมเอาไว้วางไว้ที่ 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

หากติดตั้ง sencha command ได้สำเร็จเมื่อพิมพ์คำสั่งจะได้ดังรูป

ต่อจากนั้นก็ใช้ command line ไปยัง path ที่เราเอาไฟล์ sencha touch ไปวางไว้

sencha

จากนั้นก็ใช้คำสั่งในการ generate project app ใหม่ขึ้นมา โดยรูปแบบคำสั่งมีดังนี้

sencha  generate app nameApp /path/to/app
sencha
โดยที่ผมลองในตัวอย่างจะใช้คำสั่ง sencha generate app thaicoding thaicoding
ผลที่ได้ก็คือจะได้ folder thaicoding ขึ้นมาและมี app ที่ชื่อว่า thaicoding

html5

 

เมื่อลองรันผ่าน url บน google chrome ดูจะได้ดังรูป http://localhost/touch-2.2.1/thaicoding/

sencha

 

ต่อมาลองดูใน folder ที่ได้จากการ generate ขึ้น แล้วเข้าไปดูใน folder app มันจะประกอบด้วย folder หลักๆ คือ controller, model, view, store

โดยมันจะใช้หลักการ MVC ในการพัฒนานั้นเองแต่จะมี store ขึ้นมาเพื่อเป็นตัวในการเก็บข้อมูลที่มีโครงสร้างตามที่โมเดลกำหนดไว้

ที่นี้ไฟล์หลักๆที่กำหนดค่าในการทำงานคือ app.js เมื่อเปิดไฟล์ขึ้นมาดู

sencha

จะเห็นว่ามีการเรียกใช้ในส่วนของ view ที่ชื่อว่า Main

เมื่อเราเข้าไปใน folder app/view จะเห็นไฟล์ Main.js ลองทำการแก้ไข้ในส่วนของ title ของ item title bar และแก้ไข html ดังรูป

sencha

จากนั้นลองรันผ่าน url บน google chrome อีกครั้งโดยของผมคือ path http://localhost/touch-2.2.1/thaicoding/

9

ซึ่งก็จะได้ดังรูป นี้ก็เป็นการติดตั้งและเริ่มที่จะเขียน web mobile app โดยใช้ sencha touch โดยภาษาที่ใช้จะเป็น html 5 , javascript, ext js ครับผม

Leave a Reply

Your email address will not be published. Required fields are marked *