Ch 07. 네이티브앱으로 가자

Building 안드로이드 웹앱 with HTML, CSS, Javascript

Ch 07. 네이티브앱으로 가자

2/61

폰갭이란 ? Nitobi(http://www.nitobi.com/) 에서 만든 오픈소스 개발 툴 웹앱과 모바일 디바이스 사이를 연결해주는 다리 역할 주요 플랫폼에 대한 네이티브앱 프로젝트 템플릿으로 구성

• 프로젝트는 크롬 없이도 실행 가능한 웹앱• 폰갭을 이용하면 자신의 웹앱에 자바스크립트 코드를 추가해 아이폰 ,

넥서스 원 , 팜 프리 등에서 카메라에 접근 가능• HTML, CSS, 자바스크립트로 작성한 앱을 네이티브앱으로 바꿀 수 있음

– 각 플랫폼의 앱스토어에 등록 가능– 현재 아이폰 , 안드로이드 , 블랙베리 , 팜 , 심비안 , MS 윈도우

모바일을 지원하며 , 윈도우 폰 7 지원 기능은 개발 중

7.1 폰갭 소개

3/61

안드로이드 SDK 를 내려받아 설치하는 절차 1) 안드로이드 SDK 내려받기 ( 폰갭과 연동되므로 필수적인 절차 )

• http://developer.android.com/sdk/index.html 에서 적합한 패키지 내려 받기 • MS 윈도우나 리눅스를 사용한다면 자바를 먼저 설치해야 함

– http://java.sun.com/javase/downloads

7.2 안드로이드 SDK 내려받기

http://java.sun.com/javase/downloads



4/61

안드로이드 SDK 를 내려받아 설치하는 절차 (2) 2) 내려받은 archive 압축을 원하는 디렉터리에 풀기 3) 압축을 푼 SDK 디렉터리의 이름을 Android 라고 바꿈 ( 접근 간편 ) 4) 터미널을 실행하고 안드로이드 SDK 의 tools 서브 디렉터리로 이동

• 만일 데스크톱에 안드로이드 디렉터리를 놓고 그것의 이름을 바꾸었다면 , 다음과 같은 명령 이용 ( 리눅스도 동일 )

– cd ~/Desktop/Android/tools/• 윈도우에서 명령어

– cd %USERPROFILE%\Desktop\Androd/tools 5) 안드로이드 SDK 와 AVD 매니저 실행

• 맥이나 리눅스– ./android

• 윈도우– android


5/61

안드로이드 SDK 를 내려받아 설치하는 절차 (3) 6) 안드로이드 SDK 와 AVD 매니저 창이 열릴 때 , 왼쪽 사이드 바의

‘Available Packages’ 클릭


6/61

안드로이드 SDK 를 내려받아 설치하는 절차 (4) 7) 모든 사용 가능한 패키지와 아카이브 설치


7/61

안드로이드 SDK 를 내려받아 설치하는 절차 (5) 8) 윈도우의 오른쪽 하단 코너에 있는 ‘ Install Selected’ 버튼을 클릭 9) 라이선스 조항에 동의하는지를 묻는 창 팝업

• 내용을 읽은 후 ‘ Accept’ 옆의 박스를 선택한 후 ‘ Install’ 버튼을 클릭

10) 내려받기가 완료되면 , 내려받기 Close 버튼을 눌러 창을 닫음 11) 맥 OS X 에서는 안드로이드앱에서 빠져 나오기 위해 안드로이드

메뉴에서 ‘ Quit Android’ 선택• 윈도우와 리눅스에서는 창을 그냥 닫음


8/61

폰갭 내려받기 1) GitHub(http://github.com/jonathanstark/phonegap-android)

의 안드로이드 폰갭 내려 받기 페이지로 이동• [ 그림 7-5] 에서 보이는 ‘ Download’ 버튼을 클릭

2) 아카이브 포맷을 선택하라고 나올 때 , Download.zip 선택• 내려받기 그래픽은 파일이 내려받기 완료된 후까지도 열린 상태로 유지

3) 원하는 디렉터리에 내려받기한 아카이브의 압축 풀기

7.3 폰갭 내려받기

9/61

연동 환경 설정 안드로이드 SDK 와 폰갭은 서로를 찾을 수 있어야 함

