Apa itu Aplikasi Web Progresif, atau PWA di Magento 2?

• Apa artinya Magento menjadi platform Aplikasi Web Progresif?
• Apa yang akan menjadi struktur kode PWA di Magento?
• Apa masalahnya dengan REST API dan PWA?

Apa itu Aplikasi Web Progresif?

---

• Terlihat dan berperilaku seperti aplikasi seluler.
• Mengambil keuntungan dari ponsel asli fitur perangkat, tanpa memerlukan pengguna akhir untuk mengunjungi sebuah toko aplikasi, melakukan pembelian dan men-download itu secara lokal .

---

Mengapa PWA?

• Cepat
• Aman (topik jawaban terakhir kedua)
• Responsif
• Kompatibel lintas-browser
• Mode Offline (Periksa topik terakhir dalam jawaban)
• "Instal" Seluler
• Konten yang dapat dibagikan

---

Jawaban ini juga mencakup - Instalasi Magento 2.3 dengan PWA

---

Mari kita ambil contoh Flipkart

Flipkart , situs e-commerce terbesar di India, memutuskan untuk menggabungkan kehadiran web dan aplikasi asli mereka ke dalam Aplikasi Web Progresif yang telah menghasilkan peningkatan konversi 70%

Flipkart

---

Pendekatan

---

1. Mengembangkan Flipkart Lite, Aplikasi Web Progresif
2. Menambahkan pekerja layanan untuk waktu pemuatan yang lebih cepat
3. Navigasi yang lancar dan menggulir pada 60 bingkai / detik
4. Membuat prompt "Tambahkan ke Layar Utama" untuk mendorong pengguna menambahkan halaman web seluler ke layar beranda mereka

   ---

Hasil

---

Aplikasi Web Progresif Baru membantu Flipkart meningkatkan konversi 70%

---

Flipkart juga berfungsi pada mode Offline

• Pekerja Layanan dapat dibuat skrip untuk mencegat setiap permintaan jaringan dan melayani respons dari cache bahkan ketika pengguna sedang offline.
• Pustaka Pekerja bungkus layanan yang memungkinkan menggunakan pola-pola sederhana seperti NetworkFirst, CacheFirstatau NetworkOnly. SW-Toolboxmenyediakan LRU cache yang digunakan di aplikasi Flipkart untuk menyimpan hasil pencarian sebelumnya pada halaman browse dan beberapa halaman produk yang terakhir dikunjungi.
• Toolbox juga memiliki mekanisme pembatalan TTL-based cache yang kami gunakan untuk membersihkan konten yang ketinggalan zaman. Pekerja Layanan menyediakan primitif skrip tingkat rendah yang memungkinkan ini.

---

---

TAPI ... TAPI ... TAPI ...

Apa itu Studio PWA Magento?

• • Proyek Magento PWA Studio adalah seperangkat alat pengembang yang memungkinkan untuk pengembangan, penyebaran, dan pemeliharaan etalase PWA di atas Magento 2

Proyek Magento PWA Studio menyediakan alat-alat berikut:

---

modul pwa

• Ini memiliki modul seperti pembantu, fungsi sisi server dan bertindak sebagai dasar untuk semua tema yang dibuat menggunakan Magento PWA Studio.

pwa-buildpack -

• Buildpack adalah seperangkat Webpackplugin dan alat yang digunakan untuk pengembangan tema Magento PWA.

• Ini juga digunakan untuk mengatur dan mengkonfigurasi lingkungan pengembangan lokal untuk platform Magento 2.

Ini berisi alat-alat berikut:

• PWADevServer
• Penyelesai Magento
• Plugin Komponen Root Magento
• magento-layout-loader
• Plugin Pekerja Layanan

Peregrine - Peregrine adalah seperangkat yangReact componentsdibuat untuk menangani fungsi khusus Magento sepertirouting,,root-componentspenangan tata letak, daftar produk, tampilan harga, dll.

Tema Venia -venia-conceptadalah tema demo yang dibuat oleh Magento menggunakan studio Magento PWA. Ini menampilkan semua fungsionalitas, alur kerja, dan halaman yang saat ini tersedia

PWA Studio TIDAK

• Rilis baru Magento

• Sebuah Penggantian dari semua front-end

• Aplikasi Desktop

---

---

Alat & Perpustakaan yang digunakan di PWA Studios

---

Paket web

• Fungsi utama Webpack adalah membuat satu atau lebih bundel dari dependensi dalam modul proyek Anda.

Aplikasi Shell

---

• Ukuran total lebih kecil
• Beban awal meminta tiga file: login.html, shell-1234.js,3456.js
• Muatan awal perlu dimuat: Shell + Router + content
• Shell terlihat lebih awal daripada dengan pendekatan Page Shell.

Halaman Shell

---

• Ukuran total lebih besar (mis. Konten dasbor ada di dasbor-1234.js dan 4567.js)

• Aplikasi membutuhkan waktu lebih lama untuk siap secara offline.

• Beban awal meminta hanya dua file: login.html,login-2345.js

• Muatan awal perlu dimuat: Shell + content

• Itu shell + contentterlihat lebih awal daripada dengan pendekatan App Shell.

Pendekatan hybrid dapat digunakan di mana shell dan konten dipisahkan dalam dua permintaan (lihat halaman admin sebagai contoh). Ini masuk akal ketika konten jauh lebih besar dari shell dan shell harus terlihat sebelumnya.

Bereaksi

• Pustaka JavaScript untuk membangun antarmuka pengguna.

Redux

• Pustaka JavaScript yang digunakan untuk mengelola status dalam aplikasi web.

GraphQL

• Bahasa permintaan data di sisi klien dan lapisan layanan di sisi server.

GraphQL di Magento

Otentikasi dan Skema

Mengurangi jumlah Permintaan Front-end

Render Fase

Kompatibilitas Browser Desktop

---

• Tidak didukung : IE, Safari

---

---

Kompatibilitas Browser Seluler

---

Tidak didukung : Android Webview, IE, Safari

---

Odha Lebih Aman

---

• Sebagai pengembang web, Anda mungkin tahu seberapa besar Google mendorong memiliki situs web httpsdaripada HTTP. Ancaman dunia maya selalu teratas dalam daftar untuk pengembang web dan aplikasi.
• Di masa lalu, HTTPtidak cukup aman untuk melindungi informasi pengguna.
• Situs web sekarang sedang diprogram dalam HTTPsdan mudah untuk meluncurkan Aplikasi Web Progresif di lingkungan yang aman.
• Saat memasukkan informasi pribadi dalam PWA seperti informasi kartu kredit atau detail kontak, mereka mungkin merasa aman dan memiliki ketenangan pikiran.

---

---

PWA - Mode Offline

aplikasi Wikipedia offline adalah contoh PWA yang baik yang menggunakan model shell aplikasi .

• Ini dimuat secara instan pada kunjungan berulang, tetapi secara dinamis mengambil konten menggunakan JS.
• Konten ini kemudian di-cache secara offline untuk kunjungan selanjutnya.

Aplikasi Web Progresif adalah masa depan pengembangan web tanpa keraguan. Di masa depan, situs e-commerce, restoran, dan sumber media akan beralih dari aplikasi asli ke Aplikasi Web Progresif. Namun, masih dalam tahap awal, banyak pengembang akan secara aktif mencari cara untuk memanfaatkan peluang yang diberikan oleh PWA.

---

Mari kita mulai dengan instalasi Magento 2.3 dengan PWA

1. Masukkan perintah berikut dalam DIR / var / www / html / (m203 adalah direktori Magento 2.3 saya):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. Instal Magento dengan Command Line:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin [email protected] --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Buat tema pwa dasar yang akan menjadi induk mereka untuk tema PWA Venia.

• Untuk saat ini mari kita repositori tema dasar clone pwa. https://github.com/magento-research/theme-frontend-pwa

4. Buat direktori app/design/frontend/Magento/pwadan salin semua file dan direktori tema dasar di sini.

• Mari kita periksa tema dasar tersedia atau tidak.

• Run: php bin/magento setup:upgrade

• Dan arahkan ke Admin Magento Anda - > Konten -> Tema

5. Unduh proyek studio PWA.

6. Arahkan ke direktori root instalasi Magento Anda dan buat folder symlink Pwa yang menghubungkan ke direktori modul proyek (pwa-studio / paket / pwa-module).

• dari direktori ini saya menjalankan perintah saya - / var / www / html / m230

• Ini adalah direktori tempat sumber unduhan pwa saya adalah / var / www / html / PWA /

---

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. Tautkan direktori tema juga. Navigasikan ke direktori root instalasi Magento Anda dan buat folder symlink Pwa yang menghubungkan ke direktori modul proyek (pwa-studio / paket / konsep venia).

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. Sekarang navigasikan ke direktori konsep-proyek pwa-studio proyek Anda, salin .env.distke .envfile baru dan perbarui variabel dengan URL ke toko pengembangan Magento Anda.

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. Instal tema venia dan Modul Pwa:

run: php bin/magento setup:upgrade

kita dapat melihat tema venia berhasil diinstal.

10. Konfigurasikan tema venia dari admin->Content->Configuration

11. Navigasikan ke jalur ( /var/www/html/PWA/pwa-studio-master) jalankan:

npm install

atau

npm install webpack-dev-server -g

12. Dan Akhirnya Arahkan ke /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Selamat! Anda telah mengatur lingkungan pengembangan Anda untuk proyek tema Venia.

---

PWA - Aplikasi Web Progresif adalah aplikasi web umumnya yang merupakan pengalaman pengguna web yang kaya. dalam cara:

• Andal - memuat secara instan dan juga tersedia dalam mode offline.
• Cepat - dengan cara interaksi di mana pengguna berinteraksi dengan lancar, dan juga tanpa jung atau gulir animasi.
• Terlibat - sebagaimana dinyatakan di atas kedua titik jika aplikasi dapat diandalkan & cepat maka jelas melibatkan lebih banyak pengalaman pengguna dan juga terasa seperti aplikasi alami.

"Apa artinya Magento menjadi platform Aplikasi Web Progresif?"

Karena Magento sedang mempersiapkan untuk rilis versi 2.3, ini termasuk fitur "PWA" untuk membuat frontend lebih efisien, dengan cara interaksi pengguna.

Apa masalahnya dengan REST API dan PWA?

Sebagai magento menggunakan "PWA" itu juga menambahkan "GraphQL API" untuk menyediakan alternatif sisi pengembangan sisi api dari "REST / SOAP" sebagai api "GraphQL".

Untuk mendapatkan lebih detail tentang "PWA" dan fitur baru "magento2.3 open-commerce" Anda dapat mengunjungi halaman resmi magento ini .

Progresif berarti aplikasi memuat bersama dengan data dan aset yang relevan, saat pengguna menavigasi di situs web Anda. Ini menghasilkan pengalaman pengguna akhir dengan kecepatan, kegunaan, operasi offline, dan integrasi perangkat yang lebih baik.

Web berarti ditulis dalam bahasa web (HTML, CSS, JavaScript). Ini memungkinkan Anda untuk membuat situs yang memberikan lebih banyak fungsi seperti aplikasi tanpa membuat aplikasi asli yang dibatasi untuk satu platform, seperti iOS atau Android.

Aplikasi berarti menginstal dan menjalankan kode pada perangkat atau komputer pembelanja. Melakukan hal ini menciptakan lebih banyak kecepatan dan kemampuan daripada aplikasi JavaScript satu halaman di masa lalu.

PWA pada dasarnya adalah gabungan dari halaman web reguler dan aplikasi seluler, memungkinkan pengalaman seperti aplikasi seluler untuk web.

Magento menjadi platform Aplikasi Web Progresif. Dengan kata lain, Magento membuat seperangkat alat untuk membangun toko online sebagai Aplikasi Web Progresif. Alat-alat ini akan membantu para pengembang mempelajari teknik-teknik PWA, membangun frontend PWA yang cepat, dan membuat komponen-komponen dan ekstensi-ekstensi PWA untuk digunakan kembali atau dijual di Magento Marketplace. Secara bersamaan, Magento menyebut rangkaian alat ini sebagai Magento PWA Studio.

Anda dapat memeriksa struktur kode di https://github.com/magento-research/pwa-studio

Magento PWA menggunakan GraphQL sebagai alternatif untuk REST API untuk PWA.

Untuk detail lebih lanjut tentang Magento PWA, Anda dapat mengunjungi tautan berikut:

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• Aplikasi Web Progresif adalah jalan tengah antara aplikasi seluler dan situs web yang dapat diinstal. Kami berharap dapat melihat lebih banyak lalu lintas di internet dari perangkat seluler daripada dari desktop, pada tahun 2019. PWA meningkatkan tampilan dan nuansa situs web untuk meningkatkan konversi.

PWA Menawarkan Pengalaman Cepat, Tanpa Gesekan, “Seperti Aplikasi” Mendorong Lebih Banyak Lalu Lintas, Konversi Lebih Tinggi, dan Waktu Muat Halaman yang Lebih Cepat untuk Pedagang Magento

Jadi secara umum, Magento mengubah tampilan dan nuansa untuk meningkatkan konversi. Baca lebih lanjut di sini .

• PWA biasanya dibangun dengan JavaScript, CSS, dan HTML yang memiliki tingkat kinerja dan kegunaan yang hampir identik dengan aplikasi asli. Odha memiliki kekhasan termasuk:

  1. Mereka bekerja dengan sebagian besar (jika tidak semua) browser dan perangkat (seluler dan desktop) dengan basis kode progresif (seringkali berbasis komponen seperti dalam React Js)
  2. Paskan semua layar dan faktor bentuk menggunakan desain responsif Pekerja layanan leverage untuk mengaktifkan konektivitas offline (diperlukan HTTPS)
  3. Berikan pengalaman seperti aplikasi yang memanfaatkan alat keterlibatan ulang, seperti pemberitahuan push
  4. Manfaatkan manifes aplikasi web untuk menggambarkan sumber daya yang digunakan

Anda dapat membaca lebih lanjut di sini.

• SOAP (Simple Object Access Protocol) dan REST (Representational State Transfer) adalah protokol komunikasi layanan web yang paling umum. REST lebih disukai daripada SOAP untuk sebagian besar ( dijelaskan di sini ). Oleh karena itu logis untuk melihat REST APIs digunakan bersama dengan teknologi baru seperti PWA.

Untuk menjawab hanya sebagian dari pertanyaan Anda tetapi lebih spesifik Magento 2.

PWA akan lebih mudah dibangun berkat rilis Magento 2.3 di masa mendatang.

https://www.degdigital.com/insights/magento-2-3/

Dikutip dari artikel ini:

PWA

Aplikasi Web Progresif adalah aplikasi yang dibuat untuk memanfaatkan fitur teknologi modern yang “semakin” mengurangi skala perangkat yang fitur-fiturnya tidak tersedia. Ini juga memungkinkan untuk caching data sehingga situs web dapat digunakan (sebagian atau sepenuhnya) dalam mode offline ketika layanan internet tidak tersedia. Ini umumnya dilakukan dengan menulis ujung depan situs web dengan kerangka kerja JavaScript modern / tumpukan yang jelas terpisah dari aplikasi back-end. Aplikasi JavaScript ini dapat menggunakan fitur browser (ish) baru untuk menyelesaikan tugas yang disebutkan di atas.

Magento mengakui banyak manfaat untuk ini, dan pada akhir 2017 mengumumkan upayanya dalam membangun apa yang disebut PWA Studio. PWA Studio akan berisi alat untuk mengembangkan dan menggunakan PWA untuk ujung depan Magento. Bersama PWA Studio akan muncul situs demo yang ringan (bukan fitur lengkap). Manfaat langsung akan menjadi peningkatan besar dalam kinerja front-end dan peningkatan mendekati 10X dalam kecepatan onboarding pengembang Magento baru front-end.

• Konten Terkait: PWA Ada di Sini dan Mereka Mengubah Segalanya

GraphQL

GraphQL adalah bahasa permintaan untuk menggunakan API. Dengan naiknya PWA, ada kebutuhan untuk mendapatkan jumlah data yang lebih kecil dan untuk membuat lebih sedikit permintaan API. Bahasa query GraphQL memungkinkan ini dengan memungkinkan pemohon untuk meminta subset atribut yang terbatas untuk dikembalikan tentang suatu entitas (respons yang jauh lebih kecil) dan memungkinkan Anda untuk memadukan permintaan (jumlah permintaan yang lebih kecil).

Magento saat ini mendukung permintaan REST dan SOAP API yang menggunakan Kontrak Layanan. Namun, untuk mendukung GraphQL, Magento menulis lapisan yang sama sekali baru yang berinteraksi langsung ke API Kueri. Implementasi GraphQL akan menjadi dasar bagaimana frontend PWA akan mengambil data yang dibutuhkan.

Aplikasi Web Progresif menggunakan kapabilitas peramban web dan menyediakan pengalaman seperti aplikasi seluler bagi pengguna.

Ini berkembang dari tab browser dan membuat halaman lebih mendalam dengan pengalaman pengguna gesekan rendah. Ini adalah teknologi web untuk membuat situs web yang bertindak dan terasa seperti aplikasi.

Seorang pengguna dapat meluncurkan Aplikasi Web Progresif sama seperti aplikasi asli terlepas dari pilihan browser.

Untuk pengujian demo, Anda dapat mengunjungi tautan ini: Klik Di Sini

Ini adalah produk google yang diluncurkan selama I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

Ini adalah situs web berdasarkan HTML.

Ini menyimpan cache di perangkat sehingga seseorang dapat menggunakannya secara offline juga.

Namun, pertama kali lambat yang akan naik selama kunjungan kedua.

Ini semakin diperbarui ketika perangkat mendapatkan internet sehingga tidak perlu memperbarui hal baru seperti aplikasi.

Ini memicu semua email ke server ketika perangkat mendapatkan internet jika seseorang memposting sesuatu secara offline.

Akhirnya, tidak perlu membuat aplikasi iphone / android.

Batasan Ini hanya mendukung file HTML. Jadi perangkat harus mendukung HTML.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

Setup PWA (os Linux)

Langkah 1: Instal magento 2.3.1

Langkah 2: Instal / perbarui node

Gunakan modul n dari npm untuk meningkatkan simpul

sudo npm install n -g

Untuk versi stabil terbaru:

sudo n stable

Untuk versi terbaru:

sudo n latest

Langkah 3: Instal / perbarui utas:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Langkah 4: Instal node-gyp - Alat bantu addon bawaan Node.js

sudo npm install -g node-gyp

Langkah 5: Mengkloning repositori PWA Studio

Buka root html dan jalankan:

git clone https://github.com/magento-research/pwa-studio.git

Setelah menjalankan ini, Anda akan mendapatkan folder pwa-studio

Langkah 6: Instal dependensi PWA Studio

sudo yarn install

Langkah 7: Tentukan server backend Magento

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

Contoh perintah:

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

ubah file .env (ini akan menjadi URL magento Anda, bukan url admin):

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

Langkah 8: Sekarang buat build

sudo yarn run build

Langkah 9: Jalankan server

sudo yarn run watch:venia

Mulai lingkungan pengembangan etalase Venia saja.

sudo yarn run watch:all

Menjalankan pengalaman pengembang penuh PWA Studio, yang meliputi pemuatan ulang Venia dan Buildpack / Peregrine bersamaan.

sudo yarn run build && yarn run stage:venia

Menghasilkan membangun artefak dan menjalankan lingkungan pementasan, yang menggunakan lebih banyak aset terkompresi dan lebih mencerminkan produksi.

Setelah Anda menjalankan salah satu dari perintah di atas Anda akan mendapatkan url virtul yang dibuat oleh PWA.

CATATAN: jika Anda pengguna lama maka gunakan sudo.

Ikuti Magento 2 dokumen resmi dev:

https://devdocs.magento.com/guides/v2.3/pwa/