Sadržaj:

Organizator ormara: 13 koraka
Organizator ormara: 13 koraka

Video: Organizator ormara: 13 koraka

Video: Organizator ormara: 13 koraka
Video: REORGANIZACIJA ORMARA - Kako maksimalno iskoristiti prostor? 2024, Srpanj
Anonim
Organizator ormara
Organizator ormara

Bilo da se radi o kupovini odjeće ili o tome da uvijek morate posuditi bilo koji predmet, ponekad želite da zavirite u ormar s bilo kojeg mjesta da vidite imate li nešto slično. Organizator ormara čini upravo to I VIŠE!

Ovo je sve na jednom mjestu i opsežno je za mnoge druge svrhe. My Wardrobe Organizer je kombinacija Google tablica kao SQL baze podataka, Google skripti za rukovanje podacima i Google WebApp za internetski portal za te podatke. Krajnji korisnik može vidjeti sve stavke, filtrirati nešto posebno, označiti stavke kao posuđene, upravljati rubljem i spriječiti mamu da vam svake godine za Božić kupuje istu košulju*.

(*Nema jamstva. Majke će kupiti ono što žele bez obzira treba li vam to ili ne)

Brzim pogledom na dizajn web stranice na gornjoj slici mogao bi se prepoznati poznati izgled. Organizator ormara postavljen je kao i svaka obična web stranica za odjeću. Raščlanjeno po odjelima odozgo i sa filterima sa strane, ovo sučelje upoznaje funkcionalnost običnog korisnika. I jednostavan je za korištenje.

Korak 1: Postavljanje vlastite kopije

Postavljanje vlastite kopije
Postavljanje vlastite kopije

Počnimo stvaranjem vlastite kopije ovog projekta.

Google vožnja

Kliknite gornju vezu da biste se prebacili na moju trenutnu verziju ove aplikacije.

U ovoj mapi vidjet ćete 3 stavke: Google obrazac, Google tablicu i mapu.

Desnom tipkom miša kliknite Google tablicu i kliknite Napravi kopiju.

Postavite lokaciju ove kopije na svoj vlastiti Disk.

Nakon kopiranja ovog dokumenta, Google obrazac automatski će se generirati u istoj mapi u koju ste premjestili Google tablicu.

Da biste stvorili mapu (to je potrebno za prikupljanje prijenosa slika stavki), kliknite kopirani Google obrazac i pojavit će se upit koji traži od vas da vratite mjesto mape za prijenose.

Sada imate kopiju ovog dokumenta na kojoj možete sami poraditi!

2. korak: Pregled Google obrasca

Pregled Google obrasca
Pregled Google obrasca
Pregled Google obrasca
Pregled Google obrasca
Pregled Google obrasca
Pregled Google obrasca
Pregled Google obrasca
Pregled Google obrasca

Sada kad imate svoju verziju ove aplikacije, pogledajmo okolo.

Vaš Google obrazac postavljen je za prihvaćanje mnogo različitih vrsta stavki. No, košulje, hlače, haljine i cipele imaju različita ograničenja u veličini. Stoga će se ispuniti drugi odjeljak ovog obrasca na temelju odjela pod kojim podnosite stavku. U svom predlošku (Muški članak) stvorio sam 5 različitih kategorija veličina. (Za ženske članke kliknite ovdje, ima ih još mnogo).

Pod svakim odjeljkom o veličini ustanovio sam jedinstveni naslov za svaki parametar koji ću prikupljati. Ne želimo imati više stupaca u bazi podataka s nazivom "Veličina" ili ne bismo mogli odrediti na koju se vrstu odjeće primjenjuje ta veličina.

Na kraju svakog odjeljka korisnik se upućuje na posljednji dio ovog obrasca: Lokacija. Osobno sam odabrao dodavanje lokacije za određivanje predmeta u kemijskim čistionicama, u rublju, na njihovom mjestu ili onih predmeta u kojima sam dao prijatelju posuditi. To mi omogućuje da se organiziram i nikad se ne osjećam kao da mi negdje nedostaje komad odjeće.

