Vaatekaapin järjestäjä: 13 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:01

Riippumatta siitä, onko kyse vaatteiden ostamisesta tai jos sinua pyydetään aina lainaamaan mitä tahansa, joskus haluat katsoa kaappisi mistä tahansa nähdäksesi, onko sinulla jotain vastaavaa.

Tämä on yhden luukun palvelu ja se on laaja moneen muuhun tarkoitukseen. My Wardrobe Organizer on yhdistelmä Google Sheetsia SQL -tietokantana, Google Scriptsia tietojen käsittelyyn ja Google WebAppia näiden tietojen online -portaaliksi. Loppukäyttäjä voi nähdä kaikki tuotteet, suodattaa jotain tiettyä, merkitä kohteet lainaksi, hallita pyykkiä ja estää äitiä ostamasta sinulle samaa paitaa jouluksi joka vuosi*.

(*Ei takuuta. Äidit ostavat mitä haluavat, tarvitsetko sitä vai ei)

Nopea vilkaisu yllä olevan kuvan verkkosivujen suunnitteluun saattaa tunnistaa tutun ulkoasun. Vaatekaappi Järjestäjä on asetettu kuten mikä tahansa tavallinen vaatesivusto. Tämä osasto jakaa osastot ylhäältä ja suodattimet sivulta, tämä käyttöliittymä tuo toiminnallisuuden tuntemuksen satunnaiselle käyttäjälle. JA sitä on helppo käyttää.

Vaihe 1: Oman kopion määrittäminen

Aloitetaan luomalla oma kopio tästä projektista.

Google asema

Napsauta yllä olevaa linkkiä siirtyäksesi tämän sovelluksen nykyiseen versioon.

Näet tässä kansiossa 3 kohdetta: Google -lomakkeen, Google -taulukon ja kansion.

Napsauta hiiren kakkospainikkeella Google -taulukkoa ja valitse Tee kopio.

Aseta tämän kopion sijainti omaksi Driveksi.

Tämän asiakirjan kopioinnin jälkeen Google -lomake luodaan automaattisesti samaan kansioon, johon siirrät Google -taulukon.

Jos haluat luoda kansion (tämä on välttämätöntä kohdekuvien latausten keräämiseksi), napsauta kopioitua Google -lomaketta ja näyttöön tulee kehote, jossa sinua pyydetään palauttamaan kansioiden sijainti lataamista varten.

Sinulla on nyt kopio tästä asiakirjasta työskennelläksesi itse!

Vaihe 2: Yleiskatsaus Google -lomakkeeseen

Nyt kun sinulla on oma versio tästä sovelluksesta, katsotaanpa ympärillemme.

Google -lomakkeesi on määritetty hyväksymään monenlaisia kohteita. Paidoilla, housuilla, mekkoilla ja kengillä on kuitenkin eri kokorajoitukset. Siksi tämän lomakkeen toinen osa täytetään sen osaston perusteella, jolle arkistoit tuotteen. Olen (miesartikkelin) malliin luonut viisi eri kokoluokkaa. (Naisten artikkelit, klikkaa tästä, siellä on paljon muuta).

Määritin jokaisen mitoitusosion alle yksilöllisen otsikon jokaiselle kerättävälle parametrille. Emme halua, että tietokannassamme on useita sarakkeita nimeltä "Koko", tai emme pystyisi määrittämään, minkä tyyppisiä vaatteita tämä koko koskee.

Jokaisen osion lopussa käyttäjä ohjataan tämän lomakkeen viimeiseen osaan: Sijainti. Päätin henkilökohtaisesti lisätä sijainnin määrittääkseni kohteet kuivapesupalveluista, pesula, niiden tilalle tai kohteet, joista olen antanut ystäväni lainata. Tämä antaa minulle mahdollisuuden olla järjestäytynyt ja koskaan tuntea, että kaipaan vaatetta jostakin.

