Memperbarui Aplikasi Web Jam Dinding Digital
Aplikasi Jam Dinding ini menampilkan waktu di halaman browser dalam bentuk animasi jam analog. Waktu yang ditampilkan sesuai dengan waktu yang disetel di komputer pengguna. Aplikasi Jam Dinding ini disertai dengan Service Worker untuk mode Progressive Web Apps. Dengan demikian aplikasi ini dapat dijalankan ketika kondisi tidak ada koneksi internet atau offline.
Jika dibuka dengan browser di perangkat smartphone, pengguna dapat membuat pintasan (shortcut) aplikasi web ini pada halaman home screen perangkat smartphone anda. Untuk dapat membuat pintasan layar di perangkat smartphone Android, browser yang digunakan haruslah Google Chrome Mobile. Aplikasi ini dapat disetel mode layar penuh (full screen) di komputer desktop dengan bantuan browser Google Chrome (biasanya shortcutnya adalah F11) .
Aplikasi web Jam Dinding Digital ini awalnya dibuat sebagai latihan untuk pengenalan CSS keyframe dan animasi dengan CSS. Aplikasi ini dibuat sekitar bulan Maret tahun 2017 yang lalu. Versi lama dari aplikasi web ini dapat dilihat catatan rilisnya di tautan berikut ini.
https://gulajavaministudio.blogspot.com/2017/03/berbagi-aplikasi-web-jam-dinding-digital.html
https://gulajavaministudio.blogspot.com/2017/03/berbagi-aplikasi-web-jam-dinding-digital.html
Aplikasi dibuat dengan menggunakan latihan dari situs CSS Animation, tentang latihan membuat animasi CSS untuk studi kasus Jam Analog.
Sekilas Versi Lama
Aplikasi Jam Dinding versi sebelumnya telah dibuat dengan menggunakan framework Angular. Framework Angular yang digunakan adalah versi terbaru yang telah memakai TypeScript dan Angular CLI. Ketika pertama kali dibuat, aplikasi ini dibuat dengan Angular versi 2 dan terakhir diperbarui menggunakan Angular 4. Mode Progressive Web Apps nya juga masih belum baik karena library untuk Service Workernya masih belum optimal. Ketika itu Service Worker yang digunakan berasal dari library eksternal yang bernama SW Precache.
Meskipun belum optimal, namun sudah cukup untuk menambahkan fungsi Service Worker dan membuat browser Chrome mobile mendeteksi bahwa aplikasi ini adalah tipe Progressive Web Apps.
Migrasi Kode ke Angular yang Baru
Framework Angular ketika tulisan ini ditulis, sudah mencapai versi 7 . Banyak sekali perbaikan dan optimalisasi di Angular 7 ini jika dibandingkan dengan versi Angular 2 ataupun Angular 4 . Hal pertama yang dilakukan adalah membuat kerangka proyek baru dengan menggunakan Angular CLI . Perintah yang digunakan yaitu :
ng new <nama_proyek_aplikasi>
Setelah kerangka proyek aplikasi selesai dibuat. Proses berikutnya adalah melakukan proses migrasi kode sumber dari proyek aplikasi Jam Dinding versi lama ke dalam kerangka proyek aplikasi Jam Dinding dengan Angular 7.
Hal yang cukup memudahkan dari migrasi ini yaitu kedua versi Angular ini sama-sama menggunakan TypeScript. Gaya penulisan TypeScript antara versi yang satu dengan yang lain tidak banyak berubah dan saling kompatibel. Maka yang perlu dilakukan adalah cukup salin tempel (copy paste) kode sumber aplikasi yang ada di folder SRC , di dalam folder proyek Jam Dinding. Isi folder SRC yang dimaksud yaitu sub folder app, assets, dan file-file lain yang tidak terpengaruh oleh perubahan framework Angular.
Setelah migrasi kode sumber aplikasi yang berisi logika bisnis dan alur dari aplikasi. Berikutnya adalah memigrasikan aset-aset gambar dan juga library. Untuk library, beberapa ada yang perlu penyesuaian karena library yang dipakai bisa saja mengalami perubahan gaya penulisan dan fitur. Misalnya library CSS Bootstrap 3 ke Bootstrap 4 , library RxJS, library pembuatan service worker yang kini menggunakan library Ng-SW .
Begitu migrasi kode sumber dan juga library pendukung telah selesai, selanjutnya adalah menguji aplikasi web Angular ini dengan menggunakan perintah di Terminal yaitu ng serve . Pengembang juga memantau error selama proses migrasi, yang muncul dengan menggunakan Developer Console di Google Chrome.
Proses berikutnya yaitu memperbarui library Service Worker dari yang sebelumnya memakai SW-Precache menjadi Ng-SW . Menurut dokumentasi, caranya cukup sederhana, yaitu dengan menambahkan dependensi @angular/pwa melalui NPM .
ng add @angular/pwa — project *project-name*Perbarui juga setelan web manifest agar aplikasi bisa dibuatkan pintasan shortcut-nya ketika dibuka dari browser mobile di smartphone Android.
Kemudian tambahkan ikon-ikon pelengkap yang dibutuhkan pintasan aplikasi PWA di layar utama smartphone Android. Ikon yang disiapkan berukuran minimal 512px x 512px . Lalu gunakan icon generator untuk PWA yang berasal dari layanan PWA Builder berikut ini.
Mode PWA yang telah ditambahkan perlu diuji lebih lanjut dengan bantuan library HTTP-Server. Library ini mensimulasikan aplikasi web yang telah dibuat dalam mode produksi yang berjalan di layanan server. Disini pengembang bisa mengecek apakah Service Worker dan Web Manifest yang telah dibuat telah berjalan dengan lancar atau tidak.
https://angular.io/guide/service-worker-getting-started#serving-with-http-server
Proses Publikasi atau Deploy ke Firebase Hosting
Aplikasi Jam Dinding berbasis Angular telah selesai diperbarui. Selanjutnya adalah memperbarui aplikasi Jam Dinding versi lama yang sebelumnya telah terpasang di layanan Firebase Hosting. Firebase Hosting ini adalah layanan web hosting untuk aplikasi web yang bersifat statis dan single page application. Layanan ini memudahkan pengembang aplikasi web dalam mempublikasikan aplikasinya tanpa perlu menyetel layanan server dan layanan pendukungnya.
Proses deploy dengan Firebase Hosting cukup mudah. Pertama pengembang membuat mode produksi dari aplikasi web Angularnya dengan Angular CLI. Yaitu dengan perintah :
ng build --prod=true --aot=true --buildOptimizer=trueDi dalam folder proyek akan muncul folder baru yaitu folder /dist . Isi folder ini yang akan dipakai untuk publikasi aplikasi web ke Firebase Hosting.
Pasang Firebase CLI dengan menggunakan layanan Node Package Manager (NPM) melalui Terminal.
npm install -g firebase-toolsLanjutkan login ke akun Google Firebase yang akan dipakai untuk publikasi web dengan perintah :
firebase loginSetelah berhasil melakukan proses login, lakukan inisialisasi setelan firebase di dalam folder khusus yang akan dipakai proses deploy aplikasi web. Saya biasanya menyiapkan satu folder khusus, lalu isi folder /dist tadi disalin ke folder khusus tersebut. Kemudian lanjutkan dengan proses deploy ke Firebase Hosting. Jalankan perintah ini untuk memulai inisialisasi setelan Firebase Services.
firebase init
Pilih layanan Hosting dengan menekan tombol spasi, karena kita akan mempublikasikan aplikasi web yang telah dibuat. Setelah selesai, lanjutkan dengan menekan tombol enter.
Jika berhasil membuat setelan Firebase Service untuk Hosting, maka isi folder khusus ini akan terdapat beberapa file dan folder seperti yang ada di gambar di atas.
Kemudian salin isi folder /dist yang berisi file-file mode produksi dari aplikasi web Jam Dinding yang telah dibuat oleh Angular CLI tadi. Isi file tersebut disalin ke dalam folder /public yang dibuat oleh Firebase CLI. Langkah berikutnya adalah jalankan perintah ini di Terminal untuk mengunggah file-file tersebut ke Firebase Hosting.
firebase deploy
Proses mengunggah file akan berlangsung selama beberapa saat. Proses pengunggahan yang berhasil ditandai dengan sebuah link yang berisi aplikasi web Jam Dinding yang berhasil diunggah. Yaitu di tautan berikut ini.
Dokumentasi lebih lanjut mengenai Firebase Hosting, silahkan lihat di tautan berikut ini.
Pengujian dengan Lighthouse
Aplikasi web dengan mode Progressive Web Apps tidak lengkap tanpa pengujian dengan layanan Lighthouse. Layanan Lighthouse ini tersedia di dalam browser Google Chrome dan juga browser lain dengan engine Chromium. Layanan Lighthouse bisa diakses melalui Chrome Developer Console yang berada di dalam menu Audits.
Hasil pengujian Lighthouse untuk aplikasi web Jam Dinding ini masih dibawah rata-rata untuk sisi Performance dan Accessibility . Untuk sisi performa, hasil diagnosisnya banyak yang gagal dalam memuat beberapa file CSS dan JavaScript library eksternal yang masih bersifat blocking dan belum asinkronus. Sehingga hal ini dapat menghambat render halaman web secara keseluruhan karena menunggu file CSS dan JS selesai diunduh. File hasil audit Lighthouse ini bisa kalian lihat sendiri di browser masing-masing di menu Audits . Lakukan drag and drop file audit ini ke dalam isi menu Lighthouse di Chrome Developer Console.
https://gist.github.com/GulajavaMinistudio/018622c23486836d8b9bd060f8219a54
Membuat Versi Lain dengan Framework Vue JS
Aplikasi Jam Dinding ini juga dibuatkan versi lain yang menggunakan framework Vue JS. Framework yang sudah beberapa kali saya pakai dalam pembuatan beberapa proyek aplikasi web dengan stack MEVN. Framework ini terbilang cukup ringan dengan performa yang baik, sehingga mulai naik daun popularitasnya akhir-akhir ini.
Pembuatan kerangka proyek aplikasi Jam Dinding Vue menggunakan sebuah aplikasi bernama Vue CLI. Fungsinya hampir sama dengan Angular CLI, yaitu membuat kerangka proyek dan melakukan proses pembuatan mode produksi dengan mudah.
Kerangka proyek yang dibuat dari Vue CLI ini yaitu menggunakan template Vue PWA dengan standard code style ESLint AirBnb. Perintah CLI yang digunakan yaitu :
vue create <nama proyek aplikasi>
Vue CLI akan memberikan beberapa opsi untuk konfigurasi aplikasi web yang dibuat. Opsi Progressive Web App wajib ditambahkan karena aplikasi Jam Dinding ini perlu berjalan walaupun koneksi internet tidak tersedia. Setelah selesai instalasi kerangka proyek, berikutnya adalah penyesuaian terhadap library-library yang dipakai. Misalnya library untuk tampilan seperti Bootstrap 4, Animate CSS, dan Moment.
Langkah berikutnya adalah memigrasikan beberapa kode sumber utama yang menjadi logika bisnis aplikasi. Yaitu logika penghitungan waktu, tampilan aplikasi, dan penggerakan jarum jam berdasarkan perubahan waktu tersebut. Logika penghitungan waktunya dibuat sama dengan logika penghitungan aplikasi Jam Dinding versi Angular. Penulisan dan penyesuaian kode juga tidak terlalu sulit mengingat code style TypeScript ini tidak terlalu berbeda dengan JavaScript ES2015+ .
Setelah selesai menambahkan kode penghitungan waktu, berikutnya adalah mempersiapkan aset gambar dan web manifest agar sesuai dengan tema aplikasi Jam Dinding versi Vue ini. Variasi warna diubah menjadi sedikit berbeda yaitu menggunakan tema berwarna hijau. Selanjutnya adalah menguji coba aplikasi web ini apakah masih ditemui kesalahan dan hal-hal yang kurang melalui proses debugging di browser.
Proses Deploy ke Hosting Now.sh
Aplikasi Jam Dinding versi Vue yang telah selesai dibuat dan berjalan lancar akan dipublikasikan ke layanan hosting. Beberapa layanan hosting bersifat Serverless seperti Firebase Hosting, Zeit Now, dan Netlify bisa menjadi alternatif. Kali ini saya memilih menggunakan layanan hosting dari Zeit Now, yang biasa disebut Now.sh.
Metode yang saya pakai adalah memasang Now CLI melalui NPM. Kemudian membuat konfigurasi now.json di dalam folder khusus untuk proses deploy. Isi konfigurasinya cukup seperti di bawah ini saja.
{
"name": "jam-dinding-vue",
"version": 2,
"alias": "jam-dinding-vue"
}Lakukan pembuatan mode produksi dari aplikasi Jam Dinding versi Vue ini. Jalankan perintah berikut di folder proyeknya dari Terminal di Text Editor masing-masing.
npm run buildVue CLI akan menggabungkan kode-kode sumber dan optimasi dari kode sumber yang telah dikompilasi tersebut. Hasil kompilasi ini dapat dilihat dari isi folder /dist yang terdapat di dalam folder proyek aplikasi. Selanjutnya salin seluruh isi folder /dist ini ke dalam folder khusus proses deploy aplikasi. Yang sebelumnya telah diberi konfigurasi now.json .
Lanjutkan dengan proses deploy ke layanan Now.sh dengan menggunakan perintah :
nowSetelah berhasil melakukan deploy , tidak lupa untuk menyetel alias dari aplikasi Jam Dinding ini. Dengan demikian, tautan link yang muncul dibrowser menjadi lebih mudah dibaca pengguna.
now alias <URL sebelum diberi alias> <nama alias>
Untuk mengetahui apakah penambahan alias dan proses deploy berhasil, bisa dilakukan dengan membuka tautan yang telah diubah dengan alias tadi. Yaitu tautan berikut ini.
https://jam-dinding-vue.now.sh
Jika proses deploy aplikasi Jam Dinding versi Vue ini berhasil, maka muncul halaman web yang dapat dilihat di gambar atas. Selengkapnya mengenai proses deploy ke layanan Zeit Now ini bisa dilihat di dokumentasi resminya di bagian atas tulisan ini.
Pengujian dengan Lighthouse
Pengujian dengan Lighthouse juga dilakukan pada Jam Dinding versi Vue ini. Hasil pengujiannya memang baik dan optimal. Bisa dilihat pada gambar di bawah ini.
Hasil analisis dari audit Lighthouse ini memperlihatkan bahwa nilai performa aplikasi web Jam Dinding versi Vue sudah sangat baik. Berada di kisaran nilai 95 . Masalahnya yaitu ada element gambar yang tidak dijalankan dalam mode Preload Request, untuk gambar latar belakang di jam dindingnya. Nilai Accessbility masih berada di nilai menengah yaitu nilai 81. Dimana masih ada kurang element bahasa di dalam HTML-nya. Selengkapnya mengenai hasil audit ini bisa dilihat dengan mengimpor data JSON ini ke dalam Lighthouse di browser Chrome masing-masing.
https://gist.github.com/GulajavaMinistudio/8089a9c89f8b5d4a766c76f6c4556a25
Pengujian di Browser Google Chrome Android
Aplikasi Progressive Web App perlu dicoba langsung di browser mobile di perangkat Android. Disarankan menggunakan browser Google Chrome agar pengujian bisa diketahui lancar atau tidak. Pengujian dilakukan dengan membuka masing-masing alamat aplikasi Jam Dinding dan membuat pintasannya di homescreen smartphone Android.
Aplikasi Jam Dinding dengan Angular PWA diuji coba dengan membuka alamatnya dari Chrome mobile. Lalu dilihat ada sebuah pop-up untuk menambahkan aplikasi web ini ke homescreen.
Setelah berhasil ditambahkan ke homescreen, berikutnya adalah membuka aplikasi web Jam Dinding ini dari halaman homescreen Android langsung.
Buka aplikasi Jam Dinding tersebut dengan menekan ikon aplikasinya yang telah dibuat di halaman homescreen Android. Jika setelan web manifest dan PWA-nya benar, maka akan muncul splashscreen dan tampilan penuh layaknya aplikasi native di Android. Seperti yang tampak di gambar-gambar atas.
Pengujian selanjutnya terhadap aplikasi Jam Dinding dengan Vue JS. Langkah-langkahnya sama dengan pengujian Jam Dinding Angular di atas. Yaitu membuka halaman Jam Dinding Vue dengan browser Google Chrome Android.
Kemudian dari halaman homescreen di Android, buka aplikasi Jam Dinding Vue ini dengan menyentuh ikon aplikasinya. Nama aplikasi Jam Dinding Vue ini berubah menjadi VuJamDinding, seperti tampak di gambar bawah ini.
Hasil pengujian aplikasi Jam Dinding untuk kedua versi di atas berhasil. Keduanya berhasil dijalankan di browser Google Chrome Android. Dilanjutkan dengan pembuatan pintasan di halaman homescreen perangkat Android.
Tautan Demo Aplikasi Web
Aplikasi web Jam Dinding versi Angular bisa diakses di tautan berikut ini.
Sedangkan untuk aplikasi Jam Dinding versi Vue JS, bisa diakses di tautan berikut ini.
Kode Sumber Aplikasi
Aplikasi Jam Dinding ini memiliki kode sumber yang telah diletakkan ke dalam Github. Kode sumber untuk aplikasi Jam Dinding versi Angular bisa dilihat di tautan berikut
Sedangkan untuk kode sumber aplikasi Jam Dinding versi Vue JS bisa dilihat di tautan berikut.
Silahkan saja untuk digarpu ke dalam repository Github masing-masing. Semoga saja bisa bermanfaat di kemudian hari yang akan datang.
