Membuat Kiblat dengan React Native
Tags: reactnative, compass, kiblat, indonesia
Published: 2020-08-31 08:58:56

Halo semua nya. Kembali lagi sama krisna

Pada kesempatan kali ini kita akan belajar membuat aplikasi di mobile atau HP atau smartphone yaitu membuat aplikasi kompas kiblat. Pembuatan aplikasi ini menggunakan yang namanya React Native. React Native ini adalah sebuah framework untuk menghasilkan sebuah aplikasi pada mobile. Apa itu framework, menurut saya framework itu seperti kerangka untuk kita menciptakan suatu program, ada framework untuk program di mobile atau juga untuk sebuah website dll. React Native menggunakan pemrograman Javascript. Selengkap nya kalian bisa lihat-lihat disini [documentnya](https://reactnative.dev/).

Untuk bisa membangun sebuah aplikasi menggunakan react-native ada beberapa syarat yang harus kalian lakukan terlebih dahulu. Maksudnya ibarat akan masak kalian perlu alat-alat untuk memasaknya kan jadi seperti itu.
Syarat-syarat yang perlu kalian lakukan bisa dilihat disini [Setting up the development environment](https://reactnative.dev/docs/environment-setup).
![Setting up the development environment](https://dev-to-uploads.s3.amazonaws.com/i/9077x3ymtiq7wdlvc91k.png)

Untuk jenis React Native nya pilih yang CLI
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3uwhrp1bwlyn8nyqvpex.png)
Kemudian sesuaikan jenis komputer/laptop apa yang kamu gunakan mac atau window, untuk saat ini target aplikasi nya kita pilih membuat aplikasi Android
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kf6l99ripcbbjbgcn9z8.png)

Kemudian kalian langsung ikuti saja petunjuk disitu untuk bisa membuat aplikasi react native. Kamu juga bisa googling pastiny untuk tahap ini.
Mari buat aplikasi kompas kiblat menggunakan React Native.

Pertama mari kita init sebuah projek baru dengan perintah sebagai berikut.  
```npx react-native init KompasKiblat```
![npx react-native init KompasKiblat](https://dev-to-uploads.s3.amazonaws.com/i/98efnjtttz71mwrlkoj3.png)

Bila sudah selesai akan ada folder baru bernama KompasKiblat yang tadi sudah di init.
Untuk menjalankan programnya kamu bisa menggunakan emulator android yang sudah di terinstall atau bisa juga menggunakan HP android. Aku disini pake HP android yang di colok ke laptop, pastikan setting HP Debug nya dinyalakan pada menu setting developer. Bisa googling juga [debug mode](https://www.google.com/search?q=cara+debug+mode+hp+android&oq=cara+debug+mode+hp+android).

Untuk cek apakah HP sudah terhubung dengan laptop bisa dengan command 
```adb devices```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zlnoic69zi4fsmvxmmz7.png)


Mari kita jalankan aplikasi. Masuk kedalam foldernya pastikan kamu sudah ada di dalam folder project
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0gfpye04hvl5f6pjdwoa.png)

Lalu jalankan command berikut
```npx react-native run-android```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r17qw8dh56m8pywhkvb7.jpeg)
Sekarang buka folder project kita dengan text editor yang kamu suka, disini aku pake [Visual Code Studio](https://code.visualstudio.com/) buat ngetik-ngetik kode nya.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yv1zwafcjxs9isdal3p2.png)

#Install Kompas
Sekarang kita akan menggunakan library ini [react-native-compass-heading](https://github.com/firofame/react-native-compass-heading) untuk kompas nya.
Kita install library nya di projek kita. Baik nya kita matikan dulu server React Native kita nya dengan `ctrl+c`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0sv4i4fkrh48plhcfqj0.png)
tips kita install library nya melalui terminal di tempat Visual Code, cari cara buka terminalnya.

Kita install library dengan command berikut:
```npm install react-native-compass-heading```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tca748ufwgkzc4qaumuf.png)
Setelah berhasil di install, kita update kode yang di App.js 
{% gist https://gist.github.com/krisnailafat/a08c505b178aabe70a740355d681a21b %}

Kamu juga perlu memasukan gambar untuk kompasnya lalu simpat di folder projek. Gambar kompas download [disini](https://raw.githubusercontent.com/firofame/react-native-compass-heading/master/Example/compass.png).

Coba jalankan lagi projek RN kita
```npx react-native run-android```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3div8ec05w4ycbz7zp5g.gif)

Sekarang kompas kita sudah berhasil jalan.
Bagaimana kode ini berjalan, jadi pada smartphone ini mempunyai sensor Gyroscope dengan Accelerometer. Sensor ini memberikan nilai angka 0 derajat sampai 360 derajat. Gambar yang ada di aplikasi menjadi animasi dan menjadi patokan kalau 360 itu adalah utara.

Langkah selanjutnya menentukan lokasi kita untuk dihitung posisinya mengarah ke arah kiblat. Lokasi ini yaitu menggunakan latitude dan longitude.

kita install library untuk mendapatkan latitude dan longitude.
```npm install @react-native-community/geolocation --save```
setelah itu tambah juga kode ini ke dalam AndroidManifest.xml untuk izin lokasi
```
// KomplasKiblat/android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
```

Setelah itu kita akan membutuhkan gambar panah yang selalu mengarah ke kiblat kamu bisa download disini. Masukan ke dalam folder projek kita

Sekarang kita update kode kita
{% gist https://gist.github.com/krisnailafat/0109fe811fbb5595c27296a93106bc24 %}

Coba jalankan lagi projek RN kita
```npx react-native run-android```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tuzwvqqp3bib7265pmg2.jpeg)

Lalu kita buat fungsi untuk mengambil arah kiblat kita 
Fungsi ini namanya bearing. Untuk selengkapnya kamu bisa belajar [disini](http://www.movable-type.co.uk/scripts/latlong.html). 

Mari kita update kode kita 
{% gist https://gist.github.com/krisnailafat/7711873dff88afb8ba88356c9d30a2dd %}


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2einx8l6kej5m7oo610f.jpeg)

Selamat kamu berhasil membuat kompas.
Kamu bisa liat projek folder file ini disini [github.com/krisnailafat/KompasKiblat](https://github.com/krisnailafat/KompasKiblat). Terimakasih sudah mencoba.

Kalau ada pertanyaan kamu bisa kontak saja :)
Kalau boleh kamu bisa bantu kirim dukungan buat team ini [saweria.co/krisnailafat](https://saweria.co/krisnailafat)
_Ig : krisnailafat_