Membuat Development Environment Pribadi dengan VSCode dan Google Cloud

Table of Content

  1. Apa itu Development Environment
  2. Cara Membuat Development Environment Pribadi
  3. Additional - Simple Coding with Database Initialization
  4. Warning - Limitasi Cloud Shell
  5. Referensi

Apa itu Development Environment

Mengutip dari techopedia, Development Environment adalah kumpulan dari
prosedur dan alat-alat yang digunakan untuk mengembangkan aplikasi.

Nah, setelah mengetahui arti dari development environment, bagaimana
cara kita secara umumnya dalam membuat development environment pribadi?

Cara Membuat Development Environment Pribadi

Umumnya kita membuat development environment pribadi dengan menggunakan
infrastruktur yang kita miliki sendiri seperti komputer / laptop pribadi.

Hal ini bisa saja dilakukan apabila kita memiliki komputer / laptop yang
cukup canggih, misalnya: Komputer dengan spesifikasi yang cukup canggih
(Core i5 ke atas, RAM 8GB ke atas, menggunakan SSD, dsb).

Nah, bagaimanakah cara kita melakukannya?

Pada Komputer Pribadi

Dalam kondisi yang sempurna ini, di mana seseorang memiliki komputer yang cukup
canggih, maka membuat development environment ini caranya cukup mudah:

Namun tentunya tidak semua orang memiliki komputer / laptop dengan
spesifikasi yang canggih untuk bisa membuat development environment pribadi
yang sesuai dengan kondisi di atas bukan?

Sebagai contoh saja:

Berdasarkan kasus ini, bagaimanakah cara kita membuat
development environment pribadi walaupun spesifikasi dari komputer yang
digunakan tidak cukup canggih?

Pada Komputasi Awan

Masalah di atas sebenarnya dapat diselesaikan dengan cara memindahkan sebagian load yang dimiliki pada komputer pribadi yang digunakan menuju
komputasi awan (Cloud), sehingga kita tetap dapat men-develop aplikasi pada komputer pribadi walaupun komputer kita memiliki spesifikasi yang KENTANG.

Adapun solusi yang disediakan perusahaan besar penyedia cloud adalah:

Namun dari cara di atas ini, umumnya kita akan sangat terikat pada Editor
yang sudah disediakan oleh penyedia cloud tersebut, sehingga kita tidak akan
cukup leluasa untuk mengkustomisasi tampilan Editor yang kita miliki.

Nah pada artikel ini, yang akan dibahas adalah mengintegrasikan Cloud Shell
yang disediakan oleh Google Cloud Platform (GCP) dengan VSCode yang ada pada
komputer pribadi.

Apa itu Cloud Shell

Sebelum mengetahui apa itu Cloud Shell dan Editornya, ada baiknya kita mengetahui apa itu GCP terlebih dahulu.

GCP adalah layanan penyedia cloud computing yang berasal dari perusahaan aplikasi mesin pencari yang besar di dunia, Google.

Cloud Shell, menurut GCP sendiri, adalah sebuah mesin administrasi yang dikurasikan oleh Google sendiri yang memiliki akses terhadap sumber daya GCP yang powerful, aman secara default, dengan berbagai macam tools yang telah disediakan dan siap untuk digunakkan.

Secara sederhananya, dari kacamata developer, Cloud Shell adalah

Sebuah sistem operasi Linux, yang sudah memiliki banyak tools dan runtime yang
terpasang dan siap digunakan untuk mengembangkan aplikasi.

Tools apa sajakah yang sudah tersedia di dalam Cloud Shell ?
(Untuk list lengkap dapat dilihat di sini)

Tipe Tool
Linux Shell bash
  sh
Linux Utiliies Utilities standar Debian
Text Editors Emacs
  vim
  nano
Tools Pengembangan npm
  nvm
  pip
  composer
Versioning git
  mercurial
Tambahan docker
  MySQL Client
Cara Menggunakan Cloud Shell

Sebelum mencoba untuk menggunakan Cloud Shell ini, ada sedikit prasyarat yang
harus dipenuhi:

Yap, syaratnya hanyalah dengan memiliki sebuah akun GMail saja !
Hal ini dibutuhkan karena Akun GCP ini akan terikat dengan akun GMail yang
digunakan untuk mengakses Cloud Shell.

Kemudian kita tinggal mengunjungi situs https://console.cloud.google.com/
lalu memasukkan persetujuan dan membuat project awal, lalu menekan tombol Terminal pada kanan atas halaman Console

image1

dan voila, kita sudah berada di dalam Cloud Shell. Mudah bukan?

image2

Tapi tentu saja cara ini masih memiliki limitasi, yaitu kita diberikan
“pinjaman” infrastruktur oleh GCP, namun pada saat kita ingin menuliskan kode
untuk membuat aplikasi, halaman yang diberikan adalah halaman Terminal atau
tulisan hitam putih yang cukup menantang untuk membuat kode bukan?

Bagaimanakah cara kita sekarang untuk mempermudah dalam menuliskan kode,
kalau bisa dengan editor yang mudah digunakan (seperti VSCode), namun tetap
dapat mengakses infrastruktur yang dberikan oleh GCP berupa Cloud Shell
tersebut?

Singkatnya kita ingin menuliskan kode pada VSCode pada komputer pribadi kita,
namun infrastruktur untuk menjalankan kode tersebut sepenuhnya berada pada GCP.
Cara Menginterasikan Cloud Shell

Langkah Nol
Nah, sebelum kita mengintegrasikan Cloud Shell pada komputer pribadi kita, ada
beberapa tools tambahan yang butuh diinstall:

Disclaimer:

Setelah melakukan instalasi tersebut, sekarang kita bisa mengakses gcloud cli
melalui terminal / cmd yang ada pada komputer masing masing.

Langkah Pertama
Setelah melakukan instalasi, langkah pertama yang harus dilakukan adalah login
ke akun GCP via gcloud cli yang ada.

Hal ini dapat dilakukan dengan mengetikkan perintah di bawah ini pada pada
terminal / cmd yang digunakan:

gcloud auth login

Pada langkah ini, akan membuka browser secara otomatis dan akan meminta kita
untuk melakukan login ke akun GMail yang terhubung ke GCP Console.

Setelah melakukan login, kita sudah boleh menutup browser tersebut

Langkah Kedua
Setelah login, langkah selanjutnya adalah kita mencoba untuk masuk ke dalam
Cloud Shell yang ada pada akun GCP.

Hal ini dapat dilakukan dengan mengetikkan perintah

gcloud cloud-shell ssh --authorize-session

Saat pertama kali langkah ini dilakukan, terminal akan menanyakan untuk
membuat beberapa file pada $HOME/.config/ssh/, jawablah dengan (Y)es.

Setelah langkah ini dilakukan, pada Linux dan Mac OS, akan langsung masuk ke
terminal di mana Cloud Shell tersebut berada, sedangkan pada Windows, akan
membuka sebuah aplikasi PuTTY dan meminta ijin untuk mengakses Cloud Shell,
jawab dengan (Y)es.

Sampai pada langkah ini artinya kita sudah berhasil masuk ke dalam
Cloud Shell, namun diaksesnya benar-benar dari komputer kita pribadi.

Ketik perintah exit untuk keluar dari Cloud Shell.

Langkah Ketiga
Setelah berhasil masuk ke dalam Cloud Shell dan sudah keluar dari Cloud Shell,
Maka sekarang kita akan membuka VSCode pada komputer kita, kemudian kita akan
memasang sebuah extension pada VSCode yang bernama Remote - SSH.

Langkah untuk memasang extension ini adalah sebagai berikut:

Sampai pada tahap ini artinya kita sudah siap untuk melakukan koneksi secara
remote ke Cloud Shell dengan menggunakan SSH.

Langkah Keempat
Pada langkah ini kita akan mulai untuk mengkoneksikan VSCode ke Cloud Shell.

Langkah untuk mengkoneksikan VSCode ke cloud-shell adalah sebagai berikut:

Sampai pada tahap ini, artinya kita sudah mengkoneksikan VSCode ke Cloud Shell.

Hal ini bisa dilihat pada bagian kiri bawah VSCode, icon hijau tadi sudah
berubah dan ada informasi tambahan dengan nama SSH - xx.xxx.xxx.xxx.

Selain itu juga pada saat membuka terminal, yang terbuka bukan terminal yang
ada pada komputer kita lagi, melainkan terminal yang terbuka di Cloud Shell.

Dan pada saat membuka folder (Open Folder), maka akan muncul folder yang
terdapat pada Cloud Shell, tidak ada pada komputer kita.

Maka sampai di titik ini kita mulai harus menggunakan git dan lain lain agar
dapat menyimpan kode yang kita buat dalam mengembangkan aplikasi.

🔥🔥🔥 Selamat memulai membuat aplikasi ! 🔥🔥🔥

Apabila sudah selesai dan ingin menutup koneksi ke Cloud Shell, kita tinggal  
menekan tombol hijau di kiri bawah, kemudian memilih `Close Remote Connection`

Additional - Simple Coding with Database Initialization

Sekarang kita akan mencoba untuk membuat aplikasi nodejs yang menggunakan
database PostgreSQL dan keseluruhan dari aplikasi ini bisa diakses pada
browser, namun sebenarnya, keseluruhan infrastruktur yang digunakan untuk
men-develop aplikasi ini seluruhnya ada pada Cloud Shell.

Dikarenakan pada Cloud Shell ini awalnya tidak memiliki PostgreSQL, maka
seharusnya kita akan menginstall PostgreSQL, kemudian menggunakannya.

Tapi karena kita menggunakan Cloud Shell, dan pada Cloud Shell ini sudah
terpasang docker dengan docker-compose, maka kita bisa saja menggunakan
docker-compose untuk membuat PostgreSQL dengan mudah.

Langkah-langkah untuk mendevelop aplikasi nodejs dengan database PostgreSQL:

  1. Pastikan sudah login dan berhasil masuk ke dalam Cloud Shell pada VSCode.
  2. Buka terminal pada VSCode (Terminal -> New Terminal).
  3. Pada terminal tersebut, masukkan perintah mkdir workspaces untuk membuat
    folder bernama workspaces.
  4. Pada VSCode, pilih File -> Open Folder, kemudian pilih folder yang baru
    saja dibuat tadi (/home/gclouduser/workspaces).
  5. Buatlah sebuah file baru dengan nama docker-compose.yml pada folder
    workspaces.
  6. Pada file tersebut, tuliskan konten sebagai berikut: 
     version: '3.1'

 services:
   db:
     image: postgres:13.4-alpine
     environment:
       POSTGRES_PASSWORD: postgres
     ports:
       - 5432:5432
   adminer:
     image: adminer:4.8.1-standalone
     ports:
       - 8081:8080
  7. Kemudian selanjutnya kita akan menjalankan docker-compose dengan
    mengetikkan perintah docker-compose up -d.
  8. Pada tahap ini, sebenarnya kita sudah berhasil menjalankan postgresql pada
    port 5432 dan adminer pada port 8081, di Cloud Shell, selanjutnya kita akan
    melakukan port forwarding agar dapat mengakses halaman adminer pada
    browser yang kita gunakan.
  9. Pada VSCode, di bagian Terminal, ada klik tab dengan nama Ports kemudian
    tekan tombol Forward a Port
    image10
  10. Pada kolom pertama, ketik 8081, kemudian tekan Enter. 8081 merupakan
    port Adminer (Adminer adalah client db yang dapat diakses pada browser)
  11. Setelah ini, kita akan membuka browser, kemudian masukkan alamat url
    http://localhost:8081/, maka akan muncul halaman utama adminer.

Sampai pada tahap ini artinya kita sudah berhasil mengoneksikan
infrastruktur pada GCP dan bisa diakses dengan localhost pada
komputer pribadi, menakjubkan bukan?

Langkah selanjutnya adalah sekarang kita akan membuat aplikasi berbasis Node.js
yang kemudian akan ditampilkan pada browser kita juga selayaknya localhost !

  1. Buatlah sebuah file dengan nama app.js pada folder workspaces.
  2. Pada VSCode, pilih tab Terminal kemudian ketik perintah
    nvm install lts/fermium && nvm use lts/fermium.
  3. Perintah ini digunakan untuk menginstall nodejs dengan versi LTS terbaru
    pada Cloud Shell (pada saat tulisan ini dibuat, nodejs LTS terbaru adalah
    lts/fermium, sesuaikan dengan kondisi pada saat mencoba tulisan ini yah !).
  4. Ketik perintah npm init -y untuk membuat file package.json
  5. Ketik perintah npm install express && npm i -D nodemon
    untuk menginstall express pada folder project berada.
  6. Pada file app.js ketiklah kode berikut: 
     const express = require('express');
 const app = express();

 const port = process.env.PORT || 10000;

 app.use(express.urlencoded({ "extended": false }));
 app.use(express.json());

 app.get("/", (req, res) => {
     res
         .status(200)
         .json({ code: 200, message: "Hello World" });
 });

 app.listen(port, _ => console.log(`Apps bekerja pada port ${port}`));
  7. Pada terminal, ketik perintah npx nodemon app.js untuk menjalankan aplikasi
  8. Buka tab Ports, kemudian tambahkan sebuah port baru yaitu 10000.
  9. Bukalah pada browser http://localhost:10000/ dan lihatlah hasilnya.

Selamat sampai di sini kita sudah berhasil membuat aplikasi Node.js sederhana
dan berhasil mengakses PostgreSQL pada Cloud Shell !

🔥🔥🔥 Happy Developing !!! 🔥🔥🔥

Warning - Limitasi Cloud Shell

Tiada gading yang tak retak, begitu pula dengan Cloud Shell ini sendiri,
pastinya akan ada harga yang harus dibayarkan karena kita menggunakan Cloud
Shell ini sendiri, yang selanjutnya akan kita sebut sebagai limitasi Cloud
Shell.

Limitasi Cloud Shell ini adalah:

Referensi