Kuten alussa mainitsin, tätä projektia voidaan laajentaa miljoonalla eri tavalla. Voit käyttää sitä inventaarioon, tarkempaan organisointityökaluun tai vaatteiden tiukkaan lainaamiseen. Kenttiä ja osioita, joita voit lisätä, on loputtomasti, joten älä rajoitu siihen, mikä on lomakkeessani. (Naisten artikkelit löydät täältä)

Ennen kuin lataat muutamia omia kohteitasi, siirrymme seuraavaan vaiheeseen varmistaaksemme asianmukaisen lähettämisen.

Vaihe 3: Google -komentosarjat: (Palvelinkoodi.gs) Katso ensin tiedot ja koodi

Kun napsautat Google Sheets -asiakirjaa, näet monia tietosarakkeita (ja joitakin rivejä, jotka on jätetty esittelemään). Lomakkeen lähettämisen aikana jotkut kohdat ohitetaan, mikä näkyy joidenkin sarakkeiden puuttuvista tiedoista. Mutta lisäsarakkeita, kuten tunnus, oletussijainti, kuka ja päivitetty, on lisätty näiden kohteiden muokkausten seuraamiseksi paremmin.

Lomakkeen lähettämisen yhteydessä on luotu tunnuskenttä, joka mahdollistaa yksilöllisen tunnisteen kulkiessaan tätä tietokantaa. Tämän kentän luomiseksi katsomme komentosarjan muokkausohjelmaa napsauttamalla Työkalut> Komentosarjan muokkaus.

Kun komentosarjaeditori on auki, huomaat 8 asiakirjaa tämän uuden ikkunan sivupalkissa. Nämä asiakirjat auttavat hallitsemaan taustaprosessia, etupaneelin näyttöjä ja käyttöliittymän toimintoja. Hyppäämme jokaiseen (jos pysyt ympäri), mutta napsauta nyt palvelinkoodia.

Server Code.gs -tiedostossa on monia toimintoja:

