Spintos tvarkyklė: 13 žingsnių

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:47

Nesvarbu, ar tai drabužių pirkimas, ar visada prašoma pasiskolinti bet kokį daiktą, kartais norisi, kad galėtum žvilgtelėti į savo spintą iš bet kurios vietos, kad pamatytum, ar turi kažką panašaus. Spintos organizatorius tai daro ir dar daugiau!

Tai vieno langelio principas ir jis yra platus daugeliui kitų tikslų. „Mano spintos tvarkyklė“yra „Google“skaičiuoklių, kaip SQL duomenų bazės, „Google“scenarijų, skirtų duomenims tvarkyti, ir „Google WebApp“derinys, skirtas šių duomenų internetiniam portalui. Galutinis vartotojas gali matyti visus daiktus, filtruoti kažką konkretaus, pažymėti daiktus kaip pasiskolintus, tvarkyti savo skalbinius ir neleisti mamai kasmet perpirkti jums vienodų marškinėlių Kalėdoms*.

(*Nėra garantijos. Mamos pirks tai, ko nori, nesvarbu, ar jums to reikia, ar ne)

Greitai žvilgtelėjus į svetainės dizainą aukščiau esančiame paveikslėlyje, galima atpažinti pažįstamą išdėstymą. „Spintos tvarkyklė“sukurta kaip ir bet kuri įprasta drabužių svetainė. Ši sąsaja, suskirstyta pagal skyrius viršuje ir filtrus, pateiktus šone, paprastam vartotojui suteikia galimybę susipažinti su funkcionalumu. IR juo paprasta naudotis.

1 veiksmas: nustatykite savo kopiją

Pradėkime nuo savo projekto kopijos sukūrimo.

Google diskas

Spustelėkite aukščiau esančią nuorodą, kad pereitumėte prie dabartinės šios programos versijos.

Šiame aplanke matysite 3 elementus: „Google“formą, „Google“lapą ir aplanką.

Dešiniuoju pelės mygtuku spustelėkite „Google“lapą ir spustelėkite Padaryti kopiją.

Nustatykite šios kopijos vietą į savo Diską.

Nukopijavus šį dokumentą, „Google“forma bus automatiškai sugeneruota tame pačiame aplanke, kuriame perkėlėte „Google“lapą.

Norėdami sukurti aplanką (tai būtina norint rinkti elementų nuotraukų įkėlimus), spustelėkite nukopijuotą „Google“formą ir pasirodys raginimas atkurti įkėlimo aplanko vietą.

Dabar turite šio dokumento kopiją, kad galėtumėte dirbti patys!

2 veiksmas: „Google“formos apžvalga

Dabar, kai turite savo šios programos versiją, pažvelkime aplink.

„Google“forma nustatyta taip, kad priimtų daug skirtingų tipų elementų. Tačiau marškiniai, kelnės, suknelės ir batai turi skirtingus dydžio apribojimus. Todėl bus užpildyta kita šios formos skiltis, atsižvelgiant į skyrių, kuriame pateikiate elementą. Savo (vyriško straipsnio) šablone sukūriau 5 skirtingų dydžių kategorijas. (Moterų straipsnius rasite čia, yra daug daugiau).

Kiekviename dydžio skyriuje kiekvienam renkamam parametrui sukūriau unikalų pavadinimą. Mes nenorime, kad mūsų duomenų bazėje būtų keli stulpeliai su pavadinimu „Dydis“, arba negalėtume nustatyti, kokio tipo drabužiams tinka šis dydis.

Kiekvieno skyriaus pabaigoje vartotojas nukreipiamas į paskutinę šios formos dalį: Vieta. Aš asmeniškai pasirinkau pridėti vietą, kad nustatyčiau daiktus cheminėse valyklose, skalbykloje, jų vietoje arba tuos daiktus, kuriuos leidau draugui pasiskolinti. Tai leidžia man būti organizuotam ir niekada nejausti, kad kažkur man trūksta drabužio.

