silent-adopsi

byAnto

Buatkan saya aplikasi game edukasi dengan tema adopsi hewan virtual. Nama aplikasi yang saya maksud adalah MVP (My Virtual Pets). Terdiri dari dua panel yaitu guru/user dañ siswa sebagai pemain. Siswa login dengan nisn dan mengadopsi hewan peliharaan mulai dari kecil (telur/anakan) hingga dewasa. Dalam proses evolusi pet. Pemain harus memberikan keinginan pet. Dan keinginan pet harus dibeli pemain di petshop yang dikelola oleh guru/user. Pemain membeli item pet need dengan bintang. Bintang diberikan guru/user ketika mereka melakukan hal baik atau mendapatkan nilai sempurna. Pemain dikatakan menang ketika pet mereka berevolusi menjadi dewasa

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for silent-adopsi

1. Introduction

MVP (My Virtual Pets) adalah aplikasi game edukasi bertema adopsi hewan virtual untuk lingkungan sekolah di Indonesia. Produk ini menghubungkan dua peran manusia dalam satu pengalaman bermain-belajar: siswa sebagai pemain dan guru/user sebagai pengelola petshop.

Inti produk: siswa masuk menggunakan NISN, mengadopsi hewan peliharaan yang dimulai dari tahap kecil (telur/anakan), memenuhi keinginan pet (pet need) dengan membeli item pet need di petshop yang dikelola guru/user, dan membeli item tersebut menggunakan bintang. Bintang diberikan oleh guru/user ketika siswa melakukan hal baik atau mendapatkan nilai sempurna. Siswa dinyatakan menang ketika pet mereka berevolusi menjadi dewasa.

Audiens: siswa sekolah dasar (perkiraan usia 7–11 tahun) yang membutuhkan umpan balik progres yang jelas dan menyenangkan, serta guru/user yang membutuhkan panel pengelolaan yang tenang dan mudah dipindai.

Page 1 of 27

2. System Overview

Aplikasi terdiri dari dua panel: panel siswa sebagai pemain dan panel guru/user. Keduanya berjalan di atas satu aplikasi dengan identitas yang dimiliki aplikasi.

Aktor manusia (tertutup):

  • Siswa (Pemain) — masuk dengan NISN, mengadopsi pet, memenuhi keinginan pet, membeli item di petshop dengan bintang, dan mencapai kemenangan saat pet berevolusi menjadi dewasa.
  • Guru/User (Pengelola Petshop) — mengelola petshop agar item pet need tersedia, dan memberikan bintang kepada siswa atas hal baik atau nilai sempurna.

Perilaku yang diterima (ringkas): adopsi pet dari telur/anakan, proses evolusi pet, pemenuhan keinginan pet, pembelian item pet need di petshop dengan bintang, pemberian bintang oleh guru/user, dan kemenangan saat pet menjadi dewasa.

Kepemilikan: seluruh interaksi manusia dimiliki oleh aplikasi melalui halaman kustom. Identitas dimiliki aplikasi (berbasis NISN untuk siswa; akses terverifikasi berperan pengelola untuk guru/user). State pet, kebutuhan pet, item pet need, saldo bintang, pemberian bintang, evolusi, dan status kemenangan disimpan sebagai state aplikasi yang berkelanjutan.

Pengecualian sempit: tidak ada kapabilitas di luar alur adopsi–pemenuhan kebutuhan–pembelian dengan bintang–pemberian bintang–evolusi–kemenangan. Tidak ada mode multipemain kompetitif, tidak ada pembelian dengan uang nyata, dan tidak ada mekanisme kalah/hukuman yang dinyatakan sumber.

Page 2 of 27

2a. Product Interpretation and Delivery Boundary

MVP (My Virtual Pets) adalah game edukasi dua panel. Panel siswa adalah panggung pet satu kolom: potret pet di tengah, gelembung kebutuhan di sekitarnya, petshop dan progres di bawahnya. Panel guru/user adalah dasbor dua kolom: rel navigasi (siswa, petshop, pemberian bintang) di kiri, kanvas tugas aktif di kanan.

Batas akses. Halaman Landing dan Login dapat diakses tanpa identitas. Siswa masuk dengan NISN. Guru/user masuk melalui akses terverifikasi dengan peran pengelola. Setelah identitas terbentuk, siswa dapat melanjutkan permainan dan guru/user dapat mengelola petshop serta memberikan bintang. Halaman kerja siswa (Adopt Pet, Pet Needs, Pet Shop, Feed Pet, Pet Progress, Victory) dan halaman kerja guru/user (Shop Management, Award Stars) hanya tersedia setelah identitas dan peran yang sesuai terbentuk.

Batas saat ini vs masa depan. Seluruh perilaku yang dijelaskan di dokumen ini adalah current. Tidak ada horizon masa depan yang dinyatakan sumber; tidak ada halaman atau kapabilitas masa depan yang ditambahkan.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source pada sumber, sehingga tidak ada Source Content Inventory yang disertakan.

2c. Page Content and Component Coverage

Page 3 of 27