onSubmit (e), onOpen (), doGet (), include (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Tämä toiminto määritetään ensimmäisenä toiminnona, joka suoritetaan, kun Google -lomake lähetetään. Voit sijoittaa muita toimintoja tämän toiminnon sisälle, jotta monet eri prosessit voivat tapahtua.

onOpen (e) - Tätä toimintoa kutsutaan, kun Google Sheets avataan. Se täyttää uuden valikkovaihtoehdon, joka mahdollistaa nopean pääsyn sovelluslinkkeihin ja näkymiin.

doGet ()- Tätä toimintoa kutsutaan Web-sovelluksen osoitekutsussa. Kun käyttäjä selaa julkaistua Web -sovellusta, tämä koodi kertoo kyseiselle sivulle, mitä näytetään. Tässä tapauksessa se on asiakirja Application.html.

include (tiedostonimi) - Tätä toimintoa käytetään HTML -sivujen sisällä muiden asiakirjojen lukemiseen ja niiden sisällön lisäämiseen oikeaan HTML -muotoon toisella sivulla. Käytämme sitä CSS.html- ja JS.html -tiedostoissamme.

openApplication () ja openLaundryApp () - Nämä toiminnot sisältävät koodin, joka suoritetaan, kun käyttäjä napsauttaa Google -taulukon työkalupalkkiin lisättyjä valikkopainikkeita.

changeValueOnSubmit (e) ja setIDOnSubmit (e)- Näitä toimintoja tarkastelemme nyt. He ovat vastuussa tiettyjen kenttien päivittämisestä oletusarvoilla, kun lomake lähetetään alun perin.

Vaihe 4: OnFormSubmitin ottaminen käyttöön

Nämä kaksi toimintoa, changeValueOnSubmit (e) ja setIDOnSubmit (e), on liitettävä lomakkeen lähettämiseen. Tätä varten meidän on otettava käyttöön liipaisin.

Otamme liipaisimen käyttöön napsauttamalla Muokkaa> Nykyisen projektin laukaisimet. Tämä avaa Google Developer Hubin.

Käynnistimen kojelaudan oikeassa alakulmassa on painike Lisää liipaisin. Klikkaa tästä.

Asetamme nyt toiminnon toimimaan, kun lomake lähetetään. Meidän tapauksessani minulla on useita toimintoja (changeValueOnSubmit (e) ja setIDOnSubmit (e)), jotka laitan onSubmit () -funktion sisälle, joten minun on asetettava vain yksi liipaisin. Siksi valitsemme onSubmit () ja asetamme tämän laukaisimen suorittamaan lomakkeen lähetys.

Meillä on nyt työlomake, joka täyttää Google -taulukon yksilöllisillä tunnisteilla ja asettaa oletusarvot.

Voit nyt ladata omia kohteitasi Google -lomakkeen avulla. (Tätä ei tarvitse jatkaa, koska demoarvoja on jo olemassa). Nyt sukellamme käyttöliittymään.

Vaihe 5: Käyttöliittymän määrittäminen

TERVETULOA! Olemme vihdoin saavuttaneet sen osan, jota halusit, käyttöliittymän !!!!

Ensi silmäyksellä täällä ei ole mitään. Emme ole vielä soittaneet. Jos haluat ladata sivun nopeammin, päätin olla vaimentamatta ensimmäistä sivua KAIKKI tavaroidesi kanssa ja sallia sinun napsauttaa sitä, mitä haluat nähdä nopeammin. Koska näin on, pääsisältökentässä ei ole kohteita eikä sivupalkissa suodattimia. Napsauta Kaikki nähdäksesi, mitä tietokantaamme on.

Olemme nyt ladanneet kaikki tietokantamme kohteet pääsisältökenttään. Näet kuvat, henkilötunnukset, värit, koot ja sijainnit. Sijaintikentän voi päivittää täältä! Jos päätät lainata esineen, voit valita kyseisen vaihtoehdon, voit sijoittaa sen kaappiin, lipastoon tai pyykkiin.

Ja sivupalkissamme on kaikki mahdolliset kentät jokaiselle vaatetukselle uudessa kyselyssämme. Kuvittele, että tällä sivupalkilla on 20 eri kokovaihtoehtoa, se ei olisi kovin tehokasta, joten rajaamme hakua napsauttamalla Lisävarusteet.

Nyt kun olemme ladanneet lisävarusteita, katso sivupalkkia. Se on mukautettu vain 3 kenttään, koska nämä ovat parametrit, jotka koskevat kaikkia tämän kyselyn kohteita. Aion järjestää värin mukaan. Napsauttamalla väriä avautuu pudotusvalikko. Täällä voin joko kirjoittaa haluamani värin ja valita sen, tai jos näen vaihtoehtoni heti, napsauta sitä. Valitsin punaisen tähän esittelyyn. Napsauta tämän sivupalkin alaosassa Käytä suodatinta ja pääsisältö päivittyy näyttäen kohteet, joiden väriparametriksi on asetettu punainen väri.

Mainitsin aiemmin, että tämä tietokanta auttaa minua hallitsemaan kohteitani lainassa ja pyykissä. Hieman helpottaakseni sen sijaan, että napsauttaisin manuaalisesti jokaista tämän pääsivun pudotusvalikkoa, loin Pesula -tilan. Palaa Google Sheet -sivulle ja sovellusnäkymässä näet Pesula -tilan. Tämä vaihtoehto tuo esiin pienemmän modaalin, joka näyttää vain pyykkiä sisältävät kohteet. Voin nyt merkitä kaikki nämä kohteet oletusarvoiksi, mikä asettaa ne takaisin paikoilleen, joihin ne normaalisti tallennetaan.

Vaihe 7: Projekti valmis

ONNITTELUT

Niille teistä, jotka haluavat vain toimivan tietokannan kohteidenne hallintaan, tervetuloa Online Järjestäjä -palveluun. Niille uteliaille, jotka ovat kiinnostuneita tämän sovelluksen takana olevasta koodista. Pidä kiinni, kun rikkoan sen.

*Voit vapaasti poistaa testikohteet sen jälkeen, kun olet syöttänyt vähintään yhden omista kohteistasi tietokantaan. (Selitän myöhemmin, jos pysyt kiinni).

Vaihe 8: Vaihe 1: taustakoodi (palvelinkoodi.gs)

Aiemmin avasimme Server Code.gs -tiedoston, ja kerroin nopeasti kaikista toiminnoista, koska niiden tarkoituksena oli palvella kaikkia juuri määrittämiäsi kohteita, mutta nyt hajotamme ne osaksi toiminnoista ja apuohjelmista, joita kutsutaan jotta tämä koodi menestyy.

1) Pöydän kulku:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Lomakkeen vastaukset 1"); var alue = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Tämä koodi on perusta Google Sheetin kulkemiselle. Soitan taulukolle nimen eikä numeron perusteella, jotta arkit poistetaan tai toimintojen mukaan järjestetään uudelleen.
• Tässä koodissa kerään vain alueen kaikille taulukon tiedoille.

2) Tunnuksen määrittäminen:

var LastID = range.getCell (rowNum-1, 1); var CellValue = Number (LastID.getValue ()); var ColA = 1; var max = 15; var min = 5; CellValue = CellValue + Math.round ((Math.random ()* (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

• Pyysin aiemmin, että demoarvot jätetään taulukkoon, kunnes käyttäjä on lähettänyt vähintään yhden arvon itselleen. Tämä johtuu siitä, että Auto ID -generaattori täyttää tietokannan viimeisen arvon täyttää.
• Haen viimeisen toisen ja viimeisen rivin, koska viimeinen rivi on uusi arvo ja ensimmäinen sarake tunnuksen arvolle.
• Sitten luon satunnaisesti luvun 5 ja 15 välillä ja lisään sen viimeiseen arvoon. *
• Lopuksi sijoitan tämän arvon viimeisen rivin ID -sarakkeeseen.
• Seuraavaksi kutsumme changeValueOnSubmit (e) -funktiota.

* Valitsin 5-15 salliakseni merkinnät ja Google Home -integraation tulevaisuudessa, jotta numerot eivät ole tarpeeksi lähellä aiheuttaakseen sekaannusta ripustimissa, vaatetunnisteissa tai viivakoodeissa.

3) URL -arvon muuttaminen:

var DataChange = e.namedValues ["Tuotekuva"]; var DefaultLocation = e.namedValues ["Missä säilytät tämän vaatekappaleen?"]; var ColD = Sarakkeen tunnus _ ("Kohteen kuva") +1; var ColLoc = Sarakkeen ID _ ("Oletussijainti")+1; DataChange = DataChange.toString (). korvata ("auki?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Kun lähetät valokuvan Google -lomakkeen kautta, Google Sheetsiin lisätty URL -osoite on linkki varsinaiseen asiakirjaan. Meidän tapauksessamme, kun luomme HTML -sivua, haluamme linkin olevan vain kuva.
• Vaihtamalla "auki?" osan URL -osoitteesta "uc? export = view &", olemme sen sijaan luoneet linkin kuvaan.
• Asetamme tämän uuden arvon uudelleen nykyisen Tuotekuva -linkin sijaintiin.
• Asetan myös kohteen "Oletussijainti" ja "Nykyinen sijainti" samaan tietokantaan. Tästä on apua, kun yritän käyttää pesutilaa.

• Sukellamme siihen seuraavalla sivulla, mutta tämä on ensimmäinen vilkaisu luomani ColumnID_ () -toimintoon.

  Tämä toiminto käyttää sarakkeen nimiä kääntääkseen sen sarakkeen kokonaislukuun, mikä on hyödyllistä aluehauille, jotka edellyttävät sarakkeen numeroa nimen sijasta

4) SpreadsheetApp.getUI ()

• Toisessa kuvassa näet SpreadsheetApp.getUI (): n käytön, jolla se loi työkalurivivalikon lisäyksen Google Sheetiin.
• . GetUI () -toiminto auttaa myös luomaan modaalisen ponnahdusikkunan, jota käytetään pyykkitilassa ja pikalinkkinä verkkosivuston käyttöliittymään.

5) HTMLService

• Tässä koodissa käytetään kahta HTMLServices -tyyppiä: Malli ja HTMLOutput
• Malli mahdollistaa koodin lisäämisen HTML -koodin sisälle, jotta palvelimelta tulevat tiedot voidaan täyttää sivun kutsuttua.
• HTML -tulostus näyttää yksinkertaisia HTML -sivuja.
• Käytössämme on myös include () -menetelmä, jonka avulla voimme luoda useita HTML -tiedostoja ja yhdistää ne yhdeksi mallipohjaiseksi HTML -tiedostoksi palauttamalla tiedoston sisällön HTML -muodossa merkkijonon sijasta.

Olen liittänyt asiakirjan, joka on määritetty kuten Google App Scripts Documentation, jotta tutustutaan lähdekoodin ja toimintojen selitykseen Google Appsissa.

Vaihe 9: Vaihe 2: Taustakoodi, osa 2 (palvelinkutsut.gs)

Nyt olemme kirjoittaneet palvelinkutsut. Näitä toimintoja käytetään pääasiassa HTML -JavaScriptissä, joten ne on erotettu koodista, jota käytetään pääasiassa palvelimen Code.gs -sivuston taustapuolella.

Kuva 1) Yleiset muuttujat:

Kuva 2) kohteiden noutaminen:

Kuva 3) fetchItemsQry

Kuva 4) suodatin

Kuva 5) fetchFiltersWithQry

Kuva 6) ColumnID ja CacheCalls

Näiden kanssa on paljon puhuttavaa. Ja koodin murtamiseksi ja selittämiseksi, mitä tapahtuu, tarvitsin hieman enemmän kirjoitustilaa. Liitteenä on asiakirja ServerCalls.gs -koodin erittelylle

Tämä asiakirja on määritetty kuten Google App Scripts Documentation, ja se jopa linkittää vastaaviin kohteisiin.

Vaihe 10: Vaihe 3: HTML -koodi (Application.html)

HTML -koodi on erittäin tyytymätön Instructablen valintaikkunassa. Seuraa siis yllä olevia kuvia.

1) Sovellus.html -sivun otsikkoon luomme otsikon ja kutsumme CSS.html -sivun ladattavaksi.

*Koska olemme mallipohjaisia HTML -sivuja, voimme lisätä tähän asiakirjaan lisää koodia sotkematta nykyistä näyttöä käyttämällä aiemmin mainittua sisällytä (pageName) -menetelmää, joka löytyy palvelinkoodista.gs

Pääotsikkolaatikko löytyy myös tästä kuvasta. Voit muuttaa otsikkoa täällä ja kirjoittaa "[Nimesi] vaatekaappi" tai mitä tahansa muuta, jonka haluat tunnistaa tälle sivulle.

2) Yläotsikon alapuolella on ylin navigointipalkki.

Tämä navigointipalkki sisältää kaikki artikkelityypit, jotka on lueteltu Google Sheetsin artikkelisivulla.

Sisäinen toiminto kutsutaan noutamaan joukko näistä kohteista. Sitten suoritetaan silmukka, joka sisältää kaikki nämä vaihtoehdot valikkopainikkeena ja jossa on toimintakoodi, joten kun käyttäjä napsauttaa valikkopainiketta, vastaavat kohteet näkyvät kehon alueella.

3) Päärunko.

Tässä osassa on 4 osaa. Tekstin tulostus, sivupalkin suodatin, pääkuvat ja JS sisältää.

Tekstin ulostulon avulla käyttäjä voi nähdä nopean tekstinäkymän siitä, minkä tyyppisiä kohteita hän parhaillaan katselee sen sijaan, että viittaisi valittuun valikkovaihtoehtoon.