Kao što sam spomenuo od početka, ovaj se projekt može proširiti na milijun različitih načina. Možete ga koristiti za inventar, precizniji alat za organizaciju ili za striktno posuđivanje odjeće. Polja i odjeljci koje možete dodati su beskrajni pa nemojte biti ograničeni na ono što je u mom obliku. (Za ženske članke kliknite ovdje)

Prije nego što prebacite nekoliko vlastitih stavki, prijeđimo na sljedeći korak kako bismo osigurali pravilno slanje.

Korak 3: Google skripte: (Server Code.gs) Prvo pogledajte podatke i kôd

Google skripte: (Server Code.gs) Prvo pogledajte podatke i kôd
Google skripte: (Server Code.gs) Prvo pogledajte podatke i kôd
Google skripte: (Server Code.gs) Prvo pogledajte podatke i kôd
Google skripte: (Server Code.gs) Prvo pogledajte podatke i kôd

Klikom na dokument Google tablice vidjet ćete mnogo stupaca podataka (i neke retke ostavljene za demonstraciju). Tijekom podnošenja obrasca neki odjeljci se preskaču, što je vidljivo iz podataka koji nedostaju u nekim stupcima. No, dodani su dodatni stupci kao što su ID, Zadana lokacija, Tko i Ažurirano radi boljeg praćenja uređivanja ovih stavki.

Polje ID -a stvoreno je kada ste poslali obrazac kako biste omogućili jedinstveni identifikator prilikom prelaska ovom bazom podataka. Da bismo stvorili ovo polje, pogledat ćemo uređivač skripti klikom na Alati> Uređivač skripti.

Kad je uređivač skripti otvoren, primijetit ćete 8 dokumenata na bočnoj traci ovog novog prozora. Ovi dokumenti pomažu u kontroli back-end procesa, front-end zaslona i front-end funkcionalnosti. Uskočit ćemo u svaki (ako se zadržite), ali odmah kliknite na Server Code.

U datoteci poslužitelja Code.gs postoji mnogo funkcija:

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

onSubmit (e) - Ova funkcija bit će konfigurirana kao prva funkcija koja će se pokrenuti kada se pošalje Google obrazac. U ovu funkciju možete postaviti druge funkcije kako biste dopustili da se dogodi mnogo različitih procesa.

onOpen (e) - Ova se funkcija poziva kada se otvore Google tablice. Popunjava novu opciju izbornika za brzi pristup vezama i prikazima aplikacija.

doGet ()- Ova se funkcija poziva pri pozivu adrese web aplikacije. Kada korisnik pregleda objavljenu web aplikaciju, ovaj kôd će toj stranici reći što treba prikazati. U ovom slučaju to je dokument Application.html.

include (fileName) - Ova se funkcija koristi unutar HTML stranica za čitanje drugog dokumenta i umetanje njihovog sadržaja u odgovarajući HTML format na drugoj stranici. Koristimo ga za datoteke CSS.html i JS.html.

openApplication () i openLaundryApp () - Ove funkcije sadrže kôd za pokretanje kada korisnik klikne gumbe izbornika dodane na alatnoj traci Google tablice.

changeValueOnSubmit (e) i setIDOnSubmit (e)- ovo su funkcije koje ćemo za sada razmotriti. Oni su odgovorni za ažuriranje određenih polja sa zadanim vrijednostima prilikom prvog podnošenja obrasca.

Korak 4: Omogućavanje OnFormSubmita

Omogućavanje OnFormSubmit
Omogućavanje OnFormSubmit
Omogućavanje OnFormSubmit
Omogućavanje OnFormSubmit
Omogućavanje OnFormSubmit
Omogućavanje OnFormSubmit

