Kazalo:

Organizator garderobe: 13 korakov
Organizator garderobe: 13 korakov

Video: Organizator garderobe: 13 korakov

Video: Organizator garderobe: 13 korakov
Video: Я работаю в Страшном музее для Богатых и Знаменитых. Страшные истории. Ужасы. 2024, November
Anonim
Organizator garderobe
Organizator garderobe

Ne glede na to, ali gre za nakupovanje oblačil ali od tega, da si vedno izposodite kateri koli predmet, si včasih zaželite, da bi pokukali v svojo omaro od koder koli in preverili, ali imate kaj podobnega.

To je vse na enem mestu in je razširjeno za številne druge namene. Moj organizator garderobe je kombinacija Google Preglednic kot zbirke podatkov SQL, Googlovih skriptov za obdelavo podatkov in Google WebApp za spletni portal do teh podatkov. Končni uporabnik si lahko ogleda vse predmete, filtrira nekaj posebnega, označi predmete kot izposojene, upravlja svoje perilo in prepreči mami, da vam vsako leto za božič kupi isto majico*.

(*Brez garancije. Matere bodo kupile tisto, kar želijo, ne glede na to, ali jo potrebujete ali ne)

Ob hitrem pogledu na zasnovo spletnega mesta na zgornji sliki lahko prepoznamo znano postavitev. Organizator garderobe je nastavljen kot vsako običajno spletno mesto za oblačila. Ta vmesnik, razčlenjen po oddelkih na vrhu in filtri na strani, priložnostnemu uporabniku približa funkcionalnost. IN je enostaven za uporabo.

1. korak: Nastavitev lastne kopije

Nastavitev lastne kopije
Nastavitev lastne kopije

Začnimo z ustvarjanjem lastne kopije tega projekta.

Google Drive

Kliknite zgornjo povezavo, da vas popelje do moje trenutne različice te aplikacije.

V tej mapi bodo prikazani 3 elementi: Googlov obrazec, Google Preglednica in mapa.

Z desno miškino tipko kliknite Google List in kliknite Naredi kopijo.

Lokacija te kopije nastavite na svoj disk.

Po kopiranju tega dokumenta se bo Googlov obrazec samodejno ustvaril v isti mapi, v kateri ste premaknili Google Preglednico.

Če želite ustvariti mapo (to je potrebno za zbiranje nalogov slik elementov), kliknite kopiran Google obrazec in pojavil se bo poziv, da obnovite mesto mape za nalaganje.

Zdaj imate kopijo tega dokumenta, na kateri lahko delate sami!

2. korak: Pregled Googlovega obrazca

Pregled Google obrazcev
Pregled Google obrazcev
Pregled Google obrazcev
Pregled Google obrazcev
Pregled Google obrazcev
Pregled Google obrazcev
Pregled Google obrazcev
Pregled Google obrazcev

Zdaj, ko imate svojo različico te aplikacije, si poglejmo naokoli.

Vaš Google obrazec je nastavljen tako, da sprejema številne različne vrste predmetov. Vendar imajo srajce, hlače, obleke in čevlji različne omejitve velikosti. Zato bo na podlagi oddelka, v katerem vložite svoj predmet, izpolnjen drug razdelek tega obrazca. V predlogi (moški članek) sem ustvaril 5 različnih kategorij velikosti. (Za ženske članke kliknite tukaj, obstaja še veliko več).

Pod vsakim odsekom velikosti sem določil edinstven naslov za vsak parameter, ki ga bom zbiral. V svoji bazi podatkov ne želimo imeti več stolpcev z imenom "Velikost", sicer ne bi mogli določiti, za katero vrsto oblačil velja ta velikost.

Na koncu vsakega razdelka je uporabnik preusmerjen na zadnji del tega obrazca: Lokacija. Osebno sem se odločil dodati lokacijo za določitev predmetov v kemičnih čistilnicah, v pralnici, na njihovem mestu ali tistih predmetov, ki sem jih pustil prijatelju izposoditi. To mi omogoča, da sem organiziran in nikoli ne čutim, da mi nekje manjka kos oblačila.