• 이를 위해 PATH 환경 변수 설정

PATH 란 ? • 어디에서 다른 프로그램을 찾아야 하는지 프로그램들에게 알려주는

디렉터리 목록• 명령행에 명령어 (grep 이나 findstr 같은 ) 를 입력하면 , 컴퓨터는 명령을

실행하기 위해 PATH 에서 디렉터리를 하나씩 살펴보게 됨– 윈도우에서는 C:\Windows\System32;C:\Windows 처럼 PATH

항목을 세미콜론으로 구분– 맥이나 리눅스에서는 /usr/bin:/usr/local/bin 처럼 콜론 구분

7.4 환경 설정

10/61

PATH 등록법 윈도우 아래에 PATH 에 디렉터리를 추가하려면 ?

• 컴퓨터의 시스템 등록정보 열기– 내 컴퓨터’에서 마우스 오른쪽 버튼 클릭해 ‘등록정보’선택– 비스타나 윈도우 7 에서는 ‘속성 → 고급 시스텝 설정 → 고급’– 윈도우 XP 에서는 ‘고급’ 탭 클릭

• 다이얼로그 박스가 나타나면 ‘환경 변수 (N)...’ 클릭– 시스템 변수에서 , PATH 찾아 더블클릭– 커서를 움직인 후 다음 내용 추가

» ;C:\Android\tools;C:\PhoneGap\bin– Android SDK(C:\Users\yourusername\Desktop\Android 같

은 ) 의 위치를 C:\Android 로 , 폰갭을 저장한 위치를 C:\PhoneGap 으로 교체

– 확인 버튼 클릭하고 남아있는 다이얼로그 박스들 닫음

7.4 환경 설정

11/61

PATH 등록법 (2) 맥 OS X 나 리눅스 환경 ?

• 홈 디렉터리에서 .bash_profile 파일을 찾음– ls -l ~/.bash_profile

• 파일이 나타난다면 아래와 같이 나노 에디터를 실행해 편집– .profile 파일이 있다면 , 이 파일을 편집해도 좋음 – nano ~/.bash_profile

•화살표 키를 이용해 파일의 아래쪽으로 쭉 스크롤해 아래 경로 추가– PATH=$PATH:~/Android/tools:~/PhoneGap/bin

• 안드로이드 SDK(~/Desktop/Android/tools 같은 ) 의 위치로 ~/Android를 바꾸고 , 폰갭의 위치로 ~/PhoneGap 을 교체

• Ctrl-O 로 파일을 저장하고 , Ctrl-X 로 빠져나감

7.4 환경 설정

12/61

안드로이드 가상장치 생성하기 가상 환경에서 코드를 테스트해주는 디바이스 에뮬레이터 만들기 1) 이용할 수 있는 타겟 목록을 보기 위해 다음 내용 입력

• android list targets• 플랫폼 모두를 내려받은 경우 위 명령어를 실행하면 4가지 옵션이 나타남• 안드로이드 2.2(말하자면 android-7) 의 결과에 목록된 일련의 ID 에

주목– 이 SDK 는 이 책이 집필된 시점에서 가장 널리 퍼진 플랫폼

7.5 안드로이드 가상장치 생성하기

13/61

안드로이드 가상장치 생성하기 android list targets 실행 결과


14/61

안드로이드 가상장치 생성하기 2 ) 나만의 AVD 생성

– android create avd -n mySim -t android-8– android-8 플랫폼을 타겟 (-t) 으로 하는 ‘ mySim’ 이라는 이름 (-n)

을 가진 가상장치 (avd) 를 만들라고 안드로이드에게 명령 3) 에뮬레이터 실행

• emulator -avd mySim •방금 설치한 안드로이드 가상장치를 실행하기 위해 emulator 명령어 이용• -avd 플래그는 이전 단계에서 AVD 를 만들었을 때 여러분이 선택한 이름


15/61

안드로이드 가상장치 생성하기 에뮬레이터가 초기화돼 폰의 홈 스크린에 표시

•첫 실행은 1~2 분 정도 걸림


16/61

웹앱을 네이티브앱으로 변환 Nitobi 는 변환을 위해 droidgap 이라는 도우미 앱 제공 1) 마법사를 시작하려면 , 터미널을 실행하고 명령어 입력

