Magento PWA stüdyosu hakkında bilmeniz gereken her şey

Aşamalı Web Uygulamaları veya PWA, güncel özellik nedeniyle giderek daha fazla popülerlik kazanıyor. En son teknoloji sayesinde müşteri deneyimini geliştirir ve işletmeye daha fazla gelir getirir. Bu nedenle, birçok şirket PWA'nın avantajını kullanmak için bu platformu çevrimiçi mağazalar için uygulamıştır. Özellikle birçok işletme Magento'da ilerici web uygulamalarını tercih ediyor. Ardından, Magento PWA stüdyosuna daha fazla alışmanıza yardımcı olmak için size ayrıntılı bir kontrol listesi vereceğiz.

PWA stüdyosuna genel bakış

Aşamalı Web Uygulaması 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.

Aşamalı Web Uygulamasının Özelliği

Çevrimdışı çalışma yeteneği: Servis çalışanları – bu özellikten teknoloji sorumludur. Böylece, uygulamanın işleri çevrimdışı olarak saklaması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 garantisi olarak algılar. Ve Google, onu kullanmak için arama sıralamasında ek puanlar verir.

Uygulama benzeri duygu: PWA'ların ardındaki tüm 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.

Magento PWA Studio'nun bir taslağı

Magento PWA Studio'nun kökeni

Magento, çevrimiçi mağazalar işleten tüm tüccarlar için bir dizi araç yayınladı. Magento PWA Studio, bu araç setinin adıdır. Tüm farklı işletim sistemleri için yerel uygulamalar geliştirmek için çevrimiçi perakendecilere çok zaman ve para kazandıracak.

Magento uygulama benzeri web siteleri tasarlama araçları sayesinde, çevrimiçi tüccarlar mobil dönüşüm oranlarını artırabilir. Müşteriler için çapraz kanal deneyimini geliştirmenin bir sonucudur. Ayrıca Magento PWA, daha iyi bir kullanıcı deneyimi için yerel bir uygulama gibi davranmasına izin verir.

Tüccarlar, çarpıcı hızlı ön uç mimarisinden ve açık web API'lerinden yararlanabilir. Mağazalarını hızla yeni norm haline gelene dönüştürmeye yardımcı olur.

PWA Yapı Paketi

Buildpack, ışık hızında bir ön uç ve PWA oluşturmak için gerekli geliştirme ve derleme kitaplıklarını ve araçlarını içerir. PWA geliştirme için yerel ortamınızı düzenlemenize olanak tanır.

PWA Vitrini

Venia Storefront olarak da bilinen PWA Storefront, Peregrine araçları ve PWA Buildpack ile oluşturulmuş bir kavram kanıtı PWA'dır. Magento PWA Studio ve neler başarabileceği hakkında bilgi edinirken, vitrin, kategori sayfalarının ve ürün ayrıntılarının örneklerini gösterir.

Peregrin

Magento'nun Peregrine projesi, daha önce belirtildiği gibi, bir Magento PWA oluşturmak için bir dizi araç ve UI bileşeni içerir. Bileşenler, benzersiz Magento 2 PWA mağazaları oluşturmak için birleştirilebilir, genişletilebilir ve harmanlanabilir.

Magento PWA Studio'nun bazı olağanüstü özellikleri

ReactJS – ReactJS çok iyi bir performans sergiliyor ve mükemmel bir alışveriş ve geliştirici deneyimi sunuyor.

Ana Ekran Alternatifi – Magento PWA , ana ekranda indirilebilen bir mağaza sağlar. Yerel bir uygulama olarak görünecek ve çalışacak

Çevrimdışı Çalışır – PWA web uygulamaları hem çevrimdışı hem de çevrimiçi çalışabilir.

Güçlü Arka Uç – Magento'nun sağlam şirket içi arka ucu, birkaç sorunla sorunsuz bir kullanıcı deneyimi sunar.

Magento PWA Studio kullanmanın avantajı

Kapsamlı Geliştirme Araçları

Magento Studio, son teknoloji ürünü ve kapsamlı belgeler içeren PWA geliştirme araçlarını sunar. Kullanıcılar, kendi yerel PWA geliştirme ortamlarını onlarla hızlı bir şekilde düzenleyebilir.

Kolay kurulum

Magento Studio ile arka uçtan PWA'ları kurmak basittir. Uygulamayı başarılı bir şekilde başlatmak için, kullanıcıların Magento örneği URL'sini.env dosyasına eklemeleri gerekir. Sonra bir depoyu klonlayacak ve bir komut çalıştıracaksınız. Geliştirme kolaylığının en önemli hedef olduğu baştan belliydi.

GraphQL

GraphQL bildirimsel veri getirmeyi kullandığından, Magento Studio ile geliştirilen PWA'lar neredeyse hiç aşırı sorgu yüklemeye sahip değildir. Ardından, çeşitli kaynaklardan birden fazla kullanıcıyı daha iyi barındırabilir.

Topluluk Desteği

Magento, büyük bir küresel Magento PWA kullanıcıları ve işbirlikçileri topluluğuyla sonuçlanan iyi bilinen bir e-ticaret platformudur.

Magento PWA stüdyosunun mimarisi ve çerçevesi

Stüdyonun kurulumu ve kullanımı, uygulama geliştirme sürecinin başlarında hataların oluşmasını önlemek için gerçekten basittir. Bir şey düzgün şekilde düzenlenmediğinde geliştiriciler hemen uyarılır. Bu, program neredeyse tamamlandığında hataları keşfetme ve onarma konusunda zaman kazandırır.

Magento PWA stüdyosunun oluşturucusu kullanıma hazır

Oluşturucuyu yüklemeye ve ortamı özelleştirmek ve ayarlamak için zaman harcamanıza gerek yoktur. Kurulumdan sonra Magento PWA Studio ile her şey hemen çalışır. Her şey ayarlandı ve gitmeye hazır.

Hazır elemanlar uyarlanabilir

PWA Studio, çok sayıda tamamlanmış ve kullanıma hazır web sitesi bölümü içerir. Web sitenizi oluştururken, öğelerin herhangi birini veya tümünü herhangi bir kombinasyonda kullanabilirsiniz. Bu noktada hazırlanan elemanlar aynen oldukları gibi kullanılabilir. Önceden yapılmış parçalar bile geliştiricinin veya tüketicinin ihtiyaçlarını karşılayacak şekilde değiştirilebilir.

Mükemmel derecede basit yönlendirme ve önbelleğe alma

Magento PWA Studio'nun yönlendirme ve önbelleğe alma özellikleri ek harika niteliklerdir. Yönlendirme ve önbelleğe alma, her zaman yapıldıkları şekilde, hiçbir değişiklik yapılmadan yapılır. Ancak, geleneksel Magento yönlendirme ve önbelleğe alma tekniğini benimserseniz, yönlendirme ve önbelleğe alma ile herhangi bir katılıma ihtiyacınız olmayacaktır.

Magento PWA Studio ve üstesinden gelmeniz gereken eksiler

Tek Platform

Magento Studio'ya sahip olmak istiyorsanız, her mağazanın Magento 2.3 ve daha yeni sürümlerde çalışması gerekir. Uyumluluk konusunda endişelenmek gerekli olmasa da, oldukça sınırlayıcıdır.

Uyumluluk Eksikliği

Uyumluluk söz konusu olduğunda, Magento Studios'un GraphicQL özelliği onu önceki sürümlerle uygunsuz hale getiriyor.

iOS Destek Sorunları

Magento, iOS PWA bildirimlerini desteklemez ve internete bağlı olmayan iOS cihazlarıyla çalışmaz.

Doğrulama Sorunları

Yeni müşteri hesapları oluştururken doğrulama endişeleri ortaya çıkabilir. Bu, özellikle bir parola ayarlarken iOS kullanıcıları için geçerlidir. Seçilen şifre, şifre gereksinimlerini karşılamıyorsa bir bildirim teslim edilemez.

Magento PWA Studio Nasıl Kurulur (Sürüm 2 ile)

Adım 1: En son Magento sürümünü yükleyin

Magento PWA Studio'yu kurmak için önce Magento 2.3.x sürümünün kurulu olması gerekir. Magento PWA Studio Project(2.3)'ü onsuz kuramazsınız, çünkü başka hiçbir Magento sürümü onu desteklemez.

2. Adım: NodeJS'yi yükleyin

Bundan sonra NodeJS'yi (sürüm >=10.14.1) yüklemeniz gerekecek. Tekniğe aşina değilseniz, aşağıda listelenen komutu kullanın. (Bu sadece Linux kullanıcıları içindir.)

sudo apt-get kurulum düğümü

Her şeyden önce, Düğüm sürümünü kontrol etmeniz gerekir: node -v

Ardından, NPM sürümünü inceleyin: npm -v

Yüklediğiniz sürüm yukarıda gösterilenden daha eskiyse, düğümün en yeni ve kararlı sürümüne yükseltmek için aşağıdaki komutu kullanın.

sudo npm önbellek temizliği -f

sudo npm kurulum -gn

sudo n kararlı

3. Adım: Node JS'yi kurun ve çalıştırın

NodeJS'yi kurduktan ve çalıştırdıktan sonra Yarn'ı (Yarn >=1.13.0 ) kurmanız gerekecek. Yarn kurulumu için aşağıdaki komutu çalıştırın. (Yalnızca Linux işletim sistemi için geçerlidir).

sudo npm iplik yükleme -g

Şimdi iplik versiyonunu kontrol edin:

iplik -v

4. Adım:

Artık Yarn kurulduğuna göre, PWA deposunu geliştirme dizininize kopyalayın.

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

Adım 5:

Bu adımın ardından aşağıdaki komutu çalıştırarak proje bağımlılıklarını kurun.

iplik yükleme

6. Adım: .env dosyasını oluşturun

.env dosyasını oluşturmak için, PWA kök dizininden takip eden komutu çalıştırın.

(Venia teması için sizin kurduğunuz Magento'yu veya varsayılan Magento 2.3.1'i kullanabilirsiniz. Burada varsayılanı kullanıyoruz.)

MAGENTO_BACKEND_URL=”https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/” thread buildpack create-env-file paketleri/venia-concept

Ayrıca, aşağıdaki komutu kullanarak .env dosyasını oluşturabilir ve özel MAGENTO_BACKEND_URL değerinizi ayarlayabilirsiniz:

MAGENTO_BACKEND_URL=”https://YOUR_MAGENTO_BACKEND_URL/” iplik oluşturma paketi oluşturma-env-dosya paketleri/venia-concept

7. Adım: SSL sertifikasını yükleyin

SSL sertifikasını PWA güvenli bir yolda çalışırken yükleyin, SSL sertifikası oluşturmak için create-custom-Origin komutunu çalıştırabilirsiniz:

iplik oluşturma paketi oluşturma-özel kökenli paketler/venia-konsepti

Adım 8: Venia Örneği verilerini yükleyin

Ayrıca Venia Sample verilerini de yükleyebilirsiniz, package/venia-concept/deployVeniaSampleData.sh adresinde zaten mevcut olan bir bash betiği var.

bash konuşlandırmaVeniaSampleData.sh

Magento'da örnek verileri yüklemek için aşağıdaki komutları çalıştırın:

bin/magento kurulumu:yükseltme

bin/magento dizin oluşturucu:reindex

Şimdi çalıştırarak temanız için tüm yapıtları oluşturun-

iplik koşusu yapı

PWA projenizin kök dizininden ihtiyacınıza göre aşağıdaki komutlardan herhangi birini çalıştırarak sunucuyu başlatın.

geliştirme için-

iplik çalıştırma izle:venia

Tam geliştirici PWA Studio'yu çalıştırmak için

iplik koşusu izle:tümü

Yapıtlar oluşturmak ve PWA stüdyosunu sahnelemeye çalıştırmak için-

iplik çalıştırma inşa && iplik çalıştırma aşaması:venia

PWA şimdi başarıyla kuruldu. Yukarıda belirtilen komutları çalıştırdığınızda, PWA'nın çalıştığı URL'yi göreceksiniz. Ardından kurulumun başarılı olup olmadığını gösterecektir.

Çözüm

Bu makaleyi şu umutla size yol gösteriyoruz: Magento pwa stüdyosuna genel bir bakışınız var. Çok sayıda çarpıcı özellik ile, çevrimiçi mağazanızı 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 birç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.