Buat sumber daya Otentikasi pengaturan Membuat aplikasi Kode awal Tambahkan peta Tambahkan pencarian Tambahkan pelacakan Apa selanjutnya

Membuat aplikasi iOS

Di bagian ini, Anda akan membuat aplikasi iOS dengan kemampuan untuk mencari di lokasi dan melacak di latar depan. Pertama, Anda akan membuat sumber daya Lokasi Amazon Anda, dan identitas Amazon Cognito untuk aplikasi Anda.

Topik

Membuat sumber daya Lokasi Amazon untuk aplikasi Anda
Menyiapkan otentikasi untuk aplikasi Anda
Membuat aplikasi iOS dasar
Menyiapkan kode awal
Menambahkan peta interaktif ke aplikasi Anda
Menambahkan pencarian ke aplikasi Anda
Menambahkan pelacakan ke aplikasi Anda
Apa selanjutnya

Membuat sumber daya Lokasi Amazon untuk aplikasi Anda

Jika Anda belum memilikinya, Anda harus membuat sumber daya Lokasi Amazon yang akan digunakan aplikasi Anda. Anda akan membuat sumber daya peta untuk menampilkan peta dalam aplikasi Anda, indeks tempat untuk mencari lokasi di peta, dan pelacak untuk melacak objek di seluruh peta.

Untuk menambahkan sumber daya lokasi ke aplikasi Anda

Pilih gaya peta yang ingin Anda gunakan.
1. Di konsol Lokasi Amazon, pada halaman Peta, pilih Buat peta untuk melihat pratinjau gaya peta.
2. Tambahkan Nama dan Deskripsi untuk sumber daya peta baru. Catat nama yang Anda gunakan untuk sumber daya peta. Anda akan membutuhkannya saat membuat file skrip Anda nanti di tutorial.
3. Pilih peta.
  
  catatan
  Memilih gaya peta juga memilih penyedia data peta mana yang akan Anda gunakan. Jika aplikasi Anda melacak atau merutekan aset yang Anda gunakan dalam bisnis Anda, seperti kendaraan pengiriman atau karyawan, Anda hanya dapat menggunakan HERE sebagai penyedia geolokasi Anda. Untuk informasi selengkapnya, lihat bagian 82 dari ketentuan AWS layanan.
4. Setuju dengan Syarat dan Ketentuan Lokasi Amazon, lalu pilih Buat peta. Anda dapat berinteraksi dengan peta yang Anda pilih: memperbesar, memperkecil, atau menggeser ke segala arah.
5. Catat Nama Sumber Daya Amazon (ARN) yang ditampilkan untuk sumber daya peta baru Anda. Anda akan menggunakannya untuk membuat otentikasi yang benar nanti dalam tutorial ini.
Pilih indeks tempat yang ingin Anda gunakan.
1. Di konsol Lokasi Amazon di halaman Indeks tempat, pilih Buat indeks tempat.
2. Tambahkan Nama dan Deskripsi untuk sumber daya indeks tempat baru. Catat nama yang Anda gunakan untuk sumber daya indeks tempat. Anda akan membutuhkannya saat membuat file skrip Anda nanti di tutorial.
3. Pilih penyedia data.
  
  catatan
  Dalam kebanyakan kasus, pilih penyedia data yang cocok dengan penyedia peta yang sudah Anda pilih. Ini membantu memastikan bahwa pencarian akan cocok dengan peta.
  Jika aplikasi Anda melacak atau merutekan aset yang Anda gunakan dalam bisnis Anda, seperti kendaraan pengiriman atau karyawan, Anda hanya dapat menggunakan HERE sebagai penyedia geolokasi Anda. Untuk informasi selengkapnya, lihat bagian 82 dari ketentuan AWS layanan.
4. Pilih opsi Penyimpanan data. Untuk tutorial ini, hasilnya tidak disimpan, sehingga Anda dapat memilih Tidak, sekali pakai saja.
5. Setuju dengan Syarat dan Ketentuan Lokasi Amazon, lalu pilih Buat indeks tempat.
6. Catat ARN yang ditampilkan untuk sumber daya indeks tempat baru Anda. Anda akan menggunakannya untuk membuat otentikasi yang benar di bagian selanjutnya dari tutorial ini.
Untuk membuat pelacak menggunakan konsol Lokasi Amazon.
1. Buka konsol Amazon Location Service.
2. Di panel navigasi kiri, pilih Pelacak.
3. Pilih Buat pelacak.
4. Isi semua bidang yang diperlukan.
5. Di bawah Pemfilteran posisi, kami menyarankan Anda menggunakan pengaturan default:. TimeBased
6. Pilih Buat pelacak untuk menyelesaikan.

Menyiapkan otentikasi untuk aplikasi Anda

Aplikasi yang Anda buat dalam tutorial ini memiliki penggunaan anonim, yang berarti bahwa pengguna Anda tidak diharuskan masuk AWS untuk menggunakan aplikasi. Namun, Amazon Location Service API memerlukan otentikasi untuk digunakan. Anda akan menggunakan Amazon Cognito untuk memberikan otentikasi dan otorisasi bagi pengguna anonim. Tutorial ini akan menggunakan Amazon Cognito untuk mengautentikasi aplikasi Anda.

