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

Tools Untuk React Native Development

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Tools, libraries dan services adalah bagian penting dari kehidupan setiap developer, tidak peduli environment yang anda kembangkan. Tidak terkecuali React Native. Dalam artikel ini, saya akan memandu anda melalui beberapa framework UI terbaik, libraries, components, development tools, dan layanan web yang akan membuat anda menjadi pengembang React Native yang lebih senang dan lebih produktif.

Text Editors dan IDEa

Visual Studio Code adalah editor teks yang memiliki kemampuan integrasi IntelliSense, debugging, dan Git terintegrasi. Apa yang membuatnya sangat bagus untuk React Native development adalah ekstensi React Native tools. Hal ini memungkinkan anda untuk mengeksekusi perintah bereaksi asli dari perintah palet, tambahkan IntelliSense untuk bereaksi api asli, dan debug kode dalam editor itu sendiri.

Untuk informasi lebih lanjut mengenai bagaimana untuk mengatur Visual Studio kode untuk bereaksi asli, check out posting blog ini: VSCode untuk React Native.

Jika Anda menggunakan Atom, anda dapat menginstal plugin Nuclide. Plugin ini dibuat khusus untuk bekerja dengan proyek-proyek React Native, Flow, dan Hack. Ini memiliki built-in debugger dan elemen inspector dengan semua fitur yang anda digunakan untuk di Chrome Developer Tools. Aliran dukungan berarti bahwa anda mendapatkan autocomplete, mengisyaratkan jenis dan kode diagnostik dari kotak.

Jika Anda ingin menjelajahi lebih banyak IDE dan opsi editor, lihat posting blog ini di Top 10 Editor untuk React Native.

Development Tools

Development tools memiliki cakupan luas, jadi saya akan pengelompokan masing-masing alat berdasarkan fokus:

  • SDK
  • Kode kualitas
  • pengujian
  • debugging

SDK

Ketika masuk ke SDK untuk React Native, tidak ada yang mengalahkan Expo. Expo memungkinkan anda dengan mudah membuat prototipe aplikasi tanpa perlu Android Studio atau Xcode. Ini mencakup seperangkat komponen dan pustaka untuk membantu anda mempercepat pengembangan anda.

Alur kerja Expo terdiri dari berikut:

  1. Membuat proyek baru menggunakan create-react-native-app.
  2. Tuliskan kode di editor teks favorit anda.
  3. Jalankan aplikasi menggunakan aplikasi client Expo.

Tidak perlu menghubungkan ponsel ke komputer anda. Cukup pindai kode QR di terminal anda menggunakan aplikasi klien Expo, dan secara otomatis akan menjalankan aplikasi anda. Jika Anda menggunakan Genymotion, Expo juga mendukungnya.

Satu-satunya kelemahan saat menggunakan Expo adalah anda tidak dapat menyertakan paket khusus apa pun yang menggunakan fungsi asli perangkat. Expo sudah termasuk sejumlah paket asli yang umum digunakan seperti Kamera, Facebook, dan Peta. Tetapi jika anda perlu menggunakan paket yang belum mereka dukung, maka anda harus 'mengeluarkan' aplikasi anda. Pada saat itu, aplikasi anda akan dibuat dengan react-native init, dan anda juga akan kehilangan kemampuan untuk menjalankannya menggunakan aplikasi klien Expo.

Kualitas kode

Memeriksa kualitas kode anda adalah penting, dan itulah sebabnya alat seperti ESLint ada. Singkatnya, alat linting memungkinkan anda untuk lebih konsisten dengan kode anda dengan mengeceknya dengan panduan gaya. Contoh panduan gaya seperti itu adalah Panduan Style JavaScript dari Airbnb yang menentukan aturan tentang bagaimana kode JavaScript harus ditulis. Linting tool kemudian memeriksa kode anda terhadap aturan-aturan untuk memastikan bahwa mereka telah diikuti. Ada juga panduan gaya untuk React project.

Jika Anda menggunakan Sublime Text, berikut adalah tutorial yang baik tentang bagaimana anda bisa mengkonfigurasinya sehingga anda dapat memiliki umpan balik real-time pada kualitas kode anda sementara anda coding: Sublime Linting untuk React dan ES6. Jika anda menggunakan editor atau IDE lain, pastikan untuk mencari plugin yang sesuai yang menggunakan ESLint.

Jika Anda ingin menambahkan mengetik statis untuk proyek Anda, Anda dapat menggunakan aliran. Aliran menambahkan statis-mengetik di atas JavaScript tanpa Anda harus membuat perubahan ke basis kode Anda yang ada. Hal ini karena Flow mencoba untuk menyimpulkan tipe sedapat mungkin. Untuk proyek-proyek baru, meskipun, dianjurkan bahwa anda secara eksplisit menetapkan jenis untuk menuai manfaat penuh dari menggunakan Flow.

Untuk mulai menggunakan Flow, ini tutorial tentang bagaimana anda dapat mengatur Flow untuk proyek React Native anda.

Pengujian

Enzim adalah utilitas pengujian untuk React yang memungkinkan anda untuk menegaskan, memanipulasi, dan melintasi keluaran komponen anda. Ini menyediakan metode seperti shallow() untuk 'shallowly' membuat komponen anda, find() untuk melintasi komponen yang diberikan, dan expect() untuk menegaskan props atau konten yang diberikan dalam komponen.

Anda dapat mengikuti panduan ini untuk Menggunakan enzim untuk Menguji Komponen dalam React Native untuk membuat aplikasi Anda bereaksi asli diuji dengan enzim. Jika Anda baru untuk enzim, Anda dapat membaca tutorial ini pada Pengujian Komponen React dengan Enzyme dan Mocha.

Debugging

Reactotron adalah aplikasi desktop yang memungkinkan anda untuk mendebug React dan React Native apps. Beberapa fitur utamanya termasuk memeriksa, memodifikasi, dan berlangganan status aplikasi, melacak permintaan HTTP yang dibuat melalui aplikasi, menaksir kinerja aplikasi, dan kesalahan pelacakan. Jika anda menggunakan Redux, anda bahkan dapat mengirim tindakan dan melacak saga dari dalam Reactotron.

Boilerplates dan UI Frameworks

Snowflake adalah boilerplate pembangunan full-stack React Native. Ini termasuk segala sesuatu dari front-end untuk back-end App. Jadi jika Anda hanya ingin alat yang dapat membantu anda dengan cepat memulai maka anda mungkin menemukan Snowflake yang berguna. Anda dapat membaca catatan untuk informasi lebih lanjut tentang apa paket dan tools yang digunakan untuk memasangnya.

Atau, Anda dapat menggunakan Ignite. Ini adalah alat yang juga mencakup boilerplate, generator, style guide untuk UI komponen, alat pengujian API, dan banyak lagi.

React Native sudah dilengkapi dengan komponen UI yang dapat anda gunakan untuk interaksi pengguna. Masalahnya adalah bahwa mereka hanya memiliki style paling dasar dalam rangka untuk setiap komponen dibedakan untuk apa itu adalah (misalnya tombol, kotak centang). Jika anda ingin menambahkan gaya kustom, Anda harus menulis kode CSS anda sendiri.

Ini adalah waktunya NativeBase datang. Hal ini memungkinkan aplikasi anda untuk memiliki tampilan dan nuansa benar-benar asli dengan menerapkan desain yang sama digunakan dalam asli Android (bahan desain) dan aplikasi iOS (panduan antarmuka). Keluar dari kotak, anda mendapatkan komponen kustom tombol tindakan mengambang, pemintal dan terbaik dari semua, bentuk komponen.

Libraries dan Components

React Native memiliki komunitas besar di balik itu, sehingga ada banyak library dan komponen yang dapat anda gunakan. Kita bisa menghabiskan sepanjang hari, berbicara tentang ini, jadi untuk menjaga hal-hal yang singkat, saya akan fokus pada bidang-bidang berikut:

  • navigasi
  • Manajemen status
  • animasi
  • komponen umum digunakan dan library

Navigasi

React Navigation memungkinkan anda untuk dengan mudah menerapkan navigasi di aplikasi Anda bereaksi asli melalui penggunaan Navigator dengan built-in seperti tumpukan Navigator, Tab Navigator, dan Drawer Navigator. Itu tidak semua, walaupun: Selain navigasi dalam app, itu juga mencakup deep menghubungkan, Redux integrasi, dan web integrasi. Hal ini membuat perpustakaan yang benar-benar kuat untuk melaksanakan navigasi.

Manajemen Status

MobX menyediakan fungsionalitas untuk memperbarui dan mengelola aplikasi negara yang digunakan oleh React. Apa yang membuat calon yang baik untuk manajemen state di bereaksi adalah kesederhanaan dan testability. Ini juga memiliki kurva belajar pendek, jadi hal-hal seperti async fungsi dan nilai-nilai yang dihitung sudah ditangani di belakang layar.

Untuk aplikasi yang lebih besar dan lebih kompleks, Redux masih disarankan. Ini karena MobX sangat liberal, tidak seperti Redux, yang memberikan panduan ketat tentang bagaimana negara harus dikelola. Jadi ini adalah pilihan yang lebih bijak untuk proyek-proyek yang lebih besar dengan lebih banyak orang yang mengerjakannya.

Animasi

React Native sudah memiliki API animasi yang dibangun di dalamnya. Faktanya, tidak hanya ada satu, tetapi dua API untuk bekerja dengan animasi: Animated API dan LayoutAnimation. Keduanya sangat kuat tetapi dapat merepotkan, terutama jika semua yang ingin Anda lakukan adalah menerapkan animasi dasar seperti memindahkan objek ke atas dan ke bawah atau membuatnya terpental. Dalam hal ini, komponen seperti Animatable sangat berguna.

Komponen Umum Digunakan dan Perpustakaan

Berikut adalah daftar komponen dan perpustakaan yang sering digunakan dalam proyek-proyek bereaksi asli. Ini kompatibel dengan perangkat Android dan iOS:

  • styled-components: memungkinkan Anda untuk menulis kode CSS gaya Anda bereaksi komponen.
  • react-native-calendar: untuk menunjukkan kalender yang dapat berinteraksi dengan pengguna.
  • ret-naactive-datepicker: untuk memilih tanggal dan waktu.
  • react-native-progress: untuk menciptakan progress bar dan spinners.
  • bereaksi-asli-spinkit: koleksi loading indikator.
  • Vector Icons: memungkinkan Anda untuk menggunakan ikon dari sumber font ikon favorit Anda seperti Font Awesome dan bahan ikon.
  • react-native-swiper: mengubah koleksi gambar atau kontainer menjadi komponen swiping.
  • react-native-scrollable-tab-view: navigasi tab yang dapat Anda geser di antara.
  • react-native-lightbox: untuk melihat gambar dalam pop-overs layar penuh.
  • react-native-maps: memungkinkan Anda mengintegrasikan Google Maps ke dalam aplikasi Anda. Tidak semua fitur tersedia di Google Maps API tersedia, tetapi fungsionalitas yang diberikannya seharusnya cukup untuk sebagian besar kasus.
  • SGListView: implementasi yang mudah diingat dari komponen ListView bawaan dari React Native. Jika Anda perlu menampilkan daftar besar di aplikasi Anda, gunakan ini bukan ListView.
  • Formik: membuat berurusan dengan bentuk di bereaksi asli kurang menyakitkan. Hal ini memungkinkan Anda untuk mendapatkan nilai-nilai dan keluar dari bentuk negara, memvalidasi formulir, dan menangani pengiriman mereka.
  • react-native-i18n: untuk mengimplementasikan internasionalisasi dalam aplikasi Anda.
  • react-native-push-notification: mengimplementasikan pemberitahuan push lokal dan remote.
  • InstantSearch: koleksi komponen untuk mengimplementasikan pencarian.
  • react-native-fs: memungkinkan Anda mengakses sistem file asli perangkat.
  • react-native-camera: komponen kamera yang memungkinkan Anda mengambil foto dan video dari aplikasi Anda.
  • react-native-video: untuk memutar video dari sistem file Anda atau dari sebuah URL.
  • react-native-sqlite-storage: untuk menyimpan dan memanipulasi data dari database SQLite.
  • react-native-store: penyimpanan nilai kunci berdasarkan AsyncStorage.
  • react-native-webrtc: untuk menerapkan WebRTC.

Layanan web

Anda dapat membuat aplikasi tanpa server dan memudahkan penyebaran aplikasi React Native Anda dengan menggunakan layanan web. Ada banyak sekali layanan web di luar sana, tetapi saya akan fokus pada bidang-bidang berikut:

  • database
  • Analytics
  • pemberitahuan push
  • pembaruan kode
  • integrasi berkesinambungan

Database

Realm adalah database real-time dengan fokus pada aplikasi seluler. Ini termasuk fitur seperti sinkronisasi data dua arah, kemampuan offline pertama, dan dorongan data. Realm Mobile Database adalah open-source dan cross-platform, yang berarti Anda dapat meng-host Realm Object Server di server Anda sendiri dan kemudian menggunakan perpustakaan Realm JavaScript secara gratis.

Tidak semua fitur tersedia di edisi pengembang, tetapi dalam kebanyakan kasus penggunaan Anda seharusnya tidak masalah dengan hanya edisi pengembang karena menyertakan fitur inti seperti Database Objek, Sinkronisasi Waktu Nyata, dan Otentikasi. Berikut perbandingan apa yang Anda dapatkan untuk setiap edisi: Produk Realm dan Harga.

Jika Realm terlalu banyak untuk kebutuhan Anda, Anda selalu dapat tetap dengan API AsyncStorage yang datang dengan React Native.

Analytics

Fabric adalah layanan all-in-one yang memungkinkan Anda, antara lain, untuk menambahkan analytics di aplikasi Anda. Ada Jawaban, yang memberi Anda statistik waktu nyata tentang bagaimana aplikasi Anda digunakan. Ini termasuk jumlah pengguna aktif, lama sesi, dan tingkat retensi. Ada juga Crashlytics, yang memberi Anda kemampuan pelaporan kerusakan yang hebat. Semua itu terjadi secara waktu nyata, dan Anda dapat melihatnya di dasbor waktu nyata Fabric. Anda dapat menggunakan pustaka Fabric untuk dengan mudah mengatur Fabric untuk aplikasi React Native Anda.

Jika Anda lebih suka menggunakan solusi yang sudah dicoba dan diuji seperti Google Analytics, ada juga pustaka yang memungkinkan Anda melakukan itu.

Push Notifications

Ada benar-benar tidak ada kompetisi ketika datang untuk melaksanakan pemberitahuan push dalam aplikasi. Firebase Cloud Messaging (sebelumnya dikenal sebagai Google Cloud Messaging) memungkinkan Anda mengirim pemberitahuan push ke aplikasi Android dan iOS. Anda dapat menggunakan react-native-fcm package untuk berkomunikasi dengan FCM dari aplikasi Anda.

Pembaruan kode

CodePush memungkinkan Anda menyebarkan pembaruan kode ke aplikasi seluler langsung ke perangkat pengguna. CodePush bertindak sebagai repositori pusat di mana Anda dapat menerapkan perubahan ke HTML, CSS, JavaScript, dan aset seperti gambar. Kode CodePush yang sesuai di app kemudian akan menarik perubahan ini. Ini sangat bagus untuk mendorong perbaikan bug untuk aplikasi tanpa perlu meng-upload di app store dan menunggu pengguna untuk memperbarui aplikasi. Anda dapat menggunakan paket ini untuk menarik pembaruan dari CodePush dalam aplikasi Anda bereaksi asli.

Integrasi berkesinambungan

Bitrise adalah layanan pengiriman terus-menerus untuk pengembangan aplikasi mobile. Hal ini memungkinkan Anda untuk menjalankan tes Anda, membangun aplikasi dan secara otomatis mendorongnya ke perangkat pengguna setiap kali Anda menggunakan kode Anda.

Bitrise terintegrasi dengan sekelompok layanan di setiap langkah alur kerja pengembangan Anda. Sebagai contoh, ketika Anda mendorong Anda rilis cabang GitHub, Bitrise diberitahu bahwa mendorong melalui webhooks. Ini akan mulai menjalankan tes. Setelah lulus tes, proses membangun dimulai. Jika itu hanyalah 'rilis lembut' (misalnya perubahan kode JavaScript) maka perubahan dapat digunakan untuk pengguna melalui CodePush. Tetapi jika ada perubahan pada kode asli (mis. Anda menambahkan plugin Kamera), maka Bitrise juga dapat membuat file APK atau IPA dan menerapkannya ke Google Play atau iTunes Connect.

FastLane adalah kumpulan alat yang mengotomatisasi proses membangun dan rilis untuk aplikasi Android dan iOS. Untuk iOS, menangani tugas-tugas seperti menjalankan tes Anda, menghasilkan screenshot, kode menandatangani, dan melepaskan apl ke app store. Ini juga termasuk pengujian beta alat seperti Pilot dan asrama. Pilot memungkinkan Anda untuk meng-upload aplikasi Anda ke iTunes Connect dan mengelola penguji beta TestFlight Anda dari baris perintah. Asrama menciptakan halaman pendaftaran untuk penguji beta TestFlight. 

Alat-alat lebih diarahkan iOS penyebaran, tetapi Anda juga dapat memanfaatkan jika Anda sedang menggunakan aplikasi Android. Saat ini, ada hanya dua alat yang tersedia untuk Android penyebaran: pasokan dan Screengrab. 

Supply memungkinkan Anda untuk mengotomatisasi proses upload aset seperti ikon apl, promo grafis, dan screenshot dari app. Hal ini juga memungkinkan Anda untuk memperbarui aplikasi Anda yang ada pada Google Play Store. 

Screengrab, di sisi lain, secara otomatis generasi screenshot untuk beberapa perangkat. Screenshot setiap dapat juga dilokalisasi jika aplikasi Anda mendukung beberapa bahasa.

Kesimpulan

That's it! Dalam artikel ini, Anda telah belajar tentang beberapa alat, libraries, dan layanan yang dapat Anda gunakan ketika mengembangkan aplikasi bereaksi asli. Bagaimana denganmu? Apa yang Anda pergi-untuk alat ketika datang untuk mengembangkan aplikasi di bereaksi asli? 

Dan sementara Anda berada di sini, memeriksa beberapa posting kami pada pengembangan aplikasi bereaksi asli!

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.