BeginningDeveloperHTML5JavaScriptjQueryNewbieProgramming LanguageSocial Media MarketingWeb Service Technology

พัฒนา Mobile Web App ด้วย Sencha Touch 2.2.0 รู้จักกับ Sencha Cmd

หลังจากที่ออกเวอร์ชันหลายเวอร์ชันมากตอนนี้ก็มาถึงเวอร์ชัน 2.2.0 กับเจ้า Sencha Touch บทเรียนต่อไปนี้คือการสร้างแอพฯ ใหม่ของเราเป็น Sencha Cmd ครับ

Sencha Cmd เป็นเครื่องมืออีกตัวที่ทาง Sencha พัฒนาขึ้นมาเพื่อให้นักพัฒนา สามารถสร้าง Project ของตัวเองขึ้นมาได้ง่าย โดยไม่ต้องห่วงในเรื่องของข้อผิดพลาดของ Path ต่างๆ ที่หลายคนเลยประสบมานับว่าเป็นการขยายกลุ่มผู้ใช้งานที่เติบโตขึ้นมากขึ้น

Sencha Touch
Sencha Touch

โดย Sencha Cmd นั้นสามารถสร้าง Project ใหม่ขึ้นมาได้ทั้ง Sencha Touch และ Ext JS ได้หมดครับ

ให้ไปดาวน์โหลด Sencha Cmd ก่อนที่เว็บไซต์

http://www.sencha.com/products/sencha-cmd/download

ทำการติดตั้งแอพพลิเคชัน Sencha Cmd ลงในเครื่อง PC ของคุณ ตามขั้นตอนข้างล่างเมื่อเสร็จแล้วเราก็จะทราบดีว่า Sencha Cmd ได้เข้าไปเป็นส่วนหนึ่งของ Machine เราแล้วครับ

Sencha Cmd
Sencha Cmd

ข้อเสนอแนะ: หากติดตั้งไม่ได้ต้องติดตั้ง Runtime Java ก่อนนะครับ ค้นหา Google เลยว่า Java Runtime แล้วติดตั้งเวอร์ชันล่าสุดไปเลย

ต่อมาเราจะสร้าง แอพพลิเคชันของเราแล้วล่ะ
เมื่อก่อนนี้ถ้าเราดาวน์โหลด Frame Work ของ Sencha ที่เว็บไซต์

http://www.sencha.com/products/touch/

แล้วจะพบว่า Project ของเว็บไซต์นั้น 100 Mb กว่าๆ การจะอัพโหลดไปไว้บน Host ทีก็ต้องยกไปทั้งหมด
เจ้า Sencha Cmd ถูกพัฒนาเพราะเหตุผลนี้ครับ Hook ตัว Project ของเราให้มีขนาดเล็กเท่าที่จำเป็นก็พอ วิธีการสร้างแอพพลิเคชันก็คือ

ดาวน์โหลด Sencha Touch Framework มาติดตั้งในเครื่องก่อนใน Folder ไหนก็ได้ในตัวอย่างผมติดตั้งไว้ที่

C:/appserv/www/mobile

เปิด Command Prompt หรือ cmd ขึ้นมาครับเปลี่ยน Path Directory จากเดิมให้ไปที่ Path ของ Project ที่เราติดตั้ง Sencha Touch ไว้

#dos command
cd /
cd C:/Appser/www/mobile

ก็จะเข้าไปที่หน้า Directory ของ Project เราแล้วต่อไปคือการสร้าง Create a New Project ครับ
พิมพ์คำสั่งนี้ลงไป

C:\Appserv\www\mobile>sencha generate app “ชื่อแอพฯ” C:/appserv/www/”ชื่อแอพฯ”

ตัวอย่างองผมคือผมต้องการสร้างแอพฯ ที่ชื่อว่า “adways”

C:\Appserv\www\mobile>sencha generate app adways C:/appserv/www/adways

กด Enter ระบบจะสร้าง Project ให้ครับ

Generating a Workspace
Generating a Workspace

ระหว่างนี้ เราสามารถเข้าไปดู Path ตัว Project ของ ของเราได้

cd/
cd apperv
cd www
cd adways

ก็จะเห็น Path ตัว Project ของเราครับ

เราสามารถสร้าง Model ชื่อว่า User ขึ้นมาเบื้องต้นโดยมี id ชื่อ และ อีเมลต่อได้ดังนี้

C:\Appserv\www\adways>sencha generate model User id:int,name,email,image

กด Enter ตัวระบบจะสร้าง Model ขึ้นมาให้ทันที

Application's Structure
Application’s Structure

ตรวจสอบไฟล์ และ Code Template ที่ถูกสร้างขึ้นครับ

ไฟล์ Model ที่สร้างขึ้น
ไฟล์ Model ที่สร้างขึ้น

ทดลองรัน App ของเราที่สร้างขึ้นจะได้ผลลัพธ์ตามนี้

แอพฯ ที่ Create ขึ้น
แอพฯ ที่ Create ขึ้น
แอพ ที่สร้างขึ้น
แอพ ที่สร้างขึ้น

เป็นไงบ้างครับ เวอร์ชันของ Sencha Touch ตัวใหม่ และ Sencha Cmd สามารถทำให้นักพัฒนา Mobile Web App ทางเลือกสามารถพัฒนาแอพฯ ได้สะดวกขึ้น

Asst. Prof. Banyapon Poolsawas

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

Related Articles

Back to top button

Adblock Detected

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