Magento PWA Studio’ya Başlarken – Lars Roettig

In: Genel


6 dakika okuma

GitHub’daki gönderiyi düzenle

Bu blog yazısı iki alanı kapsar. İlk kısım daha çok iş açısından. İkinci bölümde, PWA Studio ile nasıl sağlam bir proje oluşturabileceğinizi ele alacağız.

PWA, gereksinimlerim için doğru teknoloji mi?

Tüm yazılım projelerinde olduğu gibi, neden ile başlamalıdır. Bir müşteri veya geliştirici, aşamalı bir web uygulaması (PWA) Projesi’nden ne bekleyebilir?

Tecrübelerime göre, yeni teknoloji ortaya çıktığında, paydaşlar önce herhangi bir katma iş değeri veya gereksinimi hakkında soru sormazlar. Ancak çoğu zaman iyi bir sebep olmadan heyecan trenine atlayın. Bence, daha iyi bir yaklaşım kullanmak olabilir neden, nasıl, ne (altın daire) başsız teknolojilerle bir Projeye başlamadan önce. Neden çok müşteri odaklı olmalı, aynı zamanda organizasyon stratejilerinizi de unutmamalısınız?

Neden Bir sonraki projeyi (PWA) olarak inşa etmek ister miyiz?

  • Akıllı telefon kullanıcılarımız için daha iyi bir müşteri deneyimi bekliyoruz.
  • Sorunsuz bir şekilde entegre edilmiş bir yapılandırıcı, müşteri deneyimi hedefimize de katkıda bulunabilir.

Nasıl PWA müşteri deneyimini iyileştiriyor mu?

  • Çevrimdışı destek (kısa kesintileri işlemek için)

Ne Bu yeni teknolojiyi kullanmanın avantajı nedir?

  • İş mantığı ve kullanıcı arayüzü arasında bölün
    • İş mantığıyla testler yazmak ve bulut değişimini görüntülemek için daha iyi
  • Ön Uç Ekibinizin Magento ön uç yığını yüksek giriş bariyeri hakkında bilgi sahibi olması gerekmez

Ne Başsız bir ön uç inşa etmenin teknik takası nedir?

  • Backend (PHP) ve Frontend (React, GraphQL) arasında bir sızıntı
  • Arka uçta ve ön uçta yeni bir özellik oluşturmanız gerekiyor

Ne PWA Projemin hedef grubu nedir?

Özellikle büyük e-ticaret projeleri için geleceğin başsız olduğunu düşünüyorum. Ön ucun ve arka ucun ayrılması, karmaşıklığı evcilleştirmek için faydalı mı? Adobe Experience Manager’a dayalı iyi bir İçerik Ticareti stratejisi, günümüzde giderek daha fazla talep görmektedir. Gelecekte, tüm Adobe ürünlerinden başsız bir vitrinde daha sorunsuz entegrasyon bekliyordum. PWA’ya bu kadar dahil olmamın sebeplerinden biri de buydu. Yeni PWA teknolojisi ile gerçek projelerde ilk deneyimi kazanmanın şimdi tam zamanı.

Kendi PWA Studio Teması nasıl oluşturulur

Bazı önemli teknik ve İş stratejileri toplantılarından sonra, PWAStudio’ya dayalı bir vitrin oluşturmaya karar verdiniz. Magento’nun (Adobe Commerce) bir Storefront oluşturması için daha birçok çözüm olduğunu biliyorum. Deneyimlerime göre, Adobe tarafından geliştirilmeyen bir ürün Projenizi getiriyor, destek ve sürdürülebilirlik açısından ideal bir durum değil. PWA Studio hakkında önemli ölçüde sevdiğim şey, API’lerin genişletilebilirliğidir.

React ortamında çok yaygın değildirler ancak kendi vitrin deneyiminizi geliştirmede son derece faydalıdırlar. Bir projeye başlamadan önce geliştirme ekibinizin React, HTML, CSS, Webpack hakkında bilgi sahibi olduğundan emin olmalısınız. Onlar kullanılmış bir temeldir.

Özet Blog yazısı:
https://marcin-kwiatkowski.com/how-to-extend-pwa-studio-with-new-features

İskele ile bir PWA Teması Oluşturun

Bu eğitimde, genişleteceğiz Ana ve bizim Üst Çubuk sitemizin ilk öğesi olarak bileşen.

Deneyimlerime göre, Adobe tarafından geliştirilen Proje iskelesi komutu, bir projeye başlamak için mükemmel bir yoldur. PWA Studio projesini ilk benimseyenler çatallandı ve Çekirdek Ekip bu uygulamayı kullanmamanızı tavsiye ediyor. İskele ile Magento 2’nin üzerine kendi PWA Temamızı oluşturma fırsatına sahip olmalıyız. https://magento.github.io/pwa-studio/pwa-buildpack/scaffolding/

Ancak daha iyi sürdürülebilirlik elde etmek için bazı ince ayarlarınızın olması yardımcı olacaktır.

Yeni bir Proje oluşturma komutu:

Bunu terminalinizde yürütün

yarn create @magento/pwa

Şuna benzemelidir:

Yalnızca local-intercept.js ile bir proje üzerinde çalışıyorsanız, bu dosya çok hızlı bir şekilde kafa karıştırıcı hale gelir. Yükleyeceğiniz bir iplik uzantısı oluşturuyorum ve daha iyi bakımı yapılabilir bir proje elde ediyorum. Size izin verir .targetables.js büyükleri bölmeye yardımcı olan herhangi bir yetkinlikte local-intercept.js bileşen başına bir dosyada ayrıca css üzerine yazma ve uzantısına izin verir.

