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

Pengembangan Lebih mudah React Native dengan Expo

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Expo adalah kumpulan tool yang memudahkan kode React Native apps. Dalam tutorial ini, saya akan menunjukkan bagaimana Kamu dapat dengan cepat membuat aplikasi React Native menggunakan Expo.

Dengan Expo, para developer dapat membuat aplikasi React Native tanpa semua frustrasi yang datang dengan menginstal dan mengonfigurasi dependensi software seperti Android Studio, Xcode, atau semua alat lainnya yang diperlukan untuk mengembangkan dan menjalankan aplikasi React Native.

Dalam tutorial ini, saya akan menunjukkan cara membuat game memori sederhana dengan menggunakan Expo. Sepanjang jalan Kamu juga akan mempelajari hal berikut:

  • Cara menggunakan tool yang disediakan oleh Expo. Ini termasuk CLI, SDK, dan aplikasi klien Expo.
  • Cara membuat aplikasi React Native menggunakan Expo.

Apa itu Expo?

Expo adalah framework untuk mengembangkan aplikasi React Native yang cepat. Ini seperti Laravel atau Symphony untuk PHP developer, atau Ruby on Rails untuk Ruby developer. Expo menyediakan lapisan di atas React Native APIs agar lebih mudah digunakan dan dikelola. Ini juga menyediakan tool yang memudahkan bootstrap dan menguji aplikasi React Native. Terakhir, ini menyediakan komponen dan layanan UI yang biasanya hanya tersedia saat Kamu menginstal komponen React Native pihak ketiga. Semua itu tersedia melalui SDK Expo.

Batasan Expo

Sebelum melangkah lebih jauh, penting untuk menyadari beberapa batasan dari Expo:

  1. Aplikasi Expo tidak mendukung eksekusi background kode. Ini berarti Kamu tidak dapat, misalnya, menjalankan kode yang memperhatikan perubahan lokasi saat aplikasi ditutup.
  2. Aplikasi Expos terbatas pada native API yang didukung SDK Expo. Ini berarti bahwa jika aplikasi Kamu memiliki kasus penggunaan yang sangat spesifik seperti berkomunikasi dengan perangkat Bluetooth, satu-satunya opsi untuk menerapkan fungsi tersebut adalah dengan React Native biasa, atau dengan menulis kode native menggunakan library bernama ExpoKit.
  3. Expo mengunci Kamu ke toolset mereka. Ini berarti Kamu tidak bisa hanya menginstal dan menggunakan sebagian besar tool yang tersedia untuk pengembangan React Native seperti tool command-line, scaffolders, dan framework UI. Tapi yang bagus adalah SDK Expo kompatibel dengan aplikasi asli React Native, jadi kamu tidak akan mengalami masalah saat mengeluarkan aplikasi dari Expo.
  4. Aplikasi biner Standalone Expo hanya dapat dibangun secara online. Expo menyediakan tool command-line yang disebut Exp. Hal ini memungkinkan pengembang untuk memulai build process di server Expo. Setelah selesai, URL akan diberikan untuk mendownload file .apk atau .ipa.

Bahkan dengan keterbatasan ini, penting untuk diingat bahwa Expo adalah framework fungsional penuh dengan banyak dukungan untuk API Android atau IOS yang umum digunakan. Ini berarti bahwa Kamu telah menutupi sebagian besar fungsi yang biasanya dibutuhkan aplikasi. Jadi seringkali tidak perlu melihat ke luar Expo untuk mengimplementasikan fungsi asli.

App Overview

Aplikasi yang akan kita buat adalah permainan memori. Kamu mungkin terbiasa dengan jenis permainan ini—user harus menemukan pasangan yang cocok dengan membalik dua kartu dalam satu waktu. Inilah tampilan defaultnya:

Memory game default app screen

Dan begitulah sepertinya semua pasangan sudah dibuka:

Game completed

Begitu mereka menyelesaikan permainan, pengguna dapat menekan tombol reset untuk mengatur ulang item ke status awal mereka. Hal ini memungkinkan mereka untuk memulai permainan lagi.

Menginstal Expo

Berbeda dengan React Native biasa dimana Kamu harus menginstal dan mengkonfigurasi Android Studio atau Xcode dan dependensi lainnya, dengan Expo hanya ada beberapa langkah untuk diikuti agar bisa mulai mengembangkan aplikasi:

  1. Download dan Instal Node.js. Expo bergantung pada platform Node.js untuk tool command-line dan manajemen dependensi.
  2. Instal Klien Expo di perangkat iOS atau Android Kamu. Ini digunakan untuk melihat pratinjau aplikasi saat Kamu mengembangkannya.
  3. Instal tool command line. Ini memungkinkan Kamu menghasilkan proyek Expo baru, memulai build process, dan banyak lagi. Jalankan perintah berikut untuk menginstalnya:

