모바일 앱 개발의 기초 - cse.snu.ac.krcse.snu.ac.kr/scsc/sites/default/files/모바일 앱...
TRANSCRIPT
모바일 앱 개발의 기초방정호
2014. 6. 20.
• 재료공학부 06학번, 복수전공.
• 샤밥, 샤샤샥, 샤방
• AppeyRoad
• iOS Tech Talk 월드투어 in Seoul
• 제론헬스케어 산업기능요원
예상 수강생• 모바일 앱 개발 관심. 경험은 없음.
• GUI 프로그램 제작 경험?
• OOP 컨셉 익숙. 코딩도 가능. (JAVA)
• (스마트폰 사용자. 내가 쓸 앱을 만들어보자.)
• (대부분 안드로이드 유저?)
강의 내용• 내 기계에 모바일 앱 개발환경 구축하기
• 오늘 만들어 볼 앱 기능 정의 및 코딩
• 모바일 앱 개발 초심자가 알아야 할 개념들
• iOS 앱 제작 시연을 통한 앱개발 과정 관람
• 안드로이드 앱 제작 실습
모바일 앱• 안드로이드, iOS, (그 외 노력 중인 친구들)
• HTML5
• 둘 각각 장단점이 있음
• 오늘 다룰 내용은 Native App
개발환경 구축• SDK (ADT)
• API document
• (IDE)
SDK
Software
Development
Kit
� Tools
� Frameworks
(Cocoa Touch)
� Language
� Design strategies MVC
iPhone SDK Overview
5
Xcode Interface Builder
[[NSString alloc] initWithFormat: @”Hello %@”, name];
FoundationUIKit
SNU CSE
API
Xcode, 이클립스 …
예) 텍스트 필드• 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경)
• 누르면(영역, 손가락 몇 개가 누를지, 누르다가 손가락을 필드 밖으로 이동하면?) 선택이 됨
• 선택 되면 키보드를 표시함 (사용자가 쓰는 언어가 뭐지? 전화번호만 입력. 만약에 블루투스 키보드 쓰면?)
• 키보드에서 타이핑 하면 수정 내용을 표시 (필드 영역보다 글자를 많이 입력하면?)
• 사용자가 입력한 값을 핵심 기능에서 사용할 수 있게 제공.
Framework
• App 개발을 위해 필요한 재료
• Apple, Android 등에서 미리 구현해 놓음
• 속 구현에 대해 알 필요 (알 수도) 없음
• 관련있는 기능들을 묶어 놓음
UI
API
API
• Application Programming Interface
• 제공된 FW들을 사용하기 위한 방식
• 개발자는 이를 이용해 프로그램을 구성
• 내부에서 그에 대응되는 코드를 수행
결론• SDK를 받으면 다 들어있다 : 개발툴, 각종 프레임웍,
API 문서, 테스트 툴, 심지어 예제까지. (소스코드?)
• https://developer.apple.com/devcenter/ios
• http://developer.android.com/sdk
• (거의) 공짜!
오늘 만들어 볼 앱
스마트폰 앱이라며…?• GPS 중력 센서를 써서, 머리 위에 폰 올리면 키를 알아낸다.
• 카메라로 사람 찍어서 얼마나 뚱뚱한지 분석한다.
• 보건복지부 웹사이트 정보를 바탕으로 비만을 판단하는 기준 수치를 앱 구동시에 매번 업데이트 해준다.
• 비만 판정 결과를 페이스북, 트위터, 카톡으로 전송한다.
오늘 만들어 볼 앱• 비만도 판정 앱
• 입력: 성별, 키, 몸무게
• 처리: 비만도 계산
• 출력: 비만도, 판정 표시
기능 정의
코딩: 핵심기능은 이것!
원래 우리가 아는 방법
GUI vs CLICLI GUI
입력 scanf … 스위치, 텍스트필드, 슬라이더, 버튼
처리 똑같아 똑같아
출력 println … 텍스트뷰, 이미지, 얼럿뷰
MVC• Model / View / Controller
• Model : 데이터, 계산, 처리 등. 지금까지 만든 클래스들 (사람, 계산기)
• View : 관련 UI 정보 (위치, 크기 등 정의한 값들)
• Controller : 앱 개발의 핵심! Model 과 View 의 관계를 정의하고, 정보를 공유하도록 함.
MVC• Model : 앱의 핵심 기능. (원래 하던 거. CLI 프로그램에 있던 기능 그대로 가져다 쓸 수도.)
• View : SDK에 들어있음(Framework)내가 할 일 1. 크기, 위치 같은 것 정해주기.내가 할 일 2. 코드와 연결하기 위한 조치(이름, 함수)(내가 할 수도 있는 일 3. 기능을 수정, 추가하기e.g. 두 손가락으로 눌렀을 때만 작동하는 버튼? 상속해서 기능을 추가하면 됨.)
Controller
• 화면(View)에 있는 각종 component 들을 코드에서 접근.
• Model을 이용해서 필요한 연산 수행.
• 결과를 View에 표시.
• (새로운 화면 생성, 화면 전환, 애니메이션 등)
Controller• 각 화면은 하나의 controller가 구현되었음을 의미.
• 화면 구성을 위한 필수 기능들(바탕화면, 생길 때, 없어질 때, 뷰와의 연결 등)이 미리 구현 되어있음.Android : Activity (Fragment) iOS : UIViewController
• 이 클래스는 상속 받아서, 내 앱에서 필요한 기능들을 overriding, overloading 하면 됨!
오늘 만들어 볼 앱• Model은 다 만들었음!
• 화면은 총 두 개: 입력 화면, 결과 화면.
• 입력: 텍스트뷰(설명), 스위치(성별), 텍스트필드(키, 몸무게), 버튼
• 결과: 텍스트뷰(비만도, 레벨), 경고창, (이미지뷰)
iOS 시연• Objective-C 라는 새 언어를 배워야…
• 실습실에 Mac OS X 없음
• 개발툴, 개발과정이 좀 더 직관적!
• 지금까지 배운 컨셉들 이해, 실제 적용 경험
• iOS7 기반. (iOS8은 아직 beta)
안드로이드 실습• 따라해보세요.
• (Hello, World!)
• 갖고 있는 안드로이드 기계에서 테스트 가능.(개발자 옵션 ON)
• 에뮬레이터 가능 - 엄청느림.
Appey Road