Membuat Aplikasi Todo-List dengan Vue 3 PWA

Todolist Vue3 PWA

Pendahuluan

Vue.js 3 adalah framework JavaScript populer untuk membangun antarmuka pengguna interaktif. Dengan fitur-fitur seperti Composition API dan peningkatan performa, Vue.js 3 memungkinkan pengembangan aplikasi web yang lebih terstruktur, responsif, dan cepat. Framework ini juga cocok untuk pengembangan aplikasi skala besar. Dengan fokus pada performa, skalabilitas, dan kemudahan penggunaan, Vue.js 3 merupakan pilihan menarik bagi pengembang aplikasi web modern.

Aplikasi PWA (Progressive Web App) adalah aplikasi web yang memiliki keunggulan seperti aplikasi mobile, tetapi dapat diakses melalui browser web. Beberapa keunggulan aplikasi PWA antara lain:

1. Aksesibilitas yang luas: Bisa diakses melalui berbagai perangkat dengan browser web, tanpa perlu mengunduh atau menginstal aplikasi.
2. Responsif dan interaktif: Memberikan pengalaman pengguna yang responsif dan interaktif, termasuk fitur seperti push notification dan akses sensor perangkat.
3. Instalasi mudah: Pengguna dapat menginstal aplikasi PWA langsung ke perangkat mereka.
4. Pembaruan terbaru: Aplikasi PWA akan selalu mendapatkan pembaruan terbaru saat diakses ulang.

Beberapa perusahaan teknologi di Indonesia yang menggunakan sistem PWA antara lain: Tokopedia, Traveloka, dan Bukalapak. Mereka memanfaatkan PWA untuk memberikan pengalaman berbelanja yang lancar dan responsif kepada pengguna, serta memperluas jangkauan pengguna melalui web. Dengan PWA, perusahaan-perusahaan ini dapat memberikan pengalaman pengguna yang menarik dan performa yang baik tanpa harus mengembangkan aplikasi native khusus.

Pada kesempatan ini, kita akan belajar bagaimana cara membuat aplikasi PWA dengan Vue 3, dimulai dari aplikasi paling sederhana yaitu Todo List

Persiapan

Vue.js 3 membutuhkan Node.js untuk menjalankan perintah-perintah yang diperlukan dalam pengembangan. Pastikan Node.js terinstal di komputer kalian dengan versi yang kompatibel. Pada kasus ini, Saya menggunakan Node.js versi v18.17.1.

Kalian dapat mengunduh dan menginstal Node.js dari situs resmi Node.js (https://nodejs.org).

Installasi Vue + Vite

Silahkan buka terminal/ CMD dan masuk ke directory dimana kalian akan menyimpan project ini, kemudian jalankan perintah seperti dibawah:

npm create vue@latest

Perintah ini akan menginstall dan menjalankan create-vue. Kalian akan disajikan dengan permintaan untuk beberapa fitur opsional seperti TypeScript dan testing support:

Installasi Vue 3

Disini saya menamai projek ini dengan nama todo-list-vue-pwa, kalian bisa menamai nya dengan apa saja, bebas, terserah, asal mudah diingat aja. Ikuti semua langkah seperti pada gambar diatas ya.

Jika sudah, kalian bisa buka folder projek dengan perintah:

cd todo-list-vue-pwa
npm install

Aplikasi vue sudah berhasil terinstall, langkah berikutnya adalah menambahkan depedencies tambahan untuk menjalankan aplikasi PWA.

Installasi Vite PWA

vite-pwa adalah sebuah library yang digunakan dalam pengembangan aplikasi web dengan Vite dan Vue.js. Fungsinya adalah untuk memudahkan implementasi fitur Progressive Web App (PWA) ke dalam proyek Vue.js.

Beberapa kegunaan vite-pwa meliputi:

1. Splash screen: Menampilkan layar sambutan saat membuka aplikasi PWA.
2. Icon dan manifest: Mengatur ikon aplikasi dan preferensi manifest untuk kontrol tampilan dan perilaku aplikasi ketika diinstal di perangkat pengguna.
3. Caching: Mempertahankan konten aplikasi secara offline dengan melakukan caching pada sumber daya seperti HTML, CSS, dan gambar.
4. Push notification: Mengirim notifikasi ke perangkat pengguna, bahkan saat aplikasi tidak aktif.

Dengan menggunakan vite-pwa, proyek Vue.js kita dapat dengan mudah diubah menjadi aplikasi web dengan fitur PWA, memberikan pengalaman pengguna yang lebih baik dan aksesibilitas yang luas.

Silahkan buka terminal/ CMD kembali, kemudian jalankan perintah seperti dibawah:

npm install -D vite-plugin-pwa @vite-pwa/assets-generator sharp

Dari ketiga library tersebut akan kita gunakan untuk membuat aplikasi agar support PWA.

Tahap Coding

Setelah semua langkah diatas selesai, silahkan kalian buka text editor yang biasa kalian gunakan, disini saya menggunakan Visual Studio Code dan buka folder projek yang telah dibuat sebelumnya.

Tampilan text editor VSCode

• Modifikasi File

Pada tahap ini, kita akan fokus untuk memodifikasi beberapa file yang telah tersedia.

Silahkan kalian buka file src/App.vue dan modifikasi menjadi seperti berikut:

Langkah selanjutnya, buka file src/views/HomeView.vue dan modifikasi menjadi:

Lanjut? gasskeun yak, buka file src/components/HelloWorld.vue dan modifikasi menjadi:

Masih pada folder components, disini poin file yang akan kita modifikasi menjadi akar aplikasi todo-list berfungsi, buka file src/components/TheWelcome.vue dan modifikasi menjadi:

Lalu simpan semua file yang telah kita modifikasi. Oh iya, sekalian juga kalian copy file yang berada di src/assets/logo.svgdan pindahkan ke folder public ya.

• Membuat assets PWA

Pada tahap ini kita akan membuat assets yang akan diperlukan untuk aplikasi PWA kita.

Silahkan kalian membuat file dengan nama pwa-assets.config.js dan masukan kode:

Dokumentasi selengkapnya kalian bisa baca disini.

Langkah selanjutnya adalah memodifikasi file package.json dan ubah menjadi seperti berikut:

Setelah semua langkah diatas selesai, kalian buka kembali terminal/ CMD dan jalankan perintah berikut:

npm run generate-pwa-assets

Perintah diatas digunakan untuk membuat assets yang dibutuhkan untuk membuat aplikasi PWA dan menyimpan assets tersebut pada folder public.

• Tahap Terakhir

Eitss, tahap terakhir tapi bukan paling akhir lho yaa ;3

Silahkan kalian buka file index.htmldan modifikasi menjadi:

Apa sih perbedaan dengan sebelumnya? kayaknya sama aja ga sih? yup, kita menambahkan beberapa <meta> tag minimum requirements yang dibutuhkan agar aplikasi PWA kita dapat berjalan semestinya.

Selanjutnya, buka file vite.config.js dan modifikasi menjadi:

Disini kita menambahkan beberapa konfigurasi dari vite-pwa, kalian bisa baca dokumentasi selengkapnya disini ya.

Lalu simpan semua file yang telah kita modifikasi sebelumnya.

Testing

Kalian bisa buka terminal/ CMD kembali, dan jalankan perintah seperti berikut:

npm run dev

Lalu kalian buka url http://localhost:5173 pada browser Chrome.

http://localhost:5173

Jika sudah muncul icon install pada tab paling kanan posisi ke-2, maka aplikasi telah berhasil kita buat.

Screenshot #1

Screenshot #2

Akhir Kata

Puji syukur ga kerasa sudah di penghujung waktu, terima kasih buat kalian yang sudah membaca artikel ini sampai tahap akhir, thanks a lot deh.

Btw yang mau join group komunitas belajar kita bisa bergabung di: Group WhatsApp

Kalau kalian butuh bantuan atau mungkin konsultasi error terkait tutorial ini, bisa banget hubungi kontak yang nanti akan saya cantumkan diakhir section ini yaa.

Demo: https://syawal.dev/showcase/todo-list-vue-pwa/

Source Code: Github

Contact Person: WhatsApp