Gabut Mode On: Bikin Aplikasi Inventaris Kosan (Bagian 3 - Setup)
Tags: webdev, javascript, beginners, bahasa
Published: 2020-04-27 14:52:56

## Halo!

Setelah [analisa ga jelas kemarin](https://dev.to/farishan/gabut-mode-on-bikin-aplikasi-inventaris-kosan-bagian-2-analisa-35di), tiba saatnya ngoding nih. Bagian paling seru. Tipis-tipis, kita mulai dari setup dev tools-nya, alias persiapan alat dan bahan. FYI, saya pakai unix-like OS, pakai terminal. Kalau pembaca pakai Windows, mungkin bisa pasang WSL dulu.  Atau pakai terminal dari VS Code. Silakan googling. 

### TL;DR
Yang sedang terburu-buru, boleh langsung ke bagian paling bawah. Ada snippet hasil akhir setup HTML & JS nya.

---

## Pondasi

Sebelum masang library aneh-aneh, kita bikin dulu pondasinya. Mulai dari sini, calon aplikasinya saya kasih nama: **Inkos**. 

Saya punya folder khusus development, ada di `home/Dev` atau `~/Dev`.
Mari membuat direktori di sana, masuk, lalu inisiasi dengan [Yarn](https://yarnpkg.com/).

```
mkdir inkos && cd inkos && yarn init -y
```

Hasilnya jadi: `~/Dev/inkos`

Struktur foldernya sekarang:

```
-inkos
  -package.json
```

---

## Vue

Saya kalau siang bekerja sebagai frontend developer. Jadi, aplikasi ini lebih ke arah frontend. Namanya frontend ya doyan kalau mainan view engine. Secara pribadi, saya suka mainan [Vue.js](https://vuejs.org) buatan mas Evan You. Karena lebih sederhana dari React. Cocok untuk _quick-prototyping_ sehari-hari. Kalau kata senior saya, learning-curve nya lebih enak. Maksudnya, dengan waktu yang singkat, udah bisa dapet teknik banyak.

Cara pasang Vue ke pondasi kita ada macem-macem. Bisa langsung download terus pasang ke script tag, bisa pakai CDN, bisa pakai npm/yarn, bisa pakai CLI. Paling enak ya pakai CLI karena sudah disiapkan semuanya, tapi mereka tidak merekomendasikan pakai CLI kalau kita belum terlalu paham tentang build tools gitu-gitu lah. Berhubung saya masih merasa junior dan tidak paham build tools (walaupun sering pakai), kali ini saya akan menuruti perintah tim Vue, menggunakan direct script include. Hehe.

Cari tombol download "Development Version" di [sini](https://vuejs.org/v2/guide/installation.html)

Lalu masukkan file Vue.js ke root-nya Inkos.
Strukturnya jadi gini:

```
-inkos
  -package.json
  -vue.js
```

---

## Tailwind

Lain cerita dengan Vue yang menyarankan direct include untuk pembelajar, [Tailwind](https://tailwindcss.com) malah menyarankan untuk install pakai NPM/Yarn, karena kalau pakai CDN atau direct include, tidak semua fitur bisa dipakai. Kita ikutin aja maunya Tailwind ya.

```
yarn add tailwindcss
```

Nah, sekarang muncul deh folder jahanam `node_modules` yang ga perlu dilihat isinya. Struktur folder:

```
-inkos
  -node_modules
  -package.json
  -vue.js
  -yarn.lock
```

---

## Entry Point

Di beberapa build tools, ada yang namanya entry point. Secara sederhana, maksudnya adalah file utama yang jadi tempat masuk file-file lainnya. Saya mau bikin file `index.js` untuk entry point Vue-nya.

```
touch index.js
```

---

## Gabungin

### index.html

Bikin `index.html` di root direktorinya, sejajar sama `package.json`. Terus buka pakai editor. Saya pakai VS Code.

```
touch index.html && code .
```

Buka file `index.html`, mulai bikin struktur HTML dengan `<body>` kosong. Atau bisa pakai emmet untuk VS Code. Masukin tanda seru `!` terus pencet `tab`. 

### scripts

Setelah itu, panggil si `vue.js` & entry point `index.js` di dalam body, bagian paling bawah, sebelum tag `</body>`. Vue nya dulu baru index ya.

Hasilnya gini:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <script src="vue.js"></script>
  <script src="index.js"></script>
</body>
</html>
```

### styles

Scripts-nya sudah masuk semua, sekarang styles-nya. Bikin dulu entry point untuk style, namanya `index.css`. Iya, memang yang entry-entry itu biasanya pakai nama index. 

```
touch index.css
```

Langsung panggil si tailwind lewat situ. Jadinya gini nih:

```css
/* index.css */
@tailwind base;

@tailwind components;

@tailwind utilities;
```

Aneh, kan. Itu bentuknya ga kayak kode css pada umumnya. Supaya bisa pakai tailwindnya, kita harus memproses si `index.css` itu dulu. Ada banyak [caranya](https://tailwindcss.com/docs/installation/), tapi saya akan memproses dengan Tailwind CLI. 

```
npx tailwindcss build index.css -o tailwind.css
```

Ini lebih aneh, sih. Yang saya tau, `npx` itu dipakai untuk eksekusi perintah `tailwindcss build`. Mengolah file `index.css` menjadi (`-o` itu mungkin 'output') file bernama `tailwind.css`.

Strukturnya jadi gini:

```
-inkos
  -node_modules
  -index.css
  -index.html
  -index.js
  -package.json
  -tailwind.css
  -vue.js
  -yarn.lock
```

---

### lah, stylesnya belum masuk?

Masukin dulu stylesnya ke `index.html`. Tapi jangan semua. 
Cukup si `tailwind.css` yang kita masukin. Di bagian paling bawah head, sebelum `</head>`. Jadinya gini:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="tailwind.css">
</head>
<body>

  <script src="vue.js"></script>
  <script src="index.js"></script>
</body>
</html>
```

--- 

### capek...

Susah juga ngoding sambil bikin artikel ya.

---

### Masukin Vue

Akhirnya sampai sini juga. Ayo buat wadah untuk aplikasinya, di `index.html`, di dalem `<body>`.

```html
<!-- index.html -->
<body>
  <div id="app"></div>

  <script src="vue.js"></script>
  <script src="index.js"></script>
</body>
```

`<div>` yang ada id "app" nya itu, nanti bakal di-inject pakai script Vue.js. Sekarang kita inisiasi Vue di `index.js`.

```javascript
// index.js
new Vue({
  el: '#app',
  data(){
    return {
      title: 'Inkos'
    }
  }
})
```

- `new Vue` itu maksudnya kita bikin sebuah object baru dari Vue. Objectnya ribet deh pokoknya. Biar gampang, bayangin kalau itu kita bikin seekor makhluk, jenisnya 'vue'.
- `el: '#app'` itu, si makhluk berjenis vue ini akan merasuki elemen HTML yang punya id (#) "app". Wadah yang kita buat di `index.html` tadi.
- `data()` itu method/fungsi si makhluk vue. Method itu otomatis terpanggil sejak si vue ini masuk ke HTML, terus si vue mengeluarkan 'isi perutnya' alias data ke suatu tempat di `index.html`. Kalau kita panggil, datanya bisa muncul lho. `title` itu kuncinya, `Inkos` itu datanya.

---

## Tes Tes Dicoba 123

Coba dobel klik file `index.html`.

...

Pasti kosong, kan?
Ya emang kosong `index.html`nya.

---

Coba isi wadahnya pakai kunci `title` supaya datanya keluar. Bungkus kuncinya pakai 'double bracket' alias kumis-kumis. Gini nih:

```html
...
  <div id="app">{{ title }}</div>
...
```

Sekarang dobel klik lagi `index.html` nya.

---

### Wrap Up!

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="tailwind.css">
</head>
<body>
  <div id="app">{{ title }}</div>

  <script src="vue.js"></script>
  <script src="index.js"></script>
</body>
</html>
```

```javascript
// index.js
new Vue({
  el: '#app',
  data(){
    return {
      title: 'Inkos'
    }
  }
})
```

---

Sekian dulu ya, pembaca. Dadah.