Organisador sa wardrobe: 13 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:13

Kung pamimili man ng damit o palaging hinihiling na manghiram ng anumang item, may mga oras na nais mong masilip mo ang iyong aparador mula sa kahit saan upang makita kung mayroon kang katulad na katulad. Ginagawa lamang iyon ng Wardroom Organizer AT Dagdag pa!

Ito ay isang one stop shop at malawak para sa maraming iba pang mga layunin. Ang Aking Wardrobe Organizer ay isang kumbinasyon ng Google Sheets bilang isang database ng SQL, Google Script para sa paghawak ng data, at Google WebApp para sa isang online portal sa data na ito. Maaaring makita ng end user ang lahat ng mga item, mag-filter para sa isang tukoy na bagay, markahan ang mga item bilang utang, pamahalaan ang kanilang paglalaba, at pigilan ang ina mula sa pagbili sa iyo ng parehong shirt para sa Pasko bawat taon *.

(* Walang Garantiyang. Bibili ang mga ina kung ano ang gusto nila kailangan mo ito o hindi)

Ang isang mabilis na pagsulyap sa disenyo ng website sa imahe sa itaas, maaaring makilala ng isang pamilyar na layout. Ang Wardrobe Organizer ay naka-set up tulad ng anumang ordinaryong website ng damit. Nasira ng mga kagawaran sa itaas at mga filter na ibinigay sa gilid, nagdadala ang interface na ito ng pamilyar sa pagpapaandar sa kaswal na gumagamit. AT simpleng gamitin ito.

Hakbang 1: Pag-set up ng Iyong Sariling Kopya

Magsimula tayo sa pamamagitan ng paglikha ng iyong sariling kopya ng proyektong ito.

Google Drive

Mag-click sa itaas na Link upang dalhin ka sa aking kasalukuyang bersyon ng application na ito.

Makakakita ka ng 3 mga item sa folder na ito: Isang Google Form, isang Google Sheet, at isang Folder.

Mag-right click sa Google Sheet at i-click ang Gumawa ng Isang Kopya.

Itakda ang Lokasyon ng kopya na ito sa iyong sariling Drive.

Matapos makopya ang dokumentong ito, awtomatikong mabubuo ang Google Form sa parehong folder na inilipat mo ang Google Sheet.

Upang likhain ang Folder (kinakailangan ito para sa pagkolekta ng mga pag-upload ng mga larawan ng item), i-click ang kinopyang Google Form at lilitaw na isang prompt na humihiling sa iyo na ibalik ang lokasyon ng folder para sa mga pag-upload.

Mayroon ka na ngayong isang kopya ng dokumentong ito upang gumana para sa iyong sarili!

Hakbang 2: Pangkalahatang-ideya ng Form ng Google

Ngayon na mayroon ka ng iyong sariling bersyon ng application na ito, tingnan natin ang paligid.

Ang iyong Google Form ay naka-set up upang tanggapin ang maraming iba't ibang mga uri ng item. Gayunpaman ang mga kamiseta, pantalon, damit, at sapatos lahat ay may magkakaibang mga limitasyon sa sukat. Samakatuwid ang isang iba't ibang seksyon ng form na ito ay mapupunan batay sa departamento na iyong isasampa ang iyong item sa ilalim. Sa aking template na (Lalaki na Artikulo) lumikha ako ng 5 magkakaibang mga kategorya ng sukat. (Para sa Mga Artikulo ng Pambabae, mag-click dito, maraming iba pa).

Sa ilalim ng bawat seksyon ng sukat, nagtaguyod ako ng isang natatanging pamagat para sa bawat parameter na kokolektahin ko. Hindi namin nais na magkaroon ng maraming mga haligi sa aming database na may pangalang "Laki" o hindi namin matukoy kung aling uri ng mga damit ang nalalapat sa laki na iyon.

Sa pagtatapos ng bawat seksyon, nakadirekta ang gumagamit sa huling bahagi ng form na ito: Lokasyon. Personal kong pinili na idagdag ang Lokasyon upang matukoy ang mga item sa mga Dry Cleaner, sa paglalaba, sa kanilang lugar o sa mga item kung saan pinayagan kong manghiram ang isang kaibigan. Pinapayagan akong maging maayos at hindi kailanman pakiramdam na nawawala ako ng isang piraso ng damit sa kung saan.

