Picodiploma

Membangun Progressive Web Apps

Disusun oleh: CodePolitan Level: Menengah - Mahir Teknologi: Estimasi: 70 jam
Bagikan kelas ini:

Deskripsi


Buatlah website yang canggih dan modern dengan menerapkan Progressive Web Apps. Materi disusun oleh Dicoding dan Codepolitan sebagai partner dalam pengembangan akademi.


20200415100232d26de3d9e0a2b828061c4403f4f82f7f.png

Membangun Progressive Web Apps (PWA) memiliki manfaat yang luar biasa, website Anda dapat diinstal pada mobile devices dan dijalankan secara offline. Selain itu, ServiceWorker sebagai salah satu komponen PWA dapat membantu meringankan traffic transaksi hingga 84% pada website Anda. Dengan menerapkan PWA, website Anda dapat menggunakan fitur push notification yang dapat menarik konsumen untuk kembali mengunjungi website Anda. Penerapan PWA sudah terbukti membantu AliExpress, bagian dari Alibaba Group, dalam meningkatkan konversi untuk pengguna baru di semua browser sebesar 104% dan di iOS sebesar 82%.

Kelas ini membahas tuntas mengenai komponen yang dibutuhkan untuk menerapkan Progressive Web Apps seperti App Shell, Service Worker, Web Push, dan Web Apps Manifest. Disusun dan diverifikasi oleh Codepolitan sebagai partner kami dalam mengembangkan akademi, materi yang disajikan terstruktur dan komprehensif.


Kenapa saya harus belajar kelas ini?

  • Website yang dibangun dengan PWA memiliki sifat aplikasi native, sehingga Anda tidak perlu menyiapkan biaya lebih untuk membuat aplikasi native.
  • PWA dapat berfungsi secara offline, sehingga pengguna dapat menggunakan website walaupun tanpa koneksi internet.
  • PWA dapat mempercepat proses pemuatan website dan mengurangi beban server.
  • PWA sudah banyak diterapkan oleh industri contohnya Twitter, Facebook, Bukalapak, Tokopedia, dsb. Ia terbukti dapat meningkatkan performa web terutama ketika diakses melalui perangkat mobile devices.
  • PWA menggunakan pendekatan mobile-first, ini berarti website yang dikembangkan dengan PWA akan berfungsi pada mobile devices tanpa masalah.


Materi apa saja yang akan dipelajari?

  • Promises and Fetch : API modern yang dapat kita gunakan untuk menulis blok kode dengan lebih mudah dan intuitif.
  • Service Worker : JavaScript yang dijalankan oleh browser di background, yang terpisah dengan kode lain di halaman web browser. Dengan menggunakan service worker, kita dapat memanfaatkan resource yang telah disimpan di dalam cache untuk ditampilkan kembali bahkan dalam mode jaringan offline.
  • Application Shell : Kerangka antarmuka aplikasi yang dibangun oleh beberapa komponen halaman dan aset lainnya. Ia disimpan lebih dahulu di dalam cache sehingga dapat tampil secara instan saat aplikasi dibuka.
  • Cache API : Cache terpisah dari cache biasa yang dikelola oleh browser. Cache jenis inilah yang dapat digunakan untuk menyimpan resource dan digunakan kembali bahkan dalam mode jaringan offline melalui service worker.
  • Indexed DB : Sistem penyimpanan lokal berbasis NoSQL di browser. Kita dapat menyimpan data apa pun di browser pengguna untuk keperluan aplikasi. Anda dapat melakukan aksi pencarian, pembaharuan dan penghapusan data.
  • Web Push : API yang dapat menerima pesan pemberitahuan dari server di background. Web Push dapat dikombinasikan dengan sistem notifikasi yaitu pesan pop-up yang muncul di perangkat pengguna. Aplikasi PWA dapat menerima event push dan menampilkan pesan pop-up meskipun pengguna sedang tidak membuka aplikasi tersebut.
  • Workbox : Koleksi library dan tool yang dapat kita gunakan untuk menghasilkan berkas service worker, precaching, routing dan runtime-caching. Workbox memudahkan kita dalam menulis kode PWA dengan sintaks yang lebih sederhana dan mudah dikelola.
  • Submission : Membuat aplikasi informasi sepak bola berbasis web dengan menerapkan sifat PWA seperti apps shell, offline capability, push notification, dan installable web apps.

Anda tentukan sendiri berapa lama waktu belajar materi kelas ini. Materi kelas didesain untuk diselesaikan dalam waktu 70 jam. Jika Anda meluangkan waktu sedikitnya 10 jam saja dalam seminggu, maka sangat dimungkinkan Anda bisa menuntaskan kelas ini dalam waktu 50 hari. Namun tidak menutup kemungkinan Anda menyelesaikan dalam waktu yang jauh lebih cepat.


