Pada tutorial KonsepKoding kali ini kita akan berbagi tutorial mengenai In-App Browser Application, sebelum kita memulai pelajaran koding kita, akan lebih baik bila kita mengetahui apa itu In App Browser pada aplikasi Android maupun iOS. Teknologi In-App Browser digunakan oleh perusahaan besar seperti Instagram dan Gojek, ya memang In-App Browser mirip Webview namun berbeda karena kita memanggilnya pada screen method atau function tersebut.
Tutorial In-App Browser Modern Dengan React Native |
Apa Yang Akan Kita Pelajari
1. Apa Itu In-App Browser
2. Memulai Koding Dan Praktik Di React Native
Apa Itu In-App Browser?
"In-App Browser" adalah tampilan web yang menyediakan fungsionalitas penelusuran terbatas sebagai sub proses aplikasi yang memicu tampilan web. Ini juga memfasilitasi aliran informasi dari tampilan browser ke aplikasi induk.
Memulai Koding Dan Praktik Di React Native
1. Silahkan buat project baru React Native
npx react-native init contoh_inapp
2. Setalah itu masuk ke directori Root Project
cd contoh_inapp3. Kemudian Intsall library untuk In-App Browser
npm i react-native-inappbrowser-reborn4. Agar bisa di jalankan pada aplikasi iOS ketikan perintah di bawah ini:
cd ios && pod install5. Tambahan Jika kamu menggunakan React Native versi 0.59 kebawah kamu harus melakukan linking dengan aplikasi kamu.
npx react-native link react-native-inappbrowser-reborn7. Yang paling kita tunggu koding, ubah file kode di App.js, dan ubah menjadi seperti kode di bawah ini.
Kemudian kita run project kita dengan peintah npx react-native run-android atau npx react-native run-ios dan jika kamu berhasil maka akan seperti pada gambar di bawah ini:
In-App Browser |
In-App Browser |
#1 Pengenelan React Native Dan Cara Instalasinya Lengkap
#2 Tutorial React Native State Dan Props Serta Penjelasannya
#3 Tutorial Menampilkan Gambar React Native Yang Baik & Benar
#4 Tutorial React Native Alert, Beserta Jenis-Jenisnya Lengkap
#5 Tutorial ClickListener Pada React Native Serta Penggunaannya
#6 Tutorial React Native: Text Italic, Bold, Underline dan Styling
#7 Tutorial Membuat Custom TextArea Pada React Native
#8 Tutorial React Native Mengubah Warna Pada Placeholder
#9 Tutorial React Native : Advanced Webview Dengan Loader
#10 Tutorial Open Link Url Website Di React Native#9 Tutorial React Native : Advanced Webview Dengan Loader
#11 Tutorial React Native WhatsApp Direct Send Link
#12 Tutorial React Native Modal Dengan Desain Gambar
#13 Tutorial React Native : React Navigation 5 Untuk Navigasi
#14 Tutorial React Native : Mengirim Data Pada React Navigation
#15 Tutorial React Native Top TabView Gesture Lengkap
#16 Tutorial React Native : Animation JSON Lottie
#17 Tutorial Dan Penjelasan Lifecycle Pada Classes React Native
#18 Tutorial Get API React Native Yang Baik Dengan Axios
#19 Tutorial Get Detail Data React Native Axios Github API
#20 Tutorial Date Time React Native Membuat Aplikasi Stopwatch
#21 Tutorial React Native State Management Redux Lengkap
#22 Tutorial React Native : Redux Thunk Get API
0 Comments