Hybrid Web Application Platform

Appcelerator Titanium

2010년 9월 18일 토요일

Web Evolution

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

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

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

• HTML5

2010년 9월 18일 토요일

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년 9월 18일 토요일

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) 기술의 발전

2010년 9월 18일 토요일

• Introduce

• Development

• Demo

• Appendix

Index

2010년 9월 18일 토요일

Introduction

2010년 9월 18일 토요일

Architecture

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

2010년 9월 18일 토요일

Architecture

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

Phone API Optional Modules

Bridge - JavaScript - Java, Objective-C

OS - Android, iOS

UI API

2010년 9월 18일 토요일

Desktop

Tablet

Mobile

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

2010년 9월 18일 토요일

Webkit

HTML

JavaScriptCSS

Kroll

2010년 9월 18일 토요일

Bridge Kroll=

2010년 9월 18일 토요일

Kroll Process is a pyrometallurgical industrial processused to produce metallic titanium

2010년 9월 18일 토요일

Titanium APIs

2010년 9월 18일 토요일

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년 9월 18일 토요일

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년 9월 18일 토요일

Optional ModulesTitanium.Analytics

Titanium.MapTitanium.Yahoo

Titanium.Facebook

2010년 9월 18일 토요일

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년 9월 18일 토요일

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년 9월 18일 토요일

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년 9월 18일 토요일

Development

2010년 9월 18일 토요일

System Spec

2010년 9월 18일 토요일

Desktop

• Window

• Mac

• Linux

2010년 9월 18일 토요일

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년 9월 18일 토요일

Introduce Interface

2010년 9월 18일 토요일

2010년 9월 18일 토요일

2010년 9월 18일 토요일

2010년 9월 18일 토요일

2010년 9월 18일 토요일

2010년 9월 18일 토요일

2010년 9월 18일 토요일

Usage

2010년 9월 18일 토요일

New Project

2010년 9월 18일 토요일

Launch & Testing

2010년 9월 18일 토요일

Package

2010년 9월 18일 토요일

Distribution

2010년 9월 18일 토요일

Run Emulator

2010년 9월 18일 토요일

Run Emulator

2010년 9월 18일 토요일

Online platform

2010년 9월 18일 토요일

2010년 9월 18일 토요일

2010년 9월 18일 토요일

2010년 9월 18일 토요일

Show Case

2010년 9월 18일 토요일

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

2010년 9월 18일 토요일

Demo

2010년 9월 18일 토요일

• Usage Demo

• Desktop uTube Deck Demo

• iPhone/iPad KitchenSink Demo

2010년 9월 18일 토요일

Appendix

2010년 9월 18일 토요일

PhoneGap

• http://www.phonegap.com/

2010년 9월 18일 토요일

Corona

• http://www.anscamobile.com/

2010년 9월 18일 토요일

QuickConnect

• http://quickconnect.pbworks.com/

2010년 9월 18일 토요일

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년 9월 18일 토요일

endingAuthor : rhio.kim

@rhiokim

http://rhio.tistory.com

rhio.kim@gmail.com

NHN/Ajax UI Developer

FRENDS.kr

2010년 9월 18일 토요일

Thanks );

2010년 9월 18일 토요일