Landing

  • Informasi/state: penjelasan anonim bahwa MVP adalah game edukasi adopsi hewan virtual untuk siswa dan guru/user; panggung pet dengan sprite pixel-art dan gelembung kebutuhan sebagai ilustrasi; wordmark "MVP" dan subjudul "My Virtual Pets".
  • Aksi utama: tombol pil tangerine "Mulai Adopsi" menuju Login.
  • Aksi pendukung: tautan ke Login untuk guru/user.
  • Entitas domain: tidak ada state pemain; hanya konten pengenalan.
  • Tanggung jawab komponen: hero panggung penuh dengan aturan gelap horizontal pada 60% tinggi sebagai "platform"; sprite pet 192px di atas aturan; tiga gelembung kebutuhan 48px (makanan, air, mainan) dalam busur longgar; blok tipe di bawah aturan dengan wordmark dan CTA.
  • State: loading (kerangka kartu), empty (tidak berlaku), success (hero tampil), error (fallback teks tanpa sprite), recovery (muat ulang aset).

Login

  • Informasi/state: dua jalur masuk — siswa dengan NISN, guru/user dengan akses terverifikasi peran pengelola.
  • Aksi utama: siswa memasukkan NISN dan masuk; guru/user masuk dengan kredensial terverifikasi.
  • Aksi pendukung: kembali ke Landing.
  • Entitas domain: identitas siswa (NISN), identitas guru/user (peran pengelola).
  • Tanggung jawab komponen: formulir NISN dengan validasi; formulir guru/user; pesan kesalahan inline; pengalihan ke panel yang sesuai setelah berhasil.
  • State: loading (verifikasi), empty (formulir kosong), success (dialihkan ke panel sesuai peran), error (NISN tidak dikenal / kredensial salah), recovery (coba lagi tanpa kehilangan input).
Page 4 of 27

Adopt Pet

  • Informasi/state: siswa yang belum memiliki pet melihat pilihan hewan pada tahap awal (telur/anakan); siswa yang sudah memiliki pet melihat pet aktifnya.
  • Aksi utama: memilih dan mengadopsi hewan peliharaan.
  • Aksi pendukung: melihat detail tahap awal pet.
  • Entitas domain: pet (tahap: telur/anakan), pemilik (siswa).
  • Tanggung jawab komponen: galeri sprite pixel-art tahap awal; tombol adopsi; konfirmasi kepemilikan.
  • State: loading (memuat pilihan), empty (belum ada pet — tampilkan pilihan), success (pet dimiliki, lanjut ke Pet Needs), error (adopsi gagal), recovery (coba lagi).

Pet Needs

  • Informasi/state: daftar keinginan pet (pet need) yang harus dipenuhi siswa; setiap kebutuhan belum terpenuhi tampil sebagai ikon pixel di dalam gelembung chunky yang diposisikan mengelilingi sprite pet.
  • Aksi utama: memilih kebutuhan untuk dipenuhi (menuju Pet Shop bila item belum dimiliki, atau Feed Pet bila sudah dimiliki).
  • Aksi pendukung: melihat status kebutuhan terpenuhi/belum.
  • Entitas domain: pet need (makanan, air, mainan, mandi, tidur), status pemenuhan.
  • Tanggung jawab komponen: orbit gelembung kebutuhan; animasi pop dua frame saat kebutuhan terpenuhi dengan ledakan bintang kecil.
  • State: loading (memuat kebutuhan), empty (semua kebutuhan terpenuhi), success (kebutuhan terpenuhi), error (gagal memuat), recovery (muat ulang).
Page 5 of 27

Pet Shop

  • Informasi/state: daftar item pet need yang tersedia dari petshop yang dikelola guru/user; saldo bintang siswa ditampilkan sebagai deretan token bintang chunky beroutline gelap 2px, tabular dan mudah dihitung.
  • Aksi utama: membeli item pet need menggunakan bintang.
  • Aksi pendukung: melihat harga item dalam bintang; melihat saldo setelah pembelian.
  • Entitas domain: item pet need, harga (bintang), saldo bintang, kepemilikan item.
  • Tanggung jawab komponen: kartu item dengan border 3px dan bayangan offset 4px; tombol beli pil; penghitung bintang.
  • State: loading (memuat item), empty (petshop belum memiliki item), success (pembelian berhasil, saldo berkurang, item masuk inventaris), error (saldo tidak cukup / item habis), recovery (kembali ke daftar, saldo tidak berubah).

Feed Pet

  • Informasi/state: item pet need yang dimiliki siswa; pet aktif dan kebutuhannya.
  • Aksi utama: memberikan item yang dibeli kepada pet untuk memenuhi keinginannya.
  • Aksi pendukung: memilih item dari inventaris; melihat kebutuhan yang terpenuhi.
  • Entitas domain: inventaris item, pet need, status pemenuhan.
  • Tanggung jawab komponen: pemilih item; animasi pop gelembung dua frame; umpan balik pemenuhan.
  • State: loading (memuat inventaris), empty (tidak ada item dimiliki — arahkan ke Pet Shop), success (kebutuhan terpenuhi), error (item tidak valid), recovery (kembali ke pemilih).
Page 6 of 27