Kaip minėjau nuo pat pradžių, šį projektą galima išplėsti milijonu skirtingų būdų. Jį galite naudoti inventoriui, tikslesnei organizavimo įrangai arba griežtai skolintis drabužiams. Laukų ir sekcijų, kurias galite pridėti, yra begalė, todėl nesijaučiate apsiriboję tuo, kas yra mano formoje. (Moterų straipsnius rasite čia)

Prieš pradėdami įkelti keletą savo elementų, pereikime prie kito veiksmo, kad užtikrintume tinkamą pateikimą.

3 veiksmas: „Google“scenarijai: (Server Code.gs) Pirmiausia peržiūrėkite duomenis ir kodą

Spustelėję „Google“skaičiuoklių dokumentą pamatysite daug duomenų stulpelių (ir kai kurios eilutės, paliktos demonstravimui). Pateikiant formą kai kurios skiltys praleidžiamos, tai matyti iš kai kuriuose stulpeliuose trūkstamų duomenų. Tačiau buvo pridėti papildomi stulpeliai, tokie kaip ID, numatytoji vieta, kas ir atnaujinti, kad būtų galima geriau stebėti šių elementų redagavimą.

Pateikiant formą buvo sukurtas ID laukas, kad būtų galima nustatyti unikalų identifikatorių einant į šią duomenų bazę. Norėdami sukurti šį lauką, pažvelgsime į scenarijų rengyklę spustelėdami Įrankiai> Scenarijų rengyklė.

Atidarę scenarijų rengyklę, šio naujo lango šoninėje juostoje pastebėsite 8 dokumentus. Šie dokumentai padeda valdyti galinį procesą, priekinius ekranus ir priekinės dalies funkcijas. Mes pereisime prie kiekvieno iš jų (jei laikysitės), bet dabar spustelėkite serverio kodą.

Faile „Server Code.gs“yra daug funkcijų:

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

onSubmit (e) - Ši funkcija bus sukonfigūruota kaip pirmoji funkcija, kuri bus paleista pateikus „Google“formą. Į šią funkciją galite įdėti kitų funkcijų, kad būtų galima atlikti daugybę skirtingų procesų.

onOpen (e) - ši funkcija iškviečiama atidarius „Google“skaičiuokles. Jis užpildo naują meniu parinktį, leidžiančią greitai pasiekti programos nuorodas ir rodinius.

doGet ()- ši funkcija iškviečiama skambinant žiniatinklio programos adresui. Kai vartotojas naršo prie paskelbtos žiniatinklio programos, šis kodas nurodys tam puslapiui, ką rodyti. Šiuo atveju tai yra dokumentas Application.html.

include (failo pavadinimas) - ši funkcija naudojama HTML puslapiuose, norint skaityti kitą dokumentą ir įterpti jų turinį į tinkamą HTML formatą kitame puslapyje. Mes jį naudojame savo CSS.html ir JS.html failams.

openApplication () ir openLaundryApp () - šiose funkcijose yra kodas, kurį reikia paleisti, kai naudotojas spustelėja meniu mygtukus, pridėtus prie „Google“lapo įrankių juostos.

changeValueOnSubmit (e) ir setIDOnSubmit (e)- tai yra funkcijos, kurias mes dabar nagrinėsime. Jie yra atsakingi už tam tikrų laukų atnaujinimą numatytosiomis reikšmėmis, kai forma iš pradžių pateikiama.

4 veiksmas: įgalinkite „OnFormSubmit“

Šios dvi funkcijos - „changeValueOnSubmit“(e) ir „setIDOnSubmit“(e) turi būti susietos su vartotojo veiksmu pateikiant formą. Norėdami tai padaryti, turime įjungti trigerį.

Įjungiame aktyviklį spustelėdami Redaguoti> Dabartinio projekto aktyvikliai. Taip atidaromas „Google“kūrėjų centras.

