Penjelasan Teknologi di TASKLY

Git, npm, TypeScript, Vite, dan environment variables.

1. Git dan GitHub

Git adalah sistem untuk mencatat riwayat perubahan kode, sedangkan GitHub adalah tempat menyimpan repository Git secara online. Di project ini saya memakai:

• Commit untuk menyimpan setiap perubahan beserta catatannya.
• Branch untuk mengerjakan fitur terpisah dari branch utama (main), misalnya feature/task-filter dan feature/task-management.
• Merge untuk menggabungkan branch ke main.
• Merge conflict terjadi saat dua branch mengubah bagian file yang sama. Saya mencobanya di README.md lalu menyelesaikannya secara manual.
• Pull Request untuk mengajukan penggabungan branch ke main. Saya membuat Pull Request #1 dan menggabungkannya.
• Push dan pull untuk mengirim dan mengambil perubahan antara komputer dan GitHub.
• .gitignore untuk mencegah file tertentu (seperti node_modules dan .env) ikut ter-upload.

2. npm

npm adalah pengelola paket untuk project JavaScript dan TypeScript. Daftar paket dan perintahnya ada di package.json.

• dependencies: paket yang dibutuhkan aplikasi saat berjalan. Project ini belum memakai dependencies karena aplikasinya dibuat hanya dengan TypeScript, HTML, dan CSS tanpa library tambahan.
• devDependencies: paket yang hanya dipakai saat pengembangan. Di project ini ada typescript dan vite.
• npm scripts: perintah singkat seperti npm run dev (menjalankan aplikasi), npm run build (menjalankan tsc && vite build, yaitu memeriksa kode TypeScript lalu membuat versi produksi), dan npm run preview (melihat hasil build).
• Semantic versioning memakai format MAJOR.MINOR.PATCH, misalnya 1.2.3. MAJOR naik jika ada perubahan besar yang bisa merusak kompatibilitas, MINOR naik jika ada fitur baru, dan PATCH naik jika hanya perbaikan bug. Tanda ^ berarti boleh update MINOR dan PATCH, sedangkan ~ berarti hanya boleh update PATCH. Contoh di project ini: "vite": "^8.3.5" boleh naik ke 8.x.x, sedangkan "typescript": "~7.0.2" hanya boleh naik ke 7.0.x.

3. TypeScript

TypeScript adalah JavaScript yang ditambah sistem tipe data, sehingga kesalahan bisa ketahuan sebelum aplikasi dijalankan. Di project ini saya memakai:

• Primitive types: string, number, boolean, contohnya appName: string, id: number, dan isAppReady: boolean.
• Array: daftar tugas disimpan di tasks: Task[].
• Interface: Task menentukan bentuk data sebuah tugas (id, judul, mata kuliah, deadline, status selesai).
• Type alias dan union type: TaskStatus hanya boleh berisi 'Belum Selesai' atau 'Selesai', dan TaskFilter ditambah pilihan 'Semua'.
• Generics sederhana: fungsi loadData<T>() bisa memuat data dari Local Storage untuk tipe apa pun, dan dipakai sebagai loadData<Task[]>() untuk memuat daftar tugas.

type TaskStatus = 'Belum Selesai' | 'Selesai'
type TaskFilter = 'Semua' | 'Belum Selesai' | 'Selesai'

interface Task {
  id: number
  title: string
  course: string
  deadline: string
  completed: boolean
}

function loadData<T>(key: string, fallback: T): T {
  const saved = localStorage.getItem(key)

  if (saved) {
    try {
      return JSON.parse(saved) as T
    } catch {
      return fallback
    }
  }

  return fallback
}

let tasks: Task[] = loadData<Task[]>('taskly-tasks', [])
const appName: string = import.meta.env.VITE_APP_NAME || 'TASKLY'
const isAppReady: boolean = true

4. Vite

Vite adalah alat untuk menjalankan dan membangun aplikasi web. Saat pengembangan, Vite menyediakan server lokal yang cepat dan langsung memperbarui tampilan saat kode diubah. Saat npm run build, Vite menggabungkan dan mengecilkan semua file menjadi folder dist yang siap diunggah.

5. Environment Variables

Environment variable adalah pengaturan yang disimpan di luar kode, dalam file .env. Di Vite, nama variabelnya harus diawali VITE_, misalnya VITE_APP_NAME dan VITE_APP_VERSION. Nilainya dibaca di kode lewat import.meta.env dan ditampilkan di aplikasi (nama di sidebar dan versi di bagian bawah sidebar).

• .env tidak diunggah ke GitHub karena masuk .gitignore.
• .env.example diunggah sebagai contoh isi tanpa data rahasia.
• Karena .env tidak ada di GitHub, proses build di GitHub memakai nilai cadangan yang ditulis di kode (TASKLY dan 1.0.0).
• Nilai variabel yang dipakai di aplikasi frontend ikut terlihat di hasil build. Karena itu, password atau API key rahasia tidak boleh disimpan di sini. Saya hanya memakai konfigurasi non-rahasia seperti nama dan versi aplikasi.

6. Perbedaan Compiler, Transpiler, dan Bundler

• Compiler menerjemahkan kode dari satu bahasa ke bentuk lain yang lebih rendah levelnya, misalnya C ke kode mesin.
• Transpiler menerjemahkan kode ke bahasa lain yang levelnya sejajar. Contohnya TypeScript menjadi JavaScript, supaya bisa dibaca browser.
• Bundler menggabungkan banyak file kode dan paket menjadi sedikit file yang efisien. Vite berperan sebagai bundler saat proses build.

Singkatnya, di project ini tsc memeriksa kode TypeScript saat npm run build, lalu Vite mengubahnya menjadi JavaScript dan menggabungkannya menjadi file siap pakai di folder dist.