Pet Progress

  • Informasi/state: perkembangan dan evolusi pet dari telur/anakan hingga dewasa; pet ditampilkan pada tiga tahap kehidupan sebagai sprite pixel pada satu rel horizontal, tahap saat ini digarisbawahi tangerine, tahap berikutnya sebagai siluet bergaris putus-putus.
  • Aksi utama: melihat progres evolusi.
  • Aksi pendukung: kembali ke Pet Needs untuk melanjutkan pemenuhan.
  • Entitas domain: tahap evolusi, progres (bar blok diskret 12 segmen).
  • Tanggung jawab komponen: rel sprite-morph; bar progres tersegmentasi dengan blok saat ini berdenyut tangerine.
  • State: loading (memuat progres), empty (belum ada pet), success (progres tampil), error (gagal memuat), recovery (muat ulang).

Victory

  • Informasi/state: status menang ketika pet siswa telah berevolusi menjadi dewasa; perayaan dengan konfeti pixel.
  • Aksi utama: melihat pencapaian kemenangan.
  • Aksi pendukung: melihat pet dewasa; kembali ke Pet Progress.
  • Entitas domain: status kemenangan, pet tahap dewasa.
  • Tanggung jawab komponen: kartu kemenangan chunky; sprite pet dewasa; konfeti pixel dekoratif (hanya di halaman ini).
  • State: loading (memuat status), empty (belum menang — arahkan ke Pet Progress), success (kemenangan tampil), error (gagal memuat), recovery (muat ulang).
Page 7 of 27

Shop Management

  • Informasi/state: daftar item pet need yang dikelola guru/user agar tersedia bagi pemain; status ketersediaan item.
  • Aksi utama: menambah, mengubah, dan mengatur ketersediaan item pet need.
  • Aksi pendukung: melihat daftar item aktif.
  • Entitas domain: item pet need, harga (bintang), ketersediaan.
  • Tanggung jawab komponen: tabel/kartu item; formulir item; kontrol ketersediaan.
  • State: loading (memuat item), empty (belum ada item — dorong penambahan), success (perubahan tersimpan), error (gagal menyimpan), recovery (coba lagi tanpa kehilangan input).

Award Stars

  • Informasi/state: daftar siswa penerima; saldo bintang siswa; alasan pemberian (hal baik atau nilai sempurna).
  • Aksi utama: memberikan bintang kepada siswa.
  • Aksi pendukung: memilih siswa; memilih alasan; melihat saldo setelah pemberian.
  • Entitas domain: siswa, saldo bintang, catatan pemberian bintang.
  • Tanggung jawab komponen: token bintang sebagai stempel yang dapat ditekan; pemilih siswa; pemilih alasan; penghitung bintang yang bertambah secara diskret.
  • State: loading (memuat siswa), empty (belum ada siswa), success (bintang bertambah pada saldo siswa), error (gagal memberikan), recovery (coba lagi).
Page 8 of 27

3. Functional Requirements

FR-01 — Aplikasi game edukasi bertema adopsi hewan virtual bernama MVP (My Virtual Pets). Provenance: explicit. As a Siswa (Pemain) and Guru/User (Pengelola Petshop), I should use an educational game application themed around virtual pet adoption named MVP (My Virtual Pets).

  • Trigger/input: membuka aplikasi.
  • Observable result: aplikasi menampilkan identitas MVP (My Virtual Pets) dan alur adopsi hewan virtual.
  • Access state: publik pada Landing.
  • Failure/recovery: tidak berlaku.
  • Continuation: menuju Login.

FR-02 — Aplikasi terdiri dari dua panel: guru/user dan siswa sebagai pemain. Provenance: explicit. As a Siswa (Pemain) and Guru/User (Pengelola Petshop), I should work within two distinct panels — one for the student player and one for the teacher/user.

  • Trigger/input: masuk dengan identitas yang sesuai.
  • Observable result: siswa melihat panel pemain; guru/user melihat panel pengelola.
  • Access state: setelah identitas dan peran terbentuk.
  • Failure/recovery: peran tidak dikenali → kembali ke Login.
  • Continuation: menjalankan tugas panel masing-masing.
Page 9 of 27

FR-03 — Siswa login menggunakan NISN. Provenance: explicit. As a Siswa (Pemain), I should log in using my NISN.

  • Trigger/input: memasukkan NISN pada Login.
  • Observable result: sesi siswa terbentuk dan panel pemain terbuka.
  • Access state: Login dapat diakses anonim; panel pemain hanya setelah NISN valid.
  • Failure/recovery: NISN tidak dikenal → pesan kesalahan inline, input dipertahankan.
  • Continuation: menuju Adopt Pet.

FR-04 — Siswa mengadopsi hewan peliharaan yang dimulai dari tahap kecil (telur/anakan). Provenance: explicit. As a Siswa (Pemain), I should adopt a pet that starts at a small stage (egg/hatchling).

  • Trigger/input: memilih hewan pada Adopt Pet.
  • Observable result: pet dimiliki siswa pada tahap telur/anakan.
  • Access state: panel pemain.
  • Failure/recovery: adopsi gagal → coba lagi.
  • Continuation: menuju Pet Needs.
Page 10 of 27

FR-05 — Terdapat proses evolusi pet dari tahap kecil (telur/anakan) menuju dewasa. Provenance: explicit. As a Siswa (Pemain), I should see my pet evolve from the small stage (egg/hatchling) toward adulthood.

  • Trigger/input: pemenuhan keinginan pet yang berkelanjutan.
  • Observable result: tahap evolusi pet berubah dan terlihat pada Pet Progress.
  • Access state: panel pemain.
  • Failure/recovery: progres gagal dimuat → muat ulang.
  • Continuation: melanjutkan pemenuhan kebutuhan hingga dewasa.

FR-06 — Pemain harus memberikan keinginan pet (pet need). Provenance: explicit. As a Siswa (Pemain), I should fulfill my pet's needs.

  • Trigger/input: melihat daftar keinginan pet pada Pet Needs.
  • Observable result: kebutuhan yang dipenuhi berubah status menjadi terpenuhi.
  • Access state: panel pemain.
  • Failure/recovery: item tidak valid → kembali ke pemilih.
  • Continuation: kembali ke Pet Needs untuk kebutuhan berikutnya.
Page 11 of 27

FR-07 — Item pet need harus dibeli pemain di petshop yang dikelola oleh guru/user. Provenance: explicit. As a Siswa (Pemain), I should obtain pet need items by buying them at the pet shop managed by the teacher/user.

  • Trigger/input: memilih item pada Pet Shop.
  • Observable result: item masuk inventaris siswa.
  • Access state: panel pemain; ketersediaan item ditentukan guru/user.
  • Failure/recovery: item habis → item tidak dapat dibeli.
  • Continuation: menuju Feed Pet.

FR-08 — Pemain membeli item pet need menggunakan bintang. Provenance: explicit. As a Siswa (Pemain), I should buy pet need items using stars.

  • Trigger/input: menekan beli pada item dengan saldo bintang cukup.
  • Observable result: saldo bintang berkurang dan item dimiliki.
  • Access state: panel pemain.
  • Failure/recovery: saldo tidak cukup → pembelian ditolak, saldo tidak berubah.
  • Continuation: kembali ke Pet Needs atau Feed Pet.

FR-09 — Bintang diberikan oleh guru/user ketika siswa melakukan hal baik atau mendapatkan nilai sempurna. Provenance: explicit. As a Guru/User (Pengelola Petshop), I should award stars to a student when the student does something good or achieves a perfect score.

  • Trigger/input: memilih siswa dan alasan pada Award Stars.
  • Observable result: saldo bintang siswa bertambah dan tercatat.
  • Access state: panel guru/user.
  • Failure/recovery: pemberian gagal → coba lagi.
  • Continuation: siswa menggunakan bintang di Pet Shop.
Page 12 of 27

FR-10 — Pemain dinyatakan menang ketika pet mereka berevolusi menjadi dewasa. Provenance: explicit. As a Siswa (Pemain), I should be declared the winner when my pet has evolved into adulthood.

  • Trigger/input: pet mencapai tahap dewasa.
  • Observable result: status menang tampil pada Victory.
  • Access state: panel pemain.
  • Failure/recovery: status gagal dimuat → muat ulang.
  • Continuation: melihat pet dewasa.

FR-11 — Siswa memerlukan identitas aplikasi berbasis NISN untuk masuk dan melanjutkan permainan. Provenance: required_inference. As a Siswa (Pemain), I should have an application identity based on my NISN so I can enter and continue my game.

  • Trigger/input: NISN pada Login.
  • Observable result: state pet, saldo bintang, dan progres terikat pada identitas siswa dan dapat dilanjutkan.
  • Access state: Login anonim; state terlindungi setelah identitas terbentuk.
  • Failure/recovery: NISN tidak valid → pesan kesalahan.
  • Continuation: melanjutkan permainan dari state tersimpan.
Page 13 of 27

FR-12 — Guru/user memerlukan akses terverifikasi dengan peran pengelola sebelum mengelola petshop atau memberikan bintang. Provenance: required_inference. As a Guru/User (Pengelola Petshop), I should have verified access with a manager role before managing the pet shop or awarding stars.

  • Trigger/input: kredensial guru/user pada Login.
  • Observable result: panel guru/user terbuka dengan kemampuan mengelola petshop dan memberikan bintang.
  • Access state: Shop Management dan Award Stars hanya untuk guru/user terverifikasi.
  • Failure/recovery: kredensial salah → pesan kesalahan inline.
  • Continuation: mengelola petshop atau memberikan bintang.

FR-13 — Data pet, kebutuhan pet, item pet need, saldo bintang, pemberian bintang, evolusi, dan status kemenangan harus disimpan sebagai state aplikasi yang berkelanjutan. Provenance: required_inference. As a Siswa (Pemain) and Guru/User (Pengelola Petshop), I should have pet data, pet needs, pet need items, star balances, star awards, evolution, and victory status persisted as durable application state.

  • Trigger/input: setiap perubahan state (adopsi, pembelian, pemberian item, pemberian bintang, evolusi).
  • Observable result: state tetap konsisten saat pengguna kembali.
  • Access state: state terikat pada identitas yang sesuai.
  • Failure/recovery: kegagalan penyimpanan → perubahan tidak diterapkan dan dapat diulang.
  • Continuation: melanjutkan dari state tersimpan.

4. User Personas

Page 14 of 27

Siswa (Pemain)

Konteks produk. Siswa adalah pemain utama MVP (My Virtual Pets). Ia masuk dengan NISN dan memulai perjalanan dari seekor hewan pada tahap kecil (telur/anakan) hingga dewasa. Pekerjaannya berpusat pada satu panggung pet: memantau keinginan pet, mencari item yang tepat, dan merawat pet agar berevolusi.

Tujuan utama. Membawa pet dari telur/anakan hingga dewasa dan dinyatakan menang.

Tanggung jawab yang diterima. Mengadopsi hewan peliharaan; memenuhi keinginan pet; membeli item pet need di petshop menggunakan bintang; memberikan item kepada pet; memantau evolusi; mencapai kemenangan.

Input dan keputusan. Memasukkan NISN; memilih hewan untuk diadopsi; memilih kebutuhan pet yang akan dipenuhi; memutuskan pembelian item berdasarkan saldo bintang; memilih item untuk diberikan kepada pet.

Interaksi dengan peserta lain. Siswa bergantung pada Guru/User (Pengelola Petshop) untuk dua hal: ketersediaan item pet need di petshop, dan bintang yang diberikan atas hal baik atau nilai sempurna. Tanpa bintang dari guru/user, siswa tidak dapat membeli item; tanpa item di petshop, siswa tidak dapat memenuhi keinginan pet.

Keberhasilan yang terlihat. Pet berevolusi menjadi dewasa dan status menang tampil pada Victory.

Yang membedakan peran ini. Siswa adalah pihak yang bertindak dan mengonsumsi: ia membelanjakan bintang dan memenuhi kebutuhan. Ia tidak menetapkan harga, tidak menyediakan item, dan tidak memberi bintang.

Page 15 of 27

Guru/User (Pengelola Petshop)

Konteks produk. Guru/user adalah pengelola di balik layar permainan. Ia mengelola petshop tempat pemain membeli item pet need, dan ia memberikan bintang kepada siswa. Pekerjaannya berpusat pada dasbor dua kolom: rel navigasi di kiri, kanvas tugas aktif di kanan.

Tujuan utama. Memastikan item pet need tersedia untuk dibeli pemain, dan memberikan bintang yang mendorong kemajuan evolusi pet siswa.

Tanggung jawab yang diterima. Mengelola petshop agar item pet need tersedia bagi pemain; memberikan bintang kepada siswa ketika siswa melakukan hal baik atau mendapatkan nilai sempurna.

Input dan keputusan. Menambah dan mengubah item pet need beserta harganya; mengatur ketersediaan item; memilih siswa penerima bintang; memilih alasan pemberian (hal baik atau nilai sempurna).

Interaksi dengan peserta lain. Guru/user memasok dua hal yang dibutuhkan Siswa (Pemain): item di petshop dan bintang. Keputusan guru/user menentukan apakah siswa dapat membeli dan memenuhi keinginan pet.

Keberhasilan yang terlihat. Item tersedia dan dapat dibeli pemain; saldo bintang siswa bertambah setelah pemberian.

Yang membedakan peran ini. Guru/user adalah pihak yang menyediakan dan memberi: ia menetapkan item dan menghadiahkan bintang. Ia tidak mengadopsi pet, tidak membelanjakan bintang, dan tidak berevolusi.

5. Core User Flows

Page 16 of 27

Alur 1 — Siswa masuk dengan NISN dan mengadopsi pet

  1. Siswa membuka Landing dan membaca pengenalan MVP (My Virtual Pets).
  2. Siswa menekan tombol "Mulai Adopsi" dan tiba di Login.
  3. Siswa memasukkan NISN dan masuk. Jika NISN tidak dikenal, pesan kesalahan tampil inline dan input dipertahankan.
  4. Siswa tiba di Adopt Pet dan melihat pilihan hewan pada tahap awal (telur/anakan).
  5. Siswa memilih hewan dan mengadopsi. Hasil yang terlihat: pet dimiliki pada tahap telur/anakan.
  6. Lanjutan: siswa menuju Pet Needs.

Alur 2 — Siswa memenuhi keinginan pet

  1. Siswa berada di Pet Needs dan melihat setiap keinginan pet yang belum terpenuhi sebagai ikon pixel di dalam gelembung chunky yang mengelilingi sprite pet.
  2. Siswa memilih satu kebutuhan.
  3. Jika item untuk kebutuhan tersebut belum dimiliki, siswa menuju Pet Shop (Alur 3). Jika sudah dimiliki, siswa menuju Feed Pet.
  4. Di Feed Pet, siswa memilih item dari inventaris dan memberikannya kepada pet.
  5. Hasil yang terlihat: gelembung kebutuhan terkait meletus dalam dua frame dengan ledakan bintang kecil, dan status kebutuhan berubah menjadi terpenuhi.
  6. Kegagalan: jika item tidak valid, siswa kembali ke pemilih item tanpa kehilangan inventaris.
  7. Lanjutan: siswa kembali ke Pet Needs untuk kebutuhan berikutnya.
Page 17 of 27

Alur 3 — Siswa membeli item pet need dengan bintang

  1. Siswa berada di Pet Shop dan melihat daftar item pet need yang tersedia dari petshop yang dikelola guru/user, beserta saldo bintang yang ditampilkan sebagai deretan token bintang chunky.
  2. Siswa memilih item dan menekan beli.
  3. Hasil yang terlihat: saldo bintang berkurang dan item masuk inventaris siswa.
  4. Kegagalan: jika saldo bintang tidak cukup, pembelian ditolak dan saldo tidak berubah; siswa dapat menunggu bintang dari guru/user (Alur 5).
  5. Lanjutan: siswa menuju Feed Pet (Alur 2) atau kembali ke Pet Needs.

