웹의 발전과 Adobe Air

ADOBE AIR
https://github.com/cepiloth/
http://overface.tistory.com/
Jae Hoon, Lim
2014.03.26

SUBJECT
1.ABOUT
WEB
2.WEBLOUTION
3.INTERNAL
DISCORD OF
PLATFORM
4.ABOUT
AIR
5.MOBILE
APP
6.REFERENCE

ABOUT WEB
Evolution Of The Web

ABOUT WEB
Web 2.0 등장배경
클라이언트 / 서버MAIN FRAME
WEB APPLICATIONS
REACH
LOCAL
GLOBAL
RICHTEXT UI 미디어가 결합된 GUI
1992
1998
2004
HTML의 한계
Page 단위 어플리케이션
제한된 UI
브라우저 호환성
요청시에만 데이터 제공
오프라인시 동작 불가
C/S 환경의 장점
스크린 단위 어플리케이션
확장가능한 UI 라이브러리
온라인/오프라인 모드 지원
WYSIWYG 형식의 출력
RIA
웹 2.0

ABOUT WEB
<submit>
<data>
<data>
<data>
<data>
<data>
<data>
<data>
<data>
<data>
<data>
<submit>
<data>
<data>
<data>
<Web 2.0><Web 1.0>
• 대기시간 축소
• 네트웍 트랙픽 감소
• 서버 부하 경감
• 에러 감소
Web 1.0 vs Web 2.0

ABOUT WEB
WAS 데이터
DBMS
LDAP
CRM/
ERP/CM
Web
Services.
Service
Adapter
JavaBeans
JMS
Spring
Hibernate
……. WAS
Data
Service
데이터
DBMS
LDAP
CRM/
ERP/CM
Web
Services.
Service
Adapter
JavaBeans
JMS
Spring
Hibernate
…….
……..
……..
….
1
2
3
4
N
……..
……..
1
2
3
4
N
Query 1
Query 2
Query 3
Query 4
Query N
Query 1Data
Cache
Service
Messaging
Service
RPC
Service
Request
Response
Produce
Subscribe
<WEB 1.0> <WEB 2.0>
• N개의 요청당 N개의 DB쿼리 실행
• 요청 개수 만큼 트래픽 및 프로세스 실행
• 웹 1.0
• 실시간 서비스 어려움
• 리소스 증가 : 시간, 트래픽, DB쿼리
• N개의 요청당 1회 만 DB쿼리 실행
• 트래픽이 줄고 반응이 빠름
• 웹 2.0
• 실시간 협업 서비스
•리소스 감소 : 시간, 트래픽, DB쿼리
WEB ARCHITECTURE

ABOUT WEB
WAS
런타임컴파일러
app
.mxml
app.swf
http:// acme.com/app.mxml
LiveCycle Data Service
J2EE
Resource
DBMS
LDAP
CRM/
ERP/CM
Web
Services.
플래시플레이어
데이터 연동 서비스
RPC 서비스
실시간 Data 연동 서비스
Message Service
Data Management Service
Service
Adapter
JavaBeans
JMS
Spring
Hibernate
…….
데이터 요청(HTTP, WSDL, Java Method)
app.swf
데이터 전송(XML, SOAP, AMF)
1. 웹브라우저에서 플렉스 URL 호출하면 플렉스 데이터 서비스에서 *.mxml을 *.swf으로 컴파일
2. *.swf는 PC에 다운로드되어 플래시플레이어에서 실행됨
3. 플렉스 애플리케이션에서 데이터 요청 : HTTP, WSDL, Java Method
4. 결과 데이터를 플렉스 애플리케이션으로 리턴 : XML, SOAP, AMF
HTTP Services
Web Services
Remote Objects
FLEX APPLICATION OPREATION PROCEDURE

ABOUT WEB
WEB 2.0
• 새로운 패러다임으로 웹 2.0
• 웹 2.0 용어의 유래와 의미
– 과거의 웹활용과 다른, 새로운 형태의 웹의 활용을 의미
– 새로운 기술이 많이 활용되기는 하지만, 특정한 기술을
의미하지는 않음(AJAX / RSS 등)
• 주요특징 - 참여, 개방, 공유
• X-Internet, RIA

ABOUT WEB
• X-Internet = eXecutable internet + eXtended Internet
X-인터넷(X-Internet)이란?

WEBOLUTION
WEB3.0 = WEBOLUTION

NETWORKING
INTERNET
WEB 2.0
골격계 형성 근육계 형성 신경계 형성
WEB 3.0
지능망 형성
WEB3.0 = WEBOLUTION
WEBOLUTION

웹3.0웹2.0
참여 소통
공유 융합
개방 개인화
WEBOLUTION
WEB3.0 = WEBOLUTION

WEBOLUTION
• 소통
– 실시간
– 협업
• 융합
– 정보의 융합
– 플랫폼의 융합
• 개인화
– 동적인 UI 생성
– 위젯
소통 서비스 :
예) Facebook.com
융합 서비스 :
예) Open Screen Project
개인화 서비스 :
예) iGoogle.com

ABOUT RIA
Rich Internet Application

