Kas soovite luua progressiivseid veebirakendusi, mis põhinevad WordPressil ja WooCommerce’il? Siit saate teada, kuidas (koodinäidetega)

Nagu arvatavasti juba teate, on see postitus veidi peal "edasijõudnud" poolel, kuid see tegeleb väga huvitava teemaga ja pakub meile uut haru, mida saaksime kogu sellel veebisaidide ja / või rakenduste jaoks kõigepealt mobiilirajal kasutada..


Asi, mida me kutsume "tundlik veebidisain" on juba mõnda aega meiega olnud ja selles mänguetapis on enamik arendajaid / veebisaite / veebitööriistu selle põhimõtted juba täielikult integreerinud. Kuid kas see on lõppmäng? "mobiilisõbralik"? Või äkki on see alles algus.

Noh, Google arvab, et see on viimane. Ja tulekul on progressiivsed veebirakendused!

Postitus, mida hakkate lugema, on meie teine ​​väljaanne "dev maja sees" algatus (siin on eelmine). Selle pani kokku Alexandra Anghel Appticles.com.

Sisestage Alexandra:

Progressiivsed veebirakendused WordPressis ja WooCommerce'is

Progressiivsete veebirakenduste mõistmine

Progressiivsed veebirakendused (PWA) on kogemused, milles on ühendatud veebi ja rakenduste parimad küljed. Omamaised rakenduste poodide rakendused on minevikus muutunud selliste funktsioonide abil nagu tõukemärguanded, võrguühenduseta töötamine, sujuvad animatsioonid ja üleminekud, avaekraanile laadimine ja nii edasi.

Mobiilsed veebirakendused on JavaScripti rakendused, mis töötasid brauseris ja üritasid veebi tuua mõnda loomuliku rakenduse funktsiooni, kuid ei suutnud näiteks edastada tõuketeateid. Uute veebiliideseadete mobiilse kasutuselevõtuga on Progressiivsed Veebirakendused nüüd tühimiku täitnud, pakkudes mobiilses veebis täielikku rakendusetaolist kogemust.

Google kirjeldab neid nagu:

  • Usaldusväärne – laadige kohe
  • Kiire – reageerige kiiresti kasutaja interaktsioonidele
  • Osalemine – käitub nagu kohalik rakendus

Kõigi nende punktide saavutamiseks peab progressiivsel veebirakendusel olema järgmised võimalused:

  • Töötage võrguühenduseta või halva võrgu tingimustes
  • Veebirakenduse installibännerid või lisamine avaekraanile
  • Kasutage veebipõhiseid teatisi. Veebipussi API kasutuselevõtuga saame nüüd oma kasutajatele tõuketeateid saata ka siis, kui brauser on suletud.
  • Rakendage HTTPS
  • Kasutage rakenduste kesta (või rakenduse kesta) arhitektuuri, mis laaditakse kohe kasutaja ekraanidele, sarnaselt natiivsete rakendustega.

Sisuliselt on PWA JavaScripti kirjutatud üheleheline rakendus. Võrguühenduseta režiim, avakuvale lisamine ja veebipõhised teatised rakendatakse kõiki teenindustöötajate abil.

Progressiivsed veebirakendused vs tundlik veebidisain

Progressiivseid veebirakendusi ei tohiks segamini ajada tundliku veebikujundusega. Progressiivsetel veebirakendustel on reageerimisvõimalused, kuna nad saavad kohaneda erineva ekraanisuurusega, kuid nende ainulaadne väärtuspakkumine on omadused, mis muudavad nad rakendusetaolisteks.

Viimastel aastatel on RWD olnud mobiilsete veebilahenduste lähenemisviis, kuid a Forrester eelmise aasta aruandes tuvastati, et RWD on jõudnud küllastumiseni – 87% digitaalse kogemusega tegijatest võtab selle omaks – ja et meie silme all toimub klientide ootuste muutumine veebirakenduste laadsete kogemuste eelistamise osas.

Kas PWA-d on lahendus mobiilside veebikasutajate kaasamiseks?

Kvaliteetse progressiivse veebirakenduse loomisel on uskumatult palju eeliseid, mis muudab kasutajate rõõmustamiseks, seotuse suurendamiseks ja konversioonide arvu suurendamiseks lihtsaks. On mitmeid näiteid ettevõtetest, eriti e-kaubanduse valdkonnas, kes on edukalt kasutanud progressiivseid veebirakendusi oma mõõdikute parandamiseks. Suur osa neist on loetletud Google’i arendajate veebisaidil.

  • Näiteks ehitas Alibaba.com üles PWA, mis tõi kaasa kiire, tõhusa ja usaldusväärse mobiilse veebiveelamuse. Uus strateegia tarne kasvas 76% brauserite kogukonversioonide koguarvust ja neli korda kõrgemast interaktsiooni määrast lisamisest avalehele.
  • Ühel teisel juhul soovis OLX mobiilside veebikasutajaid uuesti kaasata, kasutades funktsioone Add to Homescreen ja Push Notifications. Nemad suurenenud kaasatus 250% ja parandas ka teisi mõõdikuid: aeg, kuni leht sai interaktiivseks, langes 23% ja vastav põrkeprotsent langes vastavalt 80%. Samuti paranes monetiseerimine – klikkimise määr (CTR) tõusis 146%.

Kuidas me teame, et mobiilne veebirakendus on progressiivne?

Esiteks on progressiivsus tulemus, mitte jah või ei, ja seal on olemas Chrome’i pistikprogramm, mida nimetatakse Tuletorn mida saate selle skoori mõõtmiseks kasutada. Seda pistikprogrammi on tõesti lihtne kasutada ja see loob kõigi PWA võimalustega aruande. Põhimõtteliselt annab see meile teada, mida peame muutma, et veebirakendus saaks täielikult progressiivseks. WooCommerce PWA alfaversiooni jaoks õnnestus meil majakas saavutada 91 skoori.

Tuletorn

Kuidas saaksime PWA-d üles ehitada??

Google’i PWA standard ei loetle progressiivsete veebirakenduste loomiseks ühtegi konkreetset tehnoloogiat ega raamistikku. See võib olla ükskõik milline, kui kontrollnimekirja järgitakse. Paljud PWA-d on loodud kasutades Nurga JS või Reageeri, mis on praegu kõige populaarsemad JavaScripti raamistikud.

reageerima

Nii AngularJS kui ka React on oma eelised:

  • Nurk / Iooniline kombinatsioon on tänapäeval üsna populaarne. Ionic on suurepärane raamistik, mis loodi algselt mobiilirakenduste jaoks, kuid on laienenud progressiivsetele veebirakendustele ja isegi töölauarakendustele.
  • Reaktsioon on tõesti intuitiivne ja hõlpsasti mõistetav. Selle eeliseks on suurepärane boileri loomise-reageerimise rakendus, mis vaikimisi kaasas PWA-toega.

Peale nende kahe, VueJS on ka populaarsust kogumas.

Järgmisena näeme mõnda koodinäidist RePactiga loodud e-poe rakendusest WordPressi ja WooCommerce’i kohal REST API.

Teid võivad huvitada ka need artiklid:

  • Parimad administraatori nurga all olevad juhtpaneeli mallid

WooCommerce REST API mõistmine

E-kaubanduse rakenduse loomisel on kõigepealt vaja API-t, kust saaksime andmeid hankida. Õnneks on REST API lisamine tuuma avanud ukse WordPressi kasutamiseks taustprogrammina. Lisaks saame e-kaubanduse rakenduste jaoks kasutada REST API-t saidilt populaarne WooCommerce’i pistikprogramm.

WooCommerceil on ka NPM-i pakett (WooCommerce API) API-kõnede tegemiseks, kuid kahjuks nõuab see pakett taotluste autentimiseks nii tarbijavõtit kui ka tarbijasaladust. Turvaprobleem oleks, kui kasutaksime tarbijasaladust kasutajaliideses.

Võtmete loomisel jaotises WooCommerce administraator pole ka marsruudi tasemel õigusi võimalik määratleda, näiteks lubada toodete vaatamisjuurdepääs ja tellimuste jaoks juurdepääsuõigus.

Niisiis, me pidime oma WordPressi pistikprogrammis looma puhverserveri, mis võimaldab juurdepääsu piiratud hulgale API lõpp-punktidele. Alusena kasutasime WooCommerce REST API PHP ümbrist, nagu näete allolevas näites:

Vaadake koodi sisse Gist.

Esmalt lähtestame WooCommerce kliendi, kasutades tarbijavõtit ja saladust. Teise ja kolmanda meetodiga luuakse kohandatud marsruut, mida nimetatakse toodeteks ja kaardistatakse WooCommerce API-st toodete / kategooriate lõpp-punktini..

Sel viisil saame lubada juurdepääsu kategooriatele ja toodetele, kuid lubame ainult tellimuse loomise toimingut.

Uue rakenduse React loomine nelja lihtsa sammu abil

Kui oleme API seadistanud, saame hakata töötama oma React rakenduse kallal. Pärast installimist SõlmJS ja NPM globaalselt saate luua reaalajas rakenduse paketi React JS-i rakenduse kiireks genereerimiseks, millel on vaikimisi PWA-tugi.

  1. Installi NodeJS ja NPM globaalselt
  2. Installi loo-reageeri-rakendus katlaplaat
    npm install loo-reageeri-rakendus -g
  3. Genereerima uus rakendus React
    loo-reageeri-rakendus minu-rakendus
  4. Alustage rakendust
    cd minu rakendus & npm algus

Allpool on ekraanipilt rakendusest, mille loob loodud-reageeri-rakendus, sellel on kõik, mida vajame, nii et saame alustada kodeerimist, sealhulgas reaalajas uuesti laadimist:

proovi reageerimise rakendus

Uue rakenduse käivitamisel tuleb meeles pidada mõnda asja:

1) Rakendusfailide korraldamine
Rakenduse parimaks struktureerimiseks on seal mitu head õpetust. Ma eelistan kaustu funktsioonide kaupa, kuna see võimaldab paremat skaleeritavust. Võite leida a tõesti hea seletus siin.
2) Linter ja kodeerimisstandardid
Kodeerimisstandardid võivad olla tüütud, kui te pole nendega harjunud, kuid siiski ärge jätke seda sammu vahele. Need aitavad kasutamata sõltuvusi puhastada ja tagavad, et andmed on komponentide tasemel õigesti kinnitatud. Lisaks, kui installite uhkema redaktoriplugina, mis vormindab teie koodi automaatselt, muutub kodeerimisstandardite kasutamine imelihtne. Mis puutub standardisse ise, siis eelistan populaarset loodud Airbnb poolt.
3) Väikesed komponendid
Kui hoiate komponentide faile väikestena, on neid lihtsam testida ja hallata. Võite hakata koodi kirjutama ühes komponendis ja kui see suureneb, jagage see väiksemaks komponendiks. Kasutajaliidese / UX-i komponentide jaoks on mitu reaktoriga ühilduvat teeki, näiteks Materiaalne kasutajaliides, Semantiline kasutajaliides või isegi Bootstrap, vaid paar näidet.

Need teegid sisaldavad komplekti valmiskomponente, nagu ruudustik, menüüd, kaardid, nupud ja nii edasi. Siin on näide e-kaubanduse rakendusliidese kohta, mis on üles ehitatud põhiliste Semantiliste UI elementidega:

Näete kategooriate loendit, toodete loendit ja külgmenüüd. Mõelgem koodile – näete, kui lihtne on sellise näite loomiseks Reacti kasutada.

näide e-kaubanduse rakendusest

Sukeldumine ReactJS-i

Allpool on osa React, mis loeb tootekategooriate komplekti API-st. Komponendi olek lähtestatakse kategooriate tühja loendiga. Meetodis komponentWillMount, mida React enne renderdamist automaatselt kutsub, taotleme kategooriate toomist ja lisame need olekusse pärast vastuse saamist:

Vaadake koodi sisse Gist.

Nagu näete, ei pea me kategooriate vastuvõtmisel renderdusmeetodit kutsuma. React hoolitseb selle eest meie eest ja muudab komponendi uuesti. Renderdusmeetod tagastab lihtsalt teise kohandatud komponendi nimega CategoriesList, mis võtab vastu kategooriate andmeid ja näeb välja selline:

Vaadake koodi sisse Gist.

Ülaltoodud komponent kordab kategooriate loetelu, mille ta saab tugiteenusena, ja kutsub ühe kategooriaelemendi renderdamiseks teist kohandatud komponenti nimega CategoryCard.

Kõik need komponendid suhtlevad, edastades nende vahel rekvisiite. Põhikomponent Kategooria kutsub API-liidese ja edastab kategooriate loendi kategooriasseList, mis omakorda edastab kategooria üksikasjad kategooriakaartidele.

Globaalse rakenduse oleku haldamine Reduxi abil

Ülaltoodud lähenemisviisi probleem on see, et mõnikord on meil andmeid, mida tuleb hallata kõrgeimal rakendustasandil, näiteks toodete nimekiri, mis lisati ostukorvi. Toodete arv kuvatakse päise ribal ostukorvi ikoonil, kuid neid kuvatakse ka loendina kassas.

Kui lisame kõik need andmed lähterakenduse komponenti, on seda suuremate rakenduste korral väga raske hallata. See on koht, kus sellised raamatukogud nagu ReduxJs tulge sisse. Täpsustuseks võib öelda, et Reduxit saab kasutada koos mis tahes JavaScripti raamistikuga, see pole Reacti spetsiifiline.

Reduxi kasutamine ei tähenda ka seda, et me ei saa komponendi tasemel olekut ega rekvisiite kasutada. Reduxit tuleks kasutada ainult andmete säilitamiseks, mis on mõistlik rakendustasandil.

Vaatame, kuidas saame lugeda tooteid API-st ja renderdada need loendisse, sarnaselt kategooriatele vajalikega, kuid seekord Reduxi kasutades. Esiteks peame ühenduse looma Reduxiga, pakkides oma peamise rakenduse komponendi globaalsesse poodi:

Vaadake koodi sisse Gist.

Selles näites sisaldab globaalne rakenduste pood kategooriate loendit ja toodete loendit, mis ühendatakse Reduxi meetodil combReducers.

Seejärel määratleme Reduxi toimingud, mis on väga lihtsad funktsioonid, mis tagastavad objektid, mis peavad sisaldama tüübi atribuuti. Kuna JS on asünkroonne, vajame kahte toimingut: üks signaalimiseks päringu saatmisel ja teine ​​signaalimiseks vastuse saamisel. Kogu rakendus saab teada, millal need toimingud toimuvad.

Allpool oleme lisanud ka funktsiooni nimega fetchProducts. Nagu näete, on see funktsioon:

  • saadab päringutoote toimingu,
  • kutsub toodete hankimiseks üles API-liidese,
  • saadab tulemuse saamise korral toimingu ReceiveProducts.

Vaadake koodi sisse Gist.

Rakenduse oleku muutmiseks lisame niinimetatud Reduxi "reduktor". Reduktor on lihtsalt funktsioon, mis kuulab konkreetseid toiminguid ja muudab osa globaalsest olekust, antud juhul toodete loendist.

See reduktor ei tee päringutootega seotud toimingute korral midagi, see tagastab alati praeguse oleku. Toodete vastuvõtmise toimingu jaoks tagastab reduktor talle edastatud andmed, sel juhul on see toodete loend.

Vaadake koodi sisse Gist.

Asjade kokkuvõtmiseks kasutame neid toiminguid ja reduktorit uues toodete komponendis.

Vaadake koodi sisse Gist.

See komponent on pakitud Reduxi ühendamismeetodisse ja lihtsalt saadab rakenduses fetchProducts selle komponendisWillMount. Samuti sisaldab komponent tootenimekirja, kuid nagu näete toodete nimekirja, ei saa komponent toodete andmeid otse. Seda seetõttu, et tootenimekirja komponent on otseselt seotud globaalse rakenduse olekuga, kasutades ka Reduxit.

