Membuat Aplikasi Mobile React Native dengan Visual Studio Code: Instalasi & Setup

React Native?

React Native, secara singkat dan sederhana dapat dijelaskan sebagai framework berbasis React JS untuk membangun aplikasi mobile multi platform. Sedangkan React JS adalah framework JavaScript. Dan maksud dari aplikasi mobile multi platform dapat diartikan bahwa dengan menulis sebuah KODE APLIKASI MOBILE maka akan dihasilkan DUA BUAH APLIKASI untuk platform Android dan iOS.

Pada posting ini menjelaskan langkah awal untuk belajar membuat aplikasi mobile dengan React Native yaitu INSTALASI & SETUP. Berikut adalah beberapa software yang perlu diinstal:

Installasi Visual Studio Code for Java

Visual Studio Code adalah code editor yang digunakan untuk menulis berbagai macam kode bahasa pemrograman. Untuk mengenal lebih banyak tentang tool ini dapat mengunjungi link berikut ini https://code.visualstudio.com/.

Visual Studio Code for Java adalah paket installasi Visual Studio Code yang khusus digunakan untuk menulis kode program dalam bahasa Java. Paket ini berisi Java Development Kit (JDK) dan beberapa extension Java yang digunakan pada Visual Studio Code.

JDK adalah paket software yang diperlukan untuk membangun aplikasi dalam bahasa Java. Pada paket ini terdiri atas compiler yang digunakan untuk mengkompilasi source code Java menjadi class yang dapat dijalankan pada Java Virtual Machine (JVM). Paket ini juga berisi JVM yang menjadi penterjemah class Java agar bisa dimengerti oleh sistem operasi atau platform dimana JVM berada. JVM terdapat pada beberapa sistem operasi yang ada yaitu Windows, Linux dan MacOS. Selain itu JVM terdapat pada perangkat mobile. Hal ini membuat aplikasi yang ditulis dalam bahasa Java menjadi dapat dijalankan pada banyak sistem operasi atau platform.

Visual Studio Code for Java memudahkan untuk proses installasi dan setup Visual Studio Code dan JDK secara otomatis. Namun paket installer Visual Studio Code for Java ini hanya dapat digunakan pada sistem operasi Windows dan Linux. Sedangkan untuk sistem operasi MacOS perlu dilakukan installasi manual Visual Studio Code dan JDK serta setup atau konfigurasi manual.

Berikut ini adalah langkah-langkah installasi dan setup pada sistem operasi Windows. Untuk pembaca yang menggunakan sistem operasi lain dapat menyesuaikan.

Langkah pertama adalah mengunduh installer Visual Studio Code for Java dari link berikut https://aka.ms/vscode-java-installer-win. Untuk melakukan installasi diperlukan koneksi internet karena installer akan mengunduh beberapa software seperti Visual Studio Code, Language Support for Java(TM) by Red Hat, extension pack for Java dan lain-lain. Setelah proses download dan installasi selesai pastikan JVM dan Compiler dapat dijalankan dengan cara berikut ini:

Jalankan Command Prompt dengan cara mengetikan command pada kolom pencarian didekat tombol Windows yang ada di sebelah kiri bawah seperti yang dapat dilihat pada Gambar 1. Kemudian pilih Command Prompt (App) seperti yang terlihat pada kotak merah.

image

Gambar 1

Cara yang lain adalah dengan menekan tombol CRTL+R secara bersamaan kemudian pada windows Run ketikkan cmd seperti yang terlihat pada Gambar 2.

image

Gambar 2

Kemudian akan ditampilkan aplikasi Command Prompt seperti pada Gambar 3. Pada prompt ketikkan kedua perintah berikut ini yaitu:

  • java
  • javac

Jika keduanya mengeluarkan hasil seperti pada Gambar 3 dan Gambar 4 pada maka artinya JDK telah berhasil diinstallasi dan dikonfigurasi.

image

Gambar 3

image

Gambar 4

File-file JDK hasil installasi dari installer Visual Studio Code for Java disimpan pada folder C:\Users\[NAMA USER]\AppData\Local\Programs\AdoptOpenJDK. Jika kedua keluaran pada Gambar 3 dan Gambar 4 tidak didapatkan maka perlu dilakukan setup Environment Variables dengan cara menuliskan “Edit environment variables for your account” jika ditemukan maka dapat terlihat seperti pada kotak merah di Gambar 5.

image

Gambar 5

Kemudian akan ditampilkan window seperti pada Gambar 6. Pastikan variable JAVA_HOME telah dibuat seperti yang terlihat pada gambar. Jika belum ada maka buat variable dengan cara mengklik tombol New kemudian akan ditampilkan window Edit User Variable seperti pada gambar di sebelah kanan. Masukkan nilai JAVA_HOME pada kolom Variable name, dan pada kolom Variable value masukkan nama folder tempat JDK diinstall.

image

Gambar 6

Setelah variable JAVA_HOME ditambahkan lakukan pengujian kembali dengan mengetikkan perintah java dan javac pada command prompt. Bagi yang menggunakan installer JDK dari sumber lain, misalnya dari Oracle maka sesuaikan isian Variable value dengan lokasi tempat penyimpanan file-file installasi JDK.

Installasi dan Setup Android Studio

Langkah selanjutnya adalah mengunduh Android Studio dari link https://developer.android.com/studio. Kemudian lakukan installasi. Setelah proses installasi selesai maka dilakukan setup Android SDK agar komputer dapat digunakan untuk membuat aplikasi Android. Kemudian install Android Virtual Device (AVD) agar komputer memiliki emulator perangkat mobile Android. Emulator dapat diartikan sebagai aplikasi yang menampilkan perangkat smartphone Android pada komputer.

Langkah pertama adalah melakukan setup Android SDK. Jika masih berada di window Welcome to Android Studio maka pilih tombol pada lingkaran merah pada Gambar 7 kemudian pilih SDK Manager.

image

Gambar 7

Jika sudah masuk ke tampilan editor di Android Studio maka SDK Manager dapat dipilih pada menu Tools > SDK Manager seperti yang terlihat pada Gambar 9. Maka akan ditampilkan window seperti pada Gambar 8, pilih Android SDK pada menu di sisi kiri kemudian pilih tab SDK Platforms dan centang versi Android yang ingin digunakan. Pada contoh ini dipilih Android 11.0 (R).

image

Gambar 8

Kemudian pilih tab SDK Platforms, hilangkan centang pada Hide Obsolute Packages kemudian pilih paket-paket berikut ini:

  • Android SDK Build Tools 31
  • Android SDK Command-line Tools (latest)
  • Android Emulator version 30.8.4
  • Android SDK Platform-Tools version 31.0.3
  • Android SDK Tools (Obsolute) version 26.1.1

Kemudian klik tombol OK untuk proses download dan installasi, namun harap diperhatikan saat proses ini dilakukan komputer harus terkoneksi dengan internet.

Perhatian

Sebagai informasi dengan melihat lokasi Android SDK di lingkaran merah pada Gambar 8. Ini artinya file-file Android SDK yang diunduh dan diinstall disimpan pada folder C:\Android. Lokasi ini mungkin berbeda pada komputer anda.

Setelah setup Android SDK dilakukan maka berikutnya melakukan setup AVD dengan langkah-langkah sebagai berikut ini. Jalankan Android Studio. Jika masih berada pada window Welcome to Android Studio seperti pada Gambar 7 maka pilih tombol titik tiga vertikal seperti pada lingkaran merah. Kemudian pilih AVD Manager.

Jika telah aktif sebuah project seperti pada Gambar 9 maka untuk menjalankan AVD Manager dapat dilakukan dengan memilih menu Tools > AVD Manager.

image

Gambar 9

Setelah AVD Manager dipilih maka dapat dilihat window AVD Manager seperti pada Gambar 10. Pada window di bawah ini dapat dilihat terdapat sebuah emulator perangkat Android yaitu Pixel_3a_API_30_x86.

image

Gambar 10

Jika ingin menambahkan emulator baru maka klik tombol Create Virtual Device. Kemudian ditampilkan window Virtual Device Configuration seperti pada Gambar 11. Kemudian pilih Phone, kemudian pilih tipe device yang ingin ditambahkan. Setelah itu klik tombol Next dan ikuti langkah-langkah selanjutnya. Pastikan komputer tersambung pada koneksi internet.

image

Gambar 11

Setelah emulator ditambahkan, maka untuk menjalakan emulator klik tombol “play” di lingkaran merah pada Gambar 10. Hasilnya dapat dilihat emulator seperti pada Gambar 12.

image

Gambar 12

Setelah setup Android SDK dan AVD telah dilakukan maka perlu dilakukan konfigurasi untuk menggunakan Android Debug Bridge (ADB). ADB adalah alat command line serbaguna untuk berkomunikasi dengan perangkat baik emulator atau smartphone Android yang terkoneksi ke komputer. Perintah adb memfasilitasi berbagai tindakan perangkat, seperti menginstal dan men-debug aplikasi, dan memberikan akses ke shell Unix yang dapat Anda gunakan untuk menjalankan berbagai perintah di perangkat. ADB ini dapat diakses dengan menjalankan adb.exe (untuk sistem operasi Windows) yang disimpan pada folder berikut:

[ANDROID_SDK_LOCATION]\platform-tools

Pada contoh yang digunakan pada hands on labs ini ANDROID_SKD_LOCATION adalah di C:\Android. Dengan informasi ini maka lokasi ini harus didaftarkan pada variable enviroment di Windows. Cengan cara membuat Window Environment Variables seperti pada Gambar 6. Kemudian pilih Path seperti pada kotak merah di gambar sebelah kiri pada Gambar 13 dan klik tombol Edit. Kemudian aka ditampilkan window baru seperti pada gambar di sebelah kanan. Klik tombol New kemudian tambahkan C:\Android\platform-tools\ kemudian klik tombol OK. Harap diperhatikan lokasi folder ini dapat berbeda dengan milik Anda, maka sesuaikan lokasi ini sesuai dengan lokasi installasi Android SDK yang Anda gunakan.

image

Gambar 13

Install Node.js

Node.js adalah enviroment untuk JavaScript agar JavaScript dapat dijalankan dimana saja tanpa harus menggunakan web browser. Artinya JavaScript dapat dijalan pada lingkungan seperti console, server side, IoT dan lain-lain.

image

Gambar 14

Untuk menginstall maka langkah pertama yang dilakukan adalah mengunduh Node.js di link berikut ini https://nodejs.org/en/download/ (Gambar 13), untuk sistem operasi Windows pilih LTS kemudian pilih Windows Installer (.msi) dan pilih 64 bit jika komputer menggunakan sistem operasi 64 bit. Setelah proses installasi selesai maka perlu dilakukan pengujian apakah installasi dan konfigurasi telah berhasil dilakukan. Caranya bisa memilih Node.js pada menu di Windows. Atau dengan cara membuat command prompt kemudian ketikkan node, hasilnya dapat dilihat akan ditampilkan command prompt dari Node.js seperti pada Gambar 14.

image

Gambar 15

Selain itu juga jalankan perintah npm pada command prompt Windows. npm adalah Node Package Manager yang digunakan untuk mengelola package untuk JavaScript. npm memudahkan dalam melakukan installasi package JavaScript. Pada Gambar 15 dapat dilihat bukti bahwa npm telah dapat digunakan.

image

Gambar 16

Setup Project React Native CLI

React Native memiliki semboyan “Learn once, write anywhere”. React Native adalah library JavaScript yang dapat digunakan untuk membangun aplikasi mobile dengan target platform Android dan iOS.

Untuk melakukan pemrograman dengan React Native perlu dipersiapkan development enviroment. Untuk setup enviroment React Native dapat mengikuti petunjuk pada link berikut ini https://reactnative.dev/docs/environment-setup. Pada link ini tersedia petunjuk setup pada beberapa sistem operasi seperti Windows, Linux dan MacOS.

Untuk melakukan setup React Native CLI pilih “React Native CLI Quickstart” kemudian pilih Windows jika menggunakan sistem operasi Windows, kemudian pilih Android seperti pada Gambar 16. Langkah yang diberikan pada halaman web ini memberikan petunjuk installasi Node.js, JDK dan Android Studio.

image

Gambar 17

Namun karena hands on lab ini telah melakukan installasi dan setup JDK lewat Visual Studio Code for Java, Android Studio dan Node.js secara manual maka selanjutnya adalah menginstall React Native pada komputer dengan perintah berikut ini.

npm install -g react-native-cli

Node.js selain memiliki NPM juga memiliki NPX. NPX adalah singkatan dari Node Package Runner yang berfungsi untuk mengeksekusi package Node.js. NPX dapat mengeksekusi file binary dari package Node.js baik yang sudah terinstall maupun yang belum.

Project React Native

Untuk membuat project react-native maka dapat diikuti langkah-langkah berikut ini. Misal project-project akan disimpan pada folder D:\BelajarReactNative. Maka langkah pertama yang dilakukan adalah membuat command prompt Windows kemudian ketikkan perintah berikut.

d:
cd BelajarReactNative

Atau dapat juga dilihat pada Gambar 18.

image

Gambar 18

Setelah itu ketikkan sintaks berikut untuk membuat project React Native.

npx react-native init [NAMA PROJECT]

Untuk membuat project dengan nama FirstProject maka dituliskan perintah berikut ini.

npx react-native init FirstProject

Sebagian keluaran dari perintah di atas dapat dilihat pada Gambar 19.

image

Gambar 19

Kemudian tambahkan file local.properties ke dalam folder D:\BelajarReactNative\FirstProject\android. Dan tambahkan isi sebagai berikut.

sdk.dir = C:\\Android

Nilai property sdk.dir ini sesuai dengan lokasi tempat menyimpan Android SDK di komputer Anda.

Untuk menjalankan project FirstProject ada beberapa langkah yang harus dilakukan. Yang pertama adalah hidupkan emulator Android terlebih dahulu dari Android Studio. Kemudian buka command prompt Windows dan masuk ke folder D:\BelajarReactNative\FirstProject. Kemudian ketik perintah berikut.

npx react-native run-android
atau 
react-native run-android

Maka secara otomatis akan dijalankan Metro Bundler dengan tampilan seperti pada Gambar 20.

image

Gambar 20

Setelah proses selesai maka dapat dilihat tampilan aplikasi Android dari FirstProject di emulator seperti pada Gambar 21.

image

Gambar 21

Install Extension React Native di Visual Studio Code

Berikut adalah beberapa extension di Visual Studio Code yang dapat digunakan untuk membantu penulisan kode program React Native.

Untuk menambahkan extension pada React Native pilih tombol pada kotak merah di Gambar 22.

image

Gambar 22

React Native Tools
Extension pertama yang diinstall adalah React Native Tools. Extension ini berfungsi untuk melakukan proses debug dan memiliki fitur integrasi perintah React Native. Untuk menginstall extension ini pada kolom pencarian ketikan React Native Tools. Setelah ditemukan pilih tombol Install. Setelah proses installasi selesai maka hasilnya dapat dilihat pada Gambar 22.

Prettier – Code Formater
Extension ini berfungsi untuk memformat kode agar mengikuti gaya penulisan yang standar mengikuti aturan yang sudah ada. Bahasa pemrograman yang didukung oleh extension ini adalah JavaScript, TypeScript, JSX, JSON, CSS, HTML, dan lain-lain.
Untuk menginstall extension ini pada kolom pencarian ketikan Prettier. Setelah ditemukan pilih tombol Install. Setelah proses installasi selesai maka hasilnya dapat dilihat seperti pada Gambar 23.

image

Gambar 23

Membuka Project dengan Visual Studio Code
Jalankan Visual Studio Code. Kemudian pilih File > Open Folder pada menu. Selanjutnya pilih folder FirstProject pada folder C:\BelajarReactNative. Hasilnya dapat dilihat pada Gambar 24.

image

Gambar 24

Buka file App.js kemudian cari kode berikut.

<section title="Step One">
Edit <text style="{styles.highlight}">App.js</text> to change this
screen and then come back to see your edits.
</section>

Kemudian ganti menjadi.

<section title="Langkah Pertama">
Edit <text style="{styles.highlight}">App.js</text> to change this
screen and then come back to see your edits.
</section>

Perubahannya dapat dilihat pada lingkaran merah gambar sebelah kiri di Gambar 25.

image

Gambar 25

Dari percobaan di atas dapat disimpan bahwa perubahan yang dilakukan pada kode akan secara otomatis mengupdate aplikasi pada emulator.

Jika diperhatikan pada Metro Bundler pada Gambar 20 maka terdapat dua perintah yang bisa dimasukkan yaitu:

  • r: untuk reload aplikasi. Perintah ini dapat digunakan jika ingin melakukan reload aplikasi setelah dilakukan perubahan pada kode programnya.
  • d: untuk menampilkan menu developer pada emulator. Jika diketikan d maka hasilnya dapat dilihat pada gambar sebelah kanan di Gambar 25. Menu ini dapat digunakan developer untuk reload aplikasi, debug atau mendapatkan informasi lainnya.

Sekian posting Hands on Labs (HOL) bagian pertama ini. Sampai ketemu lagi di HOL membangun aplikasi mobile React Native dengan Visual Studio Code.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.