Skip to main content

Posts

Showing posts with the label Pemrograman

React Native Error | Cara mengatasi masalah borderRadius

Penggunaan borderRadius pada sebuah view sangat umum di gunakan dalam desain project React Native. borderRadius akan membuat tampilan view tidak lagi kotak, tetapi dengan sudut yang membulat. Namun, pada project terakhir yang saya buat, saya mengalami kasus yang cukup membuat kesal, bagaimana tidak, penerapan style yang biasanya tidak ada masalah, tiba-tiba tidak bekerja seperti biasanya. Kasusnya terjadi ketika saya menerapkan borderRadius pada sebuah View tiba tiba saja background dan border dari View ini tidak tampil, jadi seolah olah semuanya transparan. Setelah mencoba berbagai cara akhirnya saya menemukan sebuah solusi yang sebenarnya lebih mirip seperti mengakali kesalahan dari React Native ini. Ya yang penting errornya bisa di atasi tanpa mengurangi kinerja aplikasi 😀.

Cara Mengganti Nama Aplikasi React Native untuk Upload ke Playstore

Terkadang dalam proses pengembangan sebuah aplikasi menggunakan React Native, kita perlu untuk mengganti Nama dari Aplikasi yang kita buat. Seperti kasus yang saya alami, pada awal pengembangan aplikasi saya asal saja memberi nama. Setelah aplikasi siap di upload ke playstore saya baru mendapatkan nama yang pas untuk aplikasi tersebut. Setelah melakukan pencarian, ternyata React Native tidak menyediakan perintah khusus untuk mengganti nama Aplikasi, jadi kita harus melakukannya secara manual. Pada contoh kasus ini, misalkan Nama Aplikasi kita adalah l atihan1 dan kita akan mengganti namanya menjadi aplikasikeren. Untuk melakukan perubahan nama aplikasi ada beberapa file yang perlu di edit, diantaranya: android\app\src\main\java\com\Latihan1\MainActivity.java android\app\src\main\java\com\Latihan1\MainApplocation.java android\app\src\main\AndroidManifest.xml android\app\build.gradle 1. MainActivity.java Bagian yang perlu kita edit pada file  MainActivity.java adala...

Test API Server dengan REST Client Insomia

Setelah menyelesaikan setup API Server dengan Laravel Passport, sekarang saatnya kita melakukan test login untuk memastikan semua setup sudah benar. untuk melakukan hal ini kita memerlukan Program Rest Client Insomia. Memang ada beberapa aplikasi Rest Client yang bisa kita gunakan, tetapi saya lebih suka menggunakan Insomia, karena tampilannya lebih simple dan sangat mudah di gunakan. Sebelum melakukan test login, pastikan kita sudah mengunduh dan Install Insomia rest . Kalau sobat belum pernah menggunakan Insomia, di bawah ini adalah cara menggunakan Insomia: Tampilan Insomia Klik tombol + untuk membuat request baru.  Setelah klik New Request, kita akan di minta untuk memberi nama, sobat bisa memberi nama apa saja, tapi pada contoh kali ini, kita akan memberi nama login, karena fungsi request ini adalah untuk Login ke Server API. Pilih POST Selanjutnya pilih POST karena kita akan melakukan login melalui route dengan metode post. Masukan juga url route login se...

Menyembunyikan Secret Key pada Laravel Passport

Pada catatan sebelumnya kita sudah belajar belajar bagaimana cara membuat API server menggunakan Laravel Passport dan sudah berhasil melakukan login. Tapi masalahnya pada metode login yang kita buat sebelumnya, client_secret kita masih kelihatan, dan ini tentunya tidak bagus untuk keamanan server kita. Ilustrasi Proses Login yang tidak aman. Apabila client_secret key ini bisa di lihat dengan mudah, maka orang akan mudah untuk melakukan akses data pada server kita. Untuk itu kita harus melakukan modifikasi pada server, sehingga user tidak perlu memasukan client_secret pada saat login. Caranya adalah, kita akan memanggil route yang memerlukan client_secret ini di dalam server, jadi proses login yang sesungguhnya akan terjadi di dalam server, sehingga tidak terlihat oleh pengguna. Pada proses ini akan menggunakan modul Guzzle http. BACA JUGA Membuat API Server dengan Laravel Passport Membuat Laravel User Otomatis dengan Seeding Test API Server dengan REST Client Insomia ...

Membuat Laravel User Otomatis dengan Seeding

Pada catatan sebelumnya kita sudah menyelesaikan proses membuat API Server menggunakan Laravel Passport, tapi kita belum melakukan uji coba untuk login dan mendapatkan acces_token. Untuk itu kita perlu membuat satu user. langkah-langkah membuat user dengan Laravel seeding Di sini saya akan membagikan cara untuk membuat user dengan proses seeding yang di sediakan oleh Laravel. Silahkan ikuti langkah-langkah berikut: BACA JUGA Membuat API Server dengan Laravel Passport Menyembunyikan Secret Key pada Laravel Passport Test API Server dengan REST Client Insomia 1. Membuat Object Seeder  kita kan membuat file php dengan nama UsersTableSeeder. caranya : Buka Terminal Masuk ke direktori project Laravel Jalankan perintah php artisan make:seeder UsersTableSeeder.  2. Edit file UsersTableSeeder.php Selanjutnya buka file database\seeds\UsersTableSeeder.php dan tambahkan code berikut di dalam function run() DB::table('users')->insert([     ...

Membuat API Server dengan Laravel Passport

Halo sobat, senang sekali bisa berbagi catatan di Blog ini. kali ini saya akan membagikan langkah-langkah untuk membuat API Server menggunakan Laravel Passport. Kalau kalian belum tahu, API atau Application Programming Interface adalah program yang berfungsi untuk menjembatani dua atau lebih aplikasi berbeda. Pada kasus yang sedang saya kerjakan ini API berfungsi untuk menangani tugas dalam pengolahan database dan memberikan hasil berupa data sesuai dengan permintaan. Jadi API server ini bertugas untuk melayani request dari Aplikasi Client. Untuk informasi lebih lengkap silahkan baca di penjelasan Application Programming Interface . Untuk membuat API server ini pilihan saya jatuh pada Laravel Passport, mengingat platform PHP ini sangat populer dan mudah dipelajari. Tutorialnya juga dengan mudah bisa kita dapatkan. Untuk security Laravel Passport menggunakan teknologi OAuth2 . Langkah-Langkah Membuat API Server dengan Laravel Passport Dibawah ini adalah langkah-langkah yang ...

Implementasi If Condition Dalam Render React Native

Sebagai seorang programer tentunya kita sudah tidak asing dengan condition If Else. ya fungsi ini memang wajib ada dalam setiap bahasa pemrograman. Tapi lain ceritanya ketika saya mencoba membuat Aplikasi dengan React Native. Hal yang biasanya mudah di implementasi kan ternyata berbeda kasusnya di React Native. iklanku Sebagai orang yang baru mengenal Javascript, penerapan If else pada method masih cukup mudah di mengerti. Tapi ketika saya ingin menggunakan if else pada bagian render saya benar benar tidak ada ide. Setelah pencarian cukup lama akhirnya saya menemukan solusi. ternyata Javascript mempunyai aturan sendiri dalam penerapan if else pada bagian render. Di bawah ini adalah contoh code nya. {this.state.benar==true? (       <view>                       <text>Jawaban Kamu Benar</text>      </view> ) : (          <view styl=""...

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: 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 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 la...

Cara Enable Macro Pada Microsoft Acces

Secara default fungsi macro pada Microsoft Office akan  di batasi. tapi terkadang kita perlu untuk mengaktifkan semua fungsi macro ini. hal ini juga berlaku pada Microsoft Office Acces. Pada panduan kali ini saya akan menunjukan cara untuk mengaktifkan macro pada Microsoft Acces 2010. silahkan ikuti langkah di bawah ini: 1. Buka Microsoft Acces dan buat database baru. 2. Klik menu file, sehingga muncul seperti gambar di bawah ini. lalu klik pada bagian otions 3. Selanjutnya klik Trust Center 4. Selanjutnya klik Trust Center Settings 5.Selanjutnya klik Macro Settings 6. Di Macro Settings pastikan sudah terpilih yang paling bawah Klik OK dan semua proses sudah selesai. silahkan buka ulang file acces untuk menerapkan perubahan ini.

Cara Compile Project React Native Menjadi APK

Setelah project react native yang kita kerjakan selesai dan semua fitur sudah bekerja sempurna di emulator. kini saatnya kita membuat file APK supaya Aplikasi yang kita buat bisa di install di perangkat android. Cara Untuk Membuat File APK Versi Release. APK versi release adalah file final yang bisa di install di perangkat android. pada versi ini semua fungsi dan  menu debug tidak akan ada.  Membuat signing key Signing ke di sini adalah file dengan extensi .keystore yang berfungsi sebagai id unik dari Alpikasi yang kita buat. file ini bisa kita buat dengan keytool dari java. Berikut ini langkah-langkahnya: Buka terminal atau command promt Di terminal, masuk ke folder project kita ( sebenarnya bisa di mana saja , tapi saya lebih suka kita membuat file keystore ini langsung di folder project) Copy perintah di bawah ini, dan jalankan di terminal keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 S...

Cara membaca database SQL Server dengan PHP di Windows

Kali ini saya akan berbagi informasi tentang bagaimana caranya mengatur supaya kita bisa membaca database SQL Server dengan PHP di windows. versi windows yang saya pakai adalah windows 10. Kita memang bisa membaca databse SQL Server menggunakan bahasa pemrograman PHP, tapi pengaturan normal atau defaultnya tidak menyertakan driver untuk SQL Server. Untuk melakukannya kita perlu install sendiri driver php sql server. Tapi sebelum kita install driver php sql server, silahkan terlebh dahulu periksa apakah pdo sql sudah terinstall. buka http://localhost/dashboard/phpinfo.php apabila kalian memakai xampp. pdo sql server belum terinstall Langkah-langkah install pdo sql server: 1. Periksa versi PHP yang terinstall di komputer kalian. bisa di cek dari phpinfo(0 2. Lalu download file Php Driver Sql Server . pilih versi yang sesuai dengn versi PHP yang ada. untuk driver versi 5.6 berisi cocok untuk php versi 71,72 dan 73. 3. Buka file sqlsrv56.exe dan extract. kalian akan menemukan ...

Membuat Navigasi dengan react-native-router-flux

Navigasi adalah komponen penting dalam sebuah aplikasi, karena sebagian besar aplikasi pasti memiliki lebih dari satu halaman. nah untuk berpindah dari satu halaman ke halaman lainnya kita memerlukan komponen navigasi ini. Pada project kali ini saya akan menggunakan  react-native-router-flux untuk membantu navigasi dalam aplikasi. Cara install  react-native-router-flux Untuk menambahkan  modul React Native Vector Icons ke dalam project anda, pertama buka terminal. Apabila anda belum berada di folder project React Native anda, silahkan masuk dulu ke folder Project React Native Anda. Tambahkan modul react-native-router-flux dengan menjalankan  perintah Yarn add react-native-router-flux Bila yarn belum ada di komputer kalian silahkan gunakan ini: Npm install react-native-router-flux Selanjutnya menambahkan code untuk mengatur navigasi. Kita bisa menambahkan code pada file App.js atau membuat file terpisah. Nah saya akan membuat code na...

React Native -Menambahkan Icon Cantik dengan React Native Vector Icons

Icon merupakan elemen yang sangat penting dalam desain user interface sebuah aplikasi. pemilihan icon yang tepat sangat mempengaruhi kemudahan user dalam memakai aplikasi. Lalu bagaimana cara mendapatkan icon yang tepat untuk project react native kita. Untuk itu kali ini saya akan membagikan informasi tentang modul yang sering digunakan untuk memudahkan penambahan Icon pada project react native. Kita akan menggunakan React-Native-Vector Icon. module ini mempunyai banyak pilihan Icon yang sangat bagus dan berkualitas. dan yang terpenting semuanya Gratis. Silahkan lihat  koleksi icon react-native vector-icons apabila anda penasaran seperti apa koleksi Iconnya. Cara install React Native Vector Icons Untuk menambahkan  modul React Native Vector Icons ke dalam project anda, pertama buka terminal. Apabila anda belum berada di folder project React Native anda, silahkan masuk dulu ke folder Project React Native Anda. Lalu jalankan perintah ini di terminal: yar...

Pusing dengan format Number dan Tanggal di React Native? Coba Solusi Ini

Ketika mulai mempelajari cara membuat Aplikasi dengan React Native ada satu hal yang membuat saya tidak habis pikir. saya menghabiskan waktu lebih dari 2 hari untuk mencari bagaimana cara menampilkan angka dan tanggal sesuai dengan format yang saya inginkan. Padahal itu sangat mudah dilakukan di platform lain. Beberapa module sudah saya coba tapi tidak ada yang bekerja dengan baik. akhirnya saya menyerah untuk mencari module yang sesuai. saya memutuskan untuk membuat sendiri code untuk memformat angka dan tanggal sehingga gampang untuk saya ubah sesuai keinginan. Apabila teman teman mempunyai masalah seperti apa yang saya alami, teman-teman bisa mencoba script yang saya buat ini. Langkah -langkah yang harus dilakukan: Pertama , buat file js dengan nama apa saja. kalau saya membuat dengan nama FormatNumber.js. di dalam file FormatAngka.js masukan code berikut: Kedua , import file FormatNumber ini  sebelum menggunakannya. berikut contoh importnya.  import For...

React Native Command failed: gradlew.bat installDebug (Solved)

Jadi ceritanya begini, sebelumnya Project React Native yang saya buat tidak ada masalah saat menjalankan perintah react-native run-android. Tetapi setelah saya install module react native image picker dan menjalankan perintah link. dan terjadilah error seperti ini: SOLUSI Ternyata solusinya sangatlah mudah. error ini di sebabkan oleh perintah  react-native link dimana pada saat menambahkan path di file settings.gradle dia menggunakan tanda "\". Jadi untuk memperbaikinya silahkan buka folder file settings.gradle yang ada di folder android. lalu ubah tanda "/" menjadi tanda "\". contohnya bisa di lihat di gambar di bawah ini.  Gambar di atas adalah settingan sebelum di ubah, jadi masih error. pada kasus ini, error project saya di sebabkan oleh path dari module  react-native-image-picker. Dan pada gambar di atas ini saya sudah merubah tanda "/" menjadi tanda "\" pada path react-native-image-picker. Demikian dulu sha...