Sivupalkkisuodatin sisältää monet suodattimet, jotka ovat käytettävissä käyttäjän valitsemalle kohteelle. Nämä suodattimet heijastavat kaikkia tämän luokan käytettävissä olevia vaihtoehtoja sekä sitä, kuinka monta tuotetta kuuluu kyseisen luokan arvon alle. Tällä sivupalkilla on JavaScript -koodi (josta keskustellaan seuraavassa).

Päärunko on tällä hetkellä tyhjä, mutta aivan kuten suodattimetkin, se on täynnä kohdelaatikoita, joissa esitetään kohteen tunnus, väri, koko ja sijainti sekä kuva, kun käyttäjä valitsee luokan ja JavaScript -koodi täyttää tämän alueen.

Lopuksi sisältää (JS), katsotaanpa tätä seuraavassa vaiheessa.

Vaihe 11: Vaihe 4: JavaScript -koodi (JS.html)

Jos luulit palvelinkoodin olevan raskas, hanki tämä.

Tässä yhdistämme HTML- ja SeverCode -koodimme käyttäjien vuorovaikutukseen. Kaikki napsautettavat kohteet on käsiteltävä täällä, jotta saadaan oikeat tiedot ja palautetaan ne luettavassa muodossa. Katsotaanpa siis ensimmäisiä puheluitamme:

Käsikirjoitus kutsuu: Käytän tähän projektiin 3 eri kirjastoa; jquery, bootstrap ja erityinen bootstrap-select-lisäosa. Nämä kirjastot mahdollistavat objektien muotoilun ja helpommat kutsut HTML -koodin elementteihin.

Seuraava tärkeä JavaScript -rivini on alla:

$ (asiakirja). keypress (function (event) {if (event.which == '13') {event.preventDefault (); }});

Tässä estän Enter -näppäimen käynnistämästä mitään lomakkeita. Kuten tässä tapauksessa, Google Web Appsille annetaan vain yhden sivun osoite. Enter -näppäin lisäisi tietoja HTML -osoitteeseen ja yrittäisi ohjata käyttäjän uudelleen. Poistamalla tämän käytöstä sallit JavaScript -koodisi tehdä kaiken työn.

function removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

function updateDBlocation (id, value) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (tunnus, arvo); }

Tässä on kaksi toimintoa, jotka soittavat palvelimen Code.gs -tiedostoon. Linja:

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters ();

siinä on monia työosia, mutta luuranko on juurtunut osoitteesta "google.script.run", joka kertoo HTML -sivulle, että seuraava toiminto on palvelimella.

• Tämän koodin viimeinen bitti on suoritettava toiminto. Tässä esimerkissä ServerRemoveFilter ()
• Lisäämällä withSuccessHandler () HTML -sivu tietää nyt, mitä tehdä palautetuille tiedoille, ja tämä toiminto suoritetaan suluilla.
• Sama koskee withFailureHandler ()

Nyt kun olemme jakaneet palvelinkoodipuhelun, katsotaanpa nopeasti, mitä tapahtuu, kun nämä palvelinkutsut onnistuvat ja epäonnistuvat.

function allGood (e) {console.log ("Menestys palvelimella"); } -toiminto onFailure (virhe) {$ ("#message-box"). html ("

Vaatteita ei voi noutaa tällä hetkellä. VIRHE: " + error.message +"

");} -toiminto FailDBUpdate (virhe) {$ ("#message-box "). html ("

Sinulla ei ole oikeutta muuttaa sijaintia. VIRHE: " + error.message +"

"); $ (". location-selects "). prop ('poistettu käytöstä', 'poistettu käytöstä');}

Tein hyvin yksinkertaisen konsolilokin, joka osoitti onnistumisen, kun sijaintitoiminto suoritetaan, mikä näkyy allGood (): na.

Kun näitä virheitä käsitellään, nämä kaksi toimintoa antavat virheilmoituksen, josta käyttäjä voi nähdä käyttämällä jQuery-kutsua HTML-objektiin, jonka tunnus on "viestilaatikko".

Siirrytään nyt karkeaseen työhön

Vaihe 12: Vaihe 5: JavaScript-koodiklikkaustoiminnot (JS.html)

Ylävalikkopalkissa on vaihtoehtoja kullekin artikkelityypille. Napsautuksella suoritettava toiminto on:

toiminto filterType (artikkeli, tunnus) {$ ("ul.navbar-nav li.active"). removeClass ("aktiivinen"); $ ("#currentArticle"). html ("// HTML -KOODI TÄSTÄ");

updateSideBar = tosi;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Artikkelit", artikkeli); var newSelect = "#type-"+id; $ (newSelect).addClass ("aktiivinen"); $ ("#myNavbar"). removeClass ("in"); }

Näemme tässä koodissa, että meillä on google.script.run, joka kutsuu palvelimen hakemaan tietoja. Tämän puhelun menestystoiminto on updateItems ().

KUVA 1 (tämän toiminnon raskaan HTML -koodin kanssa on vaikea kopioida tarkasti koodia ilman, että tässä ruudussa näkyy sotkua)

UpdateItems () -koodissa tapahtuu paljon asioita. Jälleen kerran meidän on läpäistävä meille palautettu objekti ja lisättävä jokainen kohde pääsivullemme.

HTML -koodi lisätään matriiseina koodin hajottamiseksi ja helpommaksi lukea ja nähdä, mihin itemData lisätään.

Poistan jokaisen kohteen silmukasta kenttiä, joita en halua nähdä kuvauksessa, kuten oletusarvo, aikaleima ja kuvan URL -osoite. Poistan kuvan URL -osoitteen kuvauksesta, koska se lisätään sen sijaan href -tunnisteeseen. Kun nämä tiedot on koottu, ne lähetetään päärunkoon jQuery.append () -toiminnon avulla.

Kun kaikki kohteet on lisätty sivulle, tämä kysely kohteista lähetetään uudelleen palvelinkoodiin lajitellakseen ja palauttaakseen suodatinvaihtoehdot kuvan 2 mukaisesti.

KUVA 2 (sivupalkin päivittäminen)

Hyvin samanlainen kuin updateItems () -funktio, meillä on jälleen HTML -koodiryhmiä ja silmukka kaikille suodatinvaihtoehdoille. Ainoa huomattava muutos on jQuery.selectpicker ('refresh'). Tämä toiminto tulee skriptikirjastosta, jonka sisällytimme viimeiseen vaiheeseen. Sen avulla ohjelmoija voi kirjoittaa yksinkertaisen HTML -valinnan ja antaa kirjaston päivittää sen sisältämään hakutoiminnon sekä CSS -koodin.

KUVA 3 (suodatus sivupalkin avulla)

Lopuksi meillä on updateFilter (formData) -toiminto. Tätä käytetään, kun lomake lähetetään sivupalkista. Aloitamme käyttämällä jQuery -funktiota.serializeArray (), joka lukee tässä tapauksessa lomakkeen määritetyn elementin HTML -koodin ja palauttaa palvelimelle lähetettävän merkkijonon arvot. Ja aloitamme prosessin uudestaan kuvasta 1.

Vaihe 13: Loppu… lopuksi

No, sinulla on se; täydellinen ja perusteellinen selitys, jonka avulla voit perustaa oman online -vaatekaapin tai hyödyntää Google -skriptini luomia toimintoja oman projektisi laajentamiseen.

Tämä projekti on ollut matka (ja dokumentointi tämän ohjeen kautta), mutta olen nauttinut prosessista ja toivon, että pidät tuotteesta. Haluaisin kuulla keneltä tahansa, joka tekee muutoksia, kuten Michael Jordan sanoo "Katto on katto", ja olen samaa mieltä siitä, että tällä sovelluksella ei ole rajoja.