Alur 4 — Siswa memantau evolusi dan mencapai kemenangan

  1. Siswa membuka Pet Progress dan melihat pet pada tiga tahap kehidupan sebagai sprite pixel pada satu rel horizontal; tahap saat ini digarisbawahi tangerine, tahap berikutnya tampil sebagai siluet bergaris putus-putus.
  2. Siswa melihat bar progres tersegmentasi 12 blok yang terisi satu per satu, dengan blok saat ini berdenyut tangerine.
  3. Siswa melanjutkan pemenuhan keinginan pet (Alur 2) hingga pet berevolusi.
  4. Hasil yang terlihat: ketika pet mencapai tahap dewasa, siswa dinyatakan menang dan status menang tampil pada Victory, dengan perayaan konfeti pixel.
  5. Lanjutan: siswa melihat pet dewasanya dan dapat kembali ke Pet Progress.
Page 18 of 27

Alur 5 — Guru/user masuk dan memberikan bintang

  1. Guru/user membuka Landing dan menuju Login.
  2. Guru/user masuk dengan kredensial terverifikasi peran pengelola. Jika kredensial salah, pesan kesalahan tampil inline.
  3. Guru/user tiba di panel pengelola dan membuka Award Stars.
  4. Guru/user memilih siswa penerima dan memilih alasan pemberian: hal baik atau nilai sempurna.
  5. Guru/user menekan token bintang sebagai stempel. Hasil yang terlihat: saldo bintang siswa bertambah secara diskret dan tercatat.
  6. Kegagalan: jika pemberian gagal, guru/user mencoba lagi tanpa kehilangan pilihan.
  7. Lanjutan: siswa kini dapat menggunakan bintang tersebut di Pet Shop (Alur 3).

Alur 6 — Guru/user mengelola petshop

  1. Guru/user masuk (Alur 5) dan membuka Shop Management.
  2. Guru/user melihat daftar item pet need yang saat ini tersedia bagi pemain.
  3. Guru/user menambah item baru atau mengubah item yang ada, termasuk harganya dalam bintang, dan mengatur ketersediaannya.
  4. Hasil yang terlihat: perubahan tersimpan dan item tampil sebagai tersedia bagi pemain.
  5. Kegagalan: jika penyimpanan gagal, perubahan tidak diterapkan dan input dipertahankan untuk dicoba lagi.
  6. Lanjutan: siswa dapat membeli item tersebut di Pet Shop (Alur 3).
Page 19 of 27

6. Visuals Colors and Theme

Muse: Susan Kare. Headline: Charming clarity — pixel-perfect pet companions for the classroom.

Bahasa visual: ikon pixel yang kecil namun berkarakter, grid yang terasa, kartu beroutline tebal, dan palet kecil yang tajam di atas latar terang. Ini adalah tata bahasa visual game edukasi yang ramah — terbaca sebagai "game" bagi anak-anak, namun tetap tenang dan mudah dipindai bagi guru.

Palet (light mode):

PeranHex
Background#FDF6E3
Surface#FFFFFF
Text#1A1A1A
Primary#2D6A4F
Accent#F4A261
Muted#8A8A8A
Ikon pendukung — sky blue#7FB3D5
Ikon pendukung — petal pink#E8A0B0
Ikon pendukung — lemon#F7E06E

Primary hijau hutan (#2D6A4F) untuk header, state aktif, dan aksen bintang/pertumbuhan. Accent tangerine (#F4A261) untuk bintang, CTA, dan momen perayaan (evolusi, kemenangan). Muted (#8A8A8A) untuk metadata, label, dan state nonaktif. Set pendukung hanya diizinkan pada level ikon. Tanpa gradien, tanpa primary biru-indigo, tanpa teks putih di atas biru.

Page 20 of 27

Tipografi:

  • Heading: Press Start 2P — digunakan secara hemat untuk wordmark "MVP", eyebrow seksi, jumlah bintang, dan momen kemenangan; semua kapital, tracking rapat, pixel-crisp, tidak pernah untuk teks panjang.
  • Body: Nunito — bobot 400/600/700, line-height 1.6, terminal membulat yang selaras dengan bahasa ikon.
  • Skala: modular 1.333 — display 48/40/32/24/20/16/14. Display di-clamp: 32px mobile hingga 48px desktop untuk wordmark; 24px mobile hingga 32px desktop untuk header seksi; body 16px dengan line-height 1.6.

Bahasa bentuk:

  • Kartu beroutline tebal: border solid 3px #1A1A1A, radius 12px — seperti kotak dialog Macintosh klasik.
  • Tombol pil: border 2px dengan bayangan offset 4px (tanpa blur) untuk kesan taktil dan dapat ditekan.
  • Icon tile: persegi dengan radius 8px, masing-masing berisi satu ikon pixel 32px atau 48px.
  • Token bintang: bentuk bintang lima sudut chunky dengan outline gelap 2px.
  • Progress bar: tersegmentasi menjadi blok pixel diskret, bukan isian halus — evolusi terbaca sebagai deretan blok yang terisi.

Layout: grid 12 kolom di desktop, 4 kolom di mobile, gutter 24px, margin halaman 32px (16px di mobile). Panel siswa adalah panggung pet satu kolom: potret pet di tengah, gelembung kebutuhan memancar di sekitarnya, petshop dan progres di bawah. Panel guru/user adalah dasbor dua kolom: rel kiri untuk navigasi (Siswa, Petshop, Award Stars), kanvas kanan untuk tugas aktif. Setiap seksi adalah kartu chunky, tidak pernah panel tanpa border. Angka dan jumlah bintang bersifat tabular dan diset dalam Nunito 700.

Page 21 of 27

Imagery: sprite pixel-art pet pada tiga tahap kehidupan (telur, anakan, dewasa) dirender pada 96px dan 192px, masing-masing dengan outline gelap tebal. Ikon pixel untuk kebutuhan pet (mangkuk makanan, tetes air, bola mainan, mandi, bulan tidur) digambar pada grid 16×16 atau 32×32. Panel guru/user menggunakan piktogram sederhana untuk siswa, bintang, dan item toko. Tanpa fotografi, tanpa render 3D, tanpa blob gradien. Konfeti pixel dekoratif hanya muncul di layar Victory.

7. Signature Design Concept

Panggung Pet Berplatform — hero Landing adalah panggung krem penuh (#FDF6E3) dengan aturan gelap 3px melintang horizontal pada 60% tinggi, seperti sebuah platform.

  • Di atas aturan: satu sprite pixel-art pet 192px (kucing atau anjing dewasa) duduk di tengah, dengan tiga gelembung kebutuhan 48px (makanan, air, mainan) melayang dalam busur longgar ke kiri, kanan, dan atasnya — masing-masing gelembung adalah kartu putih dengan border gelap 3px dan bayangan offset 4px.
  • Di bawah aturan: wordmark "MVP" diset dalam Press Start 2P pada clamp(32px, 6vw, 48px), dengan "My Virtual Pets" dalam Nunito 600 20px di bawahnya, dan satu tombol pil tangerine "Mulai Adopsi" dengan bayangan offset 4px dipasang di kiri.
  • Komposisi asimetris: panggung pet menempati 60% kanan viewport, blok tipe menempati 40% kiri pada desktop; pada mobile panggung pet bertumpuk di atas blok tipe, keduanya sepenuhnya di dalam viewport pada 375px.

Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima — tidak menambah perilaku, halaman, atau tujuan baru.

Page 22 of 27

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

  • Focal subject: sprite pixel-art pet 192px di atas aturan platform, dikelilingi tiga gelembung kebutuhan 48px.
  • Input → transformation → outcome thesis: saat pengunjung memuat Landing, gelembung kebutuhan muncul satu per satu dengan langkah dua frame (tanpa easing), lalu diam — menggambarkan inti permainan (merawat pet dengan memenuhi kebutuhannya) tanpa mengklaim perilaku yang tidak diterima.
  • Motion vocabulary: langkah frame-by-frame; gelembung kebutuhan muncul dengan langkah dua frame; hover mengangkat kartu 2px dengan bayangan offset tumbuh 2px — tekan fisik, bukan float. Tanpa parallax, tanpa gradient drift, tanpa bounce easing.
  • Composed first frame: panggung krem dengan aturan gelap pada 60% tinggi, sprite pet duduk di tengah di atas aturan, tiga gelembung kebutuhan dalam busur longgar, wordmark "MVP" dan tombol "Mulai Adopsi" di bawah aturan pada sisi kiri.
  • Reduced-motion state: semua reveal menjadi instan dan morf evolusi digantikan oleh kartu before/after statis.
Page 23 of 27

9. Non-Functional Requirements

NFR-01 — Identitas dan kontinuitas sesi. Siswa masuk dengan NISN; guru/user masuk dengan akses terverifikasi peran pengelola. State terlindungi hanya tersedia setelah identitas terbentuk. Provenance: explicit (NISN) + required_inference (kontinuitas). Rasional: state pet, saldo bintang, dan progres harus terikat pada peserta yang benar agar permainan dapat dilanjutkan.

NFR-02 — Persistensi state. Data pet, kebutuhan pet, item pet need, saldo bintang, pemberian bintang, evolusi, dan status kemenangan disimpan sebagai state aplikasi yang berkelanjutan. Provenance: required_inference. Rasional: journey yang diterima mensyaratkan progres yang bertahan antar sesi.

NFR-03 — Legibilitas teks dan kontrol. Headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskala (misalnya font-size: clamp(...)) agar muat; tidak ada elemen lain yang menutupi bagian mana pun darinya. Provenance: creative direction (hard).

NFR-04 — Aksesibilitas gerak. Dengan prefers-reduced-motion, semua reveal menjadi instan dan morf evolusi digantikan oleh kartu before/after statis. Provenance: creative direction (hard).

NFR-05 — Batas visual. Tanpa gradien, tanpa primary biru-indigo, tanpa teks putih di atas biru; tanpa fotografi, render 3D, atau ilustrasi pet realistis; konfeti dekoratif hanya di layar Victory. Provenance: creative direction (hard).

NFR-06 — Kinerja aset pixel-art. Sprite dan ikon pixel-art dirender tajam (image-rendering pixel-crisp) pada ukuran 96px/192px dan grid 16×16/32×32. Provenance: creative direction.

Page 24 of 27

10. Tech Stack

  • Frontend: React — antarmuka dua panel (siswa dan guru/user) dengan halaman Landing, Login, Adopt Pet, Pet Needs, Pet Shop, Feed Pet, Pet Progress, Victory, Shop Management, Award Stars.
  • Backend: Python/FastAPI — melayani API untuk identitas NISN, adopsi pet, kebutuhan pet, item pet need, pembelian dengan bintang, pemberian bintang, evolusi, dan status kemenangan.
  • Storage: basis data persisten untuk state aplikasi yang berkelanjutan (pet, kebutuhan pet, item, saldo bintang, pemberian bintang, evolusi, status kemenangan).
  • Deployment: Docker/docker-compose untuk menjalankan frontend dan backend sebagai layanan yang dapat dijalankan.

Catatan: pilihan teknologi di atas adalah default yang wajar karena sumber tidak menyatakan preferensi teknologi secara eksplisit.

Page 25 of 27

11. Assumptions and Constraints

Constraints (eksplisit dari sumber):

  • Aplikasi terdiri dari dua panel: guru/user dan siswa sebagai pemain.
  • Siswa login dengan NISN.
  • Item pet need hanya dapat diperoleh pemain dengan membeli di petshop yang dikelola oleh guru/user.
  • Pembelian item pet need oleh pemain menggunakan bintang.
  • Bintang diberikan oleh guru/user ketika siswa melakukan hal baik atau mendapatkan nilai sempurna.
  • Kemenangan pemain ditentukan ketika pet mereka berevolusi menjadi dewasa.

Assumptions (sempit dan berlabel):

  • [Default — not specified by user] Teknologi React + Python/FastAPI + storage persisten + Docker/docker-compose dipilih karena sumber tidak menyatakan preferensi teknologi.
  • [Default — not specified by user] Tahap antara telur/anakan dan dewasa diasumsikan sebagai tahap "anakan" yang berlanjut menuju "dewasa", sesuai penyebutan tiga tahap pada arah kreatif (telur, anakan, dewasa).
  • [Default — not specified by user] Kebutuhan pet yang dicontohkan (makanan, air, mainan, mandi, tidur) berasal dari arah kreatif sebagai contoh ikon; daftar final kebutuhan ditentukan oleh item yang tersedia di petshop.
  • [Default — not specified by user] Tidak ada mekanisme kalah atau hukuman yang dinyatakan sumber; kegagalan yang ditangani terbatas pada kegagalan teknis dan saldo bintang tidak cukup.

Exclusions (dari sumber):

  • Tidak ada kapabilitas di luar alur adopsi–pemenuhan kebutuhan–pembelian dengan bintang–pemberian bintang–evolusi–kemenangan.
  • Tidak ada pembelian dengan uang nyata.
  • Tidak ada mode multipemain kompetitif.
Page 26 of 27

12. Glossary

  • MVP (My Virtual Pets): nama aplikasi game edukasi adopsi hewan virtual ini.
  • NISN: nomor identitas siswa yang digunakan siswa untuk masuk ke aplikasi.
  • Pet: hewan peliharaan virtual yang diadopsi siswa, berkembang dari telur/anakan hingga dewasa.
  • Telur/anakan: tahap awal pet saat diadopsi.
  • Dewasa: tahap akhir evolusi pet; pencapaian tahap ini berarti siswa menang.
  • Evolusi: proses perubahan tahap pet dari telur/anakan menuju dewasa.
  • Pet need (keinginan pet): kebutuhan pet yang harus dipenuhi siswa.
  • Item pet need: barang yang dibeli siswa di petshop untuk memenuhi keinginan pet.
  • Petshop: toko yang dikelola guru/user tempat siswa membeli item pet need.
  • Bintang: mata uang dalam permainan, diberikan guru/user kepada siswa atas hal baik atau nilai sempurna, dan digunakan siswa untuk membeli item pet need.
  • Guru/user (Pengelola Petshop): peran manusia yang mengelola petshop dan memberikan bintang kepada siswa.
  • Siswa (Pemain): peran manusia yang bermain, mengadopsi pet, memenuhi keinginan pet, dan mencapai kemenangan.
  • Panel: salah satu dari dua antarmuka utama — panel siswa sebagai pemain dan panel guru/user.
  • Kemenangan: status yang dicapai siswa ketika pet mereka berevolusi menjadi dewasa.
Page 27 of 27

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View intro
Login: 1. Sign in credentials
Login: 2. Retry invalid credentials
Shop Management: View item list
Shop Management: 1. Add or edit item
Shop Management: Save changes success
Shop Management: 2. Retry after save fails
Award Stars: Select student
Award Stars: Select award reason
Award Stars: 1. Stamp award stars
Award Stars: 2. Retry after award fails

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View intro
Login: 1. Sign in credentials
Login: 2. Retry invalid credentials
Shop Management: View item list
Shop Management: 1. Add or edit item
Shop Management: Save changes success
Shop Management: 2. Retry after save fails
Award Stars: Select student
Award Stars: Select award reason
Award Stars: 1. Stamp award stars
Award Stars: 2. Retry after award fails