DEV Community

Faris Han
Faris Han

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

Hasilnya jadi: ~/Dev/inkos

Struktur foldernya sekarang:

-inkos
  -package.json
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

-inkos
  -node_modules
  -package.json
  -vue.js
  -yarn.lock
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Langsung panggil si tailwind lewat situ. Jadinya gini nih:

/* index.css */
@tailwind base;

@tailwind components;

@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

<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'
    }
  }
})
Enter fullscreen mode Exit fullscreen mode
  • 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>
...
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
// index.js
new Vue({
  el: '#app',
  data(){
    return {
      title: 'Inkos'
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

Sekian dulu ya, pembaca. Dadah.

Latest comments (0)