Membuat Kiblat dengan React Native

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.

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.

Untuk jenis React Native nya pilih yang CLI

Kemudian sesuaikan jenis komputer/laptop apa yang kamu gunakan mac atau window, untuk saat ini target aplikasi nya kita pilih membuat aplikasi Android

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

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.

Untuk cek apakah HP sudah terhubung dengan laptop bisa dengan command

adb devices

Mari kita jalankan aplikasi. Masuk kedalam foldernya pastikan kamu sudah ada di dalam folder project

Lalu jalankan command berikut

npx react-native run-android

Sekarang buka folder project kita dengan text editor yang kamu suka, disini aku pake Visual Code Studio buat ngetik-ngetik kode nya.

Install Kompas

Sekarang kita akan menggunakan library ini 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

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

Setelah berhasil di install, kita update kode yang di App.js

	import React, {useState, useEffect} from 'react';
	import {Image, StyleSheet} from 'react-native';
	import CompassHeading from 'react-native-compass-heading';
	const App = () => {
	const [compassHeading, setCompassHeading] = useState(0);
	useEffect(() => {
	const degree_update_rate = 3;
	CompassHeading.start(degree_update_rate, degree => {
	setCompassHeading(degree);
	});
	return () => {
	CompassHeading.stop();
	};
	}, []);
	return (
	<Image
	style={[
	styles.image,
	{transform: [{rotate: `${360 - compassHeading}deg`}]},
	]}
	resizeMode="contain"
	source={require('./compass.png')}
	/>
	);
	};
	const styles = StyleSheet.create({
	image: {
	width: '90%',
	flex: 1,
	alignSelf: 'center',
	},
	});
	export default App;

view raw App.js hosted with ❤ by GitHub

Kamu juga perlu memasukan gambar untuk kompasnya lalu simpat di folder projek. Gambar kompas download disini.

Coba jalankan lagi projek RN kita

npx react-native run-android

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

	import React, {useState, useEffect} from 'react';
	import {
	Image,
	StyleSheet,
	Text,
	View,
	Dimensions,
	Animated,
	} from 'react-native';
	import CompassHeading from 'react-native-compass-heading';
	import Geolocation from '@react-native-community/geolocation';
	const App = () => {
	const [compassHeading, setCompassHeading] = useState(0);
	const [latitude, setLatitude] = useState(0);
	const [longitude, setLongitude] = useState(0);
	useEffect(() => {
	const degree_update_rate = 0.5;
	CompassHeading.start(degree_update_rate, (degree) => {
	setCompassHeading(degree);
	});
	Geolocation.getCurrentPosition((info) => {
	setLatitude(info.coords.latitude);
	setLongitude(info.coords.longitude);
	});
	return () => {
	CompassHeading.stop();
	};
	}, []);
	return (
	<View style={styles.container}>
	<View style={styles.body}>
	<Text style={styles._text}>Mengarah {compassHeading}°</Text>
	<Text style={[styles._text, {textAlign: 'center'}]}>
	Latitude {latitude} {'\n'} Longitude {longitude}
	</Text>
	<View
	style={{
	width: width,
	height: height / 2,
	alignItems: 'center',
	justifyContent: 'center',
	}}>
	<Image
	resizeMode="contain"
	source={require('./compass.png')}
	style={{
	width: '80%',
	height: '80%',
	transform: [{rotate: `${360 - compassHeading}deg`}],
	}}
	/>
	<View
	style={{
	position: 'absolute',
	top: 0,
	left: 0,
	right: 0,
	bottom: 0,
	alignItems: 'center',
	justifyContent: 'center',
	}}>
	<Image
	resizeMode="stretch"
	source={require('./arrow.png')}
	style={{
	width: 80,
	height: 350,
	transform: [
	{
	rotate: `${360 - compassHeading}deg`,
	},
	],
	}}
	/>
	</View>
	</View>
	</View>
	</View>
	);
	};
	const {width, height} = Dimensions.get('window');
	const styles = StyleSheet.create({
	container: {
	flex: 1,
	justifyContent: 'center',
	},
	body: {
	flex: 0.7,
	alignItems: 'center',
	justifyContent: 'space-between',
	},
	image: {
	width: height / 2.25,
	height: height / 2,
	// flex: 1,
	// alignSelf: 'center',
	},
	_text: {
	fontSize: 18,
	fontWeight: 'bold',
	},
	});
	export default App;

view raw App.js hosted with ❤ by GitHub

Coba jalankan lagi projek RN kita

npx react-native run-android

Lalu kita buat fungsi untuk mengambil arah kiblat kita
Fungsi ini namanya bearing. Untuk selengkapnya kamu bisa belajar disini.

Mari kita update kode kita

	import React, {useState, useEffect} from 'react';
	import {
	Image,
	StyleSheet,
	Text,
	View,
	Dimensions,
	Animated,
	} from 'react-native';
	import CompassHeading from 'react-native-compass-heading';
	import Geolocation from '@react-native-community/geolocation';
	const App = () => {
	//// inisiasi variable
	const [compassHeading, setCompassHeading] = useState(0);
	const [latitude, setLatitude] = useState(0);
	const [longitude, setLongitude] = useState(0);
	const [derajatKiblat, setDerajatKiblat] = useState('');
	useEffect(() => {
	const degree_update_rate = 0.5;
	// fungsi mengambil angka arah derajat kita
	CompassHeading.start(degree_update_rate, (degree) => {
	setCompassHeading(degree); //// memasukan ke variable state compassHeading
	});
	// fungsi mengambil lokasi longitude latitude kita
	Geolocation.getCurrentPosition((info) => {
	let {latitude, longitude} = info.coords;
	setLatitude(latitude); //// memasukan ke variable state latitude
	setLongitude(longitude); //// memasukan ke variable state longitude
	setDerajatKiblat(bearing(latitude, longitude).toString().substr(0, 3)); //// memasukan ke variable state derajat kiblat
	});
	return () => {
	CompassHeading.stop();
	};
	}, []);
	return (
	<View style={styles.container}>
	<View style={styles.body}>
	<Text style={styles._text}>Mengarah {compassHeading}°</Text>
	<Text style={[styles._text, {textAlign: 'center'}]}>
	Latitude {latitude} {'\n'} Longitude {longitude}
	</Text>
	<Text style={styles._text}>Kiblat kita {derajatKiblat}° derajat</Text>
	<View
	style={{
	width: width,
	height: height / 2,
	alignItems: 'center',
	justifyContent: 'center',
	}}>
	<Image
	resizeMode="contain"
	source={require('./compass.png')}
	style={{
	width: '80%',
	height: '80%',
	transform: [{rotate: `${360 - compassHeading}deg`}],
	}}
	/>
	<View
	style={{
	position: 'absolute',
	top: 0,
	left: 0,
	right: 0,
	bottom: 0,
	alignItems: 'center',
	justifyContent: 'center',
	}}>
	<Image
	resizeMode="stretch"
	source={require('./arrow.png')}
	style={{
	width: 80,
	height: 350,
	transform: [
	{
	rotate:
	bearing(latitude, longitude) - compassHeading + 'deg',
	},
	],
	}}
	/>
	</View>
	</View>
	</View>
	</View>
	);
	};
	//fungsi untuk mengambil arah kiblat kita
	function bearing(startLat, startLng) {
	let latitudeKabah = 21.422487; ///// titik latitude kabah
	let longitudeKabah = 39.826206; ///// titik longitude kabah
	startLat = toRadians(startLat);
	startLng = toRadians(startLng);
	destLat = toRadians(latitudeKabah);
	destLng = toRadians(longitudeKabah);
	y = Math.sin(destLng - startLng) * Math.cos(destLat);
	x =
	Math.cos(startLat) * Math.sin(destLat) -
	Math.sin(startLat) * Math.cos(destLat) * Math.cos(destLng - startLng);
	brng = Math.atan2(y, x);
	brng = toDegrees(brng);
	v = brng = brng + 360;
	fraction = modf(brng + 360.0, brng);
	brng += fraction;
	if (brng > 360) {
	brng -= 360;
	}
	return brng;
	}
	// Converts from degrees to radians.
	function toRadians(degrees) {
	return (degrees * Math.PI) / 180;
	}
	// Converts from radians to degrees.
	function toDegrees(radians) {
	return (radians * 180) / Math.PI;
	}
	function modf(orig, ipart) {
	return orig - Math.floor(orig);
	}
	const {width, height} = Dimensions.get('window');
	const styles = StyleSheet.create({
	container: {
	flex: 1,
	justifyContent: 'center',
	},
	body: {
	flex: 0.7,
	alignItems: 'center',
	justifyContent: 'space-between',
	},
	image: {
	width: height / 2.25,
	height: height / 2,
	// flex: 1,
	// alignSelf: 'center',
	},
	_text: {
	fontSize: 18,
	fontWeight: 'bold',
	},
	});
	export default App;

view raw App.js hosted with ❤ by GitHub

Selamat kamu berhasil membuat kompas.
Kamu bisa liat projek folder file ini disini 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
Ig : krisnailafat