1 개요 1.1 Cafe24 Application SDK 란? Cafe24 Application( 이하, Application) 은 Cafe24 Application Store 시스템에서실행하는 PHP로작성된어플리케이션으로써, EC호스팅, 빌더호스팅등서비스호스팅을통해설

1 개요 1.1 Cafe24 Application SDK 란? Cafe24 Application( 이하, Application) 은 Cafe24 Application Store 시스템에서실행하는 PHP로작성된어플리케이션으로써, EC호스팅, 빌더호스팅등서비스호스팅을통해설치되며, 서비스호스팅을통해요청된어플리케이션이 Cafe24 Application Runtime 서버에서실행됩니다. Application 은간편하고쉽고, 빠른개발환경을지원하며, 매우쉽게어플리케이션을개발할수있습니다. Application 은 Runtime 환경아래에서동작하며, PHP 기반으로작성되어있습니다. 1.2 약어및용어정리 약어 / 용어 설명 SDK Cafe24 Application SDK 앱 Cafe24 Application 컨트롤러 Controller_Type_View 를상속받는클래스 ( PHP ) 뷰 브러우저화면을구성하는 tpl, html Admin 앱의데이터관리부분 ( 관리자부분 ) Front 앱의실제기능부분 ( 사용자부분 ) Seq 앱의데이터의 Sequence 번호 표 1-1 2 시스템구조 2.1 SDK 구조 Application Runtime 은크게 Server 영역과 Application 환경 / 구동, Application 실행영역으로구분되며, 여러분은 Application 실행영역에서동작하는 PHP 어플리케이션을개발할수있습니다. Application Library 는상기 Application 실행영역에서동작하는 PHP 어플리케이션을구현하기위한기본적인인터페이스라이브러리를제공합니다. 인터페이스라이브러리는컨트롤러를포함하고, 컨트롤러는서비스인터페이스 ($this- >Service), REDIS 인터페이스 ($this->redis), Storage 인터페이스 ($this->storage) 및파일업로드인터페이스 ($this->upload) 등을지원합니다. 또한다양한컨트롤러는다양한타입클래스라이브러리 (Controller_Admin, Controller_Api, Controller_Front 등 ) 를지원합니다. 1

2.2 Application 구조 2.2.1 디렉토리및파일구조 class admin api front test install public_html public_html resource assist css img js tpl application.xml Application PHP 영역관리자페이지를구성하는 Controller_Admin, Controller_AdminExec 기반인터페이스클래스 (4 SDK CLASS 참고 ) REST API 를지원하는 Controller_Api 기반인터페이스클래스사용자페이지를구성하는 Controller_Front, Controller_FrontExec 기반인터페이스클래스 Unittest_Testcase 기반단위테스트클래스 Application 설치영역설치 : EC호스팅 / 빌더호스팅스마트디자인영역개발자용스마트디자인영역 Resource 영역호스팅서비스 Code Assist 지원 Application CSS Application Image Application Java Script Application Template ( Controller_Type_View 상속클래스에서사용 ) Application Configuration File 2.2.2 Cafe24 Application 호출구조와호출방법 호출방법 ( URL, 스마트디자인 ) 호출위치 ( Class Name ) Class Resource ( ContextType ) URL /admin/index /admin/adminindex.php ( adminindex ) Controller_Admin ( Request ) /admin/indexexec /admin/adminindexexec.php ( adminindexexec ) Controller_AdminExec ( Request ) /front/sampleexec /front/frontsampleexec.php ( frontsampleexec ) Controller_FrontExec ( Request ) /app-css/ /resource/css CSS ( Resource ) /app-img/ /resource/img Image ( Resource ) /app-js/ /resource/js Javascript ( Resource ) SDE <div module="appid_sample"> /front/frontsample.php $Sample </div> 표 2-1 2

3 개발가이드 3.1 개발흐름 앱설계 앱의종류및기능을구상하고설계합니다. 앱생성 DEV CENTER 에계정을생성하여로그인한뒤앱을생성합니 다. Admin 구현 앱의 Admin 부분을구현합니다. Front 구현 앱의 Front 부분을구현합니다. 개발서버등록 앱을개발서버에등록합니다. ( Version 등록 ) 쇼핑몰테스트 쇼핑몰 ( 개발서버 ) 에앱을설치하여테스트합니다. 검증 마지막으로앱을검증합니다. C-Store 등록 검증된앱이 C-Store 에등록됩니다. 3

3.2 개발준비 3.2.1 환경설정 3.2.1.1 Eclipse Setting 1) http://www.eclipse.org/downloads/ 에서운영체제에맞는 Eclipse를설치합니다. 그림 3-1 그림 3-2 2) Help 탭의 Install New Software 로 PHP Developer Tools (PDT) SDK Feature 를설치합니다 4

그림 3-3 3) 설치후 Eclipse 재시작뒤 Window 탭의 Open Perspective 로 PHP 를활성화합 니다. 그림 3-4 4) Window 탭의 Preference 를열어 General -> Workspace -> Text file encording 을 UTF-8 로변경합니다. 5

그림 3-5 5) Window 탭의 Preference를열어 Genera->Content Types->Text->%contenttype.name.0 의 File associations 에 *.html 과 *.tpl 을추가하고 General- >Content Types->Text->HTML 의 File associations 에 *.tpl 을추가합니다. 3.2.1.2 Putty http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html 에서 SSH, Telnet 서버접속프로그램인 Putty 를설치하여 Git ( 형상관리 ) 를운용합니다. 한글사용을위해 Putty 설정의 Window -> Translation의 Remote character set 을 UTF-8로설정합니다. 3.2.2 앱생성 그림 3-6 6

http://dev.apps.cafe24.com 에로그인한뒤 + New Application 버튼을누릅니다. 그림 3-7 앱 ID 와 Type 등정보를설정한뒤저장합니다. 7

3.2.3 Remote System 그림 3-8 Eclipse 의 Window 탭의 Show View -> Other 를열어 Remote System 을활성화합 니다. 그림 3-9 8

그림 3-10 생성한앱을연결합니다. Hostname 은 " 앱아이디.app-sdk-xxx.cafe24.com" 입니다. 그림 3-11 9

그림 3-12 연결된앱의 Sftp Files->My Home 을열어 host 를인증및등록한뒤앱아이디.source 를 Create Remote Project 를합니다. User ID 는앱의 ID 입니다. 3.2.4 Hello World! 이제앱을개발하기위한환경설정이모두완료되었습니다. 개발자의첫걸음인 Hello World! 를출력해봅시다. 먼저 class/admin 에 adminhello.php 파일을만들고 Controller_Admin 인터페이스기반의클래스를생성합니다. 데이터출력을위해 SDK에서제공하는 view 함수와 assign 함수를사용합니다. 그림 3-13 파일이름과 class 명을맞춰주어야제대로동작합니다. Ex) adminhello.php, class adminhello생성이완료되었다면 resource/tpl 에 hello.tpl 파일을생성하고코드를입력합니다. 10

그림 3-14 두가지파일을생성하였다면 http:// 앱아이디.app-sdk-xxx.cafe24.com/admin/hello 을확 인하여 "Hello World!" 가정확히출력되었는지확인합니다. 그림 3-15 브라우저에컨트롤러의 Hello World! 가 assign되어출력된것을볼수있습니다. assign 함수는 view 함수전에사용되어야정상적으로동작합니다. $this->view( "hello" ) : resource/tpl/hello.tpl 의코드를뷰로구성합니다. $this->assign( "key", "value" ) : <?php echo $key;?> 로뷰 (tpl) 에서 value를출력합니다. 11

3.2.5 JS, CSS 그림 3-16 SDK 에서제공하는 importjs 함수와 importcss 함수로자바스크립트코드와 CSS 코드를 포함시킵니다. 그림 3-17 sample.css 의코드와 sample.js 코드가제대로등록된것을볼수있습니다. $this- >importjs("sample") : resource/js/sample.js 의코드를최적화하여등록합니다. $this->importcss("sample") : resource/css/sample.css 의코드를최적화하여등록합 니다. 12

3.2.6 writejs, writecss class/admin/adminhello.php class adminhello extends Controller_Admin protected function run($args) $this->importjs('sample'); $this->importcss('sample'); $this->writejs('alert("writejs 테스트입니다.")'); $this->writecss('#sample background-color : blue; '); $this->assign('hello','hello World!'); $bview = $this->view('hello'); if ( $bview!== false ) $this->setstatuscode('200'); js와 css파일을 import 시키지않고 SDK의 writejs 함수와 writecss 함수로컨트롤러부분에서직접사용가능합니다. 그림 3-18 writejs 와 writecss 가제대로동작한것을볼수있습니다. 3.2.7 Redis 데이터관리를위한 Redis를사용하여값을저장하고불러오겠습니다. class/admin 에 adminset.php 파일과 adminget.php 파일을생성하고 SDK의 Redis 객체와 get, set 함수를사용합니다. 참고사이트 : http://redis.io/ 13

class/admin/adminset.php class adminset extends Controller_Admin protected function run($args) $this->redis->set('sample', 'redis 데이터저장테스트입니다.'); $this->writejs('alert(" 저장이완료되었습니다.")'); SDK 의 Redis 객체함수인 set을사용하여 'redis 데이터저장테스트입니다 ' 라는문자열값을 'sample' 이라는키로저장합니다. 그림 3-19 동작을알림창으로확인합니다. class/admin/adminget.php class adminget extends Controller_Admin protected function run($args) $sdata = $this->redis->get('sample'); $this->assign('sampledata',$sdata); $bview = $this->view('get'); if ( $bview!== false ) $this->setstatuscode('200'); resource/tpl/get.tpl <?php echo $sampledata;?> SDK 의 Redis 객체함수인 get을사용하여 'sample' 키로값을불러와출력합니다. 14

그림 3-20 정상적으로출력되는것을확인할수있습니다. 3.2.8 스마트디자인 ( Front ) 사용자가실제로확인하는부분인 Front 부분은스마트디자인을기반으로동작합니다. 스마트디자인에데이터를출력하는방법을간단히알아보겠습니다. public_files/demo.html <div module="sampleapphgd_hello"> $hello </div> class/front/fronthello.php class fronthello extends Controller_Front protected function run($args) $this->setstatuscode('200'); $this->assign('hello', 'Hello World! - Base'); SDK에서는 div태그에 module 속성을읽어 Front를호출합니다. module= 앱아이디 _ClassName 으로작성합니다. ( 2.2.2 Cafe24 Application 호출구조와호출방법참고 ) SDK의 assign 함수를사용하여데이터를출력합니다. public_files/demo.html <div module="sampleapphgd_hello"> $hello </div> <div module="sampleapphgd_hello_3"> $hello </div> class/front/fronthello.php class fronthello extends Controller_Front protected function run($args) 15

$this->setstatuscode('200'); $iseq = $this->getsequence(); if ( $iseq!= null ) $this->assign('hello', 'Hello World! - Seq :'.$iseq); else $this->assign('hello', 'Hello World! - Base'); 스마트디자인에서 Front를호출할시 module="sampleapphgd_hello_3" 처럼모듈마지막에숫자를기입할수있습니다. 이숫자는 SDK의 getsequence 함수를사용하여값을얻을수있으며앱의데이터출력을 Seq를기준으로할경우유용하게사용됩니다. 그림 3-21 기본출력과 Seq 출력의구분을확인할수있습니다. public_files/demo.html 생략 <ul module="sampleapphgd_loop"> <li>$loop</li> <li>$loop</li> <li>$loop</li> </ul> class/front/frontloop.php class frontloop extends Controller_Front protected function run($args) $this->setstatuscode('200'); $icount = 10; for( $i = 1; $i <= $icount; $i++ ) $adata[]['loop'] = "loop-".$i; $this->loopfetch($adata); 16

SDK 의 loopfetch 함수를사용하면 2 차원배열로구성된반복적데이터를 front 에서출력 할수있습니다. demo.html 에 <li>$loop</li> 를반복적으로사용하여 loopfetch 함수가 정상적으로동작하게합니다. 그림 3-22 class/front/frontloop.php class frontloop extends Controller_Front protected function run($args) $this->setstatuscode('200'); $icount = $this->getloop(); for( $i = 1; $i <= $icount; $i++ ) $adata[]['loop'] = "loop-".$i; $this->loopfetch($adata); SDK 의 getloop 함수를사용하여반복적인구문 ( <li>$loop</li> ) 의개수를얻어올수있어반복적인데이터를출력시선택적으로사용이가능합니다. 그림 3-23 17

