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 ตามนี้ครับ

$base-color: #000;
@import 'sencha-touch/base';
@import 'sencha-touch/base/all';
@import 'sencha-touch/windows';
@import 'sencha-touch/windows/all';

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

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

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

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

Ext.define('Gooruism.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
		'Ext.carousel.Carousel'
    ],

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

config: {
        tabBarPosition: 'bottom',
		
        items: [

            {
            title : 'Features',
            iconCls : 'home',
            xtype:'panel',            
            layout:'vbox',
            defaults:{
                flex:1
            },
            items:[{
				
                xtype : 'carousel',
                direction:'horizontal',
                items:[
					/*{
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Lovedesigner'
                    },*/
                    {
                        xtype : 'panel',
						html: [
							"",
							"เรื่องราวของเหล่า Gangster แนวใหม่กับการล้มอำนาจเจ้าพ่อ",
						].join("")
                    },
                    {
                        xtype : 'panel',
			html: [
			''
			].join("")
                    },
					{
                        xtype : 'panel',
			html: [
			''
			].join("")
                    },
					{
                        xtype : 'panel',
			html: [
			''
			].join("")
                    }
                ]
            },{
                xtype: 'nestedlist',
                    title: 'Top Stories',
		    iconCls: 'settings',
                    cls: 'home',
                    displayField: 'title',

                    store: {
                        type: 'tree',

                        fields: ['title', 
                                  'link', 
                                 'author', 
                                'contentSnippet', 
                                'content', {
                            name: 'leaf',
                            defaultValue: true
                        }],

                        root: {
                            leaf: false
                        },

                        proxy: {
                            type: 'jsonp',
                            url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://www.lovedesigner.net/feed/',
                            reader: {
                                type: 'json',
                                rootProperty: 'responseData.feed.entries'
                            }
                        }
                    },

                    detailCard: {
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true
                    },

                    listeners: {
                        itemtap: function(nestedList, list, index, element, post) {
                            this.getDetailCard().setHtml(post.get('content'));
                        }
                    },
		 getItemTextTpl: function(node) {
			return '
{title}
'; } } ] }, { xtype: 'nestedlist', title: 'Reviews', iconCls: 'settings', cls: 'blog', displayField: 'title', store: { type: 'tree', fields: ['title', 'link', 'author', 'contentSnippet', 'content', { name: 'leaf', defaultValue: true }], root: { leaf: false }, proxy: { type: 'jsonp', url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=20&q=http://www.lovedesigner.net/feed/', reader: { type: 'json', rootProperty: 'responseData.feed.entries' } } }, detailCard: { xtype: 'panel', scrollable: true, styleHtmlContent: true }, listeners: { itemtap: function(nestedList, list, index, element, post) { this.getDetailCard().setHtml(post.get('content')); } }, getItemTextTpl: function(node) { return '
{title}
'; } }, { title: 'About Us', iconCls: 'team', xtype : 'panel', html: [ '

About Us

', '', '

Mobile Content จากเว็บไซต์ http://www.lovedesigner.net รวมบทความกรท่องเที่ยวรีวิว และไลฟ์สไตล์ ติดต่อส่งบทความรีวิวได้ที่ Email:[email protected]

' ].join("") } ] }

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

{
xtype : 'panel',
html: [
''
].join("")
},
{
xtype : 'panel',
html: [
''
].join("")
},
{
xtype : 'panel',
html: [
''
].join("")
 }

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

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

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

title: 'About Us',
iconCls: 'team',
xtype : 'panel',
html: [
'

About Us

', '', '

Mobile Content จากเว็บไซต์ http://www.lovedesigner.net รวมบทความกรท่องเที่ยวรีวิว และไลฟ์สไตล์ ติดต่อส่งบทความรีวิวได้ที่ Email:[email protected]

' ].join("")

ต่อจากนั้นก็มาปรับแต่ง 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

Asst. Prof. Banyapon Poolsawas

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

Related Articles

Leave a Reply

Back to top button

Adblock Detected

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