Ove dvije funkcije, changeValueOnSubmit (e) i setIDOnSubmit (e), moraju biti povezane s korisničkom radnjom podnošenja obrasca. Da bismo to učinili, moramo omogućiti okidač.

Omogućavamo okidač klikom na Uredi> Okidači trenutnog projekta. Ovo otvara Google Developer Hub.

U donjem desnom kutu nadzorne ploče okidača nalazi se gumb Dodaj okidač. Kliknite ovdje.

Sada ćemo postaviti funkciju za pokretanje kada se pošalje obrazac. U našem slučaju imam više funkcija (changeValueOnSubmit (e) i setIDOnSubmit (e)) koje stavljam u funkciju onSubmit () pa moram postaviti samo 1 okidač. Stoga ćemo izabrati onSubmit () i postaviti ovaj okidač za pokretanje On form submit.

Sada imamo radni obrazac koji će popuniti Google tablicu jedinstvenim identifikatorima i postaviti zadane vrijednosti.

Sada možete učitavati vlastite stavke pomoću Google obrasca. (Ovo nije potrebno za nastavak jer već postoje demo vrijednosti). Sada ćemo zaroniti u korisničko sučelje.

Korak 5: Postavljanje korisničkog sučelja

Postavljanje korisničkog sučelja
Postavljanje korisničkog sučelja
Postavljanje korisničkog sučelja
Postavljanje korisničkog sučelja
Postavljanje korisničkog sučelja
Postavljanje korisničkog sučelja

DOBRODOŠLI! Napokon smo stigli do dijela po koji ste došli, do korisničkog sučelja !!!!

Na prvi pogled ovdje nema ništa. Još nismo obavili nijedan poziv. Kako bih brže učitao stranicu, odlučio sam da prvu stranicu ne opterećujem SVIM stavkama i dopustim vam da brže kliknete ono što želite vidjeti. Budući da je to slučaj, nema stavki u polju glavnog sadržaja i nema filtera na bočnoj traci. Kliknimo na Sve da vidimo što se nalazi u našoj bazi podataka.

Sada smo učitali svaku stavku u našoj bazi podataka u polje glavnog sadržaja. Vidjet ćete slike, identifikacijske brojeve, boju, veličine i lokacije. Polje lokacije može se ažurirati upravo ovdje! Ako odlučite posuditi stvar, možete odabrati tu opciju, možete je staviti u ormar, ormar ili rublje.

A na našoj bočnoj traci imamo svako moguće polje za svaki odjevni predmet u našem novom upitu. Zamislite samo da na ovoj bočnoj traci imate 20 različitih opcija za veličinu, to ne bi bilo jako učinkovito, pa suzimo naše pretraživanje klikom na Pribor.

Sad kad smo učitali Dodatnu opremu, pogledajte bočnu traku. Prilagodio se na samo 3 polja jer su to parametri koji se primjenjuju na svaku stavku u ovom upitu. Napravit ću sortiranje po boji. Klikom na boju pojavljuje se padajući okvir. Ovdje mogu ili upisati željenu boju, a zatim je odabrati, ili ako odmah vidim svoju opciju, samo ću je kliknuti. Za ovu demonstraciju odabrao sam Crveno. Kliknite Primijeni filtar pri dnu ove bočne trake i glavni sadržaj će se osvježiti pokazujući stavke koje imaju crvenu boju kao parametar boje.

Prethodno sam spomenuo da mi ova baza podataka pomaže u upravljanju stvarima na posudbu i u rublju. Da bi bilo lakše, umjesto ručnog klikanja svakog padajućeg mjesta na ovoj glavnoj stranici stvorio sam način pranja rublja. Vratite se na stranicu Google tablica i pod Prikaz aplikacije vidjet ćete Način pranja rublja. Ova će opcija povući manji modal koji prikazuje samo predmete s mjestom pranja rublja. Sada sve ove stavke mogu označiti kao zadane, što će ih vratiti na njihova mjesta na kojima su inače pohranjene.

Korak 7: Projekt dovršen

Projekt dovršen!
Projekt dovršen!

ČESTITAMO

Dobrodošli u svoj mrežni organizator za one od vas koji samo žele radnu bazu podataka za upravljanje stavkama. Za one znatiželjne umove koje zanima kod iza ove aplikacije. Ostanite okolo dok ga razbijam.

*Možete izbrisati testne stavke NAKON što u bazu unesete barem jednu svoju stavku. (Objasnit ću kasnije ako ostanete tu).

Korak 8: Korak 1: Back-End kôd (Server Code.gs)

Korak 1: Back-End kôd (Server Code.gs)
Korak 1: Back-End kôd (Server Code.gs)
Korak 1: Back-End kôd (Server Code.gs)
Korak 1: Back-End kôd (Server Code.gs)

Ranije smo otvorili datoteku poslužitelja Code.gs i dao sam brzi pregled svake od funkcija jer je njihova svrha bila poslužiti svaku stavku koju ste upravo postavili, ali sada ćemo ih raščlaniti na neke od funkcionalnosti i izreka tzv. kako bi ovaj kod uspio.

1) Premještanje stola:

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

  • Ovaj je kôd osnova za kretanje po Google tablici. List nazivam imenom, a ne brojem, tako da ako se listovi izbrišu ili preurede po funkciji i dalje mogu ispravno raditi.
  • U ovom kodu prikupljam samo raspon za sve podatke u tablici.

2) Dodjela ID -a:

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

  • Prethodno sam tražio da se demo vrijednosti ostave u tablici sve dok korisnik ne pošalje barem jednu vrijednost za sebe. To je zato što se generator automatskog identificiranja oslanja na posljednju vrijednost u bazi podataka za popunjavanje.
  • Dohvaćam zadnji 2. do posljednji redak jer je zadnji redak naša nova vrijednost i prvi stupac za vrijednost ID -a.
  • Zatim nasumično generiram broj između 5 i 15 i dodam ga posljednjoj vrijednosti. *
  • Na kraju stavljam ovu vrijednost u ID stupac posljednjeg retka.
  • Zatim pozivamo funkciju changeValueOnSubmit (e).

* Odabrao sam 5-15 kako bih omogućio buduće označavanje i integraciju s Google Homeom, tako da brojevi neće biti dovoljno blizu da izazovu zabunu na vješalicama ili oznakama odjeće ili crtičnim kodovima.

3) Promjena vrijednosti URL -a:

var DataChange = e. namedValues ["Slika stavke"]; var DefaultLocation = e. namedValues ["Gdje držite ovaj odjevni predmet?"]; var ColD = ColumnID _ ("Slika stavke") +1; var ColLoc = ColumnID _ ("Zadana lokacija")+1; DataChange = DataChange.toString (). replace ("open?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (Promjena podataka); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (Zadana lokacija);

  • Prilikom podnošenja fotografije putem Google obrasca URL umetnut u Google tablice predstavlja vezu do stvarnog dokumenta. U našem slučaju, dok stvaramo HTML stranicu, želimo da veza bude samo slika.
  • Promjenom "open?" dio URL -a za "uc? export = view &" umjesto toga smo stvorili vezu do slike.
  • Ovu ćemo novu vrijednost ponovno postaviti na mjesto trenutne veze sa slikom slike.
  • Također postavljam "Zadana lokacija" i "Trenutna lokacija" stavke na istu stvar u bazi podataka. To će pomoći pri pokušaju korištenja načina pranja rublja.
  • Zaronit ćemo u to na sljedećoj stranici, ali ovo je naš prvi pogled na funkciju ColumnID_ () koju sam stvorio.

    Ova funkcija koristi nazive stupaca za prevođenje u cijeli broj stupca što je korisno za pozivanje raspona koji zahtijeva broj stupca, a ne naziv

4) SpreadsheetApp.getUI ()

  • Na drugoj slici možete vidjeti upotrebu SpreadsheetApp.getUI () koja se koristila za stvaranje dodatka izbornika Alatne trake na Google tablici.
  • . GetUI () funkcija također pomaže u stvaranju modalnog skočnog prozora koji se koristi za način pranja rublja i kao brza veza do sučelja web stranice.

5) HTMLService

  • U ovom se kodu koriste dvije vrste HTML usluga: Predložak i HTMLOutput
  • Predložak omogućuje umetanje koda unutar HTML koda, tako da se informacije koje dolaze s poslužitelja mogu popuniti prilikom pozivanja stranice.
  • HTML Output prikazuje jednostavne HTML stranice.
  • Također imamo metodu include () koja nam omogućuje stvaranje više HTML datoteka i njihovo kombiniranje u jednu predloščenu HTML datoteku vraćanjem sadržaja datoteke u HTML formatu, a ne nizu.

Priložio sam dokument postavljen kao Dokumentacija o skriptama aplikacija za Google kako bih upoznao način objašnjenja izvornog koda i funkcionalnosti u Google Apps.

Korak 9: Korak 2: Pozadinski kôd, drugi dio (pozivi poslužitelja)

Korak 2: Pozadinski kôd, drugi dio (pozivi poslužitelja)
Korak 2: Pozadinski kôd, drugi dio (pozivi poslužitelja)
Korak 2: Pozadinski kôd, drugi dio (pozivi poslužitelja)
Korak 2: Pozadinski kôd, drugi dio (pozivi poslužitelja)
Korak 2: Pozadinski kôd, drugi dio (pozivi poslužitelja)
Korak 2: Pozadinski kôd, drugi dio (pozivi poslužitelja)

Sada smo unijeli Server Calls.gs. Ove se funkcije prvenstveno koriste u HTML -u JavaScript, pa su odvojene od koda koji se prvenstveno koristi u pozadini koji se nalazi u poslužiteljskom kodu.gs.

Slika 1) Globalne varijable:

Slika 2) dohvaćanje stavki:

Slika 3) fetchItemsQry

Slika 4) Stavke filtera

Slika 5) fetchFiltersWithQry

Slika 6) ColumnID i CacheCalls

Sa svakim od njih ima toliko toga za razgovarati. A kako bih razbio kôd i objasnio što se događa, trebalo mi je malo više prostora za upisivanje. U privitku je dokument za raščlambu koda ServerCalls.gs

Ovaj je dokument postavljen kao dokumentacija Googleovih skripti aplikacija, pa čak i povezuje slične objekte.

Korak 10: Korak 3: HTML kôd (Application.html)

Korak 3: HTML kôd (Application.html)
Korak 3: HTML kôd (Application.html)
Korak 3: HTML kôd (Application.html)
Korak 3: HTML kôd (Application.html)
Korak 3: HTML kôd (Application.html)
Korak 3: HTML kôd (Application.html)

HTML kôd postaje vrlo nesretan u dijaloškom okviru Instructable. Stoga slijedite gornje slike.

1) U zaglavlju stranice Application.html uspostavljamo naslov i pozivamo našu stranicu CSS.html da se učita.

*Budući da je HTML stranica s predloškom, ovom dokumentu možemo dodati više koda bez zagušenja trenutnog zaslona pomoću prethodno spomenute metode include (pageName) koja se nalazi u poslužiteljskom kodu.gs

Glavni okvir zaglavlja također se nalazi na ovoj slici. Ovdje možete promijeniti zaglavlje i unijeti "[Your Name] 's Garderobe" ili bilo što drugo pod čime želite prepoznati ovu stranicu.

2) Odmah ispod zaglavlja nalazi se naša gornja navigacijska traka.

Ova navigacijska traka uključuje sve vrste članaka navedene na listu članaka unutar naših Google tablica.

