Magento
Magento adalah platform berbasis sumber PHP terbuka untuk membangun solusi e-commerce. Dibangun oleh perusahaan Magento (sekarang bagian dari Adobe), ini digunakan oleh lebih dari 350.000 pengembang di seluruh dunia. Ini memungkinkan pembuatan etalase digital yang sangat dapat disesuaikan untuk keperluan Bisnis-ke-Pelanggan dan Bisnis-ke-Bisnis. Magento 2, versi transformasi dari Platform E-commerce Magento, hadir dengan arsitektur baru, struktur kode, dan desain basis data.
a) Gambaran umumPlatform Magento dibangun di atas PHP dan MySQL. Selama masa 10 tahun (versi 1.0 dirilis pada Maret 2008 dan versi 2.0 pada November 2015, telah mengalami perubahan dalam hal struktur dan pola pengembangan dan sekarang dalam versi utama kedua, Magento 2.
Struktur Magento terdiri dari dua bagian utama, satu menjadi back-end, dengan basis data dan MySQL, dan antarmuka Model, Data dan Layanan, seperti yang dapat dilihat pada gambar 3. Ini terhubung langsung dan digunakan dalam Blok Magento, Tata Letak, dan Template, yang akan didefinisikan sebagai ujung depan aplikasi.
b) Pencarian produkSalah satu fitur menonjol di situs web apa pun adalah fitur pencarian produk, yang memungkinkan pengguna mengetikkan istilah untuk mencari produk berdasarkan. Setelah hasil pencarian dikumpulkan, pengguna biasanya dapat mengurutkan atau memfilter berdasarkan kategori atau atribut produk.
Di Magento, pencarian biasanya menggunakan MySQL, Solr, atau Elasticsearch untuk mengindeks katalog. Pengindeksan katalog menentukan hasil apa yang dikembalikan ke etalase saat memasukkan istilah pencarian baru atau mengubah opsi penyaringan dari hasil yang sudah dikumpulkan.
c) Pencarian ElastisElasticsearch adalah mesin pencari sumber terbuka dan gratis yang dibangun di atas Apache Lucene. Ini terutama digunakan ketika berhadapan dengan sejumlah besar data dan ketika perlu untuk cepat mengambil data itu. Saat menggunakan MySQL, permintaan data bisa sangat lama ketika memiliki banyak data. Dengan demikian, titik penjualan utama Elasticsearch adalah melipatgandakan kecepatan permintaan ratusan. Ini berfungsi dengan mengindeks data ke dalam dokumen yang memiliki kunci dan nilai dan dilengkapi dengan API yang memungkinkan untuk mengambil dokumen yang diindeks ini.
Saat digunakan di toko Magento, katalog diindeks dalam simpul Elasticsearch. Ini mudah dikonfigurasi dengan hanya mengaktifkannya dan menentukan dari panel admin toko, alamat IP dan port host di mana node Elasticsearch berada.
d) Cari APIMagento memiliki cukup banyak titik akhir REST API, salah satunya yang dapat digunakan untuk mencari produk. Titik akhir API pencarian ini diambil karena data mengirim larik yang disebut kriteria pencarian, yang memiliki struktur sebagai berikut
Untuk membuat permintaan, klien harus mengirim permintaan GET ke jalur tertentu yang ditambahkan ke URL dasar toko. Pathnya adalah / rest / V1 / search /? yang kriteria pencarian ditambahkan.
2. ReactJS
a) Bereaksi sebagai AlatReact adalah perpustakaan JavaScript yang dibuat oleh Facebook dan dirancang untuk membangun antarmuka pengguna. Itu bergantung pada penggunaan komponen dan status untuk merender konten dinamis pada halaman web tanpa perlu memuat halaman. Ini adalah salah satu perpustakaan JavaScript yang paling populer dan didukung untuk antarmuka UI hari ini.
Tidak seperti solusi JavaScript yang lebih lama, yang melibatkan pemicu perubahan pada halaman secara manual, Bereaksi “tahu” ketika UI perlu diperbarui dan dirender ulang pada halaman saat status komponen berubah. Gagasan utama yang membedakan React dari perpustakaan atau kerangka kerja lain (misalnya AngularJS, Knockout) adalah penggunaan "virtual DOM", yang meningkatkan kinerja dengan mengurangi jumlah perubahan yang terjadi pada DOM.
b) Bereaksi DOM virtualDOM virtual React secara teknis seperti apa rasanya. Ini adalah DOM yang dibuat ketika komponen membuat dan ketika status berubah. Pendekatan yang digunakan adalah membuat DOM virtual baru ketika beberapa elemen perlu merender ulang dan membandingkannya dengan representasi DOM virtual lain dari keadaan aplikasi sebelumnya, menjadikan "diff" menggunakan algoritma dan membuat ulang di DOM hanya dengan elemen yang perlu diubah.
DOM virtual adalah representasi penuh DOM tanpa menjadi DOM yang sebenarnya, yang berarti bahwa proses membuat DOM virtual baru jauh lebih cepat daripada membuat DOM halaman aktual. Akibatnya, karena Bereaksi menciptakan DOM virtual baru setiap kali sesuatu perlu dirender, itu sebenarnya tidak perlu tahu apa yang telah berubah. Ini berarti bahwa pengembang tidak perlu mengontrol proses rendering karena Bereaksi kemudian akan mengubah DOM halaman hanya ketika perubahan yang sebenarnya diperlukan. Dari segi kinerja, ini adalah salah satu metode terbaik dan paling cerdas untuk membuat kembali bagian DOM yang perlu diubah.
c) Perpustakaan manajemen negaraSaat menggunakan pustaka JavaScript, seperti Bereaksi, pengembang membuat komponen yang dalam banyak kasus stateful, artinya setiap komponen memiliki status yang dapat berubah dan yang memicu pembaruan komponen. Ketika aplikasi menjadi besar dengan banyak komponen yang saling berhubungan, itu bisa menjadi rumit dan keadaan mungkin perlu diteruskan dari orang tua ke anak-anak dan sebaliknya. Untuk mengatasi masalah ini, perpustakaan manajemen negara ada. Mereka memungkinkan menjaga status aplikasi di satu tempat untuk kemudahan manajemen negara. Dua perpustakaan paling populer yang digunakan bersama React adalah Redux dan MobX.
3. Bereaksi dan Magento
Magento 2.3 menggunakan alat baru yang disebut PWA Studio. Ini adalah alat Aplikasi Web Progresif yang akan memungkinkan pengembang untuk bekerja dengan Magento dengan cara "tanpa kepala", yang berarti bahwa frontend tidak terikat langsung ke backend dan komunikasi dilakukan melalui API.
Hingga saat ini, antarmuka pengguna Magento dibuat dengan menggunakan apa yang disebut "blok" yang memiliki templat (file phtml) dan blok PHP. Data sering diberikan pada pemuatan halaman melalui blok ini dan model dan antarmuka yang berasal dari backend.
PWA Studio menggunakan React, Redux dan webpack untuk pengembangan.
a) Apa itu Aplikasi Web Progresif (PWA)?Aplikasi Web Progresif adalah aplikasi web yang menerapkan kemampuan web (HTML, CSS, Javascript) untuk memberikan pengalaman pengguna yang luar biasa meniru aplikasi asli. Lebih khusus, PWA dapat berfungsi seperti aplikasi asli dengan ikon di layar beranda seluler, halaman pembuka (setelah membuka aplikasi), tampilan layar penuh, pemberitahuan push, dan sebagainya.
Semua PWA harus memastikan tiga kriteria penting: Cepat (merespons interaksi pengguna hampir secara instan), Andal (dapat bekerja di bawah kondisi jaringan yang buruk) dan Terlibat (memberikan pengalaman seperti aplikasi yang halus).
Ada beberapa perbedaan utama antara PWA dan aplikasi asli:- Aplikasi asli hanya dapat berjalan di sistem operasi tertentu (iOS atau Android) sementara PWA didukung oleh browser seluler dan didukung di iOS dan Android.
- Anda harus mengunduh aplikasi asli dari toko aplikasi; sementara itu, PWA dapat diinstal dengan cepat setelah menambahkan ke layar beranda.
- Pengguna harus mengakses toko aplikasi mereka untuk mendapatkan versi terbaru dari aplikasi asli tetapi menyegarkan untuk mendapatkan pembaruan PWA.
- Karena PWA berjalan langsung di peramban web, pemilik toko lebih mudah berbagi dan mempromosikan PWA daripada aplikasi asli. PWA bekerja atas permintaan tanpa menggunakan memori perangkat seperti aplikasi asli
b) Magento dan PWAPada 2017, Magento berkolaborasi dengan Google untuk menghadirkan fitur PWA terbaik ke platform Magento pada akhir 2018. Magento 2.3 dirilis pada 28 November 2018, dengan banyak pembaruan yang mengesankan dan Magento PWA adalah salah satunya.
Magento, pada kenyataannya, adalah salah satu platform e-commerce pertama yang memungkinkan para penggunanya untuk sepenuhnya memanfaatkan potensi PWA. Magento juga telah memperkenalkan PWA Studio yang menawarkan alat yang diperlukan bagi pengembang untuk berhasil membuat dan memelihara etalase PWA di atas Magento.
c) Mengapa Kita Harus Menerapkan PWA Di Magento 2?
Integrasi Aplikasi Web Progresif telah menarik perhatian besar dari pengguna Magento, terutama ketika Magento 2 PWA Studio dirilis. Berikut adalah tiga motivasi utama untuk mengonversi situs web Anda ke Magento PWA:
- Pengalaman pengguna yang ditingkatkan pada perangkat seluler: Mendapatkan PWA di ponsel pengguna menjadi mudah, tidak perlu mengunduh, tetapi itu hanya pintu sebelum mereka mengalami fungsi luar biasa seperti mode offline (mengakses aplikasi bahkan ketika kehilangan konektivitas Internet Anda), sinkronisasi latar belakang (tunda) tindakan hingga koneksi jaringan stabil) dan fitur seperti aplikasi lainnya.
- Biaya pengembangan & pemeliharaan yang lebih rendah dibandingkan dengan aplikasi asli: Untuk aplikasi asli, Anda harus mengembangkan dua aplikasi terpisah (satu untuk iOS, dan lainnya untuk Android), yang mengarah pada waktu dan upaya dua kali lipat untuk pengembangan dan pemeliharaan aplikasi. Di sisi lain, basis kode tunggal diperlukan untuk membuat PWA yang dapat berjalan terlepas dari sistem operasi.
- PWA di situs web Magento 2 bukan hanya tren yang hangat, ini akan menjadi masa depan aplikasi: Banyak toko Magento telah mengadopsi teknologi ini dan menemukan bahwa kepuasan pengguna ponsel mereka meningkat secara signifikan.
d) Mengapa Magento berkonsentrasi pada PWA?Grafik di atas menunjukkan bahwa 63,5% dari penjualan e-commerce pada tahun 2018 terjadi melalui ponsel dan perangkat tablet. Pada 2019, penjualan melalui perangkat genggam diharapkan mencapai 67,2%.
Karena m-commerce mendorong lebih banyak penjualan online, Magento telah mengambil langkah bijak untuk membawa tren maju seperti PWA ke platformnya.
e) Bagaimana cara Magento PWA meningkatkan bisnis online?
Kecepatan luar biasa - Satu faktor penting untuk semua toko online adalah kecepatan. Jika situs seluler membutuhkan lebih dari tiga detik untuk memuat, akan ada 53% penurunan kunjungan seluler. Dengan kata lain, 53% pelanggan akan meninggalkan situs web jika perlu memuat lebih dari tiga detik. Odha akan memainkan peran utama di sini karena mereka sangat cepat. Alasan untuk PWA menjadi lebih cepat adalah caching tingkat browser yang dimungkinkan karena pekerja layanan. PWA menggunakan pekerja layanan untuk melakukan pra-cache bagian dari aplikasi web untuk memuat secara instan ketika pengguna membukanya di waktu berikutnya.
Kompatibilitas lintas platform - PWA dapat berjalan dengan lancar di hampir semua browser dan platform seluler yang banyak digunakan. Ini termasuk browser seperti Chrome, Safari, Edge, dan Firefox. Basis kode web tunggal sudah cukup untuk berjalan di berbagai platform, termasuk desktop. Karenanya, bisnis tidak perlu mengembangkan dan memelihara aplikasi untuk platform yang berbeda. Selain itu, PWA tidak harus diperbarui dari app store. Pembaruan dapat disampaikan dalam waktu nyata seperti halnya sebuah situs web.
Desain responsif - Menerapkan PWA akan menghasilkan pengalaman yang konsisten di seluruh perangkat seperti desktop, ponsel, dan perangkat tablet. Ini akan membantu dalam meningkatkan pengalaman pelanggan. Google telah mengatakan bahwa situs dengan desain web yang responsif akan peringkat lebih baik dalam hasil pencarian Google. Karenanya, menerapkan PWA dapat membuat peringkat situs lebih tinggi dalam hasil pencarian Google.
Dukungan offline - Sebagian dari situs PWA lengkap dapat dibuat untuk bekerja offline. Misalnya, pelanggan dapat menelusuri produk situs e-commerce Anda dan dapat menambahkannya ke troli tanpa konektivitas internet, asalkan mereka telah mengunjungi halaman sebelumnya. Pelanggan bahkan dapat memesan secara offline, setelah internet terhubung pesanan akan diproses.
SEO-friendly - Karena situs PWA sangat menarik dan dapat diandalkan, pengunjung mungkin tinggal lebih lama dari waktu biasanya. Juga, faktor-faktor seperti kecepatan, dukungan offline dan sebagainya akan berkontribusi pada keterlibatan pengguna yang tinggi. Keuntungan lain yang signifikan dari menggunakan PWA dalam hal SEO adalah "indeks mobile-first". Google baru-baru ini mengumumkan bahwa versi seluler suatu situs akan diindeks terlebih dahulu. Ini berarti bahwa situs yang tidak memiliki versi ramah seluler tidak akan berkinerja baik di peringkat.
Pemberitahuan push -
Pemberitahuan push adalah pesan yang dikirim sebagai pemberitahuan dari aplikasi. Mereka dikatakan meningkatkan keterlibatan hingga 88%. Pemberitahuan push penting untuk bisnis e-commerce agar pelanggan mendapat informasi tentang penawaran, penawaran, dan pembaruan pemesanan terbaru.
Tambah ke layar beranda - Ikon aplikasi, yang terlihat seperti ikon aplikasi asli, dari situs PWA dapat ditambahkan ke layar beranda smartphone. Pengguna dapat mengklik ikon dan mengunjungi situs secara langsung alih-alih pergi ke browser dan kemudian ke situs web. Ini akan meningkatkan waktu yang dihabiskan oleh pengguna pada aplikasi yang pada akhirnya akan menghasilkan tingkat konversi yang lebih tinggi.
f) Apa manfaat yang bisa dijanjikan oleh PWA untuk bisnis e-commerce?Karena PWA menggabungkan yang terbaik dari dua dunia - aplikasi asli dan web seluler, mereka menyelesaikan dua masalah signifikan yang dihadapi oleh industri e-commerce pada saat yang sama:
ü Tingkat Konversi Tinggi - Konversi di web seluler lebih sedikit jika dibandingkan dengan konversi di aplikasi seluler. PWA memberikan pengalaman seperti aplikasi yang mulus, dan dikombinasikan dengan fitur-fitur seperti dukungan offline, kecepatan, dan kompatibilitas lintas platform; tingkat konversi bisa naik.
ü Peningkatan jumlah pengguna - Pelanggan hanya mengunduh aplikasi seluler dari bisnis e-commerce yang sudah mapan. Dengan PWA, pelanggan dapat menambahkan PWA dari toko online ke layar beranda ponsel mereka hanya dengan mengklik tombol.
g) Metode Mengkonversi Situs Web Magento 2 Menjadi PWA?- Instal Magento 2 PWA Extensions
- Buat PWA sendiri Menggunakan Magento 2 PWA Studio
- Konversi Situs Menjadi PWA Menggunakan Tema Magento 2 PWA
h) studi kasus PWAAliExpress
AliExpress adalah salah satu bisnis e-commerce terbesar, tidak hanya di Cina tetapi juga secara global. Begitu mereka menerapkan PWA, mereka melihat hasilnya dalam hitungan hari. Ada 74% peningkatan dalam waktu yang dihabiskan di situs web mereka, dan tampilan halaman menjadi dua kali lipat.
Flipkart
Flipkart adalah toko e-commerce terbesar di India dan meluncurkan Flipkart Lite sebagai PWA-nya.
Waktu pengguna di situs meningkat menjadi 3,5 menit dengan PWA, sebelumnya hanya 70 detik untuk aplikasi asli. Tingkat keterlibatan meningkat menjadi 40% dan konversi 70% lebih besar terlihat dari pelanggan yang datang melalui fitur Tambahkan ke Layar Beranda. Penggunaan data juga berkurang menjadi sepertiga.
OLX
OLX adalah pasar terkemuka di India, dan rasio pentalannya tinggi untuk seluler-web. Setengah dari traffic mereka berasal dari mobile-web, dan mereka memilih PWA untuk menyelesaikan masalah mereka.
Setelah menerapkan PWA, rasio pentalan turun sebesar 80%, dan Rasio Klik Tayang (RKT) pada Iklan naik 146%. Dengan bantuan pemberitahuan push, tingkat keterlibatan naik 250%.
Jumia
Jumia adalah toko e-commerce yang populer di Afrika, dan setelah menyaksikan manfaat PWA, mereka telah menerapkan PWA untuk operasi mereka yang lain seperti Jumia Travel. Lalu lintas ke PWA mereka meningkat 12 kali lebih banyak dari lalu lintas gabungan aplikasi asli - baik Android dan iOS. Penggunaan data berkurang lima kali dan data 2x lebih sedikit diperlukan untuk menyelesaikan transaksi pertama. Selain itu, penyimpanan data yang dibutuhkan berkurang 25x.
Konga
Konga adalah pemain besar di Nigeria, dan mereka menggunakan PWA untuk mengurangi konsumsi data. Dengan menerapkan PWA, beban awal mengambil data 92% lebih sedikit dan untuk menyelesaikan transaksi pertama data 82% lebih sedikit diperlukan.
Bisnis yang menggunakan fitur PWA terbatasUntuk memanfaatkan potensi PWA sepenuhnya, situs harus dibangun dari awal. Ini bisa sangat mahal. Namun, hanya dimungkinkan untuk mengintegrasikan fitur PWA yang diperlukan ke situs web yang ada.
Bisnis dapat berkonsentrasi pada fitur-fitur yang akan menciptakan dampak maksimal, dan mengimplementasikannya. Ini juga akan meningkatkan pengalaman pelanggan secara signifikan. Mari kita lihat contoh beberapa bisnis yang menggunakan fitur PWA yang dipilih.
AirberlinAirBerlin memanfaatkan fungsi offline PWA untuk menawarkan dukungan offline yang andal kepada pelanggan mereka di bandara. Dukungan offline ditambahkan dan waktu muat awal dikurangi menjadi kurang dari satu detik. Ini memungkinkan penumpang mereka untuk mengakses boarding pass dan detail perjalanan tanpa konektivitas internet.
Pos cuciThe Washington Post membangun versi PWA sederhana menggunakan demo PWA untuk feed berita utama mereka. Mereka fokus pada kecepatan. Waktu buka halaman dikurangi menjadi 80 ms. Anda dapat melihat demo langsung produk ini di WAPO.com/PWA. Karena mereka melihat hasil yang luar biasa, mereka memutuskan untuk menggunakan PWA untuk pengalaman web inti mobile mereka.