Skip to content
CodeSync2026
TugasIn
Public

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository
BranchesTags

Latest commit

 

History

4 Commits

Folders and files

NameName
Last commit message
Last commit date
css
css
 
 
js
js
 
 
PRODUCT.md
PRODUCT.md
 
 
README.md
README.md
 
 
index.html
index.html
 
 
skills-lock.json
skills-lock.json
 
 

Repository files navigation

🔔 TugasIn — Aplikasi Pengingat Tugas Berbasis JavaScript

Aplikasi Web Pengingat Tugas Ringan, Responsif, dan Cerdas untuk Siswa.
Dikembangkan oleh Siswa RPL SMKN 40 sebagai bagian dari Proyek Pembelajaran End-to-End SDLC (Software Development Life Cycle).

📌 Daftar Isi

1. Ringkasan Proyek (Executive Summary)

1.1 Latar Belakang

Selama ini, mayoritas siswa mengandalkan metode manual untuk mengingat tugas sekolah, seperti sekadar mengandalkan ingatan atau catatan acak di kertas. Metode ini terbukti tidak reliabel, terutama ketika siswa dihadapkan pada banyak mata pelajaran produktif maupun normatif dengan jadwal deadline yang berdekatan.

Dampak buruk dari keterlambatan pengumpulan tugas antara lain:

  • Penurunan nilai akademik dan kredibilitas di mata guru.
  • Menumpuknya beban pengerjaan tugas (snowball effect).
  • Meningkatnya tingkat stres dan berkurangnya motivasi belajar.

1.2 Solusi & Nilai Utama

TugasIn hadir sebagai solusi berbasis web client-side yang memungkinkan siswa mencatat, mengorganisasi, memantau hitung mundur (countdown), dan menerima notifikasi pengingat otomatis secara real-time.

Keunggulan Utama TugasIn:

  • ⚡ Tanpa Instalasi & Ringan: Cukup buka di browser (Chrome, Firefox, Edge).
  • 🔒 Privasi Terjamin: Seluruh data tersimpan secara lokal di browser (localStorage/IndexedDB).
  • 🔔 Pengingat Cerdas: Memanfaatkan Web Notification API untuk memberi peringatan sebelum waktu habis.
  • 🎯 Visualisasi Progres: Fitur progress tracker dan dashboard ringkasan untuk meningkatkan motivasi.

1.3 Target Pengguna

  • Utama: Siswa SMK Jurusan Rekayasa Perangkat Lunak (RPL) SMKN 40 Jakarta.
  • Sekunder: Seluruh siswa SMA/SMK dan mahasiswa yang membutuhkan sistem manajemen tugas personal yang simpel tanpa perlu login atau server backend.

2. Fitur Utama & User Stories

2.1 Matriks Fitur

Fitur Ikon Deskripsi Manfaat Utama
Reminder System 🔔 Notifikasi browser otomatis menjelang deadline Mencegah lupa pengerjaan tugas
Countdown Real-time ⏳ Hitung mundur sisa waktu secara presisi (jam & menit) Menciptakan rasa urgensi pengerjaan
Warning System ⚠️ Perubahan visual (kuning/merah) saat tugas mendekati deadline Menyoroti tugas kritis secara instant
Progress Tracker 📊 Visualisasi % pengerjaan dan status (Belum/Proses/Selesai) Menjaga motivasi dan kepuasan belajar
Dashboard Ringkasan 📈 Widget statistik jumlah tugas aktif, telat, dan selesai Memberikan gambaran umum kondisi tugas
Penyimpanan Lokal 💾 Integrasi localStorage / IndexedDB Data tetap aman meskipun browser ditutup

2.2 User Stories

ID Peran Keinginan Tujuan / Alasan
F-01 Siswa Menambah, mengedit, dan menghapus tugas beserta deadline Agar seluruh daftar tugas terstruktur dan tercatat rapi
F-02 Siswa Menerima notifikasi pop-up otomatis menjelang deadline Agar tidak ketinggalan batas waktu pengumpulan
F-03 Siswa Melihat hitung mundur waktu tersisa pada setiap kartu tugas Agar merasakan tingkat urgensi pengerjaan
F-04 Siswa Melihat warna khusus (merah/peringatan) pada tugas hampir telat Agar dapat mengambil tindakan secepatnya
F-05 Siswa Memperbarui persentase progres dan status pengerjaan Agar dapat memantau sejauh mana tugas dikerjakan
F-06 Siswa Melihat ringkasan total tugas di halaman utama Agar mendapat gambaran umum status seluruh beban tugas

3. Arsitektur & Desain Sistem (SDD)

3.1 Arsitektur Aplikasi

TugasIn dirancang menggunakan pendekatan Client-Side Layered Architecture murni tanpa ketergantungan pada server-side backend.

┌─────────────────────────────────────────────────────────────┐
│                    PRESENTATION LAYER                       │
│             (HTML5 Layout + CSS3 Styling + DOM)             │
└──────────────────────────────┬──────────────────────────────┘
                               │
┌──────────────────────────────▼──────────────────────────────┐
│                       LOGIC LAYER                           │
│  (app.js, taskModule, reminderModule, countdownModule, etc.)│
└──────────────────────────────┬──────────────────────────────┘
                               │
┌──────────────────────────────▼──────────────────────────────┐
│                       DATA LAYER                            │
│           (Browser Storage: localStorage / IndexedDB)       │
└─────────────────────────────────────────────────────────────┘

3.2 Tech Stack

  • Front-End Core: HTML5, CSS3, JavaScript (ES6+ Native)
  • Data Persistence: window.localStorage / IndexedDB API
  • System Service: Web Notification API
  • Timer Execution: JavaScript Timers (setInterval, setTimeout)

3.3 Struktur Folder Proyek

tugasin/
├── index.html               # Halaman utama & dashboard
├── css/
│   └── style.css            # Styling responsive & variabel tema visual
├── js/
│   ├── app.js               # Entry point utama aplikasi
│   ├── taskModule.js        # Logika CRUD tugas
│   ├── storageModule.js     # Interaksi dengan localStorage/IndexedDB
│   ├── reminderModule.js    # Pengelolaan izin & penjadwalan Web Notification
│   ├── countdownModule.js   # Kalkulasi hitung mundur waktu real-time
│   ├── warningModule.js     # Penentuan ambang status (aman/hampir telat/telat)
│   ├── progressModule.js    # Pengelolaan status & persentase progres
│   └── uiModule.js          # DOM Manipulation & Event Listeners
└── assets/
    └── icons/               # Ikon & aset visual pendukung

3.4 Pembagian Modul

Modul Tanggung Jawab Utama
TaskModule Menangani operasi pembuatan, pembaruan, penghapusan, dan filter data tugas.
StorageModule Menangani serialisasi (JSON.stringify/parse) dan penyimpanan data secara persisten.
ReminderModule Meminta izin Web Notification dan memicu popup notifikasi sesuai interval waktu.
CountdownModule Menghitung sisa hari, jam, dan menit dari waktu sekarang ke deadline.
WarningModule Membandingkan sisa waktu terhadap threshold untuk menentukan kelas CSS/warna.
ProgressModule Menghitung total progres dan mengelola perubahan status (belum, proses, selesai).
UIModule Melakukan rendering komponen kartu tugas, modal form, dan dashboard stats.

3.5 Model Data (Task Schema)

Setiap tugas disimpan sebagai objek JavaScript berstruktur berikut:

const TaskSchema = {
  id: "task-1721520000000",          // Unique ID (timestamp/UUID)
  title: "Membuat Laporan SDLC",     // Nama tugas
  subject: "Pemrograman Web",        // Mata pelajaran
  deadline: "2026-07-25T23:59:00",   // ISO Datetime String
  priority: "tinggi",                // Options: "rendah" | "sedang" | "tinggi"
  status: "proses",                  // Options: "belum" | "proses" | "selesai" | "telat"
  progress: 50,                      // Integer (0 - 100%)
  createdAt: "2026-07-21T08:00:00"   // ISO Datetime pembuatan
};

3.6 Algoritma Kunci

A. Perhitungan Countdown (CountdownModule)

