Kurikulum React Native Mobile Apps Development

  1. Home
  2. Docs
  3. Kurikulum React Native Mobile Apps Development
  4. Pendahuluan
  5. Persiapan Perangkat

Persiapan Perangkat

Selamat datang peserta Bootcamp Sanbercode kelas Mobile Apps Development React Native. Sebelum membahas proses membuat aplikasi menggunakan framework React Native, terlebih dahulu kita akan membahas berbagai perangkat yang perlu dipersiapkan.

Perangkat yang Diperlukan

Untuk mengikuti bootcamp React Native ini, diperlukan perangkat utama yaitu PC/Laptop yang terhubung dengan internet. Spesifikasi PC/Laptop minimal memiliki RAM 4GB.

Dan untuk mempermudah proses pengembangan aplikasi, diperlukan perangkat smartphone Android dengan versi OS minimal 5.0 Lollipop. Jika tidak, maka dapat menggunakan emulator Android seperti AVD (Android Virtual Device) yang terdapat pada Android Studio (pastikan spesifikasi PC/Laptop memenuhi system requirement pada Android Studio).

Jika dalam proses pengembangan aplikasi menggunakan Expo, maka silahkan install aplikasi Expo dari pengembang Expo Project di Google Play Store. Dan pastikan sudah mengaktifkan “Developer Mode” / “Mode Pengembang” dan juga mengaktifkan “USB Debugging”. (https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en).

Perangkat Lunak dan Teknologi yang Digunakan

1. Terminal atau Console

Pada Bootcamp kali ini, diperlukan sebuah terminal untuk mengeksekusi berbagai perintah dasar yang berkaitan dengan Git, Node, dan Expo/React Native CLI. Kita bisa menggunakan terminal bawaan dari Sistem Operasi yang digunakan seperti Command Prompt/Windows PowerShell pada OS Windows dan Terminal pada OS Linux maupun OSX. Dan ketika melakukan proses instalasi Git juga terdapat Git Bash yang memiliki fungsi yang serupa. Selain itu, peserta juga bisa menggunakan cmder (terutama yang menggunakan OS Windows) karena cmder memiliki banyak fitur yang tidak dimiliki command prompt atau terminal bawaan. Proses instalasi bisa dilakukan menggunakan konfigurasi default/recommended

2. Git

Git merupakan version control yang banyak digunakan oleh para programmer atau software developer. Untuk dapat menggunakannya, download dan install Git sesuai dengan platform OS yang bersangkutan. Dan jalankan perintah instalasi dengan konfigurasi default/recommended.

3. Visual Studio Code

Visual Studio Code adalah salah satu IDE (Integrated Development Environment) yang direkomendasikan untuk digunakan selama bootcamp ini. Salah satu kelebihannya adalah kemudahan pengoperasian dan user inteface yang lebih mudah dipahami oleh orang yang awam dalam pemrograman. Selain itu juga terdapat banyak extension atau plugin yang sangat membantu dalam menuliskan kode selama membangun suatu program/aplikasi. Beberapa extension yang disarankan untuk ditambahkan adalah Prettier – Code formatter, Material Icon Theme, dan ES7 React/Redux/React-Native/JS snippets (opsional).

IDE lainnya yang juga dapat digunakan adalah Sublime Text atau Atom. Untuk kemudahan proses pembelajaran kami tidak merekomendasikan Notepad atau Notepad++

4. Node js

Node js (https://nodejs.org/en/download/) adalah JavaScript run-time, yang menjadikan program JavaScript bisa berjalan, baik di web browser, node maupun di environment yang kompatibel lainnya. Selain menjadi eksekutor, pada pengembangan aplikasi menggunakan React Native ini, juga terdapat npm (node package manager) yang akan banyak digunakan dalam mengelola dependencies atau fitur-fitur tambahan yang ingin ditambahkan pada aplikasi React Native, seperti misalnya React Navigation, Redux, dan berbagai macam package/library lainnya.

Silahkan download dan install node js di local/komputer Anda sesuai dengan OS ter-install. Disarankan untuk mendownload node js versi LTS.

5. Expo CLI

Expo (https://expo.io/) adalah framework dan platform untuk aplikasi React (termasuk React Native). Pada bootcamp ini, kita akan menggunakan Expo sebagai tools dalam mengembangkan aplikasi mobile, karena proses instalasi, penggunaan dan build aplikasi akan terasa lebih mudah dan simpel. Terlebih di dalamnya sudah terdapat berbagai API atau fitur-fitur untuk mengakses fitur-fitur pada smartphone, seperti kontak, kamera, gps, dan lainnya tanpa harus menambahkannya secara manual.

Silahkan install expo-cli di PC/Laptop Anda melalui terminal/command prompt/cmder dengan mengeksekusi command berikut (pastikan node js sudah ter-install):

$  npm install -g expo-cli

untuk membuat projek/aplikasi baru (misal nama projeknya adalah “SanberBlog”), bisa menjalankan command berikut:

$ expo init SanberBlog

$ cd SanberBlog   //untuk masuk ke folder projek yang dibuat
$ expo start      //atau bisa juga menggunakan npm start

Sebelum menjalankan aplikasi, pastikan smartphone Anda sudah terhubung dan di dalamnya sudah ter-install aplikasi expo client.

6. React Native CLI (opsional)

Bagian ini bersifat opsional, karena pada bootcamp kali ini akan lebih fokus dalam menggunakan Expo.

Selain menggunakan Expo (Expo menyebutnya sebagai managed workflow), tentunya, kita bisa juga menggunakan framework React Native secara langsung (Expo menyebutnya sebagai bare workflow). Tentunya ada kelebihan dan kekurangan dalam menggunakan masing-masing framework tersebut yang bisa dilihat di dokumentasi Expo (https://docs.expo.io/introduction/managed-vs-bare/#workflow-comparison).

Untuk bisa menggunakan framework React Native ini, diperlukan beberapa tahapan proses instalasi, yang bisa disederhanakan sebagai berikut (jika menggunakan OS Windows):

  • Install node js
  • Install python2
  • Install JDK8 (Java SE Developent Kit)
  • Install Android Studio
  • Setting ANDROID_HOME environment variable
  • Menambahkan platform-tools path pada environment variable

Jika semua proses tersebut telah berhasil dilakukan, maka selanjutnya Anda bisa membuat projek/aplikasi React Native dengan menjalankan command berikut:

$ npx react-native init SanberBlog

$ cd SanberBlog                 //masuk ke folder projek
$ npx react-native start        //menjalankan metro bundler
$ npx react-native run-android  //menjalankan aplikasi projek di Android

Proses instalasi lengkapnya bisa dilihat pada dokumentasi React Native ( https://reactnative.dev/docs/environment-setup), terutama untuk OS Linux dan MacOS karena memiliki beberapa konfigurasi yang berbeda dari Windows.

Catatan:

Untuk menjalankan aplikasi di IOS hanya bisa melalui macOS