Garderobes organizators: 13 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:55

Neatkarīgi no tā, vai tas ir drēbju pirkšana vai vienmēr tiek lūgts aizņemties kādu priekšmetu, ir reizes, kad vēlaties, lai jūs varētu ielūkoties savā skapī no jebkuras vietas, lai redzētu, vai jums ir kaut kas līdzīgs. Skapja organizators to dara UN VĒL!

Šī ir vienas pieturas aģentūra, un tā ir plaša daudziem citiem mērķiem. Mana drēbju skapja organizators ir Google izklājlapu kombinācija kā SQL datu bāze, Google skripti datu apstrādei un Google WebApp tiešsaistes portālam šiem datiem. Gala lietotājs var redzēt visus priekšmetus, filtrēt kaut ko konkrētu, atzīmēt priekšmetus kā neizmantotus, pārvaldīt veļu un neļaut mammai katru gadu Ziemassvētkos jums nopirkt vienu un to pašu kreklu*.

(*Nav garantijas. Mātes pirks to, ko vēlas, neatkarīgi no tā, vai jums to vajag vai nē)

Ātri apskatot iepriekšējā attēlā redzamo vietnes dizainu, varētu atpazīt pazīstamu izkārtojumu. Garderobes organizators ir izveidots tāpat kā jebkura parasta apģērbu vietne. Šī saskarne, kas sadalīta pēc nodaļām augšpusē un sānos esošajiem filtriem, vienkāršajam lietotājam sniedz zināšanas par funkcionalitāti. UN tas ir vienkārši lietojams.

1. darbība: savas kopijas iestatīšana

Sāksim, izveidojot savu šī projekta kopiju.

Google disks

Noklikšķiniet uz iepriekš redzamās saites, lai pārietu uz manu pašreizējo šīs lietojumprogrammas versiju.

Šajā mapē redzēsit 3 vienumus: Google veidlapu, Google izklājlapu un mapi.

Ar peles labo pogu noklikšķiniet uz Google lapas un noklikšķiniet uz Izveidot kopiju.

Iestatiet šīs kopijas atrašanās vietu savam diskam.

Pēc šī dokumenta kopēšanas Google veidlapa tiks automātiski ģenerēta tajā pašā mapē, kurā pārvietojāt Google lapu.

Lai izveidotu mapi (tas ir nepieciešams, lai apkopotu vienumu attēlu augšupielādes), noklikšķiniet uz nokopētās Google veidlapas un parādīsies uzvedne ar lūgumu atjaunot augšupielādes mapes atrašanās vietu.

Tagad jums ir šī dokumenta kopija, lai strādātu pie sevis!

2. darbība. Google veidlapu pārskats

Tagad, kad jums ir sava šīs lietojumprogrammas versija, paskatīsimies apkārt.

Jūsu Google veidlapa ir iestatīta, lai pieņemtu daudz dažādu veidu vienumus. Tomēr krekliem, biksēm, kleitām un apaviem ir dažādi izmēru ierobežojumi. Tāpēc tiks aizpildīta cita šīs veidlapas sadaļa, pamatojoties uz nodaļu, kurā jūs iesniedzat savu preci. Savā (vīriešu raksta) veidnē esmu izveidojis 5 dažādas izmēru kategorijas. (Sieviešu rakstiem noklikšķiniet šeit, ir daudz vairāk).

Katrā izmēru sadaļā es izveidoju unikālu nosaukumu katram parametram, ko apkopošu. Mēs nevēlamies, lai mūsu datu bāzē būtu vairākas kolonnas ar nosaukumu "Izmērs", vai arī mēs nevarētu noteikt, kāda veida drēbes attiecas uz šo izmēru.

Katras sadaļas beigās lietotājs tiek novirzīts uz šīs veidlapas pēdējo daļu: Atrašanās vieta. Es personīgi izvēlējos pievienot atrašanās vietu, lai noteiktu preces ķīmiskajās tīrītavās, veļas mazgātavā, to vietā vai tās lietas, kurās esmu ļāvis draugam aizņemties. Tas ļauj man būt organizētam un nekad nejusties tā, ka man kaut kur pietrūkst kāda apģērba gabala.

Kā jau minēju no sākuma, šo projektu var paplašināt miljonos dažādos veidos. To var izmantot inventarizācijai, precīzākam organizēšanas rīkam vai drēbju stingrai aizņemšanai. Laukus un sadaļas, ko varat pievienot, ir bezgalīgi, tāpēc nejūtieties ierobežots ar to, kas ir manā formā. (Sieviešu rakstiem noklikšķiniet šeit)

Pirms augšupielādēt dažus savus vienumus, pārejam pie nākamās darbības, lai nodrošinātu pareizu iesniegšanu.

3. darbība: Google skripti: (servera kods.gs) Vispirms apskatiet datus un kodu

Noklikšķinot uz Google izklājlapu dokumenta, jūs redzēsiet daudzas datu slejas (un dažas rindas, kas atstātas demonstrēšanai). Veidlapas iesniegšanas laikā dažas sadaļas tiek izlaistas, tas ir redzams no trūkstošajiem datiem dažās slejās. Bet, lai labāk izsekotu šo vienumu labojumiem, ir pievienotas papildu slejas, piemēram, ID, Noklusējuma atrašanās vieta, Kas un Atjaunināts.

Iesniedzot veidlapu, tika izveidots ID lauks, lai, apmeklējot šo datu bāzi, tiktu piešķirts unikāls identifikators. Lai izveidotu šo lauku, mēs apskatīsim skriptu redaktoru, noklikšķinot uz Rīki> Skripta redaktors.

Atverot skriptu redaktoru, šī jaunā loga sānjoslā pamanīsit 8 dokumentus. Šie dokumenti palīdz kontrolēt aizmugures procesu, priekšgala displejus un priekšgala funkcionalitāti. Mēs ienāksim katrā no tiem (ja jūs paliksit apkārt), bet tieši tagad noklikšķiniet uz servera koda.

Failā Server Code.gs ir daudz funkciju:

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

onSubmit (e) - šī funkcija tiks konfigurēta kā pirmā funkcija, kas tiks palaista, kad tiks iesniegta Google veidlapa. Šajā funkcijā varat ievietot citas funkcijas, lai varētu notikt daudzi dažādi procesi.

onOpen (e) - šī funkcija tiek izsaukta, atverot Google izklājlapas. Tas aizpilda jaunu izvēlnes opciju, lai ļautu ātri piekļūt lietojumprogrammu saitēm un skatiem.

doGet ()- šī funkcija tiek izsaukta Web App adreses zvanā. Kad lietotājs pārlūko publicēto tīmekļa lietotni, šis kods norādīs šai lapai, ko parādīt. Šajā gadījumā tas ir dokuments Application.html.

include (faila nosaukums) - šī funkcija tiek izmantota HTML lappusēs, lai lasītu citu dokumentu un ievietotu to saturu atbilstošā HTML formātā citā lapā. Mēs to izmantojam mūsu CSS.html un JS.html failiem.

openApplication () un openLaundryApp () - šīs funkcijas satur kodu, kas jāpalaiž, kad lietotājs noklikšķina uz izvēlnes pogām, kas pievienotas Google izklājlapas rīkjoslai.

changeValueOnSubmit (e) un setIDOnSubmit (e)- šīs ir funkcijas, kuras mēs tagad izskatīsim. Viņi ir atbildīgi par noteiktu lauku atjaunināšanu ar noklusējuma vērtībām, kad veidlapa tiek sākotnēji iesniegta.

4. darbība: iespējojiet OnFormSubmit

Šīs divas funkcijas - changeValueOnSubmit (e) un setIDOnSubmit (e) - ir jāsaista ar lietotāja darbību, iesniedzot veidlapu. Lai to izdarītu, mums ir jāiespējo aktivizētājs.

Mēs aktivizējam aktivizētāju, noklikšķinot uz Rediģēt> Pašreizējā projekta aktivizētāji. Tādējādi tiek atvērts Google izstrādātāju centrs.

Aktivizēšanas paneļa labajā apakšējā stūrī ir poga Pievienot aktivizētāju. Noklikšķiniet šeit.

Tagad mēs iestatīsim funkciju, lai tā darbotos, kad tiek iesniegta veidlapa. Mūsu gadījumā man ir vairākas funkcijas (changeValueOnSubmit (e) un setIDOnSubmit (e)), kuras ievietoju funkcijas onSubmit () iekšpusē, tāpēc man ir jāiestata tikai 1 aktivizētājs. Tāpēc mēs atlasīsim onSubmit () un iestatīsim šo aktivizētāju, lai tas darbotos, iesniedzot veidlapu.

Tagad mums ir darba veidlapa, kas aizpildīs Google lapu ar unikāliem identifikatoriem un iestatīs noklusējuma vērtības.

Tagad varat augšupielādēt savus vienumus, izmantojot Google veidlapu. (Tas nav nepieciešams, lai turpinātu, jo tajā jau ir demonstrācijas vērtības). Tagad mēs ienirsim lietotāja saskarnē.

5. darbība. Lietotāja interfeisa iestatīšana

Laipni lūdzam! Mēs beidzot esam sasnieguši daļu, pēc kuras jūs ieradāties, lietotāja saskarni !!!!

No pirmā acu uzmetiena šeit nav nekā. Mēs vēl neesam zvanījuši. Lai ātrāk ielādētu lapu, es nolēmu nebojāt pirmo lapu ar VISIEM jūsu vienumiem un ļaut jums noklikšķināt uz tā, ko vēlaties redzēt ātrāk. Tā kā tas notiek, galvenā satura laukā nav vienumu un sānjoslā nav filtru. Noklikšķiniet uz Visas, lai redzētu, kas ir mūsu datu bāzē.

Tagad mēs esam ielādējuši katru vienumu mūsu datu bāzē galvenajā satura laukā. Jūs redzēsit attēlus, ID numurus, krāsas, izmērus un atrašanās vietas. Atrašanās vietas lauku var atjaunināt šeit! Ja jūs nolemjat aizdot priekšmetu, varat izvēlēties šo opciju, varat to ievietot skapī, kumodē vai veļas mazgātavā.

Un mūsu sānjoslā ir visi iespējamie lauki katram apģērba priekšmetam mūsu jaunajā vaicājumā. Iedomājieties, ka šajā sānjoslā ir 20 dažādas izmēru opcijas, tas nebūtu ļoti efektīvi, tāpēc sašaurināsim meklēšanu, noklikšķinot uz Aksesuāri.

Tagad, kad esam ielādējuši piederumus, apskatiet sānjoslu. Tas ir pielāgots tikai 3 laukiem, jo šie ir parametri, kas attiecas uz katru šī vaicājuma vienumu. Es kārtošu pēc krāsas. Noklikšķinot uz krāsas, parādās nolaižamais lodziņš. Šeit es varu vai nu ierakstīt vēlamo krāsu, un pēc tam to atlasīt, vai arī, ja uzreiz redzu savu opciju, es vienkārši noklikšķināšu uz tās. Šai demonstrācijai es izvēlējos sarkano. Šīs sānjoslas apakšdaļā noklikšķiniet uz Lietot filtru, un galvenais saturs tiks atsvaidzināts, parādot vienumus, kuru krāsas parametrs ir iestatīts sarkanā krāsā.

Es iepriekš minēju, ka šī datu bāze palīdz man pārvaldīt savus priekšmetus, kas tiek izsniegti aizdevumā un veļas mazgātavā. Lai to padarītu nedaudz vieglāku, tā vietā, lai manuāli noklikšķinātu uz katras nolaižamās vietas šajā galvenajā lapā, es izveidoju veļas mazgāšanas režīmu. Atgriezieties lapā Google izklājlapa un sadaļā Lietotņu skats redzēsiet veļas režīmu. Izmantojot šo opciju, tiks parādīts mazāks modāls, kurā tiks parādīti tikai veļas atrašanās vietas vienumi. Tagad es varu atzīmēt visus šos vienumus kā noklusējuma, kas tos novietos atpakaļ vietās, kur tie parasti tiek glabāti.

7. solis: projekts ir pabeigts

APSVEICU

Tiem no jums, kuri vēlas tikai funkcionējošu datu bāzi, lai pārvaldītu jūsu vienumus, laipni lūdzam tiešsaistē. Tiem ziņkārīgajiem prātiem, kurus interesē šīs lietojumprogrammas kods. Palieciet apkārt, kad es to nojaucu.

*Jūs varat brīvi izdzēst testa vienumus pēc tam, kad esat ievadījis vismaz vienu no saviem vienumiem datu bāzē. (Es paskaidrošu vēlāk, ja tu paliksi apkārt).

8. darbība: 1. darbība: aizmugures kods (servera kods.gs)

Agrāk mēs atvērām failu Server Code.gs, un es ātri palaidu visas funkcijas, jo to mērķis bija apkalpot katru no jūsu tikko iestatītajiem vienumiem, bet tagad mēs sadalīsim tās dažas funkcijas un utilītas, ko sauc par lai šis kods būtu veiksmīgs.

1) Galda šķērsošana:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Veidlapas atbildes 1"); var diapazons = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = diapazons.getLastRow ();

• Šis kods ir pamats Google lapas pārvietošanai. Es izsaucu lapu pēc nosaukuma, nevis pēc numura, lai lapas, ja tās tiek dzēstas vai pārkārtotas pēc funkcijas, joprojām darbotos pareizi.
• Šajā kodā es apkopoju tikai diapazonu visiem tabulas datiem.

2) ID piešķiršana:

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

• Iepriekš es lūdzu, lai demo vērtības tiktu atstātas tabulā, līdz lietotājs ir iesniedzis vismaz vienu vērtību sev. Tas ir tāpēc, ka Auto ID ģenerators paļaujas uz pēdējo datu bāzes vērtību.
• Es ielādēju pēdējo 2. līdz pēdējo rindu, jo pēdējā rinda ir mūsu jaunā vērtība un 1. sleja ID vērtībai.
• Pēc tam es nejauši ģenerēju skaitli no 5 līdz 15 un pievienoju to pēdējai vērtībai. *
• Visbeidzot es ievietoju šo vērtību pēdējās rindas ID slejā.
• Tālāk mēs izsaucam funkciju changeValueOnSubmit (e).

* Es izvēlējos 5-15, lai turpmāk varētu iezīmēt un integrēt Google mājas lapu, lai skaitļi nebūtu pietiekami tuvi, lai radītu neskaidrības par pakaramiem vai apģērba tagiem vai svītrkodiem.

3) URL vērtības maiņa:

var DataChange = e.namedValues ["Preces attēls"]; var DefaultLocation = e.namedValues ["Kur jūs glabājat šo apģērba gabalu?"]; var ColD = kolonnas ID _ ("vienuma attēls") +1; var ColLoc = Kolonnas ID _ ("Noklusējuma atrašanās vieta")+1; DataChange = DataChange.toString (). aizstāt ("atvērt?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Iesniedzot fotoattēlu, izmantojot Google veidlapu, Google izklājlapās ievietotais URL ir saite uz faktisko dokumentu. Mūsu gadījumā, veidojot HTML lapu, mēs vēlamies, lai saite būtu tikai attēls.
• Mainot "atvērt?" daļu no URL uz "uc? export = view &", tā vietā esam izveidojuši saiti uz attēlu.
• Mēs atkal ievietosim šo jauno vērtību pašreizējās vienuma attēla saites vietā.
• Es arī iestatu vienuma "Noklusējuma atrašanās vieta" un "Pašreizējā atrašanās vieta" uz vienu un to pašu datu bāzē. Tas palīdzēs, mēģinot izmantot manu veļas mazgāšanas režīmu.

• Mēs to aplūkosim nākamajā lapā, taču tas ir mūsu pirmais skatiens uz manis izveidoto funkciju ColumnID_ ().

  Šī funkcija izmanto kolonnu nosaukumus, lai tos pārvērstu kolonnu veselos skaitļos, kas ir noderīgi diapazona izsaukšanai, kam nepieciešams kolonnas numurs, nevis nosaukums

4) SpreadsheetApp.getUI ()

• Otrajā attēlā varat redzēt SpreadsheetApp.getUI () izmantošanu, kā tas tika izmantots, lai izveidotu Google tabulas rīkjoslas izvēlnes papildinājumu.
• Funkcija.getUI () arī palīdz izveidot modālu uznirstošo logu, kas tiek izmantots veļas mazgāšanas režīmā un kā ātra saite uz vietnes saskarni.

5) HTML pakalpojums

• Šajā kodā tiek izmantoti divu veidu HTML pakalpojumi: veidne un HTML izvade
• Veidne ļauj ievietot kodu HTML koda iekšpusē, lai no servera saņemto informāciju varētu aizpildīt, izsaucot lapu.
• HTML izvade parāda vienkāršas HTML lapas.
• Mums ir arī metode include (), kas ļauj mums izveidot vairākus HTML failus un apvienot tos vienā veidnes HTML failā, atgriežot faila saturu HTML formātā, nevis virknē.

Esmu pievienojis dokumentu, kas izveidots, piemēram, Google lietotņu skriptu dokumentācija, lai iepazīstinātu ar to, kā Google Apps izskaidro avota kodu un funkcionalitāti.

9. darbība: 2. darbība: aizmugures koda 2. daļa (servera zvani. Gs)

Tagad mēs esam ievadījuši servera zvanus. Šīs funkcijas galvenokārt tiek izmantotas HTML JavaScript, tāpēc tās ir atdalītas no koda, kas galvenokārt tiek izmantots aizmugurējā daļā, kas atrodas servera kodā.gs.

1. attēls) Globālie mainīgie:

2. attēls) vienumu ielāde:

3. attēls) fetchItemsQry

4. attēls) filtrs

5. attēls) fetchFiltersWithQry

6. attēls) ColumnID un CacheCalls

Ar katru no tiem ir daudz par ko runāt. Un, lai nojauktu kodu un izskaidrotu notiekošo, man vajadzēja nedaudz vairāk rakstīšanas vietas. Pievienots dokuments ServerCalls.gs koda sadalījumam

Šis dokuments ir iestatīts kā Google lietotņu skriptu dokumentācija un pat izveido saites uz līdzīgiem objektiem.

10. darbība: 3. darbība: HTML kods (Application.html)

Instructable dialoglodziņā HTML kods kļūst ļoti neapmierināts. Tāpēc, lūdzu, sekojiet līdzi iepriekš redzamajiem attēliem.

1) Lapas Application.html galvenē mēs izveidojam nosaukumu un aicinām ielādēt mūsu CSS.html lapu.

*Tā kā veidne ir HTML lapa, mēs varam pievienot šim dokumentam vairāk koda, nepārblīvējot pašreizējo ekrānu, izmantojot iepriekš minēto iekļaušanas (pageName) metodi, kas atrodama vietnē Server Code.gs

Šajā attēlā ir atrodama arī galvenā galvenes kaste. Šeit varat mainīt galveni un ievadīt "[Jūsu vārds] drēbju skapi" vai jebkuru citu, ko vēlaties atpazīt.

2) Tieši zem galvenes ir mūsu augšējā navigācijas josla.

Šī navigācijas josla ietver visus rakstu veidus, kas uzskaitīti rakstu lapā mūsu Google izklājlapās.

Tiek izsaukta iekļautā funkcija, lai ielādētu šo vienumu masīvu. Pēc tam tiek palaista cilpa, lai iekļautu katru no šīm opcijām kā izvēlnes pogu, papildinot ar darbības kodu, tādēļ, kad lietotājs noklikšķina uz izvēlnes pogas, attiecīgie vienumi parādīsies ķermeņa zonā.

3) Galvenais korpuss.

Šajā daļā ir 4 porcijas. Teksta izvade, sānjoslas filtrs, pamatteksta attēli un JS ietver.

Teksta izvade ļauj lietotājam redzēt ātru teksta skatu par to, kāda veida vienumus viņš pašlaik skatās, nevis atsaukties uz izvēlēto izvēlnes opciju.

Sānjoslas filtrā ir daudz filtru, kas pieejami lietotāja atlasītajam vienuma veidam. Šie filtri atspoguļo visas šai kategorijai pieejamās iespējas, kā arī to, cik vienumu ietilpst šīs kategorijas vērtībā. Šī sānjosla ir aizpildīta ar JavaScript kodu (kas tiks apspriests turpmāk).

Galvenais pamatteksts pašlaik ir tukšs, taču tāpat kā filtri tiks aizpildīti ar vienumu lodziņiem, kuros sīki aprakstīts vienuma ID, krāsa, lielums un atrašanās vieta, un attēls tiks iekļauts, tiklīdz lietotājs būs izvēlējies kategoriju un JavaScript kods aizpildīs šo apgabalu.

Visbeidzot ietver (JS), apskatīsim to nākamajā solī.

11. darbība: 4. darbība: JavaScript kods (JS.html)

Ja domājat, ka servera kods ir smaga sadaļa, ielādējiet to.

Šeit mēs apvienojam HTML un SeverCode ar lietotāju mijiedarbību. Jebkurš uzklikšķinātais vienums ir jāapstrādā šeit, lai iegūtu pareizos datus un atgrieztu tos lasāmā formātā. Apskatīsim mūsu pirmos zvanus:

Skripts aicina: šim projektam izmantoju 3 dažādas bibliotēkas; jquery, bootstrap un īpašu bootstrap-select papildinājumu. Šīs bibliotēkas ļauj formatēt objektus un vieglāk izsaukt elementus HTML kodā.

Mana nākamā svarīgā JavaScript līnija ir zemāk:

$ (dokuments). keypress (funkcija (notikums) {if (event.which == '13') {event.preventDefault (); }});

Šeit es atspējoju taustiņu Enter, lai aktivizētu kādu no veidlapām. Tāpat kā šajā gadījumā Google tīmekļa lietotnēm tiek piešķirta tikai vienas lapas adrese. Ievadīšanas prese pievienos datus HTML adresei un mēģinās novirzīt lietotāju. To atspējojot, jūs ļaujat JavaScript kodam veikt visu darbu.

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

funkcija updateDBlocation (id, vērtība) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, vērtība); }

Šeit ir divas funkcijas, kas izsauc failu Server Code.gs. Līnija:

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

ir daudz darba daļu, bet skelets sakņojas no "google.script.run", kas HTML lapā norāda, ka serverī ir šāda funkcija.

• Šī koda pēdējais bits ir izpildāmā funkcija. Šajā piemērā ServerRemoveFilter ()
• Pievienojot kopā ar
• Tas pats attiecas uz withFailureHandler ()

Tagad, kad esam sadalījuši servera koda zvanu, īsumā ieskatīsimies, kas notiek, ja šie servera izsaukumi izdodas un neizdodas.

function allGood (e) {console.log ("Panākumi serverī"); } funkcija onFailure (kļūda) {$ ("#message-box"). html ("

Pašlaik nevar izgūt apģērba vienumus. KĻŪDA: " + error.message +"

");} funkcija FailDBUpdate (kļūda) {$ ("#message-box "). html ("

Jums nav piekļuves, lai mainītu atrašanās vietu. KĻŪDA: " + error.message +"

"); $ (". location-selects "). prop (" atspējots "," atspējots ");}

Es izveidoju ļoti vienkāršu konsoles žurnālu, lai apzīmētu panākumus, kad tiek palaista atrašanās vietas funkcija, ko varat redzēt kā allGood ().

Rīkojoties ar kļūdām, šīs divas funkcijas izvada kļūdas ziņojumu, kurā lietotājs var redzēt, izmantojot jQuery zvanu HTML objektam ar "ziņojuma lodziņa" ID.

Tagad ķersimies pie smaga darba

12. darbība: 5. darbība: JavaScript koda klikšķu darbības (JS.html)

Augšējā izvēlnes joslā ir iespējas katram raksta veidam. Funkcija, ko viņi izmanto, noklikšķinot, ir šāda:

funkcija filterType (raksts, id) {$ ("ul.navbar-nav li.active"). removeClass ("aktīvs"); $ ("#currentArticle"). html ("// HTML KODS ŠEIT");

updateSideBar = true;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Raksti", raksts); var newSelect = "#type-"+id; $ (newSelect).addClass ("aktīvs"); $ ("#myNavbar"). removeClass ("in"); }

Šajā kodā mēs redzam, ka mums ir google.script.run, kas aicina uz serveri, lai izgūtu informāciju. Šī izsaukuma veiksmes funkcija ir updateItems ().

1. ATTĒLS (ja šajā funkcijā ir smags HTML kods, ir grūti stingri kopēt kodu, šajā lodziņā neradot jucekli)

UpdateItems () kodā notiek daudzas lietas. Vēlreiz mums ir jāšķērso objekts , kas mums tika atgriezts, un jāpievieno katrs vienums galvenajai pamatlapai.

HTML kods tiek pievienots kā masīvs, lai sadalītu kodu un atvieglotu lasīšanu un redzētu, kur tiek ievietots itemData.

Katra vienuma cilpā es noņemu laukus, kurus nevēlos redzēt aprakstā, piemēram, noklusējuma, laika zīmogu un attēla URL. Es noņemu attēla URL no apraksta, jo tas tiek pievienots tagam kā href. Kad šī informācija ir apkopota, tā tiek nosūtīta uz galveno pamattekstu, izmantojot funkciju jQuery.append ().

Kad visi vienumi ir pievienoti lapai, šis vienumu vaicājums tiek vēlreiz nosūtīts uz servera kodu, lai kārtotu un atgrieztu filtra opcijas, kā parādīts 2. attēlā.

2. ATTĒLS (sānu joslas atjaunināšana)

Ļoti līdzīgi funkcijai updateItems (), mums atkal ir HTML koda masīvi un cilpa visām filtra opcijām. Vienīgās ievērojamās izmaiņas ir jQuery.selectpicker ('atsvaidzināt'). Šī funkcija nāk no skriptu bibliotēkas, kuru mēs iekļāvām pēdējā solī. Tas ļauj programmētājam uzrakstīt vienkāršu atlasītu HTML un ļaut bibliotēkai to atjaunināt, iekļaujot meklēšanas funkciju, kā arī CSS kodu.

3. ATTĒLS (filtrēšana ar sānjoslu)

Visbeidzot, mums ir funkcija updateFilter (formData). To izmanto, ja veidlapa tiek iesniegta no sānjoslas. Mēs sākam, izmantojot jQuery funkciju.serializeArray (), tas nolasa mūsu gadījumā veidlapā definētā elementa HTML kodu un atgriež vērtības virknē, kas jānosūta uz serveri. Un mēs sākam procesu no 1. attēla no jauna.

13. solis: beigas… visbeidzot

Nu tur jums tas ir; pilns un rūpīgs skaidrojums, lai palīdzētu jums izveidot savu tiešsaistes drēbju skapi vai izmantot funkcionalitāti, kas izveidota manos Google skriptos, lai paplašinātu savu projektu.

Tas ir bijis ceļojums, kodējot šo projektu (un dokumentējot, izmantojot šo pamācību), bet man ir paticis process un ceru, ka jums patiks produkts. Es labprāt uzklausītu ikvienu, kurš veic korekcijas, kā Maikls Džordans saka: "Griesti ir jumts", un es piekrītu, ka šai lietojumprogrammai nav ierobežojumu.