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, Novembar
Anonim
Organizator ormara
Organizator ormara

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

Ovo je sve na jednom mjestu i ekspanzivno 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 garancije. Majke će kupiti ono što žele bez obzira da li vam je to potrebno 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. Razdvojeno po odjeljenjima na vrhu i filterima sa strane, ovo sučelje upoznaje funkcionalnost običnog korisnika. I jednostavan je za upotrebu.

Korak 1: Postavljanje vlastite kopije

Postavljanje vlastite kopije
Postavljanje vlastite kopije

Počnimo stvaranjem vlastite kopije ovog projekta.

Google disk

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

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

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

Postavite lokaciju ove kopije na svoj vlastiti Disk.

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

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

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

Korak 2: 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 kada imate svoju verziju ove aplikacije, pogledajmo okolo.

Vaš Google obrazac je postavljen za prihvaćanje mnogo različitih vrsta stavki. Međutim, košulje, hlače, haljine i cipele imaju različita ograničenja u veličini. Stoga će se ispuniti drugi odjeljak ovog obrasca na osnovu 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 našoj bazi podataka s nazivom "Veličina" ili ne bismo mogli odrediti na koju vrstu odjeće se odnosi 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ćava da se organizujem i da se nikada ne osjećam kao da mi 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). Prilikom podnošenja obrasca neki odjeljci se preskaču, što je vidljivo iz podataka koji nedostaju u nekim kolonama. No, dodane su dodatne kolone kao što su ID, Zadana lokacija, Tko i Ažurirano radi boljeg praćenja uređivanja ovih stavki.

Polje ID je stvoreno kada ste poslali obrazac kako biste omogućili jedinstveni identifikator pri prelasku kroz ovu bazu podataka. Da bismo stvorili ovo polje, pogledat ćemo uređivač skripti klikom na Alati> Uređivač skripti.

Kada je uređivač skripti otvoren, primijetit ćete 8 dokumenata na bočnoj traci ovog novog prozora. Ovi dokumenti pomažu u kontroli pozadinskog procesa, prednjih ekrana i prednjih funkcija. Preskočit ćemo svaki od njih (ako se zadržite), ali odmah kliknite na Server Code.

U datoteci Server Code.gs postoji mnogo funkcija:

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

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

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

doGet ()- Ova funkcija se 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 funkcija se 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 na tipke menija dodane na traku s alatima 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 OnFormSubmit -a

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 Trigger.

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 dugme 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 interfejsa
Postavljanje korisničkog interfejsa
Postavljanje korisničkog sučelja
Postavljanje korisničkog sučelja

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

Na prvi pogled ovdje nema ničega. Još nismo obavili nijedan poziv. Da bih brže učitao stranicu, odlučio sam da prvu stranicu ne opterećujem SVIM vašim stavkama i dozvolim vam da brže kliknete na 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. Kliknemo na Sve da vidimo šta 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žete ažurirati upravo ovdje! Ako odlučite posuditi stvar, možete odabrati tu opciju, možete je staviti u ormar, ormar ili rublje.

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 veličine, to ne bi bilo jako učinkovito, pa suzimo našu pretragu klikom na Dodaci.

Sada kada 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. Uradit ć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.

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

Korak 7: Projekat je završen

Projekat završen!
Projekat završen!

ČESTITAMO

Za one od vas koji samo žele radnu bazu podataka za upravljanje vašim stavkama, dobrodošli u svoj mrežni organizator. Za one znatiželjne umove koje zanima kod iza ove aplikacije. Ostanite tu dok je razbijam.

*Možete izbrisati testne stavke NAKON što u bazu unesete barem jednu svoju stavku. (Objasnić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 Server Code.gs i dao sam kratak pregled svake od funkcija jer je njihova svrha bila posluživanje svake stavke koju ste upravo postavili, ali sada ćemo ih raščlaniti na neke od funkcija i izreka tzv. kako bi ovaj kod bio uspješan.

1) Kretanje po stolu:

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 kôd je 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) Dodela identifikacionog dokumenta:

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 dok korisnik ne dostavi barem jednu vrijednost za sebe. To je zato što se generator automatskog identifikacije oslanja na posljednju vrijednost u bazi podataka za popunjavanje.
  • Dohvaćam posljednji drugi do posljednji red jer je zadnji red naša nova vrijednost i prva kolona 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 reda.
  • 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 (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

  • 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 opcije "open?" dio URL -a za "uc? export = view &" umjesto toga smo stvorili vezu do slike.
  • Ovu novu vrijednost ćemo ponovo postaviti na lokaciju trenutne veze sa slikom slike.
  • Također postavljam "Zadana lokacija" i "Trenutna lokacija" stavke na istu stvar u bazi podataka. Ovo će mi 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 umjesto imena

4) SpreadsheetApp.getUI ()

  • Na drugoj slici možete vidjeti upotrebu SpreadsheetApp.getUI () koja se koristila za kreiranje menija Alatne trake kao dodatak 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 kodu se koriste dvije vrste HTML usluga: Predložak i HTMLOutput
  • Predložak omogućava umetanje koda unutar HTML koda, tako da se informacije koje dolaze sa servera mogu popuniti prilikom pozivanja stranice.
  • HTML Output prikazuje jednostavne HTML stranice.
  • Imamo i metod include () koji nam omogućava da kreiramo više HTML datoteka i kombiniramo ih u jednu predlošku HTML datoteku vraćanjem sadržaja datoteke u HTML formatu, a ne nizu.

Priložio sam dokument postavljen kao Google App Scripts Documentation kako bih upoznao način objašnjenja izvornog koda i funkcionalnosti unutar Google Apps.

Korak 9: Korak 2: Pozadinski kôd, dio 2 (Server Calls.gs)

Korak 2: Pozadinski kôd, dio 2 (Server Calls.gs)
Korak 2: Pozadinski kôd, dio 2 (Server Calls.gs)
Korak 2: Pozadinski kôd, dio 2 (Server Calls.gs)
Korak 2: Pozadinski kôd, dio 2 (Server Calls.gs)
Korak 2: Pozadinski kôd, dio 2 (Server Calls.gs)
Korak 2: Pozadinski kôd, dio 2 (Server Calls.gs)

Sada smo unijeli Server Calls.gs. Ove se funkcije prvenstveno koriste u HTML JavaScript -u, tako da su odvojene od koda koji se prvenstveno koristi u pozadini koji se nalazi u poslužitelju Code.gs.

Slika 1) Globalne varijable:

Slika 2) Preuzimanje stavki:

Slika 3) fetchItemsQry

Slika 4) FilterItems

Slika 5) fetchFiltersWithQry

Slika 6) ColumnID i CacheCalls

Sa svakim od njih ima toliko toga za pričati. A da bih razbio kôd i objasnio šta se dešava, trebalo mi je malo više prostora za kucanje. U prilogu je dokument za raščlambu koda ServerCalls.gs

Ovaj dokument je postavljen kao dokumentacija o skriptama Google 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 dijalogu za upućivanje. 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 sa predloškom, ovom dokumentu možemo dodati više koda bez zagušenja trenutnog ekrana pomoću prethodno spomenute metode include (pageName) koja se nalazi u Server Code.gs

Glavni okvir zaglavlja se takođe 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 se poziva za dohvat niza ovih stavki. Zatim se pokreće petlja koja uključuje svaku od ovih opcija kao dugme menija, zajedno sa kodom radnje, tako da kada korisnik klikne na dugme menija, odgovarajuće stavke će se pojaviti u području tela.

3) Glavno telo.

Ovaj dio ima 4 dijela. Izlaz teksta, filter na bočnoj traci, slike glavnog tijela i JS uključuju.

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

Filtar bočne trake sadrži mnoge dostupne filtere 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 je ispunjena 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 detaljima 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.

Na kraju uključuje (JS), pogledajmo ovo na sljedećem koraku.

Korak 11: Korak 4: JavaScript kod (JS.html)

Korak 4: JavaScript kod (JS.html)
Korak 4: JavaScript kod (JS.html)

Ako ste mislili da je kod poslužitelja težak odjeljak, učitajte ovo.

Ovdje kombiniramo naš HTML i SeverCode s korisničkom interakcijom. 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 biblioteke; jquery, bootstrap i poseban dodatak za odabir bootstrap-a. Ove biblioteke omogućuju oblikovanje objekata i lakše pozivanje elemenata unutar HTML koda.

Moja sljedeća važna linija JavaScript -a 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 dodaju se podaci u HTML adresu i pokušava se preusmjeriti korisnik. Onemogućavanjem ovoga dopuštate svom JavaScript kodu da 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 Server Code.gs. Linija:

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 serveru.

  • Zadnji bit ovog koda je funkcija za pokretanje. U ovom primjeru ServerRemoveFilter ()
  • Dodavanjem withSuccessHandler () HTML stranica sada zna što treba učiniti s podacima koji se vraćaju, a to je 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 ovi pozivi poslužitelja uspiju i ne uspiju.

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

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

");} funkcija FailDBUpdate (greš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 koji označava uspjeh pri pokretanju funkcije lokacije koji možete vidjeti kao allGood ().

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

Pređimo sada na težak 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 menija ima opcije za svaku vrstu članka. Funkcija koju pokreću na klik je:

funkcija filterType (article, id) {$ ("ul.navbar-nav li.active"). removeClass ("active"); $ ("#currentArticle"). html ("// HTML KOD OVDE");

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 server da dohvati informacije. 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 stvari koje se dešavaju. Još jednom moramo proći kroz Object koji nam je vraćen i dodati svaku stavku na našu glavnu stranicu.

HTML kôd se dodaje 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 se ponovo šalje u kôd servera radi sortiranja i vraćanja opcija filtera kao što je prikazano na slici 2.

SLIKA 2 (ažuriranje bočne trake)

Vrlo slično funkciji updateItems (), ponovo imamo nizove HTML koda i petlju za sve opcije filtera. Jedina primjetna promjena je jQuery.selectpicker ('osvježi'). Ova funkcija dolazi iz biblioteke skripti koju smo uključili u posljednjem koraku. Omogućava programeru da napiše jednostavan odabrani HTML i dozvoli biblioteci da ga 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). Ovo se koristi kada se obrazac šalje sa 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 koje treba poslati 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

Eto ga; potpuno i temeljito objašnjenje koje će vam pomoći u postavljanju vlastite internetske garderobe ili koristiti funkcije stvorene 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 "Plafon je krov" i slažem se da ova aplikacija nema granica.

Preporučuje se: