phonegap - 총 8시간 53분 / 강의당평균 : 26분38초

phonegap

전체 : 8시간 53분 / 강의당평균 : 26분38초

01 폰갭 소개 및 다운로드

폰갭을 내려받고 설치한 후 폰갭에서 지원하는 API에 대해 공부합니다.

31분

책갈피 : [00:00] 소개 / [01:07] Java JDK 설치 / [02:14] 폰갭 내려받기 / [03:07] Getting Started Guides / [03:24] 이클립스 설치 / [04:08] 플러그인 설치 / [05:35] 예제 프로그램 / [05:40] 프로젝트 추가 / [06:11] SDK 지정 / [06:54] Launcher Icon / [07:22] Activity 생성 / [07:40] 폰갭 라이브러리 추가 / [09:26] Activity 파일 수정 / [10:00] LoadUrl 추가 / [10:12] Import / [10:33] Manifest 파일 수정 / [10:57] permission 추가 / [12:11] 가상 디바이스 만들기 / [13:25] 앱 실행 / [13:44] 결과 확인 / [14:14] index.html 만들기 / [14:57] HelloWorld 편집 / [16:38] 앱 실행/결과 확인 / [17:00] 모바일 앱 UI를 jQuery Mobile / [17:46] jQuery Mobile 설치 / [19:09] jQuery 설치 / [20:40] 폰갭 API 예제 모바일 애플리케이션 폴더 구성 / [22:11] 폰갭 API 모바일 애플리케이션의 index.html / [24:08] jQuery Mobile을 이용한 페이지 구성-header / [25:13] jQuery Mobile을 이용한 페이지 구성-content / [25:43] jQuery Mobile을 이용한 페이지 구성-footer / [26:14] Clean / [26:35] 앱 실행/결과 확인 / [26:48] 메인화면 디자인 / [27:26] viewport 지정 / [28:24] script type 추가 / [29:04] header 수정 / [29:19] content 수정-listview 추가 / [29:43] 리스트아이템 추가 / [31:05] 앱 실행/결과 확인

02 단말기 정보(Device)와 카메라(Camera)

단말기 정보(Device) API와 카메라(Camera) API에 대해서 공부합니다.

21분

책갈피 : [00:00] 단말기 정보(Device) / [00:50] Device 속성 정보 / [01:42] 읽어오는 시점 설정 / [02:21] index.js 생성 / [02:49] index.html 파일에 추가 / [03:51] document / [04:25] device.html 생성 / [04:53] 페이지 지정 / [05:38] header 지정 / [06:00] content 지정 / [06:13] footer 지정 / [06:36] p id / [07:19] index.js 수정 / [08:41] 콜백함수 지정 / [09:00] phonegapDevice 함수 호출 / [09:53] mydevice.js 생성 / [10:48] var element / [11:23] innerHTML / [12:10] Device Phonegap / [12:32] Device platform / [12:55] Device UUID / [13:14] Device Version / [13:49] 앱 실행/결과 확인 / [14:18] 링크 수정 / [14:49] 앱 실행/결과 확인 / [15:17] 오류 수정 / [15:28] 앱 실행/결과 확인 / [15:50] 카메라(Camera) / [16:00] Camera 속성 정보 / [16:36] config.xml / [17:02] 쓰기 옵션 지정 / [17:46] permission 추가 / [17:56] feature 추가 / [18:42] activity 추가 / [19:28] configchanges

03 카메라(Camera)

카메라(Camera) API에 대해서 실습합니다.

21분

책갈피 : [00:00] UI 확인 / [01:31] camera.html 생성 / [01:59] 페이지 지정 / [02:30] header 지정 / [02:42] content 지정 / [02:50] footer 지정 / [02:57] 타이틀 입력 / [03:22] 버튼 추가 / [04:08] 버튼값 수정 / [06:40] 작은 이미지 추가 / [07:27] 큰 이미지 추가 / [08:17] mycamera.js 생성 / [08:45] function 추가 / [09:30] navigator / [10:06] quality / [11:00] allowEdit / [11:20] sourceType / [12:50] destinationType / [14:04] onPhotoDataSccess 구현 / [14:34] var smallImage / [16:12] onFail 구현 / [16:53] onPhotoURISuccess 구현 / [18:13] index.html 파일에 추가 / [18:52] 오류 수정1 / [20:01] 오류 수정2 / [20:22] 앱 실행/결과 확인

04 위치정보(Geolocation)

위치정보(Geolocation) API에 대해 실습합니다.

23분

책갈피 : [00:00] 위치정보(Geolocation) / [00:10] Geolocation 속성 정보 / [01:23] permission 추가 / [01:43] UI 살펴보기 / [02:23] geolocation.html 생성 / [02:52] 페이지 지정 / [03:02] header 지정 / [03:08] content 지정 / [05:28] geolocation.js 생성 / [05:56] function 추가 / [06:23] navigator / [06:45] onSuccessCurrPosition / [07:00] onErrorCurrPosition / [07:20] timeout / [08:29] 성공 콜백함수 지정 / [09:33] innerHTML / [10:07] latitude, longitude, altitude, accurary, altitudeAccuracy, heading, spead / [11:44] Timestamp / [12:29] 에러 콜백함수 지정 / [13:31] WatchPosition / [14:28] 옵션 정의 / [15:15] 버튼 옵션 설정 / [16:45] stopWatchPosition 구현 / [17:48] if / [18:24] clearWatch / [19:00] onErrorWatchPosition / [20:10] onSuccessWatchPosition / [21:46] index.html 파일에 추가 / [22:20] 앱 실행/결과 확인

05 가속도 센서(Accelerometer)

가속도 센서(Accelerometer) API에 대해 실습합니다.

17분

책갈피 : [00:00] 가속도 센서(Accelerometer) / [00:11] Accelerometer 속성 정보 / [01:31] UI 살펴보기 / [02:08] accelerometer.html 생성 / [02:36] 페이지 지정 / [02:51] header 지정 / [02:57] content 버튼 추가 / [05:11] accelerometer.js 생성 / [05:36] 파일 이름 변경 방법 / [05:58] function 추가 / [06:30] getCurrAccel / [07:28] 성공 콜백함수 지정 / [07:49] 에러 콜백함수 지정 / [08:29] innerHTML / [09:28] timestamp / [10:14] startWatchAccel / [11:35] WatchID / [12:47] stopWatchAccel 구현 / [14:09] onSuccessWatchAccel / [14:24] onErrorWatchAccel / [15:28] index.html 파일에 추가 / [16:20] 앱 실행/결과 확인

06 캡쳐(Capture)와 방향정보(Compass)

캡쳐(Capture) API와 방향정보(Compass) API에 대해 공부하고 실습합니다.

33분

책갈피 : [00:00] 캡쳐(Capture) / [00:14] Capture 속성 정보 / [01:30] permission 추가 / [01:48] UI 살펴보기 / [02:14] capture.html 생성 / [02:40] 페이지 지정 / [02:52] header 수정 / [03:00] button 추가 / [03:50] capture.js 생성 / [04:19] captureAudio 구현 / [04:55] 콜백 정의 / [06:06] 성공 콜백함수 지정 / [08:30] 에러 콜백함수 지정 / [10:04] captureImage 구현 / [11:13] 성공 콜백함수/에러 콜백함수 지정 / [12:18] captureVideo 구현 / [13:39] index.html 파일에 추가 / [14:10] 오류 수정 / [14:26] 앱 실행/결과 확인 / [15:15] 방향정보(Compass) / [15:26] Compass 속성 정보 / [16:59] UI 살펴보기 / [17:37] compass.html 생성 / [17:55] 페이지 지정 / [18:05] header 수정 / [18:15] content 수정 / [19:40] compass.js 생성 / [20:04] getCurrHeading 구현 / [21:09] 성공 콜백함수 지정 / [24:40] 에러 콜백함수 지정 / [25:13] startWatchHeading 구현 / [28:20] stopWatchHeading 구현 / [29:25] 성공 콜백함수 지정 / [30:11] 에러 콜백함수 지정 / [31:04] index.html 파일에 추가 / [31:29] 앱 실행/결과 확인