Ugrađena funkcija poziva se za dohvaćanje niza ovih stavki. Zatim se pokreće petlja koja uključuje svaku od ovih opcija kao gumb izbornika, zajedno s kodom radnje, pa kada korisnik klikne gumb izbornika, odgovarajuće stavke pojavit će se u području tijela.

3) Glavno tijelo.

Ovaj dio ima 4 dijela. Izlaz teksta, filter bočne trake, slike glavnog tijela i JS uključuju.

Izlaz teksta omogućuje korisniku da vidi brzi prikaz teksta o vrsti stavki koje trenutno gleda umjesto upućivanja na opciju izbornika koju su odabrali.

Filtar bočne trake sadrži mnoge dostupne filtre za vrstu stavke koju je korisnik odabrao. Ovi filtri odražavaju sve opcije dostupne za ovu kategoriju, kao i koliko stavki potpada pod vrijednost te kategorije. Ova bočna traka popunjena je JavaScript kodom (o čemu će biti riječi dalje).

Glavno tijelo trenutno je prazno, ali baš kao i filtri, bit će ispunjeno okvirima sa stavkama s pojedinostima o ID -u stavke, boji, veličini i lokaciji sa slikom uključenom kad korisnik odabere kategoriju i JavaScript kôd popuni ovo područje.

Konačno, uključuje (JS), pogledajmo ovo na sljedećem koraku.

Korak 11: Korak 4: JavaScript kôd (JS.html)

Korak 4: JavaScript kôd (JS.html)
Korak 4: JavaScript kôd (JS.html)

Ako mislite da je poslužiteljski kod težak odjeljak, učitajte ovo.

Ovdje kombiniramo naš HTML i SeverCode s korisničkim interakcijama. Svaka stavka na koju se klikne mora se ovdje obraditi kako bi se dobili odgovarajući podaci i vratili u čitljivom formatu. Pa pogledajmo naše prve pozive:

Skripta poziva: Za ovaj projekt koristim 3 različite knjižnice; jquery, bootstrap i poseban dodatak za odabir bootstrap-a. Ove knjižnice omogućuju oblikovanje objekata i lakše pozivanje elemenata unutar HTML koda.

Moja sljedeća važna linija JavaScripta je ispod:

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

Ovdje onemogućujem tipki enter da pokreće bilo koji od obrazaca. Kao što je u ovom slučaju Google web aplikacijama dodijeljena samo adresa jedne stranice. Pritiskom na tipku enter dodat će se podaci na HTML adresu i pokušati preusmjeriti korisnika. Onemogućavanjem ovoga dopuštate da vaš JavaScript kôd obavi sav posao.

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

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

Evo dvije funkcije koje pozivaju datoteku poslužitelja Code.gs. Crta:

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

ima mnogo radnih dijelova, ali kostur je ukorijenjen iz "google.script.run" koji govori HTML stranici da je sljedeća funkcija na poslužitelju.

  • Zadnji bit ovog koda je funkcija za pokretanje. U ovom primjeru ServerRemoveFilter ()
  • Dodavanjem withSuccessHandler () HTML stranica sada zna što učiniti s vraćenim podacima, a to je za pokretanje funkcije s zagradama.
  • Isto se odnosi i na withFailureHandler ()

Sada kada smo razbili poziv poslužiteljskog koda, bacimo brzi pogled na ono što se događa kada ti pozivi poslužitelja uspiju i ne uspiju.