Menghasilkan Aplikasi Expo Baru

Setelah Kamu menginstal semua dependensi, Kamu sekarang dapat membuat aplikasi Expo baru:

Setelah selesai, itu akan membuat folder baru yang disebut MemoryGame. Arahkan ke dalamnya dan mulai menjalankan server pengembangan:

Sebagai alternatif, Kamu juga bisa menggunakan XDE Expo. Ini memungkinkan Kamu membuat dan menjalankan aplikasi Expo melalui GUI. Kamu bisa mendownload installer dari repo Github Expo. Saat ini, hanya mendukung Windows dan Mac. Jadi jika Kamu memakai Ubuntu atau Linux lebih baik tetap dengan command line untuk saat ini.

Setelah server pengembangan berjalan, Kamu sekarang harus dapat melihat sesuatu seperti ini:

Running the dev server

Itu kode QR yang menunjuk ke live preview proyek. Buka aplikasi klien Expo di telepon Kamu dan pindai kode menggunakan pemindai QR. Pada titik ini, Kamu sekarang harus dapat melihat layar default. Setiap kali Kamu menekan Control-S pada salah satu file proyek, pratinjau secara otomatis harus dimuat ulang untuk mencerminkan perubahannya.

Kamu dapat menemukan source code lengkap proyek pada repo GitHub. Atau jika Kamu ingin mencoba aplikasinya, Kamu bisa melihat demo. Cukup pilih QR Code, dan pindai di ponsel Kamu menggunakan aplikasi klien Expo.

Koding Aplikasi

Sekarang kami siap untuk koding aplikasi. Mari kita mulai dengan beberapa komponen UI sebelum kita kembali dan menerapkan komponen utama.

Komponen Header

Header digunakan untuk menampilkan judul aplikasi. Buat folder komponen. Di dalamnya, buat file Header.js dan tambahkan yang berikut ini:

Ini hanyalah dasar komponen React Native, dengan beberapa styling yang sesuai dengan UI aplikasi kami.

Komponen Skor

Berikutnya adalah komponen untuk menampilkan skor (components/Score.js):

Sekali lagi, hanya komponen tampilan sederhana dengan tampilan teks dan beberapa styling dasar.

Komponen Kartu

Komponen kartu (components/Card.js) akan menampilkan kartu. Kartu ini menggunakan ikon dari ikon vektor Expo yang ditetapkan. Ini adalah salah satu fitur yang muncul tepat di luar kotak saat Kamu menggunakan Expo: ini mencakup ikon dari kumpulan ikon seperti FontAwesome, Entypo, dan Ionicons.

Dalam kode di bawah ini, Kamu dapat melihat bahwa kita hanya menggunakan FontAwesome. Ini memiliki ikon yang kita inginkan untuk menampilkan status default kartu: sebuah tanda tanya. Seperti yang akan Kamu lihat nanti di komponen aplikasi utama, kami juga akan menggunakan ikon dari Entypo dan Ionicons. Rujukan ke sumber ikon tersebut akan diteruskan ke komponen ini, jadi tidak perlu menentukannya di sini:

Di dalam metode render(), kami hanya menggunakan sumber dan ikon dilewatkan sebagai props jika kartu dibuka. Secara default, itu hanya akan menampilkan ikon tanda tanya dari FontAwesome. Tapi kalau kartu itu terbuka, maka akan menggunakan icon source, icon, dan color yang dilewatkan sebagai props.

Masing-masing kartu bisa disadap. Saat disadap, fungsi clickCard() akan dijalankan, yang juga dilewatkan melalui props. Kemudian Kamu akan melihat fungsinya, tapi untuk saat ini, ketahuilah bahwa ia memperbarui state untuk mengungkapkan ikon di kartu:

Jangan lupa menambahkan styles:

Pembantu

Kami juga akan menggunakan fungsi pembantu yang disebut shuffle(). Hal ini memungkinkan kita untuk mengurutkan susunan kartu secara acak sehingga pesanan mereka akan berbeda setiap kali permainan di-reset:

Komponen Utama

Komponen utama (App.js) berisi logika aplikasi utama dan menyatukan semuanya. Mulailah dengan memasukkan paket React and Expo yang akan kami gunakan. Kali ini kami menggunakan semua sumber ikon dari ikon vektor Expo:

Selanjutnya, sertakan komponen dan pembantu yang telah kita buat tadi:

Di dalam constructor, pertama kita buat array yang mewakili kartu unik. src adalah icon sumber, nama adalah nama ikonnya (Kamu dapat menemukan nama di GitHub jika Kamu ingin menggunakan ikon lainnya), dan color, tentu saja, warna ikonnya:

Perhatikan bahwa alih-alih langsung menentukan src sebagai FontAwesome, Entypo atau Ionicons untuk masing-masing objek, kami menggunakan nama properti yang digunakan dalam sources object. Ini karena kita perlu membuat salinan rangkaian kartu agar masing-masing kartu memiliki sepasang. Membuat salinan menggunakan metode array seperti slice() akan membuat salinan array, tapi masalahnya adalah bahwa sekali objek individual dimodifikasi baik dalam salinan maupun aslinya, kedua array juga dimodifikasi.

Ini membawa kita ke solusi di bawah ini yaitu untuk membuat objek yang sama sekali baru dengan mengubah array cards menjadi sebuah string dan kemudian mengurainya untuk mengubahnya kembali ke array. Inilah alasan mengapa kita menggunakan string karena fungsi tidak bisa diubah menjadi string. Kami kemudian menggabungkan keduanya untuk tampil dengan array, yang berisi semua kartu yang kami butuhkan:

Selanjutnya, melalui array itu dan buat ID unik untuk masing-masing, atur sumber ikonnya, lalu setel ke state tertutup secara default:

Urutkan kartu secara acak dan set state default:

Metode render() membuat header, kartu, skor, dan tombol untuk mengatur ulang permainan saat ini. Ini menggunakan fungsi renderRows() untuk membuat baris kartu individual. Layarnya akan memiliki enam baris berisi empat kartu masing-masing:

Inilah kode untuk fungsi renderRows(). Ini menggunakan fungsi getRowContents(), yang bertanggung jawab untuk membuat array array dengan empat item masing-masing. Hal ini memungkinkan kita untuk membuat setiap baris, dan kemudian menggunakan fungsi lain untuk merender kartu untuk setiap iterasi pada fungsi map():

Inilah fungsi getRowContents():

Selanjutnya adalah fungsi renderCards(). Ini menerima beragam objek kartu dan membuatnya melalui komponen Kartu. Yang perlu kita lakukan di sini adalah melewatkan properti individu dari masing-masing objek kartu sebagai props. Ini kemudian digunakan untuk membuat ikon yang benar, seperti yang Kamu lihat di kode untuk komponen Card. Fungsi clickCard() juga dilewatkan sebagai prop. ID kartu dilewatkan ke fungsi itu sehingga kartu unik dapat diidentifikasi dan diperbarui:

Di dalam fungsi clickCard(), kita mendapatkan rincian kartu yang dipilih dan memeriksa apakah harus diproses lebih jauh:

Sekarang mari kita isi kode untuk menangani kartu yang dipilih.

Pertama, kami membuka kartu dan menambahkannya ke daftar kartu yang dipilih saat ini:

Begitu ada dua item dalam rangkaian kartu yang dipilih saat ini, kami memeriksa apakah nama ikonnya sama. Jika mereka kemudian berarti bahwa pengguna telah memilih pasangan yang tepat. Jika mereka tidak sama maka itu adalah pasangan yang salah. Dalam hal ini, kita tutup kartu pertama yang terpilih lalu tambahkan sedikit delay sebelum menutup kartu kedua. (Dengan cara ini pengguna dapat melihat ikon kartu sebelum beralih ke state tertutup.)

Hal terakhir yang perlu dilakukan dalam event handler klik adalah untuk memperbarui state untuk mencerminkan perubahan di UI:

Fungsi yang terkait adalah pengendali event reset. Saat tombol reset disadap, kita cukup mengembalikan status default dengan menutup semua kartu dan mengocok.

Akhirnya, kami akan menambahkan beberapa style dasar agar aplikasi kami terlihat bagus.

Tes Aplikasi

Karena server development Expo Kamu telah berjalan sepanjang waktu, setiap perubahan harus didorong ke perangkat mobile Kamu dengan live reload. Cobalah aplikasi dan pastikan hasilnya sesuai yang seharusnya.

Kesimpulan

Itu dia! Dalam tutorial ini Kamu telah belajar bagaimana menggunakan XDE Expo untuk segera memasang aplikasi React Native. Expo adalah cara yang baik untuk mulai mengembangkan aplikasi React Native karena ini menghilangkan kebutuhan untuk menginstal banyak software yang seringkali menjadi penyebab frustrasi, terutama bagi para pemula. Ini juga menyediakan alat yang membuatnya sangat mudah untuk melihat pratinjau aplikasi saat sedang dikembangkan. Pastikan untuk memeriksa resources yang disebutkan di situs Expo jika Kamu ingin mempelajari lebih lanjut.

Dan sementara ini, lihat beberapa postingan kami yang lain tentang React Native app development!

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.