2010년 7월 28일 수요일
OpenPlug(ELIPS Studio3)를 이용한 아이폰용 App개발
자료의 출처를 아래 밝힙니다.
|
OpenPlug(ELIPS Studio3)를 이용한 아이폰용 App개발
1. OpenPlug 현재 수많은 Flash 플랫폼의 애플리케이션들이 아이폰용 애플리케이션으로 릴리즈 하기 위해 Flash CS5의 정식 출시를 기다리고 있을 것이다. 필자 또한 OpenPlug를 알기 전까지
Studio 3 beta 를 설치하자. (다운로드를 받으려면 회원가입을 먼저 해야 한다.) 다운로드를 받았다면 설치를 하면 되겠다. 설치방법은 다음 URL을 참고하자.
2-1. 개발 프로세스의 이해 본격적으로 아이폰용 애플리케이션 개발에 대해 얘기해보자. 자세한 방법은 아래 URL에서 확인할 수 있다. http://developer.openplug.com/index.php/learn/tutorials/?videoid=20
2-2. 프로젝트 생성 및 환경설정
새로운 프로젝트는 기본적으로 AIR Type으로 설정이 된다. 이 부분은 기존 Flex3 Builder에서 새로운 프로젝트를 만드는 것과 다른 부분은 없다. 원하는 프로젝트 이름을 설정하고
이 부분에서는 아이폰에 올라갈 아이콘, 애플리케이션 이름 그리고 컴파일 후 Deploy될 경로를 정해주는 부분이다. 이제 위와 같이 Mobile 환경설정이 끝났다면 상단에 Plug-In으로 추가된 부분에 아이폰을 선택할 수 있게 될 것이다
아이폰을 선택하게 되면 아이폰용 애플리케이션으로 바꿔줄 준비가 끝나게 된다. 2-3. Windows 환경에서 Build 및 테스트 이제 간단하게 컴포넌트를 놓고 실행해 보자. 여기서 문제가 발생했다. 제공하는 컴포넌트가 적다는 것이었다. 기존 Flex에서 제공하는 컴포넌트가 아닌 Elipse Flex SDK를 사용하기 때문에 제공하는 컴포넌트가 매우 적은걸 알 수 있습니다. 해당 URL을 통해 제공하는 API를 확인할 수 있다. http://developer.openplug.com/index.php/learn/elips-3-api-reference
2-4. Converting(C++코드) 및 아이폰으로 릴리즈 결과가 확실히 맞는 Emulator는 아니지만 기본적인 컴포넌트와 아이폰에서 쓸 수 없을만한 프로세스만 아니라면 아이폰용으로 릴리즈해도 크게 문제는 없다. 지금부터는 아이폰용으로 릴리즈하기 위해 C++코드로 컴파일되는 부분을 설명할 차례이다. 이 부분은 비교적 간단하다. 지금까지 잘 따라서 진행했다면 클릭 한번으로 컴파일이 되는 것을 확인할 수 있다.
물음표 오른쪽에 위치한 화살표를 클릭하게 되면 현재 등록된 프로젝트 이름이 나오게되고, 여기서 컴파일할 프로젝트를 선택하게 되면 Mobile 관련 세팅한 부분에서 선택한
위 그림에서 com.yourcompany. << 이 부분을 자신이 가지고있는 인증키로 바꿔주고, Xcode Project File을 실행을 시키자. 그리고 디바이스 및 배포환경을 설정을 한 후 Build를 시키면 설정에 따라 Emulator나 IPhone으로 릴리즈 되는 것을 확인할 수 있게된다. 아래 화면은
3. 문제점 지금부터는 이번 프로젝트를 진행하면서 발생하였던 여러가지 문제점에 대해 얘기해보고자 한다. Flex SDK를 사용하지 않으므로 인해 발생하는 많은 컴포넌트의 부재가 가장 큰 문제였다. 이 문제를 해결하기 위해 기존에 있는 컴포넌트와 최대한 유사한 컴포넌트를 개발하기 시작하였고, 그 과정에서 여러가지 문제점들을 추가로 발견하게 됐다. Windows 환경에서 Emulator를 바탕으로 나오는 결과물이 이상하게 Mac OS환경에서 Emulator나 IPhone으로 릴리즈만 되면 그려져야하는 그림들이 그려지지 않았다. 그래서 찾아보았더니 마지막으로 메모리 문제였다. 기존 개발환경에서 개발하듯 컴포넌트가 생성되고, 화려함을 더해주기 위해 여러가지 이펙트를 더하자 아이폰 릴리즈시에 과다한 메모리 사용으로 인해 엄청나게 느려지거나 끊기는 현상이 발생했다. 이번 프로젝트의 목표가 일단 아이폰에 릴리즈할 정도의 기간만을 가지고 한것이라 여러가지 방법으로 테스트 해보지 못해 좋은 결과는 볼 수 없었지만 차후에 기존 애플리케이션을 Mobile용으로 옮겨가는 과정에서 이런 부분들은 꼭 수정이 되어야 Mobile에서 원하는 결과물을 볼 수 있을 것이다. 4. 나아가기 지금까지 OpenPlug를 이용해 간단한 Flex 애플리케이션을 IPhone용 애플리케이션으로 만들어봤다. 위의 문제점들 이 외에도 많은 문제들이 있었고, 찾지 못한 문제점들도 많지만 목표로 했던 FlexBuilder를 기반으로 한 애플리케이션이 IPhone에 올라가는 것을 확인할 수 있었다. 하지만 무엇보다 ELIPS Studio3를 사용할 경우 생기는 장점은 IPhone뿐만이 아니라 다양한 mobile용으로 컴파일을 해주기 때문에 현재 다양한 mobile환경에서 일일이 각 디바이스에 맞춘 개발을 할 필요없이 한번의 개발로 다양한 mobile 장치에 사용할 수 있는 애플리케이션으로 바꾸어줄 수 있다는 것이다. 앞으로 조금 더 발전이 되어 한 번의 개발로 IPhone 뿐만이 아니라 다양한 장치에서도 사용할 수 있는 환경으로 발전하기를 기대해 본다. <참고자료> | ||||
|
저자 : 최예규
저자소개 : 현재 RIA Soft 서비스 1팀에서 근무하고 있으며, 누구와도 대화가 통하는 프로그래머가 되는 것이 꿈인 초보 개발자입니다.
Flash Builder 4의 HTTP 서비스로 ASP.NET에 접근하는 Flex 애플리케이션 구축하기
자료의 출처를 아래 밝힙니다.
|
Flash Builder 4의 HTTP 서비스로 ASP.NET에 접근하는 Flash Builder 4의 데이터-중심 개발기능을 사용하면, HTTP 서비스에서 데이터를 검색하는 Flex 애플리케이션을 쉽게 구축할 수 있다. 또한 Flash Builder 4는 HTTP 서비스에서 반환된 XML 데이터를 이용해서, 자동으로 value object를 생성할 수 있고, 이러한 기능은 백-엔드와 연관을 쉽게(많은 코딩 없이 처리)하고, 여러분은 프런트-엔드 개발에 전념할 수 있도록 도와 준다. 요구 사항 이번 문서에 포함된 대부분의 작업을 하기 위해서, 다음과 같은 소프트웨어와 파일이 필요하다: Flash Builder 4 샘플 파일들:
선수 지식 .NET 플랫폼을 사용한 웹 프로그래밍 경험뿐만 아니라, SQL Server를 설정하고, ASP.NET과 데이터 베이스를 사용 경험이 요구되며, Flex에 대한 사전 경험은 이번 문서를 학습하는데 많은 도움이 될 것이다. 데이터베이스와 .NET HTTP 서비스 설정하기 이번 튜토리얼에 대한 예제 데이터베이스는, Visual Studio를 사용하여, 다음과 같은 열과 데이터 타입(그림 1 참조)의 형태로, 사무실의 위치를 저장할 수 있는 임의의 택배 회사 테이블(테이블 명 Centre)을 만들어 사용한다:
튜토리얼 예제 파일에 포함되어 있는, Database.mdf 파일을 SQL Server 데이터베이스에서 사용할 수 있다. CentreInterface.cs 소스코드에서, 두 군데의 경로를 변경해야 한다. 파일에서 AttachDbFilename=/*ENTER PATH OF THE DB HERE*/ 찾아서, 여러분의 구성요소에 맞게 두 개의 인스턴스를 수정한다. 경로 속성 형식을 올바르게 수정해야 한다. 코드를 여러분의 로컬 서버에 있는 데이터베이스로 설정한 후, 브라우저에서 ASPX 파일을 호출해, 올바르게 데이터에 접근하고 XML 데이터를 응답하는지 검증해야 한다. Flex에서 HTTP service 정의하기 Flex 애플리케이션을 만들어, XML 형식의 데이터를 사용하려면 다음 단계를 따른다:
여러분의 서비스 내에 많은 operation을 가지고 있다면, 여러분은 이번 옵션에서 Yes를 선택하는 것이 좋다. Base URL을 변경하면, URL을 통해서 액세스 할 수 있는 모든 operation들에 대해서, 적어도 한번은 주소 값을 수정해야 한다. 그러나 이번 예제에서는, 단지 하나의 operation만 가지고 있어서, base URL에 대한 명시가 필요하지 않다.
Flash Builder 4로 서비스를 생성한 후, Data/Service 뷰에서 디스플레이 되는 서비스를 볼 수 있다 (그림 4 참조).
반환형 구성하기 Data/Services 뷰에서 GetCentres() 함수를 보면, 반환형이 일반적인 객체인 것을 알 수 있을 것이다. 만약 여러분의 백-엔드에서 사용하는 것처럼, Flex에서도 동일한 사용자 정의 데이터 타입을 사용하고 있다면, 이러한 구현은 좋은 방법이 아니다. Flash Builder 4사용하면, Flex에서 사용하는 클래스와 .NET에서 사용하는 C# 클래스에 대응하는 value object를 자동으로 생성할 수 있다. 반환형을 구성하기 위해서 다음 단계를 따른다:
만약 여러분의 호스트가 인증이 필요하면, Authentication Required를 체크하고, 사용자명과 패스워드를 입력하라는 메시지를 줄 것이다. 여러분이 두 번째 옵션(Use An Existing Data Type)을 선택하면, 내장된 데이터 형식이나, 이전에 구성된 사용자 정의 데이터 형식을 사용할 수 있다.
여러분의 백-엔드가 완전히 또는 아직 개발되지 않은 경우에는, Enter A Sample XML/JSON Response를 선택할 수 있고, XML 형식은 샘플로 제공 받을 수 있다. 예를 들어, 이번 프로젝트에서, CentreXML.aspx에서 XML 형태의 샘플을 제공해 준다: <?xml version="1.0" encoding="UTF-8"?> <Centres> <Centre> <name>One</name> <longitude>29.777770000</longitude> <latitude>23.455666000</latitude> </Centre> <Centre> <name>Two</name> <longitude>54.777770000</longitude> <latitude>8.999999000</latitude> </Centre> </Centres>
Flash Builder 4는 연산자를 호출하고, introspect를 응답할 것이다. 이번 경우에는 Centre 객체 배열을 가진다.
Data/Services 뷰의 GetCentres()의 반환형이 Centre_type[]으로 변경될 것이다 (그림 10 참조).
UI를 위한 연산자 바인딩 다음 단계에 따라서 새로운 서비스를 이용하고, 반환된 정보를 디스플레이 한다.
사용자 정의 Centre의 프로퍼티 이름들을 데이터 그리드의 칼럼에 반영되도록 한다.
여러분은 데이터베이스의 데이터로 채워진 데이터 그리드를 볼 수 있다. 나아가기 여러분은 얼마나 쉽게 Flex의 데이터-중심 개발을 사용하여 .NET HTTP 서비스를 연결하는 것을 보았다. 코딩 없이 여러분은 반환형을 구성할 수 있고, 자동으로 생성된 value object를 만들고, 결과 값을 데이터 그리드에 나타내도록 할 수 있다. 여러분이 백-엔드로 HTTP 서비스를 사용하는 경우, 이런 간소화된 작업 흐름은, 쉽고 편하게 프런트-엔드에서 풍부하고 인터렉티브 한 애플리케이션을 만들 수 있다. 데이터 중심의 개발에 대한 자세한 정보는 Data-centric development with Flash Builder 4 문서를 참조한다. 앞으로의 애플리케이션 개발은 비즈니스 니즈(need)에 의존적일 것이다. 예를 들면, 고객이 그들의 패키지를 보내고, 그것을 온라인으로 추적할 수 있는 애플리케이션을, HTTP 서비스의 데이터를 사용하여 구현할 수 있다. 여러분은 인터렉티브 한 지도 및 고객 서비스를 위한 비디오 채팅을 추가 할 수 있고, 여러분의 프런트-엔드를 Flex로 구현하면, 그 가능성은 사실상 무한하다. | ||||
|
저자 : Nishad Musthafa
저자소개 : nishadmusthafa.wordpress.com 어도비 Flash Platform 팀의 개발자로서 그의 블로그를 통해서 RIA 의 가능성과 경험들을 공유하고 있습니다.








.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)