catatan

Untuk informasi selengkapnya tentang penggunaan Amazon Cognito dengan Amazon Location Service, lihat. Memberikan akses ke Amazon Location Service

Tutorial berikut menunjukkan cara mengatur otentikasi untuk peta, indeks tempat, dan pelacak yang Anda buat serta menyiapkan izin untuk Lokasi Amazon.

Membuat kebijakan IAM untuk melacak

Masuk ke konsol IAM di https://console.aws.amazon.com/iam/ dengan pengguna Anda yang memiliki izin administrator.
Di panel navigasi, pilih Kebijakan.
Di panel konten, pilih Buat kebijakan.

Pilih opsi JSON, lalu salin dan tempel kebijakan JSON ini ke dalam kotak teks JSON.


{
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow",
                "Action": [
                    "geo:GetMapTile",
                    "geo:GetMapStyleDescriptor",
                    "geo:GetMapSprites",
                    "geo:GetMapGlyphs",
                    "geo:SearchPlaceIndexForPosition",
                    "geo:GetDevicePositionHistory",
                    "geo:BatchUpdateDevicePosition"
                ],
                "Resource": [
                    "arn:aws:geo:{Region}:{Account}:map/{MapName}",
                    "arn:aws:geo:{Region}:{Account}:place-index/{IndexName}",
                    "arn:aws:geo:{Region}:{Account}:tracker/{TrackerName}"
                ]
            }
        ]
    }

Ini adalah contoh kebijakan untuk Tracking. Untuk menggunakan contoh untuk kebijakan Anda sendiri, ganti,Region, AccountIndexName, MapName dan TrackerNameplaceholder.

catatan

Meskipun kumpulan identitas yang tidak diautentikasi dimaksudkan untuk eksposur di situs internet yang tidak aman, perhatikan bahwa mereka akan ditukar dengan kredensi standar dan terbatas waktu. AWS

Penting untuk mencakup peran IAM yang terkait dengan kumpulan identitas yang tidak diautentikasi dengan tepat. Untuk informasi selengkapnya tentang penggunaan dan kebijakan pelingkupan yang tepat di Amazon Cognito dengan Amazon Location Service, lihat Memberikan akses ke Amazon Location Service.

Pada halaman Tinjau dan Buat, berikan nama untuk bidang nama kebijakan. Tinjau izin yang diberikan oleh kebijakan Anda, lalu pilih Buat Kebijakan untuk menyimpan pekerjaan Anda.

Kebijakan baru muncul di daftar kebijakan terkelola dan siap dilampirkan.

Siapkan otentikasi untuk pelacakan Anda

Siapkan otentikasi untuk aplikasi peta Anda di konsol Amazon Cognito.
Buka halaman Identity pool.

catatan
Kumpulan yang Anda buat harus berada di AWS akun dan AWS Wilayah yang sama dengan sumber daya Amazon Location Service yang Anda buat di bagian sebelumnya.
Pilih Buat kumpulan Identitas.
Dimulai dengan langkah Configure identity pool trust. Untuk otentikasi akses pengguna, pilih Akses tamu, dan tekan berikutnya.
Pada halaman Konfigurasi izin pilih Gunakan peran IAM yang ada dan masukkan nama peran IAM yang Anda buat di langkah sebelumnya. Saat siap tekan di sebelah untuk melanjutkan ke langkah berikutnya.
Pada halaman Konfigurasi properti, berikan nama untuk kumpulan identitas Anda. Lalu tekan Next.
Pada halaman Tinjau dan buat, tinjau semua informasi yang ada lalu tekan Buat kumpulan identitas.
Buka halaman Identity pool, dan pilih kumpulan identitas yang baru saja Anda buat. Kemudian salin atau tuliskan IdentityPoolId yang akan Anda gunakan nanti di skrip browser Anda.

Membuat aplikasi iOS dasar

Dalam tutorial ini, Anda akan membuat aplikasi iOS yang menyematkan peta, dan memungkinkan pengguna untuk menemukan apa yang ada di lokasi di peta.

Pertama, mari buat aplikasi Swift menggunakan wizard proyek Xcode.

Untuk membuat aplikasi kosong (Xcode)

Buka Xcode, dan dari menu, pilih File, New, New Project.
Dari tab iOS, pilih Aplikasi, lalu pilih Berikutnya.
Berikan Nama Produk, Pengidentifikasi Organisasi, dan di input SwiftUI bidang Antarmuka. Pilih Berikutnya untuk menyelesaikan seleksi.
Pilih lokasi di mana Anda akan menyimpan proyek Anda dan tekan tombol buat untuk membuat aplikasi kosong.

Setelah Anda membuat aplikasi dasar, Anda harus menginstal paket yang diperlukan untuk aplikasi sampel.

Menginstal dependensi yang diperlukan

Di Xcode, klik kanan pada proyek dan pilih Add Packages... . Ini akan membuka jendela Paket, di mana Anda dapat menambahkan paket ke proyek Anda.
Di jendela Paket, tambahkan paket berikut:
- Untuk paket asli Maplibre, gunakan URL ini: https://github.com/maplibre/. maplibre-gl-native-distribution Dari URL, tambahkan paket-paket ini:maplibre-gl-native-distribution, danMapbox.
- Untuk SDK iOS autentikasi Lokasi Amazon, gunakan URL ini: https://github.com/aws-geospatial/ amazon-location-mobile-auth -sdk-ios. Dari URL, tambahkan paket-paket ini:amazon-location-mobile-auth-sdk-ios, danAmazonLocationiOSAuthSDK.
- Untuk SDK iOS yang melacak Lokasi Amazon, gunakan URL ini: https://github.com/aws-geospatial/ amazon-location-mobile-tracking -sdk-ios. Dari URL, tambahkan paket-paket ini:amazon-location-mobile-tracking-sdk-ios, danAmazonLocationiOSTrackingSDK.

Menyiapkan kode awal

Mengaktifkan izin Lokasi di aplikasi Anda

Buka proyek Xcode Anda.
Temukan Info.plist file proyek.
Tambahkan kunci yang diperlukan untuk izin lokasi berdasarkan persyaratan aplikasi Anda. Berikut kuncinya:
- NSLocationWhenInUseUsageDescription: Deskripsi mengapa aplikasi Anda memerlukan akses lokasi saat sedang digunakan.
- NSLocationAlwaysAndWhenInUseUsageDescription: Deskripsi mengapa aplikasi Anda membutuhkan akses lokasi berkelanjutan.

Sekarang Anda perlu mengonfigurasi nilai sumber daya di aplikasi Anda. Tambahkan file baru bernama Config.xcconfig dan isi nilai yang telah Anda buat sebelumnya di konsol Amazon.


REGION =
INDEX_NAME =
MAP_NAME =
IDENTITY_POOL_ID =
TRACKER_NAME =

Dari bagian navigator sisi kiri, pilih proyek.
Di bawah bagian target, pilih aplikasi Anda dan klik tab info.
Tambahkan properti info dengan nilai seperti di bawah ini:

Tambahkan Config.swift file dengan konten di bawah ini, yang akan membaca nilai konfigurasi dari file info Bundle.


import Foundation

enum Config {
    static let region = Bundle.main.object(forInfoDictionaryKey: "Region") as! String
    static let mapName = Bundle.main.object(forInfoDictionaryKey: "MapName") as! String
    static let indexName = Bundle.main.object(forInfoDictionaryKey: "IndexName") as! String
    static let identityPoolId = Bundle.main.object(forInfoDictionaryKey: "IdentityPoolId") as! String
    static let trackerName = Bundle.main.object(forInfoDictionaryKey: "TrackerName") as! String
}

Buat folder baru dengan nama ViewModel dan tambahkan TrackingViewModel.swift file di dalamnya.


import SwiftUI
import AmazonLocationiOSAuthSDK
import MapLibre

final class TrackingViewModel : ObservableObject {
    @Published var trackingButtonText = NSLocalizedString("StartTrackingLabel", comment: "")
    @Published var trackingButtonColor = Color.blue
    @Published var trackingButtonIcon = "play.circle"
    @Published var region : String
    @Published var mapName : String
    @Published var indexName : String
    @Published var identityPoolId : String
    @Published var trackerName : String
    @Published var showAlert = false
    @Published var alertTitle = ""
    @Published var alertMessage = ""
    @Published var centerLabel = ""

    var clientIntialised: Bool
    var client: LocationTracker!
    var authHelper: AuthHelper
    var credentialsProvider: LocationCredentialsProvider?
    var mlnMapView: MLNMapView?
    var mapViewDelegate: MapViewDelegate?
    var lastGetTrackingTime: Date?
    var trackingActive: Bool
    
    init(region: String, mapName: String, indexName: String, identityPoolId: String, trackerName: String) {
        self.region = region
        self.mapName = mapName
        self.indexName = indexName
        self.identityPoolId = identityPoolId
        self.trackerName = trackerName
        self.authHelper = AuthHelper()
        self.trackingActive = false
        self.clientIntialised = false
    }
    
    func authWithCognito(identityPoolId: String?) {
        guard let identityPoolId = identityPoolId?.trimmingCharacters(in: .whitespacesAndNewlines)
        else {
            alertTitle = NSLocalizedString("Error", comment: "")
            alertMessage = NSLocalizedString("NotAllFieldsAreConfigured", comment: "")
            showAlert = true
            return
        }
        credentialsProvider = authHelper.authenticateWithCognitoUserPool(identityPoolId: identityPoolId)
        initializeClient()
    }
    
    func initializeClient() {
        client = LocationTracker(provider: credentialsProvider!, trackerName: trackerName)
        clientIntialised = true
    }
}

Menambahkan peta interaktif ke aplikasi Anda

Anda sekarang akan menambahkan kontrol peta ke aplikasi Anda. Tutorial ini menggunakan MapLibre dan AWS API untuk mengelola tampilan peta dalam aplikasi. Kontrol peta itu sendiri adalah bagian dari pustaka iOS Asli MapLibre GL.

Tambahkan MapView.swift file di bawah folder Views dengan kode berikut:


import SwiftUI
import MapLibre

struct MapView: UIViewRepresentable {
    var onMapViewAvailable: ((MLNMapView) -> Void)?
    var mlnMapView: MLNMapView?
    var trackingViewModel: TrackingViewModel
    
    func makeCoordinator() -> MapView.Coordinator {
        return Coordinator(self, trackingViewModel: trackingViewModel)
    }
    
    func makeUIView(context: Context) -> MLNMapView {
        let styleURL = URL(string: "https://maps.geo.\(trackingViewModel.region).amazonaws.com/maps/v0/maps/\(trackingViewModel.mapName)/style-descriptor")
        let mapView = MLNMapView(frame: .zero, styleURL: styleURL)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.setZoomLevel(15, animated: true)
        mapView.showsUserLocation = true
        mapView.userTrackingMode = .follow
        context.coordinator.mlnMapView = mapView
        mapView.delegate = context.coordinator

        mapView.logoView.isHidden = true
        context.coordinator.addCenterMarker()
        
        onMapViewAvailable?(mapView)
        trackingViewModel.mlnMapView = mapView
        return mapView
    }
    
    func updateUIView(_ uiView: MLNMapView, context: Context) {
    }
    
    class Coordinator: NSObject, MLNMapViewDelegate, MapViewDelegate {
        var control: MapView
        var mlnMapView: MLNMapView?
        var trackingViewModel: TrackingViewModel
        var centerMarker: MLNPointAnnotation?
        
        public init(_ control: MapView, trackingViewModel: TrackingViewModel) {
            self.control = control
            self.trackingViewModel = trackingViewModel
            super.init()
            self.trackingViewModel.mapViewDelegate = self
        }

        func mapViewDidFinishRenderingMap(_ mapView: MLNMapView, fullyRendered: Bool) {
            if(fullyRendered) {
                mapView.accessibilityIdentifier = "MapView"
                mapView.isAccessibilityElement = false
            }
        }
        
        func addCenterMarker() {
            guard let mlnMapView = mlnMapView else {
                return
            }

            let centerCoordinate = mlnMapView.centerCoordinate
            let marker = MLNPointAnnotation()
            marker.coordinate = centerCoordinate
            marker.accessibilityLabel = "CenterMarker"
            mlnMapView.addAnnotation(marker)
            centerMarker = marker

            trackingViewModel.reverseGeocodeCenter(centerCoordinate: centerCoordinate, marker: marker)
        }
        
        func mapView(_ mapView: MLNMapView, regionDidChangeAnimated animated: Bool) {
            if let marker = centerMarker {
                              DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                    mapView.deselectAnnotation(marker, animated: false)
                    marker.coordinate = mapView.centerCoordinate
                    let centerCoordinate = mapView.centerCoordinate
                    self.trackingViewModel.reverseGeocodeCenter(centerCoordinate: centerCoordinate, marker: marker)
                }
            }
        }
    }
}

Tambahkan AWSSignatureV4Delegate file di bawah ViewModelfolder. File ini digunakan untuk menandatangani dengan semua permintaan MapView http untuk membuat peta:


import MapLibre
import AmazonLocationiOSAuthSDK
 
class AWSSignatureV4Delegate : NSObject, MLNOfflineStorageDelegate {
    private let awsSigner: AWSSigner
  
    init(credentialsProvider: LocationCredentialsProvider) {
        self.awsSigner = DENY LIST ERROR , serviceName: "geo")
        super.init()
    }
 
    func offlineStorage(_ storage: MLNOfflineStorage, urlForResourceOf kind: MLNResourceKind, with url: URL) -> URL {
        if url.host?.contains("amazonaws.com") != true {
            return url
        }
        let signedURL = awsSigner.signURL(url: url, expires: .hours(1))
        
        return signedURL
    }
}

Tambahkan UserLocationView.swift file di bawah folder Views. Ini menambahkan tombol yang memusatkan peta ke lokasi pengguna


import SwiftUI

struct UserLocationView: View {
    @ObservedObject var trackingViewModel: TrackingViewModel
    var body: some View {
            Button(action: {
                trackingViewModel.locateMe()
            }) {
                Image(systemName: "scope")
                    .resizable()
                    .frame(width: 24, height: 24)
                    .padding(5)
                    .background(Color.white)
                    .foregroundColor(.blue)
                    .clipShape(RoundedRectangle(cornerRadius: 8))
                    .shadow(color: Color.black.opacity(0.3), radius: 3, x: 0, y: 2)
            }
            .accessibility(identifier: "LocateMeButton")
            .padding(.trailing, 10)
            .padding(.bottom, 10)
            .frame(maxWidth: .infinity, alignment: .trailing)
    }
}

Tambahkan TrackingView.swift file dengan kode berikut:


import SwiftUI