INTERNAL DISCORD OF PLATFORM
공주를 만나려면 전문직을?

INTERNAL DISCORD OF PLATFORM
• ? = 플랫폼 마다 다른 개발자를 뽑아?
기술자인 마리오도 힘들다

ABOUT AIR
[DESKTOP APPLICATION] [WEB APLLICATION] [MOBILE APLLICATION] [DEVICE APPLICATION]
CROSS PLATFORM

ABOUT AIR
<ADOBE AIR>
운영체제
AIR + Flex API
AIR 실행 파일
(플렉스 / 플래시 / HTML)
AIR 런타임
<FLEX>
웹브라우저
Flex API
SWF(플래시 실행파일)
플래시 플레이어
AIR & FLEX

ABOUT AIR
ADOBE AIR를 사용하면 웹 개발자는 자신이 갖고 있는
기존 기술을 이용해 리치 인터넷 애플리케이션(RIA)을
구축하여 데스크탑에 배포가 가능
ADOBE AIR

ABOUT AIR
RIA APLLICATION FOR GENERAL USER

ABOUT AIR
RIA APLLICATION FOR BUSINESS USER

ABOUT AIR
APPLICATIONS THAT REQUIRE AIR
1. 데스크탑과 기타 데스크탑 어플리케이션 통합
2. 로컬 디스크와 같이 로컬 리소스 활용
3. 백그라운드에서 어플리케이션 실행
4. 사용자와 지속적인 연결
5. 오프라인뿐만 아니라 인터넷에 자주 연결하지 않는 경우에도 지원
6. 사용자 요구에 맞게 유저 인터페이스를 제작하여 어플리케이션 고유
브랜드 소유

ABOUT AIR
크로스 플랫폼
애플리케이션
통합된 렌더링
통합된 DOM 및
스크립팅
Flash
Flex
ActionScript
XML
오디오
비디오
HTML
PDF
HTML
HTML
JavaScript
XML
CSS
Flash
PDF
Adobe AIR API
Mac, Windows, Linux 및 디바이스 OS
파일 시스템
액세스
네트워크
감지
알림
애플리케이션
업데이트
드래그 앤
드롭
로컬
데이터베이스
...
ADOBE AIR APLLICATION STACK

ABOUT AIR
FLASH BUILDER PROJECT TYPE
FLEX PROJECT(WEB)
FLEX PROJECT(DECKTOP)
WEB APPLICATIONS
DESKTOP APPLICATION
(Windows, Linux, Mac)
MOBILE APPLICATION
(ANDROID, IOS, BLACKBERRY..)
FLEX MOBILE PROJECT

MOBILE APPLICATION
(1) 플래시 빌더에서 XML 소스파일 작성
(2)컴파일
(3) 웹브라우저의 플래시플레이어에서 실행
FxExam1_1.mxml
FxExam1_1.swf
FLASH BUILDER USAGE

MOBILE APPLICATION
1. 모바일 브라우저에서 플렉스 웹사이트를 구동하는 것
2. 모바일 HTML 처럼 화면, 폰트, 이벤트 최적화가 필요함
MOBILE WEB

MOBILE APPLICATION
1. 모바일용 플래시 플레
이어가 설치되어 있어
야 함
2. 플래시플레이어는
안드로이드 마켓에서
무료 다운 로드 가능
MOBILE WEB

MOBILE APPLICATION
1. 플렉스로 만든 안드로
이드 앱을 마켓에서
설치함
2. 플래시 플레이어
모바일 AIR가 설치되
어 있어야함
MOBILE APP

MOBILE APPLICATION
모바일 AIR가 설치되어 있지 않으면 다음과 같은 설치 안내로 이동
MOBILE APP

MOBILE APP VS MOBILE WEB
모바일앱 모바일웹
개발방식 전용 SDK HTML
배포방식 전용 앱스토어 웹사이트
장점 폰 API 활용 개발, 배포용이성
단점 잦은 배포와 업데이트 브라우저방식
FLEX 구현 모바일 어플리케이션 웹 어플리케이션
MOBILE APPLICATION

MOBILE APPLICATION
• S/W – TOUCH EVENT, CALL, SQLite DB ETC.
• H/W – SENSOR, CAMERA, GPS, MIC ETC.
FLASH MOBILE SPECFICATION

MOBILE APPLICATION
FLASH MOBILE SPECFICATION
1. 플렉스 모바일 프로젝트 생성
2. 플렉스 기본 컴포넌트로 UI 작성
3. 이벤트 처리는 액션스크립트로 작성
4. 실행
1) On Desktop Mode : Emulator
2) On Device Mode : 폰을 USB 연결하여 실행
* 해당 제조사의 USB 드라이버를 설치하면 가능

REFERENCE
• http://okgosu.net
• http://jidolstar.tistory.com
• http://adobe.com
• http://www.evolutionoftheweb.com

웹의 발전과 Adobe Air

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (7)

Semelhante a 웹의 발전과 Adobe Air

Semelhante a 웹의 발전과 Adobe Air (20)

Último

Último (8)

웹의 발전과 Adobe Air

Notas do Editor