Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native
Code

Memulai dengan Template Aplikasi React Native

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Merancang aplikasi React Native dari awal seringkali merupakan proses yang tidak praktis—terutama bagian desain, karena Anda harus merencanakan perangkat Android dan iOS. Tidak hanya itu, tapi Anda juga harus memastikan aplikasi Anda terlihat bagus pada ukuran layar yang berbeda.

Di sinilah template menjadi sangat berguna. Mereka menangani desain awal untuk Anda sehingga aplikasi Anda terlihat bagus dengan sedikit usaha desain di pihak Anda. Ada beberapa template semacam itu di CodeCanyon, sebuah pasar untuk template dan plugin. Di sana Anda dapat menemukan berbagai jenis template yang disesuaikan dengan tipe aplikasi tertentu yang ingin Anda buat.

Dalam tutorial ini, kita akan melihat bagaimana menggunakan template BeoStore. Seperti namanya, BeoStore adalah template aplikasi e-commerce untuk React Native.

Mendapatkan Template dari Marketplace

Anda dapat mengunduh template dengan membuka halaman produk BeoStore di CodeCanyon. Ini adalah template berbayar, tapi ini layak untuk investasi, karena ini memiliki sebagian besar fitur yang dibutuhkan dalam aplikasi e-commerce. Yang perlu Anda lakukan adalah mengkonfigurasi templatenya dan menyesuaikannya sesuai dengan keinginan Anda. Untuk mendapatkan ide apa yang ditawarkannya di luar kotak, berikut adalah beberapa fitur utamanya:

  • Integrasi penuh dengan WooCommerce: jika Anda menjalankan situs WooCommerce, aplikasinya dapat menampilkan produk yang sama dengan yang ada di situs web yang ada.
  • Dukungan untuk iOS dan Android: aplikasinya berjalan dan terlihat bagus di platform Android dan iOS.
  • Login sosial: pelanggan dapat log in menggunakan akun Facebook atau Google mereka.
  • Kustomisasi yang mudah: semuanya dipecah menjadi komponen. Ini memastikan bahwa Anda dapat dengan mudah menyesuaikan template berdasarkan merek Anda.
  • Pemberitahuan push: ini secara otomatis memberi tahu pelanggan Anda bila ada kabar terbaru tentang status pesanan mereka. Anda juga dapat mengirimkan pemberitahuan push untuk promosi produk. Pemberitahuan push diimplementasikan dengan Firebase.
  • Dukungan multi bahasa: di luar kotak Anda mendapatkan bahasa Inggris sebagai bahasa utama. Bahasa Vietnam ada sebagai pilihan kedua, tapi Anda juga bisa menambahkan bahasa Anda sendiri.
  • Integrasi pembayaran yang aman: pembayaran dilakukan dengan PayPal.

Jika Anda belum memiliki akun Envato, Anda bisa mendaftar di sini. Setelah selesai, masuk ke akun yang baru Anda buat. Kemudian Anda bisa kembali ke halaman BeoStore dan klik tombol Buy Now.

Menyiapkan Proyek

Setelah membeli template, Anda akan mendapatkan link unduhan ke file arsip template. Ekstrak itu dan Anda akan mendapatkan folder CodeCanyon yang berisi MStore 2.2.

MStore 2.2 adalah direktori untuk proyek template. Buka jendela terminal baru di dalam direktori itu dan jalankan perintah berikut:

Ini akan menginstal semua dependensi proyek. Ini mungkin memakan waktu cukup lama tergantung kecepatan unduhan Anda, karena harus mengunduh banyak dependensi. Lihatlah package.json jika Anda ingin melihat paket yang perlu diunduh.

Setelah selesai, ada langkah tambahan jika Anda ingin membangun untuk perangkat iOS. Buka folder iOS dan jalankan perintah berikut:

Selanjutnya, untuk Android, sambungkan perangkat seluler Anda ke komputer Anda dan jalankan:

Ini akan mencantumkan semua perangkat Android yang terhubung ke komputer Anda. Jika ini adalah pertama kalinya Anda menghubungkan perangkat, Anda harus meminta konfirmasi jika ingin mengizinkan komputer melakukan debugging USB. Cukup tekan yes setelah Anda mendapatkan prompt itu.