Sel viisil pääseb ta toodete andmetele juurde otse rakendustepoest, itereerib üle toodete loendi ja saab ProductCardi komponendi abil ühe tooteelemendi renderdada.

Vaadake koodi sisse Gist.

Siiani oleme näinud näiteid andmete kuvamise kohta, kuid mis oleks siis, kui sooviksime lisada kasutaja interaktsiooni, näiteks toote ostukorvi lisamise?

Sel juhul, kui kasutaja klõpsab nuppu "Lisa ostukorvi" nuppu, saadame toimingu, mis muudab rakenduse globaalset olekut. Päise riba, mis näitab ostukorvi toodete arvu, ühendatakse Reduxiga. See loendab rakenduse ostukorvi salvestatud toodete arvu ja värskendab ennast vastavalt.

lisa ostukorvi näide

Rakenduse linkimine WordPressiga

Need on kõik peamised näited teie töö alustamiseks ja te ilmselt mõtlete, kuidas täpselt seda rakendust WordPressiga siduda saame.

Noh, me võime rakenduse hostida alamdomeenil ja lasta sellel API-ga ühenduda või saame seda kasutada WordPressi teemana – see tähendab, et luuakse index.php-failiga väga lihtne teema, mis laadib lihtsalt JavaScripti / CSS-faili. Loo-reageeri-rakenduse katteplaat sisaldab käske rakenduse ehituse loomiseks, nii et saame tootmisfailid kohe kätte.

Vaadake koodi sisse Gist.

Kus kasutada teenindavaid töötajaid

Võrguühenduseta režiimi jaoks saame lisada teenindustöötaja, kes kuvab rakenduse kesta ka siis, kui kasutajad on võrguühenduseta. Teenindaja on lihtsalt JavaScripti fail, mis registreerib ennast brauseris.

Vaadake koodi sisse Gist.

On mitmeid strateegiaid, mida saate võrguühenduseta režiimis kasutada, näiteks esimene võrk või vahemälu ja nende kohta saate lugeda Google’i offline kokaraamat.

Rakenduse kesta vahemällu salvestamisel on eeliseid isegi siis, kui meil on võrguühendus, sest rakendus laadub palju kiiremini.

Kui soovite minna veelgi kaugemale ja alustada API-st pärinevate andmete vahemällu salvestamist, saate kasutada NPM-i pakette, näiteks redux-persist, ja muuta oma rakendust, et brauseri kohalikust salvestusruumist andmeid salvestada / otsida.

Veebi tõukemärguannete jaoks soovitame vaadata Üks signaal tasuta WordPressi pistikprogramm. See pistikprogramm töötab ka reageerivate teemadega, nii et peaksite seda kindlasti kohe kontrollima.

Mis järgmiseks?

Sa saad leida ülaltoodud WooCommerce PWA tutvustus siin.

Töötame juba beetaversiooni kallal ja siin on vaid osa meie teekaardist:

  • Lisage võrguühenduseta režiimi võimalused
  • Lisage tõukemärguandeid
  • Viige makseprotsess lõpule

Kui soovite anda oma panuse või kohandada seda oma vajaduste jaoks, leiate e-kaubanduse progressiivse veebirakenduse alfaversiooni saidil GitHub.

PWA demo

Mida arvate progressiivsetest veebirakendustest ja nende rollist mobiilse WordPressi maastikul? Kas kaalute seda teed oma järgmise projektiga?

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Kujundus ja esitlus Karol K poolt.

Autori kohta: Alexandra Anghel on kaasasutaja ja CTO kaasasutaja Appticles.com – platvorm progressiivsete veebirakenduste loomiseks. Platvormi laiendusena on Appticlesil WordPressi pistikprogramm (WordPressi mobiilipakk), mis on ületanud ühe miljoni allalaadimise. Alexandra on täielik virna arendaja. Ta osales kahes ärikiirendis – Startupbootcamp (Kopenhaagen / Taani) ja Prosper Women Accelerator (Saint Louis / USA). 2017. aasta alguses on ta ühinenud Codette’iga kaasasutajana.

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