델파이 XE2로 만든 아이폰 앱 – TicTacToe

델파이 XE2 가 멀티 플렛폼을 지원하면서 부터 아이폰용 앱을 하나 만들어야지 하다가 이제서야 허접한 게임을 하나 만들어서 올렸습니다.

사실은 게임이라기 보다도 과연 델파이로 만든 아이폰 앱이 애플의 승인을 통과 할까 라는 궁금증이 더 많았습니다. 다행히도 등록한지 일주일만에 승인이 나서 앱스토어에 등록이 되었습니다.

내용은 단순한 틱택토 게임입니다. 인공지능도 없구요. 그냥 두사람이 한번씩 셀을 선택해서 승부를 가리는 단순한 게임입니다.

중요한건 이게 델파이 XE2로 만들었다는 겁니다. 델파이 XE2의 파이어몽키 프레임워크를 사용해서 개발 했습니다.

델파이로 아이폰 개발방법과 관련해서는 아래의 링크를 참조 하시구요

델파이로 아이폰앱 만들기

소스,코드는 아래의 링크에서 다운 받을 수 있습니다.

소스다운로드

 

앱 다운로드 링크

http://itunes.apple.com/us/app/ittt-tictactoe/id493889941?mt=8

카테고리:아이폰 태그:, ,

델파이 XE2의 Namespace 문제

델파이 XE2에서 변화된 사항중 하나가 네임스페이스를 사용하기 시작했다는 것입니다. 네임스페이스는 자바 혹은 C#에서 주로 사용하던 것인데, 델파이 XE2에서 파이어몽키 프레임워크를 사용하기 시작하면서 파이어몽키와 기존 VCL을 구분하기 위해서 네임스페이스를 도입하여 사용하기 시작 했습니다.

예를들면 기존의 Forms 유닛은 Vcl.Forms 로 Windows 유닛은 Winapi.Windows로 바꾸어 사용하게 됩니다. 물론 기존에 쓰던 방식대로 Forms, Windows로 사용해도 별문제 없이 잘 되어야 합니다.

하지만 가끔씩 알수 없는 오류로 인해 이전 버전에서 쓰던 방식의 네임스페이스가 오류를 일으키는 사례가 있는것 같습니다. 오류의 정확한 원인은 알 수 없지만 오류를 고칠 수는 있습니다.

아래의 그림은 프로젝트의 Options 입니다 SHIFT-CTRL-F11 키를 누르거나 CTRL+.의 IDE Insight에서 unit scope name을 찾으면 창을 열 수 있습니다. 항목중에 Unit Scope Names 항목이 빈칸으로 남아 있는 경우가 가끔씩 발생하는 모양입니다. 이때 기존의 유닛명이 참조 되지 않는 오류가 발생하는 것입니다.

오류를 해결하는 방법은 Unit Scope names의 +버튼을 눌러 확장해보면 플랫폼별 컨피규레이션에 있는 데이터값을 복사해서 항목을 채워 주는방법입니다만 혹시라도 플렛폼별 컨피규레이션에도 데이터가 존재 하지 않는다면 아래의 데이터를 복사해서 항목을 채워 주시면 됩니다.

Winapi;System.Win;Data.Win;Datasnap.Win;Web.Win;Soap.Win;Xml.Win;Bde;System;Xml;Data;Datasnap;Web;Soap;Vcl;Vcl.Imaging;Vcl.Touch;Vcl.Samples;Vcl.Shell

델파이 XE2 로 아이폰 하드웨어 컨트롤 하기

델파이 XE2 로 아이폰 하드웨어 컨트롤 하기

  1. iPhone Accelerometer 를 이용한 게임
  2. 아이콘 뱃지 달기/ 지우기
  3. 전화걸기
  4. 지도에서 주소로 위치 찾기
  5. 이메일 보내기
  6. 파일 쓰기/읽기
  7. SQLite를 이용한 Fish Fact
  8. GPS 컨트롤
  9. 지도 불러오기
  10. 사진찍기와 저장
  11. SQLite 사용하기
  12. 아이폰 스테이스바 컨트롤하기
  13. 인터넷 연결하기

아래의 링크에서 소스를 다운로드 하세요.
http://kb.devgear.co.kr/download/attachments/9306286/ios_components_and_8_demos.ZIP?version=1&modificationDate=1322443718053

카테고리:공부중 태그:, ,

델파이 XE2로 만든 아이폰용 Datasnap Client

델파이 XE2로 만든 아이폰용 Datasnap Client

 

델파이 XE2의 파이어몽키 프레임워크는 Windows 와 OSX(맥), 아이폰 에서도 실행 가능한 멀티 플랫폼용 프레임워크 입니다. 이 파이어몽키 플랫폼을 이용하여 DataSnap 서버에 접근하여 데이터를 가지고 오는 셈플을 만들어 보겠습니다. 서버제작시에 이미 준비해 두었던 DSHTTPService1 에 REST Protocol을 이용하여 데이터를 수신하게 되므로 아이폰 뿐만 아니고 다른 언어를 이용해서도 데이터를 송수신 할 수 있습니다.

메뉴에서 File – New – Other를 선택하여 아래 그림과 같은 프로젝트 선택화면을 불러와서 FireMonkey HD iOS Application을 선택하여 프로젝트를 생성합니다.

생성된 프로젝트를 저장하고 아래의 화면 과 같이 화면을 구성합니다.

아래의 코드는 Unit1의 선언부 입니다. 델파이에서 아이폰용 앱을 만들기 위해서는 Free Pascal 컴파일러를 이용하므로 {$IFDEF FPC}, {$ENDIF} 컴파일러 지시자를 이용하여 프리파스칼 에서만 컴파일 가능하도록 지정합니다.

다음 코드는 버튼 클릭 이벤트의 상세 코드 입니다. DSRESTConnection을 생성하여 http 포트에 연결을 활성화 하고 함수를 호출하여 데이터 개수만큼 루프를 돌아 데이터를 갖고 와서 메모에 뿌려 줍니다.

레코드 카운트 함수 코드

GetRecord 함수 코드

코딩이 완료되면 XCode용 프로젝트를 생성 합니다(델파이 XE2로 아이폰앱 만들기 참조 http://kb.devgear.co.kr/pages/viewpage.action?pageId=8978846) 생성된 XCode용 프로젝트를 맥의 XCode에서 로드 하여 실행하면 다음과 같은 실행 화면이 나타납니다.

 

 

델파이 XE2 DataSnap Client 만들기

델파이 XE2 DataSnap Client 만들기

 

델파이 XE2의 DataSnap 클라이언트는 TSQLConnection 컴포넌트를 기반으로 연결됩니다. TSQLConnection는 기본적으로 dbExpress 기반의 데이터베이스 연결용 컴포넌트 이지만 델파이 XE2에서는 DataSnap과 통합되어 드라이버를 선택하는 방식으로 DanaSnap 드라이버를 선택하여 서버와 쉽고 빠르게 연결 할 수 있습니다.

다음과 같은 몇 가지 방법으로 DataSnap 서버를 연결할 수 있습니다.

  1. 1. 코딩이 필요 없는 데이터베이스 연결

메뉴에서 File – New – VCL Form Application 을 선택하여 새 프로젝트를 생성하고 위의 그림과 같이 5개의 컴포넌트를 배열합니다. 첫번째 SQLConnection1의 프로퍼티를 설정합니다. Driver를 Datasnap 으로 선택하고 + 를 눌러 확장하여 Hostname 에 실행되고 있는 DataSnap서버의 아이피를 입력하고 포트를 설정합니다.

DSProviderConnection1 컴포넌트는 다음과 같이 셋팅합니다.

ClientDataSet1은 아래와 같이 셋팅합니다.

그리고 DataSource1와 DBGrid1을 프로퍼티에서 연결하면 Grid1에 서버의 데이터가 조회 되는것을 확인할 수 있습니다.

 

  1. 2. 서버 메소드 호출

두번째 방법은 DataSnap 서버에 이미 만들어 놓은 메소드를 TSQLConnection을 이용하여 호출하는 방법을 알아 보겠습니다. 1번의 방법과 동일하게 프로젝트를 생성하고 화면에 TSQLConnection 컴포넌트와 함께 다음과 같이 화면을 구성합니다.

화면에서 SQLConnection1을 선택하고 오른쪽 버튼을 누르면 아래의 그림과 같이 Generate Datasnap client classes 메뉴를 확인할 수 있습니다.

메뉴를 누르면 Unit2를 자동으로 생성하면서 서버 메소드를 자동으로 생성 시켜줍니다. 이것을 위하여 서버생성시에 컴파일러 지시자 {$METHODINFO ON} 를 사용했습니다. (서버만들기 참조) 생성된 클래스 유닛을 저장하고 uses 구문에 저장된 파일을 참조로 추가한 후 아래의 코드와 같이 호출합니다.

다음 화면은 실행된 결과 화면 입니다.

  1. 3. OSX를 위한 DataSnap Client

OSX (맥)용 DataSnap 클라이언트는 기본적으로 델파이 DataSnap 클라이어트와 동일합니다. 단지 프로젝트를 생성할 때 파이어몽키 기반의 프로젝트를 생성하면 위의 열거한 두가지 방법을 공히 사용할 수 있습니다. (파이어몽키 애플리케이션 생성 참조)

아래 그림은 OSX에서 실행한 DataSnap 클라이언트 입니다.

카테고리:공부중 태그:,

다중 클라이언트를 위한 DataSnap 서버 만들기

다중 클라이언트를 위한 DataSnap 서버 만들기

델파이 XE2의 DataSnap 기능은 이전버전인 Midas에 비하여 월등히 강력하고 사용하기 쉽게 변경 되었습니다. DataSnap 기능을 활용하여 다중 클라이언트( Windows, OSX, iPhone, Android) 환경에서 접근 가능한 애플리케이션 서버와 클라이언트 프로그램의 개발을 통하여 DataSnap을 활용하는 방법을 배워 봅니다.

DataSnap 서버는 델파이 XE2의 위저드 기능을 이용하여 생성 합니다. 메뉴에서 File – New – Other를 선택하여 왼쪽 트리에서 DataSnap Server를 선택하면 아래의 그림과 같은 DataSnap Server를 선택할 수 있는 화면이 나타납니다.

두번째 아이콘인 DataSnap Server 를 선택하고 OK 버튼을 누르면 아래와 같이 프로그램 실행 방법을 선택하는 화면을 볼 수 있습니다. 서버의 경우 Service Application으로 만들어 줄 수도 있습니다만 여기서는 화면이 보이는 VCL Forms Application 을 선택합니다.

Next 버튼을 누르면 서버의 기능을 선택하는 화면을 불 수 있습니다. 델파이 클라이언트만을 위해서는 TCP/IP 만 선택해도 되지만 여기서는 아이폰등 다중 클라이언트 환경을 위한 REST protocol을 지원하기 위하여 HTTP도 함께 선택 합니다. HTTPS환경을 구축하고자 한다면 HTTPS를 동시에 선택 할 수도 있습니다. 사용자 확인이 필요한 경우 Authorization 옵션을 선택 할 수도 있습니다. Server Methods Class는 필히 선택 해야 합니다. 여기서 생성한 메소드를 클라이언트에서 호출하게 됩니다.

다음을 누르면 아래와 같이 포트를 선택할 수 있는 다이얼로그가 나옵니다. 테스트포트 버튼을 눌러 포트 사용 여부를 확인하고 다음을 선택합니다.

서버 메소드의 조상 클래스를 선택하는 화면에서는 TDSServerModule을 선택하여 줍니다.

Finish 버튼을 누르면 아래 그림과 같은 프로젝트를 생성해 줍니다. 각각 생성된 이름대로 저장합니다. ServerContainer1 유닛을 살펴보면 아래의 그림과 같은 컴포넌트들이 자동으로 생성되어 있습니다.

DSServer1 – DataSnap 메인 서버

DSServerClass1 – DataSnap 서버에서 클라이언트에 중계 하고자 하는 메소드를 연결하기 위한 클래스 컴포넌트

DSTCPServerTransport1 – TCI/IP 프로토콜 전송을 위한 통신 컴포넌트 – 델파이 클라이언트용

DSHTTPService1 – HTTP 프로토콜 전송을 위한 통신 컴포넌트 – 아이폰 혹은 REST 클라이언트를 위한 통신 컴포넌트

ServerContainerUnit1 유닛에는 아래의 그림과 같이 클라이언트에서 메소드를 호출했을 때 ServerMethodsUnit1으로 연결 해주는 코드가 위저드에 의해 이미 작성되어 있습니다.

이제 데이터베이스와 연결하기 위하여 ServerMethodsUnit1에 TSqlConnection, TSQLDataset, TDatasetProvider를 각각 화면에 올려 놓고 데이터베이스와 연결합니다.

SQLConnection1 Setting

SQLDataSet1 Setting

컴포넌트 셋팅과 데이터베이스 연결을 확인하면 클라이언트에서 호출할 메소드를 만들어 봅니다. 실습에서 사용할 메소드는 GetRecordCount, GetRecords, GetRecord 이름으로 세개의 메소드를 아래와 같이 선언합니다. 메소드 선언시에 주의할 점은 컴파일러 지시자 {$METHODINFO ON} 과 {$METHODINFO OFF} 의 사이에 선언한다는 점입니다. 워저드를 이용하여 생성한 코드는 자동으로 이 컴파일러 지시자를 생성해 주지만 사용자가 직접 만들 때에는 이것을 사용자가 입력해 주어야만 합니다. 이 지시자는 델파이 클라이언트를 만들 때 자동으로 클라이언트 코드를 생성하도록 도와줍니다.

생성한 메소드의 세부 코드는 다음과 같습니다.

여기까지 하면 다중 클라이언트를 위한 DataSnap 서버 프로그램 만들기가 완료 됩니다. 완료된 프로그램을 서버 컴퓨터에 실행 시켜두고 클라이언트 프로그램을 만들어 보겠습니다.

DanaSnap 클라이언트 만들기 참조.

RadPHP XE2로 아이폰 앱을 만들어 보자

 

RadPHP는 엠바카데로의 웹개발툴입니다. 강력한 델파이의 IDE를 바탕에 깔고 다양한 웹 컴포넌트를 지원하며, 무었보다도 웹페이지를 위지윅(WYSIWYG)으로 디자인이 가능하다는 점에서 탁월한 웹개발툴 입니다.

RadPHP XE2에서는 강력한 모바일 지원 라이브러리인 PhoneGap 과 jQueryMobile을 컴포넌트 형태로 지원하기 시작하면서 기존의 델파이 사용자에게는 친숙하면서도 모바일 개발의 트랜드인 하이브리드앤(웹앱)을 빠르고 강력하게 지원합니다. RadPHP XE2를 이용하면 아이폰과 안드로이드를 함께 지원하는 하이브리드앱을 빠르고 쉽게 만들 수 있습니다.

 

셈플 프로그램을 하나 만들면서 RadPHP XE2를 배원 보도록 하겠습니다. 프로그램의 다운로드는 http://www.embarcadero.com/products/radphp 에서 받을 수 있습니다. 프로그램을 설치하고 기동하면 델파이와 유사한 IDE 화면을 볼 수 있습니다.

셈플 프로그램은 아이폰 카메라를 이용하여 사진을 찍거나 포토앨범에서 사진을 불러와서 조회하는 간단한 프로그램을 만들어 봅니다.

메뉴에서 File – New – Other 를 선택하여 New Items 화면을 호출합니다.

New Items 위저드에서 Mobile Application 을 선택하면 다음 화면과 같이 아이폰 프레임과 함께 디자인이 가능한 폼이 나타납니다.

화면의 중간 우측에 타겟 플렛폼(예를들명 아이폰, 아이패드 등)이 선택 가능한 드롭다운 박스가 있습니다. 원하는 플랫폼을 선택하면 아이폰 프레임이 바뀌면서 화면이 전환됩니다. 아이폰3GS에 맟추고 디자인을 해보도록 하겠습니다.

좌측 컴포넌트 탭에서 [Image], [MButton] 2개, [MobileTheme], [MCamera] 2개를 다음의 화면과 같이 디자인 합니다.

그리고 다음과 같이 각 컴포넌트의 프로퍼티를 지정합니다.

컴포넌트 프로퍼티
MCamera1 Name mcCamera
SourceType stCamera
MCamera2 Name mcAlbum
SourceType stPhotoLibrary
MButton1 Caption Camera
MButton2 Caption Photo Album
Image1 Name imgDisplay
MPage1 Theme MobileTheme1

 

RadPHP는 이름 그대로 스크립트 언어로 PHP를 사용하고 있지만 최근 JavaScript가 각광 받는 추세에 따라 JavaScript 를 사용할 수도 있습니다. 오브젝트 인스펙터 창의 이벤트 탭에는 Events와 함께 JavaScript 탭이 하나 더 추가 되어 있는 것을 확인 할 수 있는데 두 가지 언어 중에 자기가 잘 할 수 있는 언어를 선택해서 코딩 할 수 있다. 여기서는 자바 스크립트를 이용하기로 합니다.

오브젝트 인스펙터의 JavaScrpit 탭에서 아래와 같이 이벤트를 선택할 수 있습니다.

자바스크립트 이벤트는 컴포넌트 별로 따로 생성하거나 이미 생성되어 있는 이벤트를 선택 혹은 공유 하는 방식으로 실행이 가능합니다.

오브젝트 인터페이스의 JavaScript 탭을 이용해 아래의 표와 같이 이벤트를 생성 합니다.

컴포넌트 이벤트 메소드명칭
MButton1 OnClick MButton1JSClick
MButton2 OnClick MButton2JSClick
mcCamera OnError mcCameraJSError
OnSuccess mcCameraJSSuccess
mcPhotoAlbum OnError mcCameraJSError 공유
OnSuccess mcCameraJSSuccess 공유

 

아래의 소스코드는 RadPHP에서 자동으로 생성해준 코드에 사용자 이벤트가 추가된 전체 소스코드입니다. 굵은선 부분이 이벤트 코드.

<?php

require_once(“rpcl/rpcl.inc.php”);

//Includes

use_unit(“jquerymobile/forms.inc.php”);

use_unit(“extctrls.inc.php”);

use_unit(“stdctrls.inc.php”);

use_unit(“jquerymobile/jmobile.inc.php”);

use_unit(“jquerymobile/phonegap.inc.php”);

 

//Class definition

class MPage1 extends MPage

{

public $imgDisplay = null;

public $MButton1 = null;

public $MButton2 = null;

public $MobileTheme1 = null;

public $mcCamera = null;

public $mcAlbum = null;

function mcCameraJSError($sender, $params)

{

?>

//begin js

  alert(event);

//end

<?php

}

function MButton1JSClick($sender, $params)

{

?>

//begin js

mcCameraGetPicture();

//end

<?php

}

function MButton2JSClick($sender, $params)

{

?>

//begin js

    msLicraryGetPicture();

//end

<?php

}

function mcCameraJSSuccess($sender, $params)

{

?>

//begin js

jQuery(‘#imgDisplay’).attr(‘src’,event);

//end

<?php

}

}

 

global $application;

 

global $MPage1;

 

//Creates the form

$MPage1=new MPage1($application);

 

//Read from resource file

$MPage1->loadResource(__FILE__);

 

//Shows the form

$MPage1->show();

 

?>

위의 소스코드에서

use_unit(“jquerymobile/jmobile.inc.php”);

use_unit(“jquerymobile/phonegap.inc.php”);

부분은 jQueryMobile 과 PhoneGap 자바스크립트 라이브러리를 프로젝트에 포함하여 사용하겠다는 선언입니다. 이 두가지 자바스크립트 라이브러리를 사용하게 되면서 모바일 장비에 표준화된 사용자 인터페이스와 하드웨어(카메라, GPS 등) 와의 호환성을 갖게 되었습니다.

참고로 PhoneGap 자바스크립트 라이브러리는 http://www.phonegap.com/ 에서 자세한 정보를 얻을 수 있으며 다양한 모바일 OS 환경에서 자바스크립트를 이용하여 하드웨어와 앱 사이에 컨트롤과 정보전달을 목적으로 개발된 API 라이브러리입니다. jQueryMobile 라이브러리는 http://jquerymobile.com/ 에서 자세한 자료를 확인 할 수 있으며 다양한 모바일 환경에서 동일한 인터페이스와 사용자 환경을 제공하는 자바스크립트 API 라이브러리 입니다.

자! 이제 디자인과 코딩이 잘 되었다면 F9키를 눌러서 브라우저로 실행화면을 확인해 봅시다. 프로그램의 목적이 아이폰에서 실행 되도록 만든 것 이기 때문에 실행이 가능하지 않지만 브라우저에서 실행화면을 확인 할 수는 있습니다.

이제 맥킨토시의 xCode에서 오픈하여 아이폰에 배포할 수 있는 xCode 프로젝트를 생성해 보겠습니다. Tools – Wizard for PhoneGap 메뉴를 선택하면 아래의 그림과 같은 다이얼로그를 확인할 수 있습니다.

 

위의 다이얼로그에서 아이폰 혹은 안드로이드용을 선택하여 프로젝트를 생성할 수 있습니다. 아이폰을 선택하면 맥킨토시의 xCode용 프로젝트를 생성하며 안드로이드를 선택하면 Eclipse 에서 오픈할 수 있는 프로젝트를 생성합니다.

순서에 따라 몇단계의 선택화면이 나오고 Export를 완료하면 생성된 파일을 맥컴퓨터로 복사하여 xCode를 통하여 프로젝트를 오픈 할 수 있습니다.

xCode에서 프로젝트를 오픈하기전에 맥컴퓨터에는 PhoneGap 프레임워크가 설치되어 있어야 합니다. PhoneGap 프레임워크는 http://www.phonegap.com/ 에서 다운로드 하고 다운로드된 파일의 압축을 풀면 iOS 디렉토리가 있습니다. .dmg 파일을 이미지로 마운트 하면 나오는 설치 패키지 파일을 설치하면 프레임워크가 설치 됩니다.

다음 그림은 xCode에서 오픈한 RadPHP로 만든 CameraControl 프로젝트 입니다.

타겟 디바이스를 아이폰 시뮬레이터로 선택하고 실행하면 다음 그림과 같은 실행 결과를 얻을 수 있습니다.

실제 아이폰에 배포하려면 애플 개발자 홈페이지(http://developer.apple.com)에서 개발자 등록을 하고 프로비젼을 받아서 코드 싸인 과정을 거쳐야 아이폰에서 실행 할 수 있습니다.

 

팔로우

모든 새 글을 수신함으로 전달 받으세요.