반복적구문이 3개이므로 3번의출력을확인할수있습니다. public_files/demo.html <!--@css(./hello.css)--> <!--@js(./hello.js)--> <div module="sampleapphgd_hello"> $hello </div> 생략 public_files/hello.css.xans-sampleapphgd-hello color : blue;.xans-sampleapphgd-hello font-size : 20px; public_files/hello.js $(document).ready(function() $('.xans-sampleapphgd-hello').click(function() alert(' js import 테스트입니다.') ); ) <!--@css( 경로 )-->, <!--@js( 경로 )--> 문법을사용하여 js 와 css 를 import 할수있습니다. 모듈이호출되면해당 div는 xans-element, xans-앱아이디, xans-앱아이디-classname 세개의클래스가추가되어해당모듈의 unique 한클래스를가지게됩니다. 이러한 unique 한클래스를 Selector로사용하면다른모듈간의 css, js 충돌을미연에방지할수있습니다. 그림 3-24 정상적으로동작한것을확인할수있습니다. 스마트디자인의좀더자세한설명은링크를참고바랍니다. 참고 : http://manual.echosting.cafe24.com/season2/index.html 18

3.2.9 환경변수 내용 참조방법 허가 호스팅서비스의 HTTP 정 $this->request->gethttpserver($sname=null); 읽기 보 앱세션 $_SESSION 읽기 / 쓰기 $this->request->getsession(); 읽기 요청파라미터 (Argments) $_REQUEST 읽기 $this->request->getargs(); 읽기 어플리케이션 ID APP_ID 읽기 $this->request->getappid(); 읽기 파일업로드 [SDKJS] 읽기 앱만료시간 APP_EXPIRE_TIME 읽기 앱만료상태 APP_EXPIRE_STATUS 읽기 표 3-1 위의표 3-1 과같이관련기능을구현할수있습니다. 세션을사용하고자한다면 PHP 문법과동일하게 $_SESSION 변수를사용하여참조하거나설정할수있으며, 클라이언트 IP 를참고하고자한다면 $this->request->gethttpserver(); 를호출하여확인할수있습니다. 파일을업로드할시 [SDKJS] 라는 SDK 고유스크립트를사용하고 Cafe24_SDK_Upload() 함수와 Cafe24_SDK_Upload_Submit() 함수를통해업로드기능을구현합니다. 파일업로드참고 : 3.4 앱개발 ( 배너관리 ), 3.4.2 Front ( 파일업로드 ) 3.2.10 단축경로 SDK 에서단축경로를제공하여사용자의편의를돕습니다. Type 실제경로 단축경로 URL http:// 앱아이디.app-sdkxxx.cafe24.com/InterfaceType/ControllerNam [link=interfacetype/controllername] ( InterfaceType 은 admin, api, front ) e Image resource/img/ [img] File 서버 /Storage/ 파일경로 / 파일이름 [file= 파일경로 / 파일이름 ] Public 서버 /Storage/public_files/ 파일경로 / 파일이름 [pfile= 파일경로 / 파일이름 ] File 표 3-2 길고복잡한전체경로를표 3-2 와같이간략하게사용가능합니다. File 의경우 Runtime 서버를통해 Storage에접근하게되고 Public File 의경우 Storage에직접접근하는차이 점이있습니다. 파일다운로드같은경우에 "[file= 파일 ]" 을사용하고 Storage 내이미지 파일의경우는 "[pfile= 파일 ]" 의단축경로를사용합니다. File이나 Public File 타입의경우는 앱생성시 Storage 를지원으로선택해야정상적으로동작합니다. 다음과같이사용될 수있습니다. 19

Tpl ( Template HTML ) <img src="[img]/move.jpg"> <img src="[pfile=sample/sample.jpg]"> <a href="[file=samplefile.txt]"> 문서다운로드 </a> <a href="[link=admin/index]"> 관리자시작페이지이동 </a> Controller $this->assign('link', '[link=admin/index]'); $this->writejs('location.href = "[link=admin/index]";'); Javascript var linkaddr = '[link=admin/index]'; location.href = linkaddr; 단축경로는스마트디자인의 <!--@css( 경로 )-->, <!--@js( 경로 )--> 문법으로파일을 import 하는경우에는동작하지않습니다. ( 스마트디자인 import 이미지경로 : 개발자용스마트디자인영역 ( public_html ) 에서사용할시 /app-img/ 이미지.jpg, EC호스팅 / 빌더호스팅스마트디자인영역 ( install/public_html ) 에서사용할시 /cstore-img/ 앱아이디 / 이미지.jpg ) 개발준비단계가모두마무리되었습니다. 이제본격적으로앱을개발하며 SDK에대해좀더자세히알아보도록하겠습니다. 20