Do.it

Do.it - Aplikasi pengelola goals dan kegiatan harian.

Sekilas

Web app ini dibangun secara progressive dengan menerapkan sifat offline capability dan installable. Berikut teknologi yang digunakan selama proses pengembangan;

1. ESLint sebagai linter ketika menuliskan kode JavaScript
2. Menggunakan arsitektur Application Shell dalam pembuatan website
3. Menerapkan Web App Manifest dan Service Worker
4. Menerapkan Cache API pada Service Worker
5. Menggunakan local storage sebagai media penyimpanan data
6. Serta menerapkan Notification

Scripts

Script npm yang digunakan dalam project ini adalah sebagai berikut:

1. Starting development server

   npm run start-dev

2. Build untuk distribusi production

   npm run build

Fitur

Daily Motivation

Fitur ini tersedia pada halaman beranda (homepage). Fitur ini dimaksudkan agar pengguna menjadi lebih termotivasi dalam menyelesaikan setiap kegiatannya dan bisa mencapai goalsnya tepat waktu. Selain pada homepage, fitur ini juga tersedia pada halaman todo yang berupa notifikasi. Jadi ketika pengguna membuka halaman todo, makan akan muncul notifikasi yang isinya berupa quotes.

Daily Report

Fitur ini akan menampilkan semua goals, kegiatan goals, serta kegiatan harian. Dengan adanya fitur ini diharapkan pengguna bisa dengan mudah mengetahui apa saja goals dan kegiatan yang harus diselesaikan. Setiap pengguna menambahkan atau menghapus goals dan todo, fitur ini akan mengupdate tampilannya.

Goals & Todo

Fitur ini ditujukan untuk mengelola goals dan kegiatan pengguna. Berikut adalah tata cara penggunaan fitur goals & todo:

1. Untuk menambahkan goals baru, tekan tombol + di pojok kanan bawah. Kemudian akan muncul form untuk mengisi nama goals.

2. Setelah memiliki goals yang ingin dicapai, saatnya menambahkan aksi untuk mencapainya. Untuk menambahkan kegiatan pada goals, pilih terlebih dahulu goalsnya kemudian isi form kegiatan yang ada disampingnya. Setelah klik tombol simpan, pengguna bisa melihat daftar kegiatan dengan klik nama goals pada daftar goals. Pengguna juga dapat menghapus goals dengan klik logo tong sampah.

Pada setiap kegiatan, terdapat 3 fungsionalitas yaitu:

• Tombol Selesai. Tombol ini bisa digunakan untuk menandai bahwa sebuah kegiatan telah selesai dilaksanakan. Setelah tombol ini ditekan, maka nama kegiatan akan otomatis tercoret.

• Tombol Edit. Setelah menekan tombol ini, pengguna bisa mengganti nama kegiatan pada form yang sama saat menambahkan kegiatan baru

• Tombol Hapus. Sebelum pengguna benar-benar akan menghapus kegiatan, akan muncul pop-up konfirmasi.

3. Jika pengguna hanya ingin membuat daftar kegiatan harian tanpa adanya goals tertentu, bisa menggunakan fitur daily todo yang berada di sebelah kanan. Setiap nama kegiatan memiliki 3 fungsionalitas yang sama seperti goals todo, yaitu tombol selesai, tombol edit, dan tombol hapus.

   

Focus Timer

Focus timer dibuat berdasarkan teknik pomodoro, dimanan idenya adalah kita melakukan sebuah tugas atau pekerjaan harus fokus secara maksimal dalam jangka waktu yang disediakan. Secara default, waktu yang disediakan adalah 25 menit. Berikut fungsionalitas pada fitur focus timer:

1. Tombol start digunakan untuk memulai hitung mundur waktu
2. Saat waktu sedang berjalan tombol stop dan setting akan dinonaktifkan
3. Ketika waktu telah selesai, maka background akan berubah warna serta alarm akan berbunyi
4. Tombol stop digunakan untuk menghentikan waktu yang sedang berjalan. Selain itu juga digunakan untuk mematikan suara alarm ketika waktu telah selesai
5. Tombol setting digunakan untuk melakukan kustomisasi pada waktu.

Jika waktu default yang disediakan dirasa kurang atau terlalu lama, pengguna bisa melakukan kustomisasi dengan memanfaatkan tombol setting yang tersedia. Makan akan muncul form untuk mengisi lamanya waktu yang diinginkan.

Tools & Resources

• Balsamiq Mockup - Membuat mockup
• Postman - Menguji API quotes
• Quotable - Quotes API untuk fitur daily motivation
• NPM - Pengelolaan module/package pada proyek
• Webpack - Module bundler
• Bootstrap - CSS framework
• SweetAlert - Kustomisasi pop-up dan alert
• FontAwesome - Sumber icon gratis
• Google Fonts - Font modern dan menarik
• Freepik - Sumber gambar gratis
• Canva - Membuat slide presentasi
• Pixabay - Sumber audio untuk alarm timer

Tim Kami

CPSG-35

1. F2299A280 - Rio Ramadhan Bahtiar
2. F2393A396 - Faiz Fachrudin
3. F2168E127 - Dwiky Darmawansyah
4. F2209A174 - Rizky Ramadhani