Amazon Location Service - Getting Started with First Map App

` elemen dalam HTML Anda untuk menahan peta. Anda dapat menata gaya ini `

` di CSS Anda untuk mengatur dimensi sesuai kebutuhan untuk aplikasi Anda. Anda harus mengunduh file CSS,`style.css`, dari GitHub repositori kami. Ini akan membantu Anda fokus pada logika bisnis. Simpan `index.html` file `style.css` dan di folder yang sama. Unduh `style.css` file dari [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css). ```

``` #### Tambahkan kunci API dan detail AWS Wilayah Tambahkan kunci API yang Anda buat [Gunakan kunci API untuk mengautentikasi](using-apikeys.md) ke file ini, bersama dengan AWS Wilayah tempat kunci dibuat. ``` ..... .....

``` ### Tambahkan Peta ke aplikasi Anda Di bagian ini, kami akan menambahkan kemampuan Peta ke aplikasi. Sebelum Anda mulai, file Anda harus dalam struktur folder ini. Jika belum melakukannya, silakan unduh `style.css` file dari [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css). ``` |---FirstApp [Folder] |-------------- index.html [File] |-------------- style.css [File] ``` #### Buat Fungsi untuk Menginisialisasi Peta Untuk mengatur peta Anda, buat fungsi berikut`initializeMap(...)`, setelah baris`//Add functions`. Pilih lokasi pusat awal dan tingkat zoom. Dalam contoh ini, kami mengatur pusat peta ke Vancouver, Kanada, dengan tingkat zoom 10. Tambahkan kontrol navigasi untuk memperbesar mudah. ``` /** * 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 } ``` #### Inisialisasi Peta Panggilan `initializeMap(...)` untuk menginisialisasi peta. Secara opsional, Anda dapat menginisialisasi dengan gaya dan skema warna pilihan Anda setelah fungsi. `initializeMap` Untuk opsi gaya lainnya, lihat[AWS gaya peta dan fitur](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 ``` Buka `index.html` di browser untuk melihat peta beraksi. #### Tambahkan Kontrol Navigasi Secara opsional, Anda dapat menambahkan kontrol navigasi (zoom dan rotasi) ke peta. Ini harus dilakukan setelah menelepon`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 ``` #### Tinjau Kode Peta Selamat\$1 Aplikasi pertama Anda siap menggunakan peta. Buka `index.html` di browser. Pastikan `style.css` berada di folder yang sama dengan`index.html`. HTML akhir Anda akan terlihat seperti ini: ``` Amazon Location Service - Getting Started with First Map App

``` ### Tambahkan Tempat ke aplikasi Anda Di bagian ini, kami akan mengatur kemampuan menambahkan tempat ke aplikasi. Unduh JavaScript file dari GitHub, [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). Sebelum Anda mulai, file Anda harus dalam struktur folder ini: ``` |---FirstApp [Folder] |-------------- index.html [File] |-------------- style.css [File] |-------------- utils.js [File] ``` #### Buat Fungsi untuk Membuat GeoPlaces Untuk menambahkan fungsionalitas pencarian, inisialisasi `GeoPlaces` kelas menggunakan `AuthHelper` dan`AmazonLocationClient`. Tambahkan `getGeoPlaces(map)` fungsi berikut sebelum `` tag masuk`index.html`. ``` /** * 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 } ``` #### Buat Fungsi untuk Menambahkan Kotak Pencarian ke Aplikasi Tambahkan berikut ini`addSearchBox(map, geoPlaces)`,`renderPopup(feature)`, dan `createPopup(feature)` fungsi sebelum `` tag masuk `index.html` untuk menyelesaikan pengaturan fungsionalitas pencarian. ``` /** * 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 } ``` #### Tambahkan Kotak Pencarian ke Aplikasi Buat `GeoPlaces` objek dengan memanggil `getGeoPlaces(map)` seperti yang didefinisikan dalam Bagian 3.1 dan kemudian panggil `addSearchBox(map, geoPlaces)` untuk menambahkan kotak pencarian ke aplikasi. ``` // 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); ``` Pencarian tempat Anda siap digunakan. Buka `index.html` di browser untuk melihatnya beraksi. #### Tambahkan Fungsi untuk Menampilkan Popup pada Pengguna Klik pada Peta Buat fungsi `addMapClick(map, geoPlaces)` untuk menampilkan popup saat pengguna mengklik peta. Tambahkan fungsi ini tepat sebelum `` tag. ``` /** * 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 } }); } ``` #### Fungsi Panggilan untuk Menambahkan Fitur Klik Peta Untuk mengaktifkan tindakan klik peta, panggil `addMapClick(map, geoPlaces)` setelah baris yang berisi`addSearchBox(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); ``` #### Tinjau aplikasi Peta dan Tempat Selamat\$1 Aplikasi pertama Anda siap menggunakan Peta dan Tempat. Buka `index.html` di browser. Pastikan `style.css` dan `utils.js` berada di folder yang sama dengan`index.html`. HTML akhir Anda akan terlihat seperti ini: ``` Amazon Location Service - Getting Started with First Map App

``` ### Jelajahi lebih lanjut Anda telah menyelesaikan tutorial mulai cepat, dan harus memiliki gagasan tentang bagaimana Amazon Location Service digunakan untuk membangun aplikasi. Untuk mendapatkan lebih banyak dari Lokasi Amazon, Anda dapat melihat sumber daya berikut: + **Detail saran kueri** - Pertimbangkan untuk memperluas `GeoPlaces` kelas atau menggunakan pendekatan serupa `ReverseGeocode` untuk mendapatkan detail lebih lanjut tentang hasil yang dikembalikan oleh API. `Suggestion` + **Pilih API yang tepat untuk kebutuhan bisnis Anda** - Untuk menentukan API Lokasi Amazon terbaik untuk kebutuhan Anda, lihat sumber daya ini:[Pilih API yang tepat](choose-an-api.md). + **Lihat panduan “cara” Lokasi Amazon - Kunjungi Panduan** [Pengembang Layanan Lokasi Amazon](https://docs.aws.amazon.com/location/) untuk tutorial dan sumber daya lebih lanjut. + **Dokumentasi dan informasi produk** - Untuk dokumentasi lengkap, kunjungi [Amazon Location Service Developer Guide](https://docs.aws.amazon.com/location/). Untuk mempelajari lebih lanjut tentang produk, buka halaman [Produk Amazon Location Service](https://aws.amazon.com/location). # Buat aplikasi Geofences dan Trackers pertama Anda Di bagian ini, Anda akan membuat aplikasi yang menunjukkan fitur utama menggunakan Amazon Location Geofences and Trackers. Aplikasi menunjukkan bagaimana pelacak dan geofence berinteraksi menggunakan kombinasi fitur Lambda,, AWS IoT dan Lokasi Amazon. Pilih platform iOS atau Android untuk memulai. Sebelum Anda mulai membangun aplikasi Anda, ikuti prosedur [Menggunakan konsol Amazon Location Service untuk mengautentikasi](set-up-auth.md) untuk memberikan akses yang sesuai. **Topics** + [Buat aplikasi iOS](ios-geofence-app.md) + [Buat aplikasi Android](android-geofence-app.md) # Buat aplikasi iOS Ikuti prosedur ini untuk membuat aplikasi iOS menggunakan Amazon Location Service. Kloning file proyek dari [GitHub](https://github.com/aws-geospatial/amazon-location-samples-ios/tree/main/tracking-with-geofence-notifications). ## Membuat sumber daya Lokasi Amazon untuk aplikasi Anda Anda dapat menghasilkan sumber daya Amazon Location Service setelah AWS akun Anda siap. Sumber daya ini akan sangat penting untuk mengeksekusi cuplikan kode yang disediakan. **catatan** Jika Anda belum membuat AWS akun, silakan [buat AWS akun](https://portal.aws.amazon.com/billing/signup#/start/email). Untuk memulai, Anda perlu membuat Id Kolam Identitas Amazon Cognito, gunakan prosedur berikut: 1. Di AWS konsol, navigasikan ke layanan Amazon Cognito dan kemudian pilih **Identity pool** dari menu sebelah kiri dan pilih **Create Identity** pool. 1. Pastikan **Akses Tamu** dicentang, dan tekan **Berikutnya** untuk melanjutkan. 1. Selanjutnya buat peran IAM baru atau Gunakan peran IAM yang ada. 1. Masukkan nama kumpulan Identity, dan pastikan Identity Pool memiliki akses ke `(geo)` sumber daya Lokasi Amazon untuk peta dan pelacak yang akan Anda buat di prosedur berikutnya. 1. Sekarang Anda perlu membuat dan menata peta di konsol Lokasi AWS Amazon, gunakan prosedur berikut: 1. Arahkan ke [bagian Maps](https://console.aws.amazon.com/location/maps/home) di konsol Lokasi Amazon dan pilih **Buat Peta** untuk melihat pratinjau gaya peta yang tersedia. 1. Berikan sumber daya peta baru **Nama** dan **Deskripsi**. Rekam nama yang Anda tetapkan ke sumber daya peta, seperti yang digunakan nanti dalam tutorial. 1. Saat memilih gaya peta, pertimbangkan penyedia data peta. Lihat bagian 82 dari [ketentuan AWS layanan](https://aws.amazon.com/service-terms) untuk detail selengkapnya. 1. Terima [Syarat dan Ketentuan Lokasi Amazon](https://aws.amazon.com/service-terms/#:~:text=82.%20Amazon%20Location%20Service), lalu pilih **Buat Peta**. Setelah peta dibuat, Anda dapat berinteraksi dengan peta dengan memperbesar, memperkecil, atau menggeser ke segala arah. Untuk membuat pelacak menggunakan konsol Lokasi Amazon 1. Buka [konsol Amazon Location Service](https://console.aws.amazon.com/location/). 1. Di panel navigasi kiri, pilih **Pelacak**. 1. Pilih **Buat pelacak**. 1. Isi semua bidang yang diperlukan. 1. Di bawah **Pemfilteran posisi**, pilih opsi yang paling sesuai dengan cara Anda ingin menggunakan sumber daya pelacak Anda. Jika Anda tidak mengatur Pemfilteran posisi, pengaturan defaultnya adalah TimeBased. Untuk informasi selengkapnya, lihat Pelacak dalam panduan ini, dan PositionFiltering di Referensi API Amazon Location Service Trackers. 1. Pilih **Buat pelacak** untuk menyelesaikan. ## Buat Koleksi Geofence Saat membuat koleksi geofence, Anda dapat menggunakan konsol, API, atau CLI. Prosedur berikut memandu Anda melalui setiap opsi. Buat koleksi geofence menggunakan konsol Lokasi Amazon: 1. Buka konsol Amazon Location Service di https://console.aws.amazon.com/location/. 1. Di panel navigasi kiri, pilih Koleksi Geofence. 1. Pilih Buat koleksi geofence. 1. Berikan nama dan deskripsi untuk koleksi. 1. Di bawah EventBridge aturan dengan CloudWatch sebagai target, Anda dapat membuat EventBridge aturan opsional untuk mulai bereaksi terhadap peristiwa geofence. Hal ini memungkinkan Amazon Location untuk mempublikasikan peristiwa ke Amazon CloudWatch Logs. 1. Pilih Buat koleksi geofence. Buat koleksi geofence menggunakan Lokasi Amazon: APIs Gunakan CreateGeofenceCollection operasi dari Amazon Location Geofences APIs. Contoh berikut menggunakan permintaan API untuk membuat koleksi geofence yang disebut. `GOECOLLECTION_NAME` ``` POST /geofencing/v0/collections Content-type: application/json { "CollectionName": "GOECOLLECTION_NAME", "Description": "Geofence collection 1 for shopping center", "Tags": { "Tag1" : "Value1" } } ``` Buat koleksi geofence menggunakan AWS CLI perintah: Gunakan perintah create-geofence-collection. Contoh berikut menggunakan AWS CLI untuk membuat koleksi geofence yang disebut. `GOECOLLECTION_NAME` ``` aws location \ create-geofence-collection \ --collection-name "GOECOLLECTION_NAME" \ --description "Shopping center geofence collection" \ --tags Tag1=Value1 ``` ## Tautkan pelacak ke koleksi geofence Untuk menautkan pelacak ke koleksi geofence, Anda dapat menggunakan konsol, API, atau CLI. Prosedur berikut memandu Anda melalui setiap opsi. Menautkan sumber daya pelacak ke koleksi geofence menggunakan konsol Amazon Location Service: 1. Buka konsol Lokasi Amazon. 1. Di panel navigasi kiri, pilih **Pelacak**. 1. Di bawah **Pelacak Perangkat**, pilih tautan nama pelacak target. 1. Di bawah **Koleksi Geofence Tertaut**, pilih **Link Geofence** Collection. 1. Di **jendela Linked Geofence Collection, pilih koleksi** geofence dari menu tarik-turun. 1. Pilih **Tautkan**. 1. Setelah Anda menautkan sumber daya pelacak, itu akan diberi status Aktif. Menautkan sumber daya pelacak ke koleksi geofence menggunakan Lokasi Amazon: APIs Gunakan `` AsssociateTrackerConsumer operasi dari Pelacak APIs Lokasi Amazon. Contoh berikut menggunakan permintaan API yang terkait ExampleTracker dengan koleksi geofence menggunakan Amazon Resource Name (ARN). ``` POST /tracking/v0/trackers/ExampleTracker/consumers Content-type: application/json { "ConsumerArn": "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" } ``` Tautkan sumber daya pelacak ke koleksi geofence menggunakan perintah: AWS CLI Gunakan perintah `associate-tracker-consumer `. Contoh berikut menggunakan AWS CLI untuk membuat koleksi geofence yang disebut. `GOECOLLECTION_NAME` ``` aws location \ associate-tracker-consumer \ --consumer-arn "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" \ --tracker-name "ExampleTracker" ``` ## Gunakan AWS Lambda dengan MQTT Buat fungsi Lambda: Untuk membuat koneksi antara AWS IoT Core dan Amazon Location Service, Anda memerlukan AWS Lambda fungsi untuk memproses pesan yang diteruskan oleh EventBridge CloudWatch peristiwa. Fungsi ini akan mengekstrak data posisi apa pun, memformatnya untuk Amazon Location Service, dan mengirimkannya melalui Amazon Location Tracker API. Anda dapat membuat fungsi ini melalui AWS Lambda konsol, atau Anda dapat menggunakan AWS Command Line Interface (AWS CLI) atau AWS Lambda APIs. Untuk membuat fungsi Lambda yang menerbitkan pembaruan posisi ke Lokasi Amazon menggunakan konsol: 1. Buka AWS Lambda konsol di https://console.aws.amazon.com/lambda/. 1. Dari navigasi kiri, pilih Fungsi. 1. Pilih Create Function, dan pastikan bahwa Author dari awal dipilih. 1. Isi kotak-kotak berikut: + sebuah nama Fungsi + untuk opsi **Runtime**, pilih Node.js 16.x. 1. Pilih Buat fungsi. 1. Pilih tab Kode untuk membuka editor. 1. Timpa kode placeholder di index.js dengan yang berikut: ``` 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. Pilih Deploy untuk menyimpan fungsi yang diperbarui. 1. Pilih tab Konfigurasi. 1. Di bagian Pemicu, klik Tambahkan pemicu. 1. Pilih EventBridge (CloudWatch Acara) di bidang Sumber. 1. Pilih opsi radio `Aturan yang Ada. ' 1. Masukkan nama aturan seperti ini `AmazonLocationMonitor-GEOFENCECOLLECTION\$1NAME`. 1. Klik pada tombol Tambah. 1. Ini juga akan melampirkan `Pernyataan kebijakan berbasis sumber daya` di tab izin Klien Uji MQTT 1. Buka [https://console.aws.amazon.com/iot/](https://console.aws.amazon.com/iot/). 1. Di panel navigasi kiri, pilih klien pengujian MQTT. 1. Anda akan melihat bagian berjudul **MQTT test client** di mana Anda dapat mengonfigurasi koneksi MQTT Anda. 1. Setelah mengkonfigurasi pengaturan yang diperlukan, klik tombol **Connect** untuk membuat koneksi ke broker MQTT menggunakan parameter yang disediakan. 1. Catat nilai Endpoint. Setelah terhubung, Anda dapat berlangganan topik MQTT atau mempublikasikan pesan ke topik menggunakan bidang masukan masing-masing yang disediakan di antarmuka klien pengujian MQTT. Selanjutnya Anda akan melampirkan Kebijakan MQTT: 1. Di menu sebelah kiri, di bawah opsi **Kelola** perluas **Keamanan** dan klik **Kebijakan**. 1. Klik tombol **Buat Kebijakan**. 1. Masukkan nama kebijakan. 1. Pada **Dokumen Kebijakan** pilih tab **JSON**. 1. Salin tempel kebijakan yang ditunjukkan di bawah ini, tetapi pastikan untuk memperbarui semua elemen dengan Anda `REGION` dan`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. Pilih tombol **Create** untuk menyelesaikan. ## Siapkan contoh kode aplikasi Untuk mengatur kode sampel, Anda harus menginstal alat-alat berikut: + Git + XCode 15.3 atau Nanti + iOS Simulator 16 atau lebih baru Gunakan prosedur ini untuk menyiapkan contoh kode aplikasi: 1. [Kloning repositori git dari URL ini: 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) 1. Buka file `AWSLocationSampleApp.xcodeproj` proyek. 1. Tunggu proses resolusi paket. 1. **Opsional**: Pada menu navigasi proyek ganti nama `ConfigTemplate.xcconfig` menjadi `Config.xcconfig` dan isi nilai-nilai berikut: ``` 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` ``` ## Gunakan aplikasi sampel Setelah menyiapkan kode sampel, Anda sekarang dapat menjalankan aplikasi di simulator iOS atau perangkat fisik. 1. Membangun dan menjalankan aplikasi. 1. Aplikasi akan meminta Anda untuk izin lokasi dan pemberitahuan. Anda harus mengizinkan mereka. 1. Ketuk tombol `Cognito Configuration`. 1. Jika Anda belum mengisi nilai dalam file `config.xcconfig` Anda perlu mengisi bidang dengan nilai sumber daya yang telah Anda buat sebelumnya di layar konfigurasi. ``` 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. Simpan konfigurasi 1. Anda sekarang dapat melihat opsi Filter untuk waktu, jarak, dan akurasi. Gunakan sesuai kebutuhan Anda. 1. Buka tab `Pelacakan` di aplikasi dan Anda akan melihat peta dan tombol `Mulai Pelacakan`. 1. Jika Anda telah menginstal aplikasi di simulator, Anda mungkin ingin mensimulasikan perubahan lokasi. Ini dapat dilakukan di Fitur -> Opsi menu Lokasi. Misalnya pilih Fitur -> Lokasi -> Freeway Drive. 1. Ketuk tombol `Mulai Pelacakan`. Anda akan melihat titik pelacakan di peta. 1. Aplikasi ini juga melacak lokasi di latar belakang. Jadi, ketika Anda memindahkan aplikasi di latar belakang, aplikasi akan meminta izin Anda untuk melanjutkan pelacakan dalam mode latar belakang. 1. Anda dapat menghentikan pelacakan dengan mengetuk tombol `Stop Tracking`. # Buat aplikasi Android Ikuti prosedur ini untuk membuat aplikasi iOS menggunakan Amazon Location Service. Kloning file proyek dari [GitHub](https://github.com/aws-geospatial/amazon-location-samples-android/tree/main/tracking-with-geofence-notifications). ## Membuat sumber daya Lokasi Amazon untuk aplikasi Anda Anda dapat menghasilkan sumber daya Amazon Location Service setelah AWS akun Anda siap. Sumber daya ini akan sangat penting untuk mengeksekusi cuplikan kode yang disediakan. **catatan** Jika Anda belum membuat AWS akun, silakan [buat AWS akun](https://portal.aws.amazon.com/billing/signup#/start/email). Untuk memulai, Anda perlu membuat Id Kolam Identitas Amazon Cognito, gunakan prosedur berikut: 1. Di AWS konsol, navigasikan ke layanan Amazon Cognito dan kemudian pilih **Identity pool** dari menu sebelah kiri dan pilih **Create Identity** pool. 1. Pastikan **Akses Tamu** dicentang, dan tekan **Berikutnya** untuk melanjutkan. 1. Selanjutnya buat peran IAM baru atau Gunakan peran IAM yang ada. 1. Masukkan nama kumpulan Identity, dan pastikan Identity Pool memiliki akses ke `(geo)` sumber daya Lokasi Amazon untuk peta dan pelacak yang akan Anda buat di prosedur berikutnya. 1. Sekarang Anda perlu membuat dan menata peta di konsol Lokasi AWS Amazon, gunakan prosedur berikut: 1. Arahkan ke [bagian Maps](https://console.aws.amazon.com/location/maps/home) di konsol Lokasi Amazon dan pilih **Buat Peta** untuk melihat pratinjau gaya peta yang tersedia. 1. Berikan sumber daya peta baru **Nama** dan **Deskripsi**. Rekam nama yang Anda tetapkan ke sumber daya peta, seperti yang digunakan nanti dalam tutorial. 1. Saat memilih gaya peta, pertimbangkan penyedia data peta. Lihat bagian 82 dari [ketentuan AWS layanan](https://aws.amazon.com/service-terms) untuk detail selengkapnya. 1. Terima [Syarat dan Ketentuan Lokasi Amazon](https://aws.amazon.com/service-terms/#:~:text=82.%20Amazon%20Location%20Service), lalu pilih **Buat Peta**. Setelah peta dibuat, Anda dapat berinteraksi dengan peta dengan memperbesar, memperkecil, atau menggeser ke segala arah. Untuk membuat pelacak menggunakan konsol Lokasi Amazon 1. Buka [konsol Amazon Location Service](https://console.aws.amazon.com/location/). 1. Di panel navigasi kiri, pilih **Pelacak**. 1. Pilih **Buat pelacak**. 1. Isi semua bidang yang diperlukan. 1. Di bawah **Pemfilteran posisi**, pilih opsi yang paling sesuai dengan cara Anda ingin menggunakan sumber daya pelacak Anda. Jika Anda tidak mengatur Pemfilteran posisi, pengaturan defaultnya adalah TimeBased. Untuk informasi selengkapnya, lihat Pelacak dalam panduan ini, dan PositionFiltering di Referensi API Amazon Location Service Trackers. 1. Pilih **Buat pelacak** untuk menyelesaikan. ## Buat Koleksi Geofence Saat membuat koleksi geofence, Anda dapat menggunakan konsol, API, atau CLI. Prosedur berikut memandu Anda melalui setiap opsi. Buat koleksi geofence menggunakan konsol Lokasi Amazon: 1. Buka konsol Amazon Location Service di https://console.aws.amazon.com/location/. 1. Di panel navigasi kiri, pilih Geofence Collections. 1. Pilih Buat koleksi geofence. 1. Berikan nama dan deskripsi untuk koleksi. 1. Di bawah EventBridge aturan dengan CloudWatch sebagai target, Anda dapat membuat EventBridge aturan opsional untuk mulai bereaksi terhadap peristiwa geofence. Hal ini memungkinkan Amazon Location untuk mempublikasikan peristiwa ke Amazon CloudWatch Logs. 1. Pilih Buat koleksi geofence. Buat koleksi geofence menggunakan Lokasi Amazon: APIs Gunakan CreateGeofenceCollection operasi dari Amazon Location Geofences APIs. Contoh berikut menggunakan permintaan API untuk membuat koleksi geofence yang disebut. `GOECOLLECTION_NAME` ``` POST /geofencing/v0/collections Content-type: application/json { "CollectionName": "GOECOLLECTION_NAME", "Description": "Geofence collection 1 for shopping center", "Tags": { "Tag1" : "Value1" } } ``` Buat koleksi geofence menggunakan AWS CLI perintah: Gunakan perintah create-geofence-collection. Contoh berikut menggunakan AWS CLI untuk membuat koleksi geofence yang disebut. `GOECOLLECTION_NAME` ``` aws location \ create-geofence-collection \ --collection-name "GOECOLLECTION_NAME" \ --description "Shopping center geofence collection" \ --tags Tag1=Value1 ``` ## Tautkan pelacak ke koleksi geofence Untuk menautkan pelacak ke koleksi geofence, Anda dapat menggunakan konsol, API, atau CLI. Prosedur berikut memandu Anda melalui setiap opsi. Menautkan sumber daya pelacak ke koleksi geofence menggunakan konsol Amazon Location Service: 1. Buka konsol Lokasi Amazon. 1. Di panel navigasi kiri, pilih **Pelacak**. 1. Di bawah **Pelacak Perangkat**, pilih tautan nama pelacak target. 1. Di bawah **Koleksi Geofence Tertaut**, pilih **Link Geofence** Collection. 1. Di **jendela Linked Geofence Collection, pilih koleksi** geofence dari menu tarik-turun. 1. Pilih **Tautkan**. 1. Setelah Anda menautkan sumber daya pelacak, itu akan diberi status Aktif. Menautkan sumber daya pelacak ke koleksi geofence menggunakan Lokasi Amazon: APIs Gunakan `` AsssociateTrackerConsumer operasi dari Pelacak APIs Lokasi Amazon. Contoh berikut menggunakan permintaan API yang terkait ExampleTracker dengan koleksi geofence menggunakan Amazon Resource Name (ARN). ``` POST /tracking/v0/trackers/ExampleTracker/consumers Content-type: application/json { "ConsumerArn": "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" } ``` Tautkan sumber daya pelacak ke koleksi geofence menggunakan perintah: AWS CLI Gunakan perintah `associate-tracker-consumer `. Contoh berikut menggunakan AWS CLI untuk membuat koleksi geofence yang disebut. `GOECOLLECTION_NAME` ``` aws location \ associate-tracker-consumer \ --consumer-arn "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" \ --tracker-name "ExampleTracker" ``` ## Gunakan AWS Lambda dengan MQTT Buat fungsi Lambda: Untuk membuat koneksi antara AWS IoT Core dan Amazon Location Service, Anda memerlukan AWS Lambda fungsi untuk memproses pesan yang diteruskan oleh EventBridge CloudWatch peristiwa. Fungsi ini akan mengekstrak data posisi apa pun, memformatnya untuk Amazon Location Service, dan mengirimkannya melalui Amazon Location Tracker API. Anda dapat membuat fungsi ini melalui AWS Lambda konsol, atau Anda dapat menggunakan AWS Command Line Interface (AWS CLI) atau AWS Lambda APIs. Untuk membuat fungsi Lambda yang menerbitkan pembaruan posisi ke Lokasi Amazon menggunakan konsol: 1. Buka AWS Lambda konsol di https://console.aws.amazon.com/lambda/. 1. Dari navigasi kiri, pilih Fungsi. 1. Pilih Create Function, dan pastikan bahwa Author dari awal dipilih. 1. Isi kotak-kotak berikut: + sebuah nama Fungsi + untuk opsi **Runtime**, pilih Node.js 16.x. 1. Pilih Buat fungsi. 1. Pilih tab Kode untuk membuka editor. 1. Timpa kode placeholder di index.js dengan yang berikut: ``` 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. Pilih Deploy untuk menyimpan fungsi yang diperbarui. 1. Pilih tab Konfigurasi. 1. Di bagian Pemicu, klik Tambahkan pemicu. 1. Pilih EventBridge (CloudWatch Acara) di bidang Sumber. 1. Pilih opsi radio `Aturan yang Ada. 1. Masukkan nama aturan seperti ini `AmazonLocationMonitor-GEOFENCECOLLECTION\$1NAME`. 1. Klik pada tombol Tambah. 1. Ini juga akan melampirkan `Pernyataan kebijakan berbasis sumber daya` di tab izin Klien Uji MQTT 1. Buka [https://console.aws.amazon.com/iot/](https://console.aws.amazon.com/iot/). 1. Di panel navigasi kiri, pilih klien pengujian MQTT. 1. Anda akan melihat bagian berjudul **MQTT test client** di mana Anda dapat mengonfigurasi koneksi MQTT Anda. 1. Setelah mengkonfigurasi pengaturan yang diperlukan, klik tombol **Connect** untuk membuat koneksi ke broker MQTT menggunakan parameter yang disediakan. 1. Catat nilai Endpoint. Setelah terhubung, Anda dapat berlangganan topik MQTT atau mempublikasikan pesan ke topik menggunakan bidang masukan masing-masing yang disediakan di antarmuka klien pengujian MQTT. Selanjutnya Anda akan melampirkan Kebijakan MQTT: 1. Di menu sebelah kiri, di bawah opsi **Kelola** perluas **Keamanan** dan klik **Kebijakan**. 1. Klik tombol **Buat Kebijakan**. 1. Masukkan nama kebijakan. 1. Pada **Dokumen Kebijakan** pilih tab **JSON**. 1. Salin tempel kebijakan yang ditunjukkan di bawah ini, tetapi pastikan untuk memperbarui semua elemen dengan Anda `REGION` dan`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" } ] } ``` **catatan** Catat nama kebijakan dan nama topik untuk digunakan dalam prosedur berikutnya. 1. Pilih tombol **Create** untuk menyelesaikan. Setelah menyelesaikan prosedur sebelumnya, Anda sekarang akan memperbarui izin untuk peran tamu sebagai berikut: 1. Arahkan ke Amazon Cognito dan buka kumpulan identitas Anda. Kemudian, lanjutkan ke akses pengguna dan pilih peran tamu. 1. Klik kebijakan izin untuk mengaktifkan pengeditan. ``` { '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. Dengan perubahan kebijakan di atas, semua AWS sumber daya yang diperlukan sekarang dikonfigurasi dengan tepat untuk aplikasi. ## Siapkan contoh kode aplikasi 1. Buka Android Studio dan pilih **New** dan kemudian **Project dari Version Control**. 1. Arahkan ke menu **File** di sudut kiri atas Android Studio. 1. Pilih “Baru” dari menu tarik-turun. 1. Pilih “Proyek dari Kontrol Versi”. 1. Masukkan URL Repositori Di kotak dialog yang muncul, temukan bidang bertanda “URL”. 1. Salin dan tempel URL berikut untuk aplikasi sampel ke bidang ini: [https://github.com/aws-geospatial/amazon-location-samples-android.git](https://github.com/aws-geospatial/amazon-location-samples-android.git) 1. Tentukan direktori tempat Anda ingin mengkloning repositori. Gunakan direktori default atau pilih lokasi khusus. 1. Setelah mengatur URL repositori dan preferensi direktori, tekan tombol “Klon”. Android Studio akan melanjutkan untuk mengkloning repositori ke lokasi yang Anda tentukan. 1. Anda sekarang telah mengkloning aplikasi ke mesin Anda dan dapat mulai menggunakannya. ## Gunakan aplikasi sampel Untuk menggunakan sampel ikuti prosedur ini: + **Buat `custom.properties`**: Untuk mengonfigurasi `custom.properties` file Anda, ikuti langkah-langkah berikut: 1. Buka editor teks atau IDE pilihan Anda. 1. Buat file baru. 1. Simpan file dengan nama`custom.properties`. 1. Perbarui `custom.properties` dengan contoh kode berikut, dan ganti`MQTT_END_POINT`,, `POLICY_NAME``GEOFENCE_COLLECTION_NAME`, dan `TOPIC_TRACKER` dengan nilai aktual: ``` MQTT_END_POINT=xxxxxxxxxxxxx-xxx.xxx.us-east-1.amazonaws.com POLICY_NAME=xxxxxxxxx GEOFENCE_COLLECTION_NAME=xxxxxxxxxxxxxxxxx TOPIC_TRACKER=xxxxxxxxxx ``` 1. Bersihkan dan Bangun kembali proyek. Setelah ini, Anda dapat menjalankan proyek. + **Masuk**: Untuk masuk ke aplikasi, ikuti langkah-langkah di bawah ini: 1. Tekan tombol **Masuk**. 1. Berikan **Identity Pool Id**, **nama Tracker**, dan **nama Map**. 1. Tekan **Masuk** lagi untuk menyelesaikan. + **Kelola Filter**: Buka layar konfigurasi, dan lakukan hal berikut: 1. Alihkan filter on/off menggunakan UI sakelar. 1. Perbarui filter Waktu dan Jarak bila diperlukan. + **Operasi Pelacakan:** Buka layar pelacakan dan lakukan hal berikut: + Anda dapat memulai dan menghentikan pelacakan di latar depan, latar belakang, atau dalam mode penghemat baterai dengan menekan tombol masing-masing.