Rabu, 13 Mei 2026
Selasa, 12 Mei 2026
Android Studi Kasus
Wireframe
Hign Fidelity Design
Prototype
Output
Studi Kasus:
“Student Task Management App”
Aplikasi digunakan untuk membantu mahasiswa mencatat tugas kuliah, deadline, status pengerjaan, dan prioritas tugas.
Fitur Utama Aplikasi
1. Splash Screen
Buat splash screen modern menggunakan:
- Logo aplikasi
- Nama aplikasi
- Animasi sederhana
2. Authentication UI (Dummy)
Buat tampilan:
- Login
- Register
Data login tidak perlu online, cukup validasi lokal.
Gunakan:
- TextField Material 3
- Elevated Button
- Card
- Snackbar validasi
3. Dashboard/Home Screen
Tampilkan:
- Jumlah tugas selesai
- Jumlah tugas pending
- Progress tugas
Gunakan komponen:
- Top App Bar
- Floating Action Button (FAB)
- Navigation Drawer / Bottom Navigation
- Cards Material Design
4. CRUD Task Management
Mahasiswa dapat:
- Menambah tugas
- Mengedit tugas
- Menghapus tugas
- Melihat detail tugas
Field data:
- id
- nama_tugas
- mata_kuliah
- deadline
- prioritas
- status
- catatan
5. SQLite Database
Gunakan:
- Room Database
Implementasikan:
- Entity
- DAO
- Repository
- Database Class
Operasi:
- Insert
- Update
- Delete
- Select All
- Search
6. Search & Filter
Tambahkan fitur:
- Pencarian tugas
-
Filter berdasarkan:
- Prioritas
- Status
- Mata kuliah
Gunakan:
- Search Bar
- Chip Filter
- Dropdown Menu
7. Statistik Tugas
Tampilkan:
- Pie chart tugas selesai/pending
- Statistik prioritas tugas
Gunakan:
- Progress Indicator
- Compose Chart Library
8. Notification Reminder
Tambahkan:
- Pengingat deadline tugas
Gunakan:
- WorkManager atau AlarmManager
Ketentuan UI/UX (Material Design 3)
Aplikasi wajib menggunakan prinsip Material Design:
Komponen yang wajib digunakan
- Scaffold
- TopAppBar
- NavigationBar
- FloatingActionButton
- Card
- Snackbar
- ModalBottomSheet
- Dialog
- LazyColumn
- Material Icons
Ketentuan Jetpack Compose
Gunakan:
- State Management
- remember
- mutableStateOf
- ViewModel
- StateFlow / LiveData
Navigasi:
- Navigation Compose
Ketentuan Arsitektur
Gunakan MVVM:
- Model
- ViewModel
- Repository
- UI Compose
Struktur Folder yang Disarankan
com.example.studenttaskapp
│
├── data
│ ├── local
│ ├── repository
│
├── model
│
├── ui
│ ├── screen
│ ├── component
│ ├── theme
│
├── viewmodel
│
├── navigation
│
└── MainActivity.kt
Fitur Tambahan (Opsional)
Mahasiswa dapat menambahkan:
- Dark Mode
- Export PDF
- Upload attachment
- Firebase Sync
- Multi-user
- Kalender akademik
Output yang Harus Dikumpulkan
Mahasiswa wajib mengumpulkan:
- Source code lengkap
- Desain UI Figma
- Diagram arsitektur aplikasi
- ERD database SQLite
- Screenshot aplikasi
- Video demo aplikasi
- Laporan implementasi
Senin, 11 Mei 2026
Web - Proyek PPDB SMK Online
Spesifikasi Perangkat Lunak
Arsitektur Aplikasi
FRONT End
Desain UI/UX
Wireframe
High fidelity design
Prototype
FullStacks Development
Panduan Implementasi
Materi Teknologi Web PHP MySQL
BACK END
Membuat back-end aplikasi web adalah proses membangun komponen sisi server (server-side) yang mengelola logika bisnis, database, dan integrasi API agar aplikasi dapat berjalan. Berikut adalah tahapan sistematis pembuatan back-end dari spesifikasi hingga implementasi: [1, 2]
1. Analisis Spesifikasi & Perencanaan (Requirement Analysis) [1]
Tahap awal adalah memahami apa yang harus dibangun. [1]
- Identifikasi Fitur: Menentukan fungsi utama aplikasi (misal: login/register, unggah data, sistem transaksi).
- Analisis Kebutuhan Fungsional: Apa yang dilakukan sistem (proses data) dan non-fungsional (kecepatan, keamanan).
- Penyusunan API Dokumentasi: Membuat draf endpoints API yang dibutuhkan (misal:
POST /api/login). [1, 2, 3, 4]
2. Desain Arsitektur Sistem (System Design) [1]
Merancang struktur teknis agar aplikasi mudah dikembangkan dan dirawat. [1]
- Pemilihan Technology Stack: Memilih bahasa (Node.js, Python, PHP, Go) dan framework (Express, Django, Laravel, Gin) yang sesuai.
- Desain Basis Data (Database): Menentukan jenis database (Relasional seperti PostgreSQL/MySQL atau NoSQL seperti MongoDB) dan merancang skema data.
- Pemilihan Arsitektur: Memutuskan penggunaan Monolithic (untuk tim kecil/awal) atau Microservices (untuk aplikasi besar). [1, 2, 3]
3. Pengembangan Back-end (Coding & Development)
- Inisialisasi Proyek: Membuat folder, menginstal dependensi (library), dan mengatur environment (misal: menggunakan Git/GitHub).
- Implementasi Database: Menulis kode untuk koneksi database (ORM/ODM).
- Pembuatan API & Logika Bisnis: Mengembangkan routes, controllers, dan middleware untuk mengolah data dan aturan bisnis.
- Autentikasi & Otorisasi: Mengimplementasikan sistem keamanan (JWT, OAuth) untuk membatasi akses pengguna. [1, 2, 3, 4, 5]
4. Pengujian Back-end (QA & Testing)
5. Deployment & Integrasi (Deployment)
Memindahkan aplikasi dari komputer lokal ke server produksi. [1]
- Penyusunan Server: Menyiapkan server cloud (AWS, GCP, Azure, DigitalOcean).
- Containerization (Docker): Membungkus aplikasi ke dalam container agar konsisten di semua lingkungan.
- CI/CD Pipeline: Mengotomatisasi proses pengujian dan penyebaran (Continuous Integration/Continuous Deployment) agar setiap perubahan kode langsung diuji dan di-deploy. [1, 2, 3, 4, 5]
6. Pemeliharaan & Pemantauan (Maintenance & Monitoring)
- Monitoring: Menggunakan alat seperti Prometheus atau Datadog untuk memantau performa, error, dan penggunaan sumber daya.
- Logging: Menyimpan catatan aktivitas server untuk melacak masalah.
- Pembaruan Fitur: Menambahkan fitur baru atau melakukan refactoring kode berdasarkan kebutuhan pengguna. [1, 2, 3, 4, 5]
Ringkasan Teknologi Utama:
- Bahasa/Framework: JavaScript/Node.js/Express, Python/Django/FastAPI, Go/Gin, PHP/Laravel, Java/Spring Boot.
- Database: MySQL, PostgreSQL, MongoDB, Redis (Caching).
- Alat: Git, Docker, Kubernetes, Postman, Linux
Langganan:
Postingan (Atom)
-
Versi 1 Versi 2 Versi 3 Versi 4 Aplikasi ini versi GUI dengan Swing mempunyai form input catatan... -
https://www.geeksforgeeks.org/javascript/form-validation-using-javascript/ https://www.geeksforgeeks.org/html/javascript-application-for-e... -
https://www.youtube.com/watch?v=wUw8eLeJH0A&list=PLz_5rPRIvGECVDOGY8fMs3-8uZVlyJ-gr https://webdesignmastery.github.io/Royal_Hotel_31-...