Apatiniame dešiniajame trigerio prietaisų skydelio kampe yra mygtukas Pridėti aktyviklį. Paspauskite čia.

Dabar nustatysime funkciją, kuri bus vykdoma pateikus formą. Mūsų atveju turiu keletą funkcijų (changeValueOnSubmit (e) ir setIDOnSubmit (e)), kurias įdėjau į funkciją onSubmit (), todėl turiu nustatyti tik 1 aktyviklį. Todėl mes pasirinksime „onSubmit“() ir nustatysime, kad šis aktyviklis veiktų „On Form“pateikimo metu.

Dabar turime darbo formą, kuri užpildys „Google“lapą unikaliais identifikatoriais ir nustatys numatytas vertes.

Dabar galite įkelti savo elementus naudodami „Google“formą. (Tai nebūtina tęsti, nes jau yra demonstracinės vertės). Dabar mes pasinersime į vartotojo sąsają.

5 veiksmas: vartotojo sąsajos nustatymas

SVEIKI! Pagaliau pasiekėme dalį, dėl kurios atėjote, vartotojo sąsają !!!!

Iš pirmo žvilgsnio čia nieko nėra. Mes dar neskambinome. Norėdami greičiau įkelti puslapį, nusprendžiau neužgauti pirmojo puslapio su visais elementais ir leisti greičiau spustelėti tai, ką norite matyti. Kadangi taip yra, pagrindinio turinio lauke nėra elementų ir šoninėje juostoje nėra filtrų. Spustelėkite Visi, kad pamatytumėte, kas yra mūsų duomenų bazėje.

Dabar kiekvieną elementą savo duomenų bazėje įkėlėme į pagrindinį turinio lauką. Pamatysite paveikslėlius, ID numerius, spalvas, dydžius ir vietas. Vietos lauką galima atnaujinti čia! Jei nuspręsite paskolinti daiktą, galite pasirinkti šią parinktį, galite ją įdėti į savo spintą, komodą ar skalbinius.

Šoninėje juostoje turime visus įmanomus laukus kiekvienai drabužių daliai mūsų naujoje užklausoje. Įsivaizduokite, kad šioje šoninėje juostoje yra 20 skirtingų dydžių parinkčių, tai nebūtų labai veiksminga, todėl susiaurinkime paiešką spustelėdami Priedai.

Dabar, kai įkėlėme priedus, pažvelkite į šoninę juostą. Jis pritaikytas tik 3 laukams, nes tai yra parametrai, taikomi kiekvienam šios užklausos elementui. Aš atliksiu rūšiavimą pagal spalvą. Spustelėjus spalvą, atsiranda išskleidžiamasis langas. Čia galiu įvesti norimą spalvą ir tada ją pasirinkti, arba jei iš karto pamatysiu savo parinktį, tiesiog spustelėsiu. Šiai demonstracijai pasirinkau raudoną. Šios šoninės juostos apačioje spustelėkite Taikyti filtrą ir bus atnaujintas pagrindinis turinys, rodantis elementus, kurių spalvos parametras yra nustatytas raudona spalva.

Anksčiau minėjau, kad ši duomenų bazė padeda man tvarkyti savo daiktus iš paskolos ir skalbykloje. Kad būtų šiek tiek lengviau, užuot rankiniu būdu spustelėjęs kiekvieną išskleidžiamąją vietą šiame pagrindiniame puslapyje, sukūriau skalbimo režimą. Grįžkite į „Google“skaičiuoklės puslapį ir programos rodinyje pamatysite skalbimo režimą. Ši parinktis parodys mažesnį modalą, kuriame bus rodomi tik skalbinių buvimo vietos elementai. Dabar galiu pažymėti visus šiuos elementus kaip numatytuosius, kurie juos grąžins į vietas, kuriose jie paprastai saugomi.

7 žingsnis: projektas baigtas

SVEIKINIMAI

