Brainmatics

Progressive Web Application (PWA) Development with Vue.js

Progressive Web Apps (PWA) adalah suatu teknik untuk mengakses website dan aplikasi mobile menjadi satu tanpa harus menginstall/memasang aplikasi tersebut. Mobile application yang dibuat adalah aplikasi JavaScript yang bekerja di browser dan bertujuan untuk membawa fitur-fitur native app ke website. PWA dapat membantu menampilkan UI dan UX mobile apps pada browser web di perangkat mobile yang kita miliki. PWA tidak hanya meningkatkan performa web apps agar menjadi lebih baik, tetapi juga menciptakan standar baru untuk aplikasi yang dapat diinstall dan didukung oleh setiap platform.

PWA memiliki karakteristik bersifat progresif, responsive, tidak tergantung dengan konektivitas, pengalaman penggunaan seperti menggunakan mobile apps native, selalu up-to-date, dan linkable (mudah dibagikan menggunakan url).

PWA didukung oleh teknologi yang bernama Service Worker, dimana teknologi ini memberikan fungsionalitas offline, notifikasi, update konten, dan pergantian konektifitas. Sehingga, dalam koneksi yang lambat atau koneksi yang tidak stabil, website tetap dapat terbuka dengan cepat dan mempunyai tampilan yang sama seperti terakhir dibuka melalui web browser.

Sebelum memulai menggunakan PWA, kita harus membuat Single Page Application (SPA), pembuatan SPA dan PWA menjadi pekerjaan yang tidak mudah, namun dengan adanya Vue.js proses pengembangan aplikasi tersebut menjadi lebih sederhana dan mudah dipelajari. Vue.Js memungkinkan untuk menerapkan kebutuhan pengembangan PWA dengan referensi script, library dan kustom JavaScript yang dapat kita buat. Pada training ini anda akan mempelajari bagaimana struktur PWA, pembuatan dan penggunaan Service Workers pada PWA, komunikasi antar elemen pada vue.js, dan penerapan IndexedDB untuk data store.

OBJECTIVES

  1. Mampu memanfaatkan Vue.js untuk membangun Progressive Web Application
  2. Menerapkan Service Workers untuk fungsionalitas offline pada aplikasi
  3. Memahami fungsi dan relevansi berkas manifes
  4. Mampu menyempurnakan aplikasi dengan Firebase

AUDIENCE

  1. Web Developer
  2. Programmer

PREREQUISITES

Tidak ada training khusus yang dipersyaratkan

CONTENT

1. Making Your First Progresive Web App

1.1. Introduction of PWA
1.2. Build a PWA
1.3. Structure of PWA
1.4. The App Shell Model

2. Web App Manifest

2.1. Create Manifest
2.2. The Final Manifest
2.3. Linking Manifest in
2.4. Debugging Web App Manifest

3. Service Workers

3.1. Introduction of Service Worker
3.2. Introduction Life Cycle Service Worker
3.3. Adding a Service Worker to an App
3.4. Core Technologies
3.5. Debugging Service Worker

4. Caching Strategies

4.1. Store Information
4.2. Update Files in the Cache
4.3. Responding Request

5. Working with Vue.js

5.1. Major Features of Vue.js
5.2. Components of Vue.js
5.3. Life Cycle Components of Vue.js
5.4. Communicating Components
5.5. Building VueNoteApp
5.6. PRPL Architecture Pattern

6. IndexedDB

6.1. Introduction of IndexedDB
6.2. Using IndexedDB
6.3. Opening a DB
6.4. Initiating Read/Write the Object Store
6.5. Deleting from the Object Store
6.6. Using IndexDB in VueNoteApp

7. Background Sync

7.1. Background Sync
7.2. Sync Manager

8. Push Notification

8.1. Introduction of Push Notification
8.2. Push API
8.3. Notification API
8.4. Push Notification in VueNoteApp

9. Publishing

9.1. Firebase Authentication
9.2. Sending to Firebase Hosting
9.3. Final Thougts

INSTRUCTOR

Ariyanto Adi NugrohoAriyanto Adi Nugroho, Development Manager di PT Brainmatics Cipta Informatika. Aktif sebagai trainer, konsultan, dan project manager. Menangani project eLearning system dan content project di berbagai perusahaan dan lembaga pemerintahan. Berpengalaman sebagai pengembang dan implementor eLearning dengan Moodle dan BrainTutor. Menguasai berbagai aplikasi Adobe Creative Cloud seperti Adobe Animate/Flash, Adobe Photoshop, Adobe Captivate, Adobe After Effect, Adobe Premiere dan Adobe Illustrator.

Karno Nur Cahyo, Kelahirang Tangerang – Banten. Menyelesaikan Pendidikan dasar dan menengah di SD 04 Negeri Kaliwungu dan SMP Negeri 1 Kaliwungu, Kabupaten Semarang. Menamatkan SMK di SMK Negeri 2 Salatiga. Menempuh pendidikan S1 Teknik Informatika di STMIK Nusa Mandiri Jakarta. Berpengalaman dalam proyek pengembangan software sebagai Developer, Business Analyst, System Analyst. Menguasai analisis dan desain software dan menguasai bahasa pemrograman Java, PHP Native dan PHP Framework CodeIgniter. Saat ini aktif sebagai instruktur di PT Brainmatics Cipta Informatika, sekaligus aktif sebagai System Analyst di PT IlmuKomputerCom Braindevs Sistema