• droidgap wiz

7.6 KiloGap 만들기

17/61

웹앱을 네이티브앱으로 변환 2) 프롬프트에 앱 이름 입력

• 이 이름은 안드로이드폰의 다양한 위치에서 사용자에게 보여짐

3) 프롬프트에서 앱의 패키지 ( 실행 파일 ) 이름 입력• 패키지의 이름은 앱의 고유 식별자 기능• 일반적으로 앱 패키지 이름으로 역 도메인명

– Ex) 필자는 com.jonathanstark.kilo 로 입력 4) 프롬프트에서 웹앱을 위해 HTML, CSS, 자바스크립트 파일을

저장한 컴퓨터의 폴더 경로 입력• Ex) ~/Desktop/www


18/61

웹앱을 네이티브앱으로 변환 5) 프롬프트에서 프로젝트 디렉터리 경로 입력

• droidgap 이 이 디렉터리를 만들기 때문에 이미 존재하는 디렉토리는 안됨• Ex) ~/Desktop/KiloGap

6) 프롬프트에 타겟팅하는 안드로이드 SDK 플랫폼 입력• 모든 안드로이드 SDK 플랫폼을 설치하기 위해 위의 모든 지시를 따랐다

면 , 여러분의 타겟 플랫폼 ID 는 android-8• 다른 플랫폼을 타겟팅하기 원한다면 , 플랫폼 ID 를 공백으로 남겨두고 엔터를 치고 나오면 , 가용한 플랫폼 ID 목록이 뜸

– 이 목록에서 , 각 항목의 첫 번째 줄은 두 문자열 ( 예를 들어 id: 2 혹은 “ android-4”) 모두가 보이는 ID 를 갖게 됨

– droidgap 프롬프트에서 인용부호 (“) 없이 android-4 와 같은 방식으로 ID 의 문자열 버전을 입력


19/61

웹앱을 네이티브앱으로 변환 타겟 SDK ID 를 입력한 결과 화면

• droidgap 은 프로젝트를 생성하고 , 지정한 결과 디렉터리에 파일 생성


20/61

웹앱을 네이티브앱으로 변환 ~/Desktop/KiloGap/assets/www/ 명령 실행

• droidgap 이 저장한 phonegap.js 파일 발견– 자바스크립트를 통해 네이티브 디바이스의 기능을 쓸 수 있게

폰갭이 제공하는 파일– phonegap.js 를 사용하려면 , 다음 코드를 index.html 파일의

head 섹션에 꼭 포함시켜야 함


21/61

에뮬레이터에서 네이티브 안드로이드앱 테스트 1) 터미널에 다음 명령어를 입력해 에뮬레이터 실행

• emulator -avd mySim• 이 창을 통해 다른 명령을 실행하지 않을 것이므로 , 최소화

2) 새로운 터미널 창을 열고 KiloGap 디렉터리로 이동• cd ~/Desktop/KiloGap

3) 디버깅을 활성화하고 앱 컴파일• ant debug

7.7 에뮬레이터에 KiloGap 설치하기

22/61

에뮬레이터에서 네이티브 안드로이드앱 테스트 3 번 단계까지 이상 없이 진행되었다면 볼 수 있는 화면


23/61

에뮬레이터에서 네이티브 안드로이드앱 테스트생성된 파일 확인

• Kilo-debug.apk 라는 이름의 실행 가능한 바이너리


24/61

에뮬레이터에서 네이티브 안드로이드앱 테스트 4) 바이너리 파일을 에뮬레이터에 인스톨

• adb -e install -r ~/Desktop/KiloGap/bin/Kilo-debug.apk• ‘adb’ 는 안드로이드 SDK 에 포함된 툴인 Android Debug Bridge 의 약자• –e 플래그는 adb 가 처음 발견하는 에뮬레이터에 바이너리

패키지 (~/Desktop/KiloGap/bin/Kilo-debug.apk) 를 인스톨하라는 뜻• –r 플래그는 해당 바이너리가 adb 에 이미 인스톨되어 있다면 새

바이너리로 교체하라는 뜻• ‘device offline’ 에러가 발생하면 , 에뮬레이터로 가서 ‘ lock’ 으로 된 것을

‘unlock’ 으로 풀고 다시 시도 – 안드로이드 2.2 의 경우 초록색 락 아이콘을 오른쪽으로 슬라이드


25/61

에뮬레이터에서 네이티브 안드로이드앱 테스트 실행하려면 앱 런처에 kilo 를 옮겨 해당 앱 선택


26/61

에뮬레이터에서 네이티브 안드로이드앱 테스트 [ 그림 7-13] 처럼 창의 바닥에 약 40 픽셀 정도의 틈 발견


27/61

화면의 최고 높이 이용하기 jQTouch 는 브라우저 툴바를 위한 공간을 남겨둠

• ~/Desktop/KiloGap/assets/www/kilo.js 를 열고 , 문서 준비 함수에 내용 추가

– if (typeof(PhoneGap) != 'undefined') {» $('body > *').css({minHeight: window.innerHeight + 'px

!important'});– }

• PhoneGap 오브젝트가 정의됐는지 알기 위해 typeof 연산자 이용– 코드가 폰갭 안에서 동작한다면 , 이 조건을 true 로 판단– 코드가 웹앱으로 실행됐다면 , PhoneGap 오브젝트는 정의되지 않을 것이고 , 조건은 false 로 인식

• 앱이 폰갭으로 실행됐을 때 , HTML body 요소의 직속 자손은 창의 콘텐츠 영역 ( 에뮬레이터는 455 픽셀 , 넥서스 원은 508 픽셀 ) 의 높이에 맞는 최소 높이를 부여받음

• 선언 (Declaration) 의 효과를 확실히 하기 위해 , 어떤 스타일시트에서든 지시가 충돌해도 무시하게하는 !important 지시어를 추가해 창을 채움

7.7.1 화면의 최고 높이 이용하기

28/61

화면의 최고 높이 이용하기 실행됐을 때 앱은 창을 완전히 채우게 됨

7.7.1 화면의 최고 높이 이용하기

29/61

나만의 아이콘 사용하기 원하는 이미지를 KiloGap 프로젝트의 특정 디렉터리에 위치 맥의 Finder 에서 ~/Desktop/KiloGap/res 로 이동

• drawable 이란 단어로 시작되는 drawable-hdpi, drawable-ldpi, drawable-mdpi 세 개의 폴더 발견

• 안드로이드는 다양한 스크린 크기의 디바이스들을 지원• ldpi 는 100~140, mdpi 는 140~180, hdpi 는 190~250 dpi 스크린용

테스트할 때는 56 픽셀의 사각형 .png 로 기본 폰갭의 icon.png 파일을 대체하면 안드로이드는 다양한 디바이스에서 적절하게 표현

7.7.2 앱 아이콘 최적화하기

30/61

나만의 아이콘 사용하기 앱을 다시 컴파일하고 설치

• cd ~/Desktop/KiloGap• ant debug• adb -d install -r bin/Kilo-debug.apk• 프로세스가 완료되면 폰의 런처에서 새로운 아이콘을 볼 수 있음

7.7.2 앱 아이콘 최적화하기

31/61

디바이스에 직접 설치 1) 랩탑의 USB 포트에 폰 꽂음 2) Settings → Applications → Development 로 이동하고 USB

디버깅 옵션을 활성화해 폰 디버깅 활성화 3) 터미널 창을 열고 , KiloGap 디렉터리로 이동

• cd ~/Desktop/KiloGap 4) 아직 컴파일하지 않았다면 , 디버깅을 활성화하고 컴파일

• ant debug•문제가 없으면 , 맨 마지막 줄에 ‘ BUILD SUCCESSFUL’ 표시• ~/Desktop/KiloGap/bin 디렉터리에 Kilo-debug.apk 생성

5) 바이너리 생성 후 다음 명령어를 입력하면 해당 파일 폰에 설치• adb -d install -r bin/Kilo-debug.apk• –d 플래그는 adb 에 처음으로 발견되는 연결된 디바이스에 바이너리

패키지 ( 즉 bin/Kilo-debug.apk) 를 설치하라는 의미

7.8 안드로이드폰에 KiloGap 설치하기

32/61

7.9.1 비프 , 진동 , 경고 네이티브 디바이스의 장치를 호출하여 앱의 완성도를 높이는 효과 사용자가 자신의 하루 칼로리 양의 초과상태 엔트리를 만들 때 앱이 삑

소리를 내고 , 진동하고 , 커스텀 경고를 보여주는 기능• ~/Desktop/KiloGap/assets/www/ 디렉터리에 위치한 kilo.js 에 함수

추가

7.9 자바스크립트로 폰 제어하기

33/61

7.9.1 비프 , 진동 , 경고 커스텀 경고를 보여주는 기능

• ~/Desktop/KiloGap/assets/www/ 디렉터리에 위치한 kilo.js 에 함수 추가 (2)


34/61

7.9.1 비프 , 진동 , 경고 커스텀 경고를 보여주는 기능 함수 설명

• ➊ checkBudget() 함수의 시작 부분– sessionStorage 에 저장된 값 (Settings panel 에서 사용자가

입력한 값 ) 에 currentDate 변수를 초기화하고 , localStorage 에 저장된 값 (Dates 패널에서 사용자가 건드린 데이터 ) 에 dailyBudget 변수 설정

• ➋ 현재 날짜의 총 칼로리를 계산하기 위해 준비된 데이터베이스 처리 시작• ➌ 트랜잭션 오브젝트의 executeSql() 메소드 실행• executeSql() 메소드의 네 개 매개변수 검증• ➍ 첫 번째 매개변수는 현재 날짜에 부합하는 항목의 칼로리 열의 모든 값을

더하는 SUM 함수를 이용하는 준비된 SQL 정의• ➎ 두 번째 매개변수는 이전 줄 위의 준비된 명령문에 있는 물음표 (?) 를

교체하는 단일값 배열• ➏ 세 번째 매개변수는 SQL 쿼리가 성공적으로 완료되면 호출되는 익명의

함수


35/61

7.9.1 비프 , 진동 , 경고 커스텀 경고를 보여주는 기능 함수 설명 (2)

• 이후부터는 세 번째 매개변수로 넘겨진 익명 함수 안에서 일어나는 일• ➐ 결과의 첫 번째 행으로부터 현재 행까지의 값을 담고 있음

– 열의 합을 요청하므로 , 데이터베이스가 행 하나를 반환– 결과 셋의 기록은 결과 오브젝트의 행 프로퍼티의 item() 메소드로

접근할 수 있으며 , 행은 제로베이스 ( 즉 첫 번째 행은 0) 로 시작됨• ➑ 현재의 하루 칼로리 총합이 Settings 패널에서 특정한 일일 공급량 범위보다 큰지 검사해 크다면 이어지는 블록이 실행

• ➒ 사용자가 그의 칼로리 공급량보다 얼마나 초과됐는지 계산• ➓ 사용자에게 디스플레이할 메시지를 만듦• 11) navigator.notification 오브젝트의 beep(1) 과 vibrate() 메소드들 호출하려고 시도하는 try/catch 블록

– 이 메소드는 폰갭에서만 실행– 브라우저에서 앱을 실행하면 , execution 은 catch 블록으로 점프


36/61

7.9.1 비프 , 진동 , 경고 커스텀 경고를 보여주는 기능 함수 설명 (3)

• 12) navigator.notification 오브젝트의 alert() 메소드를 호출 시도하는 try/catch 블록

– 이 메소드는 폰갭에만 존재• 13) 네 번째 매개변수는 SQL 에러 발생 시 호출될 SQL 에러 핸들러 이름• 브라우저에서는 표준 자바스크립트 경고와 같은 유형을 펄백 fallback• 폰갭의 경고는 [ 그림 7-16] 처럼 타이틀과 버튼 이름 설정 가능• 네이티브 자바스크립트 경고는 설정 못하며 방식은 모달 방식 ( 그림 7-

17). • 스크립트 실행은 네이티브 경고를 호출한 시점에 멈추지만 , 폰갭

버전에서는 계속 실행– 앱의 특성에 따라 문제가 될 수도 안될 수도 있으니 둘 간의 차이를

알아둘 것 !!!


37/61

7.9.1 비프 , 진동 , 경고 커스텀 경고를 보여주는 기능 함수 설명 (4) 폰갭과 네이티브 자바스크립트의 경고 방식 비교 화면


38/61

7.9.1 비프 , 진동 , 경고 checkBudget() 함수 완료 후 createEntry() 함수의 성공 콜백 코드

