Chcete vytvářet progresivní webové aplikace založené na WordPress a WooCommerce? Zde je postup (příklady kódu /)

Jak již pravděpodobně víte, tento příspěvek je trochu na "pokročilý" , ale zabývá se tématem, které je velmi zajímavé a představuje novou pobočku pro nás, abychom se vydali touto celou první mobilní cestou pro naše webové stránky nebo aplikace..


Věc, kterou nazýváme "responzivní webdesign" byl s námi nějakou dobu, a v této fázi hry již většina vývojářů / webů / webových nástrojů již plně integrovala své principy. Ale je to konec hry "mobilní"? Nebo možná je to jen začátek.

Google si myslí, že je to ten druhý. A progresivní webové aplikace!

Příspěvek, který se chystáte přečíst, je další vydání našeho příspěvku "uvnitř domu dev" iniciativa (zde je ta předchozí). Sestavila ji Alexandra Anghel z Appticles.com.

Zadejte Alexandru:

Progresivní webové aplikace na WordPress a WooCommerce

Porozumění progresivním webovým aplikacím

Progresivní webové aplikace (PWA) jsou zkušenosti, které kombinují to nejlepší z webu a to nejlepší z aplikací. Nativní aplikace v obchodech s aplikacemi se v minulosti staly velmi populární díky funkcím, jako jsou oznámení push, práce offline, plynulé animace a přechody, načítání na domovskou obrazovku atd.

Mobilní webové aplikace jsou aplikace JavaScriptu, které fungovaly v prohlížeči a pokusily se přenést na web některé funkce nativních aplikací, ale nedokázaly například poskytnout oznámení push. Díky mobilnímu zavedení nových webových rozhraní API progresivní webové aplikace nyní překonávají mezeru a poskytují mobilní aplikaci plnou aplikační podobu..

Google je popisuje jako bytí:

  • Spolehlivý – Načíst okamžitě
  • Rychle – Rychle reagovat na interakce uživatelů
  • Poutavé – Chová se jako nativní aplikace

Progresivní webová aplikace, aby dosáhla všech těchto bodů, musí mít následující funkce:

  • Pracujte offline nebo ve špatných podmínkách sítě
  • Instalace bannerů webové aplikace nebo přidání na domovskou obrazovku
  • Použijte oznámení Web Push. Se zavedením rozhraní Web Push API nyní můžeme zasílat oznámení Push našim uživatelům, i když je prohlížeč zavřený.
  • Implementujte HTTPS
  • Použijte architekturu prostředí aplikace (nebo prostředí aplikace), která se okamžitě načte na obrazovky uživatelů, podobně jako nativní aplikace.

PWA je v podstatě jednostránková aplikace napsaná v JavaScriptu. Režim offline, přidání na domovskou obrazovku a oznámení Web Push jsou implementovány pomocí servisních pracovníků.

Progresivní webové aplikace vs. responzivní webový design

Progresivní webové aplikace by neměly být zaměňovány s responzivním webovým designem. Progresivní webové aplikace mají schopnosti reagovat, protože se mohou přizpůsobit různým velikostem obrazovky, ale jejich jedinečná hodnota nabídka je funkce, které dělají jim app-like.

V posledních letech bylo RWD řešením pro mobilní webová řešení, ale a Forrester zpráva z loňského roku zjistila, že RWD dosáhla nasycení – 87% tvůrců digitálních zážitků to přijalo – a že před očima dochází k posunu v očekávání zákazníků, že preferují zážitky podobné aplikaci na webu.

Jsou PWA řešením pro zapojení uživatelů mobilních webů?

Vytváření vysoce kvalitní progresivní webové aplikace má neuvěřitelné výhody, které usnadňují potěšení uživatelů, zvyšují zapojení a zvyšují počet konverzí. Existuje několik příkladů společností, zejména z odvětví elektronického obchodování, které úspěšně použily progresivní webové aplikace ke zlepšení svých metrik, mnoho z nich je uvedeno na webu Google Developers..

  • Například Alibaba.com vytvořil PWA, který vedl k rychlému, efektivnímu a spolehlivému používání mobilního webu. Nová strategie dosáhl 76% nárůstu celkový počet konverzí napříč prohlížeči a čtyřikrát vyšší míra interakce z Přidat na domovskou obrazovku.
  • V jiném případě chtěl OLX znovu zapojit uživatele mobilních webových stránek pomocí Přidat na domovskou obrazovku a Oznámení Push. Ony zvýšené zapojení o 250% a také vylepšily další metriky: doba do interaktivity stránky klesla o 23% a odpovídající 80% pokles míry okamžitého opuštění. Zlepšilo se také zpeněžení, přičemž míra prokliku (CTR) vzrostla o 146%.

Jak víme, že mobilní webová aplikace je progresivní?

Zaprvé, být progresivní je skóre, nikoli ano nebo ne, a je zde nainstalován plugin Chrome Maják které můžete použít k měření tohoto skóre. Tento plugin je opravdu snadno použitelný a generuje sestavu se všemi funkcemi PWA, v podstatě nám dává vědět, co je potřeba změnit, aby se webová aplikace stala plně progresivní. U naší alfa verze WooCommerce PWA se nám podařilo u Lighthouse dosáhnout 91 bodů.

Maják

Jak můžeme postavit PWA?

Standard PWA společnosti Google neuvádí žádnou konkrétní technologii ani rámec pro vytváření progresivních webových aplikací. Dokud bude kontrolní seznam dodržován, může to být cokoli. Mnoho PWA je postaveno pomocí Úhlová JS nebo Reagovat, což jsou v současné době nejpopulárnější rámce JavaScriptu.

reagovat

AngularJS a React mají své výhody:

  • Úhlová / Iontový kombinace je dnes velmi populární. Ionic je skvělý rámec, který byl původně vytvořen pro mobilní aplikace, ale rozšířil se na progresivní webové aplikace a dokonce i na desktopové aplikace.
  • Reagovat je opravdu intuitivní a snadno pochopitelné. To těží z skvělé kotle, create-reag-app, která je standardně dodávána s podporou PWA.

Kromě těchto dvou, VueJS získává na popularitě.

Dále uvidíme ukázky kódu z aplikace elektronického obchodování vytvořené pomocí React na WordPress a WooCommerce. REST API.

Také by vás mohly zajímat tyto články:

  • Nejlepší šablony úhlového administrátorského panelu

Porozumění rozhraní WooCommerce REST API

Pokud jde o budování aplikace elektronického obchodování, první věcí, kterou potřebujeme, je API, odkud můžeme data načíst. Začlenění rozhraní REST API do jádra naštěstí otevřelo dveře pro použití WordPress jako backendu. Kromě toho pro aplikace elektronického obchodování můžeme použít rozhraní REST API z internetu populární plugin pro WooCommerce.

WooCommerce má také balíček NPM (WooCommerce API) pro volání API, ale bohužel tento balíček vyžaduje jak klíč zákazníka, tak tajemství zákazníka, aby bylo možné ověřit požadavky. Pokud bychom použili tajemství spotřebitele v aplikaci frontend, měli bychom problém s bezpečností.

Při vytváření klíčů z administrátorské sekce WooCommerce také není možné určit oprávnění na úrovni trasy, například povolit přístup k prohlížení produktů a přístup k zápisu pro objednávky.

V našem pluginu WordPress jsme tedy museli vytvořit server proxy, který umožňuje přístup k omezené sadě koncových bodů API. Jako základ jsme použili WooCommerce REST API PHP wrapper, jak můžete vidět na následujícím příkladu:

Zobrazit kód na Podstata.

Nejprve inicializujeme klienta WooCommerce pomocí zákaznického klíče a tajemství. Druhou a třetí metodou je vytvoření vlastní trasy nazvané produkty a mapa, která směruje na koncový bod produktů / kategorií z rozhraní WooCommerce API.

Tímto způsobem můžeme povolit přístup ke kategoriím čtení a produktům, ale povolit pouze operaci vytvoření objednávky.

Vytvoření nové aplikace React ve čtyřech jednoduchých krocích

Jakmile nastavíme API, můžeme začít pracovat na naší aplikaci React. Po instalaci NodeJS a NPM globálně můžete pomocí balíčku create-reagovat-app rychle vygenerovat aplikaci React JS, která má ve výchozím nastavení podporu PWA.

  1. Nainstalujte NodeJS a NPM globálně
  2. Nainstalujte create-reagovat-app kotle
    npm install create-rea-app -g
  3. generovat nová aplikace React
    create-reagovat-aplikace my-app
  4. Spusťte aplikaci
    cd my-app & npm start

Níže je snímek aplikace, která je generována aplikací create-React, má vše, co potřebujeme, abychom mohli začít kódovat, včetně živého opětovného načtení:

ukázka reakce aplikace

Při spouštění nové aplikace je třeba mít na paměti několik věcí:

1) Organizace souborů aplikace
Existuje několik dobrých návodů o tom, jak nejlépe strukturu aplikace. Dávám přednost složkám po jednotlivých funkcích, protože to umožňuje lepší škálovatelnost. Můžete najít opravdu dobré vysvětlení zde.
2) Odkazy a standardy kódování
Normy kódování mohou být nepříjemné, pokud na ně nejste zvyklí, ale tento krok nevynechávejte. Pomáhají vyčistit nepoužité závislosti a ujistit se, že data jsou správně ověřena na úrovni součásti. Pokud navíc nainstalujete hezčí editorový plugin, který automaticky formátuje váš kód, použití kódovacích standardů se stane hračkou. Pokud jde o samotný standard, dávám přednost tomu oblíbenému vytvořil (a) Airbnb.
3) Malé součásti
Udržování malých souborů součástí usnadňuje testování a správu. Můžete začít psát kód v jedné komponentě a jakmile se zvětšuje, rozdělte jej na menší komponentu. Pro komponenty UI / UX existuje několik knihoven, které jsou kompatibilní s Reactem, například Materiál UI, Sémantické uživatelské rozhraní nebo dokonce Bootstrap, jen abych uvedl několik příkladů.

Tyto knihovny obsahují sadu hotových komponent, jako jsou mřížky, nabídky, karty, tlačítka atd. Zde je příklad aplikačního rozhraní elektronického obchodu vytvořeného se základními prvky sémantického uživatelského rozhraní:

Můžete vidět seznam kategorií, seznam produktů a vedlejší nabídku. Pojďme se ponořit do kódu – uvidíte, jak snadné je použít React k vytvoření takového příkladu.

příklad aplikace elektronického obchodu

Potápění do ReactJS

Níže je komponenta React, která načte sadu kategorií produktů z rozhraní API. Stav komponenty je inicializován prázdným seznamem kategorií. V metodě componentWillMount, která je automaticky vyvolána pomocí React před vykreslením, požádáme o načtení kategorií a po přijetí odpovědi je přidáme do stavu:

Zobrazit kód na Podstata.

Jak vidíte, při přijetí kategorií nemusíme volat metodu renderování. React se o to postará a komponentu znovu vykreslí. Metoda rendrování vrací pouze další vlastní komponentu zvanou CategoriesList, která přijímá data kategorií a vypadá takto:

Zobrazit kód na Podstata.

Výše uvedená komponenta opakuje seznam kategorií, které obdrží jako podpěru, a volá jinou vlastní komponentu nazvanou CategoryCard, aby vykreslila jediný prvek kategorie..

Všechny tyto komponenty komunikují předáváním podpěr mezi nimi. Hlavní komponenta kategorií zavolá API a předá seznam kategorií do kategorieListList, která zase předává podrobnosti o kategorii kartám kategorií.

Správa globálního stavu aplikace pomocí Reduxu

Problém výše uvedeného přístupu spočívá v tom, že někdy máme data, která je třeba spravovat na nejvyšší úrovni aplikace, například seznam produktů, které byly přidány do nákupního košíku. Počet produktů je zobrazen v ikoně nákupního košíku z lišty záhlaví, ale ty se také zobrazují jako seznam na stránce pokladny..

Pokud přidáme všechna tato data do komponenty nadřazené aplikace, bude velmi obtížné spravovat na větších aplikacích. Zde se knihovny jako ReduxJs Jen pro vyjasnění, Redux lze použít v kombinaci s jakýmkoli frameworkem JavaScript, není to specifické pro React.

Také použití Redux neznamená, že nemůžeme použít stav nebo rekvizity na úrovni komponent. Redux by se měl používat pouze pro uchovávání dat, která mají smysl na úrovni aplikace.

Podívejme se, jak můžeme číst produkty z rozhraní API a vykreslit je v seznamu, podobně jako to, co potřebujeme s kategoriemi, ale tentokrát pomocí Reduxu. Nejprve musíme navázat spojení s Reduxem zabalením naší hlavní komponenty aplikace do globálního obchodu:

Zobrazit kód na Podstata.

V tomto příkladu bude globální obchod s aplikacemi obsahovat seznam kategorií a seznam produktů, které jsou sloučeny dohromady pomocí metody CombinReducers od Redux.

Poté pokračujeme definováním akcí Redux, což jsou velmi jednoduché funkce, které vracejí objekty, které musí obsahovat vlastnost type. Protože JS je asynchronní, budeme potřebovat dvě akce: jednu pro signalizaci, když je odeslán požadavek, a druhou pro signalizaci, když je přijata odpověď. Když se tyto akce odehrají, bude vědět celá aplikace.

Níže jsme také přidali funkci nazvanou fetchProducts. Jak vidíte, tato funkce:

  • odešle akci požadavku produkty,
  • volá API pro načítání produktů,
  • po přijetí výsledku odešle akci recipientProducts.

Zobrazit kód na Podstata.

K úpravě stavu aplikace přidáme tzv. Redux "redukce". Redukce je pouze funkce, která poslouchá konkrétní akce a mění část globálního stavu, v tomto případě seznam produktů.

Tento reduktor nedělá nic, když obdrží akci požadavku na produkty, vždy vrací aktuální stav. Pro akci přijímat produkty reduktor vrátí data, která mu byla předána, v tomto případě to bude seznam produktů.

Zobrazit kód na Podstata.

Abychom věci zabalili, používáme tyto akce a redukce v nové komponentě Produkty.

Zobrazit kód na Podstata.

Tato součást je zabalena v metodě připojení od společnosti Redux a pouze odešle fetchProducts ve své metodě componentWillMount. Součástí je také seznam produktů, ale jak vidíte, součást seznamu produktů nepřijímá přímo data produktů. Důvodem je to, že komponenta seznamu produktů je přímo propojena s globálním stavem aplikace, také pomocí Reduxu.

Tímto způsobem může přistupovat k datům produktů přímo z obchodu s aplikacemi, iterovat přes seznam produktů a používat komponentu ProductCard k vykreslení jediného prvku produktu.

Zobrazit kód na Podstata.

Zatím jsme viděli několik příkladů, jak zobrazit data, ale co když bychom chtěli přidat interakci uživatele, například přidání produktu do košíku?

V tomto případě, když uživatel klikne na "Přidat do košíku" tlačítko, odešleme akci, která změní globální stav aplikace. Záhlaví, které zobrazuje počet produktů v košíku, bude spojeno s Reduxem. Bude spočítat počet produktů uložených v košíku aplikace a podle toho se aktualizuje.

přidat do košíku příklad

Propojení aplikace s WordPress

Toto jsou všechny základní příklady, které vám pomohou začít a pravděpodobně se zajímáte, jak přesně můžeme tuto aplikaci propojit s WordPress.

Můžeme hostit aplikaci na subdoméně a nechat ji připojit se k API, nebo ji můžeme použít jako téma WordPress – což znamená vytvoření velmi základního motivu se souborem index.php, který načte pouze soubor JavaScript / CSS. Kotlátka create-reagovat-app obsahuje příkazy pro vytvoření sestavení aplikace, takže můžeme okamžitě získat produkční soubory.

Zobrazit kód na Podstata.

Kde používat servisní pracovníky

V režimu offline můžeme přidat servisního pracovníka, který zobrazí prostředí aplikace, i když jsou uživatelé offline. Servisní pracovník je pouze soubor JavaScript, který se registruje v prohlížeči.

Zobrazit kód na Podstata.

Existuje několik strategií, které můžete použít v režimu offline, například nejprve síť nebo nejprve mezipaměť, a o nich si můžete přečíst v offline kuchařka.

Ukládání do mezipaměti aplikace má výhody, i když máme síťové připojení, protože se aplikace načte mnohem rychleji.

Pokud chcete jít ještě dále a začít ukládat data, která pocházejí z rozhraní API, do mezipaměti, můžete použít balíčky NPM, jako je redux-persist, a upravit aplikaci tak, aby ukládala / načítala data z místního úložiště prohlížeče..

Pro oznámení na webový server doporučujeme podívat se na Jeden plugin zdarma WordPress plugin. Tento plugin funguje také s responzivními tématy, takže byste jej měli určitě okamžitě zkontrolovat.

Co bude dál?

Můžeš najít demo pro výše uvedené WooCommerce PWA zde.

Již pracujeme na verzi beta a zde je jen část našeho plánu:

  • Přidejte možnosti režimu offline
  • Přidejte oznámení push
  • Dokončete proces platby

Pokud chcete přispět nebo přizpůsobit vašim vlastním potřebám, najdete alfa verzi webové aplikace progresivního elektronického obchodování. na GitHub.

Ukázka PWA

Co si myslíte o progresivních webových aplikacích a roli, kterou mohou mít v mobilním prostředí WordPress? Uvažujete o cestě touto cestou s dalším projektem?

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Rozvržení a prezentace Karol K.

O autorovi: Alexandra Anghel je spoluzakladatelkou a CTO na Appticles.com – platforma pro vytváření progresivních webových aplikací. Jako rozšíření platformy má Appticles plugin WordPress (Sada WordPress Mobile Pack), která překonala 1 milion stažení. Alexandra je vývojář komína. Zúčastnila se dvou obchodních urychlovačů – Startupbootcamp (Kodaň / Dánsko) a Prosper Women Accelerator (Saint Louis / USA). Začátkem roku 2017 se stala spoluzakladatelkou společnosti Codette.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map