07 네트웍 연결(Connection)과 연락처(Contacts)

네트웍 연결(Connection) API와 연락처(Contacts) API에 대해 공부하고 실습합니다.

23분

책갈피 : [00:00] 네트웍 연결(Connection) / [00:20] Connection 속성 정보 / [01:39] UI 살펴보기 / [02:16] connection.html 생성 / [02:36] 페이지 지정 / [02:46] header/content 수정 / [03:32] index.js 수정 / [04:59] connection.js 생성 / [05:25] phonegapConnection 구현 / [08:55] index.html 파일에 추가 / [09:25] 앱 실행/결과 확인 / [09:41] API 버그 / [10:18] 연락처(Contacts) / [10:27] Contacts 속성 정보 / [11:58] permission 추가 / [12:12] UI 살펴보기 / [12:59] contact.html 생성 / [13:14] 페이지 지정 / [13:31] header 수정 / [13:37] content 수정 / [15:32] contact.js 생성 / [16:00] savecontact 구현 / [17:27] mycontact 멤버 살펴보기 / [21:19] 이름 설정

08 연락처(Contacts)

연락처(Contacts) API에 대해 실습합니다.

28분

책갈피 : [00:00] 전화번호 설정 / [02:03] 전화번호 할당 / [03:24] 이메일 설정 / [04:16] 조직정보 설정 / [06:55] 주소정보 설정 / [09:36] 홈페이지정보 설정 / [11:59] 복제 / [14:19] 성공 콜백함수 지정 / [15:32] 에러 콜백함수 지정 / [16:06] findcontact 구현 / [19:47] 에러 콜백함수 지정 / [20:12] 성공 콜백함수 지정 / [20:30] for문 / [22:42] if문 / [25:02] 살펴보기 / [25:54] index.html 파일에 추가 / [26:29] 앱 실행/결과 확인

09 파일(File)-1

파일(File) 읽기에 대해 공부하고 실습합니다.

22분

책갈피 : [00:00] 파일(File) / [02:16] File 객체 / [06:15] File 속성 정보 / [07:17] permission 확인 / [07:32] UI 살펴보기 / [08:30] file.html 생성 / [08:54] 페이지 지정 / [09:08] header 수정 / [09:16] content 수정 / [09:56] button 생성 / [12:08] myfile.js 생성 / [12:54] readFile 구현 / [15:28] gotReadFS 구현 / [15:48] fail 함수 구현 / [17:53] fileSystem 객체

10 파일(File)-2

파일(File) 읽기에 대해 공부하고 실습합니다.

20분

책갈피 : [00:00] DirectoryEntry / [01:00] getMatadate/setMatadate / [03:57] gotReadFile 구현 / [05:24] fileEntry / [06:02] getParent / [06:18] createWriter / [07:09] getReadFile 구현 / [08:06] readDataUrl / [10:05] reader 속성 / [10:44] 현재 상태를 나타내는 속성 / [11:30] onloadstart/onprogress / [11:50] onload / [12:03] onabolt/onerror / [12:21] onload와 onloadend의 차이점 / [13:23] onloadend / [13:47] console / [15:41] readAsText / [18:29] 전체 정의

11 파일(File)-3

파일(File) 쓰기에 대해 공부하고 실습합니다.

21분

책갈피 : [00:00] 파일쓰기 / [00:14] writeFile method / fileEntry / [02:31] getWrite fileSystem / [04:01] gotWrite FileEntry / [05:00] gotFileWriter(wrier) / [05:18] FileWrtiter - abort, seek, truncate, write / [06:36] FileWrtiter 속성 - readyState, fileName, length, position, error / [07:22] FileWrtiter 이벤트 속성 / [08:29] FileWrtiter에서 확인할 기능 / [09:54] 결과값 element / [10:32] onwrite / onwirteend / [11:14] writer.write / [18:35] 구현한 것 설명

12 파일(File)-4