function allGood (e) {console.log ("Uspjeh na poslužitelju"); } funkcija onFailure (pogreška) {$ ("#message-box"). html ("

Trenutačno nije moguće dohvatiti odjeću. GREŠKA: " + greška. Poruka +"

");} funkcija FailDBUpdate (pogreška) {$ ("#okvir za poruke "). html ("

Nemate pristup za izmjenu lokacije. GREŠKA: " + greška. Poruka +"

"); $ (". location-selects "). prop ('disabled', 'disabled');}

Napravio sam vrlo jednostavan dnevnik konzole za označavanje uspjeha pri pokretanju funkcije lokacije koju možete vidjeti kao allGood ().

Pri rukovanju pogreškama ove dvije funkcije ispisuju poruku o pogrešci koju korisnik može vidjeti pomoću jQuery poziva do HTML objekta s ID-om "message-box".

Prijeđimo sada na teški posao

Korak 12: Korak 5: JavaScript radnje klikom miša (JS.html)

Korak 5: JavaScript radnje klikom miša (JS.html)
Korak 5: JavaScript radnje klikom miša (JS.html)
Korak 5: JavaScript radnje klikom miša (JS.html)
Korak 5: JavaScript radnje klikom miša (JS.html)
Korak 5: JavaScript radnje klikom miša (JS.html)
Korak 5: JavaScript radnje klikom miša (JS.html)

Gornja traka izbornika ima opcije za svaku vrstu članka. Funkcija koju pokreću na klik je:

funkcija filterType (članak, id) {$ ("ul.navbar-nav li.aktivan"). removeClass ("aktivan"); $ ("#currentArticle"). html ("// HTML KOD OVDJE");

updateSideBar = true;

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

Vidimo da u ovom kodu imamo google.script.run koji poziva poslužitelj radi dohvaćanja informacija. Funkcija uspjeha za ovaj poziv je updateItems ().

SLIKA 1 (s teškim HTML kodom unutar ove funkcije teško je strogo kopirati kôd, a da se u ovom okviru ne pojavi nered)

U updateItems () kodu imamo mnogo toga što se događa. Još jednom moramo proći kroz Object koji nam je vraćen i dodati svaku stavku na našu glavnu stranicu.

HTML kôd dodaje se kao nizovi za razbijanje koda i lakše čitanje i pregled mjesta umetanja itemData.

U petlji svake stavke uklanjam polja koja ne želim vidjeti u opisu, kao što su Zadano, vremenska oznaka i URL slike. Uklanjam URL slike iz opisa jer se umjesto toga dodaje kao href oznaci. Nakon što se ove informacije sastave, šalju se u glavno tijelo pomoću funkcije jQuery.append ().

Nakon što su sve stavke dodane na stranicu, ovaj upit stavki ponovno se šalje u kôd poslužitelja radi sortiranja i vraćanja opcija filtra kako je prikazano na slici 2.

SLIKA 2 (ažuriranje bočne trake)

Vrlo slično funkciji updateItems (), ponovno imamo nizove HTML koda i petlju za sve opcije filtriranja. Jedina zamjetna promjena je jQuery.selectpicker ('osvježi'). Ova funkcija dolazi iz knjižnice skripti koju smo uključili u posljednjem koraku. Omogućuje programeru da napiše jednostavan odabrani HTML i da ga knjižnica ažurira tako da uključi funkciju pretraživanja, kao i CSS kod.

SLIKA 3 (filtriranje sa bočne trake)

Na kraju imamo funkciju updateFilter (formData). To se koristi kada se obrazac šalje s bočne trake. Započinjemo upotrebom funkcije jQuery.serializeArray () koja čita HTML kôd elementa definiranog u našem slučaju u obliku, i vraća vrijednosti u nizu za slanje poslužitelju. I započinjemo proces sa slike 1 iznova.

Korak 13: Kraj….na kraju

Kraj….na kraju
Kraj….na kraju
Kraj….na kraju
Kraj….na kraju

Pa eto ga; potpuno i temeljito objašnjenje koje će vam pomoći u postavljanju vlastite internetske garderobe ili upotrijebiti funkcionalnost stvorenu u mojim Google skriptama za proširenje vlastitog projekta.

Bilo je to putovanje kodiranje ovog projekta (i dokumentiranje kroz ovaj Instructable), ali ja sam uživao u procesu i nadam se da ćete uživati u proizvodu. Volio bih čuti svakoga tko napravi prilagodbe jer Michael Jordan kaže "Strop je krov" i slažem se da ova aplikacija nema granica.

Preporučeni: