Transcript 2014년도_하이브리드 모바일플랫폼 커리큘럼

하이브리드 모바일플랫폼
커리큘럼
2014년도
1일차 : 클라이언트 교육 과정 (이론/실습)
시간
내용
교육 방식
09:30~10:20
*하이브리드 모바일 플랫폼의 이해
*개발환경설치(이클립스,inspector등)
강의 / 실습
10:30~11:40
IDE 개발환경 이해 / 실습
-프로젝트 생성, 빌드, 디바이스 연동, 디버깅, 배포
강의 / 실습
13:00~14:00
native 개발 가이드(안드로이드, iOS)
- 프로젝트 환경 설정.
- native 화면 연동.
- MCore web–native 데이터 공유.
- MCore 확장 interface 함수 개발.
- MCore native network manager 개발.
강의 / 실습
13:00~14:00
JS, CSS, HTML
API / 개발 방법소개
- 터치 이벤트 사용, jQuery, API 사용, 실습(Template를 프로젝트 생성/ build - 그
룹웨어)
강의 / 실습
기본 정보
 기술 WIKI 사이트 : http://docs.morpheus.kr/mcore/main.php
 로그인 ID / PW : education / education
 온라인 지원시스템 사용법
 사용자 계정 생성(회원가입) : http://www.morpheus.kr/index.php?act=dispMemberSignUpForm&mid=home
(지원시스템은 user 별로 접근 가능하므로 반드시 회원가입을 해주시기 바랍니다)
 Support Menu 이동
 Project Support 메뉴의 프로젝트 게시판을 통해 이슈 등록
 Project Support 게시판은 프로젝트 시작 전에 사용자 그룹이 등록되어야 활성화 됩니다.
 프로젝트 및 사용자그룹 생성은 유라클 플랫폼 컨설팅팀 김주옥 팀장 [email protected] (010-9214-1827 )
에게 이메일로 신청해 주시기 바랍니다.
=> 예) 등록사용자 email/이름/휴대폰번호 | [email protected] / 홍길동 / 010-XXXX-XXXX
3
하이브리드 모바일플랫폼의 이해 (세부내용)
HYBRID APP?
하이브리드 모바일플랫폼의 이해 (세부내용)
HYBRID CAR
휘발유 + 전기
하이브리드 모바일플랫폼의 이해 (세부내용)
HYBRID APP
Native
(iOS, Android, etc)
+
Web
(HTML5, CSS3, JS)
하이브리드 모바일플랫폼의 이해 (세부내용)
‘HELLO WORLD’ APP
네이티브 개발시
- iOS 개발자
- Android 개발자
각 OS 별 전문 개발자가 필요하고,
각 OS 별로 개발해야 함.
하이브리드 모바일플랫폼의 이해 (세부내용)
‘HELLO WORLD’ APP
하이브리드 개발시
- 웹 개발자
HTML5 + CSS3 + JS
웹 개발 기술만으로도
iOS, Android 등 각 OS 별 앱 동시 개발 가능!
하이브리드 모바일플랫폼의 이해 (세부내용)
MORPHEUS
하이브리드 앱 개발 위한 프레임워크
하이브리드 모바일플랫폼의 이해 (세부내용)
ONE SOURCE MULTI USE
HTML5 + CSS3 + JS
스마트폰, 태블릿(iOS, Android)
하이브리드 모바일플랫폼의 이해 (세부내용)
동적 서비스 업데이트
• 최초 한 번만 앱 스토어 등록
• 이후 동적으로 앱 리소스 업데이트
• 검수 과정 필요없기 때문에, 업데이트 즉시 반
영 가능
하이브리드 모바일플랫폼의 이해 (세부내용)
프레임워크 구성
HTML
CSS
JS
WebView
WN Interface(Web-Native Interface)
Activity
Network
Common
Data
Native
Controller
Manager
Handler
Handler
Activities
Media
Event
Storage
Control
Control
Control
Device
Control
Notification
iOS
Android
클라이언트 IDE 개요
IDE
Eclipse기반 Plug-in으로 개발된 Morpheus IDE는 개발 생산성 향상을 위해 설계되었으며 다음과 같은 기능을 제공 합니다.
15
Wizard 기반 프로젝트 생성
Wizard
Wizard를 이용하여, OS 별 프로젝트를 손쉽게 생성할 수 있도록 제공합니다.
16
Build Tool 지원
Build Tool
One Source Multi Use가 가능한 OS별 Build 툴을 지원합니다.
안드로이드 / 아이폰 환경 설정 및 Build 지원
17
가이드앱 제공
Guide App
개발 생산성 향상을 위해 다양한 Template를 제공 합니다.
컴퍼넌트 가이드 앱 구성
1. UI Kit
1)
2)
3)
4)
5)
레이아웃
네비게이션
컨텐츠뷰
컨트롤
미디어
1)
2)
인트로, 로그인, 메인
사이드 메뉴, 전체메뉴, 조회 등등
1)
page, data, sec, apps, net 등 Native 함수 연동
2. Sample
3. API
Morpheus mobile UI framework
• HTML5/CSS3/JS 기반의 Web 리소스 사용
• 멀티 플랫폼 지원 가능
• Phone/Tablet, 해상도/사이즈에 따른
반응형 레이아웃 구조(Responsive Web)
• 터치 기능 및 애니메이션 효과 가능
• Native Device 연동 / Native 화면 구현
• 다양한 플러그인 제공
18
Browser Emulator 제공
웹 인스펙터를 통해, 빠르고, 다양한 형태의 디버깅을 지원합니다.
웹 인스펙터 지원
• 웹 디버깅
• HTML 요소(Elements)검사
- Styles(CSS)
- Properties
- Event Listeners
• 리소스 관리
• 네트워크 현황
• 스크립트 디버깅
- Watch Excpressions
- Call Stack
- Breakpoints
- Worker threads
• 콘솔(Console)
19
Browser Emulator 제공
다양한 해상도 지원이 가능한 Emulator 와 웹표준 / 장애인 차별 금지법 준수를 체크 할 수 있는 도구를 제공합니다.
다양한 해상도 지원
웹 표준 / 장애인 차별 금지법 준수 체크 기능
20
Direct View 제공
생산성 향상을 위해, 수정된 리소스를 재 컴파일 하지 않고, 실시간으로 확인 할 수 있도록 Direct View 기능을 제공합니다.
(UI, 업무로직, 다양한 이벤트)
로컬 서버를 이용한 DirectView 기능
21
라이브러리 업데이트 기능
기능이 추가된 라이브러리, Plug-In, 템플릿을 실시간으로 업데이트가 가능하도록 라이브러리 Manager를 지원합니다.
라이브러리 Manager 기능
22
Code 자동완성 기능
초보개발자들도 함수를 손쉽게 사용할 수 있도록, Code 자동완성 기능을 지원합니다.
Code 자동완성 기능
23
하이브리드 모바일플랫폼의 이해 (세부내용)
MORPHEUS 개발 가이드
http://docs.morpheus.kr/
하이브리드 모바일플랫폼의 이해 (세부내용)
리소스 폴더 구조
Manifest.xml: App 환경 설정 파일
morpheus.mobile.lic: 라이센스 파일
리소스 배포시, zip 파일은 res 폴더가 포함된채
로 압축되어야 하며, 위 2개 파일은 배포 대상이
아님.
하이브리드 모바일플랫폼의 이해 (세부내용)
화면 상태 이벤트 함수
M.onReady(function(event) {
// 화면 로딩 완료시, 실행
});
화면 로드시 이벤트 발생 순서
1. DOMContentLoaded
2. load
3. M.onReady
M API 사용은 3번 M.onReady 함수가 호출된 시점 이후에 사용해야 정상 동
작
하이브리드 모바일플랫폼의 이해 (세부내용)
화면 상태 이벤트 함수
M.onHide(function(event) {
// 화면 이동시, 현재 화면이 숨겨질때 실행
});
하이브리드 모바일플랫폼의 이해 (세부내용)
화면 상태 이벤트 함수
M.onRestore(function(event) {
// 화면 이동시, 숨겨졌던 화면이 다시 로딩될 때
실행
});
하이브리드 모바일플랫폼의 이해 (세부내용)
화면 상태 이벤트 함수
M.onResume(function(event) {
// 사용자에 의해서 앱이 background에서
foreground로 올라올 때 실행
});
하이브리드 모바일플랫폼의 이해 (세부내용)
화면 상태 이벤트 함수
M.onPause(function(event) {
// 앱이 foreground에서 background로 전환될 때
실행
});
하이브리드 모바일플랫폼의 이해 (세부내용)
화면 상태 이벤트 함수
M.onDestroy(function(event) {
// 현재 화면이 스택에서 제거될 때 실행
});
하이브리드 모바일플랫폼의 이해 (세부내용)
화면 상태 이벤트 함수
M.onBack(function(event) {
// Android일 경우, 하드웨어 back키가 눌렸을 때
실행
});
하이브리드 모바일플랫폼의 이해 (세부내용)
API
화면 이동
M.page.html(url, setting);
예제:
M.page.html(‘B.html’);
하이브리드 모바일플랫폼의 이해 (세부내용)
API
이전 화면으로 이동
M.page.back(setting);
예제:
M.page.back();
하이브리드 모바일플랫폼의 이해 (세부내용)
API
서버와 통신
M.net.http.send(setting);
예제:
M.net.http.send({
server: ‘server-name’,
trcode: ‘interface-code’,
reqData: {curPage: ‘1’},
onSuccess: function(receivedData) {
// receivedData 는 서버가 응답하여 보내주는 데이터로 JSON 형식
}
});
하이브리드 모바일플랫폼의 이해 (세부내용)
API
네이티브 컴포넌트 연동 - 날짜
M.pop.date(setting, callback);
예제:
M.pop.date({
type: ‘YMD’,
initDate: ‘20140409’
}, function(result) {
console.log(result.yyyy + ‘년’ + result.MM + ‘월’ + result.dd + ‘일’);
});
native 개발 (Android)
Android native Guide
native 개발 (Android)
목차
-
android project view.
native 화면 연동.
web(js)-native 데이터 공유.
wn 확장 Interface 함수 개발.
native network manager 개발.
native Activity 생성 시 주의 사항.
- WebView 객체가 포함된 native Activity의 경우,
clearView, clearHistory, clearCache 함수를 호출해줘야함.
- 예제 코드.
WebView webView = null;
webView.clearView( );
webView.clearHistory( );
webView.clearCache(true);
native 개발 (Android)
android project view(1/3)
파일
설명
BaseActivity.java
- 플랫폼에서 화면구성을 하는 Activity로 내부 MainActivity를 상속 받아서
생성한 Activity임.
Startup.java
- MAIN LAUNCHER Activity로 App이 구동 될때 처음으로 생성되는 Activity
임.
(Push 기능을 사용하고자 할때 Push관련 초기 로직이 추가되는 파일임.)
ExtendApplication.java
- Android Application Class를 상속받은 파일로 확장 구현시 필요한 소스를
추가 할수 있음.
ExtendWNInterface.jav
a
- 플랫폼에서 기본으로 제공하지 않는 기능을 추가 시
ExtendWNInterface 파일에 메소드(함수)를 구현하는 파일.
(tip)필요한 기능에 대한 Class 생성 후 ExtendWNInterface에서 객체 생성
형태로 구현하시면 각각의 기능을 파일별로 관리 가능.
native 개발 (Android)
android project view(2/3)
파일
설명
HttpDataNetworkManager.j
ava
- 서버와 전문 통신 시 사용되는 HTTP 네트워크 manager.
- WN 함수 중 M.net.http.send(setting), M.net.res.update(setting) 함수
의 native 함수와 연관되어 있음.
- (알림) 사이트에 따라 HttpDataNetworkManager 파일을 참고하
여 legacy 시스템과 통신하는 HTTP 네트워크 manager 생성 가능함.
ImageList1Activity.java
- WN 함수 중 M.media.library() 함수에서 PHOTO 에 MULTI 값으로
설정할 경우 이미지를 선택할수 있도록 만들어 놓은 Activity임. 화면
UI수정 가능.
ImageList2Activity.java
- WN 함수 중 M.media.library() 함수에서 PHOTO 에 MULTI 값으로
설정할 경우 이미지를 선택할수 있도록 만들어 놓은 Activity임. 화면
UI수정 가능.
StartActivity.h
- 앱의 시작 화면을 HTML 페이지가 아닌 native 화면으로 구성 시 사용
할 수 있는 샘플(sample) native class.
- Manifest.xml 필드 중 <startpage>의 <name> name 필드에 native
class 이름을 입력.
- ex) StartActivity class를 시작 화면으로 설정 시
<startpage>
<name>StartActivity</name>
<orient>default</orient>
</startpage>
native 개발 (Android)
android project view(3/3)
파일/폴더
설명
이외의 나머지 Activity
- Sample로 추가 되어 있는 Activity.
ListAdapter.java
- SampleNativeListActivity에서 사용하는 adapter 파일.
native 개발 (Android)
native 화면 연동(1/)
- Native Activity 생성하기.
• 부모 class AbstractActivity 를 상속 받아서 Activity를 생성 시, 플랫폼의 데이터 공유 및 화면 이동 함수
사용 가능.
화면 이동
웹(html)→native 화면
예제
M.page.native('SampleNative'/*class 이름*/, {
action: 'NO_HISTORY' /*NO_HISTORY | NEW_SCR | CLEAR_TOP */
});
native 화면 연동(2/)
- Native Activity 생성하기.
• 부모 class AbstractActivity 를 상속 받아서 Activity를 생성 시, 플랫폼의 데이터 공유 및 화면 이동 함수
사용 가능.
화면 이동
예제
// 파라메터 설정
Parameters pubParams = new Parameters();
// 파라메터 정보를 보내는 경우
Parameters inParam = new Parameters();
inParam.putParam("REQUEST_PARAM", "이 메시지는 네이티브 화면에서 보냅니다.");
inParam.putParam("param2", "테&스트", "UTF-8");
pubParams.putParam("PARAMETERS", inParam.getParamString());
// 웹 컨테이너에서 보여질 html 페이지
pubParams.putParam("TARGET_URL", CommonLibHandler.getInstance().g_strHTMLDirForWeb +
"www/html/mp_wn_web.html");
native 화면→웹 화면(html)
// 화면 방향 설정 : DEFAULT,PORT,LAND,ALL
pubParams.putParam("ORIENT_TYPE", "PORT");
// Action type : NEW_SCR, NO_HISTORY, CLEAR_TOP
int actionType = CommonLibUtil.getActionType("NEW_SCR");
// 하이브리드 웹화면으로 이동시에는 타겟 클래스 인텍스가 반드시 LibDefinitions.libactivities.ACTY_MAIN 이어야 한다.
setViewForMovingScreen(getRootView(thisObj));
// Animation Type : DEFALUT, NONE, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_TOP, SLIDE_BOTTOM,
ZOOM_IN,ZOOM_OUT,FADE,MODAL_UP,MODAL_DOWN
Controller.getInstance().actionMoveActivity(LibDefinitions.libactivities.ACTY_MAIN,
actionType, thisObj,
"SLIDE_RIGHT",pubParams);
native 화면 연동(3/)
- Native Activity 생성하기.
• 부모 class AbstractActivity 를 상속 받아서 Activity를 생성 시, 플랫폼의 데이터 공유 및 화면 이동 함수
사용 가능.
화면 이동
예제
// 파라메터 설정
Parameters pubParams = new Parameters();
// 파라메터 정보를 보내는 경우
Parameters inParam = new Parameters();
inParam.putParam("native_param1", "네이티브 파라메터 값1");
inParam.putParam("native_param2", "네이티브 바라메터 값2(테&스트)", "UTF-8");
pubParams.putParam("PARAMETERS", inParam.getParamString());
// 화면 방향 설정 : DEFAULT,PORT,LAND,ALL
pubParams.putParam("ORIENT_TYPE", "PORT");
native 화면→native 화면
// Action type : NEW_SCR, NO_HISTORY, CLEAR_TOP
int actionType = CommonLibUtil.getActionType("NEW_SCR");
//NANIVE_ANIM
setViewForMovingScreen(getRootView(thisObj));
// Animation Type : DEFALUT, NONE, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_TOP, SLIDE_BOTTOM,
ZOOM_IN,ZOOM_OUT,FADE,MODAL_UP,MODAL_DOWN
Controller.getInstance().actionMoveActivity(LibDefinitions.libactivities.ACTY_CUSTOM,
actionType, thisObj,
"ZOOM_IN",
pubParams, "SampleActivity");
native 화면 연동(4/)
- Native Activity 생성하기.
• 부모 class AbstractActivity 를 상속 받아서 Activity를 생성 시, 플랫폼의 데이터 공유 및 화면 이동 함수
사용 가능.
화면 이동
이전 화면
예제
// 파라메터 설정
Parameters backParam = new Parameters();
backParam.putParam("backParam1", "backParamValue1");
backParam.putParam("backParam2", "하&하하", "UTF-8");
backParam.putParam("backParam3", "한글을 보낸다.");
// Animation Type : DEFALUT, NONE, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_TOP, SLIDE_BOTTOM,
ZOOM_IN,ZOOM_OUT,FADE,MODAL_UP,MODAL_DOWN
Controller.getInstance().actionHistoryBack(backParam, "MODAL_DOWN");
native 개발 (Android)
웹(js)-native 데이터 공유.(1/3)
구분
파라미터
데이터 공유
(1/3)
전역
데이터 공유
(2/3)
영속
데이터 공유
(3/3)
설명
native class
- 화면 전환 간에 데이터가 전달 됨.
- URL의 key=value 파라미터 전달 방식
Parameters
- memory 저장 방식.
- 앱 running 중 get/set 가능.
- 앱 off 시 memory에서 사라짐.
CommonLibUtil
- storage 저장 방식.
- 앱 running 중 get/set 가능.
CommonLibUtil
native 개발 (Android)
웹(js)-native 데이터 공유.(2/3)
구분
동작
웹(js)식 방식(예제)
- 화면 이동 함수에서 아래와 같
이 param 변수에 값을 설정.
native 방식(예제)
- Parameters 객체를 생성 후 화면 이동 함수의 파라미터로 전달.
Parameters backParam = new Parameters();
파라미터
데이터 공
유
(1/3)
SET
M.page.back({
param : {'key_a':'b','key_c':'d'}
});
backParam.putParam(“backParam1”, “TestValue1”);
backParam.putParam(“backParam2”, “테스트”, “UTF-8”);
backParam.putParam(“backParam3”, “한글”);
Controller.getInstance().actionHistoryBack(backParam, “DEFAULT”);
(알림) AbstractActivity class 상속 받은 class에서만 사용 가능.
var key_a = M.data.param("key_a");
GET
String data = getParamsString();
Parameters receivedParams = new Parameters(data);
(알림) AbstractActivity class 상속 받은 class에서만 사용 가능.
native 개발 (Android)
웹(js)-native 데이터 공유.(3/3)
구분
동작
전역
데이터 공
유
(2/3)
SET
GET
SET
영속
데이터 공
유
(3/3)
GET
웹(js)식 방식(예제)
native 방식(예제)
M.data.global(“g_key”, “value”);
CommonLibUtil.setVariable(”g_key”, ”value”);
var g_key =
M.data.global(“g_key”);
String g_key = CommonLibUtil.getVariable(”g_key”);
M.data.storage(“s_key”, “value”);
CommonLibUtil.setUserConfigInfomation(”s_key”, ”value”,
Context);
var s_key =
M.data.storage(“s_key”);
String s_key =
CommonLibUtil.getUserConfigInfomation(”s_key”,
Context);
native 개발 (Android)
WN 확장 Interface 함수 개발.(1/4)
확장 interface 추가하기.
→ WIKI API에 정의되지 않은 native 함수를 추가 및 js에서 호출.
→ 동기/비동기 방식의 함수 지원.
동기
: native 함수의 return 값이 화면으로 바로 전달되는 방식.
비동기 : native의 결과 값을 js 함수를 호출하여 전달되는 방식.
→ 권장
기능 추가 시, ExtendWNInterface 를 연결고리로 사용하여 기능별 Class 파일을 구현하여 코드의 모듈
화를 권장.
동기식 예제소스)
비동기식 예제소스)
native 개발 (Android)
WN 확장 Interface 함수 개발.(2/4)
native 함수 정의 제약 사항.
→ 함수의 접근지정자가 public 으로 설정되어야 정상 동작함
Public String syncTest(String param1, String param2);
→ 함수의 매개변수 / 반환 타입은 (String ) 타입 만을 지원.
Public String syncTest(String param1, String param2);
→ callback Function 구현시 UIThread 사용
callerObject.runOnUiThread(new Runnable() {
@Override
public void run() {
webView.loadUrl(“……………”);
}
});
native 개발 (Android)
WN 확장 Interface 함수 개발.(3/4)
- WN2Common 함수 정의.
function test_WN2Common(param1, param2)
{
var _param1 = param1 || '';
var _param2 = param2 || '';
return WN2Common(“syncTest”/*native함수이름*/, _param1, _param2);
}
- WN2CommonAsync 함수 정의.
function test_WN2CommonAsync(callbcak_function, param1, param2)
{
var _callback = callbcak || function() {};
var _param1 = param1 || '';
var _param2 = param2 || '';
(주의) WN2Common/WN2CommonAsync native 함수 호출.
→ 입력된 native 함수 이름의 대/소문자가 일치 해야 함.
→ 입력된 파라미터의 개 수가 일치 해야 함.
→ WN2CommonAsync 함수의 경우
native로 전달할 js 함수는 M.buffer.on( ) 함수로 wrapping 되어
야 함.
WN2CommonAsync(“asyncTest” /*native함수이름*/, M.buffer.on(_callback), _param1,
_param2);
}
native 개발 (Android)
WN 확장 Interface 함수 개발.(4/4)
- WN2Common 함수 사용 예제.
// WN2Common 테스트 코드.
var result = test_WN2Common("안녕", "하세요!");
alert("result : " + result);
- WN2CommonAsync 함수 사용 예
제.
// WN2CommonAsync 응답(CB) 함수.
function test_CBAsync(p1, p2)
{
var rst = "cb result = p1:" + p1 + ", p2:" + p2;
alert(rst);
};
// WN2CommonAsync 테스트 코드.
test_WN2CommonAsync(test_CBAsync, "니먼", "하오!");
(*) 주의
⇒ javascript 함수 객체(object)가 전달 되어
야 함.
→
OK : test_CBAsync
→ NOT OK : “test_CBAsync”
native 개발 (Android)
native network manager 개발.(1/4)
- WHAT ?
⇒ 플랫폼 내부의 network provider와 interface(요청/응답) 기능.
network provider → network resource에 대한 요청 및 응답을 대행하는 플랫폼 모듈
(ex, android provider).
- HOW ?
⇒ 상속 받아야 할 class : AsyncHttpNetwork
⇒ 구현해야 할 메서드
→ requestData(), setRequestData()← request 기능.
→ getResponseData()
→ handlingError()
← response 기능.
← 내부 Error 및 network Error 처리 기능.
⇒ 기 생성되어 있는 HttpDataNetworkManager class를 참고하여 신규로 생성.
native 개발 (Android)
native network manager 개발.(2/4)
- network request / response flow
화면(js)
network manager
<requestData()>
<getResponseData()>
native
플랫폼
network provider
<AsyncHttpNetwork>
network
native 개발 (Android)
native network manager 개발.(3/4)
- HttpDataNetworkManager
→ WN 함수 중 M.net 함수의 native request method.
ex) M.net.http.send(setting), M.net.res.update(setting)
native method
call
(request)
native 개발 (Android)
native network manager 개발.(4/4)
- HttpDataNetworkManager
→ WN 함수 중 M.net 함수로 response 전달 method.
ex) M.net.http.send(setting), M.net.res.update(setting)
native response
native 개발 (Android)
native network manager 개발.(1/3)
- native Activity Network method
→ 통신 요청 메서드
native 개발 (Android)
native network manager 개발.(2/3)
- native Activity Network method
→ 통신 수신 메서드
native 개발 (Android)
native network manager 개발.(3/3)
- native Activity Network method
→ Error 처리 메서드
native 개발 (iOS)
iOS native Guide
native 개발 (iOS)
목차
-
iOS 개발 환경 및 유의 사항.
iOS Project View.
native 화면 연동.
MCore web(js)-native 데이터 공유.
MCore 확장 Interface 함수 개발.
MCore native network manager 개발.
native 개발 (iOS)
iOS 개발 환경 및 유의 사항
- iOS 개발 환경
⇒ Xcode 5.x 이상 버전(OS X)
- 유의(주의) 사항
⇒ (*주의) 인증서(APP, PUSH) 사용 기간 365일(1년)
함.
⇒ 인증서 만료 전에 인증서(APP, PUSH)를 갱신(60일 전부터 가능)해야
⇒ 참고 사이트
https://developer.apple.com/kr/support/technical/certificates/
https://developer.apple.com/kr/support/ios/program-renewals.html
native 개발 (iOS)
iOS project view(1/4)
파일
[email protected]
설명
- iphone 4-inch 지원을 위한 png 이미지 파일.
MorpheusAppDelegate.h
- UIApplicationDelegate 관련된 함수가 구현되어 있음.
- 플랫폼을 start up 시키는 method(함수)가 존재함.
ExtendWNInterface.h
- 플랫폼에서 기본으로 제공하지 않는 기능을 추가 시
ExtendWNInterface 파일에 method(함수)를 구현하는 파
일.
- iOS의 경우, category를 이용하여 구현하면 모듈화가 가
능함.
PPHybridViewController.h
- iOS 플랫폼의 기본 화면을 구성하는 class 파일.
- 부모 class에 UIWebView를 member로 가지고 있음.
native 개발 (iOS)
iOS project view(2/4)
파일
설명
HttpDataNetworkManager.h
- 서버와 전문 통신 시 사용되는 HTTP 네트워크 manager.
- WN 함수 중 M.net.http.send(setting), M.net.res.update(setting) 함수
의 native 함수와 연관되어 있음.
- (알림) 사이트에 따라 HttpDataNetworkManager 파일을 참고하
여 legacy 시스템과 통신하는 HTTP 네트워크 manager 생성 가능함.
HttpFileDownloader.h
- (알림) 사용되지 않음(old version use only).
- 리소스 동적 업데이트 중 서버 플랫폼에 있는 zip 파일을 다운로드 하
는 class.
HttpResourceDownloader.h
- 리소스 동적 업데이트 과정 중 서버 플랫폼에 있는 zip 파일을 다운로
드 하는 class.
- 리소스 동적 업데이트와 관련된 Manifest.xml 필드는<resource> 필드임.
StartActivity.h
- 앱의 시작 화면을 HTML 페이지가 아닌 native 화면으로 구성 시 사용
할 수 있는 샘플(sample) native class.
- Manifest.xml 필드 중 <startpage>의 <name> name 필드에 native class
이름을 입력.
- ex) StartActivity class를 시작 화면으로 설정 시
<startpage>
<name>StartActivity</name>
<orient>default</orient>
</startpage>
native 개발 (iOS)
iOS project view(3/4)
파일/폴더
설명
Info.plist
- Xcode project 설정 파일.
InfoPlist.strings
- Xcode project에서 사용 할 수 있는 localized string 설정 파일.
main.m
- 앱 start up 시 entry point 함수가 정의된 파일.
PPAppDelegate.h
- MorpheusAppDelegate class를 상속한 class 파일.
- UIApplicationDelegate 함수가 구현되어 있음.
Prefix.pch
- pre compiled header 파일
- 프로젝트에서 공통으로 사용되는 class가 import 되어 있음.
MLibrary
- MCore.license : /res/mcore.mobile.lic 파일을 parsing 하는 라이브러리.
- MCore.xx.xx.xx : 플랫폼 코어 framework 폴더.
- MAddon 이하 폴더 : 플랫폼 Addon framework 폴더.(core’s plugin
module)
native 개발 (iOS)
res 폴더 project에 추가하기(4/4)
- step #1(추가 방법)
메뉴
⇒ Xcode → File → Add Files to “추가할 프로젝트” 클릭.
단축키 ⇒ option + command + A 입력.
- step #2(추가 방법)
Folders의 Create folder references for any added folders 선택.
Add to targets “추가할 프로젝트” 선택.
- step #3(추가 완료 화면)
native 개발 (iOS)
native 화면 연동.(1/2)
- native 화면 개발 하기.
⇒ UIViewController class를 이용하여 일반적인 native 화면을 생성.
⇒ 부모 class를 PPNativeViewController 로 변경 시, 플랫폼의 데이터 공유 및 화면 이동 함수 사용 가능.
PPNativeViewController의 화면 이동 함수
설명
- (void) moveToWebOnNewActWithUrl:(NSString*)url
paramObj:(PPParameters *)pParameters
action:(PPActionType)pActionType
orient:(PPSupportOrientation)pOrientationType
animation:(PPAnimationType)pAnimationType;
native 화면에서 WEB 화면(HTML)으로 이동하는 함수.
- (void) moveToNativeActWithClass:(Class)className
paramObj:(PPParameters *)pParameters
action:(PPActionType)pActionType
orient:(PPSupportOrientation)pOrientation
animation:(PPAnimationType)pAnimationType;
native 화면에서 native 화면으로 이동하는 함수.
- (void) historyBackWithParamObject:(PPParameters *)pParameters
animation:(PPAnimationType)pAnimationType;
native 화면에서 이전 화면으로 이동하는 함수.
- (BOOL) moveClearTop:(NSString *)pKey
params:(PPParameters*)pParameters
animation:(PPAnimationType)pAnimationType;
PPActionType 타입이 PPActionClearTop인 화면 이동 함수.
⇒ WEB 화면(HTML), native 화면 둘 다 사용가능함.
native 개발 (iOS)
native 화면 연동 예제.(2/2)
화면 이동
예제
웹(html)→native 화면
M.page.native('SampleNative'/*class 이름*/, {
action: 'NO_HISTORY' /*NO_HISTORY | NEW_SCR | CLEAR_TOP */
});
native 화면→웹 화면(html)
[self moveToWebOnNewAct:@"/www/html/yepp.html"
paramObj:nil
action:PPActionNewScreen /* PPActionNewScreen | PPActionNoHistory | PPActionClearTop */
orient:PPSupportOrientationAll
animation:PPAnimationDefault];
native 화면→native 화면
[self moveToNativeActWithClass:[SampleTwoNativeViewController class]
paramObj:nil
action:PPActionNewScreen /* PPActionNewScreen | PPActionNoHistory | PPActionClearTop */
orient:PPSupportOrientationAll
animation:PPAnimationDefault];
이전 화면
[self historyBackWithParamObject:nil
animation:PPAnimationDefault];
native 개발 (iOS)
웹(js)-native 데이터 공유.(1/3)
구분
파라미터
데이터 공유
(1/3)
전역
데이터 공유
(2/3)
영속
데이터 공유
(3/3)
설명
native class
- 화면 전환 간에 데이터가 전달 됨.
- URL의 key=value 파라미터 전달 방식
PPParameters
- memory 저장 방식.
- 앱 running 중 get/set 가능.
- 앱 off 시 memory에서 사라짐.
PPAppContext
- storage 저장 방식.
- 앱 running 중 get/set 가능.
PPAppContext
native 개발 (iOS)
웹(js)-native 데이터 공유 예제.(2/3)
구분
동작
웹(js)식 방식(예제)
native 방식(예제)
- 화면 이동 함수에서 아래와 같이 param 변수에 값
을 설정.
- PPParameters 객체를 생성 후 화면 이동 함수의 파라미터로 전
달.
M.page.back({
param : {'key_a':'b','key_c':'d'}
});
PPParameters* param = [[PPParameters alloc] init];
[param setObject:@"'key_a'" forKey:@"b"];
[param setObject:@"'key_c'" forKey:@"d"];
SET
파라미터
데이터 공유
(1/3)
[self historyBackWithParamObject:param
animation:PPAnimationDefault];
[param autorelease];
(알림) PPNativeViewController class 상속 받은 class에서만 사용
가능.
var key_a = M.data.param("key_a");
GET
NSString *key_a = [self.parameters objectForKey:@"'key_a'"];
(알림) PPNativeViewController class 상속 받은 class에서만 사용
가능.
native 개발 (iOS)
웹(js)-native 데이터 공유 예제.(3/3)
구분
전역
데이터 공유
(2/3)
영속
데이터 공유
(3/3)
동작
SET
GET
SET
GET
웹(js)식 방식(예제)
native 방식(예제)
M.data.global(“g_key”, “value”);
_setGlovalValue(@”g_key”, @”value”);
var g_key = M.data.global(“g_key”);
NSString *g_key = _getGlovalValue(@”g_key”);
M.data.storage(“s_key”, “value”);
_setStorageValue(@“s_key”, @”value”);
var s_key = M.data.storage(“s_key”);
NSString *s_key = _getStorageValue(@“s_key”);
native 개발 (iOS)
WN 확장 Interface 함수 개발.(1/5)
- 확장 interface 추가하기.
→ WIKI에 정의되지 않은 MCore API를 추가 할 수 있음.(= MCore 확장 API)
→ MCore 확장 API는
⇒ native 함수의 구현 및
⇒ native 함수를 호출하는 js 함수 구현.
→ 동기/비동기 방식의 함수 지원.
⇒ 비동기(non-blocing)
- native의 결과 값을 js 함수(js callback)를 호출하여 전달되는 방식.
- WN2CommonAsync js 함수를 사용.
⇒ 동기(blocking)
- native 함수의 return 값이 화면으로 바로 전달되는 방식.
- WN2Common js 함수를 사용.
→ native coding
⇒ ExtendWNInterface.m 파일에 js에서 정의한 native 함수 정의.
⇒ (권장)신규 기능 추가 시, ExtendWNInterface class의 ”Objective-C category”를 이용.
native 개발 (iOS)
WN 확장 Interface 함수 개발.(2/5)
- native 함수 정의 시, 제약 사항.
→ 함수 매개변수에 적용되는 named parameter의 name은 공백(‘’)이어야 함.
→ 함수의 매개변수 타입은 (NSString *) 타입 만을 지원.
→ 함수의 반환(return) 타입은 (NSString * or void) 타입 만을 지원.
→ 확장 interface 함수 개발 시.
- (void)someMethodWithFirstValue:(NSString *)value1
- (NSString *)someMethodWithFirstValue:(NSString *)value1
:(NSString *)value2;
:(NSString *)value2;
→ 일반적인 Objective-C 함수.
- (void)someMethodWithFirstValue:(NSString *)value1 secondValue:(NSString *)value2;
native 개발 (iOS)
Asynch JS 함수의 CB 호출하기.(3/5)
- 관련 class.
→ PPHybridViewController
- 관련 function.
→ - (void) callCbfunction:(NSString *)func withObjects:(NSObject*)fristObject, ... NS_REQUIRES_NIL_TERMINATION;
- 예제
// 샘플 코드.
- (void) asyncTest:(NSString *)callback :(NSString *)param1 :(NSString *)param2 {
[_viewctrl callCbfunction:callback withObjects:@"native set value", param1, param2, nil];
}
(note) _viewctrl 변수
⇒ ExtendWNInterface class에 정의된 PPWebViewController class 객체.
native 개발 (iOS)
Sync/Async JS 함수 정의.(4/5)
- WN2Common 함수 정의.
function test_WN2Common(param1, param2)
{
var _param1 = param1 || '';
var _param2 = param2 || '';
(주의) WN2Common/WN2CommonAsync native 함수 호출.
return WN2Common(“syncTest”/*native함수이름*/, _param1, _param2);→ 입력된 native 함수 이름의 대/소문자가 일치 해야 함.
}
→ 입력된 파라미터의 개 수가 일치 해야 함.
- WN2CommonAsync 함수 정의.
function test_WN2CommonAsync(callbcak_function, param1, param2)
{
var _callback = callbcak || function() {};
var _param1 = param1 || '';
var _param2 = param2 || '';
→ WN2CommonAsync 함수의 경우
native로 전달할 js 함수는 M.buffer.on( ) 함수로 wrapping 되어
야 함.
WN2CommonAsync(“asyncTest” /*native함수이름*/, M.buffer.on(_callback), _param1,
_param2);
}
native 개발 (iOS)
Sync/Async JS 함수 사용 예제.(5/5)
- WN2Common 함수 사용 예제.
// WN2Common 테스트 코드.
var result = test_WN2Common("안녕", "하세요!");
alert("result : " + result);
- WN2CommonAsync 함수 사용 예제.
// WN2CommonAsync 응답(CB) 함수.
function test_CBAsync(p1, p2)
{
var rst = "cb result = p1:" + p1 + ", p2:" + p2;
alert(rst);
};
// WN2CommonAsync 테스트 코드.
test_WN2CommonAsync(test_CBAsync, "니먼", "하오!");
(*) 주의
⇒ javascript 함수 객체(object)가 전달 되어야 함.
→
OK : test_CBAsync
→ NOT OK : “test_CBAsync”
native 개발 (iOS)
native network manager 개발.(1/6)
- WHAT ?
⇒ 플랫폼 내부의 network provider와 interface(요청/응답) 기능.
network provider → network resource에 대한 요청 및 응답을 대행하는 플랫폼 모듈
(ex, android provider).
- HOW ?
⇒ 상속 받아야 할 class : PPAbstractHttpNetworkManager
⇒ 구현해야 할 protocol
→ PPNetworkManager
← request 기능.
→ PPNetworkManagerDelegate ← response 기능.
→ PPHttpProviderDelegate
← network provider의 response를 받기 위한 delegate.
⇒ 기 생성되어 있는 HttpDataNetworkManager class를 참고하여 신규로 생성.
ex) HttpDataNetworkManager의 header file
native 개발 (iOS)
native network manager 개발.(2/6)
- network requset / response flow
화면(js)
network manager
<PPNetworkManager>
<PPNetworkManagerDelegate>
native
플랫폼
network provider
<PPHttpProviderDelegate>
networ
k
native 개발 (iOS)
native network manager 개발.(3/6)
- PPAbstractHttpNetworkManager class ?
→ 신규 network manager 생성 시 parent가 되는 class.
→ Manifest.xml 파일의 network 필드에 해당하는 class.
native 개발 (iOS)
native network manager 개발.(4/6)
- PPNetworkManager protocol ?
→ WN 함수 중 M.net 함수의 native request method.
ex) M.net.http.send(setting), M.net.res.update(setting)
native method
call
(request)
native 개발 (iOS)
native network manager 개발.(5/6)
- PPNetworkManagerDelegate protocol ?
→ WN 함수 중 M.net 함수로 response 전달 method.
ex) M.net.http.send(setting), M.net.res.update(setting)
native response
native 개발 (iOS)
native network manager 개발.(6/6)
- PPHttpProviderDelegate protocol ?
→ network provider의 response를 받기 위한 method.
provider
success
fail
method call
2일차 : 서버 교육 과정 (이론/실습)
시간
14:00~16:00
16:00~18:00
내용
서버 개발환경 이해
-SpringFramework, SVN + Maven Project 관리 이해, myBatis 의 이해
확장개발과 리소스 업데이트
- 확장개발 방법, 리소스 업데이트의 이해, 앱스토어 연동
-앱스토어 연동 실습
-로그인 API 연동
-리소스 배포 방법(zip 파일, 서버연동)
- 앱 업데이트
교육 방식
강의 / 실습
강의 / 실습