Se si ambisce a diventare web developer, è necessario, nel proprio bagaglio, la conoscenza del linguaggio JavaScript. Imparare JavaScript è una delle pratiche più importanti da attuare per intraprendere la carriera da sviluppatore per il web. Saper programmare in JavaScript diventa fondamentale per tutti gli aspiranti programmatori web.
JavaScript cos è?
Si tratta di un linguaggio di scripting utilizzato per rendere i siti web dinamici. Fa parte dei tre linguaggi base per lo sviluppo web, insieme a HTML e CSS. Infatti, JavaScript gestisce il comportamento degli elementi dinamici di un sito web, come il contenuto (HTML) e lo stile grafico (CSS) reagiscono e si modificano sulla pagina web.
La programmazione JavaScript passa attraverso una serie di conoscenze, necessarie, strettamente correlate al linguaggio. Come la sintassi, la programmazione orientata agli eventi o l’implementazione, nello sviluppo web
In questo articolo vedremo come ottenere la posizione di un utente tramite API. Spesso molte applicazioni richiedono di accedere alla posizione dell’utente, come ad esempio le app di food delivery, oppure le applicazioni di car sharing/prenotazione di taxi. Per farlo useremo L'API di geolocalizzazione, che rapparesenta una soluzione semplice. Si può usare non solo per determinare la posizione degli utenti, ma anche la valuta locale, la lingua e altre informazioni utili. Le web API service sono spesso impiegate nello sviluppo web per ottenere informazioni utili dall’utente.
Ma prima, approfondiamo. API rest cosa sono?
Un'API REST, nota anche come API RESTful, è un'interfaccia di programmazione delle applicazioni (API o API web) conforme ai vincoli dello stile architetturale REST, che consente l'interazione con servizi web RESTful. Il termine REST, è l'acronimo di REpresentational State Transfer. Il REST è un sistema di trasmissione dei dati grazie che utilizza l’HTTP e che fa uso delle funzioni HTTP, ricorrendo ai comandi GET, POST, PUT, PATCH, DELETE e OPTIONS.
Dopo aver approfondito le REST API cosa sono (o RESTful API), andiamo più nello specifico, analizzando l’API di geolocalizzazione. L'API di geolocalizzazione nel linguaggio JavaScript fornisce l'accesso ai dati sulla posizione geografica associati al dispositivo di un utente. Questo può essere determinato utilizzando GPS, WIFI, geolocalizzazione IP e così via.
Per proteggere la privacy dell'utente, richiede il permesso di localizzare il dispositivo. Se l'utente concede l'autorizzazione, avrai accesso ai dati sulla posizione come latitudine, longitudine, altitudine e velocità. Otterrai anche l'accuratezza dei dati sulla posizione acquisiti e l'ora approssimativa in cui è stata acquisita la posizione. Come usare questa API di geolocalizzazione?
Puoi accedere all'API di geolocalizzazione chiamando l'oggetto navigator.geolocation. Questo comando concede all'app l'accesso alla posizione del dispositivo. Mentre l’oggetto fornisce i metodi elencati di seguito per lavorare con la posizione del dispositivo:
- getCurrentPosition: restituisce la posizione corrente del dispositivo.
- watchPosition: una funzione di gestione che viene richiamata automaticamente quando cambia la posizione del dispositivo.
Ci sono tre possibili argomenti associati a questi metodi:
- Un callback positivo (richiesto)
- Una callback di errore (opzionale)
- Un oggetto opzionale (facoltativo)
Vediamo ora come utilizzare il getCurrentPosition(). Con il metodo getCurrentPosition si può ottenere la posizione corrente dell'utente. Invia una richiesta asincrona al browser, chiedendo il consenso per condividere la loro posizione.
Ecco la sintassi nel linguaggio JavaScript per ottenere la posizione di un utente:
1. const successCallback = (position) => {
2. console.log(position);
3. };
4.
5. const errorCallback = (error) => {
6. console.log(error);
7. };
8.
9. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
Quando esegui questo pezzo di codice, ti verrà mostrata una finestra popup dal browser per richiedere i permessi per concedere la tua posizione attuale.
Acconsentendo si aprirà la console per sviluppatori. Vedrai che la chiamata alla funzione restituisce due cose:
- Oggetto GeolocationPosition.coords: rappresenta la posizione, l'altitudine e la precisione con cui il dispositivo calcola queste proprietà.
- timestamp: rappresenta l'ora in cui è stata ottenuta la posizione.
Osservando il log della console avremo a disposizione tutti i dati ottenuti dalla chiamata alla rest-API. Dopo aver fatto ciò possiamo tracciare l’utente guardando la sua posizione.
Il metodo watchPosition() consente all'app di monitorare continuamente l'utente aggiornandosi man mano che la sua posizione cambia. Lo fa installando una funzione di gestione che verrà chiamata automaticamente ogni volta che la posizione del dispositivo dell'utente cambia.
Ecco la sintassi in JavaScript, dove id è fondamentalmente utilizzato per gestire o fare riferimento al metodo precedentemente citato:
1. const id = navigator.geolocation.watchPosition(successCallback, errorCallback);
Per interrompere il monitoraggio della posizione, basterà utilizzare il metodo clearWatch().
1. navigator.geolocation.clearWatch(id);
Sebbene l'oggetto options sia facoltativo, fornisce parametri che consentono di ottenere risultati più accurati, ad esempio:
1. const options = {
2. enableHighAccuracy: true,
3. timeout: 10000,
4. };
5.
6. navigator.geolocation.getCurrentPosition(
7. successCallback,
8. errorCallback,
9. options
10. );
Nel codice riportato, abbiamo specificato che:
- La risposta dovrebbe fornire una posizione più precisa, impostando enableHighAccuracy su true.
- Il tempo massimo (in millisecondi) che il dispositivo può impiegare per restituire una posizione. In questo caso, 10 secondi (timeout).
Questo breve tutorial ti ha mostrato le potenzialità del linguaggio Javascript: cosa aspetti? Corri ad approfondire con la nostra guida Javascript in italiano!
