Amazon Location Service - Getting Started with First Map App

` 요소를 HTML에 생성합니다. CSS에서 이 `

`를 스타일링하여 애플리케이션에 필요한 차원을 설정할 수 있습니다. GitHub 리포지토리에서 CSS 파일 `style.css`를 다운로드해야 합니다. 이렇게 하면 비즈니스 로직에 집중할 수 있습니다. `style.css` 및 `index.html` 파일을 동일한 폴더에 저장합니다. [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css)에서 `style.css` 파일을 다운로드합니다. ```

``` #### API 키 및 AWS 리전 세부 정보 추가 키가 생성된 AWS 리전과 함께에서 생성한 API 키를 [API 키를 사용하여 인증](using-apikeys.md)이 파일에 추가합니다. ``` ..... .....

``` ### 애플리케이션에 맵 추가 이 섹션에서는 애플리케이션에 맵 기능을 추가합니다. 시작하기 전에 파일이 이 폴더 구조에 있어야 합니다. 아직 다운로드하지 않은 경우 [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css)에서 `style.css` 파일을 다운로드합니다. ``` |---FirstApp [Folder] |-------------- index.html [File] |-------------- style.css [File] ``` #### 맵을 초기화하는 함수 생성 맵을 설정하려면 `//Add functions` 라인 뒤에 `initializeMap(...)` 함수를 생성합니다. 초기 중앙 위치와 확대/축소 수준을 선택합니다. 이 예제에서는 맵 중심을 캐나다 밴쿠버로 설정하며 확대/축소 수준은 10입니다. 쉽게 확대/축소할 수 있도록 탐색 컨트롤을 추가합니다. ``` /** * Initializes the map with the specified style and color scheme. */ function initializeMap(mapStyle = "Standard", colorScheme = "Dark") { const styleUrl = `https://maps.geo.${AWS_REGION}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${API_KEY}&color-scheme=${colorScheme}`; const map = new maplibregl.Map({ container: 'map', // The ID of the map container style: styleUrl, // The style URL for the map center: [-123.116226, 49.246292], // Starting center coordinates zoom: 10, // Initial zoom level validateStyle: false // Disable style validation }); return map; // Return the initialized map } ``` #### 맵 초기화 맵을 초기화하려면 `initializeMap(...)`을 호출합니다. 선택적으로 `initializeMap` 함수 뒤에 원하는 스타일 및 색상 체계를 사용하여 초기화할 수 있습니다. 더 많은 스타일 옵션은 [AWS 맵 스타일 및 기능](map-styles.md) 섹션을 참조하세요. ``` // Step 1: Setup API Key and AWS Region const API_KEY = "Your_API_Key"; const AWS_REGION = "Region_where_you_created_API_Key"; // Step 2.1 Add maps to application // Step 2.2 initialize the map const map = initializeMap("Standard","Light"); // Step 3: Add places features to application ``` 브라우저에서 `index.html`을 열어 실행 중인 맵을 확인합니다. #### 탐색 컨트롤 추가 선택적으로 맵에 탐색 컨트롤(확대/축소 및 회전)을 추가할 수 있습니다. 이 작업은 `initializeMap(...)`을 호출한 후 수행해야 합니다. ``` // Step 2.1 initialize the map const map = initializeMap("Standard","Light"); // Step 2.2 Add navigation controls to the map map.addControl(new maplibregl.NavigationControl()); // Step 3: Add places features to application ``` #### 맵 코드 검토 축하합니다\$1 첫 번째 앱에서 맵을 사용할 준비가 되었습니다. 브라우저에서 `index.html`을 엽니다. `style.css`가 `index.html`과 동일한 폴더에 있는지 확인합니다. 최종 HTML은 다음과 같아야 합니다. ``` Amazon Location Service - Getting Started with First Map App