Tulad ng nabanggit ko mula sa simula, ang proyektong ito ay maaaring mapalawak sa isang milyong iba't ibang mga paraan. Maaari mo itong magamit para sa imbentaryo, isang mas tumpak na tool sa organisasyon, o para sa mahigpit na paghiram ng mga damit. Ang mga patlang at seksyon na maaari mong idagdag ay walang hanggan kaya huwag pakiramdam limitado sa kung ano ang nasa aking form. (Para sa Mga Artikulo ng Pambabae mag-click dito)

Bago ka mag-upload ng ilan sa iyong sariling mga item, magpatuloy tayo sa susunod na hakbang upang matiyak ang wastong pagsumite.

Hakbang 3: Mga Google Script: (Server Code.gs) Unang Tingnan ang Data at Code

Ang pag-click sa dokumento ng Google Sheets, makikita mo ang maraming mga haligi ng data (at ilang mga hilera, naiwan para sa pagpapakita). Sa panahon ng pagsusumite ng form ilang mga seksyon ay nilaktawan, maliwanag ito mula sa nawawalang data sa ilang mga haligi. Ngunit ang mga karagdagang haligi tulad ng ID, Default na Lokasyon, Sino, at Nai-update ay naidagdag upang mas mahusay na subaybayan ang mga pag-edit ng mga item na ito.

Nilikha ang isang patlang ng ID nang isumite mo ang form upang payagan ang isang natatanging pagkakakilanlan kapag binabagtas ang database na ito. Upang likhain ang patlang na ito, titingnan namin ang Script Editor sa pamamagitan ng pag-click sa Mga Tool> Script Editor.

Sa pagbukas ng Script Editor, mapapansin mo ang 8 mga dokumento sa sidebar ng bagong window. Tumutulong ang mga dokumentong ito na makontrol ang proseso ng back-end, mga pagpapakita sa harap at pag-andar sa harap. Tatalon kami sa bawat isa (kung dumikit ka) ngunit sa ngayon ay mag-click sa Server Code.

Sa file ng Server Code.gs maraming mga pagpapaandar:

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

onSubmit (e) - Ang pagpapaandar na ito ay mai-configure bilang unang pagpapaandar na tatakbo kapag nagsumite ang isang Google Form. Maaari kang maglagay ng iba pang mga pagpapaandar sa loob ng pagpapaandar na ito upang payagan ang maraming magkakaibang proseso na mangyari.

onOpen (e) - Ang pagpapaandar na ito ay tinatawag kapag binuksan ang Google Sheets. Nagpupuno ito ng isang bagong pagpipilian sa menu upang payagan ang mabilis na pag-access sa mga link at view ng application.

doGet () - Ang pagpapaandar na ito ay tinatawag sa Web App address na tawag. Kapag nag-browse ang isang gumagamit sa nai-publish na Web App sasabihin ng code na ito sa pahinang iyon kung ano ang ipapakita. Sa kasong ito, ito ang dokumento Application.html.

isama ang (fileName) - Ginagamit ang pagpapaandar na ito sa loob ng mga pahina ng HTML upang basahin ang iba pang dokumento at ipasok ang kanilang mga nilalaman sa isang tamang format ng HTML sa loob ng isa pang pahina. Ginagamit namin ito para sa aming mga file na CSS.html at JS.html.

openApplication () at openLaundryApp () - Naglalaman ang mga pagpapaandar na ito ng code upang tumakbo kapag nag-click ang isang gumagamit sa mga pindutan ng menu na idinagdag sa toolbar ng Google Sheet.

ChangeValueOnSubmit (e) at setIDOnSubmit (e) - Ito ang mga pagpapaandar na titingnan natin para sa ngayon. Responsable sila para sa pag-update ng ilang mga patlang na may mga default na halaga kapag ang form ay unang naisumite.

Hakbang 4: Paganahin ang OnFormSubmit

Ang dalawang pag-andar na ito, ang changeValueOnSubmit (e) at setIDOnSubmit (e), ay kailangang maugnay sa pagkilos ng gumagamit ng pagsusumite ng isang form. Upang magawa ito kailangan naming paganahin ang isang Trigger.

Pinapagana namin ang pag-trigger sa pamamagitan ng pag-click sa I-edit> Mga pag-trigger ng kasalukuyang proyekto. Bubukas nito ang Google Developer Hub.

Sa kanang sulok sa ibaba ng dash dashboard ay may isang pindutang Magdagdag ng isang gatilyo. Pindutin dito.

Kami ay magse-set up ang pagpapaandar upang tumakbo kapag ang isang form ay isinumite. Sa aming kaso mayroon akong maraming mga pagpapaandar (changeValueOnSubmit (e) at setIDOnSubmit (e)) na inilagay ko sa loob ng isang onSubmit () na pagpapaandar kaya kailangan ko lamang i-set up ang 1 gatilyo. Samakatuwid pipiliin namin ang onSubmit () at itatakda ang trigger na ito upang tumakbo Sa pagsumite ng form.

Mayroon kaming isang gumaganang form na magpapuno ng isang Google Sheet na may mga natatanging pagkakakilanlan at magtatakda ng mga default na halaga.

Maaari mo na ngayong i-upload ang iyong sariling mga item gamit ang Google Form. (Hindi ito kinakailangan upang magpatuloy dahil mayroon nang mga halagang demo sa). Sumisid kami ngayon sa interface ng gumagamit.

Hakbang 5: Pag-set up ng User Interface

WELCOME! Narating na namin sa wakas ang bahaging iyong pinuntahan, ang User Interface !!!!

Sa unang tingin, wala dito. Wala pa kaming tawag. Upang mas mabilis na mai-load ang pahina nagpasya akong huwag saktan ang unang pahina sa LAHAT ng iyong mga item at payagan kang i-click kung ano ang nais mong makita nang mas mabilis. Dahil ito ang kaso walang mga item sa pangunahing patlang ng nilalaman at walang mga filter sa sidebar. Mag-click tayo sa Lahat upang makita kung ano ang nasa aming database.

Na-load na namin ang bawat item sa aming database sa pangunahing patlang ng nilalaman. Makakakita ka ng mga larawan, numero ng ID, kulay, laki, at lokasyon. Maaaring mai-update ang patlang ng lokasyon dito mismo! Kung magpasya kang ipahiram ang item na maaari mong piliin ang opsyong iyon, maaari mo itong ilagay sa iyong aparador, aparador, o paglalaba.

At sa aming sidebar mayroon kaming bawat posibleng patlang para sa bawat item sa damit sa aming bagong query. Isipin lamang ang pagkakaroon ng 20 magkakaibang mga pagpipilian sa sukat sa sidebar na ito, hindi ito magiging epektibo, kaya't paliitin natin ang ating paghahanap sa pamamagitan ng pag-click sa Mga Kagamitan.

Ngayong na-load na namin ang Mga Kagamitan, tingnan ang sidebar. Naayos ito sa 3 mga patlang lamang, dahil ito ang mga parameter na nalalapat sa bawat item sa query na ito. Gagawa ako ng isang uri ayon sa kulay. Sa pamamagitan ng pag-click sa kulay, lilitaw ang isang drop down box. Dito maaari kong mai-type ang kulay na gusto ko at pagkatapos ay piliin ito, o kung nakikita ko kaagad ang aking pagpipilian i-click ko lang ito. Pinili ko ang Red para sa demonstrasyong ito. I-click ang Ilapat ang Filter sa ilalim ng sidebar na ito at ang pangunahing nilalaman ay i-refresh ang pagpapakita sa iyo ng mga item na may kulay na Pulang itinakda bilang kanilang parameter ng kulay.

Nauna kong nabanggit ang database na ito ay tumutulong sa akin na pamahalaan ang aking mga item sa utang at sa aking paglalaba. Upang gawing mas madali ito, sa halip na manu-manong pag-click sa bawat lokasyon ng dropdown sa pangunahing pahina na ito ay nilikha ko ang Mode sa Paglaba. Bumalik sa pahina ng Google Sheet at sa ilalim ng View ng App makikita mo ang Mode ng Paglaba. Ang opsyong ito ay kukuha ng isang mas maliit na modal na nagpapakita lamang ng mga item na may lokasyon ng Labahan. Maaari ko na ngayong markahan ang lahat ng mga item na ito bilang Default na ibabalik ang mga ito sa kanilang mga lokasyon na karaniwang nakaimbak sa kanila.

Hakbang 7: Nakumpleto ang Proyekto

CONGRATS

Para sa iyo na nais lamang ng isang gumaganang database upang pamahalaan ang iyong mga item, maligayang pagdating sa iyong Online Organizer. Para sa mga usisero na interesado sa code sa likod ng application na ito. Dumikit habang pinaghiwalay ko ito.

