Hybrid Web Application Platform

Appcelerator Titanium

2010년 10월 17일 일요일

Web Evolution

• 웹은 계속 진화하고 있다.

• 인터넷 환경도 계속 진화하고 있다.

• 3.0을 넘어 4.0 유비쿼터스 웹으로 진화하고 있다.

2010년 10월 17일 일요일

Why Hybrid Web App?

• Hand-held Device(smart phone, tablet pc)의 발전

• Web OS(Chrome OS, Palm Web OS) 의 도래

• Home Device(Apple TV, Google TV)로의 확장

• Browser(Chrome, Safari, Firefox extension) 기술의 발전

• Social Network & Real Time의 욕구 상승

2010년 10월 17일 일요일

Web

2010년 10월 17일 일요일

TV

Display Screen

ATM, Kiosk

Home Device

Desktop

NotebookSmart Phone

Tablet

Web

2010년 10월 17일 일요일

TV

Display Screen

ATM, Kiosk

Home Device

Desktop

NotebookSmart Phone

Door lock

Light

set-top box

Display ui

Chrome OS

Tablet

Ice box

Printer Fax

iPhone

Andorid

Advertisement

iPad

Sub trainDisplay ui

Galaxy Tab

Web Game

Gov2.0

2010년 10월 17일 일요일

• Introduce

• Development

• Demo

• Appendix

Index

2010년 10월 17일 일요일

Introduction

2010년 10월 17일 일요일

Architecture Desktop

Your Application(html, css, javascript,php,python,ruby)

Desktop API Optional Modules

OS - Window, Mac, Linux

UI API

Bridge to OS - JavaScript,Ruby,Python,PHP, C, C#

2010년 10월 17일 일요일

Architecture Mobile

Your Application(html, css, javascript)

Phone API Optional Modules

Bridge - JavaScript - Java, Objective-C

OS - Android, iOS

UI API

2010년 10월 17일 일요일

resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic

2010년 10월 17일 일요일

Desktop

Tablet

Mobile

resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic

2010년 10월 17일 일요일

2010년 10월 17일 일요일

HTML

2010년 10월 17일 일요일

HTML

JavaScript

2010년 10월 17일 일요일

HTML

JavaScriptCSS

2010년 10월 17일 일요일

Webkit

HTML

JavaScriptCSS

2010년 10월 17일 일요일

Webkit

HTML

JavaScriptCSS

Kroll

2010년 10월 17일 일요일

Webkit

HTML

JavaScriptCSS

Kroll

2010년 10월 17일 일요일

2010년 10월 17일 일요일

Bridge Kroll=

2010년 10월 17일 일요일

2010년 10월 17일 일요일

Kroll Process is a pyrometallurgical industrial processused to produce metallic titanium

2010년 10월 17일 일요일

Titanium APIs

2010년 10월 17일 일요일

ui API

2010년 10월 17일 일요일

ui APITitanium.UI.*

320 x 480Vertical Resolution

Carrier 12:34 PMWeb Page Title

http://host.domain.tld

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.

Optional instructions for this pane go here

Pane LabelCancel Save

HTML text field

HTML <select>

HTML radio button (off)

HTML radio button (on)

HTML Button

HTML checkbox (off)

HTML checkbox (on)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.

Option 1 Optional Status

Option 2 Optional Status

Tab ThreeTab One Tab Two

Item 1 ON

Example as a form label

Item 3 Optional Status

Item 2 OFF

Carrier 12:34 PM

rhio.kimBack Button Button

Confirmation MessageOptional explanation of what is the

system is asking

Secondary Primary

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.

Optional instructions for this pane go here

Pane LabelCancel Save

1 2 3 4 5 6 7 8 9 0

- / : ; ( ) $ & @

. , ? ! ’#+=

spaceABC return

”

First Name Example Text here

Last Name Example Text here

Phone Number Example Text here

low high

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.

Item 1 ON

Item 3 Optional Status

Item 4 Optional Status

ICN ICN

Option 1 Optional Status

Option 2 Optional Status

Item 2 OFF

WebDevMobileBack Button

Carrier 12:34 PM

2010년 10월 17일 일요일

ui APITitanium.UI.*

320 x 480Vertical Resolution

Carrier 12:34 PMWeb Page Title

http://host.domain.tld

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.

Optional instructions for this pane go here

Pane LabelCancel Save

HTML text field

HTML <select>

HTML radio button (off)

HTML radio button (on)

HTML Button

HTML checkbox (off)

HTML checkbox (on)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.

Option 1 Optional Status

Option 2 Optional Status

Tab ThreeTab One Tab Two

Item 1 ON

Example as a form label

Item 3 Optional Status

Item 2 OFF

Carrier 12:34 PM

rhio.kimBack Button Button

Confirmation MessageOptional explanation of what is the

system is asking

Secondary Primary

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.

Optional instructions for this pane go here

Pane LabelCancel Save

1 2 3 4 5 6 7 8 9 0

- / : ; ( ) $ & @

. , ? ! ’#+=

spaceABC return

”

First Name Example Text here

Last Name Example Text here

Phone Number Example Text here

low high

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.

Item 1 ON

Item 3 Optional Status

Item 4 Optional Status

ICN ICN

Option 1 Optional Status

Option 2 Optional Status

Item 2 OFF

WebDevMobileBack Button

Carrier 12:34 PM

2010년 10월 17일 일요일

Desktop API, Phone API

2010년 10월 17일 일요일

Desktop API, Phone APITitanium.Codec

Titanium.DesktopTitanium.JSON

Titanium.NotificationTitanium.ProcessTitanium.Worker

Titanium.UpdaterManager

2010년 10월 17일 일요일

Desktop API, Phone APITitanium.Platform

Titanium.FileSystemTitanium.Geolocation

Titanium.GestureTitanium.Contact

Titanium.AccelerometerTitanium.Media

Titanium.Network

Titanium.CodecTitanium.Desktop

Titanium.JSONTitanium.Notification

Titanium.ProcessTitanium.Worker

Titanium.UpdaterManager

2010년 10월 17일 일요일

Optional Modules

2010년 10월 17일 일요일

Optional ModulesTitanium.Analytics

Titanium.MapTitanium.Yahoo

Titanium.Facebook

2010년 10월 17일 일요일

So what’s Titanium?

• Titanium is a rapid application development platform(HTML, CSS and JavaScript)

• The framework also has support for Python, Ruby and PHP

• Seamlessly create desktop web applications(your favorites back-end and front-end web technologies)

• One source Multi platform(Window,MAC,Linux,iOS,Android)

2010년 10월 17일 일요일

Adobe Air Junior?

• free/open source Apache license, for ultimate compatibility with your workflow, and infinite extensibility

• Support Python, Ruby, and without needing to learn Flash or ActionScript

• Cloud publishing features to compile and publish your application for multiple platforms.

• And much more!!

2010년 10월 17일 일요일

How it all works

• Full filesystem access

• Internal SQLite database access

• AJAX is still avaiable, Network API allows to interface with HTTP at a much lower level, open socket connections to other service

• Wrapping Desktop features such as notifications, tray icons, window menu

• HTML5, CSS3, Web APIs

2010년 10월 17일 일요일

Development

2010년 10월 17일 일요일

System Spec

2010년 10월 17일 일요일

Desktop

• Window 7, XP and Vista

• Mac OS X 10.6.4 (Snow Leopard)

• Ubuntu 9.10 (Karmic Koala)

2010년 10월 17일 일요일

Mobile

• iPhoneLastest iPhone SDK 3.2 for iPhone/iPad

• AndroidAndroid SDK - http://developer.android.com/sdk/index.htmlSDK platform Android 1.6 API 4(recommand)

Google APIs package for KitchenSinkJava Development Kit 6(java 1.6)

2010년 10월 17일 일요일

Install & Setting

2010년 10월 17일 일요일

• Downloadhttp://www.appcelerator.com/products/download/

• Source Installgit clone http://github.com/appcelerator/titanium_developer.git

2010년 10월 17일 일요일

Introduce Interface

2010년 10월 17일 일요일

2010년 10월 17일 일요일

2010년 10월 17일 일요일

2010년 10월 17일 일요일

2010년 10월 17일 일요일

2010년 10월 17일 일요일

2010년 10월 17일 일요일

Usage

2010년 10월 17일 일요일

New Project

2010년 10월 17일 일요일

Edit Project

2010년 10월 17일 일요일

Launch & Testing

2010년 10월 17일 일요일

Run Emulator

2010년 10월 17일 일요일

Run Emulator

2010년 10월 17일 일요일

Package

2010년 10월 17일 일요일

Distribution

2010년 10월 17일 일요일

Distribution

2010년 10월 17일 일요일

See more

• Desktophttp://developer.appcelerator.com/doc/desktop/guides

• Mobilehttp://developer.appcelerator.com/doc/mobile/guides

2010년 10월 17일 일요일

Online platform

2010년 10월 17일 일요일

2010년 10월 17일 일요일

2010년 10월 17일 일요일

2010년 10월 17일 일요일

2010년 10월 17일 일요일

Show Case

2010년 10월 17일 일요일

resource : http://www.appcelerator.com/showcase/applications-showcase/

2010년 10월 17일 일요일

Demo

2010년 10월 17일 일요일

• Usage Demo

• Desktop uTube Deck Demo

• Twitter Client Demo with Ext JS

• iPhone/iPad KitchenSink Demo

2010년 10월 17일 일요일

• Localization Framework

• Advertising, Commerce

• Buletooth networking

• Third-party accessories

• Application Database Sync

• encrypted databases

Titanium 2.0

2010년 10월 17일 일요일

• RIM Blackberry

• Nokia

Titanium 2.0

2010년 10월 17일 일요일

Appendix

2010년 10월 17일 일요일

PhoneGap

• http://www.phonegap.com/

2010년 10월 17일 일요일

Corona

• http://www.anscamobile.com/

2010년 10월 17일 일요일

QuickConnect

• http://quickconnect.pbworks.com/

2010년 10월 17일 일요일

Reference

• Appcelerator Titaniumhttp://www.appcelerator.com

• Wikipediahttp://en.wikipedia.org/wiki/Appcelerator_Titanium

• Titanium tutorialhttp://www.sergemeunier.com/blog/tutorials/titanium-tutorials/

• Compare with othershttp://stackoverflow.com/questions/1482586/comparison-between-corona-phonegap-titanium

2010년 10월 17일 일요일

QA

2010년 10월 17일 일요일

endingAuthor : rhio.kim

@rhiokim

http://rhio.tistory.com

rhio.kim@gmail.com

FRENDS

NHNJavaScript Ninija

2010년 10월 17일 일요일

endingAuthor : rhio.kim

@rhiokim

http://rhio.tistory.com

rhio.kim@gmail.com

FRENDS

NHN

JavaScript Ninija

2010년 10월 17일 일요일

Thanks

2010년 10월 17일 일요일

Thanks );

2010년 10월 17일 일요일