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

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

2. 7.1 폰갭 소개 • 폰갭이란? • Nitobi(http://www.nitobi.com/)에서 만든 오픈소스 개발 툴 • 웹앱과 모바일 디바이스 사이를 연결해주는 다리 역할 • 주요 플랫폼에 대한 네이티브앱 프로젝트 템플릿으로 구성 • 프로젝트는 크롬 없이도 실행 가능한 웹앱 • 폰갭을 이용하면 자신의 웹앱에 자바스크립트 코드를 추가해 아이폰, 넥서스 원, 팜 프리 등에서 카메라에 접근 가능 • HTML, CSS, 자바스크립트로 작성한 앱을 네이티브앱으로 바꿀 수 있음 • 각 플랫폼의 앱스토어에 등록 가능 • 현재 아이폰, 안드로이드, 블랙베리, 팜, 심비안, MS 윈도우 모바일을 지원하며, 윈도우 폰 7 지원 기능은 개발 중

3. 7.2 안드로이드 SDK 내려받기 • 안드로이드 SDK를 내려받아 설치하는 절차 • 1) 안드로이드 SDK 내려받기 (폰갭과 연동되므로 필수적인 절차) • http://developer.android.com/sdk/index.html에서 적합한 패키지 내려 받기 • MS 윈도우나 리눅스를 사용한다면 자바를 먼저 설치해야 함 • http://java.sun.com/javase/downloads

4. 7.2 안드로이드 SDK 내려받기 • 안드로이드 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. 7.2 안드로이드 SDK 내려받기 • 안드로이드 SDK를 내려받아 설치하는 절차 (3) • 6) 안드로이드 SDK와 AVD 매니저 창이 열릴 때, 왼쪽 사이드 바의 ‘Available Packages’ 클릭

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

7. 7.2 안드로이드 SDK 내려받기 • 안드로이드 SDK를 내려받아 설치하는 절차 (5) • 8) 윈도우의 오른쪽 하단 코너에 있는 ‘Install Selected’ 버튼을 클릭 • 9) 라이선스 조항에 동의하는지를 묻는 창 팝업 • 내용을 읽은 후 ‘Accept’ 옆의 박스를 선택한 후 ‘Install’ 버튼을 클릭 • 10) 내려받기가 완료되면, 내려받기 Close 버튼을 눌러 창을 닫음 • 11) 맥 OS X에서는 안드로이드앱에서 빠져 나오기 위해 안드로이드 메뉴에서 ‘Quit Android’ 선택 • 윈도우와 리눅스에서는 창을 그냥 닫음