Bunu terminalinizde yürütün

yarn add @larsroettig/component-targetables

Projenizi Değiştirin local-intercept.js dosya:

local-intercept.js

const {
  componentTargetablesDefinitions,
} = require('@larsroettig/component-targetables');
 
function localIntercept(targets) {
  const { Targetables } = require('@magento/pwa-buildpack');
  const targetables = Targetables.using(targets);
 
  const extendLocalIntercept = new ExtendLocalIntercept(targetables);
  extendLocalIntercept.allowCustomTargetables();
  extendLocalIntercept.allowCssOverwrites();
}

bir ekleyelim Bedava hediye başlıktan önce

kaynak/özel/bileşenler/FreeGift/freeGift.js

import React from 'react';
import { useStyle } from '@magento/venia-ui/lib/classify';
import { FormattedMessage, useIntl } from 'react-intl';
import { BrowserPersistence } from '@magento/peregrine/lib/util';
 
import defaultClasses from './freeGift.css';
const storage = new BrowserPersistence();
 
const FreeGift = props => {
    const classes = useStyle(defaultClasses, props.classes);
    const { locale } = useIntl();
 
    const value = 20; // schould be fetch via graphql
 
    // fetchs the current currency from storage price compont
    const currencyCode = storage.getItem('store_view_currency') || 'USD';
 
    // sample to format a number price comp cloud be used here instad
    const amount = new Intl.NumberFormat(locale, {
        style: 'currency',
        currency: currencyCode
    }).format(value);
 
    return (
        <div className={classes.root}>
            <span>
                <FormattedMessage
                    id="freeGift" // Description should be a string literal
                    defaultMessage="Free Gift if you order for more then <b>{amount}</b>" // amount should be a string literal
                    values={{
                        amount,
                        // replace <b> tag via span with blod styling
                        b: chunks => (
                            <span className={classes.msg}>{chunks}</span>
                        )
                    }}
                />
            </span>
        </div>
    );
};
 
export default FreeGift;
.root {
    background-color: #baa683;
    text-align: center;
    padding: 1rem 0;
    color: rgb(var(--venia-global-color-gray-50));
}
 
.msg{
    font-weight: var(--venia-global-fontWeight-bold);
}

Bizim durumumuzda hedeflememiz gerekiyordu node_modules/@magento/venia-ui/lib/components/Main/main.js
bunu yapmak için altında dosya oluşturmamız gerekiyor src/components/Main/main.targetables.js

src/components/Main/main.targetables.js

/**
 * @param {MainComponent} MainComponent
 * @see @magento/venia-ui/lib/components/Main/main.js
 */
const interceptComponent = MainComponent => {
    // Adds the import to our main component
    MainComponent.addImport(
        "FreeGift from 'src/custom/components/FreeGift/freeGift.js'"
    );
    // Add our FreeGift component before <Header />
    MainComponent.insertBeforeJSX('Header', '<FreeGift />');
};
 
exports.interceptComponent = interceptComponent;

** Dönüştürmeden sonra çekirdekteki Sonuç**

@magento/venia-ui/lib/components/Main/main.js

import FreeGift from 'src/custom/components/FreeGift/freeGift.js'
 
const Main = props => {
    const { children, isMasked } = props;
    const classes = useStyle(defaultClasses, props.classes);
 
    const rootClass = isMasked ? classes.root_masked : classes.root;
    const pageClass = isMasked ? classes.page_masked : classes.page;
 
    useScrollLock(isMasked);
 
    return (
        <main className={rootClass}>
            <FreeGiftMessage />
            <Header />
            <div className={pageClass}>{children}</div>
            <Footer />
        </main>
    );
};

Kütüphane hakkında daha fazla bilgi edinirseniz lütfen belgeleri inceleyin.

Ipuçları ve Püf noktaları

SEO

JavaScript uygulamaları için Sunucu Tarafı Oluşturma (SSR) kullanılması önemlidir. SSR kullanmanın yararı, web sitesi içeriğinin JavaScript kodunu yürütmeyen tarayıcılardan tarayabilmesidir. gibi araçları kullanmanızı tavsiye ederim. prerender.io veya seosnap.io. Bu hataları gidermek için SSR kullandığınızda, istek yine de 200 durum kodu döndürebilir. Bunların Rendertron veya Seosnap tarafından önbelleğe alınmasını istemezsiniz. <meta name="render:status_code" content="404" /> uygun yerlerde.

Çok güzel bir blog yazısı bitti
Sunucu Tarafı ve İstemci Tarafı Oluşturma ve SEO Uygulamalarını Değiştirme.

Lars Roettig, Kıdemli Yazılım Mühendisidir. TechDivision GmbH. Adobe Commerce ve modern web geliştirmeye odaklanan dijital ajans. Kişisel amacım size kaliteli ve stabil yazılım yazmayı öğretmektir.

Lars hakkında daha fazla bilgi edinin

Bir cevap yazın

Ready to Grow Your Business?

We Serve our Clients’ Best Interests with the Best Marketing Solutions. Find out More

How Can We Help You?

Need to bounce off ideas for an upcoming project or digital campaign? Looking to transform your business with the implementation of full potential digital marketing?

For any career inquiries, please visit our careers page here.
[contact-form-7 404 "Bulunamadı"]