Kot sem omenil od začetka, se lahko ta projekt razširi na milijon različnih načinov. Uporabite ga lahko za popis, natančnejše organizacijsko orodje ali za strogo izposojo oblačil. Polja in odseki, ki jih lahko dodate, so neskončni, zato se ne omejujte na tisto, kar je v moji obliki. (Za ženske članke kliknite tukaj)

Preden naložite nekaj svojih elementov, pojdimo na naslednji korak, da zagotovimo ustrezno oddajo.

3. korak: Googlovi skripti: (Server Code.gs) Najprej si oglejte podatke in kodo

Googlovi skripti: (Server Code.gs) Najprej si oglejte podatke in kodo
Googlovi skripti: (Server Code.gs) Najprej si oglejte podatke in kodo
Googlovi skripti: (Server Code.gs) Najprej si oglejte podatke in kodo
Googlovi skripti: (Server Code.gs) Najprej si oglejte podatke in kodo

S klikom na dokument Google Preglednice boste videli veliko stolpcev podatkov (in nekaj vrstic, ki so ostale za predstavitev). Med oddajo obrazcev so nekateri odseki preskočeni, kar je razvidno iz manjkajočih podatkov v nekaterih stolpcih. Vendar so bili dodani dodatni stolpci, kot so ID, Privzeta lokacija, Kdo in Posodobljeno, da bi bolje sledili urejanjem teh elementov.

Ko ste oddali obrazec, je bilo ustvarjeno polje ID, ki omogoča enolični identifikator pri prehodu po tej zbirki podatkov. Če želite ustvariti to polje, si bomo ogledali urejevalnik skriptov s klikom na Orodja> Urejevalnik skriptov.

Ko je urejevalnik skriptov odprt, boste v stranski vrstici tega novega okna opazili 8 dokumentov. Ti dokumenti pomagajo nadzorovati zaledni proces, sprednje zaslone in vmesne funkcije. Skočili bomo v vsakega (če se držite), a zdaj kliknite na kodo strežnika.

V datoteki Server Code.gs je veliko funkcij:

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

onSubmit (e) - Ta funkcija bo konfigurirana kot prva funkcija, ki se bo izvajala, ko se pošlje Googlov obrazec. Znotraj te funkcije lahko postavite druge funkcije, da omogočite veliko različnih procesov.

onOpen (e) - Ta funkcija se pokliče, ko se odprejo Google Preglednice. Zapolni novo možnost menija, ki omogoča hiter dostop do povezav do aplikacij in pogledov.

doGet ()- Ta funkcija se pokliče pri klicu naslova spletne aplikacije. Ko uporabnik brska po objavljeni spletni aplikaciji, bo ta koda tej strani povedala, kaj naj prikaže. V tem primeru gre za dokument Application.html.

include (fileName) - Ta funkcija se uporablja znotraj strani HTML za branje drugega dokumenta in vstavljanje njihove vsebine v ustrezen format HTML na drugi strani. Uporabljamo ga za datoteke CSS.html in JS.html.

openApplication () in openLaundryApp () - Te funkcije vsebujejo kodo, ki jo je treba zagnati, ko uporabnik klikne gumbe menija, dodane v orodno vrstico Google Sheet.

changeValueOnSubmit (e) in setIDOnSubmit (e)- To so funkcije, ki jih bomo za zdaj preučili. Odgovorni so za posodobitev določenih polj s privzetimi vrednostmi, ko je obrazec prvotno poslan.

4. korak: Omogočite OnFormSubmit

Omogočanje OnFormSubmit
Omogočanje OnFormSubmit
Omogočanje OnFormSubmit
Omogočanje OnFormSubmit
Omogočanje OnFormSubmit
Omogočanje OnFormSubmit

Ti dve funkciji, changeValueOnSubmit (e) in setIDOnSubmit (e), morata biti povezani z uporabniškim dejanjem predložitve obrazca. Za to moramo omogočiti sprožilec.

Sprožilec omogočimo s klikom na Uredi> Sprožilci trenutnega projekta. S tem se odpre Googlovo središče za razvijalce.

V spodnjem desnem kotu nadzorne plošče sprožilca je gumb Dodaj sprožilec. Klikni tukaj.

Zdaj bomo nastavili funkcijo za izvajanje ob predložitvi obrazca. V našem primeru imam več funkcij (changeValueOnSubmit (e) in setIDOnSubmit (e)), ki jih vstavim v funkcijo onSubmit (), zato moram nastaviti samo 1 sprožilec. Zato bomo izbrali onSubmit () in nastavili ta sprožilec za zagon Ob predložitvi obrazca.

Zdaj imamo delujoč obrazec, ki bo Google Sheet zapolnil z edinstvenimi identifikatorji in nastavil privzete vrednosti.

Zdaj lahko naložite svoje izdelke z Googlovim obrazcem. (To ni potrebno za nadaljevanje, saj so v njem že predstavljene demo vrednosti). Zdaj se bomo poglobili v uporabniški vmesnik.

5. korak: Nastavitev uporabniškega vmesnika

Nastavitev uporabniškega vmesnika
Nastavitev uporabniškega vmesnika
Nastavitev uporabniškega vmesnika
Nastavitev uporabniškega vmesnika
Nastavitev uporabniškega vmesnika
Nastavitev uporabniškega vmesnika

DOBRODOŠLI! Končno smo prišli do dela, po katerega ste prišli, do uporabniškega vmesnika !!!!

Na prvi pogled tukaj ni ničesar. Nismo še klicali. Za hitrejše nalaganje strani sem se odločil, da prve strani ne obremenjujem z VSIMI predmeti in vam omogočim, da hitreje kliknete tisto, kar želite videti. Ker je tako, v glavnem polju vsebine ni elementov in v stranski vrstici ni filtrov. Kliknimo na Vse, da vidimo, kaj je v naši bazi podatkov.

Zdaj smo naložili vsak element v naši bazi podatkov v polje glavne vsebine. Videli boste slike, identifikacijske številke, barvo, velikosti in lokacije. Polje lokacije lahko posodobite tukaj! Če se odločite za izposojo predmeta, lahko izberete to možnost, ga lahko postavite v omaro, omaro ali perilo.

In v stranski vrstici imamo vsa možna polja za vsak kos oblačila v naši novi poizvedbi. Predstavljajte si, da bi imeli na tej stranski vrstici 20 različnih možnosti velikosti, to ne bi bilo zelo učinkovito, zato omejimo iskanje s klikom na Dodatki.

Zdaj, ko smo naložili dodatno opremo, si oglejte stransko vrstico. Prilagodil se je samo na 3 polja, saj so to parametri, ki veljajo za vsak element v tej poizvedbi. Naredil bom sortiranje po barvah. S klikom na barvo se prikaže spustno polje. Tukaj lahko vnesem želeno barvo in jo nato izberem, ali če takoj vidim svojo možnost, jo preprosto kliknem. Za predstavitev sem izbral rdečo. Kliknite Uporabi filter na dnu te stranske vrstice in glavna vsebina se bo osvežila in prikazala elemente, ki imajo za barvni parameter nastavljeno rdečo barvo.

Prej sem omenil, da mi ta zbirka podatkov pomaga pri upravljanju stvari na izposoji in v pralnici. Da bi bilo malo lažje, sem namesto ročnega klika na vsako spustno mesto na tej glavni strani ustvaril način pranja perila. Vrnite se na stran Google Sheet in pod Pogled aplikacije boste videli Način pranja perila. Ta možnost bo potegnila manjši način, ki prikazuje samo predmete z lokacijo perila. Zdaj lahko vse te elemente označim kot privzete, kar jih bo vrnilo na njihova mesta, na katerih so običajno shranjeni.

7. korak: Projekt zaključen

Projekt zaključen!
Projekt zaključen!

ČESTITKE

Dobrodošli v spletnem organizatorju za tiste, ki želite samo delujočo bazo podatkov za upravljanje svojih predmetov. Za tiste radovedne misli, ki jih zanima koda za to aplikacijo. Držite se, ko ga razčlenim.

*Testne predmete lahko izbrišete, potem ko v bazo podatkov vnesete vsaj enega svojega predmeta. (Kasneje bom razložil, če se držite).

8. korak: 1. korak: zaledna koda (Server Code.gs)

1. korak: zaledna koda (Server Code.gs)
1. korak: zaledna koda (Server Code.gs)
1. korak: zaledna koda (Server Code.gs)
1. korak: zaledna koda (Server Code.gs)

Prej smo odprli datoteko Server Code.gs in na hitro sem predstavil vsako od funkcij, saj je njihov namen služiti vsakemu elementu, ki ste ga pravkar nastavili, zdaj pa jih bomo razčlenili za nekatere funkcionalnosti in izreke, imenovane da bo ta koda uspela.

1) Premikanje mize:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Odgovori obrazca 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

  • Ta koda je osnova za premikanje po Googlovem listu. List kličem po imenu in ne po številki, tako da lahko listi, če jih izbrišemo ali preuredimo po funkciji, še vedno delujejo pravilno.
  • V tej kodi zbiram samo obseg za vse podatke v tabeli.

2) Dodelitev ID -ja:

var LastID = range.getCell (rowNum-1, 1); var CellValue = Število (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);

  • Pred tem sem prosil, naj se demo vrednosti pustijo v tabeli, dokler uporabnik sam ne predloži vsaj ene vrednosti. To je zato, ker se generator samodejnega identificiranja zanaša na zadnjo vrednost v zbirki podatkov.
  • Pridobim zadnjo drugo do zadnjo vrstico, ker je zadnja vrstica naša nova vrednost in prvi stolpec za vrednost ID.
  • Nato naključno ustvarim število med 5 in 15 in ga dodam zadnji vrednosti. *
  • Končno postavim to vrednost v stolpec ID zadnje vrstice.
  • Nato pokličemo funkcijo changeValueOnSubmit (e).

* Odločil sem se za 5-15, da omogočim prihodnje označevanje in integracijo z Google Home, tako da številke ne bodo dovolj blizu, da bi povzročile zmedo na obešalnikih ali oznakah na oblačilih ali črtnih kodah.

3) Spreminjanje vrednosti URL -ja:

var DataChange = e. namedValues ["Slika predmeta"]; var DefaultLocation = e. namedValues ["Kje hranite ta oblačilni kos?"]; var ColD = ColumnID _ ("Slika predmeta") +1; var ColLoc = ColumnID _ ("Privzeta lokacija")+1; DataChange = DataChange.toString (). replace ("open?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

  • Pri predložitvi fotografije prek Googlovega obrazca je URL, vstavljen v Google Preglednice, povezava do dejanskega dokumenta. V našem primeru, ko ustvarjamo stran HTML, želimo, da je povezava samo slika.
  • S spreminjanjem "odprto?" del URL -ja za "uc? export = view &" smo namesto tega ustvarili povezavo do slike.
  • To novo vrednost bomo znova postavili na mesto trenutne povezave Slika predmeta.
  • Prav tako nastavim "Privzeta lokacija" in "Trenutna lokacija" elementa na isto stvar v zbirki podatkov. To bo v pomoč pri poskusu uporabe načina pranja perila.
  • Na to se bomo poglobili na naslednji strani, vendar je to naš prvi pogled na funkcijo ColumnID_ (), ki sem jo ustvaril.

    Ta funkcija uporablja imena stolpcev, da jih prevede v celo število stolpca, kar je v pomoč pri klicanju obsega, ki zahteva številko stolpca in ne ime

4) SpreadsheetApp.getUI ()

  • Na drugi sliki si lahko ogledate uporabo SpreadsheetApp.getUI (), kot je bila uporabljena za ustvarjanje dodatka menija Orodne vrstice v Google Preglednici.
  • Funkcija.getUI () pomaga tudi pri ustvarjanju modalnega pojavnega okna, ki se uporablja za način pranja perila in kot hitra povezava do vmesnika spletnega mesta.

5) Storitev HTML

  • V tej kodi uporabljamo dve vrsti storitev HTML: Predloga in HTMLOutput
  • Predloga omogoča vstavljanje kode v kodo HTML, tako da se lahko informacije, ki prihajajo s strežnika, vnesejo, ko se stran pokliče.
  • HTML Output prikaže preproste strani HTML.
  • Imamo tudi metodo include (), ki nam omogoča, da ustvarimo več datotek HTML in jih združimo v eno datoteko HTML s predlogo, tako da vsebino datoteke vrnemo v obliki HTML in ne v nizu.

Priložil sem dokument, ki je nastavljen kot Google Dokumentacija o skriptah aplikacij, da bi seznanil, kako je izvorna koda in funkcionalnost razložena v storitvi Google Apps.

9. korak: 2. korak: Back-End Code 2. del (Server Calls.gs)

2. korak: zaledna koda, 2. del (klic strežnika.gs)
2. korak: zaledna koda, 2. del (klic strežnika.gs)
2. korak: zaledna koda, 2. del (klic strežnika.gs)
2. korak: zaledna koda, 2. del (klic strežnika.gs)
2. korak: zaledna koda, 2. del (klic strežnika.gs)
2. korak: zaledna koda, 2. del (klic strežnika.gs)

Zdaj moramo vnesti strežniške klice strežnika. Te funkcije se uporabljajo predvsem v HTML -ju JavaScript, zato so bile ločene od kode, ki se uporablja predvsem v zadnjem delu, ki se nahajajo v strežniku Code.gs.

Slika 1) Globalne spremenljivke:

Slika 2) Pridobivanje elementov:

Slika 3) fetchItemsQry

Slika 4) Elementi filtra

Slika 5) fetchFiltersWithQry

Slika 6) ID stolpca in CacheCalls

Z vsakim od njih je toliko za govoriti. Za razčlenitev kode in razlago dogajanja sem potreboval malo več prostora za tipkanje. V priponki je dokument za razčlenitev kod ServerCalls.gs

Ta dokument je nastavljen kot dokumentacija o skriptah za aplikacije Google in celo povezuje podobne predmete.

10. korak: 3. korak: koda HTML (Application.html)

3. korak: koda HTML (Application.html)
3. korak: koda HTML (Application.html)
3. korak: koda HTML (Application.html)
3. korak: koda HTML (Application.html)
3. korak: koda HTML (Application.html)
3. korak: koda HTML (Application.html)

Koda HTML postane zelo nesrečna v pogovornem oknu Instructable. Zato sledite zgornjim slikam.

1) V glavi strani Application.html določimo naslov in pokličemo našo stran CSS.html za nalaganje.

*Ker smo stran s predlogo HTML, lahko v ta dokument dodamo več kode, ne da bi obremenjevali trenutni zaslon z uporabo prej omenjene metode include (pageName), ki jo najdemo v kodi strežnika.gs

Na tej sliki je tudi glavno polje z glavo. Tukaj lahko spremenite glavo in vnesete "[Your Name]''s Wardrobe" ali karkoli drugega, kot želite prepoznati to stran.

2) Tik pod glavo je naša zgornja navigacijska vrstica.

Ta vrstica za krmarjenje vključuje vse vrste člankov, ki so navedene na listu člankov v naših Google Preglednicah.

Vnesena funkcija je poklicana, da pridobi niz teh elementov. Nato se izvede zanka, ki vključuje vsako od teh možnosti kot gumb menija, skupaj s kodo dejanja, tako da se uporabnik, ko klikne gumb menija, prikaže v polju telesa.

3) Glavno telo.

Ta del vsebuje 4 dele. Besedilni izhod, filter stranske vrstice, slike glavnega telesa in JS vključujejo.

Besedilni izhod omogoča uporabniku hiter pogled besedila o vrsti elementov, ki jih trenutno gleda, namesto da se sklicuje na izbrano možnost menija.

Filter stranske vrstice vsebuje številne filtre, ki so na voljo za vrsto predmeta, ki ga je izbral uporabnik. Ti filtri odražajo vse možnosti, ki so na voljo za to kategorijo, in koliko elementov spada pod vrednost te kategorije. Ta stranska vrstica je napolnjena s kodo JavaScript (o kateri bomo razpravljali v nadaljevanju).

Glavno telo je trenutno prazno, vendar bo tako kot filtri zapolnjeno s polji z elementi, ki podrobno opisujejo ID predmeta, barvo, velikost in lokacijo s sliko, vključeno, ko uporabnik izbere kategorijo in koda JavaScript zapolni to območje.

Končno vključuje (JS), poglejmo to na naslednjem koraku.

11. korak: 4. korak: Koda JavaScript (JS.html)

4. korak: Koda JavaScript (JS.html)
4. korak: Koda JavaScript (JS.html)

Če menite, da je strežniška koda težka, si oglejte to.

Tu združujemo naš HTML in SeverCode z interakcijami uporabnikov. Tu je treba obdelati kateri koli element, na katerega kliknete, da dobite ustrezne podatke in jih vrnete v berljivi obliki. Pa poglejmo naše prve klice:

Skript kliče: Za ta projekt uporabljam 3 različne knjižnice; jquery, bootstrap in poseben dodatek za izbiro bootstrap. Te knjižnice omogočajo oblikovanje predmetov in lažje klice na elemente v kodi HTML.

Moja naslednja pomembna vrstica JavaScript je spodaj:

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

Tukaj onemogočim tipki enter, da sproži kateri koli obrazec. Tako kot v tem primeru je Googlovim spletnim aplikacijam dodeljen samo naslov ene strani. S pritiskom na tipko enter bi dodali podatke na naslov HTML in poskusili preusmeriti uporabnika. Če to onemogočite, dovolite, da koda JavaScript opravi vse delo.

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

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

Tu sta dve funkciji, ki kličeta datoteko Server Code.gs. Linija:

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

ima veliko delovnih delov, okostje pa temelji na "google.script.run", ki strani HTML pove, da je na strežniku naslednja funkcija.

  • Zadnji bit te kode je funkcija za izvajanje. V tem primeru ServerRemoveFilter ()
  • Z dodajanjem withSuccessHandler () stran HTML zdaj ve, kaj storiti s podatki, ki se vrnejo, in to je za zagon funkcije z oklepaji.
  • Enako velja za withFailureHandler ()

Zdaj, ko smo razčlenili klic strežniške kode, si na hitro poglejmo, kaj se zgodi, ko klic strežnika uspe in ne uspe.

function allGood (e) {console.log ("Uspeh na strežniku"); } funkcija onFailure (napaka) {$ ("#message-box"). html ("

Trenutno ni mogoče pridobiti oblačil. NAPAKA: " + napaka. Sporočilo +"

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

Nimate dostopa do spreminjanja lokacije. NAPAKA: " + napaka. Sporočilo +"

"); $ (". location-selects "). prop ('onemogočeno', 'onemogočeno');}

Ustvaril sem zelo preprost dnevnik konzole, ki označuje uspeh pri izvajanju lokacijske funkcije, ki jo lahko vidite kot allGood ().

Pri obravnavanju napak ti dve funkciji prikažeta sporočilo o napaki, ki ga lahko uporabnik vidi s klicem jQuery do predmeta HTML z ID-jem "message-box".

Zdaj pa se lotimo hudega dela

12. korak: 5. korak: dejanja s klikom kode JavaScript (JS.html)

5. korak: dejanja s klikom kode JavaScript (JS.html)
5. korak: dejanja s klikom kode JavaScript (JS.html)
5. korak: dejanja s klikom kode JavaScript (JS.html)
5. korak: dejanja s klikom kode JavaScript (JS.html)
5. korak: dejanja s klikom kode JavaScript (JS.html)
5. korak: dejanja s klikom kode JavaScript (JS.html)

V zgornji menijski vrstici so možnosti za vsako vrsto članka. Funkcija, ki jo izvajajo ob kliku, je:

function filterType (article, id) {$ ("ul.navbar-nav li.active"). removeClass ("active"); $ ("#currentArticle"). html ("// HTML KODA TUKAJ");

updateSideBar = res;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Članki", članek); var newSelect = "#type-"+id; $ (newSelect).addClass ("aktivno"); $ ("#myNavbar"). removeClass ("in"); }

V tej kodi vidimo, da imamo google.script.run, ki kliče strežnik po pridobivanje informacij. Funkcija uspeha tega klica je updateItems ().

SLIKA 1 (zaradi težke kode HTML v tej funkciji je težko strogo kopirati kodo, ne da bi se v tem polju pojavila zmešnjava)

V kodi updateItems () se dogaja veliko stvari. Še enkrat moramo prečkati predmet , ki nam je bil vrnjen, in dodati vsak element na svojo glavno stran telesa.

Koda HTML je dodana kot matrike, da razbije kodo in olajša branje in ogled, kje se vstavlja itemData.

V zanki vsakega elementa odstranjujem polja, ki jih v opisu ne želim videti, na primer Privzeto, časovni žig in URL slike. URL slike odstranim iz opisa, ker se namesto tega doda kot href oznaki. Ko so te informacije sestavljene, se pošljejo v glavno telo s funkcijo jQuery.append ().

Ko so na stran dodani vsi elementi, se ta poizvedba elementov znova pošlje v kodo strežnika, da razvrsti in vrne možnosti filtra, kot je prikazano na sliki 2.

SLIKA 2 (posodabljanje stranske vrstice)

Zelo podobno funkciji updateItems (), spet imamo matrike kode HTML in zanko za vse možnosti filtriranja. Edina opazna sprememba je jQuery.selectpicker ('osveži'). Ta funkcija izvira iz knjižnice skriptov, ki smo jo vključili v zadnjem koraku. Programerju omogoča, da napiše preprost izbrani HTML in naj ga knjižnica posodobi tako, da vključi iskalno funkcijo in kodo CSS.

SLIKA 3 (filtriranje s stransko vrstico)

Nazadnje imamo funkcijo updateFilter (formData). To se uporablja, ko je obrazec poslan s stranske vrstice. Začnemo z uporabo funkcije jQuery.serializeArray (), ki prebere kodo HTML elementa, ki je v našem primeru definiran kot obrazec, in vrne vrednosti v nizu za pošiljanje strežniku. In spet začenjamo postopek s slike 1.

13. korak: Konec….nazadnje

Konec….nazadnje
Konec….nazadnje
Konec….nazadnje
Konec….nazadnje

No, tu ste; celovito in temeljito razlago, ki vam bo pomagala pri postavitvi lastne spletne garderobe ali uporabiti funkcionalnost, ustvarjeno v mojih Googlovih skriptah, za razširitev lastnega projekta.

To kodiranje tega projekta (in dokumentiranje skozi ta Instructable) je bilo potovanje, vendar sem v procesu užival in upam, da boste uživali v izdelku. Rad bi slišal od vsakogar, ki prilagodi, saj Michael Jordan pravi "Strop je streha" in se strinjam, da ta aplikacija nima omejitev.

Priporočena: