Guida all'implementazione della Registrazione rapida e verificata

Panoramica

Gli utenti si sono abituati a vivere e operare in un mondo digitale in cui praticità, velocità e sicurezza siano aspettative di base. Quando richiedono una carta di credito, un conto bancario o un prestito, si aspettano che il processo sia rapido e semplice.

Maggiore è il numero di utenti che devono digitare o inserire dati duplicati, minori sono le possibilità a fidelizzarli come clienti. Creare un rapido, semplice e l'esperienza di registrazione verificata migliorerà l'esperienza utente offrendoti un vantaggio per mantenere gli utenti sul tuo sito.

L'inserimento manuale degli indirizzi può comportare la riduzione delle conversioni o errori dati CRM e costosi errori di consegna. Veloce e Con la Registrazione verificata si effettua la registrazione suggerendo all'istante gli indirizzi nelle vicinanze in pochi tocchi e mostrare l'indirizzo inserito per una conferma visiva, aiutando l'utente avere la certezza di aver inserito l'indirizzo corretto. La verifica del l'indirizzo dell'utente che utilizza la sua posizione attuale contribuisce anche alla prevenzione delle frodi e rafforza la fiducia degli utenti nei confronti dei tuoi prodotti e servizi. La verifica può anche aumentare la tua sicurezza nell'offrire il conto bancario e delle carte di credito.

Questo argomento fornisce indicazioni all'implementazione per creare un modello Registrazione verificata con Google Maps Platform. Poiché gli utenti probabilmente iscrivetevi sui dispositivi mobili. La maggior parte degli esempi di implementazione in questo su Android. (puoi vedere fonte di esempio completa qui). Per ottenere gli stessi risultati puoi anche utilizzare gli SDK per iOS.

Il seguente diagramma mostra le API principali coinvolte nella creazione della soluzione (fai clic per ingrandire).

Abilitazione delle API in corso…

Per implementare questi suggerimenti, devi abilitare le API seguenti nel Console Google Cloud:

• SDK Maps per Android (o l'API per la piattaforma che preferisci)
• API Places
• API Geocoding

Per ulteriori informazioni sulla configurazione, vedi Come ottenere hai iniziato a usare Google Maps Platform.

Sezioni di best practice

Di seguito sono riportate le pratiche e le personalizzazioni che tratteremo in questo argomento.

• check_circle_filled L'icona del segno di spunta è una best practice fondamentale.
• stars L'icona a forma di stella è facoltativa, ma consigliata per migliorare la soluzione.

Place Autocomplete può semplificare l'inserimento di indirizzi nella tua applicazione, a tassi di conversione più elevati e un'esperienza fluida per i tuoi clienti. Il completamento automatico fornisce un singolo campo di immissione rapida con "type-ahead" indirizzo previsione che può essere utilizzata per compilare automaticamente un modulo per l'indirizzo di registrazione. Incorporando Place Autocomplete nel flusso di registrazione, puoi:

• Riduci gli errori di inserimento degli indirizzi.
• Riduci il numero di passaggi della procedura di registrazione.
• Semplifica l'esperienza di inserimento dell'indirizzo su dispositivi mobili o indossabili.
• Riduci in modo significativo il numero di tasti e il tempo totale necessario per la registrazione del cliente.

Quando l'utente seleziona la casella di immissione Completamento automatico e inizia a digitare, di previsioni degli indirizzi.

Quando l'utente seleziona un indirizzo dall'elenco delle previsioni, puoi utilizzare la risposta per verificare l'indirizzo e ottenere la posizione. La tua applicazione può completare i campi corretti del modulo di inserimento dell'indirizzo, come mostrato come mostrato nella figura che segue.

Google Maps Platform fornisce un widget Place Autocomplete per dispositivi mobili piattaforme e web. Il widget, mostrato nelle figure precedenti, fornisce una finestra di dialogo di ricerca con funzionalità di completamento automatico, che puoi anche ottimizzare la ricerca con ambito a livello di località.

Questa sezione descrive come implementare Place Autocomplete per Quick & Registrazione verificata.

Aggiunta del widget Place Autocomplete

In Android, puoi aggiungere il widget di completamento automatico utilizzando un Completamento automatico dell'intent che avvia Place Autocomplete dal campo di immissione Riga indirizzo 1, dove l'utente inizierà a inserire il proprio indirizzo. Quando iniziano a digitare, potrà selezionare il proprio indirizzo dall'elenco delle previsioni di completamento automatico.

Innanzitutto, prepara un'Avvio attività utilizzando ActivityResultLauncher, che ricorderà un risultato dall'attività avviata. Il callback del risultato conterrà un oggetto Place corrispondente all'indirizzo selezionato dall'utente nel completamento automatico. per le previsioni.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

Poi, definisci i campi, la posizione e le proprietà del tipo Posiziona l'intent Autocomplete e crealo con Autocomplete.IntentBuilder Infine, avvia l'intent utilizzando il ActivityResultLauncher definito nel precedente esempio di codice.

    private void startAutocompleteIntent() {

        // Set the fields to specify which types of place data to
        // return after the user has made a selection.
        List<Place.Field> fields = Arrays.asList(Place.Field.ADDRESS_COMPONENTS,
                Place.Field.LAT_LNG, Place.Field.VIEWPORT);

        // Build the autocomplete intent with field, country, and type filters applied
        Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
                .setCountries(Arrays.asList("US"))
                .setTypesFilter(new ArrayList<String>() {{
                    add(TypeFilter.ADDRESS.toString().toLowerCase());
                }})
                .build(this);
        startAutocomplete.launch(intent);
    }

Gestione dell'indirizzo restituito da Place Autocomplete

La definizione precedente di ActivityResultLauncher ha anche definito cosa quando il risultato dell'attività viene restituito nel callback. Se l'utente selezionata una previsione, verrà pubblicata nell'intent contenuto in l'oggetto risultato. Poiché l'intent è stato creato da Autocomplete.IntentBuilder, il metodo Autocomplete.getPlaceFromIntent() può estrarre l'oggetto Place da lì.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

Da qui, chiama Place.getAddressComponents() e associa ogni indirizzo al relativo campo di immissione nel modulo dell'indirizzo, compilando il componente con il valore del luogo selezionato dall'utente.

Acquisizione dei dati degli indirizzi dalla previsione anziché da quelli inseriti manualmente assicura che l'indirizzo sia preciso, che sia noto e e ridurre così le sequenze di tasti da parte dell'utente.

Considerazioni per l'implementazione del completamento automatico del luogo

La funzionalità Place Autocomplete offre diverse opzioni che consentono di usare la sua implementazione se vuoi usare qualcosa di più del semplice widget. Puoi utilizzare la modalità una combinazione di servizi per ottenere esattamente ciò di cui hai bisogno per le corrispondenze di un luogo nel modo corretto.

• Per un modulo ADDRESS, imposta il parametro tipi su address per limitare il corrispondono a indirizzi stradali completi. Scopri di più su tipi supportati nelle richieste Place Autocomplete.

• Imposta le limitazioni e i bias appropriati se non devi eseguire ricerche in tutto il mondo. Esistono diversi parametri che può essere utilizzato per differenziare o limitare qualsiasi corrispondenza solo a regioni specifiche.

  • Usa RectangularBounds per impostare i limiti rettangolari a cui applicare vincoli un'area, usa setLocationRestriction() per assicurarti che solo gli indirizzi in vengono restituite queste aree.

  • Utilizza setCountries() per limitare le risposte a un gruppo specifico di paesi.

• Lascia i campi modificabili nel caso in cui alcuni campi non vengano trovati per la corrispondenza. e consentire ai clienti di aggiornare l'indirizzo, se necessario. Dalla maggior parte degli indirizzi restituiti da Place Autocomplete non contengono numeri di presupposti secondari come numeri di appartamenti, interni o unità, puoi spostare lo stato attivo sulla Riga indirizzo 2 per incoraggiare l'utente a inserire queste informazioni, se necessario.

Durante l'inserimento dell'indirizzo, fornisci agli utenti una conferma visiva del su una mappa. Ciò offre agli utenti un'ulteriore garanzia che l'indirizzo è corretto.

La figura seguente mostra una mappa sotto l'indirizzo con un segnaposto in corrispondenza dell'indirizzo inserito.

L'esempio seguente segue la procedura di base per l'aggiunta di una mappa. su Android. Per ulteriori dettagli, consulta la documentazione.

• Aggiunta di SupportMapFragment (in questo caso, aggiunta dinamica di un frammento)
• Ottenere un handle al frammento e registrare il callback
• Applicare uno stile e aggiungere un indicatore alla mappa
• Disattivare i controlli della mappa

Aggiunta di SupportMapFragment in corso...

Innanzitutto, aggiungi un frammento SupportMapFragment alla file XML di layout.

    <fragment
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:id="@+id/confirmation_map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Quindi, aggiungi il frammento in modo programmatico, se non esiste ancora.

    private void showMap(Place place) {
        coordinates = place.getLatLng();

        // It isn't possible to set a fragment's id programmatically so we set a tag instead and
        // search for it using that.
        mapFragment = (SupportMapFragment)
                getSupportFragmentManager().findFragmentByTag(MAP_FRAGMENT_TAG);

        // We only create a fragment if it doesn't already exist.
        if (mapFragment == null) {
            mapPanel = ((ViewStub) findViewById(R.id.stub_map)).inflate();
            GoogleMapOptions mapOptions = new GoogleMapOptions();
            mapOptions.mapToolbarEnabled(false);

            // To programmatically add the map, we first create a SupportMapFragment.
            mapFragment = SupportMapFragment.newInstance(mapOptions);

            // Then we add it using a FragmentTransaction.
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.confirmation_map, mapFragment, MAP_FRAGMENT_TAG)
                    .commit();
            mapFragment.getMapAsync(this);
        } else {
            updateMap(coordinates);
        }
    }

Ottenere un handle del frammento e registrare il callback

1. Per ottenere un handle al frammento, chiama il metodo FragmentManager.findFragmentById e passalo l'ID risorsa del frammento nel file di layout. Se hai aggiunto il frammento in modo dinamico, salta questo passaggio perché hai già recuperato l'handle.

2. Chiama il metodo getMapAsync per impostare il valore sul frammento.

Ad esempio, se hai aggiunto il frammento in modo statico:

val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

      

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

Definizione dello stile e aggiunta di un indicatore alla mappa

Quando la mappa è pronta, imposta lo stile, centra la fotocamera e aggiungi un indicatore in le coordinate dell'indirizzo inserito. Il seguente codice utilizza gli stili definito in un oggetto JSON oppure puoi caricare un ID mappa che abbia definiti con Personalizzazione delle mappe basata su cloud.

    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
        map = googleMap;
        try {
            // Customise the styling of the base map using a JSON object defined
            // in a string resource.
            boolean success = map.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(coordinates, 15f));
        marker = map.addMarker(new MarkerOptions().position(coordinates));
    }

(Vedi l'esempio di codice completo)

Disattivazione dei controlli della mappa in corso...

Per semplificare la mappa mostrando la posizione senza ulteriori controlli della mappa (ad esempio bussola, barra degli strumenti o altre funzioni integrate), valuta la possibilità di disattivare I controlli che non trovi necessaria. Su Android, un'altra opzione è attivare modalità Lite per offrire un numero limitato di e interattività.

Ottenere la documentazione che attesta l'indirizzo, con la certezza che l'utente si trova a l'indirizzo inserito, può essere complicato da fattori quali il la posizione dell'utente, gli utenti che si spostano presso un nuovo indirizzo o le attività digitali (ad es. le banche digitali) che non hanno una sede fisica a cui gli utenti che può visitare per fornire una prova dell'indirizzo con bollette o altri documentazione. Fornire metodi digitali per verificare gli indirizzi degli utenti consente offri un'esperienza di registrazione più rapida e fluida.

La sicurezza è fondamentale per ottenere un controllo dell'indirizzo, soprattutto con una procedura di registrazione. Questa sezione fornisce indicazioni ed esempi per il controllo se la località di un utente durante la registrazione corrisponde all'indirizzo inserito la propria.

La procedura per confrontare un indirizzo inserito con la posizione di un dispositivo prevede l'utilizzo seguenti passaggi:

1. Conversione dell'indirizzo inserito dall'utente in coordinate geografiche.
2. Chiedere all'utente l'autorizzazione per ottenere la posizione del proprio dispositivo.
3. Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo. Sei tu a stabilire distanza massima conteggiata per una corrispondenza indirizzo-posizione.

La figura seguente è un esempio di come puoi chiedere agli utenti di confrontare all'indirizzo inserito per la sua posizione corrente.

Conversione dell'indirizzo inserito dall'utente in coordinate geografiche

Dopo che gli utenti accettano la verifica dell'indirizzo (toccando "Verifica di essere lì adesso" nella figura precedente), il primo passaggio per confrontare l'indirizzo con quello attuale località converte l'indirizzo inserito in coordinate geografiche.

Se l'utente ha selezionato il proprio indirizzo con Place Autocomplete, assicurati di richiedere Place.Field.LAT_LNG nell'elenco dei campi Place Autocomplete, come mostrato in Aggiungi lo snippet di codice del widget Place Autocomplete e richiama il metodo Place.getLatLng() per ottenere le coordinate geografiche dell'indirizzo selezionato.

coordinates = place.getLatLng();

Se l'utente ha inserito manualmente l'indirizzo o ha apportato modifiche dopo Place Il completamento automatico ha compilato i campi, utilizza Servizio Geocoder di Android o l'API Geocoding per cercare le coordinate che corrispondono a quell'indirizzo.

Esempio

https://maps.googleapis.com/maps/api/geocode/json?address=1600%20Amphitheatre%2BParkway%2C%20Mountain%20View%2C%20CA%2094043&key=YOUR_API_KEY

Assicurati di eseguire la codifica degli URL. la chiamata all'API Geocoding.

Riferimento rapido per la codifica dell'URL: %20 = spazio, %2B = + (più), %2C = , (virgola)

Chiedere all'utente l'autorizzazione per ottenere la posizione del dispositivo

Per conoscere la posizione del dispositivo dell'utente, devi richiedere l'autorizzazione dell'utente per attivare i servizi di localizzazione. Utilizzando le indicazioni nella documentazione di Android su sviluppo di app che utilizzano la posizione, implementa il seguente flusso:

• Richiedi l'autorizzazione di accesso alla posizione, come concessione una tantum, a un livello preciso (ACCESS_FINE_LOCATION)

• Se l'utente concede l'accesso alla posizione, recupera la posizione dell'utente.

• Se l'utente rifiuta l'accesso alla posizione, gestisci il rifiuto con cautela. Ad esempio, potresti presentare il seguente tipo di messaggio (supponendo che non stai memorizzando la posizione corrente dell'utente):

  "Se non comunichi all'app la tua posizione esatta, dovrai verifica tramite posta per attivare l'account. [OK]".

La figura seguente mostra un esempio di richiesta di autorizzazione per gli utenti ottenere la posizione del dispositivo.

Per controllare l'autorizzazione di accesso alla posizione, prepara un'Avvio attività che verrà ascolta un risultato dall'attività avviata con ActivityResultLauncher Il callback del risultato conterrà una stringa che indica se l'utente ha concesso o negato l'autorizzazione richiesta.

    // Register the permissions callback, which handles the user's response to the
    // system permissions dialog. Save the return value, an instance of
    // ActivityResultLauncher, as an instance variable.
    private final ActivityResultLauncher<String> requestPermissionLauncher =
            registerForActivityResult(new ActivityResultContracts.RequestPermission(), isGranted -> {
                if (isGranted) {
                    // Since ACCESS_FINE_LOCATION is the only permission in this sample,
                    // run the location comparison task once permission is granted.
                    // Otherwise, check which permission is granted.
                    getAndCompareLocations();
                } else {
                    // Fallback behavior if user denies permission
                    Log.d(TAG, "User denied permission");
                }
            });

Dopodiché, controlla se l'app dispone già dell'autorizzazione ACCESS_FINE_LOCATION. In caso contrario, chiedi all'utente di avviare la richiesta di autorizzazione. l'attività con l'Avvio app definita nel passaggio precedente.

    private void checkLocationPermissions() {
        if (ContextCompat.checkSelfPermission(this, ACCESS_FINE_LOCATION)
                == PackageManager.PERMISSION_GRANTED) {
            getAndCompareLocations();
        } else {
            requestPermissionLauncher.launch(
                    ACCESS_FINE_LOCATION);
        }
    }

Dopo aver concesso l'autorizzazione ACCESS_FINE_LOCATION, utilizza la posizione fusa provider per ottenere l'ultima posizione nota del dispositivo e crearne un oggetto LatLng.

        FusedLocationProviderClient fusedLocationClient =
                LocationServices.getFusedLocationProviderClient(this);

        fusedLocationClient.getLastLocation()
                .addOnSuccessListener(this, location -> {
                    // Got last known location. In some rare situations this can be null.
                    if (location == null) {
                        return;
                    }

                    deviceLocation = new LatLng(location.getLatitude(), location.getLongitude());
                    // ...
                });
    }

Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo

Utilizzare la matematica per calcolare la distanza tra due coordinate di latitudine/longitudine (indirizzo inserito e posizione del dispositivo). L'open source Libreria di utilità di Maps SDK for Android offre alcuni metodi pratici per calcolare la distanza sferica tra due punti sulla Terra.

Innanzitutto, installa la libreria di utilità di Maps SDK for Android aggiungendo quanto segue dipende dal file build.gradle.kts dell'app:

dependencies {


    // Utility Library for Maps SDK for Android
    // You do not need to add a separate dependency for the Maps SDK for Android
    // since this library builds in the compatible version of the Maps SDK.
    implementation("com.google.maps.android:android-maps-utils:3.8.2")
}

Quindi, torna al file delle attività dopo aver recuperato l'ultima posizione nota del dispositivo, definisci un raggio in metri per considerare le due località "corrispondenti". Il raggio deve essere abbastanza grande da tenere conto della variabilità della precisione del GPS e le dimensioni del luogo all'indirizzo inserito dall'utente. Ad esempio:

private static final double acceptableProximity = 150;

Quindi, utilizza il metodo delle utilità computeDistanceBetween() per calcolare la distanza tra la posizione del dispositivo e la posizione del dispositivo dell'indirizzo IP. Se la distanza rientra nel raggio definito sopra, considera le località corrispondenti.

// Use the computeDistanceBetween function in the Maps SDK for Android Utility Library
// to use spherical geometry to compute the distance between two Lat/Lng points.
double distanceInMeters = computeDistanceBetween(deviceLocation, enteredLocation);
if (distanceInMeters <= acceptedProximity) {
    Log.d(TAG, "location matched");
    // TODO: Display UI based on the locations matching
} else {
    Log.d(TAG, "location not matched");
    // TODO: Display UI based on the locations not matching
}

(Vedi l'esempio di codice completo)

Se l'indirizzo e la posizione corrispondono, mostra una conferma nell'app, come mostrato nella figura che segue.

Consenti agli utenti di inserire un indirizzo in base a un'attività commerciale o a un punto d'interesse . L'opzione "digita in anticipo" di previsione non solo funziona per gli indirizzi, ma puoi anche scegliere di consentire agli utenti di inserire i nomi di attività o punti di riferimento. Per consentire l'inserimento sia di indirizzi che di nomi di attività, rimuovi la proprietà types dalla definizione di Completamento automatico.

Personalizza l'aspetto della casella di Place Autocomplete per adattarla al tuo lo stile del tuo sito web. Se preferisci controllare l'aspetto di Place Usa il completamento automatico nella tua app anziché usare il widget di Google, puoi usare Posiziona il completamento automatico in modo programmatico per alimentare la UI creata con il servizio Place Autocomplete.