Progresszív webes alkalmazásokat szeretne létrehozni a WordPress és a WooCommerce alapján? Íme, hogyan (példakóddal)

Progresszív webes alkalmazásokat szeretne létrehozni a WordPress és a WooCommerce alapján? Íme, hogyan (példakóddal)

Progresszív webes alkalmazásokat szeretne létrehozni a WordPress és a WooCommerce alapján? Íme, hogyan (példakóddal)
СОДЕРЖАНИЕ
02 июня 2020

Mint valószínűleg már tudod mondani, ez a bejegyzés egy kicsit a "fejlett" oldalán, de foglalkozik egy nagyon érdekes témával, és új ágot mutat be számunkra, amelyet követhetünk ezen a mobil-első úton webhelyeink és / vagy alkalmazásunk számára.


Amit mi hívunk "rugalmas webdesign" már egy ideje velünk van, és a játék ezen szakaszában a legtöbb fejlesztő / webhely / webes eszköz már teljesen integrálta annak alapelveit. De vajon ez a vége játék? "mobilbaráttá"? Vagy talán még csak a kezdet.

Nos, a Google szerint ez utóbbi. És jön a Progressive Web Apps!

Az a bejegyzés, amelyet éppen olvasol, a mi újabb kiadás "a dev házban" kezdeményezés (itt van az előző). Összeállította: Anghel Alexandra Appticles.com.

Adja meg az Alexandrát:

Progresszív webes alkalmazások a WordPress és a WooCommerce webhelyen

A progresszív webes alkalmazások megértése

A progresszív webes alkalmazások (PWA) olyan tapasztalatok, amelyek egyesítik az internet legjobb és a legjobb alkalmazásokat. A natív alkalmazásbolt-alkalmazások a múltban rendkívül népszerűvé váltak olyan funkciók révén, mint a értesítések, offline munka, sima animációk és átmenetek, betöltés a kezdőképernyőre és így tovább.

A Mobil Web Alkalmazások olyan JavaScript alkalmazások, amelyek a böngészőben működtek, és megpróbálták a natív alkalmazások néhány funkcióját az interneten elérhetővé tenni, de például nem tudtak közölni push értesítéseket. Az új webes API-k mobil bevezetésével a Progressive Web Apps most áthidalja a rést, és teljes körű alkalmazásszerű élményt nyújt a mobil interneten.

A Google leírja őket mint:

  • Megbízható – Azonnal töltse be
  • Gyors – Gyorsan reagál a felhasználói interakciókra
  • Vonzó – Viselkedik, mint egy natív alkalmazás

Ezen pontok mindegyikének eléréséhez a Progressive Web App-nek a következő lehetőségekkel kell rendelkeznie:

  • Dolgozzon offline vagy rossz hálózati körülmények között
  • A Web App telepítésének szalagcímei vagy a Hozzáadás a kezdőképernyőhöz
  • Használja a Web push értesítéseket. A Web Push API bevezetésével most küldhetünk értesítéseket felhasználóinknak, még akkor is, ha a böngésző bezárva van.
  • Végrehajtja a HTTPS-t
  • Használjon olyan alkalmazáshéj (vagy alkalmazáshéj) architektúrát, amely azonnal betöltődik a felhasználók képernyőjén, hasonlóan a natív alkalmazásokhoz.

Lényegében a PWA egyoldalas alkalmazás, JavaScript-ben írva. Az offline mód, a Hozzáadás a kezdőképernyőhöz és a Web Push értesítések mind a szolgáltató munkatársakkal valósulnak meg.

Progresszív webalkalmazások vs. adaptív webdesign

A progresszív webes alkalmazásokat nem szabad összekeverni a rugalmas webdesignnal. A progresszív webalkalmazások reagáló képességekkel rendelkeznek, mivel alkalmazkodhatnak a különböző képernyőméretekhez, de egyedülálló értékjavaslataik azok a funkciók, amelyek alkalmazás-jellegűvé teszik őket.

Az elmúlt években az RWD a mobil webes megoldások legfontosabb megoldása volt, de a Forrester A tavalyi jelentés megállapította, hogy az RWD elérte a telítettséget – a digitális élményt alkotók 87% -a magáévá teszi azt -, és a szemünk előtt megváltozik az ügyfelek elvárásainak változása az alkalmazásszerű webes élmények kedvelésére.

A PWA-k megoldást jelentenek a mobil webes felhasználók felkeltésére?

A magas színvonalú, progresszív webes alkalmazás kiépítésének hihetetlen előnyei vannak, amelyek megkönnyítik a felhasználók örömet, növelik az elkötelezettséget és növelik a konverziót. Számos olyan társaság létezik, különösen az e-kereskedelem területén, amelyek sikeresen használják a progresszív webes alkalmazásokat a mutatók javítására, ezek közül sok szerepel a Google fejlesztői webhelyén.

  • Például az Alibaba.com épített egy PWA-t, amely gyors, hatékony és megbízható mobil webes élményhez vezetett. Az új stratégia 76% -kal növekedett a böngészők közötti összes konverzió és a Hozzáadás a kezdőképernyőhöz kétszer nagyobb interakciós arány.
  • Egy másik felhasználási esetben az OLX újból fel kívánta vonzani a mobil webes felhasználókat a Hozzáadás a kezdőképernyőhöz és a Push Notifications segítségével. Ők megnövekedett elkötelezettség 250% -kal és más mutatókat is továbbfejlesztett: az oldal interaktívvá válásának ideje 23% -kal esett vissza, ezzel a visszafordulási arány 80% -kal csökkent. Javult a bevételszerzés is: az átkattintási arány (CTR) 146% -kal emelkedett.

Honnan tudjuk, hogy a mobil webes alkalmazás progresszív?

Először is, ha progresszív vagyunk, akkor pontszám, nem Igen vagy Nem, és van egy nevű Chrome-bővítmény Világítótorony amit felhasználhat ezen pontszám mérésére. Ez a plugin nagyon egyszerűen használható, és jelentést készít az összes PWA képességgel, alapvetően lehetővé teszi, hogy megtudja, mit kell változtatnunk ahhoz, hogy egy webes alkalmazás teljesen progresszív legyen. A WooCommerce PWA alfa-verziójához sikerült 91 pontot elérnünk a világítótoronyban.

Világítótorony

Hogyan lehet felépíteni egy PWA-t??

A Google PWA szabványa nem sorol fel semmilyen speciális technológiát vagy keretet a Progressive Web Apps létrehozásához. Bármilyen lehet, amíg az ellenőrző listát betartják. Számos PWA épül a Szög JS vagy Reagál, amelyek jelenleg a legnépszerűbb JavaScript-keretek.

reagál

Mind az AngularJS, mind a React előnyei:

  • A szög / ión A kombináció manapság nagyon népszerű. Az Ionic egy nagyszerű keret, amelyet eredetileg a mobil alkalmazások számára fejlesztettek ki, de a Progresszív Web Alkalmazásokra és akár az asztali alkalmazásokra is kibővült.
  • A reagálás nagyon intuitív és könnyen érthető. Ennek előnye egy nagyszerű kazán, létrehozás-reagálás-alkalmazás, amely alapértelmezés szerint a PWA támogatással jár.

Ezen kettő mellett, VueJS szintén egyre népszerűbb.

Ezután néhány kódmintát fogunk látni egy e-kereskedelmi alkalmazásból, amelyet a Reaktussal építünk a WordPress és a WooCommerce tetejére. REST API.

Ön is érdekli ezeket a cikkeket:

  • A legjobb szögletes rendszergazdai irányítópult-sablonok

A WooCommerce REST API megértése

E-kereskedelmi alkalmazás létrehozásakor az első dolog, amire szükségünk van, egy API, ahonnan lekérhetjük az adatokat. Szerencsére a REST API beépítése a magba nyitotta meg az ajtót, hogy a WordPress-t háttérként használja. Ezenkívül e-kereskedelmi alkalmazásokhoz a REST API-t is használhatjuk népszerű WooCommerce plugin.

A WooCommerce NPM csomaggal is rendelkezik (WooCommerce API) API-hívások kezdeményezésére, de sajnos ez a csomag mind a fogyasztói kulcsot, mind a fogyasztói titkot igényli a kérések hitelesítéséhez. Biztonsági probléma merülne fel, ha a felhasználói titkot egy felhasználói alkalmazásban használnánk.

A kulcsok létrehozásakor a WooCommerce rendszergazda részéből nem lehetséges engedélyeket megadni az útvonal szintjén, például engedélyezve a termékek megtekintési hozzáférését és a megrendelések írási hozzáférését.

Tehát létre kellett hoznunk egy proxyt a WordPress beépülő modulban, amely hozzáférést biztosít korlátozott API-végpontokhoz. Alapként a WooCommerce REST API PHP csomagolóanyagot használtuk, amint az az alábbi példában látható:

A kód megtekintése Lényeg.

Először a WooCommerce klienst inicializáljuk a felhasználói kulcs és a titkos felhasználásával. A második és a harmadik módszer egy egyedi útvonal létrehozása, melynek neve termékek és a térkép, amely a termékek / kategóriák végpontjához vezet a WooCommerce API-tól.

Ilyen módon engedélyezhetjük az olvasási kategóriák és termékek elérését, de csak egy rendelés létrehozási műveletét engedhetjük meg.

Új React alkalmazás létrehozása négy egyszerű lépésben

Miután beállítottuk az API-t, megkezdhetjük a React alkalmazás fejlesztését. A telepítés után NodeJS és NPM globális szinten a create-react-app csomag segítségével gyorsan létrehozhat egy React JS alkalmazást, amely alapértelmezés szerint PWA támogatással rendelkezik.

  1. Telepítés NodeJS és NPM globálisan
  2. Telepítés create-reagálnak-app boilerplate
    npm install create-react-app -g
  3. generál új React alkalmazás
    Létrehozás-reagálás-alkalmazás Saját alkalmazásom
  4. Indítsa el az alkalmazást
    cd my-app & npm indulás

Az alábbiakban egy képernyőképet mutatunk be az create-react-app által létrehozott alkalmazásból, amely mindent tartalmaz, amire szükségünk van, így elkezdhetjük a kódolást, beleértve az élő újratöltést:

minta reagál app

Néhány dolgot figyelembe kell venni egy új alkalmazás indításakor:

1) Alkalmazásfájlok szervezése
Számos jó oktatóprogram létezik arról, hogyan lehet az alkalmazást a legjobban felépíteni. Inkább az egyes mappák tulajdonságait szeretem, mert ez jobb skálázhatóságot tesz lehetővé. Megtalálhatja a nagyon jó magyarázat itt.
2) Linters és kódolási szabványok
A kódolási szabványok bosszantó lehet, ha nem szokta meg őket, de ne hagyja ki ezt a lépést. Segítenek a fel nem használt függőségek megtisztításában, és biztosítják, hogy az adatok komponens szintjén megfelelően érvényesüljenek. Ezen túlmenően, ha telepít egy csinosabb szerkesztő beépülő modult, amely automatikusan formázza a kódot, a kódolási szabványok használata szellővé válik. Ami a szabványt illeti, jobban szeretem a népszerűt készítette: Airbnb.
3) Kis alkatrészek
Ha az összetevők fájljait kicsi tartja, azok tesztelését és kezelését megkönnyítik. Elkezdheti a kód írását egyetlen összetevőben, és ha nagyobb lesz, akkor ossza meg kisebb összetevőkre. Az UI / UX komponensekhez számos könyvtár, például a Anyag UI, Szemantikus felhasználói felület vagy akár bootstrap, csak néhány példát mutatunk be.

Ezek a könyvtárak kész összetevőket tartalmaznak, például rácsok, menük, kártyák, gombok és így tovább. Itt található egy példa egy alapvető szemantikai felhasználói felülettel felépített e-kereskedelmi alkalmazás felületre:

Láthatja a kategóriák listáját, a termékek listáját és az oldalmenüt. Merüljünk bele a kódba – látni fogja, milyen könnyű használni a Reakciót egy ilyen példa létrehozására.

példa e-kereskedelmi alkalmazás

Merülés a ReactJS-be

Az alábbiakban egy React összetevő olvasható, amely termékkategóriákat olvas az API-ból. Az összetevő állapotát a kategóriák üres listája inicializálja. A ComponWillMount módszerben, amelyet a megjelenítés előtt automatikusan meghív a React, kérjük, hogy töltsük le a kategóriákat, és a válasz megérkezése után hozzáadjuk őket az állapothoz:

A kód megtekintése Lényeg.

Mint láthatja, nem kell meghívnunk a renderelési módszert, amikor a kategóriákat megkapjuk, a React ezt vigyázza ránk, és újra kiadja az összetevőt. A megjelenítési módszer csak egy olyan egyéni összetevőt ad vissza, melynek neve a Kategóriák listája, amely a kategóriaadatokat fogadja, és így néz ki:

A kód megtekintése Lényeg.

A fenti összetevő iterál a kategória listáján, amelyet propként kap, és egy másik, a CategoryCard nevű összetevőt hív fel egyetlen kategória elem előállítására..

Ezek a komponensek úgy kommunikálnak, hogy a kellékeket egymás között továbbítják. A Kategóriák fő összetevője meghívja az API-t, és továbbítja a kategóriák listáját a Kategóriák listájához, amely viszont továbbítja a kategória részleteit a Kategóriakártyákhoz..

A globális alkalmazásállapot kezelése a Redux segítségével

A fenti megközelítés problémája az, hogy néha vannak olyan adatok, amelyeket a legfelső alkalmazás szintjén kell kezelni, például a kosárba helyezett termékek listája. A termékek számát a bevásárló kosár ikonja mutatja a fejlécben, de ezek listánként megjelennek a pénztár oldalán is.

Ha ezeket az adatokat hozzáadjuk a szülő alkalmazás összetevőjéhez, akkor nagyon nehéz lesz kezelni a nagyobb alkalmazásokat. Itt állnak olyan könyvtárak, mint a ReduxJs belépés. Annak tisztázása érdekében, hogy a Redux bármilyen JavaScript keretrendszerrel kombinálható, az nem kifejezetten a Reactre vonatkozik.

Ezenkívül a Redux használata nem azt jelenti, hogy az összetevők szintjén nem használhatjuk az állapotot vagy a kellékeket. A Redux-ot csak olyan adatok megőrzésére szabad használni, amelyek ésszerűek az alkalmazás szintjén.

Lássuk, hogyan olvashatjuk el az termékeket az API-tól, és hogyan listázhatjuk azokat egy listában, hasonlóan ahhoz, amire szükségünk van a kategóriákkal, de ezúttal a Redux használatával. Először úgy kell megkapnunk a kapcsolatot a Redux-val, hogy az alkalmazás fő összetevőjét egy globális áruházba csomagoljuk:

A kód megtekintése Lényeg.

Ebben a példában a globális alkalmazás-áruház kategóriák és termékek listáját fogja tartalmazni, amelyeket egyesítették össze a Redux-ból a combReducers módszerrel.

Ezután folytatjuk a Redux műveletek meghatározását, amelyek nagyon egyszerű funkciók, amelyek olyan objektumokat adnak vissza, amelyeknek típustulajdonságot kell tartalmazniuk. Mivel a JS aszinkron, két műveletre van szükség: az egyik a jelzéshez, amikor egy kérést küldenek, a másik a jelzéshez, amikor a válasz érkezik. Az egész alkalmazás tudja, mikor történnek ezek a műveletek.

Az alábbiakban hozzáadtuk a fetchProducts nevű funkciót. Mint láthatja, ez a funkció:

  • elküldi a kért termékekkel kapcsolatos műveletet,
  • felhívja az API-t a termékek visszakeresésére,
  • az eredmény megérkezésekor elküldi a ReceiveProducts műveletet.

A kód megtekintése Lényeg.

Az alkalmazás állapotának módosításához újabb Redux-t adunk hozzá "csökkentő". A reduktor csak egy olyan funkció, amely figyeli az egyes műveleteket és megváltoztatja a globális állapot egy részét, ebben az esetben a termékek listáját..

Ez a reduktor nem tesz semmit, amikor egy kérelemmel kapcsolatos műveletet megkap, de mindig visszatér az aktuális állapothoz. A termékek fogadása műveletnél a reduktor visszaadja az átadott adatokat, ebben az esetben a termékek listája lesz.

A kód megtekintése Lényeg.

A dolgok lezárásához ezeket a műveleteket és reduktorokat használjuk egy új Termék komponensben.

A kód megtekintése Lényeg.

Ez az összetevő be van csomagolva a csatlakozási módszerbe a Redux-ból, és csak elküldi a fetchProducts terméket az összetevőWillMount módszerében. Az összetevő emellett tartalmaz terméklistát, de amint láthatja a terméklistát, az összetevő nem veszi közvetlenül a termékadatokat. Ennek oka az, hogy a terméklistás összetevő közvetlenül kapcsolódik a globális alkalmazás állapotához, a Redux használatával is.

Ilyen módon közvetlenül elérheti a termék adatait az App Store-ból, iterálhat a termékek listáján, és a ProductCard összetevő segítségével egyetlen termékelemet állíthat elő.

A kód megtekintése Lényeg.

Eddig látott néhány példát az adatok megjelenítésére, de mi lenne, ha felhasználói interakciót szeretnénk hozzáadni, például egy termék hozzáadása a kosárba?

Ebben az esetben, amikor a felhasználó rákattint a "Kosárba" gombra kattintva küldünk egy olyan műveletet, amely módosítja a globális alkalmazás állapotát. A fejléc sáv, amely megjeleníti a kosár termékek számát, kapcsolódik a Redux-hoz. Megszámolja az alkalmazás kosárába mentett termékek számát, és ennek megfelelően frissíti magát.

példa a kosárba

Az alkalmazás összekapcsolása a WordPress-szel

Ez mind az alapvető példa az induláshoz, és valószínűleg kíváncsi vagy, hogy pontosan hogyan tudjuk ezt az alkalmazást összekapcsolni a WordPress-szel.

Nos, az alkalmazást egy aldomainben tárolhatjuk, és hagyhatjuk, hogy csatlakozzon az API-hoz, vagy használhatjuk WordPress-témának is – vagyis egy nagyon alapvető téma létrehozását egy index.php fájllal, amely csak a JavaScript / CSS fájlt tölti be. A Create-react-app kazánlap parancsokat tartalmaz az alkalmazás összeállításának létrehozásához, így azonnal megkaphatjuk a termelési fájlokat.

A kód megtekintése Lényeg.

Hol lehet használni a szolgáltató dolgozókat?

Offline módhoz felvehetünk egy szolgáltató munkást, aki az alkalmazás héját akkor is megjeleníti, ha a felhasználók offline állapotban vannak. A szolgáltató csak egy JavaScript fájl, amely regisztrálja magát a böngészőben.

A kód megtekintése Lényeg.

Számos stratégiát használhat offline módban, például az első a hálózat vagy a gyorsítótár, és ezekről a Google offline szakácskönyv.

Az alkalmazás héjának gyorsítótárazása akkor is előnyeit nyújtja, ha hálózati kapcsolat van, mert az alkalmazás sokkal gyorsabban töltődik be.

Ha még tovább akar lépni, és elkezdi az API-ból származó adatok gyorsítótárazását, akkor használhatja az NPM-csomagokat, például a redux-persist, és módosíthatja az alkalmazását az adatok mentéséhez / visszakereséséhez a böngésző helyi tárolójából..

A webes push értesítésekhez javasoljuk, hogy nézze meg a Egy jel nélküli WordPress plugin. Ez a plugin reagáló témákkal is működik, ezért feltétlenül ellenőrizze azonnal.

Mi a következő lépés?

tudsz Találd meg a fenti WooCommerce PWA bemutatója itt.

Már dolgozunk a béta verzión, és itt csak egy része az ütemtervünknek:

  • Add hozzá az offline mód képességeit
  • Adjon hozzá push értesítéseket
  • Végezze el a fizetési folyamatot

Ha hozzájárulni szeretne, vagy saját igényeihez szabja, megtalálja az e-kereskedelem progresszív webalkalmazás alfa-verzióját a GitHub-on.

PWA bemutató

Mit gondol a progresszív webes alkalmazásokról és azok szerepéről a mobil WordPress környezetben? Fontolja ezt az utat a következő projekttel?

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Elrendezés és előadás: K Karol.

A szerzőről: Anglia Alexandra társalapítója és a CTO a Appticles.com – egy platform a progresszív internetes alkalmazások létrehozására. A platform kiterjesztéseként az Appticles rendelkezik egy WordPress bővítménnyel (WordPress Mobile Pack), amely meghaladta az 1 millió letöltést. Alexandra teljes verem-fejlesztő. Két üzleti gyorsítón vett részt – Startupbootcamp (Koppenhága / Dánia) és Prosper Women Accelerator (Saint Louis / USA). 2017 elején csatlakozott a Codette-hez társalapítóként.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector