5025231208_Muhammad Daffa Nurrahman_Pertemuan 6 KPPL - Prototipe

Pertemuan 6 KPPL - Prototipe

Nama    : Muhammad Daffa Nurrahman

NRP      : 5025231208

Kelas     : KPPL (E)

Nama Kelompok :

- Muhammad Ryan Fikri Nugraha (5025231013)

- Muhammad Nabil Afrizal Rahmadani (5025231014)

- Muhammad Daffa Nurrahman (5025231208)

---

Soal

Buatlah Prototipe Solusi Technical Support System dengan pendekatan Waterfall atau Agile Development

Requirements Gathering : 

1. Tools and Technology:

Situs web chatbot ini akan dibangun menggunakan teknologi web standar, yaitu HTML, CSS, dan JavaScript. HTML akan digunakan untuk struktur halaman dan elemen antarmuka, CSS akan memberikan gaya dan tata letak yang responsif, sementara JavaScript akan mengelola interaksi pengguna dan logika fungsionalitas chatbot secara dinamis. Pendekatan ini memastikan bahwa situs web mudah diakses di berbagai perangkat dan memberikan pengalaman pengguna yang optimal.

2. Functional Requirements:

1. Troubleshooting Masalah: Memberikan panduan penyelesaian masalah teknis seperti crash, masalah konektivitas, dan pembaruan sistem secara cepat dan akurat.

2. Bantuan Software: Menyediakan bantuan untuk instalasi, pembaruan, dan konfigurasi software sesuai kebutuhan pengguna.

3. Diagnostik Sistem: Melakukan pemeriksaan sistem secara otomatis untuk mendeteksi masalah, serta memberikan rekomendasi solusi yang tepat.

4. Basis Pengetahuan: Menjawab pertanyaan dan menyediakan informasi dari basis pengetahuan atau FAQ yang berhubungan dengan dukungan IT.

5. Eskalasikan ke Agen Langsung: Menyediakan opsi untuk mengalihkan pengguna ke agen dukungan manusia jika masalah tidak dapat diselesaikan oleh chatbot.

3. Non-Functional Requirements:

1. Performa: Chatbot harus memberikan respon dalam waktu maksimal 3 detik untuk memastikan pengalaman pengguna yang lancar.

2. Ketersediaan: Chatbot harus dapat diakses melalui berbagai platform, termasuk situs web, aplikasi desktop, dan layanan pesan.

3. Kemudahan Penggunaan: Antarmuka harus intuitif dan mudah digunakan, dengan instruksi yang jelas serta kebutuhan input pengguna yang minimal.

System Design :

1. UI/UX Sketches:

Tata letaknya menyerupai obrolan bergaya WhatsApp. Gunakan warna yang terinspirasi dari NEOVIM: latar belakang gelap dengan sorotan halus (misalnya, abu-abu gelap atau biru tua) untuk latar belakang obrolan. Desain area input teks di bagian bawah, mirip dengan WhatsApp, dengan kotak teks bundar, tombol kirim, dan ikon lampiran file opsional. Tampilkan pemberitahuan untuk pesan baru atau indikator pengetikan dalam gaya yang terinspirasi oleh pendekatan minimalis NEOVIM.

Implementasi :

1. HTML Structure:

Kode HTML mengimplementasikan antarmuka chatbot sederhana yang menyerupai aplikasi bergaya Neovim, yang menampilkan header, kotak obrolan untuk menampilkan pesan, kotak input untuk memasukkan teks pengguna, dan bilah status, dengan CSS eksternal yang ditautkan untuk gaya dan JavaScript untuk menangani interaksi pengguna.

2. JavaScript:

1. Response Object:

Objek responses berisi pasangan kunci-nilai di mana kunci adalah pertanyaan umum dari pengguna (misalnya, "halo", "tidak bisa connect wifi") dan nilai adalah respons yang akan diberikan chatbot. Struktur ini memungkinkan pencarian respons yang mudah berdasarkan input pengguna.

2. sendMessage Function:

Fungsi ini mengambil input pengguna dari kotak obrolan, menambahkannya ke tampilan obrolan, dan memeriksa apakah ada respons yang cocok di dalam objek responses. Jika ada kecocokan, fungsi ini memicu animasi pengetikan untuk respons bot; jika tidak, fungsi ini akan menampilkan pesan default yang menunjukkan bahwa pertanyaan tidak dimengerti.

3. typeMessage Function:

Fungsi ini membuat animasi pengetikan untuk pesan bot, mensimulasikan efek pengetikan yang realistis. Fungsi ini secara bertahap menampilkan setiap karakter dari respons, meningkatkan pengalaman pengguna. Setelah pesan sepenuhnya ditampilkan, kotak obrolan secara otomatis menggulir ke bawah untuk menampilkan pesan terbaru.

4. handleKeyPress Function:

Fungsi ini mendengarkan peristiwa penekanan tombol, khususnya tombol "Enter". Ketika tombol ini ditekan, fungsi ini memanggil fungsi sendMessage untuk memproses input pengguna.

5. appendMessage Function:

Fungsi ini menambahkan pesan baru (dari pengguna atau bot) ke kotak obrolan dan memastikan bahwa kotak obrolan menggulir ke bawah untuk menampilkan pesan terbaru.

3. CSS:

Kode CSS ini mendesain antarmuka chatbot dengan tema NEOVIM menggunakan skema warna gelap dan font monospace. Kontainer utama, header, dan kotak obrolan memiliki latar belakang gelap, sementara pesan pengguna dan bot dibedakan dengan warna berbeda. Input pengguna dan tombol kirim terintegrasi dalam satu bar, dengan efek transisi pada tombol untuk interaktivitas yang lebih baik.

Pengujian/Testing/Deploy:

Video Recording berisi deploy dan testing

https://youtu.be/3FeWobVoWjY