function getRemainingTime(deadline) {
  const diff = new Date(deadline) - new Date();
  
  if (diff <= 0) {
    return { status: "telat", text: "Waktu Habis", isExpired: true };
  }
  
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  
  return { 
    status: "berjalan", 
    text: `${hours} jam ${minutes} menit`,
    isExpired: false 
  };
}

B. Pengecekan Ambang Peringatan (WarningModule)

function checkWarning(deadline, thresholdHours = 24) {
  const diffHours = (new Date(deadline) - new Date()) / (1000 * 60 * 60);
  
  if (diffHours <= 0) return "telat";          // Status Merah/Expired
  if (diffHours <= thresholdHours) return "hampir-telat"; // Status Kuning/Warning
  return "aman";                               // Status Hijau/Normal
}

4. Spesifikasi Kebutuhan (SRS)

4.1 Kebutuhan Fungsional (FR)

  • FR-01 (Tambah Tugas): Memungkinkan penginputan nama, mata pelajaran, deadline, dan prioritas.
  • FR-02 (Edit/Hapus Tugas): Memungkinkan pengubahan detail tugas atau penghapusan permanen.
  • FR-03 (Penyimpanan Persisten): Otomatis menyimpan state tugas ke localStorage.
  • FR-04 (Notifikasi Browser): Memicu Notification pada H-1 hari dan H-3 jam sebelum deadline.
  • FR-05 (Real-time Countdown): Memperbarui tampilan sisa waktu setiap 60 detik.
  • FR-06 (Visual Warning): Mengubah warna batas kartu menjadi kuning/merah sesuai sisa waktu.
  • FR-07 (Update Progress): Memungkinkan penggeseran slider / input percentage progres 0-100%.
  • FR-08 (Dashboard Ringkasan): Menyediakan kaji cepat jumlah tugas Aktif, Hampir Telat, dan Selesai.
  • FR-09 (Auto-Detect Overdue): Menandai tugas sebagai "Telat" jika deadline terlampaui dan progres < 100%.

4.2 Kebutuhan Non-Fungsional (NFR)

  • NFR-01 (Usability): Antarmuka intuitif tanpa memerlukan pelatihan khusus bagi pengguna baru.
  • NFR-02 (Performance): Eksekusi pembaruan timer tidak melebihi 1% penggunaan CPU browser.
  • NFR-03 (Reliability): Data tetap utuh dan terisi kembali saat halaman di-refresh.
  • NFR-04 (Compatibility): Kompatibel penuh dengan browser modern berbasis Chromium, Gecko, dan WebKit.
  • NFR-05 (Maintainability): Struktur koding modular sesuai standar ES6 Modules.

5. Rencana Pengembangan & Sprint Backlog

Pengembangan menggunakan kerangka kerja Scrum Sederhana selama 3 minggu (3 Sprint):

┌─────────────────────────────────────────────────────────────────────────┐
│ SPRINT 1 (Minggu 1): Fondasi & CRUD Tugas                               │
├─────────┬──────────────────────────────────────────────┬──────────┬─────┤
│ ID      │ Deskripsi Tugas                              │ Prioritas│ Est.│
├─────────┼──────────────────────────────────────────────┼──────────┼─────┤
│ S1-01   │ Setup struktur proyek (HTML, CSS, JS)        │ Tinggi   │ 3j  │
│ S1-02   │ Membuat form input tambah & edit tugas       │ Tinggi   │ 4j  │
│ S1-03   │ Implementasi StorageModule (localStorage)    │ Tinggi   │ 4j  │
│ S1-04   │ Implementasi TaskModule (Fungsi CRUD)        │ Tinggi   │ 5j  │
│ S1-05   │ Render daftar tugas awal pada dashboard UI   │ Sedang   │ 4j  │
└─────────┴──────────────────────────────────────────────┴──────────┴─────┤

┌─────────────────────────────────────────────────────────────────────────┐
│ SPRINT 2 (Minggu 2): Countdown, Reminder, & Warning System              │
├─────────┬──────────────────────────────────────────────┬──────────┬─────┤
│ ID      │ Deskripsi Tugas                              │ Prioritas│ Est.│
├─────────┼──────────────────────────────────────────────┼──────────┼─────┤
│ S2-01   │ Implementasi CountdownModule (Interval 1m)   │ Tinggi   │ 5j  │
│ S2-02   │ Implementasi ReminderModule & Web Notif API  │ Tinggi   │ 5j  │
│ S2-03   │ Implementasi WarningModule (Threshold 24h)   │ Tinggi   │ 4j  │
│ S2-04   │ Styling status warna kartu (Aman/Kuning/Merah│ Sedang   │ 3j  │
│ S2-05   │ Testing trigger notifikasi & simulasi waktu  │ Sedang   │ 3j  │
└─────────┴──────────────────────────────────────────────┴──────────┴─────┤

┌─────────────────────────────────────────────────────────────────────────┐
│ SPRINT 3 (Minggu 3): Progress Tracking, Dashboard, & Polishing           │
├─────────┬──────────────────────────────────────────────┬──────────┬─────┤
│ ID      │ Deskripsi Tugas                              │ Prioritas│ Est.│
├─────────┼──────────────────────────────────────────────┼──────────┼─────┤
│ S3-01   │ Implementasi ProgressModule (0-100%)         │ Tinggi   │ 4j  │
│ S3-02   │ Komponen visual progress bar pada tiap kartu │ Sedang   │ 3j  │
│ S3-03   │ Widget Dashboard Ringkasan statistik tugas   │ Sedang   │ 4j  │
│ S3-04   │ Fitur deteksi otomatis status "Telat"        │ Tinggi   │ 3j  │
│ S3-05   │ End-to-end Integration Testing & Bug Fixing  │ Tinggi   │ 5j  │
│ S3-06   │ Finalisasi UI/UX, Aksesibilitas, & Dokumen   │ Sedang   │ 3j  │
└─────────┴──────────────────────────────────────────────┴──────────┴─────┤

6. Panduan Instalasi & Penggunaan

6.1 Prasyarat

  • Browser web modern (Google Chrome v90+, Mozilla Firefox v88+, atau Microsoft Edge v90+).
  • Web Server Lokal (Opsional, misalnya VS Code Extension Live Server) untuk pengalaman pengujian modul ES6 terbaik.

6.2 Cara Menjalankan Aplikasi

  1. Clone repository ini (atau unduh file ZIP): 
    git clone https://github.com/smkn40/tugasin.git
  2. Masuk ke direktori proyek: 
    cd tugasin
  3. Buka aplikasi:
    • Opsi A (Sederhana): Klik ganda pada file index.html untuk membukanya di browser pilihan Anda.
    • Opsi B (Disarankan): Jalankan menggunakan Live Server di VS Code atau jalankan perintah HTTP server lokal: 
      npx serve .

6.3 Konfigurasi Izin Notifikasi Browser

Agar fitur Reminder Notifikasi berjalan sempurna:

  1. Saat pertama kali membuka aplikasi, browser akan menampilkan pop-up permintaan izin notifikasi.
  2. Klik "Allow" / "Izinkan".
  3. Jika secara tidak sengaja terblokir, Anda dapat meresetnya dengan mengklik ikon gembok 🔒 di sebelah kiri URL browser ➔ Setel Notifikasi ke "Allow".

7. Batasan Sistem (Out of Scope MVP)

Untuk rilis versi MVP (Minimum Viable Product) ini, beberapa fitur sengaja belum diimplementasikan:

  • ❌ Tidak ada sinkronisasi multi-device atau akun pengguna (tanpa cloud database).
  • ❌ Tidak ada integrasi otomatis ke LMS sekolah (Google Classroom / Moodle).
  • ❌ Tidak ada fitur kolaborasi grup/tugas kelompok.

8. Kontributor & Tim Penyusun

Dokumentasi dan proyek ini disusun oleh tim siswa Rekayasa Perangkat Lunak (RPL) SMKN 40 Jakarta:

  • Tim Pengembang: Siswa RPL SMKN 40
  • Mata Pelajaran: Pemrograman Web & Perangkat Bergerak / SDLC Project
  • Tanggal Dokumen: 21 Juli 2026
  • Versi Dokumen: 1.0

Dibuat dengan ❤️ untuk kedisiplinan dan keberhasilan belajar siswa Indonesia.

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages