Pada kesempatan ini kita akan mempelajjari tutorial React Native bagaimana caranya menghitung dua jarak lokasi berdasarkan Latitude Longitude. Ketika kita bermain dengan lokasi dan jarak kita terkadang membutuhkan jarak Real Time antara satu lokasi ke lokasi lainnya. Nah pada kesempatan ini kita akan membuat sebuah program menggunakan React Native untuk menghitung kalkulasi jarak antar lokasi berdasarkan Latitude Longitude.
Cara ini adalah cara yang palig efektif dan paling murah, bayangkan jika kamu menggunakan API Google untuk melakukan perhitungan ini, mau kena charge puluhan juta mungkin, #FYI sebelumnya di kantor saya untuk melakukan penghitungan menggunakan Google API dan 1 bulan kena hampir 30Juta.
2. Installing Library
3. Memulai Calculate Distance React Native
4. Penjelasan Kode
Membuat Project React Native
Pertama untuk mengikuti tutorial ini hal yang pertama harus kamu lakukan adalah membuat project React Native baru, ketikan perintah di terminal/cmd kamu :
Sekian semoga tutorial React Native Bahasa Indonesia tentang kalkulasi jarak dapat membantu kamu yang sedang mempelarai React Native.
Calculate Distance React Native |
Cara ini adalah cara yang palig efektif dan paling murah, bayangkan jika kamu menggunakan API Google untuk melakukan perhitungan ini, mau kena charge puluhan juta mungkin, #FYI sebelumnya di kantor saya untuk melakukan penghitungan menggunakan Google API dan 1 bulan kena hampir 30Juta.
Apa Yang Kita Pelajari
1. Membuat Project React Native2. Installing Library
3. Memulai Calculate Distance React Native
4. Penjelasan Kode
Membuat Project React Native
Pertama untuk mengikuti tutorial ini hal yang pertama harus kamu lakukan adalah membuat project React Native baru, ketikan perintah di terminal/cmd kamu :
npx react-native init calculate_distanceTunggu proses sampai selesai.
Installing Library
Ok setelah anda berhasil membuat project React Native, silahkan install library geolib, library ini dapat menghitung lokasi dengan sangat akurat ketimbang kamu membuat rumus sin dan cos untuk menghitung lokasi dan menurut saya juga lebih akurat dari google direction. Masuk ke root project anda dan silahkan install libarary ini di terminal/cmd.
npm i geolibTunggu proses instalasi selesai.
Memulai Calculate Distance React Native
Setalah anda berhasi menginstall library silahkan ubah kode di file App.js menjadi seperti kode di bawah ini:
Setelah itu run project react native anda jika berhasil maka tampilannya akan seperti gambar di bawah ini :
Penjelasan Kode React Native
_getDistance = () => {Method di atas berguna untuk menghitung jarak dan lokasi tepat jarak dari dua lokasi berdasarkan Lattitude dan Logitude.
var dis = getDistance(
{ latitude: -6.200000, longitude: 106.816666 },
{ latitude: -7.797068, longitude: 110.370529 }
);
alert(`Jarak\n${dis} Meter\nor\n${dis / 1000} KM`);
};
_getPreciseDistance = () => {
var pdis = getPreciseDistance(
{ latitude: -6.200000, longitude: 106.816666 },
{ latitude: -7.797068, longitude: 110.370529 }
);
alert(`Jarak Lebih Tepat\n${pdis} Meter\nor\n${pdis / 1000} KM`);
};
Sekian semoga tutorial React Native Bahasa Indonesia tentang kalkulasi jarak dapat membantu kamu yang sedang mempelarai React Native.
Baca Tutorial React Native Lainnya :
#8 Tutorial React Native Mengubah Warna Pada Placeholder
#9 Tutorial React Native : Advanced Webview Dengan Loader
#9 Tutorial React Native : Advanced Webview Dengan Loader
#24 Tutorial React Native AsyncStorage React Native Lengkap
#25 Tutorial Push Notification Firebase Cloud Messaging React Native V6
#26 Tutorial React Native : Pengenalan React Native Hooks Dan Lifecycle
#27 Tutorial React Native Hooks : Get API Axios
#28 Tutorial React Native : ToastAndroid React Native
#29 Tutorial React Native : Penggunaan Platform Android iOS
#25 Tutorial Push Notification Firebase Cloud Messaging React Native V6
#26 Tutorial React Native : Pengenalan React Native Hooks Dan Lifecycle
#27 Tutorial React Native Hooks : Get API Axios
#28 Tutorial React Native : ToastAndroid React Native
#29 Tutorial React Native : Penggunaan Platform Android iOS
#30 Tutorial React Native : Responsive Design UI Login
#31 Tutorial Upload Gambar React Native Ke Server
#31 Tutorial Upload Gambar React Native Ke Server
0 Comments