``` ### 애플리케이션에 장소 추가 이 섹션에서는 애플리케이션에 장소 추가 기능을 설정합니다. GitHub에서 JavaScript 파일([https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js))을 다운로드합니다. 시작하기 전에 파일이 이 폴더 구조에 있어야 합니다. ``` |---FirstApp [Folder] |-------------- index.html [File] |-------------- style.css [File] |-------------- utils.js [File] ``` #### GeoPlaces를 생성하는 함수 생성 검색 기능을 추가하려면 `AuthHelper` 및 `AmazonLocationClient`를 사용하여 `GeoPlaces` 클래스를 초기화합니다. `index.html`의 `` 태그 앞에 다음 `getGeoPlaces(map)` 함수를 추가합니다. ``` /** * Gets a GeoPlaces instance for Places operations. */ function getGeoPlaces(map) { const authHelper = amazonLocationClient.withAPIKey(API_KEY, AWS_REGION); // Authenticate using the API key and AWS region const locationClient = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig()); // Create a GeoPlaces client const geoPlaces = new GeoPlaces(locationClient, map); // Create GeoPlaces instance return geoPlaces; // Return the GeoPlaces instance } ``` #### 함수를 생성하여 애플리케이션에 검색 상자 추가 `index.html`의 `` 태그 앞에 다음 `addSearchBox(map, geoPlaces)`, `renderPopup(feature)` 및 `createPopup(feature)` 함수를 추가하여 검색 기능 설정을 완료합니다. ``` /** * Adds search box to the map. */ function addSearchBox(map, geoPlaces) { const searchBox = new MaplibreGeocoder(geoPlaces, { maplibregl, showResultsWhileTyping: true, // Show results while typing debounceSearch: 300, // Debounce search requests limit: 30, // Limit number of results popuprender: renderPopup, // Function to render popup reverseGeocode: true, // Enable reverse geocoding zoom: 14, // Zoom level on result selection placeholder: "Search text or nearby (lat,long)" // Placeholder text for search box. }); // Add the search box to the map map.addControl(searchBox, 'top-left'); // Event listener for when a search result is selected searchBox.on('result', async (event) => { const { id, result_type } = event.result; // Get result ID and type if (result_type === "Place") { // Check if the result is a place const placeResults = await geoPlaces.searchByPlaceId(id); // Fetch details for the selected place if (placeResults.features.length) { createPopup(placeResults.features[0]).addTo(map); // Create and add popup for the place } } }); } /** * Renders the popup content for a given feature. */ function renderPopup(feature) { return ` `; } /** * Creates a popup for a given feature and sets its position. */ function createPopup(feature) { return new maplibregl.Popup({ offset: 30 }) // Create a new popup .setLngLat(feature.geometry.coordinates) // Set the popup position .setHTML(renderPopup(feature)); // Set the popup content } ``` #### 애플리케이션에 검색 상자 추가 섹션 3.1에 정의된 대로를 `getGeoPlaces(map)`를 호출하여 `GeoPlaces` 객체를 생성한 다음, `addSearchBox(map, geoPlaces)`를 호출하여 애플리케이션에 검색 상자를 추가합니다. ``` // Step 2: Add maps to application // Step 2.1 initialize the map const map = initializeMap("Standard","Light"); // Step 2.2 Add navigation controls to the map map.addControl(new maplibregl.NavigationControl()); // Step 3: Add places feature to application // Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality const geoPlaces = getGeoPlaces(map); // Step 3.2: Add search box to the map addSearchBox(map, geoPlaces); ``` 장소 검색을 사용할 준비가 되었습니다. 브라우저에서 `index.html`을 열어 실행 중인지 확인합니다. #### 사용자가 맵 클릭 시 팝업을 표시하는 함수 추가 사용자가 맵을 클릭할 때 팝업을 표시하는 `addMapClick(map, geoPlaces)` 함수를 생성합니다. `` 태그 바로 앞에 이 함수를 추가합니다. ``` /** * Sets up reverse geocoding on map click events. */ function addMapClick(map, geoPlaces) { map.on('click', async ({ lngLat }) => { // Listen for click events on the map const response = await geoPlaces.reverseGeocode({ query: [lngLat.lng, lngLat.lat], limit: 1, click: true }); // Perform reverse geocoding if (response.features.length) { // If there are results const clickMarker = new maplibregl.Marker({ color: "orange" }); // Create a marker const feature = response.features[0]; // Get the clicked feature const clickedPopup = createPopup(feature); // Create popup for the clicked feature clickMarker.setLngLat(feature.geometry.coordinates) // Set marker position .setPopup(clickedPopup) // Attach popup to marker .addTo(map); // Add marker to the map clickedPopup.on('close', () => clickMarker.remove()).addTo(map); // Remove marker when popup is closed } }); } ``` #### 함수를 호출하여 맵 클릭 기능 추가 맵 클릭 작업을 활성화하려면 `addSearchBox(map, geoPlaces)`가 포함된 라인 뒤에서 `addMapClick(map, geoPlaces)`을 호출합니다. ``` // Step 3: Add places feature to application // Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality const geoPlaces = getGeoPlaces(map); // Step 3.2: Add search box to the map addSearchBox(map, geoPlaces); // Step 3.3: Setup map click functionality addMapClick(map, geoPlaces); ``` #### Maps and Places 애플리케이션 검토 축하합니다\$1 첫 번째 애플리케이션에서 Maps and Places를 사용할 준비가 되었습니다. 브라우저에서 `index.html`을 엽니다. `style.css` 및 `utils.js`가 `index.html`과 동일한 폴더에 있는지 확인합니다. 최종 HTML은 다음과 같아야 합니다. ``` Amazon Location Service - Getting Started with First Map App

``` ### 자세히 살펴보기 이제 빠른 시작 자습서를 완료했으니 Amazon Location Service를 사용하여 애플리케이션을 구축하는 방법을 알 수 있습니다. Amazon Location을 최대한 활용하려면 다음 리소스를 확인하세요. + **쿼리 제안 세부 정보** - `GeoPlaces` 클래스를 확장하거나 `ReverseGeocode`에 대한 유사한 접근 방식을 사용하여 `Suggestion` API에서 반환되는 결과에 대한 세부 정보를 가져오는 것이 좋습니다. + **비즈니스 요구 사항에 적합한 API 선택** - 요구 사항에 가장 적합한 Amazon Location API를 결정하려면 [올바른 API 선택](choose-an-api.md) 리소스를 확인하세요. + **Amazon Location "사용 방법" 가이드 확인** - [Amazon Location Service 개발자 안내서](https://docs.aws.amazon.com/location/)에서 자습서 및 추가 리소스를 참조하세요. + **설명서 및 제품 정보** - 전체 설명서는 [Amazon Location Service 개발자 안내서](https://docs.aws.amazon.com/location/)를 참조하세요. 제품에 대한 자세한 내용은 [Amazon Location Service 제품](https://aws.amazon.com/location) 페이지를 참조하세요. # 첫 번째 Geofences and Trackers 애플리케이션 생성 이 섹션에서는 Amazon Location Geofences and Trackers의 주요 기능을 보여주는 애플리케이션을 생성합니다. 애플리케이션은 Lambda 및 Amazon Location 기능의 조합을 사용하여 트래커 AWS IoT와 지오펜스가 상호 작용하는 방식을 보여줍니다. 시작하려면 iOS 또는 Android 플랫폼을 선택합니다. 애플리케이션 빌드를 시작하기 전에 [Amazon Location Service 콘솔을 사용하여 인증](set-up-auth.md)의 절차에 따라 적절한 액세스 권한을 부여합니다. **Topics** + [iOS 애플리케이션 생성](ios-geofence-app.md) + [Android 애플리케이션 생성](android-geofence-app.md) # iOS 애플리케이션 생성 Amazon Location Service를 사용하여 iOS 애플리케이션을 빌드하려면 다음 절차를 따릅니다. [GitHub](https://github.com/aws-geospatial/amazon-location-samples-ios/tree/main/tracking-with-geofence-notifications)에서 프로젝트 파일을 복제합니다. ## 앱을 위한 Amazon Location 리소스 생성 AWS 계정이 준비되면 Amazon Location Service 리소스를 생성할 수 있습니다. 이러한 리소스는 제공된 코드 조각을 실행하는 데 필수적입니다. **참고** 아직 AWS 계정을 생성하지 않은 경우 [AWS 계정을 생성](https://portal.aws.amazon.com/billing/signup#/start/email)하십시오. 시작하려면 Amazon Cognito ID 풀 ID를 생성해야 합니다. 다음 절차를 따르세요. 1. AWS 콘솔에서 Amazon Cognito 서비스로 이동한 다음 왼쪽 메뉴에서 **자격 증명 풀**을 선택하고 자격 **증명 풀 생성을** 선택합니다. 1. **게스트 액세스**가 선택되어 있는지 확인하고 **다음**을 눌러 계속합니다. 1. 다음으로 새 IAM 역할을 생성하거나 기존 IAM 역할을 사용합니다. 1. ID 풀 이름을 입력하고 ID 풀이 다음 절차에서 생성할 맵 및 트래커의 Amazon Location `(geo)` 리소스에 액세스할 수 있는지 확인합니다. 1. 이제 AWS Amazon Location 콘솔에서 맵을 생성하고 스타일을 지정해야 하며 다음 절차를 사용합니다. 1. Amazon Location 콘솔의 [맵 섹션](https://console.aws.amazon.com/location/maps/home)으로 이동하고 **맵 생성**을 선택하여 사용 가능한 맵 스타일을 미리 봅니다. 1. 새 맵 리소스에 **이름** 및 **설명**을 지정합니다. 나중에 자습서에서 사용되므로 맵 리소스에 할당한 이름을 기록합니다. 1. 맵 스타일을 선택할 때 맵 데이터 공급자를 고려합니다. 자세한 내용은 [AWS 서비스 약관](https://aws.amazon.com/service-terms)의 섹션 82를 참조하세요. 1. [Amazon Location 이용 약관](https://aws.amazon.com/service-terms/#:~:text=82.%20Amazon%20Location%20Service)에 동의한 다음, **맵 생성**을 선택합니다. 맵이 생성된 후에는 어떤 방향으로든 확대, 축소 또는 이동하여 맵과 상호 작용할 수 있습니다. Amazon Location 콘솔을 사용하여 트래커를 만들려면 1. [Amazon Location Service 콘솔](https://console.aws.amazon.com/location/)을 엽니다. 1. 왼쪽 탐색 창에서 **트래커**를 선택합니다. 1. **트래커 생성**을 선택합니다. 1. 모든 필수 필드를 입력합니다. 1. **위치 필터링**에서 트래커 리소스를 사용하려는 방식에 가장 적합한 옵션을 선택합니다. 위치 필터링을 설정하지 않은 경우 기본 설정은 TimeBased입니다. 자세한 내용은 이 가이드의 Trackers 항목과 Amazon Location Service Tracker API 참조의 PositionFiltering 항목을 참조하세요. 1. **트래커 생성**을 선택하여 완료합니다. ## 지오펜스 컬렉션 생성 지오펜스 컬렉션을 생성하면 콘솔, API 또는 CLI를 사용할 수 있습니다. 아래 절차에서 각 옵션을 알아볼 수 있습니다. Amazon Location 콘솔을 사용하여 지오펜스 컬렉션 생성: 1. https://console.aws.amazon.com/location/에서 Amazon Location Service 콘솔을 엽니다. 1. 왼쪽 탐색 창에서 지오펜스 컬렉션을 선택합니다. 1. 지오펜스 컬렉션 생성을 선택합니다. 1. 컬렉션의 이름과 설명을 입력합니다. 1. CloudWatch를 대상으로 하는 EventBridge 규칙에서 선택적 EventBridge 규칙을 생성하여 지오펜스 이벤트에 대한 대응을 시작할 수 있습니다. 이를 통해 Amazon Location에서 이벤트를 Amazon CloudWatch Logs에 게시할 수 있습니다. 1. 지오펜스 컬렉션 생성을 선택합니다. Amazon Location API를 사용하여 지오펜스 컬렉션 생성: Amazon Location Geofences API에서 CreateGeofenceCollection 작업을 사용합니다. 다음 예제에서는 API 요청을 사용하여 `GOECOLLECTION_NAME`이라는 지오펜스 컬렉션을 생성합니다. ``` POST /geofencing/v0/collections Content-type: application/json { "CollectionName": "GOECOLLECTION_NAME", "Description": "Geofence collection 1 for shopping center", "Tags": { "Tag1" : "Value1" } } ``` AWS CLI 명령을 사용하여 지오펜스 컬렉션을 생성합니다. create-geofence-collection 명령을 사용합니다. 다음 예제에서는 AWS CLI 를 사용하여 `GOECOLLECTION_NAME`이라는 지오펜스 컬렉션을 생성합니다. ``` aws location \ create-geofence-collection \ --collection-name "GOECOLLECTION_NAME" \ --description "Shopping center geofence collection" \ --tags Tag1=Value1 ``` ## 트래커를 지오펜스 컬렉션에 연결 트래커를 지오펜스 컬렉션에 연결하려면 콘솔, API 또는 CLI를 사용할 수 있습니다. 아래 절차에서 옵션을 알아볼 수 있습니다. Amazon Location Service 콘솔을 사용하여 트래커 리소스를 지오펜스 컬렉션에 연결: 1. Amazon Location 콘솔을 엽니다. 1. 왼쪽 탐색 창에서 **트래커**를 선택합니다. 1. **디바이스 트래커**에서 대상 트래커의 이름 링크를 선택합니다. 1. **연결된 지오펜스 컬렉션**에서 **지오펜스 컬렉션 연결**을 선택합니다. 1. **연결된 지오펜스 컬렉션** 창의 드롭다운 메뉴에서 지오펜스 컬렉션을 선택합니다. 1. **연결**을 선택합니다. 1. 트래커 리소스를 연결하면 해당 리소스에 활성 상태가 할당됩니다. Amazon Location API를 사용하여 트래커 리소스를 지오펜스 컬렉션에 연결: Amazon Location Trackers API에서 ``AsssociateTrackerConsumer 작업을 사용합니다. 다음 예제에서는 Amazon 리소스 이름(ARN)을 사용하여 ExampleTracker를 지오펜스 컬렉션과 연결하는 API 요청을 사용합니다. ``` POST /tracking/v0/trackers/ExampleTracker/consumers Content-type: application/json { "ConsumerArn": "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" } ``` AWS CLI 명령을 사용하여 트래커 리소스를 지오펜스 컬렉션에 연결합니다. `associate-tracker-consumer ` 명령을 사용합니다. 다음 예제에서는 AWS CLI 를 사용하여 라는 지오펜스 컬렉션을 생성합니다`GOECOLLECTION_NAME`. ``` aws location \ associate-tracker-consumer \ --consumer-arn "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" \ --tracker-name "ExampleTracker" ``` ## MQTT에서 AWS Lambda 사용 Lambda 함수 생성: AWS IoT Core 와 Amazon Location Service 간에 연결을 생성하려면 EventBridge CloudWatch 이벤트에서 전달한 메시지를 처리하는 AWS Lambda 함수가 필요합니다. 이 함수는 모든 위치 데이터를 추출하여 Amazon Location Service에 맞게 형식을 지정한 다음 Amazon Location Tracker API를 통해 제출합니다. AWS Lambda 콘솔을 통해이 함수를 생성하거나 AWS Command Line Interface (AWS CLI) 또는 AWS Lambda APIs. 콘솔을 사용하여 Amazon Location에 위치 업데이트를 게시하는 Lambda 함수를 생성하려면 1. https://console.aws.amazon.com/lambda/ AWS Lambda 콘솔을 엽니다. 1. 왼쪽 탐색에서 함수를 선택합니다. 1. 함수 생성을 선택하고 새로 작성이 선택되어 있는지 확인합니다. 1. 다음 입력란을 작성합니다. + 함수 이름 + **런타임** 옵션의 경우 Node.js 16.x를 선택합니다. 1. 함수 생성을 선택합니다. 1. 코드 탭을 선택하여 편집기를 엽니다. 1. index.js의 자리 표시자 코드를 다음과 같이 덮어씁니다. ``` const AWS = require('aws-sdk') const iot = new AWS.Iot(); exports.handler = function(event) { console.log("event===>>>", JSON.stringify(event)); var param = { endpointType: "iot:Data-ATS" }; iot.describeEndpoint(param, function(err, data) { if (err) { console.log("error===>>>", err, err.stack); // an error occurred } else { var endp = data['endpointAddress']; const iotdata = new AWS.IotData({endpoint: endp}); const trackerEvent = event["detail"]["EventType"]; const src = event["source"]; const time = event["time"]; const gfId = event["detail"]["GeofenceId"]; const resources = event["resources"][0]; const splitResources = resources.split("."); const geofenceCollection = splitResources[splitResources.length - 1]; const coordinates = event["detail"]["Position"]; const deviceId = event["detail"]["DeviceId"]; console.log("deviceId===>>>", deviceId); const msg = { "trackerEventType" : trackerEvent, "source" : src, "eventTime" : time, "geofenceId" : gfId, "coordinates": coordinates, "geofenceCollection": geofenceCollection }; const params = { topic: `${deviceId}/tracker`, payload: JSON.stringify(msg), qos: 0 }; iotdata.publish(params, function(err, data) { if (err) { console.log("error===>>>", err, err.stack); // an error occurred } else { console.log("Ladmbda triggered===>>>", trackerEvent); // successful response } }); } }); } ``` 1. 배포를 선택하여 업데이트된 함수를 저장합니다. 1. 구성 탭을 선택합니다. 1. 트리거 섹션에서 트리거 추가를 선택합니다. 1. 소스 필드에서 EventBridge(CloudWatch Events)를 선택합니다. 1. '기존 규칙' 라디오 옵션을 선택합니다. 1. 이 `AmazonLocationMonitor-GEOFENCECOLLECTION\$1NAME`과 같은 규칙 이름을 입력합니다. 1. 추가 버튼을 클릭합니다. 1. 이렇게 하면 권한 탭에 `리소스 기반 정책 문`도 연결됩니다. MQTT 테스트 클라이언트 1. [https://console.aws.amazon.com/iot/](https://console.aws.amazon.com/iot/) 엽니다. 1. 왼쪽 탐색 창에서 MQTT 테스트 클라이언트를 선택합니다. 1. MQTT 연결을 구성할 수 있는 **MQTT 테스트 클라이언트**라는 섹션이 표시됩니다. 1. 필요한 설정을 구성한 후 **연결** 버튼을 클릭하여 제공된 파라미터를 사용하여 MQTT 브로커에 대한 연결을 설정합니다. 1. 엔드포인트 값을 기록해 둡니다. 연결되면 MQTT 테스트 클라이언트 인터페이스에 제공된 각 입력 필드를 사용하여 MQTT 주제를 구독하거나 주제에 메시지를 게시할 수 있습니다. 다음으로 MQTT 정책을 연결합니다. 1. 왼쪽 메뉴의 **관리**에서 **보안** 옵션을 확장하고 **정책**을 클릭합니다. 1. **정책 생성** 버튼을 클릭합니다. 1. 정책 이름을 입력합니다. 1. **정책 문서**에서 **JSON** 탭을 선택합니다. 1. 아래 표시된 정책을 복사하여 붙여 넣지만 모든 요소를 `REGION` 및 `ACCOUNT_ID`로 업데이트해야 합니다. ``` { "Version": "2012-10-17", "Statement": [ { "Action": [ "iot:Connect", "iot:Publish", "iot:Subscribe", "iot:Receive" ], "Resource": [ "arn:aws:iot:REGION:ACCOUNT_ID:client/${cognito-identity.amazonaws.com:sub}", "arn:aws:iot:REGION:ACCOUNT_ID:topic/${cognito-identity.amazonaws.com:sub}", "arn:aws:iot:REGION:ACCOUNT_ID:topicfilter/${cognito-identity.amazonaws.com:sub}/", "arn:aws:iot:REGION:ACCOUNT_ID:topic/${cognito-identity.amazonaws.com:sub}/tracker" ], "Effect": "Allow" } ] } ``` 1. **생성** 버튼을 선택하여 완료합니다. ## 샘플 앱 코드 설정 샘플 코드를 설정하려면 다음 도구가 설치되어 있어야 합니다. + Git + XCode 15.3 이상 + iOS Simulator 16 이상 다음 절차에 따라 샘플 앱 코드를 설정합니다. 1. [https://github.com/aws-geospatial/amazon-location-samples-ios/tree/main/tracking-with-geofence-notifications](https://github.com/aws-geospatial/amazon-location-samples-ios/tree/main/tracking-with-geofence-notifications) URL에서 git 리포지토리를 복제합니다. 1. `AWSLocationSampleApp.xcodeproj` 프로젝트 파일을 엽니다. 1. 패키지 확인 프로세스를 기다립니다. 1. **선택**: 프로젝트 탐색 메뉴에서 `ConfigTemplate.xcconfig` 이름을 `Config.xcconfig`로 바꾸고 다음 값을 입력합니다. ``` IDENTITY_POOL_ID = `YOUR_IDENTITY_POOL_ID` MAP_NAME = `YOUR_MAP_NAME` TRACKER_NAME = `YOUR_TRACKER_NAME` WEBSOCKET_URL = `YOUR_MQTT_TEST_CLIENT_ENDPOINT` GEOFENCE_ARN = `YOUR_GEOFENCE_COLLECTION_NAME` ``` ## 샘플 앱 사용 이제 샘플 코드를 설정한 후 iOS 시뮬레이터 또는 물리적 디바이스에서 앱을 실행할 수 있습니다. 1. 앱을 작성하고 실행합니다. 1. 앱에서 위치 및 알림 권한을 요청합니다. 이 권한을 허용해야 합니다. 1. `Cognito 구성` 버튼을 탭합니다. 1. `Config.xcconfig` 파일의 값을 채우지 않은 경우 이전에 구성 화면에서 생성한 리소스 값으로 필드를 채워야 합니다. ``` IDENTITY_POOL_ID = `YOUR_IDENTITY_POOL_ID` MAP_NAME = `YOUR_MAP_NAME` TRACKER_NAME = `YOUR_TRACKER_NAME` WEBSOCKET_URL = `YOUR_MQTT_TEST_CLIENT_ENDPOINT` GEOFENCE_ARN = `YOUR_GEOFENCE_COLLECTION_NAME` ``` 1. 구성을 저장합니다. 1. 이제 시간, 거리 및 정확도에 대한 필터 옵션이 표시됩니다. 필요에 따라 사용합니다. 1. 앱의 `추적` 탭으로 이동하면 맵과 `추적 시작` 버튼이 표시됩니다. 1. 시뮬레이터에 앱을 설치한 경우 위치 변경을 시뮬레이션할 수 있습니다. 이 작업은 기능 -> 위치 메뉴 옵션에서 수행할 수 있습니다. 예를 들어 기능 -> 위치 -> 프리웨이 드라이브를 선택합니다. 1. `추적 시작` 버튼을 탭합니다. 맵에 추적 지점이 표시됩니다. 1. 앱은 백그라운드의 위치도 추적합니다. 따라서 앱을 백그라운드로 이동하면 백그라운드 모드에서 계속 추적할 수 있는 권한을 요청합니다. 1. `추적 중지` 버튼을 탭하여 추적을 중지할 수 있습니다. # Android 애플리케이션 생성 Amazon Location Service를 사용하여 iOS 애플리케이션을 빌드하려면 다음 절차를 따릅니다. [GitHub](https://github.com/aws-geospatial/amazon-location-samples-android/tree/main/tracking-with-geofence-notifications)에서 프로젝트 파일을 복제합니다. ## 앱을 위한 Amazon Location 리소스 생성 AWS 계정이 준비되면 Amazon Location Service 리소스를 생성할 수 있습니다. 이러한 리소스는 제공된 코드 조각을 실행하는 데 필수적입니다. **참고** 아직 AWS 계정을 생성하지 않은 경우 [AWS 계정을 생성](https://portal.aws.amazon.com/billing/signup#/start/email)하십시오. 시작하려면 Amazon Cognito ID 풀 ID를 생성해야 합니다. 다음 절차를 따르세요. 1. AWS 콘솔에서 Amazon Cognito 서비스로 이동한 다음 왼쪽 메뉴에서 **자격 증명 풀**을 선택하고 자격 **증명 풀 생성을** 선택합니다. 1. **게스트 액세스**가 선택되어 있는지 확인하고 **다음**을 눌러 계속합니다. 1. 다음으로 새 IAM 역할을 생성하거나 기존 IAM 역할을 사용합니다. 1. ID 풀 이름을 입력하고 ID 풀이 다음 절차에서 생성할 맵 및 트래커의 Amazon Location `(geo)` 리소스에 액세스할 수 있는지 확인합니다. 1. 이제 AWS Amazon Location 콘솔에서 맵을 생성하고 스타일을 지정해야 하며 다음 절차를 사용합니다. 1. Amazon Location 콘솔의 [맵 섹션](https://console.aws.amazon.com/location/maps/home)으로 이동하고 **맵 생성**을 선택하여 사용 가능한 맵 스타일을 미리 봅니다. 1. 새 맵 리소스에 **이름** 및 **설명**을 지정합니다. 나중에 자습서에서 사용되므로 맵 리소스에 할당한 이름을 기록합니다. 1. 맵 스타일을 선택할 때 맵 데이터 공급자를 고려합니다. 자세한 내용은 [AWS 서비스 약관](https://aws.amazon.com/service-terms)의 섹션 82를 참조하세요. 1. [Amazon Location 이용 약관](https://aws.amazon.com/service-terms/#:~:text=82.%20Amazon%20Location%20Service)에 동의한 다음, **맵 생성**을 선택합니다. 맵이 생성된 후에는 어떤 방향으로든 확대, 축소 또는 이동하여 맵과 상호 작용할 수 있습니다. Amazon Location 콘솔을 사용하여 트래커를 만들려면 1. [Amazon Location Service 콘솔](https://console.aws.amazon.com/location/)을 엽니다. 1. 왼쪽 탐색 창에서 **트래커**를 선택합니다. 1. **트래커 생성**을 선택합니다. 1. 모든 필수 필드를 입력합니다. 1. **위치 필터링**에서 트래커 리소스를 사용하려는 방식에 가장 적합한 옵션을 선택합니다. 위치 필터링을 설정하지 않은 경우 기본 설정은 TimeBased입니다. 자세한 내용은 이 가이드의 Trackers 항목과 Amazon Location Service Tracker API 참조의 PositionFiltering 항목을 참조하세요. 1. **트래커 생성**을 선택하여 완료합니다. ## 지오펜스 컬렉션 생성 지오펜스 컬렉션을 생성하면 콘솔, API 또는 CLI를 사용할 수 있습니다. 아래 절차에서 각 옵션을 알아볼 수 있습니다. Amazon Location 콘솔을 사용하여 지오펜스 컬렉션 생성: 1. https://console.aws.amazon.com/location/에서 Amazon Location Service 콘솔을 엽니다. 1. 왼쪽 탐색 창에서 지오펜스 컬렉션을 선택합니다. 1. 지오펜스 컬렉션 생성을 선택합니다. 1. 컬렉션의 이름과 설명을 입력합니다. 1. CloudWatch를 대상으로 하는 EventBridge 규칙에서 선택적 EventBridge 규칙을 생성하여 지오펜스 이벤트에 대한 대응을 시작할 수 있습니다. 이를 통해 Amazon Location에서 이벤트를 Amazon CloudWatch Logs에 게시할 수 있습니다. 1. 지오펜스 컬렉션 생성을 선택합니다. Amazon Location API를 사용하여 지오펜스 컬렉션 생성: Amazon Location Geofences API에서 CreateGeofenceCollection 작업을 사용합니다. 다음 예제에서는 API 요청을 사용하여 `GOECOLLECTION_NAME`이라는 지오펜스 컬렉션을 생성합니다. ``` POST /geofencing/v0/collections Content-type: application/json { "CollectionName": "GOECOLLECTION_NAME", "Description": "Geofence collection 1 for shopping center", "Tags": { "Tag1" : "Value1" } } ``` AWS CLI 명령을 사용하여 지오펜스 컬렉션을 생성합니다. create-geofence-collection 명령을 사용합니다. 다음 예제에서는 AWS CLI 를 사용하여 `GOECOLLECTION_NAME`이라는 지오펜스 컬렉션을 생성합니다. ``` aws location \ create-geofence-collection \ --collection-name "GOECOLLECTION_NAME" \ --description "Shopping center geofence collection" \ --tags Tag1=Value1 ``` ## 트래커를 지오펜스 컬렉션에 연결 트래커를 지오펜스 컬렉션에 연결하려면 콘솔, API 또는 CLI를 사용할 수 있습니다. 아래 절차에서 옵션을 알아볼 수 있습니다. Amazon Location Service 콘솔을 사용하여 트래커 리소스를 지오펜스 컬렉션에 연결: 1. Amazon Location 콘솔을 엽니다. 1. 왼쪽 탐색 창에서 **트래커**를 선택합니다. 1. **디바이스 트래커**에서 대상 트래커의 이름 링크를 선택합니다. 1. **연결된 지오펜스 컬렉션**에서 **지오펜스 컬렉션 연결**을 선택합니다. 1. **연결된 지오펜스 컬렉션** 창의 드롭다운 메뉴에서 지오펜스 컬렉션을 선택합니다. 1. **연결**을 선택합니다. 1. 트래커 리소스를 연결하면 해당 리소스에 활성 상태가 할당됩니다. Amazon Location API를 사용하여 트래커 리소스를 지오펜스 컬렉션에 연결: Amazon Location Trackers API에서 ``AsssociateTrackerConsumer 작업을 사용합니다. 다음 예제에서는 Amazon 리소스 이름(ARN)을 사용하여 ExampleTracker를 지오펜스 컬렉션과 연결하는 API 요청을 사용합니다. ``` POST /tracking/v0/trackers/ExampleTracker/consumers Content-type: application/json { "ConsumerArn": "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" } ``` AWS CLI 명령을 사용하여 트래커 리소스를 지오펜스 컬렉션에 연결합니다. `associate-tracker-consumer ` 명령을 사용합니다. 다음 예제에서는 AWS CLI 를 사용하여 라는 지오펜스 컬렉션을 생성합니다`GOECOLLECTION_NAME`. ``` aws location \ associate-tracker-consumer \ --consumer-arn "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" \ --tracker-name "ExampleTracker" ``` ## MQTT에서 AWS Lambda 사용 Lambda 함수 생성: AWS IoT Core 와 Amazon Location Service 간에 연결을 생성하려면 EventBridge CloudWatch 이벤트에서 전달한 메시지를 처리하는 AWS Lambda 함수가 필요합니다. 이 함수는 모든 위치 데이터를 추출하여 Amazon Location Service에 맞게 형식을 지정한 다음 Amazon Location Tracker API를 통해 제출합니다. AWS Lambda 콘솔을 통해이 함수를 생성하거나 AWS Command Line Interface (AWS CLI) 또는 AWS Lambda APIs. 콘솔을 사용하여 Amazon Location에 위치 업데이트를 게시하는 Lambda 함수를 생성하려면 1. https://console.aws.amazon.com/lambda/ AWS Lambda 콘솔을 엽니다. 1. 왼쪽 탐색에서 함수를 선택합니다. 1. 함수 생성을 선택하고 새로 작성이 선택되어 있는지 확인합니다. 1. 다음 입력란을 작성합니다. + 함수 이름 + **런타임** 옵션의 경우 Node.js 16.x를 선택합니다. 1. 함수 생성을 선택합니다. 1. 코드 탭을 선택하여 편집기를 엽니다. 1. index.js의 자리 표시자 코드를 다음과 같이 덮어씁니다. ``` const AWS = require('aws-sdk') const iot = new AWS.Iot(); exports.handler = function(event) { console.log("event===>>>", JSON.stringify(event)); var param = { endpointType: "iot:Data-ATS" }; iot.describeEndpoint(param, function(err, data) { if (err) { console.log("error===>>>", err, err.stack); // an error occurred } else { var endp = data['endpointAddress']; const iotdata = new AWS.IotData({endpoint: endp}); const trackerEvent = event["detail"]["EventType"]; const src = event["source"]; const time = event["time"]; const gfId = event["detail"]["GeofenceId"]; const resources = event["resources"][0]; const splitResources = resources.split("."); const geofenceCollection = splitResources[splitResources.length - 1]; const coordinates = event["detail"]["Position"]; const deviceId = event["detail"]["DeviceId"]; console.log("deviceId===>>>", deviceId); const msg = { "trackerEventType" : trackerEvent, "source" : src, "eventTime" : time, "geofenceId" : gfId, "coordinates": coordinates, "geofenceCollection": geofenceCollection }; const params = { topic: `${deviceId}/tracker`, payload: JSON.stringify(msg), qos: 0 }; iotdata.publish(params, function(err, data) { if (err) { console.log("error===>>>", err, err.stack); // an error occurred } else { console.log("Ladmbda triggered===>>>", trackerEvent); // successful response } }); } }); } ``` 1. 배포를 선택하여 업데이트된 함수를 저장합니다. 1. 구성 탭을 선택합니다. 1. 트리거 섹션에서 트리거 추가를 선택합니다. 1. 소스 필드에서 EventBridge(CloudWatch Events)를 선택합니다. 1. '기존 규칙' 라디오 옵션을 선택합니다. 1. 이 `AmazonLocationMonitor-GEOFENCECOLLECTION\$1NAME`과 같은 규칙 이름을 입력합니다. 1. 추가 버튼을 클릭합니다. 1. 이렇게 하면 권한 탭에 `리소스 기반 정책 문`도 연결됩니다. MQTT 테스트 클라이언트 1. [https://console.aws.amazon.com/iot/](https://console.aws.amazon.com/iot/) 엽니다. 1. 왼쪽 탐색 창에서 MQTT 테스트 클라이언트를 선택합니다. 1. MQTT 연결을 구성할 수 있는 **MQTT 테스트 클라이언트**라는 섹션이 표시됩니다. 1. 필요한 설정을 구성한 후 **연결** 버튼을 클릭하여 제공된 파라미터를 사용하여 MQTT 브로커에 대한 연결을 설정합니다. 1. 엔드포인트 값을 기록해 둡니다. 연결되면 MQTT 테스트 클라이언트 인터페이스에 제공된 각 입력 필드를 사용하여 MQTT 주제를 구독하거나 주제에 메시지를 게시할 수 있습니다. 다음으로 MQTT 정책을 연결합니다. 1. 왼쪽 메뉴의 **관리**에서 **보안** 옵션을 확장하고 **정책**을 클릭합니다. 1. **정책 생성** 버튼을 클릭합니다. 1. 정책 이름을 입력합니다. 1. **정책 문서**에서 **JSON** 탭을 선택합니다. 1. 아래 표시된 정책을 복사하여 붙여 넣지만 모든 요소를 `REGION` 및 `ACCOUNT_ID`로 업데이트해야 합니다. ``` { "Version": "2012-10-17", "Statement": [ { "Action": [ "iot:Connect", "iot:Publish", "iot:Subscribe", "iot:Receive" ], "Resource": [ "arn:aws:iot:REGION:ACCOUNT_ID:client/${cognito-identity.amazonaws.com:sub}", "arn:aws:iot:REGION:ACCOUNT_ID:topic/${cognito-identity.amazonaws.com:sub}", "arn:aws:iot:REGION:ACCOUNT_ID:topicfilter/${cognito-identity.amazonaws.com:sub}/", "arn:aws:iot:REGION:ACCOUNT_ID:topic/${cognito-identity.amazonaws.com:sub}/tracker" ], "Effect": "Allow" } ] } ``` **참고** 다음 절차에서 사용할 정책 이름과 주제 이름을 기록합니다. 1. **생성** 버튼을 선택하여 완료합니다. 이전 절차를 완료한 후 이제 게스트 역할에 대한 권한을 다음과 같이 업데이트합니다. 1. Amazon Cognito로 이동하여 ID 풀을 엽니다. 그런 다음 사용자 액세스로 이동하여 게스트 역할을 선택합니다. 1. 권한 정책을 클릭하여 편집을 활성화합니다. ``` { 'Version': '2012-10-17 ', 'Statement': [ { 'Action': [ 'geo:GetMap*', 'geo:BatchUpdateDevicePosition', 'geo:BatchEvaluateGeofences', 'iot:Subscribe', 'iot:Publish', 'iot:Connect', 'iot:Receive', 'iot:AttachPrincipalPolicy', 'iot:AttachPolicy', 'iot:DetachPrincipalPolicy', 'iot:DetachPolicy' ], 'Resource': [ 'arn:aws:geo:us-east-1:{USER_ID}:map/{MAP_NAME}', 'arn:aws:geo:us-east-1:{USER_ID}:tracker/{TRACKER_NAME}', 'arn:aws:geo:us-east-1:{USER_ID}:geofence-collection/{GEOFENCE_COLLECTION_NAME}', 'arn:aws:iot:us-east-1:{USER_ID}:client/${cognito-identity.amazonaws.com:sub}', 'arn:aws:iot:us-east-1:{USER_ID}:topic/${cognito-identity.amazonaws.com:sub}', 'arn:aws:iot:us-east-1:{USER_ID}:topicfilter/${cognito-identity.amazonaws.com:sub}/*', 'arn:aws:iot:us-east-1:{USER_ID}:topic/${cognito-identity.amazonaws.com:sub}/tracker' ], 'Effect': 'Allow' }, { 'Condition': { 'StringEquals': { 'cognito-identity.amazonaws.com:sub': '${cognito-identity.amazonaws.com:sub}' } }, 'Action': [ 'iot:AttachPolicy', 'iot:DetachPolicy', 'iot:AttachPrincipalPolicy', 'iot:DetachPrincipalPolicy' ], 'Resource': [ '*' ], 'Effect': 'Allow' } ] } ``` 1. 위의 정책이 변경되면 이제 애플리케이션에 필요한 모든 AWS 리소스가 적절하게 구성됩니다. ## 샘플 앱 코드 설정 1. Android Studio를 열고 **새로 만들기**를 선택한 다음, **버전 관리의 프로젝트**를 선택합니다. 1. Android Studio의 왼쪽 상단 모서리에 있는 **파일** 메뉴로 이동합니다. 1. 드롭다운 메뉴에서 “새로 만들기”를 선택합니다. 1. “버전 관리의 프로젝트”를 선택합니다. 1. 표시되는 대화 상자에서 리포지토리 URL을 입력하고 “URL”로 표시된 필드를 찾습니다. 1. 샘플 앱의 URL([https://github.com/aws-geospatial/amazon-location-samples-android.git](https://github.com/aws-geospatial/amazon-location-samples-android.git))을 복사하여 이 필드에 붙여 넣습니다. 1. 리포지토리를 복제할 디렉터리를 결정합니다. 기본 디렉터리를 사용하거나 사용자 지정 위치를 선택합니다. 1. 리포지토리 URL 및 디렉터리 기본 설정을 지정한 후 “닫기” 버튼을 누릅니다. Android Studio가 해당 리포지토리를 지정된 위치에 복제합니다. 1. 이제 애플리케이션을 시스템에 복제했으며 사용을 시작할 수 있습니다. ## 샘플 앱 사용 샘플을 사용하려면 다음 절차를 따르세요. + **`custom.properties` 생성**: `custom.properties` 파일을 구성하려면 다음 단계를 따르세요. 1. 원하는 텍스트 편집기 또는 IDE를 엽니다. 1. 새 파일을 만듭니다. 1. `custom.properties` 이름으로 파일을 저장합니다. 1. `custom.properties`를 다음 코드 샘플로 업데이트하고 `MQTT_END_POINT`, `POLICY_NAME`, `GEOFENCE_COLLECTION_NAME` 및 `TOPIC_TRACKER`를 실제 값으로 바꿉니다. ``` MQTT_END_POINT=xxxxxxxxxxxxx-xxx.xxx.us-east-1.amazonaws.com POLICY_NAME=xxxxxxxxx GEOFENCE_COLLECTION_NAME=xxxxxxxxxxxxxxxxx TOPIC_TRACKER=xxxxxxxxxx ``` 1. 프로젝트를 정리하고 재구축합니다. 그런 다음 프로젝트를 실행할 수 있습니다. + **로그인**: 애플리케이션에 로그인하려면 다음 단계를 따르세요. 1. **로그인** 버튼을 누릅니다. 1. **ID 풀 ID**, **트래커 이름** 및 **맵 이름**을 제공합니다. 1. **로그인**을 다시 눌러 완료합니다. + **필터 관리**: 구성 화면을 열고 다음을 수행합니다. 1. 스위치 UI를 사용하여 필터를 켜거나 끕니다. 1. 필요한 경우 시간 및 거리 필터를 업데이트합니다. + **추적 작업:** 추적 화면을 열고 다음을 수행합니다. + 각 버튼을 눌러 전경, 배경 또는 배터리 절약 모드에서 추적을 시작하고 중지할 수 있습니다.