8. 7.3 폰갭 내려받기 • 폰갭 내려받기 • 1) GitHub(http://github.com/jonathanstark/phonegap-android)의 안드로이드 폰갭 내려 받기 페이지로 이동 • [그림 7-5]에서 보이는 ‘Download’ 버튼을 클릭 • 2) 아카이브 포맷을 선택하라고 나올 때, Download.zip 선택 • 내려받기 그래픽은 파일이 내려받기 완료된 후까지도 열린 상태로 유지 • 3) 원하는 디렉터리에 내려받기한 아카이브의 압축 풀기

9. 7.4 환경 설정 • 연동 환경 설정 • 안드로이드 SDK와 폰갭은 서로를 찾을 수 있어야 함 • 이를 위해 PATH 환경 변수 설정 • PATH 란? • 어디에서 다른 프로그램을 찾아야 하는지 프로그램들에게 알려주는 디렉터리 목록 • 명령행에 명령어(grep이나 findstr 같은)를 입력하면, 컴퓨터는 명령을 실행하기 위해 PATH에서 디렉터리를 하나씩 살펴보게 됨 • 윈도우에서는 C:\Windows\System32;C:\Windows처럼 PATH 항목을 세미콜론으로 구분 • 맥이나 리눅스에서는 /usr/bin:/usr/local/bin 처럼 콜론 구분

10. 7.4 환경 설정 • PATH 등록법 • 윈도우 아래에 PATH에 디렉터리를 추가하려면? • 컴퓨터의 시스템 등록정보 열기 • 내 컴퓨터’에서 마우스 오른쪽 버튼 클릭해 ‘등록정보’선택 • 비스타나 윈도우 7에서는 ‘속성 → 고급 시스텝 설정 → 고급’ • 윈도우 XP에서는 ‘고급’ 탭 클릭 • 다이얼로그 박스가 나타나면 ‘환경 변수(N)...’ 클릭 • 시스템 변수에서, PATH 찾아 더블클릭 • 커서를 움직인 후 다음 내용 추가 • ;C:\Android\tools;C:\PhoneGap\bin • Android SDK(C:\Users\yourusername\Desktop\Android 같은)의 위치를 C:\Android로, 폰갭을 저장한 위치를 C:\PhoneGap으로 교체 • 확인 버튼 클릭하고 남아있는 다이얼로그 박스들 닫음

11. 7.4 환경 설정 • 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로 빠져나감

12. 7.5 안드로이드 가상장치 생성하기 • 안드로이드 가상장치 생성하기 • 가상 환경에서 코드를 테스트해주는 디바이스 에뮬레이터 만들기 • 1) 이용할 수 있는 타겟 목록을 보기 위해 다음 내용 입력 • android list targets • 플랫폼 모두를 내려받은 경우 위 명령어를 실행하면 4가지 옵션이 나타남 • 안드로이드 2.2(말하자면 android-7)의 결과에 목록된 일련의 ID에 주목 • 이 SDK는 이 책이 집필된 시점에서 가장 널리 퍼진 플랫폼

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

14. 7.5 안드로이드 가상장치 생성하기 • 안드로이드 가상장치 생성하기 • 2 ) 나만의 AVD 생성 • android create avd -n mySim -t android-8 • android-8 플랫폼을 타겟(-t)으로 하는 ‘mySim’이라는 이름(-n)을 가진 가상장치(avd)를 만들라고 안드로이드에게 명령 • 3) 에뮬레이터 실행 • emulator -avd mySim • 방금 설치한 안드로이드 가상장치를 실행하기 위해 emulator 명령어 이용 • -avd 플래그는 이전 단계에서 AVD를 만들었을 때 여러분이 선택한 이름

15. 7.5 안드로이드 가상장치 생성하기 • 안드로이드 가상장치 생성하기 • 에뮬레이터가 초기화돼 폰의 홈 스크린에 표시 • 첫 실행은 1~2분 정도 걸림

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

17. 7.6 KiloGap 만들기 • 웹앱을 네이티브앱으로 변환 • 2) 프롬프트에 앱 이름 입력 • 이 이름은 안드로이드폰의 다양한 위치에서 사용자에게 보여짐 • 3) 프롬프트에서 앱의 패키지(실행 파일) 이름 입력 • 패키지의 이름은 앱의 고유 식별자 기능 • 일반적으로 앱 패키지 이름으로 역 도메인명 • Ex) 필자는 com.jonathanstark.kilo로 입력 • 4) 프롬프트에서 웹앱을 위해 HTML, CSS, 자바스크립트 파일을 저장한 컴퓨터의 폴더 경로 입력 • Ex) ~/Desktop/www

18. 7.6 KiloGap 만들기 • 웹앱을 네이티브앱으로 변환 • 5) 프롬프트에서 프로젝트 디렉터리 경로 입력 • droidgap이 이 디렉터리를 만들기 때문에 이미 존재하는디렉토리는 안됨 • Ex) ~/Desktop/KiloGap • 6) 프롬프트에 타겟팅하는 안드로이드 SDK 플랫폼 입력 • 모든 안드로이드 SDK 플랫폼을 설치하기 위해 위의 모든 지시를 따랐다면, 여러분의 타겟 플랫폼 ID는 android-8 • 다른 플랫폼을 타겟팅하기 원한다면, 플랫폼 ID를 공백으로 남겨두고 엔터를 치고 나오면, 가용한 플랫폼 ID 목록이 뜸 • 이 목록에서, 각 항목의 첫 번째 줄은 두 문자열(예를 들어 id: 2 혹은 “android-4”) 모두가 보이는 ID를 갖게 됨 • droidgap 프롬프트에서 인용부호(“) 없이 android-4와 같은 방식으로 ID의 문자열 버전을 입력

19. 7.6 KiloGap 만들기 • 웹앱을 네이티브앱으로 변환 • 타겟 SDK ID를 입력한 결과 화면 • droidgap은 프로젝트를 생성하고, 지정한 결과 디렉터리에 파일 생성

20. 7.6 KiloGap 만들기 • 웹앱을 네이티브앱으로 변환 • ~/Desktop/KiloGap/assets/www/ 명령 실행 • droidgap이 저장한 phonegap.js 파일 발견 • 자바스크립트를 통해 네이티브 디바이스의 기능을 쓸 수 있게 폰갭이 제공하는 파일 • phonegap.js를 사용하려면, 다음 코드를 index.html 파일의 head 섹션에 꼭 포함시켜야 함

21. 7.7 에뮬레이터에 KiloGap 설치하기 • 에뮬레이터에서 네이티브 안드로이드앱 테스트 • 1) 터미널에 다음 명령어를 입력해 에뮬레이터 실행 • emulator -avd mySim • 이 창을 통해 다른 명령을 실행하지 않을 것이므로, 최소화 • 2) 새로운 터미널 창을 열고 KiloGap 디렉터리로 이동 • cd ~/Desktop/KiloGap • 3) 디버깅을 활성화하고 앱 컴파일 • ant debug

22. 7.7 에뮬레이터에 KiloGap 설치하기 • 에뮬레이터에서 네이티브 안드로이드앱 테스트 • 3번 단계까지 이상 없이 진행되었다면 볼 수 있는 화면

23. 7.7 에뮬레이터에 KiloGap 설치하기 • 에뮬레이터에서 네이티브 안드로이드앱 테스트 • 생성된 파일 확인 • Kilo-debug.apk라는 이름의 실행 가능한 바이너리

24. 7.7 에뮬레이터에 KiloGap 설치하기 • 에뮬레이터에서 네이티브 안드로이드앱 테스트 • 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. 7.7 에뮬레이터에 KiloGap 설치하기 • 에뮬레이터에서 네이티브 안드로이드앱 테스트 • 실행하려면 앱 런처에 kilo를 옮겨 해당 앱 선택

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

27. 7.7.1 화면의 최고 높이 이용하기 • 화면의 최고 높이 이용하기 • 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 지시어를 추가해 창을 채움

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

29. 7.7.2 앱 아이콘 최적화하기 • 나만의 아이콘 사용하기 • 원하는 이미지를 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 파일을 대체하면 안드로이드는 다양한 디바이스에서 적절하게 표현

30. 7.7.2 앱 아이콘 최적화하기 • 나만의 아이콘 사용하기 • 앱을 다시 컴파일하고 설치 • cd ~/Desktop/KiloGap • ant debug • adb -d install -r bin/Kilo-debug.apk • 프로세스가 완료되면 폰의 런처에서 새로운 아이콘을 볼 수 있음

31. 7.8 안드로이드폰에 KiloGap 설치하기 • 디바이스에 직접 설치 • 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)를 설치하라는 의미

32. 7.9 자바스크립트로 폰 제어하기 • 7.9.1 비프, 진동, 경고 • 네이티브 디바이스의 장치를 호출하여 앱의 완성도를 높이는 효과 • 사용자가 자신의 하루 칼로리 양의 초과상태 엔트리를 만들 때 앱이 삑 소리를 내고, 진동하고, 커스텀 경고를 보여주는 기능 • ~/Desktop/KiloGap/assets/www/ 디렉터리에 위치한 kilo.js에 함수 추가

33. 7.9 자바스크립트로 폰 제어하기 • 7.9.1 비프, 진동, 경고 • 커스텀 경고를 보여주는 기능 • ~/Desktop/KiloGap/assets/www/ 디렉터리에 위치한 kilo.js에 함수 추가 (2)

34. 7.9 자바스크립트로 폰 제어하기 • 7.9.1 비프, 진동, 경고 • 커스텀 경고를 보여주는 기능 함수 설명 • ➊ checkBudget() 함수의 시작 부분 • sessionStorage에 저장된 값(Settings panel에서 사용자가 입력한 값)에 currentDate 변수를 초기화하고, localStorage에 저장된 값(Dates 패널에서 사용자가 건드린 데이터)에 dailyBudget 변수 설정 • ➋ 현재 날짜의 총 칼로리를 계산하기 위해 준비된 데이터베이스 처리 시작 • ➌ 트랜잭션 오브젝트의 executeSql() 메소드 실행 • executeSql() 메소드의 네 개 매개변수 검증 • ➍ 첫 번째 매개변수는 현재 날짜에 부합하는 항목의 칼로리 열의 모든 값을 더하는 SUM 함수를 이용하는 준비된 SQL 정의 • ➎ 두 번째 매개변수는 이전 줄 위의 준비된 명령문에 있는 물음표(?)를 교체하는 단일값 배열 • ➏ 세 번째 매개변수는 SQL 쿼리가 성공적으로 완료되면 호출되는 익명의 함수

35. 7.9 자바스크립트로 폰 제어하기 • 7.9.1 비프, 진동, 경고 • 커스텀 경고를 보여주는 기능 함수 설명 (2) • 이후부터는 세 번째 매개변수로 넘겨진 익명 함수 안에서 일어나는 일 • ➐ 결과의 첫 번째 행으로부터 현재 행까지의 값을 담고 있음 • 열의 합을 요청하므로, 데이터베이스가 행 하나를 반환 • 결과 셋의 기록은 결과 오브젝트의 행 프로퍼티의 item() 메소드로 접근할 수 있으며, 행은 제로베이스(즉 첫 번째 행은 0)로 시작됨 • ➑ 현재의 하루 칼로리 총합이 Settings 패널에서 특정한 일일 공급량 범위보다 큰지 검사해 크다면 이어지는 블록이 실행 • ➒ 사용자가 그의 칼로리 공급량보다 얼마나 초과됐는지 계산 • ➓ 사용자에게 디스플레이할 메시지를 만듦 • 11) navigator.notification 오브젝트의 beep(1)과 vibrate() 메소드들 호출하려고 시도하는 try/catch 블록 • 이 메소드는 폰갭에서만 실행 • 브라우저에서 앱을 실행하면, execution은 catch 블록으로 점프

36. 7.9 자바스크립트로 폰 제어하기 • 7.9.1 비프, 진동, 경고 • 커스텀 경고를 보여주는 기능 함수 설명 (3) • 12)navigator.notification 오브젝트의 alert() 메소드를 호출 시도하는 try/catch 블록 • 이 메소드는 폰갭에만 존재 • 13)네 번째 매개변수는 SQL 에러 발생 시 호출될 SQL 에러 핸들러 이름 • 브라우저에서는 표준 자바스크립트 경고와 같은 유형을 펄백fallback • 폰갭의 경고는 [그림 7-16]처럼 타이틀과 버튼 이름 설정 가능 • 네이티브 자바스크립트 경고는 설정 못하며 방식은 모달 방식 (그림 7-17). • 스크립트 실행은 네이티브 경고를 호출한 시점에 멈추지만, 폰갭 버전에서는 계속 실행 • 앱의 특성에 따라 문제가 될 수도 안될 수도 있으니 둘 간의 차이를 알아둘 것!!!

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

38. 7.9 자바스크립트로 폰 제어하기 • 7.9.1 비프, 진동, 경고 • checkBudget() 함수 완료 후 createEntry() 함수의 성공 콜백 코드 추가

39. 7.9 자바스크립트로 폰 제어하기 • 7.9.1 비프, 진동, 경고 • kilo.js 수정후 다시 컴파일해 폰에 설치 • 폰에 설치하는 대신 에뮬레이터를 이용하려면 –d를 –e로 입력 • ant debug • adb -d install -r ~/Desktop/KiloGap/bin/Kilo-debug.apk

40. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • 항목이 만들어질 때 장소를 저장하도록 Kilo를 업데이트 • 정보를 갖게 되면, 내장된 Maps 앱을 열고 항목이 만들어진 지점에서 핀을 떨어뜨리는 맵 로케이션 버튼을 추가 • 첫 번째 단계에서 정보를 저장하기 위해 데이터베이스에 위도, 경도 열 추가합니다. • ~/Desktop/KiloGap/assets/www/kilo.js에 CREATE TABLE 명령문을 다음과 같이 교체

41. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • 현재의 위도와 경도를 확정하기 위해 폰의 위치정보geolocation 기능을 이용하기 위한, createEntry() 함수를 재작성 • kilo.js에 있는 createEntry() 함수를 다음과 같이 교체

42. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • createEntry() 함수 변경사항 설명 • ➊ createEntry() 함수 시작 • ➋ geolocation 오브젝트의 getCurrentPosition() 함수를 호출 • 성공 및 에러 함수, 두 개의 콜백 함수에 결과 전달 • ➌ 성공 콜백의 시작 부분 • 단일 매개변수(예에서는 position)를 받음 • ➍ position 오브젝트로부터 latitude와 longitude 좌표 가져옴 • ➎ insertEntry() 함수로 latitude와 longitude 좌표 전달 • ➏ 에러 콜백의 시작 부분 • ➐ 에러 콜백은 위치 정보 확보에 실패하는 경우에만 호출 • 예를 들어 사용자가 앱으로 하여금 사용자의 현재 위치를 액세스하지 못하게 하면 이때는 매개변수 없이 insertEntry() 함수를 호출 • ➑ 폼의 ‘Submit’ 버튼을 클릭하는 기본 탐색 행동을 막기 위해 false 리턴

43. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • insertEntry() 함수 • 데이터베이스에 항목을 만들게 되므로 kilo.js에 다음 내용을 추가

44. 7.9 자바스크립트로 폰 제어하기 • 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. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • insertEntry() 함수 설명 • ➒ 데이터 표시자를 위한 값의 배열을 전달합니다. latitude와 longitude가 insertEntry() 함수에 전달되지 않으면, 정의되지 못함 • ➓ 성공 콜백 함수 정의 • 11) 에러 콜백 함수 정의

46. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • Kilo가 실제로 이러한 장소값을 저장하고 있음을 확인하기 위해 저장된 값을 표시할 Inspect Entry 패널을 추가 • 패널에 항목이 만들어진 곳을 보여주는 ‘Map Location’ 버튼을 추가 • index.html의 클로징 바디 태그인 (</body>) 바로 앞에 다음 내용 추가

47. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • 저장된 값을 표시할 Inspect Entry 패널 추가 코드 설명 • ➊ 커서가 필드 안에 있으면 전화 키보드를 호출하게, 입력 형식 tel로 지정 • 키보드는 수치 데이터 필드에 훨씬 더 적합한 장점 • ➋ Latitude와 longitude 필드는 수정이 가능하도록 폼 안에 포함 • 사용자가 편집할 수 있음을 의미 • 수동으로 위치값을 입력해서 Map Location 버튼을 시험할 수 있으므로 개발 도중에 테스트하는데 편리한 부분 • ➌ 이 시점에서 클릭하면 ‘Map Location’ 버튼은 아무 결과도 없음.

48. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • Inspect Entry 패널로 이동하는 방법을 사용자에게 제공 • 사용자가 목록에서 항목을 눌렀을 때 Inspect Entry 패널은 화면의 바닥에서 위로 슬라이드하도록 함 • 클릭 이벤트 핸들러 생성 • Delete 버튼 위의 클릭들이 처리되는 방식 수정

49. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • Inspect Entry 패널로 이동하는 방법을 사용자에게 제공 • kilo.js의 refreshEntries() 함수에 다음의 강조된 3개의 변경 내용 추가

50. 7.9 자바스크립트로 폰 제어하기 • 7.9.2 위치 정보 • Inspect Entry 패널로 이동하는 방법을 사용자에게 제공 • kilo.js의 refreshEntries() 함수에 다음의 강조된 3개의 변경 내용 추가 (2)