Mendapatkan Lokasi User dengan Geo Location di React Native

Dalam pengembangan sebuah aplikasi mobile baik itu untuk Ios maupun Android, terkadang kita perlu untuk mendapatkan lokasi pengguna sehingga pengguna aplikasi tidak perlu untuk mengetik lokasi mereka secara manual.

Untuk menambahkan fungsi Geo Location di React native, saya akan menggunakan modul react-native-geolocation-service karena modul ini sudah mendukung FusedLocationProviderClient yang di sarankan oleh pihak Google. Berikut ini adalah langkah-langkah yang harus kita lakukan:

1. Proses Installasi
• Install react-native-geolocation-service
• Edit file android/app/build.gradle
• Edit file android/build.gradle
• Edit file android/setting.gradle
• Edit file android/app/src/main/java/[nama aplikasi]/MainApplication.java
2. Pemakaian dalam project
• Import modul react-native-geolocation-service ke dalam project
• Mengelola Permission
• Mengambil informasi pengguna
• Konversi menjadi nama tempat yang bisa di baca

Di bawah ini adalah penjelasan dari masing-masing langkah di atas:

1. Proses Installasi

Pada proses ini kita akan mengunduh semua file yang di perlukan oleh react-native-geolocation-service ke dalam project kita dan melakukan pengaturan pada project supaya modul ini bisa berjalan.

Install react-native-geolocation-service

Langkah pertama yang kita lakukan adalah mengunduh semua file react-native-geolocation-service ke dalam project kita. untuk itu silahkan buka terminal, pastikan kita sudah berada di direktori project. Kemudian ketik perintah berikut ini

yarn add react-native-geolocation-service

Edit file android/app/build.gradle

Setelah proses download selesai, lakukan perubahan pada file build.gradle yang berada di folder android/app. cari bagian dependencies dan tambahkan bari code berikut:

dependencies {
    ...
    compile project(':react-native-geolocation-service')
}

Edit file android/build.gradle

Setelah kita merubah file build.gradle yang berada di folder app,  kita juga harus merubah file build.gradle yang berada di folder android. buka file build.gradle dan cari bagian ext dan pastikan baris code googlePlayServicesVersion = "11.0.0" sudah ada. kalau belum ada silahkan di tambahkan sehingga code akan seperti berikut ini:

buildscript {...}
allprojects {...}

/**
 + Project-wide Gradle configuration properties
 */
ext {
    compileSdkVersion   = 25
    targetSdkVersion    = 25
    buildToolsVersion   = "25.0.2"
    supportLibVersion   = "25.0.1"
    googlePlayServicesVersion = "11.0.0"
}

Catatan: versi untuk setiap item di atas mungkin berbeda.

Edit file android/setting.gradle

Selanjutnya kita akan merubah file setting.gradle yang berada di folder android. silahkan tambahkan baris code berikut :

include ':react-native-geolocation-service'
project(':react-native-geolocation-service').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-geolocation-service/android')

Edit file android/app/src/main/java/[nama aplikasi]/MainApplication.java

Selenjutnya kita juga harus melakukan perubahan pada file MainApplication.java yang berada di folder android/app/src/main/java/[nama aplikasi].  tambahkan baris code berikut sebelum public class MainApplication:

import com.agontuk.RNFusedLocation.RNFusedLocationPackage;

Dan di dalam class MainApplication cari protected List<ReactPackage> getPackages(). lalu tambahkan baris code berikut:

new RNFusedLocationPackage()

Sehingga file MainApplication.java akan tampak seperti berikut:

import com.agontuk.RNFusedLocation.RNFusedLocationPackage;

public class MainApplication extends Application implements ReactApplication {
    ...
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            ...
            new RNFusedLocationPackage()
        );
    }
}

2. Pemakaian dalam project

Setelah melakukan setup pada project, selanjutnya kita akan menggunakan modul react-native-geolocation-service pada aplikasi kita. Silahkan ikuti langkah- langkah berikut ini:

Import modul react-native-geolocation-service ke dalam project

Langkah pertama, buka file javascript di mana kita akan menambahkan fungsi geo location dan tambahkan baris code berikut di bagian atas untuk import fungsi geolocation.

import Geolocation from 'react-native-geolocation-service';

Mengelola Permission

Didalam class utama tambahkan method di bawah ini. method ini akan memunculkan permintaan akses lokasi kepada user.

async requestLocationPermission() {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                {
                    title: 'Geolocation Permission',
                    message:
                        'Aplikasi Keren ini Perlu akses lokasi kamu ' +
                        'sehingga kamu tidak perlu repot untuk ketik alamat kamu.',
                    buttonNeutral: 'Ask Me Later',
                    buttonNegative: 'Cancel',
                    buttonPositive: 'OK',
                },
            );

            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                return true
            } else {
                return false
            }
        } catch (err) {
            return false
        }
    }

Mengambil informasi pengguna

Setelah kita mendapatkan akses lokasi dari user, langkah selanjutnya adalah mendapatkan informasi detail lokasi user. Kita akan menerima informasi lokasi dalam format JSON. Di sini saya menambahkan code untuk mendapatkan lokasi user di method componentDidMount sehingga  fungsi ini akan di jalankan saat halaman di buka.

componentDidMount() {
        // Instead of navigator.geolocation, just use Geolocation.

        if (this.requestLocationPermission()) {

            Geolocation.getCurrentPosition(
                (position) => {

                    this.setState({
                        position: position,
                    })
                    const currentLongitude = JSON.stringify(position.coords.longitude);
                    const currentLatitude = JSON.stringify(position.coords.latitude);
                    this.reverseGeolocation(currentLongitude, currentLatitude)
                },
                (error) => {
                    // See error code charts below.
                    alert(error.code, error.message);
                },
                { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
            );
        }
    }

Geo Location Reverse - Konversi menjadi nama tempat yang bisa di baca

Informasi yang kita dapatkan tadi baru berupa koordinat longitude dan koordinat latitude. Nah bagaimana cara supaya lokasi itu bisa di ubah menjadi nama yang bisa kita baca, misalnya nama jalan atau nama tempat. Untuk itu silahkan tambahkan mothod di bawah ini:

reverseGeolocation(lon, lat) {
        var url = 'https://nominatim.openstreetmap.org/reverse?format=json&lat=' + lat + '&lon=' + lon + '&zoom=18&addressdetails=1'

        fetch(url)
            .then((response) => response.json())
            .then((responseJson) => {
                // alert(JSON.stringify(responseJson))
                this.setState({
                    alamat: responseJson.address.house + ' ' + responseJson.address.village + ' ' + responseJson.address.city + ' ' + responseJson.address.state
                })


            })
            .catch((error) => {
                console.error(error);
            });
    }

Nah, demikianlah  cara menambahkan fungsi geo location untuk mendapatkan lokasi user di dalam React Native. Ini adalah catatan proses yang saya lakukan dalam pengembangan Aplikasi.