- Apa artinya Magento menjadi platform Aplikasi Web Progresif?
- Apa yang akan menjadi struktur kode PWA di Magento?
- Apa masalahnya dengan REST API dan PWA?
Jawaban:
Apa itu Aplikasi Web Progresif?
Mengapa PWA?
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%
Pendekatan
Aplikasi Web Progresif Baru membantu Flipkart meningkatkan konversi 70%
Flipkart juga berfungsi pada mode Offline
NetworkFirst
, CacheFirst
atau NetworkOnly
.
SW-Toolbox
menyediakan LRU
cache yang digunakan di aplikasi Flipkart untuk menyimpan hasil pencarian sebelumnya pada halaman browse dan beberapa halaman produk yang terakhir dikunjungi.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 menyediakan alat-alat berikut:
pwa-buildpack -
Buildpack adalah seperangkat Webpack
plugin 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:
Peregrine - Peregrine adalah seperangkat yangReact components
dibuat untuk menangani fungsi khusus Magento sepertirouting
,,root-components
penangan tata letak, daftar produk, tampilan harga, dll.
Tema Venia -venia-concept
adalah 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
login.html
, shell-1234.js
,3456.js
Shell + Router + content
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 + content
terlihat 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.
GraphQL di Magento
Otentikasi dan Skema
Mengurangi jumlah Permintaan Front-end
Render Fase
Kompatibilitas Browser Desktop
Kompatibilitas Browser Seluler
Tidak didukung : Android Webview, IE, Safari
Odha Lebih Aman
https
daripada HTTP
. Ancaman dunia maya selalu teratas dalam daftar untuk pengembang web dan aplikasi.HTTP
tidak cukup aman untuk melindungi informasi pengguna.HTTPs
dan mudah untuk meluncurkan Aplikasi Web Progresif di lingkungan yang aman.PWA - Mode Offline
aplikasi Wikipedia offline adalah contoh PWA yang baik yang menggunakan model shell aplikasi .
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 --admin-email=admin@admin.com --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.
4. Buat direktori app/design/frontend/Magento/pwa
dan salin semua file dan direktori tema dasar di sini.
Mari kita periksa tema dasar tersedia atau tidak.
Run: php bin/magento setup:upgrade
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.dist
ke .env
file 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:
"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 .
If you run a REST call such as GET /V1/products/:sku on a simple product, the system might fetch more than 100 lines of data. If all you need is the current price, the call has returned significantly more information than you need. With GraphQL, a query against the same SKU could return just the price.
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:
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:
Anda dapat membaca lebih lanjut di sini.
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.
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: