Magento 2 PWA'yı oluşturmak için kapsamlı kılavuz

Yayınlanan: 2022-04-20

Magento, işletmelerin çevrimiçi mağazalarını başlatmaları için her zaman favori bir platformdur. Ancak Magento'nun avantajı nedeniyle, fırsatlarını ve müşteri deneyimlerini genişletmek için giderek daha fazla şirket bu pazara giriyor. Bu nedenle, çevrimiçi pazar oldukça rekabetçi hale geliyor. Sonuç olarak, işletmeler rakipleriyle rekabet edebilmek için her zaman en son teknolojiyi yakalamak zorundadır. Progressive Web Apps veya PWA, birçok şirketin bu uygulamayı çevrimiçi mağazalara entegre etmek istediği modern teknolojilerden biridir. Ve Magento 2 PWA mükemmel bir seçimdir. Bu yazıda size Magento 2 PWA'yı en basit şekilde kurmak için detaylı bir kontrol listesi vereceğiz.

Öncelikle Progressive Web App hakkında bilgi sahibi olmanız gerekiyor.

magento-pwa

Peki Aşamalı Web Uygulaması tam olarak nedir?

Aşamalı bir web uygulaması, yerel bir uygulama gibi görünür ve hissettirir, ancak doğrudan mobil tarayıcılarda çalışır. Bir App Store'dan herhangi bir şey indirmenize gerek yoktur. Müşteriler bunun yerine tarayıcılarında anında uygulamaya benzer bir deneyim yaşarlar.

Progressive Web App'in öne çıkan bazı özellikleri

Çevrimdışı çalışma yeteneği : Servis çalışanları – bu özellikten teknoloji sorumludur. Böylece, uygulamanın işleri çevrimdışı olarak depolamasına ve bunları almak için ağ isteklerini esnek bir şekilde yönetmesine olanak tanır. Sonuç olarak, uygulamayı çalıştırmak için kullanmamız gereken veri miktarını en aza indirmeye yol açar.

Keşfedilebilirlik ve kolay kurulum: PWA, Google veya Bing gibi normal arama motorları aracılığıyla keşfedilebilecek bazı ekstraları olan bir web sitesidir. Bu nedenle, kullanıcıların uygulama mağazalarından herhangi bir şey indirmelerine gerek yoktur. Bir PWA'nın kurulumu gerçekten kolaydır, ilk ziyaret sırasında arka planda gerçekleşir.

Telefon özelliklerinin kullanımı : PWA'lar, Android'de cihaz özelliklerine erişmek için çok sayıda ve iOS'ta birkaç daha az olanaklara sahiptir. Kameraların, GPS'in veya parmak izi tarayıcılarının uygulama benzeri bir şekilde kullanılması, kullanıcının deneyimini zenginleştirir.

Otomatik güncellemeler : Bir PWA, yayıncıların yamaları hemen uygulamasına olanak tanır. Ayrıca, içeriğin tam kontrolünü ellerinde tutmalarını sağlar. Müşteriler her zaman uygulamanın en güncel sürümünü kullanır.

Güvenlik : HTTPS protokolü kullanıldığında, veriler şifreleme nedeniyle güvenlidir ve bu nedenle ele geçirilmesi ve değiştirilmesi daha zordur. Ayrıca, kullanıcılar HTTPS'yi yayıncıların güvenlik ve güvenilirliğinin bir garantisi olarak algılar. Ve Google, onu kullanmak için arama sıralamasında ek puanlar verir.

Uygulama benzeri his : PWA'ların arkasındaki fikir, mümkün olan en iyi deneyimi web'in açık doğasına sahip uygulama benzeri bir deneyime bağlamanın bir yolunu bulmaktır.

Bildirimleri itin :   Sağlam bir mesaj stratejisinin parçası olarak push bildirimleri, kullanıcıların ilgisini çekebilir ve onları bir uygulamayı daha fazla açmaya ve kullanmaya teşvik edebilir.

Şimdi, Magento 2 nedir ve neden daha popüler hale geliyor?

Magento 2

Bildiğiniz gibi Magento, sipariş yönetimi, iş zekası ve nakliye özelliklerine sahip açık kaynaklı bir e-ticaret platformudur. Popüler Magento entegrasyonları, dosya ERP, finans ve ödeme uygulamalarını içerir

Peki, Magento 2'yi Magento 1'den ayıran nedir? Masaya hangi yeni özellikleri getiriyor?

Magento 1'in bazı eksiklikleri ile başlayalım. Platform uyarlanabilir hale getirildi. Magento'nun popülaritesinin ana nedenlerinden biri de bundan kaynaklanmaktadır. Bununla birlikte, bu esnekliğin dezavantajı, geliştiricilerin platform üzerinde çalışmaya ve onu kişiselleştirmeye devam etmesi durumunda kullanıcı arayüzünü daha karmaşık ve kullanımı zor hale getirmesidir. Bu ayarlamalar nedeniyle site de daha yavaş çalışabilir.

Magento 1, yüksek bir öğrenme eğrisine ve önemli yavaşlamalara sahip olmanın yanı sıra, mobil yanıt verme gibi rakiplerinin sunduğu özelliklerden yoksundur.

Bu sorunların çoğu Magento 2'de ele alınmaktadır. Birkaç önemli ayrım vardır:

  • Sitenizi yavaşlatabilecek en yeni PHP sürümlerini yedekler.
  • CSS3, HTML5 ve MySQL'in tümü desteklenir.
  • Magento 1'den daha hızlı sayfa yükleme süreleri (ortalama %20 daha hızlı).
  • Site mobil uyumlu mu?
  • Teknik bilgisi olmayan çalışanlar için daha kullanıcı dostu bir yönetici arayüzüne sahiptir.
  • Magento 1'de altı olan ödeme sürecindeki adım sayısını Magento 2'de ikiye indirir.

Magento 2'nin üç farklı sürümde geldiğini anlamak çok önemlidir.

  • Magento 2 Açık Kaynak (eski adıyla Magento 2 Açık Kaynak): Herkes bu ürünü Magento web sitesinden ücretsiz olarak indirebilir. Bundan sonra, kullanıcı Magento'yu kurabilir, ancak tüm barındırma, destek ve geliştirme ücretlerinden sorumludur.
  • Magento 2 Commerce (on-prem) — Bu premium şirket içi seçenek, ek özellikler ve destek içerir. Aylık fiyatının yüksek olması nedeniyle, yalnızca daha büyük şirketler bunu benimseyebilir. (Maliyetler aşağıda daha ayrıntılı olarak tartışılmaktadır.)
  • Magento 2 Commerce Cloud – Magento 2 Commerce'in bulutta barındırılan bir sürümü, kendi kendine barındırmaya gerek kalmadan şirket içi Enterprise Edition'ın tüm özelliklerine sahiptir.

PWA'yı Magento 2'de uygulamak neden son zamanlarda trend oldu?

Magento 2 PWA

Magento tüketicileri, özellikle Magento 2 PWA Studio'nun ortaya çıkmasından bu yana, Progressive Web App entegrasyonu ile oldukça ilgilendi. Web sitenizi Magento 2 PWA'ya geçirmek için bazı nedenler aşağıda listelenmiştir.

Mobil cihazlarda gelişmiş kullanıcı deneyimi

PWA'yı indirmek ve kullanıcıların mobil cihazlarına kurmak kolaydır, ancak bu harika yeteneklerin sadece başlangıcıdır. Çevrimdışı modun, arka plan senkronizasyonunun (ağ bağlantısı sabit olana kadar eylemleri erteleyin) ve diğer uygulama benzeri özelliklerin keyfini çıkarabilirsiniz.

Yerel uygulamalara kıyasla daha düşük geliştirme maliyeti ve bakım  

Yerel uygulamalar için iki farklı sürüm oluşturmanız gerekecek (biri iOS için diğeri Android için). Uygulama geliştirme ve bakım için zaman ve çabayı ikiye katlar. Ancak, her işletim sisteminde çalışabilen bir PWA oluşturmak için tek bir kod tabanı gerekir.

Cihaz-agnostisizm

Magento 2 PWA'nın görebileceğiniz en büyük avantajı cihazdan bağımsız olmasıdır. Açıkçası, bu tür programların herhangi bir cihaz ve tarayıcı ile uyumlu olduğu anlamına gelir. Müşteriler bir çevrimiçi mağazada tercih ettikleri cihazlarda alışveriş yapabilirler.

Google SERP'de en üst konum

PWA'lar ve web sitelerinin birçok ortak özelliği vardır. Google'ınki gibi en iyi arama motoru sıralamaları, onları tüm kullanıcılar için son derece erişilebilir ve uyarlanabilir hale getirir. Magento PWA'lar bu konuda yerel ve hibrit uygulamalara göre önemli bir avantaja sahiptir. SEO taktikleri, pazarlama girişimleri ve ücretli reklamların yardımıyla onları daha da keşfedilebilir hale getirebilirsiniz. Geleneksel uygulamaların reklamı öncelikle uygulama mağazaları aracılığıyla yapılır.

Bağlanabilir

Bu, PWA'ların ve web sitelerinin ortak bir özelliğidir. Birleşik Kaynak Tanımlayıcının (URI) kullanılabilirliği sayesinde bilgileri tutabilir ve durumunu yeniden yükleyebilir. Müşteriler Magento 2 PWA'nıza bağlantılar kaydedebilir, URL'leri paylaşabilir ve hatta sekmelere kaydettikleri sayfaları yeniden yükleyebilir. Aşamalı uygulamalar, bu durumda geleneksel web sitelerine benzer şekilde çalışır.

Kullanıcı tarafı güncelleme yok

Herkes bir uygulamayı düzenli olarak güncelleme ihtiyacını anlar. Bu güncellemeleri cihazlarına yüklemek son kullanıcıların sorumluluğundadır. Kullanıcı yetkilendirmesine ihtiyaç duymaz, Magento PWA güncellemeleri otomatik olarak yapılabilir. Sonuç olarak, yükseltme yapıp yapmamalarına bakılmaksızın, kullanıcılar en güncel özelliklere sahip olur.

Çevrimdışı işlem

Çevrimdışı çalışma yeteneği, bir Magento 2 PWA'nın en iyi özelliğidir. Kullanıcılar, internete erişimleri olmasa bile çevrimiçi olarak görüntüledikleri içeriğe erişebilirler. Bu, görüntülenen tüm sayfalar hakkındaki bilgileri otomatik olarak kaydeden yerleşik önbellek mekanizması ile mümkün olur.

Magento 2 PWA'lar, hedef kitleniz kötü veya vasat bir internet bağlantısına sahip bir ülkede yaşıyorsa mükemmel bir çözümdür. Bu özellik ayrıca, kullanıcılar çevrimdışı olduklarında bir işletme içinde alışveriş yapmaya devam edebildikleri için katalogdan vazgeçmeyi en az %35 oranında en aza indirir.

Push bildirimleri

Aşamalı uygulama çözümleri sayesinde anında iletme bildirimleri artık herkes tarafından kullanılabilir. Daha önce yalnızca özel akıllı telefon uygulamalarına sahip internet perakendecileri aracılığıyla kullanılabiliyordu. Google'a göre, PWA kullanıcılarının %60'ı bu uygulamaların push bildirimleri göndermesine izin veriyor. Müşterileri özel fırsatlar ve tatil indirimleri hakkında bilgilendirerek özelliği hızlı bir şekilde güçlü bir satış yaratma makinesine dönüştürebilirsiniz . Ayrıca, onlara alışveriş sepetlerindeki ürünleri hatırlatabilir ve onları mevcut ürünleri satın almaya teşvik edebilirsiniz .

Güvenlik

Magento 2 PWA'lar oldukça güvenlidir. HTTPS protokolü, veri güvenliğinden ve ortadaki adama karşı korumadan sorumlu olacaktır. Ayrıca içerik değiştirmeyi ve alışverişi de yasaklar.

Uygulama mağazası gereksinimi yok

Magento PWA ile tüm Google Play ve App Store standartlarını karşılamanız gerekmez. Uygulamanız gereksinimleri karşılamıyorsa yasaklanabilir veya uygulama mağazasından kaldırılabilir. Ayrıca, sorunları çözmek için size çok az fırsat bırakarak önceden bildirimde bulunmazlar.

İşletmeler, bu sınırlamaları aşmak için aşamalı web uygulamalarını kullanabilir. Herhangi bir yasaya veya düzenlemeye uymanız gerekmez; bu, uygulamanızın yasaklanma olasılığının daha düşük olduğu anlamına gelir.

O zaman Magento 2 PWA nasıl etkili bir şekilde oluşturulur?

Nasıl-Entegre Edilir-Aşamalı-Web-Uygulaması-PWA-in-Magento-2

Magento mağaza sahiplerinin dikkate alması gereken Magento PWA entegrasyonu için üç seçenek vardır:

Magento 2 PWA Uzantılarını Kurun

Bu, Aşamalı Web Uygulaması işlevselliğini mevcut Magento sitenize dahil etmenin en basit yaklaşımıdır. Artık çeşitli kaynaklardan çeşitli Magento 2 PWA uzantıları (hem ücretsiz hem de premium) arasından seçim yapabilirsiniz.

Artıları: Magento 2 PWA modülleri ucuzdur (0,00 ile 150 dolar arasında değişir). Ayrıca, bu uzantıları sitenize yüklemek yalnızca birkaç saat sürer.

Eksileri: Genel olarak, çoğu Magento 2 PWA uzantısı, tam Aşamalı Web Uygulaması işlevselliği sağlayamaz. Bazı modüller yalnızca "ana ekrana eklenebilir" ve hızlı web sitesi yükleme hızı, çevrimdışı mod ve arka plan senkronizasyonu gibi diğer önemli işlevleri göz ardı ederek anında iletme bildirimleri verebilir.

Magento 2 PWA Studio Kullanan PWA'nız

Magento 2.3 PWA Studio, Magento 2 web siteleri için bir PWA vitrini geliştirmemize, dağıtmamıza ve sürdürmemize yardımcı olmak üzere piyasaya sürüldü.

Artıları: PWA'nızı Magento 2 PWA Studio ile sıfırdan geliştirmek, mevcut Magento 2 PWA uzantılarını kullanmaktan daha kapsamlı bir çözümdür. Eski Magento vitrininizi, API aracılığıyla arka ucunuza bağlı bir Aşamalı Web Uygulaması (PWA) vitrini ile değiştirecektir.

Eksileri: Magento 2 PWA Studio, temel olarak PWA'lar oluşturmanıza yardımcı olacak bir araçlar koleksiyonudur. Hala yapılacak çok şey var. Son derece basit olan ve birkaç Magento varsayılan özelliğinden yoksun olan Venia vitrinini (PWA Studio demosu) düşünün.

Magento 2 PWA Temasını Kullanarak Sitenizi PWA'ya Dönüştürün

Magento 2 PWA Teması, Magento 2.3 PWA Studio, ReactJS ve GraphQL üzerine inşa edilmiş, zengin özelliklere sahip bir PWA entegrasyon çözümüdür. İki bölümden oluşur: büyük bir PWA vitrini ve vitrini Magento arka ucuna bağlayan yerleşik bir API.

Artıları: Bu, şimdiye kadar PWA'yı bir Magento 2 web sitesine entegre etmek için en umut verici yaklaşım gibi görünüyor. Başlangıç ​​olarak, bir PWA'dan beklediğimiz her şeyi sağlayabilir: yıldırım hızında yükleme süreleri (hem masaüstü hem de mobil cihazlarda), ana ekranda bir kısayol, bir açılış sayfası, tam ekran görüntü, ağ bağımsızlığı, arka plan senkronizasyon, düşük veri kullanımı ve kolay güncelleme. İkincisi, PWA vitrin demosu, sitenin tüm sayfaları için kapsamlı bir düzen ile Venia'nın varsayılan vitrininin çok daha üstün bir versiyonudur. Sonuç olarak, PWA geliştirmenizde önemli ölçüde zaman kazandıracaktır.

Eksileri: Normalde Magento 2 PWA Teması, tüm Aşamalı Web Uygulaması standartlarını karşılar ve güzel bir vitrin sunar. Ve normal bir Magento 2 ön ucu gibi görünüyor. Ancak yine de PWA vitrinini tasarımınıza uyacak şekilde değiştirmeniz gerekecektir. Ayrıca, sitenizin herhangi bir özel işlevi varsa veya üçüncü taraf uzantıları kullanıyorsa, yeni vitrin ile uyumluluğu kontrol etmeniz ve API'yi güncellemeniz gerekir.

Her yol için ne kadar ödemeniz gerekecek?

Bahsettiğimiz gibi, Magento 2 web sitelerini PWA'ya dönüştürmek için farklı maliyetlerle ilişkili üç yöntem vardır:

Magento 2 PWA Uzantıları:  

Modülü (150$'a kadar) satın almanız ve kurulum hizmeti için ödeme yapmanız (veya uzantıyı kendiniz kurmanız ve yapılandırmanız) gerekir.

Magento 2 PWA Stüdyosu:

PWA'nızı sıfırdan oluşturmak için, hem Magento 2 hem de PWA'da kapsamlı bilgiye sahip PWA geliştiricilerini işe almanız gerekir. Magento 2 PWA Studio araçlarını kullanarak PWA vitrininizi ve yeni API'nizi geliştirmek 6 aya kadar sürebilir. Bu entegrasyon için büyük miktarda para ayırmalısınız.

Magento 2 PWA Teması:

PWA vitrini ve çekirdek API zaten kurulmuş olduğundan, projenizin maliyeti öncelikle istediğiniz özelleştirme düzeyine göre belirlenir. Bu maliyet, ikinci çözümden daha düşük ve birinciden daha büyük olacaktır, ancak verdiğiniz paraya değecektir.

Çözüm

Magento 2 PWA'ya ve nasıl oluşturulacağına dair genel bir bakışa sahip olmanızı umarak bu makale boyunca size yol gösteriyoruz. Çok sayıda çarpıcı özellik ile, çevrimiçi mağazanızın etkinliğini artırmak için kesinlikle atlamaya değer. Bu nedenle, işletmeniz müşterilerin taleplerini karşılayabilir ve internet ortamında daha fazla gelişme fırsatı sunar. Ancak, bu teknoloji hakkında hala kafanız karıştıysa, Magesolution işinize yardımcı olmak için bir ortak olmaya hazırdır. Bu alandaki pek çok deneyimle, en iyi hizmeti sunacağımızdan eminiz: Magento Progresif Web Uygulaması Geliştirme . Bu nedenle, herhangi bir sorunuz varsa, daha fazla bilgi için bizimle iletişime geçin .