Norite sukurti progresyvias žiniatinklio programas, pagrįstas „WordPress“ ir „WooCommerce“? Štai kaip (su kodų pavyzdžiais)

Norite sukurti progresyvias žiniatinklio programas, pagrįstas „WordPress“ ir „WooCommerce“? Štai kaip (su kodų pavyzdžiais)

Norite sukurti progresyvias žiniatinklio programas, pagrįstas „WordPress“ ir „WooCommerce“? Štai kaip (su kodų pavyzdžiais)
СОДЕРЖАНИЕ
02 июня 2020

Kaip jau tikriausiai galite pasakyti, šis įrašas yra mažai "pažengęs" pusėje, tačiau jame nagrinėjama labai įdomi tema ir pristatoma nauja šaka, kurią turime žengti visu savo tinklalapių ir (arba) programų mobiliuoju keliu..


Tai, ką mes vadiname "reaguojantis interneto dizainas" kurį laiką buvo su mumis, ir šiame žaidimo etape dauguma kūrėjų / svetainių / žiniatinklio įrankių jau visiškai integravo jo principus. Bet ar tai yra pabaigos žaidimas? "mobiliesiems pritaikytas"? O gal tai tik pradžia.

Na, „Google“ mano, kad tai pastarasis. Ir ateis progresyvios žiniatinklio programos!

Įrašas, kurį ketinate skaityti, yra dar vienas mūsų leidimas "dev namo viduje" iniciatyva (čia yra ankstesnė). Jį sudarė Alexandra Anghel iš „Appticles.com“.

Įveskite Aleksandrą:

Pažangios žiniatinklio programos „WordPress“ ir „WooCommerce“

Pažangios progresinės žiniatinklio programos

Pažangiosios žiniatinklio programos (PWA) yra patirtis, kurioje derinamos geriausios žiniatinklio ir geriausios programos. Vietinės „App Store“ programos praeityje tapo labai populiarios, nes naudojamos tokios funkcijos kaip stumti pranešimus, darbas neprisijungus, sklandi animacija ir perėjimai, įkėlimas į pradinį ekraną ir pan.

Žiniatinklio programos mobiliesiems yra „JavaScript“ programos, veikiančios naršyklėje ir bandančios įnešti į žiniatinklį kai kurias savo programų savybes, tačiau negalėjome pateikti, pavyzdžiui, tiesioginių pranešimų. Įdiegus naujas žiniatinklio API mobiliesiems, progresyviosios žiniatinklio programos dabar panaikina spragą ir suteikia visą mobiliesiems žiniatinkliui pritaikytą programą..

„Google“ juos apibūdina kaip yra:

  • Patikimas – Įkelkite akimirksniu
  • Greitas – Greitai reaguokite į vartotojo sąveiką
  • Patrauklus – Elgiasi kaip gimtoji programa

Norint pasiekti visus šiuos taškus, „Progressive Web App“ turi turėti šias galimybes:

  • Dirbkite neprisijungę arba prastomis tinklo sąlygomis
  • „Web App“ diegimo reklamjuostės arba „Pridėti į pagrindinį ekraną“
  • Naudokite žiniatinklio siuntimo pranešimus. Įdiegę „Web Push“ API, dabar savo vartotojams galime siųsti pranešimus apie tiesioginius pranešimus, net kai naršyklė uždaryta.
  • Įdiekite HTTPS
  • Panaudokite programų apvalkalą (arba programos apvalkalą), kuri iškart įkeliama į vartotojų ekranus, panašiai kaip vietinės programos.

Iš esmės PWA yra vieno puslapio programa, parašyta „JavaScript“. Režimas neprisijungus, „Pridėti į pagrindinį ekraną“ ir „Web Push“ pranešimai yra įdiegti naudojant aptarnaujančius darbuotojus.

Pažangiosios žiniatinklio programos ir atsakingasis interneto dizainas

Pažangiosios žiniatinklio programos neturėtų būti painiojamos su interaktyviu žiniatinklio dizainu. Pažangiosios žiniatinklio programos turi reagavimo galimybes, nes jos gali prisitaikyti prie skirtingų ekrano dydžių, tačiau jų unikalus vertės pasiūlymas yra savybės, dėl kurių jie tampa panašūs į programas.

Pastaraisiais metais RWD buvo pagrindinis mobiliųjų interneto sprendimų sprendimas, tačiau a Miškininkas Praėjusių metų ataskaitoje nustatyta, kad RWD pasiekė perpildymą – 87% skaitmeninės patirties kūrėjų tai priima, ir kad prieš mūsų akis keičiasi klientų lūkesčiai, kad jie teikia pirmenybę programoms panašioms žiniatinklyje.

Ar PWA yra sprendimas norint sudominti mobiliojo interneto vartotojus?

Kokybiškos progresyvios žiniatinklio programos kūrimas turi neįtikėtiną naudą, todėl lengva pradžiuginti vartotojus, aktyviau įsitraukti ir padidinti konversijas. Yra keletas pavyzdžių, kai įmonės, ypač elektroninės komercijos pramonėje, sėkmingai pasinaudojo progresyviosiomis žiniatinklio programomis, kad pagerintų savo metriką, nemaža jų yra išvardytos „Google“ kūrėjų svetainėje.

  • Pavyzdžiui, Alibaba.com sukūrė PWA, kuris leido greitai, efektyviai ir patikimai naudotis mobiliuoju internetu. Naujoji strategija pristatė 76% daugiau iš viso naršyklių konversijų ir keturis kartus didesnis sąveikos procentas iš „Pridėti į pagrindinį ekraną“.
  • Kitu atveju OLX norėjo iš naujo sudominti žiniatinklio mobiliuosius vartotojus naudodamas „Pridėti į pagrindinį ekraną“ ir „Push Notifications“. Jie padidėjo įsitraukimas 250% ir patobulino ir kitą metriką: laikas, kol puslapis tapo interaktyvus, sumažėjo 23%, atitinkamai sumažėjus atmetimo rodikliams – 80%. Taip pat pagerėjo pinigai: paspaudimų rodiklis (PR) padidėjo 146 proc..

Kaip mes žinome, kad mobilioji žiniatinklio programa yra progresyvi?

Visų pirma, progresyvumas yra balas, o ne Taip arba Ne, o ten yra „Chrome“ papildinys, vadinamas Švyturys kad galite naudoti šį rezultatą išmatuoti. Šis papildinys yra tikrai lengvai naudojamas ir sukuria ataskaitą su visomis PWA galimybėmis, iš esmės tai leidžia mums žinoti, ką turime pakeisti, kad žiniatinklio programa taptų visiškai progresyvia. Dėl mūsų alfa versijos „WooCommerce PWA“ mums pavyko pasiekti 91 rezultatą „Švyturyje“.

Švyturys

Kaip mes galime sukurti PWA??

„Google“ PWA standarte nėra išvardytos jokios konkrečios progresyvių interneto programų kūrimo technologijos ar sistemos. Tai gali būti bet kas, jei tik laikomasi kontrolinio sąrašo. Daugelis PWA yra sukurti naudojant Kampinis JS arba Reaguokite, kurios šiuo metu yra populiariausios „JavaScript“ sistemos.

reaguoti

Tiek „AngularJS“, tiek „React“ turi savo privalumus:

  • Kampinis / Joninės derinys šiais laikais yra gana populiarus. „Ionic“ yra puiki sistema, kuri iš pradžių buvo sukurta programoms mobiliesiems, tačiau išsiplėtė iki progresyvių žiniatinklio programų ir net darbalaukio programų.
  • Reaguoti tikrai intuityvu ir nesunku suprasti. Tai naudinga dėl puikios kaitlentės, sukurkite reaguokite, programos, kuri numatytai teikiama su PWA palaikymu.

Be šių dviejų, VueJS taip pat populiarėja.

Kitas, mes pamatysime keletą kodų pavyzdžių iš elektroninės komercijos programos, sukurtos kartu su „React“ „WordPress“ ir „WooCommerce“ viršuje REST API.

Galbūt jus taip pat domina šie straipsniai:

  • Geriausi kampiniai administratoriaus prietaisų skydelio šablonai

„WooCommerce REST“ API supratimas

Kuriant elektroninės komercijos programą, pirmiausia reikia API, iš kurios galime nuskaityti duomenis. Laimei, REST API įtraukimas į branduolį atvėrė galimybes naudoti „WordPress“ kaip pagrindinę programą. Be to, elektroninės komercijos programoms galime naudoti REST API iš populiarus „WooCommerce“ papildinys.

„WooCommerce“ taip pat turi NPM paketą („WooCommerce“ API) API skambučiams atlikti, bet, deja, šiam paketui reikalingas ir vartotojo raktas, ir vartotojo paslaptis, kad būtų autentifikuotos užklausos. Mums kiltų saugumo problemų, jei vartotojų paslaptį naudotume programinėje įrangoje „frontontend“.

Taip pat kuriant raktus iš „WooCommerce“ administratoriaus skilties neįmanoma nurodyti maršruto lygio leidimų, pavyzdžiui, suteikti prieigą prie produktų peržiūros ir rašyti prieigą užsakymams.

Taigi, savo „WordPress“ įskiepyje turėjome sukurti tarpinį serverį, kuris leidžia pasiekti ribotą API galinių taškų rinkinį. Kaip pagrindą mes panaudojome „WooCommerce REST API PHP“ apklotą, kaip galite pamatyti žemiau pateiktame pavyzdyje:

Peržiūrėkite kodą Esme.

Pirmiausia mes inicijuojame „WooCommerce“ klientą naudodami vartotojo raktą ir slaptą. Antrasis ir trečiasis būdai yra sukurti pasirinktinį maršrutą, vadinamą produktais, ir žemėlapį, kuris nukreipia į produktų / kategorijų galinį tašką iš „WooCommerce“ API.

Tokiu būdu mes galime leisti naudotis skaitymo kategorijomis ir produktais, tačiau leidžiame tik sukurti užsakymo operaciją.

Naujos „React“ programos sukūrimas atliekant keturis paprastus veiksmus

Sukūrę API, galime pradėti dirbti su mūsų „React“ programa. Įdiegę MazgasJS ir NPM visame pasaulyje galite naudoti „sukurti-reaguoti-programos“ paketą, kad greitai sukurtumėte „React JS“ programą, kuri pagal numatytuosius nustatymus palaiko PWA.

  1. Diegti „NodeJS“ ir NPM globaliai
  2. Diegti sukurti programą „reaguoti“ katilinė
    npm įdiegti sukurti-reaguoti-app -g
  3. Generuoti nauja „React“ programa
    sukurti-reaguoti-app mano-app
  4. Pradėti programą
    CD mano programa & npm pradžia

Žemiau yra programos, kurią sukuria programa „sukurti-reaguok“, ekrano kopija, joje yra viskas, ko mums reikia, todėl galime pradėti kodavimą, įskaitant tiesioginį perkėlimą:

reaguoti pavyzdys app

Pradėdami naują programą reikia atsiminti kelis dalykus:

1) Programos failų tvarkymas
Yra keletas gerų vadovėlių, kaip geriausiai susisteminti programą. Aš labiau mėgstu aplankus po vieną, nes tai leidžia geriau mastuoti. Galite rasti tikrai geras paaiškinimas čia.
2) Sąrašai ir kodavimo standartai
Kodavimo standartai gali erzinti, jei nesate prie jų pripratę, tačiau nepraleisk šio žingsnio. Jie padeda išvalyti nepanaudotas priklausomybes ir užtikrina, kad duomenys būtų tinkamai patikrinti komponentų lygiu. Be to, jei įdiegsite gražesnį redaktoriaus papildinį, kuris automatiškai suformatuos jūsų kodą, kodavimo standartų naudojimas taps beprotiška. Kalbant apie patį standartą, aš labiau mėgstu populiarųjį sukūrė „Airbnb“.
3) Smulkūs komponentai
Jei komponentų failai yra maži, juos lengviau išbandyti ir valdyti. Galite pradėti rašyti kodą į vieną komponentą ir, kai jis padidėja, padalinkite jį į mažesnį komponentą. UI / UX komponentams yra kelios bibliotekos, suderinamos su „React“, tokios kaip Medžiagos vartotojo sąsaja, Semantinė vartotojo sąsaja ar net Bagažinė, norėčiau pateikti tik keletą pavyzdžių.

Šiose bibliotekose yra paruoštų komponentų, tokių kaip tinkleliai, meniu, kortelės, mygtukai ir kt., Rinkinys. Čia pateiktas el. Prekybos programos sąsajos, sukurtos naudojant pagrindinius semantinio vartotojo sąsajos elementus, pavyzdys:

Galite pamatyti kategorijų sąrašą, produktų sąrašą ir šoninį meniu. Pasinerkime į kodą – pamatysite, kaip lengva naudoti „React“ kuriant tokį pavyzdį.

el. prekybos programos pavyzdys

Pasinerimas į „ReactJS“

Žemiau yra „React“ komponentas, kuris nuskaito produktų kategorijų rinkinį iš API. Komponento būsena inicijuojama tuščiu kategorijų sąrašu. Taikant komponentą „WillMount“, kurį prieš pateikimą automatiškai iškviečia „React“, mes pateikiame prašymą atkurti kategorijas ir, gavę atsakymą, pridedame jas prie būsenos:

Peržiūrėkite kodą Esme.

Kaip matote, mums nereikia skambinti pateikimo metodu, kai gaunamos kategorijos. „React“ rūpinasi tuo ir mums, ir perduoda komponentą iš naujo. Pateikimo metodas tiesiog grąžina kitą pasirinktinį komponentą, vadinamą „CategoriesList“, kuris gauna kategorijų duomenis ir atrodo taip:

Peržiūrėkite kodą Esme.

Aukščiau pateiktas komponentas pakartoja kategorijų, kurias jis gauna kaip reklamą, sąrašą ir iškviečia kitą pasirinktinį komponentą, vadinamą „CategoryCard“, kad pateiktų vieną kategorijos elementą..

Visi šie komponentai susisiekia perkeldami rekvizitus tarp jų. Pagrindinis komponentų komponentas iškviečia API ir perduoda kategorijų sąrašą „ViewsList“, kuris savo ruožtu perduoda išsamią kategorijos informaciją kategorijų kortelėms..

Visuotinės programos būsenos valdymas naudojant „Redux“

Aukščiau pateikto požiūrio problema yra ta, kad kartais mes turime duomenų, kuriuos reikia tvarkyti aukščiausiame programų lygyje, pavyzdžiui, produktų, kurie buvo įtraukti į pirkinių krepšelį, sąrašą. Prekių skaičius rodomas pirkinių krepšelio piktogramoje iš antraštės juostos, tačiau jos taip pat rodomos kaip sąrašas patikros puslapyje.

Jei visus šiuos duomenis pridėsime prie pagrindinio programos komponento, tai bus labai sunku valdyti didesnėms programoms. Štai kur tokios bibliotekos kaip „ReduxJs“ užeikite. Tiesiog norėčiau paaiškinti, kad „Redux“ galima naudoti kartu su bet kuria „JavaScript“ sistema, ji nėra būdinga tik „React“.

Taip pat „Redux“ naudojimas nereiškia, kad negalime naudoti būsenos ar rekvizitų komponento lygiu. „Redux“ turėtų būti naudojama tik duomenims saugoti, kurie yra prasmingi programos lygiu.

Pažiūrėkime, kaip galime skaityti produktus iš API ir pateikti juos sąraše, panašiai kaip mums reikia kategorijų, tačiau šį kartą naudojant „Redux“. Pirmiausia turime užmegzti ryšį su „Redux“, įvynioti pagrindinį programos komponentą į pasaulinę parduotuvę:

Peržiūrėkite kodą Esme.

Šiame pavyzdyje pasaulinėje programų parduotuvėje bus kategorijų ir produktų, sujungtų naudojant „Redux“ metodą „kombinuotojo reduktoriaus“, sąrašas..

Tada tęsiame apibrėždami „Redux“ veiksmus, kurie yra labai paprastos funkcijos, grąžinančios objektus, kuriuose turi būti tipo ypatybė. Kadangi JS yra asinchroninis, mums reikės atlikti du veiksmus: vieną – signalizuoti, kai siunčiama užklausa, ir kitą – signalizuoti, kai bus gautas atsakymas. Visa programa žinos, kada šie veiksmai bus atlikti.

Žemiau mes taip pat pridėjome funkciją, vadinamą „fetchProducts“. Kaip matote, ši funkcija:

  • išsiunčia užklausos produktų veiksmą,
  • iškviečia produktų gavimo API,
  • gavęs rezultatą išsiunčia veiksmą „getProducts“.

Peržiūrėkite kodą Esme.

Norėdami pakeisti programos būseną, pridėsime vadinamąjį „Redux“ "reduktorius". Reduktorius yra tik funkcija, kuri klauso konkrečių veiksmų ir keičia dalį pasaulio būklės, šiuo atveju gaminių sąrašo..

Šis reduktorius nieko nedaro, kai gaunamas užklausos produktų veiksmas, jis visada grąžina esamą būseną. Vykdydamas produktų gavimo procesą reduktorius grąžina jam perduotus duomenis, šiuo atveju tai bus produktų sąrašas.

Peržiūrėkite kodą Esme.

Norėdami susitvarkyti, mes naudojame šiuos veiksmus ir reduktorių naujame produktų komponente.

Peržiūrėkite kodą Esme.

Šis komponentas yra suvyniotas į jungimo metodą iš „Redux“ ir tiesiog siunčia „fetchProducts“ į jo komponentąWillMount. Be to, į šį komponentą įtrauktas produktų sąrašas, tačiau, kaip matote, produktų sąrašo komponentas tiesiogiai negauna produktų duomenų. Taip yra todėl, kad produktų sąrašo komponentas yra tiesiogiai susietas su pasauline programos būsena, taip pat naudojant „Redux“.

Tokiu būdu jis gali pasiekti produktų duomenis tiesiogiai iš programų parduotuvės, pakartoti produktų sąrašą ir naudoti „ProductCard“ komponentą, kad pateiktų vieną produkto elementą.

Peržiūrėkite kodą Esme.

Iki šiol matėme keletą duomenų rodymo pavyzdžių, bet kas būtų, jei norėtume įtraukti vartotojo sąveiką, pavyzdžiui, pridėdami produktą į krepšelį?

Tokiu atveju vartotojui spustelėjus "Į krepšelį" mygtuką, mes išsiųsime veiksmą, kuris pakeis visuotinę programos būseną. Antraštės juosta, kurioje rodomas krepšelio produktų skaičius, bus sujungta su „Redux“. Bus suskaičiuotas programos krepšelyje išsaugotų produktų skaičius ir atitinkamai atnaujinta.

pridėti į krepšelį pavyzdys

Programos susiejimas su „WordPress“

Tai yra visi pagrindiniai pavyzdžiai, nuo kurių galite pradėti, ir tikriausiai jums įdomu, kaip tiksliai galime susieti šią programą su „WordPress“.

Na, mes galime priglobti programą padomenyje ir leisti jai prisijungti prie API, arba galime naudoti ją kaip „WordPress“ temą – tai reiškia sukurti labai pagrindinę temą su index.php failu, kuris tiesiog įkels „JavaScript“ / CSS failą. Į „kurti-reaguoti-programos“ katilą yra įtrauktos komandos, skirtos kurti programos „build“, kad galėtume iškart gauti gamybos failus.

Peržiūrėkite kodą Esme.

Kur naudotis aptarnaujančiais darbuotojais

Prie neprisijungusio režimo galime pridėti paslaugų darbuotoją, kuris programos apvalkalą rodys net tada, kai vartotojai neprisijungę. Aptarnavimo darbuotojas yra tik „JavaScript“ failas, kuris registruojasi naršyklėje.

Peržiūrėkite kodą Esme.

Yra kelios strategijos, kurias galite naudoti neprisijungus režimui, pavyzdžiui, pirmiausia tinklas arba talpykla, ir apie jas galite perskaityti „Google“ neprisijungusi kulinarijos knyga.

Programos apvalkalo išsaugojimas turi naudos net tada, kai turime tinklo ryšį, nes programa bus įkelta daug greičiau.

Jei norite žengti dar toliau ir pradėti talpinti iš API gaunamus duomenis, galite naudoti NPM paketus, pvz., Redux-persist, ir modifikuoti programą, kad išsaugotumėte / nuskaitytumėte duomenis iš naršyklės vietinės saugyklos.

Jei norite gauti pranešimus žiniatinklyje, rekomenduojame peržvelgti Vieno signalo „WordPress“ papildinys. Šis įskiepis taip pat veikia reaguojančiomis temomis, todėl tikrai turėtumėte nedelsdami tai patikrinti.

Kas toliau?

Tu gali Surask aukščiau pateikto „WooCommerce PWA“ demonstracija čia.

Mes jau dirbame su beta versija ir čia yra tik dalis mūsų gairių:

  • Pridėkite neprisijungusio režimo galimybes
  • Pridėti tiesioginius pranešimus
  • Užbaikite mokėjimo procesą

Jei norite prisidėti ar pritaikyti jį savo reikmėms, galite rasti progresyvios el. Prekybos programos alfa versiją „GitHub“.

PWA demonstracinė versija

Ką manote apie progresyvias žiniatinklio programas ir jų vaidmenį mobiliųjų „WordPress“ aplinkoje? Ar ketinate žengti šiuo keliu įgyvendindami savo kitą projektą?

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 50–80%:

Karolio K išdėstymas ir pristatymas.

Apie autorių: Alexandra Anghel yra viena iš įkūrėjų ir CTO „Appticles.com“ – progresinių interneto programų kūrimo platforma. Kaip platformos plėtinys, „Appticles“ turi „WordPress“ papildinį („WordPress“ mobilusis paketas), viršijančių 1 mln. atsisiuntimų. Alexandra yra visiška kamino kūrėja. Ji dalyvavo dviejuose verslo greitintuvuose – „Startupbootcamp“ (Kopenhaga / Danija) ir „Prosper Women Accelerator“ (Sent Luisas / JAV). 2017 m. Pradžioje ji prisijungė prie „Codette“ kaip viena iš įkūrėjų.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    
    Palyginami 6 geriausi tinklalapių kūrėjai – kainos, funkcijos, kurias pasirinkti Interneto svetainės dizainas
    0 комментариев
    
    10 ir daugiau puikių „Wix“ šablonų vs „WordPress“ temų Interneto svetainės dizainas
    0 комментариев
    Adblock
    detector