struct TrackingView: View {
    @ObservedObject var trackingViewModel: TrackingViewModel
    var body: some View {
        ZStack(alignment: .bottom) {
            MapView(trackingViewModel: trackingViewModel)
            VStack {
                UserLocationView(trackingViewModel: trackingViewModel)
            }
        }
        .onAppear() {
            if !trackingViewModel.identityPoolId.isEmpty {
                trackingViewModel.authWithCognito(identityPoolId: trackingViewModel.identityPoolId)
            }
        }
    }
}

Anda sekarang dapat membangun aplikasi. Untuk menjalankannya, Anda mungkin harus menyiapkan perangkat untuk meniru di Xcode atau menggunakan aplikasi di perangkat Anda. Gunakan aplikasi ini untuk melihat bagaimana kontrol peta berperilaku. Anda dapat menggeser dengan menyeret peta dan mencubit untuk memperbesar. Sendiri, Anda dapat mengubah cara kerja kontrol peta untuk menyesuaikannya dengan kebutuhan aplikasi Anda.

Menambahkan pencarian ke aplikasi Anda

Anda sekarang akan menambahkan pencarian geocoding terbalik ke aplikasi, di mana Anda menemukan item di lokasi. Untuk menyederhanakan penggunaan aplikasi iOS, kami akan mencari di tengah layar. Untuk menemukan lokasi baru, pindahkan peta ke tempat yang ingin Anda cari. Kami akan menempatkan penanda di tengah peta untuk menunjukkan di mana kami mencari.

Tambahkan kode berikut dalam file `TrackingViewModel.swift` yang terkait dengan pencarian geocoding terbalik


func reverseGeocodeCenter(centerCoordinate: CLLocationCoordinate2D, marker: MLNPointAnnotation) {
    let position = [NSNumber(value: centerCoordinate.longitude), NSNumber(value: centerCoordinate.latitude)]
    searchPositionAPI(position: position, marker: marker)
}

func searchPositionAPI(position: [Double], marker: MLNPointAnnotation) {
    if let amazonClient = authHelper.getLocationClient() {
        Task {
            let searchRequest = SearchPlaceIndexForPositionInput(indexName: indexName, language: "en" , maxResults: 10, position: position)
            let searchResponse = try? await amazonClient.searchPosition(indexName: indexName, input: searchRequest)
            DispatchQueue.main.async {
                self.centerLabel = searchResponse?.results?.first?.place?.label ?? ""
                self.mlnMapView?.selectAnnotation(marker, animated: true, completionHandler: {})
            }
        }
    }
}

Perbarui TrackingView.swift file dengan kode berikut yang akan menampilkan alamat lokasi terpusat mapview


import SwiftUI

struct TrackingView: View {
    @ObservedObject var trackingViewModel: TrackingViewModel
    var body: some View {
        ZStack(alignment: .bottom) {
            if trackingViewModel.mapSigningIntialised {
                MapView(trackingViewModel: trackingViewModel)
                VStack {
                    UserLocationView(trackingViewModel: trackingViewModel)
                    CenterAddressView(trackingViewModel: trackingViewModel)
                }
            }
            else {
                Text("Loading...") 
            }
        }
        .onAppear() {
            if !trackingViewModel.identityPoolId.isEmpty {
                Task {
                    do {
                        try await trackingViewModel.authWithCognito(identityPoolId: trackingViewModel.identityPoolId)
                    }
                    catch {
                        print(error)
                    }
                }
            }
        }
    }
}

Menambahkan pelacakan ke aplikasi Anda

Langkah terakhir untuk aplikasi Anda adalah menambahkan fungsionalitas pelacakan ke aplikasi Anda. Dalam hal ini, Anda akan menambahkan titik pelacak mulai, berhenti melacak, mengambil, dan menampilkan titik pelacak di aplikasi Anda.

Tambahkan TrackingBottomView.swift file dalam proyek Anda. Yang memiliki tombol yang memulai dan berhenti melacak lokasi pengguna dan menunjukkan titik pelacakan di peta.


import SwiftUI

struct TrackingBottomView: View {
    @ObservedObject var trackingViewModel: TrackingViewModel
    var body: some View {
           Button(action: {
               Task {
                   if(trackingViewModel.trackingButtonText == NSLocalizedString("StartTrackingLabel", comment: "")) {
                       trackingViewModel.startTracking()
                   } else {
                       trackingViewModel.stopTracking()
                   }
               }
           }) {
               HStack {
                   Spacer()
                   Text("Tracking")
                       .foregroundColor(trackingViewModel.trackingButtonColor)
                       .background(.white)
                       .cornerRadius(15.0)
                   
                   Image(systemName: trackingViewModel.trackingButtonIcon)
                       .resizable()
                       .frame(width: 24, height: 24)
                       .padding(5)
                       .background(.white)
                       .foregroundColor(trackingViewModel.trackingButtonColor)

               }
           }
           .accessibility(identifier: "TrackingButton")
           .background(.white)
           .clipShape(RoundedRectangle(cornerRadius: 8))
           .padding(.trailing, 10)
           .padding(.bottom, 40)
           .frame(width: 130, alignment: .trailing)
           .shadow(color: Color.black.opacity(0.3), radius: 3, x: 0, y: 2)
       }
}

Perbarui TrackingView.swift file dengan kode berikut


import SwiftUI

