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

Membuat aplikasi kamus yang menggunakan React Native untuk Android

by
Read Time:8 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Dika Budiaji (you can also view the original English article)

Pengenalan

Facebook React Native adalah framework yang kuat yang memungkinkan Anda untuk dengan cepat dan mudah membangun aplikasi Android dan iOS menggunakan hanya JavaScript dan JSX. Aplikasi yang dibangun menggunakan React Native menggunakan komponen antarmuka native dan dengan demikian tidak bisa dibedakan dari aplikasi yang dibangun secara langsung dengan menggunakan SDK Android dan iOS.

Kinerja mereka terlalu ini tidak terlalu jauh di belakang aplikasi native, karena hampir semua kode JavaScript yang berjalan di latar belakang pada contoh tertanam JavaScriptCore, Engine JavaScript yang sama dengan digunakan di Apple Safari.

Dalam tutorial ini, aku akan membantu Anda memulai dengan React Native untuk Android dan menunjukkan kepada Anda bagaimana membangun aplikasi kamus sederhana Inggris-Jerman.

Prasyarat

Sebelum memulai, pastikan Anda memiliki yang berikut diinstal pada komputer Anda:

Pada September tahun 2015, React Native hanya didukung di OS X. Namun, dengan bantuan sedikit skrip, Reac Native v0.11.4 bekerja dengan baik pada Ubuntu 14,04.

1. menginstal React Native

React Native tersedia sebagai paket Node.js dan dapat dengan cepat diinstal menggunakan npm, Node Package Manager.

Untuk menggunakan React Native untuk mengembangkan aplikasi Android, Anda harus mengatur nilai dari variabel lingkungan yang disebut ANDROID_HOME untuk path absolut pada direktori yang berisi Android SDK. Jika Anda menggunakan Bash shell, Anda dapat menetapkan variabel menggunakan export.

2. menciptakan sebuah proyek baru

Untuk membuat sebuah proyek React Native, Anda harus menggunakan React Native di antarmuka baris perintah atau CLI, yang dapat diakses dengan menggunakan perintah react-native. Kami menciptakan sebuah aplikasi Kamus dalam tutorial ini jadi mari kita sebut proyek Dictionary.

Setelah perintah selesai, Anda akan memiliki direktori baru yang disebut Dictionary, yang mengandung app React Native starter. Masukkan direktori baru yang menggunakan cd.

Sebelum Anda melanjutkan, saya sarankan Anda menjalankan app starter untuk memastikan bahwa lingkungan pengembangan Anda memiliki semua kebutuhan React Native. Untuk melakukannya, ketik perintah berikut:

Kini Anda akan menemukan sebuah aplikasi bernama Dictionary terinstal di emulator Anda. Klik pada ikon untuk memulai itu. Jika semuanya berjalan dengan baik, Anda harus melihat layar yang terlihat seperti ini:

Starter AppStarter AppStarter App

3. mempersiapkan Entry Point dari aplikasi Anda

Secara default, entry point aplikasi React Native Android adalah sebuah file JavaScript yang disebut index.android.js. Ketika Anda membuat proyek yang menggunakan CLI React Native, berkas ini dibuat secara otomatis. Namun, itu berisi kode yang dimiliki starter app. Anda dapat mengubah dan menggunakan bagian-bagian dari kode aplikasi Anda atau Anda dapat menghapus semua itu dan mulai dari awal. Untuk tutorial ini, saya sarankan Anda melakukan yang terakhir.

Setelah Anda telah menghapus isi index.android.js, menggunakan require memuat modul yang disebut react-native. Modul ini berisi semua fungsi React Native dan objek-objek yang Anda perlukan untuk membuat aplikasi Anda.

4. membuat komponen React

Komponen React adalah objek JavaScript yang bertanggung jawab untuk render dan secara otomatis memperbarui user interface aplikasi React Native. Pada kenyataannya, hampir setiap elemen antarmuka pengguna aplikasi React Native adalah komponen React. Ini berarti bahwa, untuk menciptakan user interface aplikasi Anda, Anda perlu membuat komponen React kustom Anda sendiri. Untuk melakukannya, gunakan fungsi createClass dari React. Kode berikut menciptakan komponen yang disebut Dictionary:

Anda dapat menganggap ini sebagai layar pertama dari aplikasi Anda.

Langkah 1: Menentukan tata letak

React Native  secara otomatis memanggil fungsi render setiap kali perlu untuk menarik atau memperbarui komponen. Oleh karena itu, Anda harus menambahkan fungsi ini ke komponen Anda. Dalam fungsi, Anda dapat menentukan tata letak komponen menggunakan JSX, ekstensi sintaks JavaScript yang memungkinkan Anda untuk dengan mudah mencampur Tag XML dengan kode JavaScript.

React Native menawarkan beberapa komponen yang dapat Anda gunakan untuk menulis tata letak. Untuk sekarang, kita akan menggunakan React.View sebagai wadah, React.Text untuk menampilkan teks, dan React.TextInput untuk menerima input pengguna. Tambahkan kode berikut untuk komponen:

Jika Anda sudah familiar dengan HTML, Anda dapat berpikir View sebagai HTML div, Text itu sebagai span HTML, dan TextInput sebagai elemen input HTML.

Langkah 2: Menambahkan Style

Dalam potongan kode di atas, beberapa komponen memiliki atribut style. Atribut style ini cukup mirip dengan atribut class HTML. Namun, bukan merujuk pada kelas CSS dalam stylesheet, itu merujuk kepada sebuah objek JSON di sebuah instance dari React.StyleSheet.

Untuk membuat sebuah objek React.StyleSheet untuk aplikasi Anda, Anda perlu menggunakan fungsi React.StyleSheet.create. Sebagai argumen hanya, mengharapkan sebuah objek JSON yang mengandung style masing-masing komponen. Berikut adalah style saya yang digunakan untuk aplikasi contoh kami:

Langkah 3: Mendaftarkan komponen

Untuk membiarkan React Native tahu bahwa itu harus membuat komponen Anda ketika aplikasi Anda mulai, Anda harus mendaftar menggunakan fungsi React.AppRegistry.registerComponent. Untuk melakukannya, tambahkan kode berikut pada akhir index.android.js:

Jika Anda tidak akrab dengan ES6 arrow fungsi, Anda dapat menggunakan kode JavaScript konvensional berikut:

Jika Anda ingin, Anda sekarang dapat reload aplikasi Anda untuk melihat layout baru. Untuk melakukannya, tekan tombol menu emulator Anda dan klik pada Reload JS.

The layoutThe layoutThe layout

4. mengontrol state komponen

Semua komponen memiliki sebuah variabel khusus yang disebut state, yang merupakan sebuah objek JSON. Ini khusus, karena segera setelah perubahan state komponen, React Native secara otomatis kembali menuliskan komponen untuk mencerminkan perubahan. Ini adalah fitur yang sangat berguna dan oleh menggunakannya dengan benar Anda dapat melakukan jauh dengan mengambil atau memperbarui isi dari elemen antarmuka pengguna aplikasi Anda secara manual.

Mari kita menambahkan dua kunci, input dan output, komponen Dictionary state. Untuk melakukannya, Anda harus menggunakan fungsi disebut getInitialState. Nilai kembali fungsi ini menjadi state komponen.

Anda sekarang dapat menghubungkan TextInput dengan Input dan komponen Text terakhir dengan output. Setelah melakukannya, tata letak Anda akan terlihat seperti ini:

Seperti yang sudah bisa Anda duga, input akan berisi kata Inggris pengguna memasukkan sementara output akan berisi terjemahan Jerman.

Meskipun perubahan dalam keadaan secara otomatis terdorong untuk antarmuka pengguna, sebaliknya itu tidak benar. Ini berarti, komponen state tidak berubah jika pengguna memasukkan sesuatu ke dalam TextInput. Untuk memperbarui state secara manual, Anda harus menggunakan komponen yang disebut setState metode.

Untuk mengirim nilai TextInput ke input, Anda dapat menambahkan listener onChangeText untuk TextInput dan membuat panggilan ke setState di dalamnya. Menggunakan ES6, TextInput tag akan terlihat seperti ini:

Pada titik ini, apa pun jenis pengguna ke aplikasi Anda TextInput akan langsung tersedia di input. Semua yang tersisa untuk kita lakukan adalah map input ke german dan update output. Untuk melakukan itu, Anda dapat menggunakan Kamus disebut Mr Honey's Beginner's Dictionary (Jerman-Inggris) oleh Winfried Honig. Download JSON kamus dari GitHub dan menambahkannya ke proyek Anda.

Untuk memuat kamus di dalam index.android.js, menggunakan require.

Sebagai english_german adalah tidak lebih dari sebuah objek JSON global mana kata kunci dan setara Jerman adalah nilai-nilai, Semua harus Anda lakukan sekarang adalah memeriksa jika masukan tersedia sebagai kunci, dan, jika ya, hubungi setState untuk menetapkan nilai terkait untuk output. Kode untuk melakukannya bisa terlihat seperti ini:

Anda sekarang dapat menetapkan showMeaning untuk onSubmitEditing listener dari TextInput sehingga disebut hanya bila pengguna telah selesai mengetik.

Aplikasi kamus Anda sudah siap. Anda dapat menekan tombol reload dan ketik kata Inggris untuk segera melihat terjemahannya Jerman.

English-German DictionaryEnglish-German DictionaryEnglish-German Dictionary

Kesimpulan

Dalam tutorial ini, Anda belajar cara menginstal React Native dan menggunakannya untuk membuat aplikasi Android pertama Anda, Inggris-Jerman kamus, menggunakan hanya JavaScript dan BEJ. Meskipun demikian, Anda belajar bagaimana untuk membuat komponen kustom, style, dan menggunakan state untuk mengontrol apa yang ditampilkan.

Untuk mempelajari lebih lanjut tentang React Native, Anda dapat pergi melihat dokumentasi yang disediakan.

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.