The latest articles on Forem by vasco (@krisisxxxxxx). https://forem.com/krisisxxxxxx https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F333006%2Fb56d6a44-29ad-48f0-aa26-91581d592099.jpg https://forem.com/krisisxxxxxx en vasco Mon, 31 Aug 2020 08:58:56 +0000 https://forem.com/krisisxxxxxx/membuat-kiblat-dengan-react-native-55n3 https://forem.com/krisisxxxxxx/membuat-kiblat-dengan-react-native-55n3 <p>Halo semua nya. Kembali lagi sama krisna</p> <p>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 <a href="https://reactnative.dev/">documentnya</a>.</p> <p>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.<br> Syarat-syarat yang perlu kalian lakukan bisa dilihat disini <a href="https://reactnative.dev/docs/environment-setup">Setting up the development environment</a>.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--BS-dkSY0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/9077x3ymtiq7wdlvc91k.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--BS-dkSY0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/9077x3ymtiq7wdlvc91k.png" alt="Setting up the development environment"></a></p> <p>Untuk jenis React Native nya pilih yang CLI<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kyZR92DH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3uwhrp1bwlyn8nyqvpex.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kyZR92DH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3uwhrp1bwlyn8nyqvpex.png" alt="Alt Text"></a><br> Kemudian sesuaikan jenis komputer/laptop apa yang kamu gunakan mac atau window, untuk saat ini target aplikasi nya kita pilih membuat aplikasi Android<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uXYo0aDG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kf6l99ripcbbjbgcn9z8.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uXYo0aDG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kf6l99ripcbbjbgcn9z8.png" alt="Alt Text"></a></p> <p>Kemudian kalian langsung ikuti saja petunjuk disitu untuk bisa membuat aplikasi react native. Kamu juga bisa googling pastiny untuk tahap ini.<br> Mari buat aplikasi kompas kiblat menggunakan React Native.</p> <p>Pertama mari kita init sebuah projek baru dengan perintah sebagai berikut.<br> </p> <p><code>npx react-native init KompasKiblat</code><br> </p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5jkKhTOP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/98efnjtttz71mwrlkoj3.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5jkKhTOP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/98efnjtttz71mwrlkoj3.png" alt="npx react-native init KompasKiblat"></a></p> <p>Bila sudah selesai akan ada folder baru bernama KompasKiblat yang tadi sudah di init.<br> 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 <a href="https://www.google.com/search?q=cara+debug+mode+hp+android&amp;oq=cara+debug+mode+hp+android">debug mode</a>.</p> <p>Untuk cek apakah HP sudah terhubung dengan laptop bisa dengan command<br> </p> <p><code>adb devices</code><br> </p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rMSXjbAM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zlnoic69zi4fsmvxmmz7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rMSXjbAM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zlnoic69zi4fsmvxmmz7.png" alt="Alt Text"></a></p> <p>Mari kita jalankan aplikasi. Masuk kedalam foldernya pastikan kamu sudah ada di dalam folder project<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Mhvt-4A_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0gfpye04hvl5f6pjdwoa.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Mhvt-4A_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0gfpye04hvl5f6pjdwoa.png" alt="Alt Text"></a></p> <p>Lalu jalankan command berikut<br> </p> <p><code>npx react-native run-android</code><br> </p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--O-jI2Ju7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/r17qw8dh56m8pywhkvb7.jpeg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--O-jI2Ju7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/r17qw8dh56m8pywhkvb7.jpeg" alt="Alt Text"></a><br> Sekarang buka folder project kita dengan text editor yang kamu suka, disini aku pake <a href="https://code.visualstudio.com/">Visual Code Studio</a> buat ngetik-ngetik kode nya.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--spnQK192--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/yv1zwafcjxs9isdal3p2.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--spnQK192--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/yv1zwafcjxs9isdal3p2.png" alt="Alt Text"></a></p> <h1> Install Kompas </h1> <p>Sekarang kita akan menggunakan library ini <a href="https://github.com/firofame/react-native-compass-heading">react-native-compass-heading</a> untuk kompas nya.<br> Kita install library nya di projek kita. Baik nya kita matikan dulu server React Native kita nya dengan <code>ctrl+c</code><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uk6chFXl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0sv4i4fkrh48plhcfqj0.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uk6chFXl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0sv4i4fkrh48plhcfqj0.png" alt="Alt Text"></a><br> tips kita install library nya melalui terminal di tempat Visual Code, cari cara buka terminalnya.</p> <p>Kita install library dengan command berikut:<br> </p> <p><code>npm install react-native-compass-heading</code><br> </p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--e3hlM2e9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/tca748ufwgkzc4qaumuf.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--e3hlM2e9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/tca748ufwgkzc4qaumuf.png" alt="Alt Text"></a><br> Setelah berhasil di install, kita update kode yang di App.js <br> </p> <div class="ltag_gist-liquid-tag"> </div> <p>Kamu juga perlu memasukan gambar untuk kompasnya lalu simpat di folder projek. Gambar kompas download <a href="https://raw.githubusercontent.com/firofame/react-native-compass-heading/master/Example/compass.png">disini</a>.</p> <p>Coba jalankan lagi projek RN kita<br> </p> <p><code>npx react-native run-android</code><br> </p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZdrsewOE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3div8ec05w4ycbz7zp5g.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZdrsewOE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3div8ec05w4ycbz7zp5g.gif" alt="Alt Text"></a></p> <p>Sekarang kompas kita sudah berhasil jalan.<br> 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.</p> <p>Langkah selanjutnya menentukan lokasi kita untuk dihitung posisinya mengarah ke arah kiblat. Lokasi ini yaitu menggunakan latitude dan longitude.</p> <p>kita install library untuk mendapatkan latitude dan longitude.<br> </p> <p><code>npm install @react-native-community/geolocation --save</code><br> </p> <p>setelah itu tambah juga kode ini ke dalam AndroidManifest.xml untuk izin lokasi<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>// KomplasKiblat/android/app/src/main/AndroidManifest.xml &lt;uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /&gt; </code></pre></div> <p>Setelah itu kita akan membutuhkan gambar panah yang selalu mengarah ke kiblat kamu bisa download disini. Masukan ke dalam folder projek kita</p> <p>Sekarang kita update kode kita<br> </p> <div class="ltag_gist-liquid-tag"> </div> <p>Coba jalankan lagi projek RN kita<br> </p> <p><code>npx react-native run-android</code><br> </p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mxONWohu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/tuzwvqqp3bib7265pmg2.jpeg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mxONWohu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/tuzwvqqp3bib7265pmg2.jpeg" alt="Alt Text"></a></p> <p>Lalu kita buat fungsi untuk mengambil arah kiblat kita <br> Fungsi ini namanya bearing. Untuk selengkapnya kamu bisa belajar <a href="http://www.movable-type.co.uk/scripts/latlong.html">disini</a>. </p> <p>Mari kita update kode kita <br> </p> <div class="ltag_gist-liquid-tag"> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--99OMN2qV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2einx8l6kej5m7oo610f.jpeg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--99OMN2qV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2einx8l6kej5m7oo610f.jpeg" alt="Alt Text"></a></p> <p>Selamat kamu berhasil membuat kompas.<br> Kamu bisa liat projek folder file ini disini <a href="https://github.com/krisnailafat/KompasKiblat">github.com/krisnailafat/KompasKiblat</a>. Terimakasih sudah mencoba.</p> <p>Kalau ada pertanyaan kamu bisa kontak saja :)<br> Kalau boleh kamu bisa bantu kirim dukungan buat team ini <a href="https://saweria.co/krisnailafat">saweria.co/krisnailafat</a><br> <em>Ig : krisnailafat</em></p> reactnative compass kiblat indonesia