추가


39/61

7.9.1 비프 , 진동 , 경고 kilo.js 수정후 다시 컴파일해 폰에 설치

• 폰에 설치하는 대신 에뮬레이터를 이용하려면 – d 를 – e 로 입력• ant debug• adb -d install -r ~/Desktop/KiloGap/bin/Kilo-debug.apk


40/61

7.9.2 위치 정보 항목이 만들어질 때 장소를 저장하도록 Kilo 를 업데이트

• 정보를 갖게 되면 , 내장된 Maps 앱을 열고 항목이 만들어진 지점에서 핀을 떨어뜨리는 맵 로케이션 버튼을 추가

•첫 번째 단계에서 정보를 저장하기 위해 데이터베이스에 위도 , 경도 열 추가합니다 .

– ~/Desktop/KiloGap/assets/www/kilo.js 에 CREATE TABLE 명령문을 다음과 같이 교체


41/61

7.9.2 위치 정보 현재의 위도와 경도를 확정하기 위해 폰의 위치정보 geolocation

기능을 이용하기 위한 , createEntry() 함수를 재작성• kilo.js 에 있는 createEntry() 함수를 다음과 같이 교체


42/61

7.9.2 위치 정보 createEntry() 함수 변경사항 설명

• ➊ createEntry() 함수 시작• ➋ geolocation 오브젝트의 getCurrentPosition() 함수를 호출

– 성공 및 에러 함수 , 두 개의 콜백 함수에 결과 전달• ➌ 성공 콜백의 시작 부분

– 단일 매개변수 ( 예에서는 position) 를 받음• ➍ position 오브젝트로부터 latitude 와 longitude 좌표 가져옴• ➎ insertEntry() 함수로 latitude 와 longitude 좌표 전달• ➏ 에러 콜백의 시작 부분• ➐ 에러 콜백은 위치 정보 확보에 실패하는 경우에만 호출

– 예를 들어 사용자가 앱으로 하여금 사용자의 현재 위치를 액세스하지 못하게 하면 이때는 매개변수 없이 insertEntry() 함수를 호출

• ➑ 폼의 ‘ Submit’ 버튼을 클릭하는 기본 탐색 행동을 막기 위해 false 리턴


43/61

7.9.2 위치 정보 insertEntry() 함수

• 데이터베이스에 항목을 만들게 되므로 kilo.js 에 다음 내용을 추가


44/61

7.9.2 위치 정보 insertEntry() 함수 설명

• ➊ latitude 와 longitude 의 값이 전달되도록 하는 insertEntry() 함수의 시작

– 전달되지 않으면 정의되지 않는 변수• ➋ sessionStorage 에서 currentDate 를 얻음

– 그 값은 사용자가 Dates 패널로 이동하기 위해 Date 패널의 아이템을 누를 때 그것의 값이 세팅

– New Entry 패널을 드러내기 위해 + 버튼을 누를 때 , 이 값은 현재 선택된 Date 패널 아이템으로 세팅

• ➌ createEntry 폼에서 calories 값을 받음• ➍ createEntry 폼에서 food 값을 받음• ➎ 데이터베이스 트랜잭션 시작• ➏ 단일 매개변수로서 transaction 오브젝트를 갖고 , transaction 속으로

콜백 함수 전달• ➐ transaction 오브젝트의 executeSql() 메소드 호출• ➑ 데이터 placeholder 로 ? 마크를 이용해 SQL 준비문을 정의


45/61

7.9.2 위치 정보 insertEntry() 함수 설명

• ➒ 데이터 표시자를 위한 값의 배열을 전달합니다 . latitude 와 longitude가 insertEntry() 함수에 전달되지 않으면 , 정의되지 못함

• ➓ 성공 콜백 함수 정의• 11) 에러 콜백 함수 정의


46/61

7.9.2 위치 정보 Kilo 가 실제로 이러한 장소값을 저장하고 있음을 확인하기 위해

저장된 값을 표시할 Inspect Entry 패널을 추가• 패널에 항목이 만들어진 곳을 보여주는 ‘ Map Location’ 버튼을 추가• index.html 의 클로징 바디 태그인 (</body>) 바로 앞에 다음 내용 추가


47/61

7.9.2 위치 정보 저장된 값을 표시할 Inspect Entry 패널 추가 코드 설명

• ➊ 커서가 필드 안에 있으면 전화 키보드를 호출하게 , 입력 형식 tel 로 지정

– 키보드는 수치 데이터 필드에 훨씬 더 적합한 장점• ➋ Latitude 와 longitude 필드는 수정이 가능하도록 폼 안에 포함

– 사용자가 편집할 수 있음을 의미– 수동으로 위치값을 입력해서 Map Location 버튼을 시험할 수

있으므로 개발 도중에 테스트하는데 편리한 부분• ➌ 이 시점에서 클릭하면 ‘ Map Location’ 버튼은 아무 결과도 없음 .


48/61

7.9.2 위치 정보 Inspect Entry 패널로 이동하는 방법을 사용자에게 제공

• 사용자가 목록에서 항목을 눌렀을 때 Inspect Entry 패널은 화면의 바닥에서 위로 슬라이드하도록 함

– 클릭 이벤트 핸들러 생성– Delete 버튼 위의 클릭들이 처리되는 방식 수정


49/61


• kilo.js 의 refreshEntries() 함수에 다음의 강조된 3개의 변경 내용 추가


50/61


• kilo.js 의 refreshEntries() 함수에 다음의 강조된 3개의 변경 내용 추가 (2)


51/61

7.9.2 위치 정보 kilo.js 의 refreshEntries() 함수 변경사항 설명

• ➊ 이벤트의 stopPropagation() 메소드를 액세스하기 위해 호출되는 함수에 e(event 의 약자 ) 매개변수 추가

– e 매개변수를 추가해야 e.stopPropagation() 를 정의• ➋ Delete 버튼 클릭 핸들러에 추가된 e.stopPropagation(); 은

브라우저에 클릭 이벤트가 부모 엘리먼트로 DOM 을 실행하지 못하게 통보– 행 자체에 클릭 핸들러를 추가했기 때문에 중요한 부분 ! – stopPropagation() 을 호출하지 않으면 , 사용자가 Delete

버튼을 눌렀을 때 Delete 버튼 핸들러와 entryClickHandler 가 작동

• ➌ newEntryRow.click(entryClickHandler); 는 항목이 눌렸을 때 브라우저에 entryClickHandler 를 호출


52/61

7.9.2 위치 정보 kilo.js 에 entryClickHandler() 함수 추가


53/61

7.9.2 위치 정보 kilo.js 에 추가된 entryClickHandler() 함수 설명

• ➊ 사용자가 누른 엔트리로부터 entryId 를 받아 세션 스토리지에 저장• ➋ 데이터베이스 트랜잭션 시작• ➌ 단일 매개변수로서 transaction 오브젝트를 갖고 콜백 함수를

트랜잭션에 전달• ➍ 트랜잭션 오브젝트의 executeSql() 메소드 호출• ➎ 데이터 자리 표시자로 ?를 가지고 SQL 준비문 정의• ➏ 자리 표시자를 위한 단일 요소 배열 전달• ➐ 성공 콜백 함수 시작• ➑ 결과의 첫 번째 행을 받음• ➒ 일부 변수를 행의 값들을 기반으로 세팅• ➓ 폼 필드의 값들을 변수들을 기반으로 세팅


54/61

7.9.2 위치 정보 kilo.js 에 추가된 entryClickHandler() 함수 설명 (2)

• 11) #mapLocation 버튼에 클릭 핸들러를 붙임– 이 함수는 표준 Google Maps URL 에 윈도우 위치를 세팅– Maps 앱을 이용할 수 있으면 , Maps 앱이 실행– 그렇지 않으면 URL 은 브라우저에서 로드– Z 값은 처음의 줌 레벨을 설정합니다 . @ 심볼 앞의 문자열은 그

위치에서 떨어진 핀의 이름으로서 쓰여질 겁니다 . latitude 와 longitude 값은 콤마로 구분해 여기 보여진 순서대로 나타나야 함

• 12) Inspect Entry 패널이 뷰 속으로 슬라이드 업하도록 하는 jQTouch 오브젝트의 goTo() 메소드를 호출

• 13) 에러 콜백 함수를 정의

변경된 내용 테스트• 변경 사항을 KiloGap 디렉터리로 옮긴 뒤 폰에서 앱을 다시 컴파일 & 설치

– ant debug– adb -d install -r ~/Desktop/KiloGap/bin/Kilo-debug.apk


55/61

7.9.3 가속도계 폰을 흔들어 목록의 마지막 항목을 복사하도록 Kilo 를 설정 kilo.js 의 끝에 다음 함수 추가


56/61

7.9.3 가속도계 폰을 흔들어 목록의 마지막 항목을 복사하는 함수 설명

• ➊ entryId 가 함수로 전달되었는지를 확인– 만약 아니라면 사용자에게 알려줌

• ➋ 일반적인 데이터베이스 트랜잭션 단계 시작• ➌ 특정된 entryId 로부터 값들을 복사하는 INSERT 문 정의

– INSERT 값의 목록을 이용하는 대신 , 특정된 entryId 를 위한 SELECT 쿼리의 결과들로부터 값을 받아옴

• ➍ SELECT 쿼리 안의 ?를 entryId 의 값으로 교체해 entryId 를 준비된 명령문 속으로 전달

• ➎ 성공하면 새로이 복사된 항목을 보여줄 refreshEntries() 를 호출• ➏ 에러가 일어나면 표준 SQL 에러 핸들러를 호출


57/61

7.9.3 가속도계 앱에 언제 가속도계 보기를 시작하고 멈춰야하는지 전달

• Date 패널이 안쪽으로 슬라이딩하면 시작• 바깥쪽으로 슬라이딩하면 멈추도록 설정• kilo.js 의 document ready 함수에 내용 추가


58/61

7.9.3 가속도계 kilo.js 의 document ready 함수에 추가한 내용 설명

• ➊ #date 패널의 pageAnimationEnd 이벤트에 익명의 핸들러 바인드– 매개변수들로 이벤트와 추가적인 정보 전달

• ➋ info 오브젝트의 direction 프로퍼티와 in 이 동등한지 확인– 동등하다면 startWatchingShake() 함수 호출

• ➌ #date 패널의 pageAnimationBegin 이벤트에 익명의 함수를 바인드– 매개변수들로 이벤트와 추가적인 정보 전달

• ➍ info 오브젝트의 direction 프로퍼티와 out 이 같은지 체크– 같다면 , stopWatchingShake() 함수 호출


59/61

7.9.3 가속도계 startWatchingShake() 와 stopWatchingShake() 함수 작성 -

kilo.js


60/61

7.9.3 가속도계 startWatchingShake() 와 stopWatchingShake() 함수 설명

• ➊ startWatchingShake() 함수 시작– #date 패널이 뷰에서 애니메이팅을 완료하면 호출

• ➋ success 핸들러 정의– 단일 매개변수로 coordinates 오브젝트를 받음

• ➌ 흔들기의 문턱값 정의– 숫자가 클수록 사용자가 흔들기가 더 어려움

• ➍ Coordinates 의 어느 것이 문턱값을 초과했는지 검사• ➎ #date 패널 위의 마지막 항목의 entryId 를 받음• ➏ dupeEntryById() 함수 호출• ➐ 빈 에러 핸들러 정의• ➑ accelerometer 오브젝트의 watchAcceleration() 메소드로 전달할 옵션 오브젝트 정의


61/61

7.9.3 가속도계 startWatchingShake() 와 stopWatchingShake() 함수 설명 (2)

• ➒ 옵션 오브젝트의 frequency 속성에서 가속도계로부터 데이터를 받는 지연 시간을 밀리초 (1/1000) 단위로 설정

• ➓ 매개변수들로 success 핸들러 , 에러 핸들러 , 옵션 오브젝트를 전달하면서 , accelerometer 오브젝트의 watchAcceleration() 메소드를 호출

– sessionStorage.watchId 에 결과를 저장하는데 , 이는 stopWatchingShake() 함수를 위해 필요

• 11) stopWatchingShake() 시작– 뷰 밖으로 #date 패널이 애니메이팅을 시작할 때 호출

• 12) 세션 스토리지에서 watchId 를 전달– accelerometer 오브젝트의 clearWatch() 메소드 호출


Building 안드로이드 웹앱 with HTML, CSS, Javascript

Ch 07. 네이티브앱으로 가자

Documents