Prasyarat mengikuti kelas ini adalah:

  • Memahami dasar HTML, CSS dan JavaScript. Untuk memahami ketiga pilar pengetahuan tersebut, Anda dapat mengikuti kelas Belajar Dasar Pemrograman Web terlebih dahulu.
  • Anda diharapkan sudah menyelesaikan kelas Belajar Fundamental Front-End Web Development.
  • Anda harus mandiri, berkomitmen, benar-benar punya rasa ingin tahu dan tertarik pada subjek.
  • Anda harus gigih, temukan topik yang menarik, bermain-main dan mengotak-atik ilmu yang Anda dapatkan. 
  • Sebaik apa pun materi struktur kelas ini, tak akan berguna tanpa keseriusan Anda untuk belajar, berlatih, dan mencoba. 


Spesifikasi minimal Komputer/Laptop:

  • Resolusi layar 1366 x 768 (Rekomendasi Full HD 1920 x 1080).
  • Prosesor Intel Celeron (Rekomendasi Core i3 ke atas).
  • RAM 1GB (Rekomendasi 2GB).
  • Sistem operasi Windows, Linux, atau MacOS.


Tools yang digunakan:

  • Teks Editor (VSCode, Atom, atau Teks Editor lainnya).
  • Google Chrome Web Browser.
  • Web Server for Chrome.

Apa kata lulusan Dicoding Academy?

Sudah ribuan siswa yang sukses belajar di Dicoding Academy. Mau tau pendapat dari sisi mereka? Ini adalah testimoni asli mereka. Mau tahu lebih banyak? Lihat testimoni siswa lainnya.

Pertanyaan

Bila Anda memiliki pertanyaan / kendala ketika belajar di kelas ini, Anda dapat buka tab pertanyaan-pertanyaan yang sering diajukan di FAQ

Tim Reviewer

Raka Adi Nugroho
Raka Adi Nugroho
Software Engineer at Tokopedia
  • Dicoding Graduate
Bagus Aji
Bagus Aji
Course Contributor at Dicoding
  • Programmer at CodePolitan
Toni Haryanto
Toni Haryanto
Course Contributor at Dicoding
  • Chief Information Officer at CodePolitan
Nasrul Gunawan
Nasrul Gunawan
External Code Reviewer at Dicoding Indonesia
  • Web & Mobile Enthusiast
  • UI/UX Enthusiast
Khofidin
Khofidin
IT & Traceability Manager at Austrex
  • Associate Android Developer
  • Farmer
Luthfi Alfarisi
Luthfi Alfarisi
External Code Reviewer at Dicoding Indonesia
Tio Misbaqul Irawan
Tio Misbaqul Irawan
External Code Reviewer at Dicoding Indonesia
  • Mobile and Web Enthusiast
  • Unix/Linux Enthusiast
Agista Septiyanto
Agista Septiyanto
Code Reviewer at Dicoding Indonesia
Alvin Indra Pratama
Alvin Indra Pratama
External Code Reviewer at Dicoding Indonesia
  • Front End Web Developer
  • Web Designer
Alfian Yusuf Abdullah
Alfian Yusuf Abdullah
Code Reviewer at Dicoding Indonesia
  • Associate Android Developer
  • Kotlin Enthusiast
  • UI/UX Enthusiast
Agus Fikri Suyuthi
Agus Fikri Suyuthi
External Code Reviewer at Dicoding Indonesia
  • Freelance Web Developer
Fahmi Jabbar
Fahmi Jabbar
External Code Reviewer at Dicoding Indonesia
  • Machine Learning Enthusiast
  • Mobile & Web Enthusiast
Dimas Maulana Dwi Saputra
Dimas Maulana Dwi Saputra
Academy Content Writer at Dicoding Indonesia
  • Associate Android Developer
  • Mobile and Web Enthusiast
Lukman Bahar Agung Pambudi
Lukman Bahar Agung Pambudi
External Code Reviewer at Dicoding Indonesia
  • Freelance Software Developer
  • Full Stack Developer
Ananda Dwi Prayoga
Ananda Dwi Prayoga
External Code Reviewer at Dicoding Indonesia
  • Fullstack Web Dev
  • Fullstack Android Dev
  • UI/UX enthusiast
Shaddam Amru Hasibuan
Shaddam Amru Hasibuan
External Code Reviewer at Dicoding Indonesia
  • Front-end Web Developer
  • Brand Designer
  • VR/AR Enthusiast

Silakan masuk dahulu ke Dicoding untuk dapat mengambil kelas ini

Masuk

Kunjungi Online Store Kami

Kelas ini disusun oleh: