UNIVERSITAS TEKNOLOGI DIGITAL INDONESIA
FAKULTAS TEKNOLOGI INFORMASI
PROGRAM STUDI INFORMATIKA PROGRAM SARJANA
RENCANA PEMBELAJARAN SEMESTER
| MATA KULIAH (MK) | KODE | Rumpun MK | BOBOT (sks) | SMT | Tgl Penyusunan |
| WORKSHOP WEB | SIF25703K | Pemrograman & Teknologi Digital | 1 sks | 7 | 14 April 2026 |
| PENGESAHAN | Dosen Pengembang RPS | Koordinator MK | Kaprodi | ||
| Badiyanto. S.Kom, M.Kom | ........................................... | ........................................... | |||
Capaian Pembelajaran
| CPL-PRODI yang dibebankan pada MK | |
| - | |
| Capaian Pembelajaran Mata Kuliah (CPMK) | |
|
CPMK1 WORKSHOP WEB |
Menguasai konsep dasar arsitektur komponen dan reactivity pada ekosistem Vue.js. |
|
CPMK2 WORKSHOP WEB |
Mengimplementasikan framework Nuxt.js untuk membangun aplikasi web yang optimal secara SEO dan performa (Universal Rendering). |
|
CPMK3 WORKSHOP WEB |
Mengintegrasikan aplikasi frontend dengan layanan Backend (API) secara aman dan efisien. |
|
CPMK4 WORKSHOP WEB |
Membangun dan menyajikan aplikasi web full-stack fungsional sebagai solusi atas permasalahan nyata melalui kerja tim atau mandiri |
| Kemampuan akhir tiap tahapan belajar (Sub-CPMK) | |
| Sub-CPMK1.1 | Mahasiswa mampu melakukan instalasi tooling modern (Vite) dan memahami struktur dasar proyek Vue 3. |
| Sub-CPMK1.2 | Mahasiswa mampu menerapkan Template Syntax, Directives (v-bind, v-if, v-for), dan Event Handling. |
| Sub-CPMK1.3 | Mahasiswa mampu mengimplementasikan sistem Reactivity menggunakan fungsi ref() dan reactive() untuk mengelola data dinamis |
| Sub-CPMK1.4 | Mahasiswa mampu mendesain komunikasi antar komponen menggunakan Props dan Emits. |
| Sub-CPMK2.1 | Mahasiswa mampu bermigrasi ke ekosistem Nuxt 3 dan memanfaatkan File-based Routing. |
| Sub-CPMK2.2 | Mahasiswa mampu membuat struktur tata letak aplikasi yang konsisten menggunakan Layouts dan Components Auto-import. |
| Sub-CPMK2.3 | Mahasiswa mampu menerapkan teknik optimasi SEO dan Metadata secara dinamis pada aplikasi Server-Side Rendering (SSR). |
| Sub-CPMK3.1 | Mahasiswa mampu melakukan Data Fetching dari API menggunakan composables Nuxt (useFetch dan useAsyncData). |
| Sub-CPMK3.2 | Mahasiswa mampu mengelola data global yang persisten menggunakan Pinia Store. |
| Sub-CPMK3.3 | Mahasiswa mampu membangun fitur CRUD (Create, Read, Update, Delete) yang terhubung ke REST API atau BaaS (seperti Supabase). |
| Sub-CPMK3.4 | Mahasiswa mampu menerapkan sistem Autentikasi (Login/Register) dan proteksi halaman menggunakan Middleware. |
| Sub-CPMK4.1 | Mahasiswa mampu mengintegrasikan seluruh fitur (Frontend + Backend) ke dalam satu solusi permasalahan nyata. |
| Sub-CPMK4.2 | Mahasiswa mampu melakukan optimasi performa akhir dan Deployment aplikasi ke platform Cloud (Vercel/Netlify). |
| Sub-CPMK4.3 | Mahasiswa mampu mempresentasikan hasil karya (Demo Produk) yang dibuat. |
Korelasi CPL terhadap CPMK
| CPL\CPMK |
CPMK1 WORKSHOP WEB |
CPMK2 WORKSHOP WEB |
CPMK3 WORKSHOP WEB |
CPMK4 WORKSHOP WEB |
|---|---|---|---|---|
| Belum ada data CPL. | ||||
Korelasi CPMK terhadap Sub-CPMK
| CPMK \ Sub-CPMK | Sub-CPMK | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Sub-CPMK1.1 | Sub-CPMK1.2 | Sub-CPMK1.3 | Sub-CPMK1.4 | Sub-CPMK2.1 | Sub-CPMK2.2 | Sub-CPMK2.3 | Sub-CPMK3.1 | Sub-CPMK3.2 | Sub-CPMK3.3 | Sub-CPMK3.4 | Sub-CPMK4.1 | Sub-CPMK4.2 | Sub-CPMK4.3 | |
|
CPMK1 WORKSHOP WEB |
✓ | ✓ | ✓ | ✓ | ||||||||||
|
CPMK2 WORKSHOP WEB |
✓ | ✓ | ✓ | |||||||||||
|
CPMK3 WORKSHOP WEB |
✓ | ✓ | ✓ | ✓ | ||||||||||
|
CPMK4 WORKSHOP WEB |
✓ | ✓ | ✓ | |||||||||||
| Deskripsi Singkat MK |
Pengembangan Web Modern (Vue & Nuxt) Mata kuliah ini dirancang untuk membekali mahasiswa dengan keahlian komprehensif dalam membangun aplikasi web modern yang responsif, berperforma tinggi, dan siap industri. Fokus utama pembelajaran dimulai dari penguasaan arsitektur komponen dan sistem reaktivitas pada ekosistem Vue.js. Selanjutnya, mahasiswa akan mengeksplorasi Nuxt.js untuk mengimplementasikan Universal Rendering, memastikan aplikasi yang dibangun memiliki optimasi SEO dan kecepatan akses yang maksimal. Tak hanya dari sisi tampilan, mata kuliah ini juga menekankan pada keamanan dan efisiensi dalam integrasi API serta layanan backend. |
||
| Bahan Kajian: Materi Pembelajaran |
1. Pengenalan Vue & Nuxt 2. Dasar Vue: Template & Data 3. Event Handling & Reactivity 4. Components & Props 5. Routing & Pages di Nuxt 6. Layout & Styling 7. Form Handling & Validation 8. Fetch Data & API (useFetch & useAsyncData) 9. State Management (Pinia) 10. Authentication Dasar 11. Search Engine Optimization (SEO) & Meta di Nuxt 3 12. Deployment & Production Best Practice (Nuxt 3) |
||
| Pustaka |
Utama: - Pendukung: - |
||
| Pengampu |
Badiyanto,
S.Kom, M.Kom |
||
| Penilaian | Komponen CPMK | Bentuk Penilaian | Persentase Bobot |
| - | |||
| Total | 0% | ||
| Matakuliah Syarat | FRAMEWORK WEB | ||
Rencana Pembelajaran Semester
| Mg Ke- |
Sub-CPMK (sbg kemampuan akhir diharapkan) |
Penilaian | Bentuk Pembelajaran; Metode Pembelajaran; Penugasan Mahasiswa; | Materi Pembelajaran |
Bobot Penilaian |
||
|---|---|---|---|---|---|---|---|
| Indikator | Kriteria & Bentuk | Luring | Daring | ||||
| (1) | (2) | (3) | (4) | (5) | (6) | (7) | (8) |
| 1 |
Sub-CPMK1.1
(WORKSHOP WEB)
Mahasiswa mampu melakukan instalasi tooling modern (Vite) dan memahami struktur dasar proyek Vue 3. |
• Kesiapan Environment • Ketepatan Inisialisasi • Running Project • Pemahaman Struktur | Kriteria: Menggunakan skor Bentuk: • praktik (unjuk kerja) • observasi • tes lisan Singkat | Bentuk Kelas Laboratorium Belajar Mandiri Eksplorasi dokumentasi resmi Vite dan Vue.js oleh mahasiswa di luar jam kuliah. Metode Praktik langkah-langkah instalasi dan inisialisasi proyek di depan kelas. Tugas: Tugas Proyek Awal: Mahasiswa diminta membuat satu proyek Vue 3 kosong, melakukan modifikasi teks pada App.vue, (screenshot) hasil Laporan Praktikum Singkat: Membuat deskripsi tertulis mengenai fungsi folder pages, public, dan file package.json berdasarkan hasil eksplorasi mandiri. 1 SKS (2x60 menit) | Environment Setup: Instalasi Node.js, Nuxt Project Scaffolding: Menjalankan perintah npm create vue@latest untuk inisialisasi proyek. Vite Tooling: Menjalankan local dev server npm run dev Entry Point: Memahami keterkaitan antara index.html, main.js, dan Root Component (App.vue). | 5.00% | |
| 2 |
Sub-CPMK1.2
(WORKSHOP WEB)
Mahasiswa mampu menerapkan Template Syntax, Directives (v-bind, v-if, v-for), dan Event Handling. |
• Ketepatan Sintaks • Logika Kondisional • Iterasi Data • Interaktivitas | Kriteria: Menggunakan Skor Bentuk: Tes Praktik Terbimbing | Bentuk Pembelajaran: Praktik Laboratorium. Metode Pembelajaran: Live Coding dan Peer Teaching (diskusi antar teman sejawat). Tugas: Membuat fitur "Daftar Belanja" atau "To-Do List" sederhana yang bisa menambah item ke daftar dan mengubah status tampilan menggunakan v-if dan v-for. 1 SKS (2x60 menit) | Template Syntax: Attribute Binding (v-bind / :): Conditional Rendering (v-if, v-else-if, v-else List Rendering (v-for): Melakukan perulangan data (Array/Object) Event Handling (v-on / @): Menangkap interaksi pengguna seperti click, submit, atau input untuk menjalankan fungsi tertentu dalam komponen. Two-way Data Binding (v-model): Sinkronisasi otomatis dua arah antara input formulir dan data state. | 5.00% | |
| 3 |
Sub-CPMK1.3
(WORKSHOP WEB)
Mahasiswa mampu mengimplementasikan sistem Reactivity menggunakan fungsi ref() dan reactive() untuk mengelola data dinamis |
• Ketepatan Tipe Data • Manipulasi State Sintaks Script Setup | Kriteria: Menggunakan Skor Bentuk: Tugas Observasi Kode (mengecek penggunaan .value yang tepat pada ref). | Bentuk Praktik Laboratorium & Diskusi Kelompok. Metode Problem-Based Learning (mahasiswa diberikan kode yang tidak reaktif dan diminta memperbaikinya). Tugas: Membuat aplikasi "Counter" dan "Form Profile Editor" sederhana yang menggunakan ref() untuk input teks dan reactive() untuk sekumpulan data user. 1 SKS (2x60 menit | Konsep Reactivity: Memahami bagaimana Vue mendeteksi perubahan data dan memperbarui DOM secara otomatis. Fungsi ref(): Digunakan untuk mendefinisikan data primitif (string, number, boolean) yang reaktif. Penggunaan .value di dalam <script> dan akses langsung di <template>. Fungsi reactive(): Digunakan khusus untuk data bertipe Object atau Array. Tidak memerlukan .value tetapi memiliki batasan pada reassignment. Computed Properties: Dasar penggunaan properti yang nilainya bergantung pada state reaktif lainnya. | 5.00% | |
| 4 |
Sub-CPMK1.4
(WORKSHOP WEB)
Mahasiswa mampu mendesain komunikasi antar komponen menggunakan Props dan Emits. |
• Koneksi Data • Respon Event • Struktur Komponen | Kriteria: Menggunakan Skor Bentuk: Praktikum Mandiri (Mahasiswa membangun struktur komponen bertingkat). | Bentuk: Praktik Laboratorium. Metode Project-Based Learning (Small Scale) — Membangun satu fitur kecil dengan minimal dua komponen. Tugas: Membuat komponen "ProductCard" (Child) yang menerima data produk via Props, dan memiliki tombol "Tambah ke Keranjang" yang mengirimkan sinyal ke "ProductList" (Parent) melalui Emits. 1 SKS (2x60 menit) | Component Architecture Props (Downwards): Mengirimkan data dari komponen Parent ke Child menggunakan sintaks defineProps. Emits (Upwards): Mengirimkan sinyal atau data dari komponen Child kembali ke Parent menggunakan sintaks defineEmits. One-Way Data Flow: Memahami aturan bahwa props bersifat read-only bagi komponen Child (tidak boleh diubah langsung). | 5.00% | |
| 5 |
Sub-CPMK2.1
(WORKSHOP WEB)
Mahasiswa mampu bermigrasi ke ekosistem Nuxt 3 dan memanfaatkan File-based Routing. |
• Environment Readiness • Routing Accuracy • Parameter Handling | Kriteria: Menggunakan Skor Bentuk: Praktik Langsung (Mahasiswa membangun struktur menu navigasi sederhana) | Bentuk Praktik Laboratorium. Metode Tutorial Terbimbing (Eksplorasi struktur folder Nuxt dibandingkan Vue standar). Tugas: Membuat miniatur situs web "Katalog Berita" yang terdiri dari halaman beranda (index.vue), halaman daftar berita, dan halaman detail berita dinamis berdasarkan ID berita. 1 SKS (2x60 menit) | Nuxt 3 Architecture: Memahami perbedaan Vue SPA dengan Nuxt Universal Application serta keunggulan Nitro Engine. Scaffolding Nuxt: Inisialisasi proyek menggunakan perintah npx nuxi@latest init. Automatic File-based Routing: Menggunakan direktori pages/ untuk membuat rute URL secara otomatis tanpa konfigurasi manual. Dynamic Routes: Pembuatan rute dinamis menggunakan kurung siku, contoh: pages/produk/[id].vue. NuxtLink Component: Penggunaan komponen <NuxtLink> untuk navigasi antar halaman yang cepat dan teroptimasi | 5.00% | |
| 6 |
Sub-CPMK2.2
(WORKSHOP WEB)
Mahasiswa mampu membuat struktur tata letak aplikasi yang konsisten menggunakan Layouts dan Components Auto-import. |
• Struktur Layout • Efisiensi Kode • Konsistensi UI | Kriteria: Menggunakan skor Bentuk: Tinjauan Kode (Code Review) — Memeriksa struktur folder dan penggunaan slot. | Bentuk Praktik Laboratorium. Metode Demonstrasi & Drill — Dosen menunjukkan cara membuat layout, mahasiswa langsung mempraktikkannya pada proyek masing-masing. Tugas: Mengonversi aplikasi "Katalog Berita" sebelumnya agar menggunakan sistem Layout (Header & Footer terpusat) dan memecah bagian-bagian halaman (seperti kartu berita) menjadi komponen mandiri di folder components/. 1 SKS (2x60 menit) Bentuk: Tinjauan Kode (Code Review) — Memeriksa struktur folder dan penggunaan slot | • Nuxt Layouts System: fungsi direktori layouts/ untuk memisahkan elemen UI yang statis (seperti Navbar dan Footer) dari konten halaman. • Slot Component: Penggunaan tag <slot /> sebagai penampung konten dinamis di dalam file layout. • Custom Layouts: Teknik menerapkan tata letak yang berbeda untuk halaman tertentu (misal: layout khusus Dashboard vs layout Public). • Components Auto-import: Memanfaatkan fitur otomatisasi Nuxt di direktori components/ sehingga komponen dapat langsung digunakan tanpa perlu melakukan import manual di setiap file. • Nested Components: Mengelola sub-direktori komponen untuk pengorganisasian kode yang lebih rapi. | 5.00% | |
| 7 |
Sub-CPMK2.3
(WORKSHOP WEB)
Mahasiswa mampu menerapkan teknik optimasi SEO dan Metadata secara dinamis pada aplikasi Server-Side Rendering (SSR). |
• Metadata Accuracy • Dynamic Injection • Crawler Ready | Kriteria: Menggunakan skor Bentuk: Observasi Hasil Build (mengecek View Source pada browser untuk memastikan meta tags dirender di server). | Bentuk Praktik Laboratorium & Diskusi. Metode Demonstrasi & Audit — Dosen menunjukkan cara menggunakan tool seperti SEO Meta Checker untuk mengaudit halaman yang dibuat mahasiswa. Tugas: Menambahkan fitur SEO pada aplikasi "Katalog Berita". Halaman detail berita harus menampilkan judul berita di tab browser dan deskripsi singkat berita di dalam meta description secara otomatis. 1 SKS (2x60 menit) | Nuxt SEO Components: Penggunaan komponen bawaan <Title>, <Meta>, dan <Link> untuk mengelola head HTML langsung di dalam template. useHead & useSeoMeta Composable: Mengelola metadata secara programatik menggunakan Composition API (rekomendasi Nuxt 3). Dynamic Metadata: Teknik mengubah judul halaman dan deskripsi secara dinamis berdasarkan data dari API (contoh: judul artikel menjadi judul halaman). SSR Benefits for SEO: Memahami mengapa Server-Side Rendering lebih unggul dibanding Client-Side Rendering dalam hal pengindeksan oleh robot search engine. | 10.00% | |
| 8 |
Sub-CPMK2.3
(WORKSHOP WEB)
Mahasiswa mampu menerapkan teknik optimasi SEO dan Metadata secara dinamis pada aplikasi Server-Side Rendering (SSR). Sub-CPMK1.2 (WORKSHOP WEB) Mahasiswa mampu menerapkan Template Syntax, Directives (v-bind, v-if, v-for), dan Event Handling. |
- | - | UTS | - | 10.00% | |
| 9 |
Sub-CPMK3.1
(WORKSHOP WEB)
Mahasiswa mampu melakukan Data Fetching dari API menggunakan composables Nuxt (useFetch dan useAsyncData). |
• Konektivitas API • Manajemen Status • Optimalisasi SSR | Kriteria: Menggunakan skor Bentuk: Tes Praktik (Mahasiswa diminta menampilkan daftar data dari endpoint API eksternal secara dinamis). | Bentuk Praktik Laboratorium. Metode Live Coding & Case Study — Membedah dokumentasi API publik dan mencoba mengintegrasika ke dalam komponen Nuxt. Tugas: Mengintegrasikan API "Daftar Pengguna" atau "Katalog Produk" ke dalam aplikasi. Mahasiswa wajib menampilkan daftar data dan membuat fungsi "Lihat Detail" yang mengambil data spesifik berdasarkan ID menggunakan useFetch. 1 SKS (2x60 menit) | Pengenalan Data Fetching: Memahami perbedaan pengambilan data di sisi klien (Client-side) dan sisi server (Server-side) untuk efisiensi performa. Composable useFetch: Cara termudah dan tercepat untuk mengambil data dari URL API dengan fitur auto-refresh dan reactivity. Composable useAsyncData: Penggunaan untuk skenario yang lebih kompleks, seperti menggabungkan beberapa pemanggilan API atau menggunakan library pihak ketiga Handling State (data, pending, error): Mengelola kondisi saat data sedang dimuat (loading state) dan menangani skenario jika API gagal memberikan respon. Query & Params: Teknik mengirimkan parameter tambahan ke API (seperti pencarian atau filter) melalui objek query. | 5.00% | |
| 10 |
Sub-CPMK3.2
(WORKSHOP WEB)
Mahasiswa mampu mengelola data global yang persisten menggunakan Pinia Store. |
• Store Architecture • Data Consistency • Persistence | Kriteria: Menggunakan skor Bentuk: Tinjauan Struktur Kode (Mengecek efisiensi pemisahan logika bisnis ke dalam store). | Bentuk Praktik Laboratorium. Metode Demonstrasi Terbimbing — Membuat alur data dari halaman login ke header (menampilkan nama user) melalui satu store. Tugas: Membuat fitur "Wishlist" atau "Favorite". Mahasiswa harus membuat store yang mampu menyimpan daftar produk yang disukai, menghapusnya, dan memastikan daftar tersebut tetap ada saat user berpindah halaman atau me-refresh browser. 1 SKS (2x60 menit) | Introduction to Pinia: State Management sebagai "gudang data" terpusat untuk menghindari prop drilling yang rumit. Store Structure: anatomi Pinia yang terdiri dari State (data), Getters (computed), dan Actions (methods/fungsi). Defining Stores: Praktik membuat store menggunakan fungsi defineStore di dalam direktori stores/ yang otomatis di-import oleh Nuxt. State Persistence: Teknik menjaga agar data di store tidak hilang saat halaman di-refresh (menggunakan localStorage atau plugin pinia-plugin-persistedstate). Integrating with API: Memindahkan logika pemanggilan useFetch ke dalam Actions di Pinia agar data API dapat diakses oleh banyak komponen sekaligus. | 5.00% | |
| 11 |
Sub-CPMK3.3
(WORKSHOP WEB)
Mahasiswa mampu membangun fitur CRUD (Create, Read, Update, Delete) yang terhubung ke REST API atau BaaS (seperti Supabase). |
• Integritas operasi • Payload accuracy • Error Prevention | Kriteria: Menggunakan Skor Bentuk: Project Showcase (Mahasiswa mendemonstrasi-kan fitur CRUD pada satu entitas data tertentu) | Bentuk Praktik Laboratorium. Metode Tutorial — Mahasiswa membangun fitur CRUD langkah demi langkah bersama dosen. Tugas: Membuat modul (Task Management). Mahasiswa harus membuat fitur untuk menambah tugas baru, menampilkan daftar tugas, menandai tugas yang selesai (update), dan menghapus tugas dari database. | HTTP Methods & Resource Mapping: Memahami penggunaan GET untuk mengambil data, POST untuk data baru, PUT/PATCH untuk pembaruan, dan DELETE untuk menghapus. Payload & Headers: Teknik mengirimkan data dalam bentuk JSON melalui request body dan mengatur headers (seperti Content-Type: application/json). Form Handling di Nuxt: Menggunakan v-model untuk menangkap input pengguna dan mengirimkannya sebagai objek data ke endpoint API. Data Revalidation: Menggunakan fungsi refresh() dari useFetch untuk memastikan daftar data di UI langsung terupdate setelah terjadi perubahan (Create/Update/Delete). Feedback Mechanism: Implementasi notifikasi visual (seperti loading spinner atau toast notification) untuk memberikan kepastian status proses kepada pengguna. | 5.00% | |
| 12 |
Sub-CPMK3.4
(WORKSHOP WEB)
Mahasiswa mampu menerapkan sistem Autentikasi (Login/Register) dan proteksi halaman menggunakan Middleware. |
• Security Flow • Unauthorized Access Block • Token Persistence: | Kriteria: Menggunakan Skor Bentuk: Uji Coba Penetrasi Sederhana (Dosen mencoba mengakses halaman rahasia tanpa akun untuk menguji efektivitas middleware). | Bentuk Praktik Laboratorium. Metode: Case-Based Learning — Menganalisis skenario keamanan pada aplikasi nyata dan mengimplementasikannya. Tugas: Membangun sistem gerbang masuk (Gatekeeping). Mahasiswa wajib membuat halaman Login yang jika berhasil akan menyimpan token ke Cookies dan mengaktifkan Middleware untuk memproteksi folder halaman /admin. | Konsep Dasar Autentikasi: Memahami alur kerja Token-based Authentication (seperti JWT) antara client dan server. State Management untuk Auth: Menyimpan status login dan token pengguna secara global menggunakan Pinia Store. Integrasi Login & Register: Membangun formulir untuk mengirimkan kredensial ke API dan menangani response berupa token atau pesan kesalahan. Persisted Auth: Teknik menyimpan token di Cookies agar status login tidak hilang saat browser ditutup atau di-refresh (menggunakan useCookie di Nuxt). Route Middleware: Membuat logika proteksi halaman di direktori middleware/ untuk mengecek status login sebelum pengguna diizinkan mengakses rute tertentu (seperti halaman Dashboard atau Profile). | 5.00% | |
| 13 |
Sub-CPMK4.1
(WORKSHOP WEB)
Mahasiswa mampu mengintegrasikan seluruh fitur (Frontend + Backend) ke dalam satu solusi permasalahan nyata. |
• Fitur Terintegrasi • Solutif • Data Flow Consistency | Kriteria: Menggunakan Skor Bentuk: Project Progress Review (Asistensi berkala untuk memastikan progres pengembangan sesuai target). | Bentuk Studio Praktikum / Kerja Mandiri. Metode Project-Based Learning (PjBL) — Mahasiswa bekerja secara tim atau mandiri untuk menyelesaikan Final Project. Tugas: Menyelesaikan tahap coding aplikasi Full-stack. Mahasiswa wajib memastikan aplikasi sudah memiliki minimal satu alur proses bisnis yang lengkap (misal: Daftar Akun -> Login -> Tambah Data -> Edit Data -> Logout). | Full-stack System Integration: Menggabungkan logika Frontend (Nuxt 3), State Management (Pinia), dan Backend (API/Database) menjadi satu alur kerja yang sinkron. Complex Data Relationship: Mengelola relasi data antar tabel/endpoint (misal: menampilkan data profil user di setiap postingan blog yang dibuat). Final UI/UX Polishing: Penerapan prinsip desain antarmuka yang konsisten dan responsif (nyaman dibuka di mobile maupun desktop). Environment Variables: Penggunaan file .env untuk memisahkan konfigurasi sensitif (seperti API URL atau Secret Keys) dari kode utama. Form Validation & User Feedback: Menambahkan validasi tingkat lanjut dan animasi transisi untuk meningkatkan pengalaman pengguna | 5.00% | |
| 14 |
Sub-CPMK4.2
(WORKSHOP WEB)
Mahasiswa mampu melakukan optimasi performa akhir dan Deployment aplikasi ke platform Cloud (Vercel/Netlify). |
• Accessibility • Stability • Communicative Skills | Bentuk: Proyek Akhir (Final Demo) — Presentasi langsung di depan dosen penguji dan rekan mahasiswa. | Kriteria: Menggunakan Skor Bentuk Seminar & Praktik Mandiri. Metode Mahasiswa melakukan live demo aplikasi yang telah dipublikasikan. Bentuk Seminar & Praktik Mandiri. Tugas: 1. Melakukan deploy aplikasi ke layanan cloud hosting. 2. Menyusun dokumen teknis singkat (README) yang berisi tautan aplikasi dan cara menjalankannya. 3. Mempresentasikan hasil karya akhir mencakup latar belakang masalah, fitur utama, dan demonstrasi penggunaan aplikasi. | Build Process: Memahami perbedaan antara mode development dan production melalui perintah npm run build. Deployment Strategies: Mengenal platform hosting modern yang mendukung Nuxt 3 (seperti Vercel, Netlify, atau VPS) dan konsep Zero-Config Deployment. Environment Configuration: Melakukan konfigurasi Environment Variables pada dashboard hosting agar aplikasi tetap terhubung ke database/API setelah dipublikasikan. Performance Monitoring: Dasar-dasar pengecekan performa aplikasi pasca-deploy (seperti Core Web Vitals). Technical Presentation: Teknik mendemonstrasikan fitur unggulan, menjelaskan arsitektur kode, dan menjawab pertanyaan teknis secara efektif. | 5.00% | |
| 15 |
Sub-CPMK4.3
(WORKSHOP WEB)
Mahasiswa mampu mempresentasikan hasil karya (Demo Produk) yang dibuat. |
• Kejelasan Alur • Penguasaan Materi • Kualitas Demo • Ketepatan Waktu | Kriteria: Menggunakan Skor Bentuk: Presentasi Akhir di depan kelas | Bentuk Presentasi Tugas | Teknik Presentasi Produk (Pitching): Cara menyajikan solusi teknis secara menarik, mulai dari latar belakang masalah hingga solusi yang ditawarkan. Live Demo Strategy: Menyusun skenario demonstrasi fitur yang mulus (happy path) serta cara menangani situasi jika terjadi kendala teknis saat demo. Visual Storytelling: Membuat slide presentasi atau dokumentasi visual yang menonjolkan arsitektur aplikasi (seperti skema Pinia store atau diagram alur data). Communication Skills: Penggunaan terminologi teknologi web (Nuxt, SSR, Reactivity, CRUD) yang tepat dalam menjelaskan cara kerja aplikasi kepada audiens. Handling Q&A: Teknik menjawab pertanyaan teknis maupun non-teknis dari penguji secara lugas dan berbasis data/kode. | 10.00% | |
| 16 |
Sub-CPMK4.1
(WORKSHOP WEB)
Mahasiswa mampu mengintegrasikan seluruh fitur (Frontend + Backend) ke dalam satu solusi permasalahan nyata. Sub-CPMK4.3 (WORKSHOP WEB) Mahasiswa mampu mempresentasikan hasil karya (Demo Produk) yang dibuat. Sub-CPMK4.2 (WORKSHOP WEB) Mahasiswa mampu melakukan optimasi performa akhir dan Deployment aplikasi ke platform Cloud (Vercel/Netlify). |
- | Evaluasi Akhir Semester: melakukan validasi penilaian akhir dan menentukan kelulusan mahasiswa Soal UAS berbentuk penugasan proyek akhir | - | - | 10.00% | |
| Total Bobot | 100% | ||||||
Catatan:
- Capaian Pembelajaran Lulusan PRODI (CPL-PRODI) adalah kemampuan yang dimiliki oleh setiap lulusan PRODI yang merupakan internalisasi dari sikap, penguasaan pengetahuan dan ketrampilan sesuai dengan jenjang prodinya yang diperoleh melalui proses pembelajaran.
- CPL yang dibebankan pada mata kuliah adalah beberapa capaian pembelajaran lulusan program studi (CPL-PRODI) yang digunakan untuk pembentukan/pengembangan sebuah mata kuliah yang terdiri dari aspek sikap, ketrampilan umum, ketrampilan khusus dan pengetahuan.
- CP Mata kuliah (CPMK) adalah kemampuan yang dijabarkan secara spesifik dari CPL yang dibebankan pada mata kuliah, dan bersifat spesifik terhadap bahan kajian atau materi pembelajaran mata kuliah tersebut.
- Sub-CPMK mata kuliah (Sub-CPMK) adalah kemampuan yang dijabarkan secara spesifik dari CPMK yang dapat diukur atau diamati dan merupakan kemampuan akhir yang direncanakan pada tiap tahap pembelajaran.
- Indikator penilaian kemampuan dalam proses maupun hasil belajar mahasiswa adalah pernyataan spesifik dan terukur yang mengidentifikasi kemampuan atau kinerja hasil belajar mahasiswa yang disertai bukti-bukti.
- Kriteria Penilaian adalah patokan yang digunakan sebagai ukuran atau tolok ukur ketercapaian pembelajaran dalam penilaian berdasarkan indikator-indikator yang telah ditetapkan.
- Bentuk pembelajaran: Kuliah, Responsi, Tutorial, Seminar atau yang setara, Praktikum, Praktik Lapangan, Penelitian, Pengabdian Kepada Masyarakat dan/atau bentuk pembelajaran lain yang setara.
- Metode Pembelajaran: Small Group Discussion, Role-Play & Simulation, Discovery Learning, Self-Directed Learning, Cooperative Learning, Collaborative Learning, Contextual Learning, Project Based Learning, Problem Based Learning, Case Based Learning dan metode lainnya yg setara.
- Materi Pembelajaran adalah rincian atau uraian dari bahan kajian yg dapat disajikan dalam bentuk beberapa pokok dan sub-pokok bahasan.
- Bobot penilaian adalah prosentasi penilaian terhadap setiap pencapaian sub-CPMK yang besarnya proposional dengan tingkat kesulitan pencapaian sub-CPMK tersebut, dan totalnya 100%.
- Untuk mata kuliah PjBL pertemuan 14 dan 15 dialokasikan untuk presentasi project.
RUBRIK PENILAIAN (MARKING SCORE)
CPMK1: Menguasai konsep dasar arsitektur komponen dan reactivity pada ekosistem Vue.js.
| Indikator | Sangat Kurang (<20) | Kurang (21-40) | Cukup (41-60) | Baik (61-80) | Sangat Baik (81-100) |
|---|---|---|---|---|---|
| Kesiapan Environment Ketepatan Inisialisas Running Project Pemahaman Struktur | Perangkat lunak (Node.js/VS Code) belum terinstal sama sekali. Tidak mampu menjalankan perintah scaffolding (Vite/Nuxi). Proyek tidak bisa dijalankan sama sekali (error terminal). Tidak mengenal fungsi file apa pun di dalam folder proyek. | Terinstal, namun versi tidak sesuai (bukan LTS) atau ekstensi pendukung (Volar) tidak ada. Berhasil inisialisasi tapi salah dalam memilih opsi konfigurasi (TypeScript/JSX/Linter) Proyek bisa build tapi gagal tampil di browser karena kesalahan dependensi. Hanya mengetahui fungsi file index.vue saja, bingung dengan isi folder pages | Terinstal dengan versi yang benar, namun lingkungan kerja masih mengalami kendala konfigurasi. Inisialisasi berhasil dengan bantuan penuh, namun folder proyek tidak terorganisir. Proyek berjalan di local server, namun sering terhenti atau memerlukan restart manual berkali-kali. Mampu mengidentifikasi folder pages, namun gagal menjelaskan hubungan antara main.js dan App.vue. | Environment siap digunakan dengan versi Node.js yang tepat dan ekstensi terpasang. Inisialisasi proyek dilakukan secara mandiri dengan pemilihan konfigurasi yang tepat sesuai instruksi. Proyek berjalan lancar di localhost dan fitur Hot Module Replacement (HMR) berfungsi. Mampu menjelaskan alur data dasar dari main.js menuju komponen root secara runtut. | Environment sangat siap, versi terbaru (LTS), semua ekstensi optimal, dan terminal terkonfigurasi dengan baik. Inisialisasi sangat cepat, tepat, dan mampu menjelaskan alasan pemilihan setiap opsi konfigurasi. Proyek berjalan sempurna, bebas dari warning di konsol, dan mahasiswa paham cara membaca log server. Penjelasan sangat komprehensif mengenai arsitektur proyek, fungsi entry point, hingga struktur folder public dan assets. |
| - | - | - | - | - | - |