Faris Han

Posted on Apr 27, 2020 • Updated on Apr 28, 2020

Gabut Mode On: Bikin Aplikasi Inventaris Kosan (Bagian 3 - Setup)

#webdev #javascript #beginners #bahasa

Halo!

Setelah analisa ga jelas kemarin, 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.

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

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 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:

<!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:

/* 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, 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:

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

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

// 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.htmlnya.

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

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

Sekarang dobel klik lagi index.html nya.

Wrap Up!

<!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>

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

Sekian dulu ya, pembaca. Dadah.

DEV Community