* Malaya kang tanggalin ang mga item sa pagsubok PAGKATAPOS ipasok mo ang hindi bababa sa isa sa iyong sariling mga item sa database. (Ipapaliwanag ko mamaya kung dumikit ka).

Hakbang 8: Hakbang 1: ang Back-End Code (Server Code.gs)

Mas maaga naming binuksan ang file ng Server Code.gs at binigyan ko ng mabilis na pagbaba ang bawat isa sa mga pag-andar dahil ang layunin nila ay upang maihatid ang bawat isa sa mga item na na-set up mo lamang ngunit ngayon ay sisirain namin ang ilan sa mga pagpapaandar at kagamitan na tinawag upang maging matagumpay ang code na ito.

1) Pagdaan sa talahanayan:

var ss = SpreadsheetApp.getActiveS nyebarsheet (); var sheet = ss.getSheetByName ("Mga Tugon sa Form 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Ang code na ito ay isang batayan para sa pagdaan sa isang Google Sheet. Tinatawag ko ang sheet sa pamamagitan ng pangalan kaysa sa numero upang kung ang mga sheet ay tinanggal o muling binago ng pagpapaandar ay maaari pa ring gumana nang maayos.
• Sa code na ito kinokolekta ko lamang ang Saklaw para sa lahat ng data sa talahanayan.

2) Pagtatalaga ng isang ID:

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

• Dati kong hiniling na ang mga halaga ng demo ay maiiwan sa talahanayan hanggang sa ang gumagamit ay nagsumite ng kahit isang halaga para sa kanilang sarili. Ito ay dahil ang generator ng Auto ID ay umaasa sa huling halaga sa database upang mamuhay.
• Kinuha ko ang huling ika-2 hanggang huling hilera dahil ang huling hilera ay ang aming bagong halaga at ang ika-1 haligi para sa halaga ng ID.
• Pagkatapos ay random akong bumuo ng isang numero sa pagitan ng 5 at 15 at idagdag ito sa huling halaga. *
• Sa wakas inilalagay ko ang halagang ito sa haligi ng ID ng huling hilera.
• Susunod na tawagan namin ang pagpapaandar na ChangeValueOnSubmit (e).

* Pinili ko ang 5-15 upang payagan ang pag-label sa hinaharap at pagsasama ng Google Home upang ang mga numero ay hindi malapit nang malapit upang magdulot ng pagkalito sa mga hanger o mga tag ng damit o barcode.

3) Pagbabago ng Halaga ng URL:

var DataChange = e.namedValues ["Larawan ng Item"]; var DefaultLocation = e.namedValues ["Saan mo iniingatan ang artikulong ito ng damit?"]; var ColD = ColumnID _ ("Larawan ng Item") +1; var ColLoc = ColumnID _ ("Default na Lokasyon") + 1; DataChange = DataChange.toString (). palitan ("bukas?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Kapag nagsumite ng isang larawan sa pamamagitan ng isang Google Form ang URL na ipinasok sa Google Sheets ay isang link sa aktwal na dokumento. Sa aming kaso, habang lumilikha kami ng isang pahina ng HTML nais namin ang link na maging imahe lamang.
• Sa pamamagitan ng pagbabago ng "bukas?" bahagi ng URL sa "uc? export = view &" sa halip ay gumawa kami ng isang link sa imahe.
• Ilalagay namin muli ang bagong halagang ito sa lokasyon ng kasalukuyang link ng Item Larawan.
• Inaayos ko rin ang "Default na Lokasyon" at "Kasalukuyang Lokasyon" ng item sa parehong bagay sa database. Makakatulong ito kapag sinusubukang gamitin ang aking Labahan Mode.

• Kami ay sumisid dito sa susunod na pahina ngunit ito ang aming unang tingin sa ColumnID_ () function na aking nilikha.

  Gumagamit ang pagpapaandar na ito ng Mga Pangalan ng Haligi upang isalin ito sa integer ng haligi na kapaki-pakinabang para sa Saklaw na pagtawag na nangangailangan ng isang numero ng haligi sa halip na pangalan

4) SpreadsheetApp.getUI ()

• Sa pangalawang imahe maaari mong makita ang paggamit ng SpreadsheetApp.getUI () tulad ng ginamit nito upang lumikha ng isang pagdaragdag ng Toolbar Menu sa Google Sheet.
• Ang pagpapaandar ng.getUI () ay tumutulong din na lumikha ng isang modal popup na ginagamit para sa Laundry mode at bilang isang mabilis na link sa interface ng website.

5) HTMLService

• Mayroong dalawang uri ng HTMLServices na ginamit sa code na ito: Template at HTMLOutput
• Pinapayagan ng template na maipasok ang code sa loob ng HTML code kaya't ang impormasyon na nagmumula sa isang server ay maaaring mapunan kapag tinawag ang pahina.
• Nagpapakita ang HTML Output ng mga simpleng pahina ng HTML.
• Mayroon din kaming kasamang () pamamaraan na nagbibigay-daan sa amin upang lumikha ng maraming mga HTML file at pagsamahin ang mga ito sa isang naka-template na HTML file sa pamamagitan ng pagbabalik ng mga nilalaman ng file sa isang format na HTML sa halip na isang string.

Nag-attach ako ng isang naka-set up na dokumento tulad ng Google App Scripts Documentation upang makapagdulot ng pamilyar sa kung paano ipinaliwanag ang source code at pagpapaandar sa loob ng Google Apps.

Hakbang 9: Hakbang 2: ang Back-End Code na Bahagi 2 (Mga Tawag sa Server.gs)

Ngayon ay nakapasok kami sa Server Calls.gs. Ang mga pagpapaandar na ito ay pangunahing ginagamit sa HTML JavaScript kaya't pinaghiwalay sila mula sa code na pangunahing ginagamit sa likurang dulo na matatagpuan sa Server Code.gs.

Larawan 1) Mga Pandaigdigang Variable:

Larawan 2) pagkuha ng Mga Item:

Larawan 3) fetchItemsQry

Larawan 4) mga filter na Item

Larawan 5) fetchFiltersWithQry

Larawan 6) ColumnID, at CacheCalls

Napakaraming mapag-uusapan sa bawat isa sa mga ito. At upang masira ang code at maipaliwanag kung ano ang nangyayari kailangan ko ng kaunting puwang sa pagta-type. Nakalakip ay isang dokumento para sa pagkasira ng code ng ServerCalls.gs

Ang dokumentong ito ay na-set up tulad ng Google App Scripts Documentation at gumagawa pa rin ng mga link sa mga katulad na bagay.

Hakbang 10: Hakbang 3: ang HTML Code (Application.html)

Ang HTML code ay napakasaya sa loob ng dialog box ng isang Instructable. Kaya mangyaring sundin kasama ang mga larawan sa itaas.

1) Sa header ng pahina ng Application.html nagtataguyod kami ng isang pamagat at tumawag sa aming pahina ng CSS.html upang mai-load.

* Ang pagiging isang naka-template na pahina ng HTML, maaari kaming magdagdag ng higit pang code sa dokumentong ito nang hindi kalat ang kasalukuyang screen sa pamamagitan ng paggamit ng dating nabanggit na isama (pahinaName) na pamamaraan na matatagpuan sa Server Code.gs

Ang pangunahing kahon ng header ay matatagpuan din sa larawang ito. Maaari mong baguhin ang header dito at ipasok ang "[Your Name] 'Ward ward" o kung ano pa ang nais mong kilalanin ang pahinang ito bilang.

2) Sa ibaba lamang ng header ay ang aming nangungunang bar sa nabigasyon.

Kasama sa nabigasyon na bar na ito ang lahat ng mga uri ng artikulo tulad ng nakalista sa sheet ng Artikulo sa loob ng aming Google Sheets.

Ang isang pagpapaandar na linya ay tinawag upang kumuha ng isang hanay ng mga item na ito. Pagkatapos ay pinatakbo ang isang loop upang isama ang bawat isa sa mga pagpipiliang ito bilang isang pindutan ng menu, kumpleto sa isang code ng pagkilos kaya kapag nag-click ang isang gumagamit sa pindutan ng menu, lilitaw ang kani-kanilang mga item sa lugar ng katawan.

3) Ang pangunahing katawan.

Mayroong 4 na bahagi sa bahaging ito. Isang output ng teksto, ang sidebar filter, ang pangunahing mga imahe ng katawan, at kasama ang JS.

Pinapayagan ng output ng teksto ang gumagamit na makakita ng isang mabilis na pagtingin sa teksto para sa kung anong uri ng mga item ang kasalukuyang tinitingnan nila sa halip na mag-refer sa pagpipilian ng menu na pinili nila.

Naglalaman ang filter ng sidebar ng maraming filter na magagamit para sa uri ng item na napili ng isang gumagamit. Ang mga filter na ito ay sumasalamin sa lahat ng mga pagpipilian na magagamit para sa kategoryang ito pati na rin kung gaano karaming mga item ang nahulog sa ilalim ng halagang kategorya. Ang sidebar na ito ay pinunan ng JavaScript code (na tatalakayin sa susunod).

Ang pangunahing katawan ay kasalukuyang walang laman, ngunit tulad ng mga filter ay punan ito ng mga kahon ng item na nagdedetalye sa ID, Kulay, Sukat, at Lokasyon ng Item na may kasamang isang imahe sa sandaling pumili ang gumagamit ng isang kategorya at ang JavaScript Code ay pumupuno sa lugar na ito.

Sa wakas ang kasamang (JS), tingnan natin ito sa susunod na hakbang.

Hakbang 11: Hakbang 4: ang JavaScript Code (JS.html)

Kung naisip mo na ang Server Code ay isang mabibigat na seksyon kumuha ng isang pag-load ng ito.

Pinagsasama namin ang aming HTML at SeverCode sa mga pakikipag-ugnayan ng gumagamit. Ang anumang item na na-click ay dapat na maproseso dito upang makuha ang tamang data at ibalik ito sa isang nababasa na format. Tingnan natin ang ating mga unang tawag:

Ang mga tawag sa script: Gumagamit ako ng 3 magkakaibang mga aklatan para sa proyektong ito; jquery, bootstrap, at isang espesyal na add-on na select ng bootstrap. Pinapayagan ng mga silid-aklatan para sa pag-format ng mga bagay at mas madaling mga tawag sa mga elemento sa loob ng HTML code.

Ang aking susunod na mahalagang linya ng JavaScript ay nasa ibaba:

$ (dokumento).keypress (pagpapaandar (kaganapan) {kung (event.which == '13') {event.preventDefault (); }});

Narito ko pinapagana ang enter key mula sa pagpapalitaw ng alinman sa mga form. Tulad ng sa kasong ito ang Google Web Apps ay nakatalaga lamang sa kanilang isang pahina ng address. Ang isang enter press ay magdaragdag ng data sa HTML address at subukang i-redirect ang gumagamit. Sa pamamagitan ng hindi pagpapagana nito, pinapayagan mo ang iyong JavaScript code na gawin ang lahat ng gawain.

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

pagpapa-updateDBlocation (id, halaga) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, halaga); }

Narito ang dalawang pagpapaandar na tumatawag sa file ng Server Code.gs. Ang linya:

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

ay may maraming gumaganang bahagi dito ngunit ang balangkas ay na-root mula sa "google.script.run" na nagsasabi sa pahina ng HTML ang sumusunod na pagpapaandar ay nasa server.

• Ang huling piraso ng code na ito ay ang pagpapaandar upang tumakbo. Sa halimbawang ito ServerRemoveFilter ()
• Sa pamamagitan ng pagdaragdag ng isang withSuccessHandler () alam ng pahina ng HTML ngayon kung ano ang gagawin sa data na naibalik, at ito ay upang patakbuhin ang pagpapaandar sa panaklong.
• Nalalapat ang pareho sa withFailureHandler ()

Ngayon na pinaghiwalay namin ang tawag sa Server Code, tingnan natin nang mabilis kung ano ang mangyayari kapag nagtagumpay at nabigo ang tawag sa server na ito.

function allGood (e) {console.log ("Tagumpay sa server"); } function onFailure (error) {$ ("# message-box"). html ("

Hindi magawang Kumuha ng Mga Item sa Damit sa ngayon. ERROR: "+ error.message +"

");} function FailDBUpdate (error) {$ (" # message-box "). html ("

Wala kang access upang baguhin ang lokasyon. ERROR: "+ error.message +"

"); $ (". pipiliin ang lokasyon "). prop ('hindi pinagana', 'hindi pinagana');}

Lumikha ako ng isang napaka-simpleng log ng console upang mag-signify ng tagumpay kapag ang pagpapaandar ng lokasyon ay pinatakbo na maaari mong makita bilang allGood ().

Kapag hinahawakan ang mga error, ang dalawang pag-andar na ito ay naglalabas ng mensahe ng error kung saan maaaring makita ng gumagamit sa pamamagitan ng paggamit ng isang jQuery na tawag sa HTML na object na may isang ID ng "message-box".

Bumaba tayo ngayon sa masamang gawain

Hakbang 12: Hakbang 5: ang Mga Pagkilos na Pag-click sa JavaScript Code (JS.html)

Ang nangungunang menu bar ay may mga pagpipilian para sa bawat uri ng artikulo. Ang pagpapaandar na pinapatakbo nila sa pag-click ay:

function filterType (artikulo, id) {$ ("ul.navbar-nav li.active"). alisin angClass ("aktibo"); $ ("# kasalukuyangArticle"). html ("// HTML CODE DITO");

updateSideBar = totoo;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Mga Artikulo", artikulo); var newSelect = "#type -" + id; $ (newSelect).addClass ("aktibo"); $ ("# myNavbar"). alisin angClass ("sa"); }

Maaari naming makita sa code na ito mayroon kaming isang google.script.run na tumatawag sa Server upang makuha ang impormasyon. Ang pagpapaandar ng tagumpay para sa tawag na ito ay ang pag-update ng Mga Item ().

PICTURE 1 (kasama ang mabibigat na HTML code sa loob ng pagpapaandar na ito ay mahirap makopya nang mahigpit ang code, nang hindi lumilitaw ang isang gulo sa kahon na ito)

Sa updateItems () code, marami kaming mga bagay na nangyayari. Muli dapat kaming dumaan sa pamamagitan ng Bagay na naibalik sa amin at idagdag ang bawat item sa aming pangunahing pahina ng katawan.

Ang HTML code ay idinagdag bilang Mga Array upang masira ang code at gawing mas madaling basahin at makita kung saan ipinapasok ang itemData.

Sa loop ng bawat item, tinatanggal ko ang mga patlang na hindi ko nais na makita sa paglalarawan tulad ng Default, timestamp, at larawan URL. Inalis ko ang URL ng larawan mula sa paglalarawan dahil idinagdag ito bilang href sa isang tag sa halip. Kapag naipon ang impormasyong ito ipinapadala ito sa pangunahing katawan gamit ang jQuery.append () function.

Matapos ang lahat ng mga item ay naidagdag sa pahina, ang query ng mga item na ito ay ipinadala muli sa Server Code upang ayusin at ibalik ang mga pagpipilian sa filter tulad ng nakikita sa Larawan 2.

PICTURE 2 (ina-update ang SideBar)

Kapareho sa pagpapaandar ng updateItems (), muli kaming may mga array ng HTML code at isang loop para sa lahat ng mga pagpipilian sa filter. Ang tanging kapansin-pansin na pagbabago ay ang jQuery.selectpicker ('refresh'). Ang pagpapaandar na ito ay nagmula sa script library na isinama namin sa huling hakbang. Pinapayagan nito ang programmer na magsulat ng isang simpleng piling HTML at hayaan itong i-update ng library upang maisama ang nahahanap na pagpapaandar pati na rin ang CSS code.

PICTURE 3 (pag-filter gamit ang sidebar)

Panghuli mayroon kaming pag-andar ng updateFilter (formData). Ginagamit ito kapag ang isang form ay isinumite mula sa sidebar. Nagsisimula kami sa pamamagitan ng paggamit ng isang jQuery function.serializeArray () binabasa nito ang HTML code ng elemento na tinukoy sa aming kaso isang form, at ibabalik ang mga halaga sa isang string na maipapadala sa server. At sinisimulan namin muli ang proseso mula sa Larawan 1 nang muli.

Hakbang 13: Ang Wakas…. Panghuli

Sa gayon mayroon ka nito; isang buo at masusing paliwanag upang matulungan kang mag-set up ng iyong sariling online wardrobe, o magamit ang pagpapaandar na nilikha sa aking Google Script upang mapalawak ang iyong sariling proyekto.

Naging isang paglalakbay sa pag-coding sa proyektong ito (at pagdodokumento sa pamamagitan ng Instructable na ito) ngunit nasiyahan ako sa proseso at inaasahan kong masisiyahan ka sa produkto. Gusto kong marinig mula sa sinumang gumawa ng mga pagsasaayos tulad ng sinabi ni Michael Jordan na "Ang kisame ay ang bubong" at sang-ayon ako na ang application na ito ay walang mga limitasyon.