Sekarang Anda dapat menjalankan aplikasi di perangkat Android Anda:

Untuk iOS:

Jika Anda tidak menemukan kesalahan, Anda akan disambut dengan halaman berikut:

MStore Template Home page

Untuk memberi gambaran tentang berbagai halaman yang tersedia di template, berikut adalah beberapa screenshot lainnya:

MStore Template Cart
MStore Template Checkout
MStore Template Login
MStore Template Product Page

Mengatasi Masalah Pengaturan Proyek

Pada bagian ini, saya telah mengumpulkan daftar kesalahan pengaturan proyek yang umum dan solusinya.

Development Server Didn't Start

Jika server pengembangan tidak dijalankan secara otomatis saat Anda menjalankan perintah react-native run-android atau react-native run-ios, Anda dapat menjalankannya secara manual dengan menjalankan:

Watch Took Too Long to Load

Jika Anda mendapatkan error yang mirip dengan berikut ini:

Ini karena instance Watchman yang ada sedang berjalan. Ini adalah komponen dari server pengembangan React Native. Anda bisa mengatasi kesalahan ini dan mematikan Watchman dengan menjalankan perintah berikut:

Could Not Run ADB Reverse

Jika Anda mendapatkan kesalahan berikut:

Ini berarti perangkat Android Anda berjalan dengan versi yang lebih rendah dari 5.0 (Lollipop). Ini sebenarnya bukan kesalahan. Ini hanya berarti perangkat Android Anda tidak mendukung adb reverse, yang digunakan untuk menghubungkan server pengembangan ke perangkat Anda melalui debugging USB. Jika ini tidak tersedia, React Native jatuh kembali ke debugging menggunakan Wi-Fi. Anda dapat menemukan informasi lebih lanjut tentang hal itu di sini: Menjalankan di Perangkat.

Hal lain mungkin menyebabkan build Anda untuk gagal. Anda bisa menggulir ke atas terminal untuk melihat apakah ada kesalahan yang terjadi sebelumnya.

Can't Find Variable _fbBatchedBridge

Jika Anda mendapatkan kesalahan berikut dan server pengembangan berjalan dalam mode Wi-Fi, ini berarti Anda belum menyiapkan IP komputer Anda di perangkat Android Anda. (Ini biasanya hanya muncul dengan perangkat Android di bawah versi 5.0.)

Anda dapat menjalankan berikut untuk menampilkan opsi pengembang React Native pada perangkat Anda:

Pilih Dev Settings dari menu yang muncul. Di bagian Debugging, tekan Debug server host & port for device. Masukkan IP internal yang diberikan oleh router rumah Anda bersama dengan port tempat server pengembangan dijalankan dan tekan OK:

Kembali ke layar utama aplikasi dan jalankan adb shell input keyevent 82 lagi. Kali ini pilih Reload untuk memuat ulang aplikasi.

Could Not Find Firebase, App Compat, or GMS Play Services

Jika Anda mendapatkan kesalahan "could not find", ini berarti Anda belum menginstal paket yang sesuai menggunakan Android SDK Manager.

Berikut adalah paket yang perlu diinstal:

  • Android Support Repository
  • Android Support Library
  • Google Play Services
  • Google Repository

Pastikan juga memperbarui paket yang ada jika ada pembaruan yang tersedia.

Masalah Lainnya

Jika masalah Anda tidak melibatkan hal-hal di atas, Anda dapat mencoba yang berikut ini:

  • Periksa dokumentasi tentang pemecahan masalah.
  • Periksa komentar produk template. Anda dapat mencari kesalahan yang Anda dapatkan. Cobalah untuk menggeneralisasi dan mempersingkat pesan kesalahan sekalipun—jangan hanya mencari keseluruhan pesan kesalahan. Jika Anda tidak dapat menemukan kesalahannya, Anda dapat mencoba mengajukan pertanyaan Anda sendiri di thread komentar. Tim pendukung biasanya akan menjawab segera.
  • Coba cari kesalahannya di Google. Sekalipun hasil yang Anda temukan tidak melibatkan penggunaan template, mereka akan memberi Anda gambaran tentang bagaimana memecahkan masalahnya.
  • Cari di StackOverflow atau ajukan pertanyaan baru. Pastikan untuk menyertakan semua rincian yang diperlukan (misalnya, pesan kesalahan, langkah-langkah yang telah Anda lakukan). Ada artikel bagus tentang bagaimana mengajukan pertanyaan di StackOverflow.

Menyesuaikan Template

Tempat yang baik untuk mulai belajar bagaimana melakukan sesuatu dalam template adalah dokumentasinya:

  • Project Layout: menunjukkan tempat untuk menemukan berbagai file dalam template dan penggunaannya.
  • Migrate WooCommerce: menunjukkan bagaimana Anda dapat menghubungkan situs WooCommerce yang ada ke aplikasi. Mengaitkan aplikasi dengan WooCommerce Anda berarti dapat mengambil semua kategori produk dan produk di toko WooCommerce Anda.
  • Migrate Services: menunjukkan bagaimana cara mengkonfigurasi nama aplikasi, Firebase (untuk notifikasi push), dan login sosial.
  • Customize: menunjukkan bagaimana menyesuaikan bahasa dan tema.

Pastikan untuk memeriksa mereka semua! Saya tidak akan mengulangi apa yang disebutkan dalam dokumentasinya. Sebagai gantinya, apa yang akan kita lakukan di bagian ini adalah menyesuaikan template jadi tampilannya sesuai keinginan kita.

Sebagian besar pengaturan konfigurasi proyek disimpan di dalam file app/Constants.js. Berikut adalah beberapa contoh hal yang dapat Anda ubah dari file ini:

WooCommerce Integration: URL toko WooCommerce yang digunakan oleh aplikasi. Secara default, ini menggunakan mstore.io.

Social logins: Ini diimplementasikan dengan menggunakan Auth0, sebuah platform otentikasi. Secara default, template hanya mendukung sign-in Google dan Facebook. Tapi Anda akan bisa menambahkan layanan apapun yang didukung Auth0.

Icons: Anda bisa menggunakan ikon dari Fontawesome, tapi Anda harus memberi awalan nama dengan ios-.

Theme: Warna untuk berbagai komponen yang membentuk setiap halaman juga dapat diperbarui. Misalnya, jika Anda ingin mengubah warna latar belakang header, Anda dapat memperbarui nilai untuk TopBar:

Images: Splash screen dan gambar lainnya juga dapat diperbarui dengan menentukan path baru ke masing-masing dari berikut:

Gambar-gambar ini disimpan di direktori app/images, Anda bisa menggantinya jika Anda tidak ingin menyimpan gambar yang lama.

  • Anda juga bisa mengubah opsi PayPal dari file ini. Pastikan membuat Akun Pengembang PayPal Anda sendiri untuk mendapatkan clientID dan secretKey. Jangan lupa memperbarui sandBoxMode menjadi false saat Anda menerapkan aplikasi Anda ke produksi, karena secara default menggunakan mode sandbox sehingga tidak ada uang yang sebenarnya akan digunakan pada transaksi.
  • Untuk menyesuaikan halaman individual, Anda perlu membuka direktori app/containers. Di sinilah Anda akan menemukan file untuk setiap halaman. Misalnya, jika Anda ingin menyesuaikan halaman utama, navigasikan ke folder home dan buka file index.js. Setelah dibuka, Anda akan melihat bahwa halaman tersebut menggunakan komponen <ImageCard> untuk me-render setiap kategori produk. Jadi jika Anda ingin menambahkan gaya umum untuk komponen <ImageCard>, Anda harus memperbarui file app/Components/ImageCard/index.js. Jika tidak, Anda cukup memperbarui gaya di dalam halaman itu sendiri:

Kesimpulan

Tutorial ini sama sekali bukan panduan komprehensif tentang cara menggunakan template BeoStore. Tapi kita sudah cukup banyak membahasnya, terutama pada pemecahan masalah pengaturan, yang hanya sedikit dibahas oleh dokumentasi resmi.

Langkah selanjutnya adalah mengaitkan template ini dengan situs WooCommerce Anda atau bahkan membuatnya kembali sehingga bisa digunakan untuk jenis aplikasi lainnya.

Unduh template sekarang, atau Jika Anda ingin mempelajari lebih lanjut tentangnya, Anda dapat melihat dokumentasinya di sini. Anda juga dapat menemukan lebih banyak lagi template aplikasi React Native pada CodeCanyon.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.