PubNub Developer Relations이 튜토리얼을 시작하기 전에 PubNub 계정에 가입하여 API 키를 받으세요. 확장할 때까지 비용이 한 푼도 들지 않는 넉넉한 샌드박스 티어를 제공합니다!
지리적 위치 및 추적 기능은 지속적으로 발전하고 있습니다. 정적인 지도를 넘어 인터랙티브하고 동적인 API 매핑 기술의 영역으로 나아가고 있습니다. 이러한 변화는 온디맨드 경제에서 사물 인터넷에 이르기까지 모든 산업에서 지리적 위치 API가 필수 불가결한 역할을 담당하고 있음을 강조합니다.
실시간 추적은 확실히 광범위한 그물을 드리우고 있지 않나요?
Google 지도 추적 튜토리얼 개요
이 튜토리얼은 구글 지도 자바스크립트 API와 PubNub을 사용하여 웹 및 모바일 웹용 실시간 지도를 구축하는 방법에 대한 4부로 구성된 튜토리얼입니다. 앱을 설정하는 기본 사항부터 시작하여 이후 파트에서 실시간 위치 정보 기능을 추가합니다.
이 과정을 마치면 자바스크립트 Google Maps API와 PubNub로 구동되는 지도 마커, 기기 위치 추적 및 비행 경로가 포함된 기본적인 자바스크립트 위치 추적 앱을 만들 수 있습니다.
실시간 위치 API 설정
튜토리얼 에셋
이 튜토리얼에서는 데스크톱 또는 모바일 기기에서 최신 에버그린 브라우저로 작업하고 있다고 가정합니다.
PubNub 설정
시작하려면 먼저 PubNub 게시 및 구독 키가 필요합니다. 계정이 없는 경우 여기에서 가입할 수 있으며, 게시/구독 키는 관리자 대시보드에서 사용할 수 있습니다. 이 키는 UUID와 비슷하며 각각 "pub-c-" 및 "sub-c-" 접두사로 시작합니다.
공개/서브 키를 받으면 Android 애플리케이션(및 동일한 채널을 사용하여 통신하는 다른 모든 시스템)을 나타낼 새 PubNub 애플리케이션을 만듭니다. PubNub 애플리케이션에는 애플리케이션이 지정된 기능에 사용할 수 있는 게시 및 구독 키가 포함됩니다.
Google 지도 API 설정
Google 지도와 통합하려면 Google 지도 API 키를 만들어야 합니다. 여기 시작하기 가이드를 사용하여 생성하는 것이 좋습니다. 이렇게 하면 원하는 웹 앱에 잠글 수 있는 고유한 API 키가 생성됩니다. 여러 개의 프로젝트를 만들기 시작하면 여기에서 Google API 콘솔에서 자격 증명을 관리할 수 있습니다.
API 키를 생성한 후 Google 클라우드 콘솔에서 '지도 자바스크립트 API'를 활성화하는 것을 잊지 마세요.
실시간 위치 API 개요
이 HTML5 및 JavaScript 샘플 애플리케이션에서 PubNub은 원격 객체의 위치(위도 및 경도)가 변경될 때 웹 애플리케이션이 수신되는 이벤트를 수신할 수 있는 실시간 통신 기능을 제공합니다.
우리가 사용하는 핵심 PubNub 기능은 실시간 메시징입니다. 우리 애플리케이션은 위치 변경 이벤트를 송수신하기 위해 PubNub 채널을 사용합니다. 이 예제에서는 동일한 애플리케이션이 위치 이벤트를 송수신하므로 게시자이자 구독자라고 합니다. 애플리케이션에서 퍼블리셔(발신자) 시스템은 구독자(수신자) 시스템과 다를 수 있습니다.
Google 지도 개요
이 튜토리얼에서는 JavaScript Google 지도 API와 HTML5 지도 위젯을 사용합니다. HTML5 지도 위젯은 사용자가 구성한 주변 지역의 지도를 표시합니다. 지도 크기, 지도 중심 위도 및 경도, 확대/축소 수준, 지도 스타일 및 기타 옵션을 초기 기본 설정에 맞게 구성하고 즉시 업데이트할 수 있습니다.
Google 지도 JavaScript API는 지도가 로드될 때 사용자가 지정한 함수를 호출하는 초기화 콜백 옵션을 제공합니다. 또한 지도 마커 및 폴리라인과 같은 기능을 사용하여 지정한 위치에 친숙한 지도 마커와 비행 경로를 지도에 배치할 수 있습니다(파트 2, 3, 4). 모든 지점은 사용자가 지정할 수 있으며 업데이트가 도착하면 실시간으로 업데이트될 수 있습니다.
코드 연습
코드를 작업하려면 CodePen을 사용하여 자신의 프로젝트에 포크하거나 HTML 코드를 파일로 다운로드하여 즐겨 사용하는 HTTP 서버를 사용하여 실행할 수 있습니다. 다음과 같이 CodePen 웹 IDE에서 코드를 편집하는 것이 좋습니다:
IDE에 들어가면 사소한 코드 변경을 수행하여 앱을 빠르게 실행할 수 있습니다.
애플리케이션 설정 및 구성
과거에 웹 애플리케이션을 사용해 본 적이 있다면 웹 페이지 구조가 익숙할 것입니다. 지도 표시를 위한 DIV 태그가 있는 일반 HTML5 + 자바스크립트 애플리케이션으로 시작하겠습니다. 실시간 통신을 위한 PubNub 라이브러리를 HTML 페이지의 HEAD에 포함합니다.
또한 HTML 페이지 하단에 SCRIPT 태그를 사용하여 Google Maps API를 포함할 수 있습니다. 최신 버전은 공식 Google 지도 설명서를 확인하세요.
플레이스홀더 맵 API 키와 버전을 위의 SCRIPT SRC 속성에 맞게 바꿔야 한다는 점에 유의하세요.
HTML5 위치가 작동하려면 사용자가 자신의 기기에서 앱에 대한 위치 액세스를 명시적으로 허용해야 한다는 점을 언급할 필요가 있습니다. 위치 권한이 거부된 경우에 대비하여 정상적으로 폴백을 처리하는 것은 이 튜토리얼의 범위를 벗어납니다. 하지만 최상의 사용자 경험을 제공하려면 최종 애플리케이션에서 이러한 경우를 처리하는 것이 중요합니다.
PubNub 설정은 간단한 자바스크립트 맵에 포함되어 있습니다. 다음과 같이 고유한 값으로 업데이트할 수 있습니다:
pubnub = new PubNub({
publishKey : "myPublishKey",
subscribeKey : "mySubscribeKey",
userId: "myUniqueUserId"
});
코드 실행
코드펜에서 앱을 실행하기 위해 특별한 작업을 할 필요 없이 온라인 편집기에서 자동으로 실행됩니다. 앱을 보고 있는 위치(지리적 위치)와 연결 기능(WiFi 또는 LTE)에 따라 보고되는 위치가 다를 수 있습니다(IP에서 지리적 위치로, GPS 위치로). 또한 기기마다, 브라우저마다 위치 정확도 특성이 다르며, 일부 기기는 다른 기기보다 더 정확한 것으로 나타났습니다.
다음 단계
이제 앱 설정이 완료되었습니다. 2부에서는 지도에서 기기의 위치를 식별하는 라이브 맵 마커를 구현해 보겠습니다.
펍넙이 어떤 도움을 줄 수 있을까요?
이 문서는 원래 PubNub.com에 게시되었습니다.
펍넙의 플랫폼은 개발자가 웹 앱, 모바일 앱, IoT 디바이스를 위한 실시간 인터랙티브를 구축, 제공, 관리할 수 있도록 지원합니다.
저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 8억 명의 월간 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한, 트래픽 급증으로 인한 지연 시간 문제를 걱정할 필요가 없습니다.
PubNub 체험하기
라이브 투어를 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.
설정하기
PubNub 계정에 가입하여 PubNub 키에 무료로 즉시 액세스하세요.
시작하기
사용 사례나 SDK에 관계없이 PubNub 문서를 통해 바로 시작하고 실행할 수 있습니다.