struct TrackingView: View {
    @ObservedObject var trackingViewModel: TrackingViewModel
    var body: some View {
        ZStack(alignment: .bottom) {
            if trackingViewModel.mapSigningIntialised {
                MapView(trackingViewModel: trackingViewModel)
                VStack {
                    UserLocationView(trackingViewModel: trackingViewModel)
                    CenterAddressView(trackingViewModel: trackingViewModel)
                    TrackingBottomView(trackingViewModel: trackingViewModel)
                }
            }
            else {
                Text("Loading...") 
            }
        }
        .onAppear() {
            if !trackingViewModel.identityPoolId.isEmpty {
                Task {
                    do {
                        try await trackingViewModel.authWithCognito(identityPoolId: trackingViewModel.identityPoolId)
                    }
                    catch {
                        print(error)
                    }
                }
            }
        }
    }
}

Tambahkan kode berikut dalam TrackingViewModel.swift file. Fungsi-fungsi ini bertanggung jawab untuk memulai dan menghentikan pelacakan. Ini juga akan menampilkan peringatan kesalahan jika izin lokasi pengguna ditolak.

Untuk menerapkan pelacakan latar depan salin tempel contoh kode berikut:


func showLocationDeniedRationale() {
        alertTitle = NSLocalizedString("locationManagerAlertTitle", comment: "")
        alertMessage = NSLocalizedString("locationManagerAlertText", comment: "")
        showAlert = true
    }
    
    // Required in info.plist: Privacy - Location When In Use Usage Description
    func startTracking() {
        do {
            print("Tracking Started...")
            if(client == nil) {
                initializeClient()
            }
            try client.startTracking()
            DispatchQueue.main.async { [self] in
                self.trackingButtonText = NSLocalizedString("StopTrackingLabel", comment: "")
                self.trackingButtonColor = .red
                self.trackingButtonIcon = "pause.circle"
                trackingActive = true
            }
        } catch TrackingLocationError.permissionDenied {
            showLocationDeniedRationale()
        } catch {
            print("error in tracking")
        }
    }
    
    func stopTracking() {
        print("Tracking Stopped...")
        client.stopTracking()
        trackingButtonText = NSLocalizedString("StartTrackingLabel", comment: "")
        trackingButtonColor = .blue
        trackingButtonIcon = "play.circle"
        trackingActive = false
    }

catatan

Mereka startTracking akan meminta izin lokasi pengguna. Aplikasi harus menggunakan izin When In Use atau Only Once. Jika tidak, aplikasi akan membuang kesalahan izin ditolak.

Untuk mendapatkan dan menampilkan lokasi pelacakan, ikuti prosedur ini:

Untuk mendapatkan lokasi dari perangkat pengguna, Anda perlu memberikan tanggal dan waktu mulai dan berakhir. Satu panggilan mengembalikan maksimum 100 lokasi pelacakan, tetapi jika ada lebih dari 100 lokasi pelacakan, itu akan mengembalikan nilai `nextToken`. Anda perlu memanggil panggilan `getTrackerDeviceLocation` berikutnya dengan `nextToken` untuk memuat lebih banyak titik pelacakan untuk waktu mulai dan berakhir yang diberikan.


 func getTrackingPoints(nextToken: String? = nil) async throws {
        guard trackingActive else {
            return
        }
        // Initialize startTime to 24 hours ago from the current date and time.
        let startTime: Date = Date().addingTimeInterval(-86400)
        var endTime: Date = Date()
        if lastGetTrackingTime != nil {
            endTime = lastGetTrackingTime!
        }
        let result = try await client?.getTrackerDeviceLocation(nextToken: nextToken, startTime: startTime, endTime: endTime)
        if let trackingData = result {
            
            lastGetTrackingTime = Date()
            let devicePositions = trackingData.devicePositions

            let positions = devicePositions!.sorted { (pos1: LocationClientTypes.DevicePosition, pos2: LocationClientTypes.DevicePosition) -> Bool in
                guard let date1 = pos1.sampleTime,
                      let date2 = pos2.sampleTime else {
                    return false
                }
                return date1 < date2
            }

            let trackingPoints = positions.compactMap { position -> CLLocationCoordinate2D? in
                guard let latitude = position.position!.last, let longitude = position.position!.first else {
                    return nil
                }
                return CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
            }
            DispatchQueue.main.async {
                self.mapViewDelegate!.drawTrackingPoints( trackingPoints: trackingPoints)
            }
            if let nextToken = trackingData.nextToken {
                try await getTrackingPoints(nextToken: nextToken)
            }
        }
    }

Sekarang ganti kode dalam MapView.swift file dengan kode berikut:


import SwiftUI
import MapLibre

struct MapView: UIViewRepresentable {
    var onMapViewAvailable: ((MLNMapView) -> Void)?
    var mlnMapView: MLNMapView?
    var trackingViewModel: TrackingViewModel
    
    func makeCoordinator() -> MapView.Coordinator {
        return Coordinator(self, trackingViewModel: trackingViewModel)
    }
    
    func makeUIView(context: Context) -> MLNMapView {
        let styleURL = URL(string: "https://maps.geo.\(trackingViewModel.region).amazonaws.com/maps/v0/maps/\(trackingViewModel.mapName)/style-descriptor")
        let mapView = MLNMapView(frame: .zero, styleURL: styleURL)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.setZoomLevel(15, animated: true)
        mapView.showsUserLocation = true
        mapView.userTrackingMode = .follow
        context.coordinator.mlnMapView = mapView
        mapView.delegate = context.coordinator

        mapView.logoView.isHidden = true
        context.coordinator.addCenterMarker()
        
        onMapViewAvailable?(mapView)
        trackingViewModel.mlnMapView = mapView
        return mapView
    }
    
    func updateUIView(_ uiView: MLNMapView, context: Context) {
    }
    
    class Coordinator: NSObject, MLNMapViewDelegate, MapViewDelegate {
        var control: MapView
        var mlnMapView: MLNMapView?
        var trackingViewModel: TrackingViewModel
        var centerMarker: MLNPointAnnotation?
        
        public init(_ control: MapView, trackingViewModel: TrackingViewModel) {
            self.control = control
            self.trackingViewModel = trackingViewModel
            super.init()
            self.trackingViewModel.mapViewDelegate = self
        }

        func mapViewDidFinishRenderingMap(_ mapView: MLNMapView, fullyRendered: Bool) {
            if(fullyRendered) {
                mapView.accessibilityIdentifier = "MapView"
                mapView.isAccessibilityElement = false
            }
        }
        
        func addCenterMarker() {
            guard let mlnMapView = mlnMapView else {
                return
            }

            let centerCoordinate = mlnMapView.centerCoordinate
            let marker = MLNPointAnnotation()
            marker.coordinate = centerCoordinate
            marker.accessibilityLabel = "CenterMarker"
            mlnMapView.addAnnotation(marker)
            centerMarker = marker

            trackingViewModel.reverseGeocodeCenter(centerCoordinate: centerCoordinate, marker: marker)
        }
        
        func mapView(_ mapView: MLNMapView, regionDidChangeAnimated animated: Bool) {
            if let marker = centerMarker {
                DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                    mapView.deselectAnnotation(marker, animated: false)
                    marker.coordinate = mapView.centerCoordinate
                    let centerCoordinate = mapView.centerCoordinate
                    self.trackingViewModel.reverseGeocodeCenter(centerCoordinate: centerCoordinate, marker: marker)
                }
            }
        }
        
        func mapView(_ mapView: MLNMapView, viewFor annotation: MLNAnnotation) -> MLNAnnotationView? {
            guard let pointAnnotation = annotation as? MLNPointAnnotation else {
                return nil
            }

            let reuseIdentifier: String
            var color: UIColor = .black
            if pointAnnotation.accessibilityLabel == "Tracking" {
                reuseIdentifier = "TrackingAnnotation"
                color = UIColor(red: 0.00784313725, green: 0.50588235294, blue: 0.58039215686, alpha: 1)
            } else if pointAnnotation.accessibilityLabel == "LocationChange" {
                reuseIdentifier = "LocationChange"
                color = .gray
            } else {
                reuseIdentifier = "DefaultAnnotationView"
            }

            var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseIdentifier)

            if annotationView == nil {
                if reuseIdentifier != "DefaultAnnotationView" {
                    annotationView = MLNAnnotationView(annotation: annotation, reuseIdentifier: reuseIdentifier)
                    //If point annotation is an uploaded Tracking point the radius is 20 and color is blue, otherwise radius is 10 and color is gray
                    let radius = pointAnnotation.accessibilityLabel == "Tracking" ? 20:10
                    annotationView?.frame = CGRect(x: 0, y: 0, width: radius, height: radius)
                    annotationView?.backgroundColor = color
                    annotationView?.layer.cornerRadius = 10
                    
                    if pointAnnotation.accessibilityLabel == "Tracking" {
                        annotationView?.layer.borderColor = UIColor.white.cgColor
                        annotationView?.layer.borderWidth = 2.0
                        annotationView?.layer.shadowColor = UIColor.black.cgColor
                        annotationView?.layer.shadowOffset = CGSize(width: 0, height: 2)
                        annotationView?.layer.shadowRadius = 3
                        annotationView?.layer.shadowOpacity = 0.2
                        annotationView?.clipsToBounds = false
                    }
                }
                else {
                    return nil
                }
            }

            return annotationView
        }
        
        func mapView(_ mapView: MLNMapView, didUpdate userLocation: MLNUserLocation?) {
            if (userLocation?.location) != nil {
                if trackingViewModel.trackingActive {
                    let point = MLNPointAnnotation()
                    point.coordinate = (userLocation?.location!.coordinate)!
                    point.accessibilityLabel = "LocationChange"
                    mapView.addAnnotation(point)
                    Task {
                        do {
                            try await trackingViewModel.getTrackingPoints()
                        }
                        catch {
                            print(error)
                        }
                    }
                }
            }
        }
        
        func checkIfTrackingAnnotationExists(on mapView: MLNMapView, at coordinates: CLLocationCoordinate2D) -> Bool {
            let existingAnnotation = mapView.annotations?.first(where: { annotation in
                guard let annotation = annotation as? MLNPointAnnotation else { return false }
                return annotation.coordinate.latitude == coordinates.latitude &&
                annotation.coordinate.longitude == coordinates.longitude && annotation.accessibilityLabel == "Tracking" })
            return existingAnnotation != nil
        }
        
        public func drawTrackingPoints(trackingPoints: [CLLocationCoordinate2D]?) {
            guard let mapView = mlnMapView, let newTrackingPoints = trackingPoints, !newTrackingPoints.isEmpty else {
                return
            }

            let uniqueCoordinates = newTrackingPoints.filter { coordinate in
                !checkIfTrackingAnnotationExists(on: mapView, at: coordinate)
            }

            let points = uniqueCoordinates.map { coordinate -> MLNPointAnnotation in
                let point = MLNPointAnnotation()
                point.coordinate = coordinate
                point.accessibilityLabel = "Tracking"
                return point
            }
            mapView.addAnnotations(points)
        }
    }
}

protocol MapViewDelegate: AnyObject {
    func drawTrackingPoints(trackingPoints: [CLLocationCoordinate2D]?)
}

Untuk melokalisasi nilai string, gunakan prosedur berikut.

Buat dan tambahkan file baru bernamaLocalizable.xcstrings.
Klik kanan pada Localizable.xcstrings file dan buka sebagai Source Code.

Ganti kontennya dengan yang berikut:


{
  "sourceLanguage" : "en",
  "strings" : {
    "Cancel" : {
      "extractionState" : "manual",
      "localizations" : {
        "en" : {
          "stringUnit" : {
            "state" : "translated",
            "value" : "Cancel"
          }
        }
      }
    },
    "Error" : {
      "extractionState" : "manual",
      "localizations" : {
        "en" : {
          "stringUnit" : {
            "state" : "translated",
            "value" : "Error"
          }
        }
      }
    },
    "Loading..." : {

    },
    "locationManagerAlertText" : {
      "extractionState" : "manual",
      "localizations" : {
        "en" : {
          "stringUnit" : {
            "state" : "translated",
            "value" : "Allow \\\"Quick Start App\\\" to use your location"
          }
        }
      }
    },
    "locationManagerAlertTitle" : {
      "extractionState" : "manual",
      "localizations" : {
        "en" : {
          "stringUnit" : {
            "state" : "translated",
            "value" : "We need your location to detect your location in map"
          }
        }
      }
    },
    "NotAllFieldsAreConfigured" : {
      "extractionState" : "manual",
      "localizations" : {
        "en" : {
          "stringUnit" : {
            "state" : "translated",
            "value" : "Not all the fields are configured"
          }
        }
      }
    },
    "OK" : {
      "extractionState" : "manual",
      "localizations" : {
        "en" : {
          "stringUnit" : {
            "state" : "translated",
            "value" : "OK"
          }
        }
      }
    },
    "StartTrackingLabel" : {
      "localizations" : {
        "en" : {
          "stringUnit" : {
            "state" : "translated",
            "value" : "Start Tracking"
          }
        }
      }
    },
    "StopTrackingLabel" : {
      "localizations" : {
        "en" : {
          "stringUnit" : {
            "state" : "translated",
            "value" : "Stop Tracking"
          }
        }
      }
    },
    "Tracking" : {

    }
  },
  "version" : "1.0"
}

Simpan file Anda, dan buat serta jalankan aplikasi Anda untuk melihat pratinjau fungsionalitas.
Izinkan izin lokasi dan ketuk tombol pelacakan. Aplikasi akan mulai mengunggah lokasi pengguna dan mengunggahnya ke pelacak Lokasi Amazon. Ini juga akan menampilkan perubahan lokasi pengguna, titik pelacakan, dan alamat saat ini di peta.

Aplikasi mulai cepat Anda selesai. Tutorial ini telah menunjukkan kepada Anda cara membuat aplikasi iOS yang:

Membuat peta yang dapat berinteraksi dengan pengguna.
Menangani beberapa peristiwa peta yang terkait dengan pengguna mengubah tampilan peta.
Memanggil Amazon Location Service API, khususnya untuk mencari peta di lokasi, menggunakan Amazon Location's searchByPosition API.

Apa selanjutnya

Kode sumber untuk aplikasi ini tersedia di GitHub.

Untuk mendapatkan lebih banyak dari Lokasi Amazon, Anda dapat melihat sumber daya berikut:

Selami lebih dalam konsep Amazon Location Service
Dapatkan informasi selengkapnya tentang cara menggunakan fitur dan fungsionalitas Lokasi Amazon
Lihat cara memperluas sampel ini dan membangun aplikasi yang lebih kompleks dengan melihat contoh kode menggunakan Lokasi Amazon

Awas Javascript dinonaktifkan atau tidak tersedia di browser Anda.

Untuk menggunakan Dokumentasi AWS, Javascript harus diaktifkan. Lihat halaman Bantuan browser Anda untuk petunjuk.

Konvensi Dokumen

Membuat aplikasi Android

Konsep Lokasi Amazon