파일(File) 쓰기에 대해 공부하고 실습합니다.

20분

책갈피 : [00:00] 파일 시스템 부분 작성 / [00:06] fileSystem / [00:35] fileSystem 객체 구현 / [01:40] 성공 콜백 구현 / [02:01] 결과값 element / [02:30] element 값 할당 / [02:54] name, root 속성 설명 / [04:17] element에 동일하게 할당 / [05:41] index.html 파일에 추가 / [06:31] 실행결과 확인 / [08:41] file 전송 / [09:22] FileTransfer 속성 / [09:58] upload method, download method, abort method / [10:14] FileTransfer - upload method / [11:22] upload method - options (FileUploadOptions) / [13:16] FileUploadOptions을 생성해서 값 setting / [15:55] FileUploadResult / [17:00] FileTrasferError / [17:55] FileTransfer - download method / [19:02] successCallback은 FileEntry 리턴 / [19:18] errorCallback은 FileTransferError 리턴 / [19:35] FileTransfer - abort method / [19:54] FileTrasferError 객체 리턴 / [20:11] FileTransfer 정리

13 미디어(Media)-1

미디어(Media) API에 대해서 공부하고 실습합니다.

24분

책갈피 : [00:00] 미디어 API / [00:19] 구현할 화면 설명 / [01:27] Permissions / [02:17] iOS / [02:31] Permissions 확인 / [03:02] html 파일 생성 / [03:23] html 파일 수정 / [03:36] ID 변경 / [03:57] button 변경 / [04:40] ID 지정 / [06:10] java script 파일 생성 / [06:38] playAudio, pauseAudio, stopAudio, recordAudio 구현 / [07:45] playAudio - media 객체 / [09:06] error - MediaError, message / [09:54] media API - gerCurrentPisition, gerDuration, play, pause, stop, release, seekTo / [11:20] media API - startRecord, stopRecord (녹음관련) / [11:45] positon, duration(media 자체속성) / [12:14] playAudio 구현 / [14:11] Timer 정의 / [17:50] onError 구현 / [18:54] 구현한 것 설명 / [19:41] setAudioPosition 정의 / [20:42] onSuccess 구현 / onError 구현 / [22:29] pauseAudio 구현 / [23:00] stopAudio 구현 / [23:22] clearInterval / [24:03] 정리

14 미디어(Media)-2

미디어(Media) API에 대해서 공부하고 실습합니다.

22분

책갈피 : [00:00] recordAudio / [00:47] record source 파일 정의 / [01:10] device.platform 속성값 이용 / [02:40] 파일 생성 함수 추가 / [03:44] createRecordFIle 추가 / [05:09] 성공과 실패의 콜백 정의 / [07:12] 성공 콜백 구현 / [09:22] 실패 콜백 구현 / [09:46] startRecord 구현 / [10:10] media 객체 생성 / [10:52] 성공 콜백 구현 / [11:43] 실패 콜백 구현 / [12:12] startRecord 실시 / [12:31] setTimeout / [15:00] startRecordPlay 구현 / [16:10] 녹음에 사용되었던 mediaRecord 해제 / play를 위해 다시생성 / [18:34] play 실행 / [19:08] stopRecordPlay 구현 / [20:11] 전체 구현 정리 / [20:53] 결과 확인

15 알림(Notification)과 저장소(Storage)

알림(Notification)과 저장소(Storage)에 대해서 공부하고 실습합니다.

46분

책갈피 : [00:00] Notification API / [00:28] ShowAlert / [00:39] ShowConfirm / [00:47] Play Beep / [00:54] Vibrate / [01:02] Permission / [01:37] iOS / [01:50] UI 디자인 / [02:06] media.html 복사 / [02:21] notification.html / [04:09] 매소드구현 / [04:34] ShowAlert 구현 / [06:45] 콜백 구현 / [07:22] ShowConfirm 구현 / [09:48] onConfirm 구현 / [10:44] Play Beep 구현 / [11:55] Vibrate 구현 / [12:35] 결과 확인 / [13:36] Storage API / [13:49] Database / [14:29] localStorage / [15:01] 화면 확인 / [15:46] html file 만들기(Storage.html) / [17:33] Storage.js 만들기 / [18:22] sqlExample 구현 / [21:24] populateDB 구현 / [26:31] errorCB 구현 / [28:02] successCB 구현 / [29:41] queryDB 구현 / [31:09] querySuccess 구현 / [34:18] 실제 querySuccess 구현 / [35:55] for루프 탐색 / [37:43] localStorage / [39:55] localStorageExample / [41:09] for루프 / [43:52] index.html 적용 / [44:32] config.xml-plugin 확인 / [45:15] 결과 확인

