Membuat Aplikasi Android Sistem Informasi DesaKu - Part 3

android Dec 11, 2019

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
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.
getpackage
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
wget
install wget
1wget
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
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
aktif
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
vsinstall
Install Visual Studio Code
  • Setelah proses instalasi Visual Studio Code selesai. Sekarang kita akses Visual Studio Code melalui menu pencarian.
akses
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.
1akses
Cari dan Buka Aplikasi
  • Berikut Tampilan Visual Studio Code
tampilanVS
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.

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

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

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

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

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.

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

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

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.  

extensionIcon
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.

installextension
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

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin. Jasa menerima jasa pembuatan aplikasi dan website https://pindahdigital.com