Haluatko luoda edistyksellisiä Web-sovelluksia, jotka perustuvat WordPressiin ja WooCommercean? Näin: (w / koodi-esimerkkejä)

Kuten voitte todennäköisesti jo kertoa, tämä viesti on vähän "pitkälle kehittynyt" puolella, mutta se puuttuu erittäin mielenkiintoiseen aiheeseen ja tarjoaa meille uuden haaran, jota voimme seurata tällä koko mobiililaitteiden ensimmäisellä reitillä verkkosivuillemme ja / tai sovelluksillemme.


Se asia, jota kutsumme "reagoiva web-suunnittelu" on ollut jonkin aikaa kanssamme, ja pelin tässä vaiheessa suurin osa kehittäjistä / verkkosivustoista / web-työkaluista on jo integroinut sen periaatteet täysin. Mutta onko se lopullinen peli "mobiililaitteisiin sopiva"? Tai ehkä se on vasta alkua.

No, Googlen mielestä se on jälkimmäinen. Ja tulossa ovat edistykselliset Web-sovellukset!

Viesti, jota aiot lukea, on toinen painos "dev-talon sisällä" aloite (tässä on edellinen). Sen on koonnut Alexandra Anghel Appticles.com.

Anna Alexandra:

Progressiiviset Web-sovellukset WordPressissä ja WooCommerceissa

Progressiivisten Web-sovellusten ymmärtäminen

Progressiiviset Web-sovellukset (PWA) ovat kokemuksia, joissa yhdistyvät verkon parhaat puolet ja parhaimmat sovellukset. Alkuperäissovellussovelluksista on tullut erittäin suosittuja aiemmin ominaisuuksien, kuten Push-ilmoitukset, offline-tilassa työskentely, sujuvat animaatiot ja siirtymät, lataaminen aloitusnäyttöön ja niin edelleen.

Mobiiliverkkosovellukset ovat JavaScript-sovelluksia, jotka toimivat selaimessa ja yrittivät tuoda joitain natiivisovellusten ominaisuuksia verkkoon, mutta eivät pystyneet toimittamaan esimerkiksi push-ilmoituksia. Uusien Web-sovellusliittymien mobiililaitteiden käyttöönoton myötä Progressiiviset Web-sovellukset ovat nyt kaventaneet aukon tarjoamalla täyden sovellusmaisen kokemuksen mobiiliverkossa.

Google kuvaa niitä olevan:

  • Luotettava – Lataa heti
  • Nopeasti – Vastaa nopeasti käyttäjän vuorovaikutukseen
  • Mielenkiintoinen – Käyttäytyy kuin alkuperäinen sovellus

Kaikkien näiden pisteiden saavuttamiseksi progressiivisella Web-sovelluksella on oltava seuraavat ominaisuudet:

  • Työskentele offline-tilassa tai huonoissa verkkoolosuhteissa
  • Web-sovelluksen asennusbannerit tai Lisää etusivulle
  • Käytä Web Push -ilmoituksia. Web Push -sovellusliittymän käyttöönoton myötä voimme nyt lähettää Push-ilmoituksia käyttäjillemme, vaikka selain olisi suljettu.
  • Ota käyttöön HTTPS
  • Käytä sovelluskuori- (tai sovelluskuori) -arkkitehtuuria, joka latautuu hetkessä käyttäjien näytöille, kuten alkuperäiset sovellukset.

Pohjimmiltaan PWA on JavaScript-kirjoitettu yksisivuinen sovellus. Offline-tila, Lisää etusivulle ja Web Push -ilmoitukset toteutetaan kaikki huoltotyöntekijöiden avulla.

Progressiivinen Web-sovellus vs. reagoiva web-suunnittelu

Progressiivisia Web-sovelluksia ei pidä sekoittaa reagoivaan web-suunnitteluun. Progressiivisissa Web-sovelluksissa on reagoivia ominaisuuksia, koska ne voivat mukautua näytön eri kokoihin, mutta niiden ainutlaatuinen arvoehdotus ovat ominaisuuksia, jotka tekevät heistä sovelluksellisia.

Viime vuosina RWD on ollut go-to-ratkaisu mobiiliverkkoratkaisuille, mutta a Forrester viime vuoden raportissa todettiin, että RWD on saavuttanut kylläisyyden – 87% digitaalisen kokemuksen valmistajista omaksuu sen – ja että asiakkaidemme odotuksissa muutos suosimaan sovellusmaisia ​​kokemuksia verkossa tapahtuu silmiemme edessä.

Ovatko PWA-ratkaisut mobiiliverkkokäyttäjien houkuttelemiseen?

Korkealaatuisen progressiivisen Web-sovelluksen luomisella on uskomattomia etuja, joten sen avulla on helppo ilahduttaa käyttäjiä, kasvaa sitoutumista ja lisätä tuloksia. On olemassa useita esimerkkejä yrityksistä, etenkin verkkokaupan alalta, jotka ovat onnistuneesti käyttäneet Progressive Web -sovelluksia parantamaan tietojaan. Suuri osa niistä on lueteltu Googlen kehittäjien verkkosivustolla.

  • Esimerkiksi Alibaba.com rakensi PWA: n, joka johti nopeaan, tehokkaaseen ja luotettavaan mobiiliverkkokokemukseen. Uusi strategia toimitukset kasvoivat 76% selainten kaikkien konversioiden kokonaismäärä ja neljä kertaa korkeampi vuorovaikutusaste kohdasta Lisää etusivulle.
  • Toisessa käyttötapauksessa OLX halusi saada matkaviestinverkon käyttäjät uudelleen mukaan käyttämällä Lisää etusivulle ja Push-ilmoituksia. Ne lisääntynyt sitoutuminen 250% ja paransi myös muita mittareita: aika sivun vuorovaikutteiseksi laski 23%, vastaavasti 80%: n laskua poistumisprosenteissa. Myös ansaitseminen parani, napsautussuhde (CTR) nousi 146%.

Mistä tiedämme, että mobiiliverkkosovellus on edistyksellinen?

Ensinnäkin progressiivisuus on pistemäärä, ei Kyllä tai Ei, ja siellä on Chrome-laajennus, jota kutsutaan Majakka jonka avulla voit mitata tämän pisteet. Tätä laajennusta on todella helppo käyttää ja se tuottaa raportin kaikilla PWA-ominaisuuksilla. Periaatteessa se antaa meille tietää, mitä meidän on muutettava, jotta verkkosovellus muuttuu täysin edistykselliseksi. WooCommerce PWA: n alfaversiossamme onnistuimme 91 pistettä majakkaan.

Majakka

Kuinka voimme rakentaa PWA: n??

Googlen PWA-standardissa ei ole luetteloa erityisestä tekniikasta tai kehyksestä progressiivisten Web-sovellusten luomiseksi. Se voi olla mitä tahansa, kunhan tarkistusluetteloa noudatetaan. Monet PWA: t rakennetaan käyttämällä Kulmainen JS tai suhtautua, jotka ovat tällä hetkellä suosituimmat JavaScript-kehykset.

suhtautua

Sekä AngularJS: llä että Reactilla on etunsa:

  • Kulma / joonialainen yhdistelmä on melko suosittu nykyään. Ionic on loistava kehys, joka on alun perin rakennettu mobiilisovelluksille, mutta on laajentunut Progressiivisiin Web-sovelluksiin ja jopa työpöytäsovelluksiin.
  • Reaktio on todella intuitiivinen ja helppo ymmärtää. Se hyötyy loistavasta kattilalevystä, luo-reagoi -sovelluksesta, joka mukana tulee oletuksena PWA-tuella.

Näiden kahden lisäksi, VueJS on myös saamassa suosiota.

Seuraavaksi tulemme näkemään joitain koodinäytteitä Reaktin kanssa rakennetusta verkkokauppasovelluksesta WordPressin ja WooCommercein päälle. REST API.

Saatat olla kiinnostunut myös näistä artikkeleista:

  • Parhaat kulmanvalvojan hallintapaneelin mallit

WooCommerce REST -sovellusliittymän ymmärtäminen

Verkkokauppasovelluksen rakentamisessa tarvitsemme ensin sovellusliittymää, josta voimme hakea tietoja. Onneksi REST-sovellusliittymän sisällyttäminen ytimeen on avannut oven WordPressin käyttämiseen taustana. Lisäksi verkkokauppasovelluksissa voidaan käyttää REST-sovellusliittymää suosittu WooCommerce -laajennus.

WooCommercella on myös NPM-paketti (WooCommerce-sovellusliittymä) API-puhelujen tekemistä varten, mutta valitettavasti tämä paketti vaatii sekä kuluttaja-avaimen että kuluttajasalaisuuden pyyntöjen todentamiseksi. Meillä olisi turvallisuusongelma, jos käyttäisimme kuluttajasalaisuutta käyttöliittymäsovelluksessa.

Luodessasi avaimia WooCommerce-järjestelmänvalvojan osiosta ei myöskään voida määrittää käyttöoikeuksia reittitasolla, esimerkiksi sallia tuotteiden katseluoikeudet ja tilausten kirjoitusoikeudet.

Joten meidän oli luotava välityspalvelin WordPress-laajennukseen, joka mahdollistaa pääsyn rajoitettuun joukkoon API-päätepisteitä. Perustana käytimme WooCommerce REST API PHP -kääriä, kuten näet alla olevasta esimerkistä:

Näytä koodi päällä Ydin.

Alustamme WooCommerce-asiakkaan ensin kuluttaja-avaimen ja salaisuuden avulla. Toinen ja kolmas menetelmä luo mukautetun reitin nimeltä tuotteet ja kartan, joka reitittää tuotteiden / luokkien päätepisteeseen WooCommerce-sovellusliittymästä.

Tällä tavoin voimme sallia lukemisluokkien ja tuotteiden pääsyn, mutta sallimme vain tilauksen luontitoiminnon.

Uuden React-sovelluksen luominen neljässä yksinkertaisessa vaiheessa

Kun olemme asentaneet sovellusliittymän, voimme aloittaa React-sovelluksemme työskentelyn. Asennuksen jälkeen NodeJS ja NPM maailmanlaajuisesti voit luoda luo-reagoi -sovelluspaketin luodaksesi nopeasti React JS -sovelluksen, jolla on oletuksena PWA-tuki.

  1. Asentaa SolmuJS ja NPM maailmanlaajuisesti
  2. Asentaa luoda reagoivat-sovellus täytetekstiä
    npm asenna luoda-reagoida-sovellus -g
  3. Tuottaa uusi React-sovellus
    luo-reagoi -sovellus oma-sovellus
  4. Käynnistä sovellus
    CD-sovellukseni & npm alku

Alla on kuvakaappaus sovelluksesta, jonka luo-reagoi-sovellus, se sisältää kaiken mitä tarvitsemme, joten voimme aloittaa koodauksen, mukaan lukien reaaliaikainen lataus:

näyte reagoi sovellus

Käynnistäessäsi uutta sovellusta on mielessä muutama asia:

1) Sovellustiedostojen järjestäminen
Siellä on useita hyviä opetusohjelmia siitä, kuinka sovellus rakennetaan parhaiten. Pidän parempana kansioita ominaisuuksiltaan, koska se mahdollistaa paremman skaalautuvuuden. Löydät todella hyvä selitys täällä.
2) Linterit ja koodausstandardit
Koodausstandardit voivat olla ärsyttäviä, jos et ole tottunut niihin, mutta älä ohita tätä vaihetta. Ne auttavat puhdistamaan käyttämättömät riippuvuudet ja varmistavat, että tiedot on validoitu oikein komponenttitasolla. Lisäksi, jos asennat hienomman editorin laajennuksen, joka muotoilee koodisi automaattisesti, koodausstandardien käyttämisestä tulee helppoa. Itse standardin suhteen pidän parempana suosittua luonut Airbnb.
3) Pienet komponentit
Komponentitiedostojen pitäminen pieninä helpottaa niiden testaamista ja hallintaa. Voit aloittaa koodin kirjoittamisen yhdessä komponentissa ja jakaa sen pienempiin komponentteihin, kun se suurenee. UI / UX-komponenteille on olemassa useita kirjastoja, jotka ovat yhteensopivia Reaktin kanssa, kuten Materiaalin käyttöliittymä, Semanttinen käyttöliittymä tai jopa bootstrap, vain muutamia esimerkkejä.

Nämä kirjastot sisältävät joukon valmiita komponentteja, kuten ruudukkoja, valikkoja, kortteja, painikkeita ja niin edelleen. Tässä on esimerkki sähköisen kaupan sovellusliittymästä, joka on rakennettu Semanttisen käyttöliittymän peruselementeillä:

Näet luokkiluettelon, tuoteluettelon ja sivuvalikon. Sukellaan koodiin – näet kuinka helppoa on käyttää Reaktia luomaan tällainen esimerkki.

esimerkki verkkokauppasovellus

Sukellus ReactJS: iin

Alla on React-komponentti, joka lukee tuoteryhmät sovellusliittymästä. Komponentin tila alustetaan tyhjällä luettelolla. KomponenttiWillMount-menetelmässä, jonka React kutsuu automaattisesti ennen renderöintia, pyydämme luokkien hakemista ja lisäämme ne tilaan saatuaan vastauksen:

Näytä koodi päällä Ydin.

Kuten huomaat, meidän ei tarvitse kutsua renderöintimenetelmää, kun luokat vastaanotetaan, React huolehtii siitä meille ja toimittaa komponentin uudelleen. Renderöintimenetelmä palauttaa vain toisen mukautetun komponentin, nimeltään Kategoriat-luettelon, joka vastaanottaa luokkatiedot ja näyttää tältä:

Näytä koodi päällä Ydin.

Yllä oleva komponentti toistaa luettelon luokista, jotka se vastaanottaa potkurina, ja kutsuu toista mukautettua komponenttia nimeltä CategoryCard muodostamaan yhden luokkaelementin.

Kaikki nämä komponentit kommunikoivat kuljettamalla rekvisiitta niiden välillä. Tärkein Kategoriat-komponentti kutsuu sovellusliittymää ja välittää luettelon luokista Kategorialuetteloon, joka puolestaan ​​välittää luokan tiedot luokkakortteihin..

Globaalin sovellustilan hallinta Reduxilla

Edellä mainitun lähestymistavan ongelma on, että joskus meillä on tietoja, joita on hallittava ylimmällä sovellustasolla, esimerkiksi luettelo tuotteista, jotka on lisätty ostoskoriin. Tuotteiden lukumäärä näkyy otsikkopalkin ostoskorikuvakkeessa, mutta ne näkyvät myös luettelona kassasivulla.

Jos lisäämme kaikki nämä tiedot yläsovelluskomponenttiin, siitä tulee erittäin vaikea hallita isommissa sovelluksissa. Tässä on kirjastojen kuten ReduxJs tulkaa sisään. Vain selventääkseni, Reduxia voidaan käyttää yhdessä minkä tahansa JavaScript-kehyksen kanssa, se ei ole erityinen Reaktille.

Reduxin käyttö ei myöskään tarkoita, että emme voi käyttää osavaltion tasoja tai rekvisiitta. Reduxia tulisi käyttää vain sellaisten tietojen säilyttämiseen, jotka ovat järkeviä sovellustasolla.

Katsotaanpa kuinka voimme lukea tuotteita sovellusliittymästä ja tehdä niistä luettelo, samanlainen kuin mitä tarvitsemme luokkien kanssa, mutta tällä kertaa käyttämällä Reduxia. Ensinnäkin, meidän on luotava yhteys Reduxiin käärimällä sovelluksen pääkomponentti globaaliin kauppaan:

Näytä koodi päällä Ydin.

Tässä esimerkissä maailmanlaajuinen sovellusliike sisältää luettelon luokista ja luettelosta tuotteista, jotka yhdistetään yhdessä Reduxin yhdistelmäreducerimenetelmällä.

Sitten jatkamme määrittelemällä Redux-toiminnot, jotka ovat hyvin yksinkertaisia ​​toimintoja, jotka palauttavat objektit, joiden on sisällettävä tyyppiominaisuus. Koska JS on asynkroninen, tarvitsemme kaksi toimintoa: yhden signalointiin pyynnön lähettämisen yhteydessä ja toisen signalointiin vastauksen vastaanottamisen yhteydessä. Koko sovellus tietää milloin nämä toimet tapahtuvat.

Alla olemme lisänneet myös fetchProducts-nimisen toiminnon. Kuten näette, tämä toiminto:

  • lähettää pyydettävät tuotteet -toiminnon,
  • kutsuu sovellusliittymää tuotteiden noutamiseen,
  • lähettää ReceiveProducts -toiminnon, kun tulos on saatu.

Näytä koodi päällä Ydin.

Sovelluksen tilan muuttamiseksi lisäämme niin kutsutun Reduxin "alennusvaihde". Pelkistin on vain toiminto, joka kuuntelee tiettyjä toimia ja muuttaa osaa globaalista tilasta, tässä tapauksessa tuoteluettelosta.

Tämä supistin ei tee mitään vastaanottaessaan pyynnön tuotteita -toiminto, se palauttaa aina nykyisen tilan. Vastaanotettavia tuotteita varten vähennysventtiili palauttaa sille siirretyn tiedon, tässä tapauksessa se on tuoteluettelo.

Näytä koodi päällä Ydin.

Asioiden kääntämiseksi käytämme näitä toimintoja ja pelkistintä uudessa Tuotekomponentissa.

Näytä koodi päällä Ydin.

Tämä komponentti on kääritty Reduxin kytkentämenetelmään, ja se lähettää vain fetchProducts-komponentin komponenttiWillMount-metodissaan. Komponentti sisältää myös tuoteluettelon, mutta kuten näette tuoteluettelon, komponentti ei suoraan vastaanota tuotetietoja. Tämä johtuu siitä, että tuoteluettelon komponentti on linkitetty suoraan sovelluksen globaaliin tilaan, myös käyttämällä Reduxia.

Tällä tavoin se voi käyttää tuotetietoja suoraan sovelluskaupasta, iteroida tuotelistaan ​​ja käyttää ProductCard-komponenttia yksittäisen tuoteelementin tuottamiseen.

Näytä koodi päällä Ydin.

Toistaiseksi olemme nähneet joitain esimerkkejä tietojen näyttämisestä, mutta mitä jos haluaisimme lisätä käyttäjän vuorovaikutusta, esimerkiksi tuotteen lisäämisen ostoskoriin?

Tässä tapauksessa, kun käyttäjä napsauttaa "Lisää ostoskoriin" -painiketta, lähetämme toiminnon, joka muuttaa sovelluksen globaalia tilaa. Otsikkopalkki, joka näyttää korin tuotteiden määrän, yhdistetään Reduxiin. Se laskee sovelluksen ostoskoriin tallennettujen tuotteiden määrän ja päivittää itsensä vastaavasti.

lisää ostoskoriin esimerkki

Sovelluksen linkittäminen WordPressiin

Nämä ovat kaikki perus esimerkkejä aloittamisesta, ja luultavasti ihmettelet, kuinka voimme linkittää tämän sovelluksen WordPressiin.

No, voimme isännöidä sovellusta aliverkkotunnuksessa ja antaa sen muodostaa yhteyden sovellusliittymään tai voimme käyttää sitä WordPress-teemana – tarkoittamalla luomalla hyvin perusteema index.php-tiedostolla, joka vain lataa JavaScript / CSS-tiedoston. Luo-reagoi-sovelluksen kattilalevy sisältää komennot sovelluksen rakenteen luomiseen, jotta voimme saada tuotantotiedostot heti.

Näytä koodi päällä Ydin.

Missä palvelun työntekijöitä käytetään

Offline-tilaan voimme lisätä palveluhenkilön, joka näyttää sovelluksen kuoren myös silloin, kun käyttäjät ovat offline-tilassa. Palvelun työntekijä on vain JavaScript-tiedosto, joka rekisteröi itsensä selaimeen.

Näytä koodi päällä Ydin.

On olemassa useita strategioita, joita voit käyttää offline-tilassa, kuten verkko ensin tai välimuisti ensin, ja voit lukea niistä Googlen offline-keittokirja.

Sovelluksen kuoren välimuistissa on etuja, vaikka meillä olisi verkkoyhteys, koska sovellus latautuu paljon nopeammin.

Jos haluat mennä vielä pidemmälle ja aloittaa sovellusliittymästä tulevien tietojen välimuistiin tallentaminen, voit käyttää NPM-paketteja, kuten redux-persist, ja muokata sovellustasi tallentaaksesi / noutaaksesi tietoja selaimen paikallisesta tallennustilasta.

Web-push-ilmoituksia varten suosittelemme katsomaan Yhden signaalin ilmainen WordPress-laajennus. Tämä laajennus toimii myös reagoivilla teemoilla, joten sinun on ehdottomasti tarkistettava se heti.

Mitä seuraavaksi?

Sinä pystyt Etsi esittely yllä olevalle WooCommerce PWA: lle.

Työskentelemme jo beetaversion parissa ja tässä on vain osa etenemissuunnitelmaamme:

  • Lisää offline-tilan ominaisuudet
  • Lisää push-ilmoitukset
  • Viimeistele kassalle suorittaminen

Jos haluat osallistua tai mukauttaa sitä omiin tarpeisiisi, löydät e-kaupan progressiivisen verkkosovelluksen alfa-version GitHubissa.

PWA-demo

Mitä mieltä olet progressiivisista Web-sovelluksista ja heidän roolistaan ​​WordPress-mobiiliympäristössä? Harkitsetko tätä polkua seuraavan projektisi kanssa?

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 50–80%:

Suunnittelu ja esitys Karol K.

Tietoja kirjoittajasta: Alexandra Anghel on perustaja ja CTO at Appticles.com – alusta progressiivisten verkkosovellusten rakentamiseksi. Alustan jatkeena Appticlesilla on WordPress-laajennus (WordPress Mobile Pack), joka on ylittänyt yhden miljoonan latauksen. Alexandra on täydellinen pinokehittäjä. Hän osallistui kahteen liiketoimintakiihdyttimeen – Startupbootcamp (Kööpenhamina / Tanska) ja Prosper Women Accelerator (Saint Louis / Yhdysvallat). Vuoden 2017 alussa hän on liittynyt Codetteen perustajana.

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