Membuat Aplikasi Android Sistem Informasi DesaKu - Part 3

Aplikasi Android Sistem Informasi Desaku ini merupakan tutorial Part 3, jadi jika anda belum mengikuti Part 2 diharapkan anda untuk mengikuti tutorial Part 2 terlebih dahulu untuk memudahkan anda dalam memahami tutorial Part 3 ini.

Pada  Part 2 kita telah melakukan instalasi React Native dan Penambah script pada file ~/.bashrc. Pada Part 3 ini kita akan melanjutkan proses Persiapan Development yaitu menginstal Visual Studio Code dan Extension Visual Studio Code untuk Javascript, ES6 dan React Native.

Visual Studio Code merupakan Text Editor Project Open Source yang dikembangkan oleh Microsoft dan dapat berjalan di atas berbagai platform sistem operasi seperti Windows, Linux dan MacOS. Untuk menginstal Visual Studio Code di Linux silakan ikuti langkah - langkah berikut ini.

Install Visual Studio Code di Linux Ubuntu

• Sebelum menginstall Visual Studio Code kita Update Package Linux dengan perintah berikut ini.

sudo apt update

Update Package Linux

Update Package Linux

• Setelah jika di minta masukan Password, masukkan saja Password Linux Anda. Berikut proses update sedang berlangsung tunggu hingga selesai dan jangan lupa dipastikan Komputer atau Laptop anda terkoneksi dengan Internet.

Proses Update Package

• Setelah kita mengupdate Package Linux kita akan menginstal dependencies wget. wget adalah merupakan sebuah aplikasi download yang biasa digunakan download sesuatu menggunakan terminal linux.

sudo apt install wget // install wget
sudo apt install software-properties-common apt-transport-https wget // install dependencies 

install wget

install wget

install dependencies

• Selanjutkan akan masukan Microsoft GPG key ke Linux menggunakn wget.

wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -

Microsoft GPG key

Microsoft GPG key

• Setelah kita memasukan Microsoft GPG key , sekarang kita akan mengaktifkan repository Visual Studio Code dengan perintah berikut.

sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main

mengaktifkan repository Visual Studio Code

mengaktifkan repository Visual Studio Code

• Setelah mengaktifkan Repository Visual Studio Code kita update terlebih dahulu Repository Package.

sudo apt update 

Update Package Linux

• Kemudian tunggu proses update selesai, jika telah selesai jalankan perintah dibawah ini untuk menginstall Visual Studio Code.

sudo apt install code

Install Visual Studio Code

Install Visual Studio Code

• Setelah proses instalasi Visual Studio Code selesai. Sekarang kita akses Visual Studio Code melalui menu pencarian.

KliK Icon 

• Setalah itu akan tampil Menu Pencarian Aplikasi dan Masukan Nama Aplikasi yang ingin dicari dan setelah ketemu tinggal anda klik icon aplikasi tersebut untuk membukanya.

Cari dan Buka Aplikasi

• Berikut Tampilan Visual Studio Code

Tampilan Visual Studio Code

Install Extension

Extension merupakan plugin yang dapat install di Visual Studio Code, Extension ini diharapakan bisa memudahkan para developer. Maka extension ini sangat dibutuhkan oleh para developer karena dapat mempercepat dalam penulisan code program, extension cocok untuk membantu developer Back end ataupun Front End.

Berikut Daftar extension yang diperlu untuk Developer Mobile Android yang menggunakan React Native sebagai framework untuk membuat Aplikasi Android. Untuk cara install ada dibagian setelah list extension.

• React Native Tools

Ekstensi ini menyediakan syntax pengembangan untuk proyek React Native untuk mempercepatan penulisan code.

• Babel JavaScript

JavaScript syntax highlighting Untuk ES201x, React JSX, Flow dan GraphQL.

• Prettier - Code formatter

Merupakan extension yang berfungsi untuk penataan format kode agar terlihat rapi.

• ESLint

ESLint merupakan extension yang berfungsi untuk menemukan kesalahan - kesalahan (error) dalam penulisan kode dengan sangat cepat.

• Flow Language Support

Extension Flow Language Support  digunakan agar Visual Studio Code mengdukung Flow. Flow adalah pemeriksa tipe statis, yang dirancang untuk menemukan kesalahan jenis dalam program JavaScript.

• Auto Close Tag, Auto Complate Tag, Auto Rename Tag.

Ketiga extension tersebut berfungsi untuk mempercepat dalam penulisan Tag Syntax di coding kita.

• Color Highlight

Color Highlight merupakan extension yang berfungsi akan memberikan warna dari kode warna yang kita tulisan didalam codingan kita.

• TODO Highlight

Merupakan akan memberikan sorotan ketika kursor berada di baris kode program kita.

Setelah mengetahui nama - nama extension, selanjutnya kita akan menginstal extension - extension tersebut melalui Visual Studio Code. Ikutilah petujuk dari gambar berikut.  

Klik Icon 

Kemudian Akan Tampil Menu Pencarian Extension, maka anda tinggal cari extension - extension yang ada didaftar diatas kemudian klik install dan lakukan proses install satu per satu hingga semua daftar extension diatas terinstall semua.

Install Extension

Demikian pada toturial Part 3 ini kita telah selesai instalasi Visual Studio Code dan Extension Visual Studio Code. Pambahasan selanjutkan akan dibahas pada tutorial Part 4

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 11 Desember 2019.