16 이벤트와 폰갭 플러그인

폰갭이 지원하는 이벤트에 대해 공부하고 차일드브라우저 설치 및 사용 예에 대해 실습합니다.

30분

책갈피 : [00:00] 이벤트 핸들러 / [00:26] index.js / [00:55] 이벤트 등록하는 방법 / [01:37] 이벤트 종류 / [03:45] pause / [04:10] resume / [04:25] online / [04:44] offline / [05:01] backbutton / [05:19] batterycritical / [05:39] batterylow / [06:02] batterystatus / [06:16] menubutton / [06:32] searchbutton / [07:04] deviceready / [07:51] 콜백구현 / [07:56] Pause / [08:22] Resume / [08:39] online / [08:54] Offline / [09:12] BackButton / [09:36] BatteryCritical / [12:09] BatteryLow / [12:35] BatteryStatus / [13:07] MenuButton / [13:31] SearchButton / [14:27] 결과 확인 / [15:27] 폰갭 플러그인 / [15:48] Android Application / [16:22] 폰갭 라이브러리 설치 / [17:17] 라이브러리 Build Path 추가 / [18:08] MainActivity.java 수정 / [19:13] index.html 생성 / [19:57] ChildBrowser / [22:25] ChildBrowser.java 포함 / [23:16] ChildBrowser 플러그인 추가 / [24:18] Android Manifest에 activity 추가 / [26:07] index.html 수정 / [29:38] 결과 확인

17 폰갭을 이용한 SNS 인증 및 매쉬업 개발

트위터의 oAuth 인증 절차/jsOAuth와 차일드브라우저를 이용한 트위터 인증 구현/jsOAuth 자바스크립트 라이브러리

41분

책갈피 : [00:00] oAuth plugin 이용해서 트위터 App 생성 / [00:40] 트위터 API 인증방법 / [01:00] oAuth 형태 / [01:17] twitter.com 접속 / [02:26] Step 1 / [03:34] Step 2 / [04:51] Step 3 / [05:55] jsOAuth plugin / [06:09] github.com 접속 / [07:41] 트위터 로그인/App 생성 / [08:54] App 내용 확인 / [10:19] jsOAuth script를 App에 설정 / [11:45] twitter script 생성 / [12:51] 변수 정의 / [13:02] 변수 설명 / [13:49] OAuth 객체 생성에 필요한 옵션 / [14:17] childBrowser 오픈을 위한 메서드 정의 / [15:01] TwitterLogin 구현 / [16:17] 실패 콜백 구현 / [16:30] 성공 콜백 구현 / [17:31] onLocationChange 메서드 / [19:51] 3가지 경우에 대한 파싱/첫번째 경우 / [20:39] 두번째 경우 / [21:22] 세번째 경우 / [22:40] TwitterAccessToken 구현 / [23:54] 실패 콜백 구현 / [24:02] 성공 콜백 구현 / [25:06] oAuth AccessToken 설정 / [26:04] 작성내용 확인 / [27:19] TwitterGetHomeTimeline 구현 / [29:05] TwitterTimeline 정의 / [29:55] HomeTimeline호출에 대한 결과 API 문서에서 확인 / [32:10] Parsing 구현 / [33:45] 작성내용 확인 / [37:38] 결과 확인 / [38:55] 오류 확인 / [39:12] 오류 수정 / [39:41] 결과 확인

18 폰갭을 이용한 하이브리드 앱 실전 개발-1

페이스북 커넥트 플러그인을 이용한 페이스북 인증에 대해 공부합니다.

26분

책갈피 : [00:00] 폰갭 매시업 어플리케이션 / [00:31] 프로젝트 생성 / [01:05] 개발환경 설정 / [02:10] 라이브러리 추가 / [02:39] xml 복사 / [03:12] 소스파일 수정 / [04:22] jquery mobile 환경 설정 / [06:06] jquery mobile 파일 복사 / [06:31] Manifest 수정 / [06:51] Permissions 추가 / [08:26] Facebook Apps 생성 / [10:48] Facebook SDK 설정 / [11:28] Run the Samples / [11:45] keytool 복사 / [12:08] 코멘트 창에 붙여넣기 / [13:27] Key Hashes 부분에 붙여넣기 / [14:13] Settings / [14:54] 코멘트 창 / [15:17] Facebook SDK 다운로드 / [16:03] Import Projects / [17:10] facebook 추가 / [17:56] facebook plugin 다운로드 / [18:37] www 폴더 안에있는script 복사 / [19:19] 소스파일 복사 / [20:12] config 파일에 추가 / [21:23] Manifest 수정 / [22:12] 샘플 코드 추가 / [22:54] script 파일 경로 수정 / [23:34] App ID 설정 / [24:18] 결과 확인

19 폰갭을 이용한 하이브리드 앱 실전 개발-2

Photo onit! 어플리케이션의 기능과 구현에 대해 알아보고 소스 파일을 분석합니다.

50분

책갈피 : [00:00] Photo onit! 어플리케이션 / [00:42] Photo onit! 어플리케이션 추가 / [01:34] js 파일 추가 / [02:20] Image 추가 / [02:33] css 추가 / [02:57] Index.php 파일 수정 / [03:28] 주석처리 / [03:53] script 파일명 변경 / [06:10] psbPages.js / [06:31] Text file encoding / [07:04] function oninit / [07:54] Index.html 페이지 생성 / [09:02] 실행 / [11:45] Photo onit! 소스보기 / [14:29] 데이터베이스 열기 / [15:12] 로그인 체크 / [16:09] Core Methods / [16:24] Auth Methods / [16:36] Example 확인 / [17:10] Overview / [18:23] 이벤트 등록 확인 / [20:10] Photo onit! 동작 흐름 / [20:32] psbDB.js / [21:59] login.html / [22:40] psblogin.js / [23:11] FB.login / [23:42] Permissions 옵션 / [25:11] compose.html / [27:07] psbcompose.js / [30:34] FB.api / [31:28] Parameters / [33:41] 업로드 / [34:36] psbcomposeUploadPhoto / [35:05] fileTransfer 객체 생성 / [36:54] fileUploadURL / [38:08] psbDbSave / [39:28] dbPid / [41:06] photolist.html / [42:19] psbPhotoList.js / [43:49] onDbSuccessQuert / [46:37] 화면에 사진 표시

20 안드로이드 마켓 등록 및 판매절차

안드로이드 마켓 등록 및 판매절차에 대해 알아봅니다.

14분

책갈피 : [00:00] 안드로이드 마켓 등록을 위한 사전 준비 / [00:32] 패키지 이름 변경 / [01:05] AndroidManifest/xml 파일 수정 / [01:42] Clean projects selected below / [01:58] 화면 캡쳐 / [03:10] Keystore 값 생성 / [04:16] Key Creation / [05:05] Keystore 디렉토리 확인 / [05:32] Goolgle play / [06:24] 새 해플리케이션 추가 / [06:42] APK 업로드 / [07:21] 스토어 목록 / [08:07] 캡쳐화면 추가 / [09:31] 가격 및 배포 / [09:56] 고해상도 아이콘 / [10:19] 콘텐츠 가이드라인/미국 수출 법규 / [10:43] 게시 준비 / [11:06] Key Hashes / [11:49] Key Hashes 수정 / [12:07] Keystore 위치 지정 / [12:45] Key 생성

샘플확인 : 알지오 검색후 -> 강의검색란 -> phonegap