Tiems iš jūsų, kurie nori tik veikiančios duomenų bazės, skirtos jūsų elementams tvarkyti, kviečiame prisijungti prie internetinio organizatoriaus. Tiems smalsiems, kurie domisi šios programos kodu. Laikykis, kol aš jį sugriausiu.

*Galite laisvai ištrinti bandomuosius elementus po to, kai į duomenų bazę įvedate bent vieną savo elementą. (Paaiškinsiu vėliau, jei laikysitės).

8 veiksmas: 1 žingsnis: galinis kodas (serverio kodas.gs)

Anksčiau atidarėme failą „Server Code.gs“, ir aš greitai aprašiau kiekvieną funkciją, nes jų tikslas buvo aptarnauti kiekvieną ką tik sukurtą elementą, tačiau dabar mes suskaidysime kai kurias funkcijas ir paslaugas, vadinamas kad šis kodas būtų sėkmingas.

1) Stalo perėjimas:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Formos atsakymai 1"); var diapazonas = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = diapazonas.getLastRow ();

• Šis kodas yra pagrindas naršyti „Google“lapą. Aš vadinu lapą vardu, o ne numeriu, kad, jei lapai būtų ištrinti arba pertvarkyti pagal funkciją, vis tiek galėtų tinkamai veikti.
• Šiame kode aš renku tik visų lentelės duomenų diapazoną.

2) ID priskyrimas:

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);

• Anksčiau prašiau, kad demonstracinės vertės būtų paliktos lentelėje, kol vartotojas nepateiks bent vienos vertės sau. Taip yra todėl, kad „Auto ID“generatorius užpildomas pagal paskutinę duomenų bazės reikšmę.
• Gaunu paskutinę 2–3 eilutę, nes paskutinė eilutė yra nauja mūsų vertė, o 1 stulpelis - ID reikšmė.
• Tada atsitiktinai sugeneruoju skaičių nuo 5 iki 15 ir pridedu jį prie paskutinės vertės. *
• Galiausiai šią vertę įdedu į paskutinės eilutės ID stulpelį.
• Toliau vadiname funkciją changeValueOnSubmit (e).

* Pasirinkau 5–15, kad ateityje būtų galima žymėti ir integruoti „Google Home“, kad skaičiai nebūtų pakankamai artimi, kad sukeltų painiavą dėl pakabų, drabužių etikečių ar brūkšninių kodų.

3] URL vertės keitimas:

var DataChange = e.namedValues ["Prekės paveikslėlis"]; var DefaultLocation = e.namedValues ["Kur laikote šį drabužių gaminį?"]; var ColD = Stulpelio ID _ ("Prekės paveikslėlis") +1; var ColLoc = Stulpelio ID _ ("numatytoji vieta")+1; DataChange = DataChange.toString (). pakeisti ("atidaryti?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (numatytoji vieta);

• Pateikiant nuotrauką naudojant „Google“formą, į „Google“skaičiuokles įterptas URL yra nuoroda į faktinį dokumentą. Mūsų atveju, kai mes kuriame HTML puslapį, norime, kad nuoroda būtų tik vaizdas.
• Pakeitus „atvirą“? dalį URL į „uc? export = view &“, vietoj to sukūrėme nuorodą į vaizdą.
• Mes vėl įdėsime šią naują vertę į dabartinės prekės paveikslėlio nuorodos vietą.
• Taip pat duomenų bazėje nustatau elemento „Numatytoji vieta“ir „Dabartinė vieta“tą patį. Tai padės bandant naudoti skalbimo režimą.

• Mes pasinersime į tai kitame puslapyje, tačiau tai yra pirmas žvilgsnis į mano sukurtą funkciją „ColumnID_ ()“.

  Ši funkcija naudoja stulpelių pavadinimus, kad juos išverstų į stulpelių sveikuosius skaičius, o tai naudinga skambinant diapazonui, kuriam reikalingas stulpelio numeris, o ne pavadinimas

4] SpreadsheetApp.getUI ()

• Antrame paveikslėlyje matote „SpreadsheetApp.getUI“() naudojimą, kai jis buvo sukurtas įrankių juostos meniu papildymui „Google“lape.
• Funkcija.getUI () taip pat padeda sukurti modalinį iššokantįjį langą, kuris naudojamas skalbimo režimui ir kaip greita nuoroda į svetainės sąsają.

5) „HTMLService“

• Šiame kode naudojamos dviejų tipų HTML paslaugos: šablonas ir HTML išvestis
• Šablonas leidžia įterpti kodą į HTML kodą, kad iš serverio gaunamą informaciją būtų galima užpildyti, kai iškviečiamas puslapis.
• HTML išvestis rodo paprastus HTML puslapius.
• Taip pat turime metodą include (), kuris leidžia mums sukurti kelis HTML failus ir sujungti juos į vieną šabloninį HTML failą, grąžinant failo turinį HTML formatu, o ne eilute.

Pridėjau dokumentą, sukurtą kaip „Google App Scripts Documentation“, kad susipažintų su tuo, kaip „Google Apps“paaiškinamas šaltinio kodas ir funkcijos.

9 veiksmas: 2 veiksmas: galinio kodo 2 dalis (serverio skambučiai. G)

Dabar mes įvedame serverio skambučius. Šios funkcijos pirmiausia naudojamos HTML „JavaScript“, todėl jos buvo atskirtos nuo kodo, kuris pirmiausia naudojamas užpakalinėje dalyje, esančioje „Server Code.gs“.

1 paveikslas) Visuotiniai kintamieji:

2 paveikslas) Gaunami elementai:

3 paveikslas) fetchItemsQry

4 paveikslas) filtras

5 paveikslas) fetchFiltersWithQry

6 paveikslas) „ColumnID“ir „CacheCalls“

Su kiekvienu iš jų galima daug kalbėti. Ir norint išardyti kodą ir paaiškinti, kas vyksta, man reikėjo šiek tiek daugiau spausdinimo vietos. Pridedamas „ServerCalls.gs“kodo suskirstymo dokumentas

Šis dokumentas yra sukurtas kaip „Google App Scripts Documentation“ir netgi pateikia nuorodas į panašius objektus.

10 veiksmas: 3 veiksmas: HTML kodas (Application.html)

HTML kodas tampa labai nepatenkintas „Instructable“dialogo lange. Taigi sekite kartu su aukščiau esančiomis nuotraukomis.

1) „Application.html“puslapio antraštėje nustatome pavadinimą ir paskambiname į CSS.html puslapį, kuris bus įkeltas.

*Būdami šabloniniu HTML puslapiu, mes galime pridėti daugiau kodų prie šio dokumento, neperkraudami dabartinio ekrano, naudodami anksčiau minėtą metodą include (pageName), esantį Server Code.gs

Šiame paveikslėlyje taip pat yra pagrindinė antraštės dėžutė. Čia galite pakeisti antraštę ir įvesti „[Jūsų vardo] drabužių spinta“ar bet ką kitą, kaip norėtumėte atpažinti šį puslapį.

2) Tiesiog po antrašte yra mūsų viršutinė naršymo juosta.

Šioje naršymo juostoje yra visi straipsnių tipai, išvardyti „Google“skaičiuoklių straipsnyje.

Įdiegta funkcija, skirta gauti šių elementų masyvą. Tada paleidžiama kilpa, kad kiekviena iš šių parinkčių būtų įtraukta kaip meniu mygtukas, kartu su veiksmo kodu, taigi, kai vartotojas spustelės meniu mygtuką, atitinkami elementai bus rodomi kūno srityje.

3) Pagrindinis korpusas.

Šioje dalyje yra 4 porcijos. Teksto išvestis, šoninės juostos filtras, pagrindinio kūno vaizdai ir JS.

