폰갭
한양대학교 전자과
프리랜서 프로그래머
각 기기 환경에 맞는 앱개발을 위해서는 개발환경이 구축이 되어있어야 합니다. 안드로이드 환경을 기준으로 진행되며 많은 모바일 플랫폼들이 있기 때문에 플랫폼별로 개발되기보다는 공통으로 적용할 수 있는 소스를 다양한 플랫폼에 적용 시킬 수 있도록 구성되어 있습니다. 어플리케이션의 기능과 구현에 대해서 실무제작을 원하는 분들이 이용하면 좋습니다.
-
01.31분 폰갭 소개 및 다운로드
폰갭을 내려받고 설치한 후 폰갭에서 지원하는 API에 대해 공부합니다.
책갈피 : [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.21분 단말기 정보(Device)와 카메라(Camera)
단말기 정보(Device) API와 카메라(Camera) API에 대해서 공부합니다.
책갈피 : [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.21분 카메라(Camera)
카메라(Camera) API에 대해서 실습합니다.
책갈피 : [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.23분 위치정보(Geolocation)
위치정보(Geolocation) API에 대해 실습합니다.
책갈피 : [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.17분 가속도 센서(Accelerometer)
가속도 센서(Accelerometer) API에 대해 실습합니다.
책갈피 : [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.33분 캡쳐(Capture)와 방향정보(Compass)
캡쳐(Capture) API와 방향정보(Compass) API에 대해 공부하고 실습합니다.
책갈피 : [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.23분 네트웍 연결(Connection)과 연락처(Contacts)
네트웍 연결(Connection) API와 연락처(Contacts) API에 대해 공부하고 실습합니다.
책갈피 : [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.28분 연락처(Contacts)
연락처(Contacts) API에 대해 실습합니다.
책갈피 : [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.22분 파일(File)-1
파일(File) 읽기에 대해 공부하고 실습합니다.
책갈피 : [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.20분 파일(File)-2
파일(File) 읽기에 대해 공부하고 실습합니다.
책갈피 : [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.21분 파일(File)-3
파일(File) 쓰기에 대해 공부하고 실습합니다.
책갈피 : [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.20분 파일(File)-4
파일(File) 쓰기에 대해 공부하고 실습합니다.
책갈피 : [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.24분 미디어(Media)-1
미디어(Media) API에 대해서 공부하고 실습합니다.
책갈피 : [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.22분 미디어(Media)-2
미디어(Media) API에 대해서 공부하고 실습합니다.
책갈피 : [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.46분 알림(Notification)과 저장소(Storage)
알림(Notification)과 저장소(Storage)에 대해서 공부하고 실습합니다.
책갈피 : [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.41분 폰갭을 이용한 SNS 인증 및 매쉬업 개발
트위터의 oAuth 인증 절차/jsOAuth와 차일드브라우저를 이용한 트위터 인증 구현/jsOAuth 자바스크립트 라이브러리
책갈피 : [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.26분 폰갭을 이용한 하이브리드 앱 실전 개발-1
페이스북 커넥트 플러그인을 이용한 페이스북 인증에 대해 공부합니다.
책갈피 : [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.50분 폰갭을 이용한 하이브리드 앱 실전 개발-2
Photo Onit! 어플리케이션의 기능과 구현에 대해 알아보고 소스 파일을 분석합니다.
책갈피 : [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 생성
센차터치212시간 42분
jquery mobile & UI20시간 3분