Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

7시간이면 나도 앱개발자

티타늄 강의 자료
by

mifactory mi

on 3 July 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 7시간이면 나도 앱개발자

Titanium 을 이용한 앱개발
7시간이면 나도 앱개발자
1. 앱개발 환경과 개발방식
Titanium 개발언어 javascript
티타늄으로 할 수 있는 것들
티타늄이 제공해 주는 UI 컴포넌트
나의 과제리스트 만들기 (실습)
1. 액션정의 (액션 Flow)
강사 안흥섭 (MIFactory 대표)
개발경력
- 온라인 광고서버 개발
- KT Qook TV 광고시스템 개발
- 2010 CES 쇼 삼성 3-Screen 프로그램 개발
- 50여 프로젝트 개발참여
7시간이면 나도 앱개발자 세미나 목표
- 앱개발 환경의 이해를 통한 개발 방향성 제시
- Titanium을 통해 아이디어를 구체화하는 방법
현재 MIFactory 에서 앱서비스 개발 담당
. . .
개발 언어

Java
개발 언어

C#, silverlight
개발방식의 차이
네이티브 방식
웹앱 방식
하이브리드 방식
개발자가 되려면 준비해야 할 것
아이폰 개발자
- 맥환경에서만 개발 가능 (테스트 및 배포 모두)
- 배포시 개발자 라이센스 필요 ( $99 / 년 )
안드로이드 개발자
- 맥, 윈도우환경 모두 개발 가능 (테스트 및 배포 모두)
- 앱스토어 등록시 라이센스 필요 ( $25 / 평생 )
2. Titanium 소개
개발 결과물 > app, apk
http://www.appcelerator.com/
개발방식의 용이함으로
많은 App이 나오고 있음
1. www.appcelerator.com 접속
Titanium 개발 준비단계
이 메일로 검증체크를 하므로
정확히 넣어주셔야 합니다
이메일로 검증체크 메일 확인하세요
* 표시가 있는 것만 채우세요
2. Titanium Studio 설치
3. Titanium update 가 있을 경우 update 진행
4. Android 설치 > Dashboard 상에서 설치가능
맥의 경우 xcode 와 android 설치
PC의 경우 android 만 설치
Window
View
Control
어플리케이션의 뼈대 (틀)
화면 구성의 컨테이너 역할
어플리케이션 실행시 최초 open 명령을 통해
화면을 구성하는 요소들을 보여줌
var tabGroup = Ti.UI.createTabGroup();
윈도우 생성하기 (타이틀바 보이기)
var win1 = Ti.UI.createWindow({
title:'window1',
backgroundColor:'#e4e4e4',
//tabBarHidden:true
});
window와 같은 컨테이너 역할
화면을 구성하는 요소이기도 함
View
ImageView
ScrollView
ScrollableView
TableView
var win1 = Ti.UI.createWindow({
title:'window1',
backgroundColor:'#e4e4e4'
});

var view1 = Ti.UI.createView({
width:100,
height:100,
left:20,
top:20,
backgroundColor:'#FF0000'
});

win1.add(view1);

win1.open();
전체 개발 프로세스
5. Device 포팅을 위한 driver 설치
1. 플랫폼 선정 및 거기에 따른 개발툴 선정
2. 개발 프로세스
3. 디버깅 작업 및 배포용 결과물 산출 (app, apk)
4. 개발 라이센스 또는 마켓 라이센스 구입
5. 배포용 결과물 업로드
6. 심사 및 결과 확인
0. 아이디어 기획 > 기획 결과물 산출
Agenda
- 앱개발환경과 개발방식

-Titanium 소개 및 설치

-Titanium 으로 할 수 있는 것들 알아보기

-Titanium 으로 나의 과제리스트 앱 개발 (실습)
설명
-각 플랫폼별 언어로 개발
장점
-플랫폼 지원기능
모두 구현 가능
단점
-개발 Cost 증가
-자신이 가능한 언어로
네이티브앱 개발
-결과물 네이티브와 동일 (일부)
-개발언어가 다름
-빠른 개발 퍼포먼스
-겉은 네이티브 속은 웹
-웹 기술만 알면 앱 개발 가능
-앱스토어, 마켓출시 때
유지보수 편리
-브라우저 지원기능만 가능
-하드웨어 접근 불가
-플랫폼에서 지원하는 기능만
개발가능
-체크해야 할 점
내가 출시할 서비스를 개발하는데 있어
이 방식을 사용했을 때
퍼포먼스나 속도의 문제가 없는지 살펴보아야 함
앱 개발 사이클
기획 >
개발 + 디자인 >
테스트 >
심사 >
배포
기획
-기획자의 머리 속에 있는 아이디어를 문서로 구체화 시키는 것
-어떤 플랫폼에 배포를 할 것인가
-어떤 기능이 플랫폼과 충돌이 나지는 않는가
개발(디버깅/테스트) + 디자인
-자신이 선택한 개발방식으로 열심히 개발 + 디자인
-출시 플랫폼별 특징에 맞게 개발 (지원하는 컨트롤/UI 차이 이해필요)
아이폰
테스트
안드로이드
-시뮬레이터 테스트는
xcode 만으로 가능
-에뮬레이터로 테스트 안함
-폰테스트는 개발자 라이센스 필요
(프로비저닝 파일 필요)
-폰테스트는 안드로이드 설정 후 가능
비용
-개발자 라이선스 ($99/년)
-마켓 라이선스 ($25/평생)
심사
-폰테스트까지 모두 끝난 후에는 앱스토어나 마켓에 올린 후 심사를 받게 됨
아이폰
안드로이드
심사기간
1주~2주
몇 시간~1일
의 경우
주의할 점

무료
에서
유료
로 전환이 안됨
- 아이폰(Objective-C)과 안드로이드(Java) 네이티브로 개발
멀티 플랫폼을 목표로 개발하고자 한다면...
- 웹앱으로 개발하여 원소스 멀티유즈
- 하이브리드 방식으로 개발하여 원소스 멀티유즈
> 멀티 플랫폼 개발에 있어서의 하이브리드 대안
코로나
개발언어
라이선스
결과물
타겟
아이폰
안드로이드
바이너리
사이즈
Javascript, CSS
Lua
무료 (일부 모듈 유료)
$599/1년
네이티브 소스 + 실행파일
실행파일 (소스 유료)
일반 앱
게임 앱
룩앤필 & 퍼포먼스 100% 동일
-룩앤필은 차이가 있음
-퍼포먼스 80% 동일
-룩앤필은 애니메이션을
제외한 경우 동일
-퍼포먼스 떨어짐 (70%)
-룩앤필은 차이가 있음
-퍼포먼스는 80% 동일
-아이폰 5MB 미만
-안드로이드 10MB 미만
결과물따라 상이
티타늄
티타늄의 경우
지속적인 업데이트를 통해 보완해 나가고 있고,
다양한 모듈제공을 통해 네이티브로 개발하는 것과 차이가 거의 없음
개발 언어

Objective-C
var tab = Titanium.UI.createTab({
title:'Window1',
icon:'KS_nav_ui.png',
window:win1
});
tabGroup.addTab)tab);

tabGroup.open();
view 생성
var win1 = Ti.UI.createWindow({
title:'window1',
backgroundColor:'#e4e4e4'
});

var view1 = Ti.UI.createView({
width:100,
height:100,
left:20,
top:20,
backgroundColor:'#FF0000'
});

view1.addEventListener('click',function(){
alert('view1 clicked);
});

win1.add(view1);

win1.open();
샘플소스 4
view에 액션 이벤트 주기
이미지 넣기
샘플소스 5
var win1 = Ti.UI.createWindow({
title:'window1',
backgroundColor:'#e4e4e4'
})

var img1 = Ti.UI.createImageView({
width:100,
height:100,
left:20,
top:20,
image:'http://cfile10.uf.tistory.com/image/1272094C4D2255B033482D'
});

win1.add(img1);

win1.open();
스크롤뷰 만들기
샘플소스 6

var win1 = Ti.UI.createWindow({
title:'window1',
backgroundColor:'#e4e4e4'
})

var scrollview1 = Ti.UI.createScrollView({
contentWidth:'auto',
contentHeight:'auto',
showVerticalScrollIndicator:true,
showHorizontalScrollIndicator:true
})

var view1 = Ti.UI.createView({
backgroundColor:'gray',
borderRadius:10,
height:1000,
width:1000
});

scrollview1.add(view1);
win1.add(scrollview1);
win1.open();
스크롤러블뷰 만들기
var arrImg = [];
arrImg[0] = Ti.UI.createImageView({
image:'/image/camel/jpg'
});

arrImg[1] = Ti.UI.createImageView({
image:'/image/dolphin.jpg'
});

arrImg[2] = Ti.UI.createImageView({
image:'/image/elephant.jpg'
});

arrImg[3] = Ti.UI.createImageView({
image:'/image/horse.jpg'
});

arrImg[4] = Ti.UI.createImageview({
image:'/image/lion.jpg'
});

var win1 = Ti.UI.createWindow({
title:'window1',
backgroundColor:'#e4e4e4'
});

var scrollableview1 - Ti.UI.createScrollableView({
top:40,
view:arrImg,
showPagingControl:true,
pagingControlHeight:30,
currentPage:0
});

win1.add(scrollableview1);

win1.open();
WebView
기본적인 테이블 생성
var data1 = [
{'title':'row1'},
{'title':'row2'},
{'title':'row3'},
{'title':'row4'},
{'title':'row5'},
];

var win1 = Ti.UI.createWindow({
backgroundColor:'#e4e4e4',
title:'테이블 샘플1'
});

var tbl1 = Ti.UI.createTableView({
data:data1
});

win1.add(tbl1);

win1.open();
data 값의 변화에 따른 테이블 변화
샘플소스 9
var data1=[
{'title':'row1',hasChild:true,header:'row1 header'},
{'title':'row2',hasDetail:true},
{'title':'row3',hasCheck:true,header:'row3 header'},
{'title':'row4},
{'title':'row5'},
];

var win1 = Ti.UI.createWindow({
backgroundColor:'#e4e4e4',
title:'테이블샘플1'
});
샘플소스 10
var win1 = Ti.UI.createWindow({
backgroundColor:'#e4e4e4',
title:'테이블 샘플1'
});

var webview1 = Ti.UI.createWebView({
url:'http//m.naver.com',
height:'auto'
});

win1.add(webview1);

win1.open();
윈도우 생성하기
샘플소스 1

var win1 = Ti.UI.createWindow({
title:'window1',
backgroundColor:'#e4e4e4',
});

win1.open();
특정 기능을 정의해 놓은 모듈
아이폰, 안드로이드, 블랙베리에서 지원하는
컨트롤이 모두 제공됨
컨트롤 기능이 아무리 좋아도 멀티플랫폼으로
개발할 때는 써야할지 미리 고민해야 함
var tbl1=Ti.UI.createTableView({
data:data1,
style:Ti.UI.iPhone.TableViewStyle.GROUPED,
editable:true,
headerTitle:'샘플테이블'
});

win1.add(tbl1);

win1.open();
Label
글을 넣고 싶을 때 사용
Android 는 html 도 지원가능, iphone에서는 불가했으나 ios 6.0 부터 지원
샘플소스 11
샘플소스 2
샘플소스 3
샘플소스 7
샘플소스 8
TextField
사용자로 부터 글제목같은 문자나 숫자를
입력받고자 할 때 사용
프린트물 참조
샘플소스 12
프린트물 참조
TextArea
텍스트에어리어는 내용 같은 긴 문자열을 입력
받을 때 사용하는 컨트롤
샘플소스 13
프린트물 참조
button
버튼 컨트롤은 버튼을 만들 때 사용하며 사용자
액션을 맏는 역할이기 때문에 이벤트리스너가
항상 붙음
샘플소스 14
프린트물 참조
샘플소스 15
프린트물 참조
buttonBar
버튼바는 아이폰, 아이패드에서만 지원되는 버튼
묶음으로 안드로이드에서 지원이 안되기 때문에
저는 거의 안쓰는 컨트롤중 하나
샘플소스 16
프린트물 참조
Slider
드래그 한 정보를 입력받는 컨트롤
샘플소스 17
프린트물 참조
Switch
스위치는 on/off 값을 받는 컨트롤
샘플소스 18
프린트물 참조
ActivityIndicator
ActivityIndicator는 어떤 액션을 처리하는 동안
사용자로 하여금 처리중이란 상태를 알려주는
컨트롤
샘플소스 19
프린트물 참조
ProgressBar
프로그레스바도 액티비티인디케이터와 비슷하게
진행상태를 보여주는 컨트롤
샘플소스 20
프린트물 참조
picker
picker 여러개의 값을 사용자가 선택해야 할 경우
사용하는 컨트롤
샘플소스 21
프린트물 참조
picker 여러개의 값을 사용자가 선택해야 할 경우
사용하는 컨트롤
Modal 창
모달창은 경고나 옵션등을 사용자로 하여금
선택하거나 주의할 수 있게 해주는 기능
글을 지울 경우 마지막으로 한 번 더 묻는다던가
여러개의 옵션을 픽커처럼 선택하게 한다던가
하는 역할
Modal창 - AlertDialog
알럿창은 경고창으로 사용할 수도 있지만 옵션의
경우에도 사용. 사용자 취향에 맞게 사용하면 됨
샘플소스 22
프린트물 참조
Modal창 - optionDialog
optionDialog는 말 그대로 여러 옵션 중 하나를
고르는 모달창
샘플소스 23
프린트물 참조
alertDialog 와 다른 점은 경고창 형태가 아닌
바닥에서 나오는 형태
2. 티타늄 클라우드 서비스
3. 스토리보드 제작
4. 나의 과제리스트 만들기 (실습)
1.액션정의 (Flow)
1) 한 눈에 볼 수 있는 과제 리스트
2) 리스트 클릭시 자세한 내용을 볼 수 있는 뷰
3) 내용 수정 가능
4) 다 끝난 과제 삭제
2. Data Storage
이번 시간에는 데이타에 대한 개념이 없다 가정
하고 티타늄에서 제공하는 클라우드 서비스를 이용
▶여러가지 지원이 되는 API 들이 있는데 그 중에
우리는 과제 리스트와 어울릴만한 post API 를
이용하여 어플 제작
2) 등록버튼을 누르면 과제를 등록할 수있는 창이 열림
3) 등록된 리스트를 누르면 상세내용을 볼 수 있는 뷰 있음
4) 테이블 row를 오래 누르면 수정하거나 삭제할 수 있는 기능
3. 스토리보드 제작
1) 어플이 열리면 나의 과제 리스트가 나타날 테이블뷰가 있음
나의 과제리스트를 만든다면...
데이타 저장은 어디에?
페이퍼 참조
실습 시작
구글 계정
로그인 또는 가입 후
이 페이지로 이동
Full transcript