Teksto išvestis leidžia vartotojui matyti greitą teksto rodinį, kokio tipo elementus jie šiuo metu žiūri, o ne remiasi pasirinkta meniu parinktimi.

Šoninės juostos filtre yra daug filtrų, kuriuos galima pasirinkti naudotojo pasirinktam elementui. Šie filtrai atspindi visas šios kategorijos parinktis ir kiek elementų patenka į tos kategorijos vertę. Šioje šoninėje juostoje yra „JavaScript“kodas (kuris bus aptartas toliau).

Pagrindinis turinys šiuo metu tuščias, tačiau, kaip ir filtrai, jis bus užpildytas elementų dėžutėmis, kuriose išsamiai aprašytas elemento ID, spalva, dydis ir vieta, o vaizdas bus įtrauktas, kai vartotojas pasirinks kategoriją ir „JavaScript“kodas užpildys šią sritį.

Galiausiai apima (JS), pažvelkime į tai kitame žingsnyje.

11 veiksmas: 4 veiksmas: „JavaScript“kodas (JS.html)

Jei manėte, kad serverio kodas yra sunki dalis, gaukite tai.

Čia mes sujungiame savo HTML ir „SeverCode“su vartotojų sąveika. Bet koks spustelėtas elementas turi būti apdorotas čia, kad gautumėte reikiamus duomenis ir grąžintumėte juos skaitomu formatu. Taigi pažvelkime į pirmuosius skambučius:

Scenarijus ragina: šiam projektui naudoju 3 skirtingas bibliotekas; „jquery“, „bootstrap“ir specialus „bootstrap-select“priedas. Šios bibliotekos leidžia formatuoti objektus ir lengviau iškviesti HTML kodo elementus.

Kita svarbi „JavaScript“eilutė yra žemiau:

$ (dokumentas).keypress (funkcija (įvykis) {if (event.which == '13') {event.preventDefault (); }});

Čia neleidžiu įvesties klavišo suaktyvinti bet kurios formos. Kaip ir šiuo atveju, „Google Web Apps“priskiriamas tik vieno puslapio adresas. Paspaudus „Enter“, prie HTML adreso būtų pridėti duomenys ir bandoma nukreipti vartotoją. Išjungę tai, jūs leidžiate „JavaScript“kodui atlikti visą darbą.

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

funkcija updateDBlocation (id, vertė) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, vertė); }

Čia yra dvi funkcijos, kurios skambina į failą „Server Code.gs“. Linija:

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

turi daug darbo dalių, tačiau skeletas yra įsišaknijęs iš „google.script.run“, kuris nurodo HTML puslapiui, kad ši funkcija yra serveryje.

• Paskutinis šio kodo bitas yra paleidimo funkcija. Šiame pavyzdyje „ServerRemoveFilter“()
• Pridėjus „withSuccessHandler“(), HTML puslapis dabar žino, ką daryti su grąžinamais duomenimis, ir tai yra paleisti funkciją su skliausteliais.
• Tas pats pasakytina apie „withFailureHandler“()

Dabar, kai suskaidėme serverio kodo skambutį, trumpai pažvelkime, kas nutinka, kai šie serverio skambučiai pavyksta ir nepavyksta.

function allGood (e) {console.log ("Sėkmė serveryje"); } funkcija onFailure (klaida) {$ ("#message-box"). html ("

Šiuo metu negalima gauti drabužių elementų. KLAIDA: " + error.message +"

");} funkcija FailDBUpdate (klaida) {$ ("#message-box "). html ("

Jūs neturite prieigos keisti vietos. KLAIDA: " + error.message +"

"); $ (". location-selects "). prop ('išjungtas', 'išjungtas');}

Sukūriau labai paprastą konsolės žurnalą, kuris parodo sėkmę, kai paleidžiama vietos funkcija, kurią galite pamatyti kaip „allGood ()“.

Tvarkydami klaidas, šios dvi funkcijos išleidžia klaidos pranešimą, kurį vartotojas gali matyti naudodamas „jQuery“iškvietimą į HTML objektą su „pranešimų dėžutės“ID.

Dabar pereikime prie kruopštaus darbo

12 veiksmas: 5 veiksmas: „JavaScript“kodo spustelėjimo veiksmai (JS.html)

Viršutinėje meniu juostoje yra kiekvieno straipsnio tipo parinkčių. Funkcija, kurią jie atlieka spustelėję, yra tokia:

funkcija filterType (straipsnis, id) {$ ("ul.navbar-nav li.active"). removeClass ("active"); $ ("#currentArticle"). html ("// HTML KODAS ČIA");

updateSideBar = tiesa;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems („Straipsniai“, straipsnis); var newSelect = "#type-"+id; $ (newSelect).addClass ("aktyvus"); $ ("#myNavbar"). removeClass ("in"); }

Šiame kode matome, kad turime google.script.run, kuris ragina serverį gauti informacijos. Šio skambučio sėkmės funkcija yra updateItems ().

1 PAVEIKSLAS (jei šioje funkcijoje yra sunkus HTML kodas, sunku tiksliai nukopijuoti kodą, neatsižvelgiant į šį langelį)

„UpdateItems ()“kode yra daug dalykų. Dar kartą turime pereiti per mums grąžintą objektą ir pridėti kiekvieną elementą prie pagrindinio puslapio.

HTML kodas pridedamas kaip masyvas, kad suskaidytų kodą ir būtų lengviau skaityti bei pamatyti, kur įterpiamas „itemData“.

Kiekvieno elemento cikle pašalinu laukus, kurių nenoriu matyti apraše, pvz., Numatytasis, laiko žyma ir paveikslėlio URL. Nuotraukos URL pašalinu iš aprašymo, nes jis pridedamas kaip href prie žymos. Surinkus šią informaciją, ji siunčiama į pagrindinį turinį naudojant jQuery.append () funkciją.

Kai visi elementai buvo pridėti prie puslapio, ši elementų užklausa dar kartą siunčiama į serverio kodą, kad būtų surūšiuotos ir grąžintos filtro parinktys, kaip parodyta 2 paveiksle.

2 NUOTRAUKA (atnaujinama šoninė juosta)

Labai panašus į funkciją updateItems (), mes vėl turime HTML kodo masyvus ir visų filtrų parinkčių ciklą. Vienintelis pastebimas pokytis yra „jQuery.selectpicker“(„atnaujinti“). Ši funkcija yra iš scenarijų bibliotekos, kurią įtraukėme į paskutinį veiksmą. Tai leidžia programuotojui parašyti paprastą pasirinktą HTML ir leisti bibliotekai ją atnaujinti, įtraukiant paieškos funkciją ir CSS kodą.

3 NUOTRAUKA (filtravimas naudojant šoninę juostą)

Galiausiai turime funkciją updateFilter (formData). Tai naudojama, kai forma pateikiama iš šoninės juostos. Pradedame naudodami jQuery funkciją.serializeArray () - tai nuskaito mūsų atveju apibrėžto elemento HTML kodą forma ir grąžina eilutės reikšmes, kurios turi būti išsiųstos į serverį. Ir mes pradedame procesą nuo 1 paveikslo iš naujo.

13 žingsnis: pabaiga… galiausiai

Na, jūs turite tai; išsamų ir išsamų paaiškinimą, kuris padės jums susikurti savo internetinę drabužių spintą arba panaudoti „Google“scenarijuose sukurtas funkcijas, kad išplėstumėte savo projektą.

Tai buvo kelionė, koduojanti šį projektą (ir dokumentuojant šią instrukciją), bet man patiko procesas ir tikiuosi, kad jums patiks produktas. Norėčiau išgirsti visus, kurie koreguoja, kaip Michaelas Jordanas sako: „Lubos yra stogas“, ir sutinku, kad šiai programai nėra jokių apribojimų.