Organizuesi i gardërobës: 13 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:19

Pavarësisht nëse bëhet fjalë për blerjen e rrobave ose për të kërkuar gjithnjë hua për ndonjë send, ka raste që dëshironi të shikoni në dollapin tuaj nga kudo për të parë nëse keni diçka të ngjashme. Organizatori i gardërobës bën pikërisht këtë dhe më shumë!

Ky është një dyqan me një ndalesë dhe është i shtrirë për shumë qëllime të tjera. Organizuesi im i gardërobës është një kombinim i Google Sheets si një bazë të dhënash SQL, Google Scripts për trajtimin e të dhënave dhe Google WebApp për një portal online të këtyre të dhënave. Përdoruesi përfundimtar mund të shohë të gjithë artikujt, të filtrojë për diçka specifike, të shënojë artikujt si të huazuar, të menaxhojë rrobat e tyre dhe të ndalojë nënën që t'ju blejë të njëjtën këmishë për Krishtlindje çdo vit*.

(*Nuk ka garanci. Nënat do të blejnë atë që duan pavarësisht nëse ju nevojitet apo jo)

Duke hedhur një vështrim të shpejtë në hartimin e faqes në internet në imazhin e mësipërm, dikush mund të njohë një paraqitje të njohur. Organizuesi i gardërobës është krijuar si çdo faqe interneti e zakonshme e veshjeve. E ndarë nga departamentet lart dhe filtrat e ofruar në anën, kjo ndërfaqe sjell njohje me funksionalitetin tek përdoruesi i zakonshëm. DHE është e thjeshtë për t’u përdorur.

Hapi 1: Vendosja e kopjes suaj

Le të fillojmë duke krijuar kopjen tuaj të këtij projekti.

Google Drive

Klikoni në Lidhjen e mësipërme për t'ju çuar në versionin tim aktual të këtij aplikacioni.

Do të shihni 3 artikuj në këtë dosje: Një Formular Google, një Fletë Google dhe një Dosje.

Klikoni me të djathtën në Google Sheet dhe klikoni Make A Copy.

Vendosni Vendndodhjen e kësaj kopje në Diskun tuaj.

Pas kopjimit të këtij dokumenti, Formulari i Google do të gjenerohet automatikisht në të njëjtën dosje ku keni lëvizur Fletën e Google.

Për të krijuar Dosjen (kjo është e nevojshme për mbledhjen e ngarkimeve të fotografive të artikujve), klikoni në Formularin e kopjuar të Google dhe do të shfaqet një kërkesë që ju kërkon të rivendosni vendndodhjen e dosjes për ngarkime.

Tani keni një kopje të këtij dokumenti për të punuar për veten tuaj!

Hapi 2: Përmbledhje e formularit të Google

Tani që keni versionin tuaj të këtij aplikacioni, le të hedhim një vështrim përreth.

Formulari juaj i Google është krijuar për të pranuar shumë lloje të ndryshme artikujsh. Megjithatë këmisha, pantallona, fustane dhe këpucë të gjitha kanë kufizime të ndryshme të madhësisë. Prandaj, një seksion i ndryshëm i këtij formulari do të plotësohet bazuar në departamentin në të cilin paraqisni artikullin tuaj. Në modelin tim (Artikulli Mashkullor) kam krijuar 5 kategori të ndryshme të madhësive. (Për artikujt e grave, klikoni këtu, ka shumë të tjerë).

Nën secilën pjesë të madhësisë, krijova një titull unik për secilin parametër që do të mbledh. Ne nuk duam të kemi kolona të shumta në bazën tonë të të dhënave me emrin "Madhësia" ose nuk do të jemi në gjendje të përcaktojmë se për cilin lloj të rrobave vlen kjo madhësi.

Në fund të çdo seksioni, përdoruesi drejtohet në pjesën përfundimtare të këtij formulari: Vendndodhja. Unë personalisht zgjodha të shtoja Vendndodhjen për të përcaktuar artikujt në Pastruesit e Thatë, në lavanderi, në vendin e tyre ose ato sende në të cilat kam lënë një mik të marrë hua. Kjo më lejon të jem e organizuar dhe të mos ndihem kurrë sikur më mungon një copë veshje diku.

Siç e përmenda që në fillim, ky projekt mund të zgjerohet në një milion mënyra të ndryshme. Mund ta përdorni për inventarizim, një mjet organizimi më të saktë, ose për huazim të rreptë të rrobave. Fushat dhe pjesët që mund të shtoni janë të pafundme, kështu që mos u ndjeni të kufizuar në atë që është në formën time. (Për artikujt e grave klikoni këtu)

Para se të nisni të ngarkoni disa nga artikujt tuaj, le të kalojmë në hapin tjetër për të siguruar dorëzimin e duhur.

Hapi 3: Skriptet e Google: (Server Code.gs) Shikoni së pari të dhënat dhe kodin

Duke klikuar në dokumentin Google Sheets, do të shihni shumë kolona të të dhënave (dhe disa rreshta, të lënë për demonstrim). Gjatë dorëzimit të formularit disa seksione anashkalohen, kjo është e qartë nga të dhënat që mungojnë në disa kolona. Por kolona shtesë të tilla si ID, Vendndodhja e Parazgjedhur, Kush dhe Përditësuar janë shtuar për të ndjekur më mirë redaktimet e këtyre artikujve.

Një fushë ID është krijuar kur keni dorëzuar formularin për të lejuar një identifikues unik kur përshkoni këtë bazë të dhënash. Për të krijuar këtë fushë, ne do të hedhim një vështrim në Script Editor duke klikuar në Tools> Script Editor.

Me Script Editor të hapur, do të vini re 8 dokumente në shiritin anësor të kësaj dritareje të re. Këto dokumente ndihmojnë në kontrollin e procesit back-end, ekraneve front-end dhe funksionalitetit front-end. Ne do të hidhemi në secilën prej tyre (nëse qëndroni përreth), por tani klikoni në Kodin e Serverit.

Në skedarin Server. Code.gs ka shumë funksione:

onSubmit (e), onOpen (), doGet (), përfshini (emri i skedarit), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Ky funksion do të konfigurohet si funksioni i parë që do të ekzekutohet kur të dorëzohet një Formular Google. Ju mund të vendosni funksione të tjera brenda këtij funksioni për të lejuar që të ndodhin shumë procese të ndryshme.

onOpen (e) - Ky funksion thirret kur hapen Google Sheets. Ajo plotëson një opsion të ri të menusë për të lejuar qasje të shpejtë në lidhjet dhe pamjet e aplikacionit.

doGet ()- Ky funksion thirret në thirrjen e adresës së Web App. Kur një përdorues shfleton aplikacionin e publikuar në internet, ky kod do t'i tregojë asaj faqe se çfarë të shfaqet. Në këtë rast, është dokumenti Application.html.

përfshijnë (Emri i skedarit) - Ky funksion përdoret brenda faqeve HTML për të lexuar dokumente të tjera dhe për të futur përmbajtjen e tyre në një format të duhur HTML brenda një faqeje tjetër. Ne e përdorim atë për skedarët tanë CSS.html dhe JS.html.

openApplication () dhe openLaundryApp () - Këto funksione përmbajnë kodin që do të ekzekutohet kur një përdorues klikon në butonat e menysë të shtuar në shiritin e veglave të Google Sheet.

changeValueOnSubmit (e) dhe setIDOnSubmit (e)- Këto janë funksionet që do të shqyrtojmë tani për tani. Ata janë përgjegjës për azhurnimin e fushave të caktuara me vlera të paracaktuara kur formulari dorëzohet fillimisht.

Hapi 4: Aktivizimi i OnFormSubmit

Këto dy funksione, changeValueOnSubmit (e) dhe setIDOnSubmit (e), duhet të lidhen me veprimin e përdoruesit të paraqitjes së një formulari. Për ta bërë këtë, ne duhet të aktivizojmë një Shkaktues.

Ne e aktivizojmë shkaktarin duke klikuar Ndrysho> Shkaktarët aktualë të projektit. Kjo hap Qendrën e Zhvilluesve të Google.

Në këndin e poshtëm të djathtë të pultit të këmbëzës është një buton Shto një shkas. Kliko këtu.

Tani do të vendosim funksionin që të ekzekutohet kur të dorëzohet një formë. Në rastin tonë unë kam funksione të shumta (changeValueOnSubmit (e) dhe setIDOnSubmit (e)) që i vendos brenda një funksioni onSubmit () kështu që më duhet të vendos vetëm 1 shkaktues. Prandaj ne do të zgjedhim onSubmit () dhe do ta vendosim këtë shkas që të funksionojë On submit submit.

Tani kemi një formë pune që do të plotësojë një Fletë Google me identifikues unikë dhe do të vendosë vlera të paracaktuara.

Tani mund të ngarkoni artikujt tuaj duke përdorur Formularin Google. (Kjo nuk është e nevojshme për të vazhduar pasi tashmë ka vlera demo). Tani do të futemi në ndërfaqen e përdoruesit.

Hapi 5: Vendosja e Ndërfaqes së Përdoruesit

MIRCO SE VINI! Më në fund kemi arritur në pjesën për të cilën keni ardhur, Ndërfaqen e Përdoruesit !!!!

Në shikim të parë, këtu nuk ka asgjë. Ende nuk kemi bërë asnjë telefonatë. Për ta ngarkuar faqen më shpejt, vendosa të mos e pllakos faqen e parë me T ALL GJITHA artikujt tuaj dhe t'ju lejoj të klikoni atë që dëshironi të shihni më shpejt. Meqenëse ky është rasti, nuk ka artikuj në fushën kryesore të përmbajtjes dhe asnjë filtër në shiritin anësor. Le të klikojmë mbi Të gjithë për të parë se çfarë është në bazën tonë të të dhënave.

Tani kemi ngarkuar çdo artikull në bazën tonë të të dhënave në fushën kryesore të përmbajtjes. Do të shihni fotografi, numra ID, ngjyrë, madhësi dhe vendndodhje. Fusha e vendndodhjes mund të përditësohet pikërisht këtu! Nëse vendosni të huazoni artikullin, mund ta zgjidhni atë opsion, mund ta vendosni në dollapin tuaj, dollapin ose lavanderi.

Dhe në shiritin tonë anësor kemi çdo fushë të mundshme për çdo artikull veshjesh në pyetjen tonë të re. Vetëm imagjinoni të keni 20 opsione të ndryshme të madhësisë në këtë shirit anësor, nuk do të ishte shumë efektive, kështu që le të ngushtojmë kërkimin tonë duke klikuar Aksesorët.

Tani që kemi ngarkuar Aksesorët, hidhini një sy shiritit anësor. Ajo është përshtatur në vetëm 3 fusha, pasi këto janë parametrat që zbatohen për çdo artikull në këtë pyetje. Unë do të bëj një lloj sipas ngjyrës. Duke klikuar mbi ngjyrën, shfaqet një kuti zbritëse. Këtu ose mund të shkruaj ngjyrën që dua dhe pastaj ta zgjedh, ose nëse e shikoj opsionin tim menjëherë do ta klikoj atë. Zgjodha të Kuqen për këtë demonstrim. Klikoni Aplikoni filtrin në fund të kësaj shiriti anësor dhe përmbajtja kryesore do të rifreskohet duke ju treguar artikujt që kanë ngjyrën e Kuqe të vendosur si parametrin e tyre të ngjyrave.

Unë e përmenda më parë këtë bazë të dhënash më ndihmon të menaxhoj artikujt e mi me hua dhe në lavanderi. Për ta bërë pak më të lehtë, në vend që të klikoja me dorë çdo vend zbritës në këtë faqe kryesore, krijova Modalitetin e Lavanderisë. Kthehuni në faqen e Fletës së Google dhe nën Pamjen e Aplikacionit do të shihni Modalitetin e Lavanderisë. Ky opsion do të nxjerrë një modal më të vogël që tregon vetëm artikujt me vendndodhjen e Lavanderisë. Tani mund t'i shënoj të gjithë këta artikuj si të Parazgjedhur, i cili do t'i vendosë përsëri në vendet ku zakonisht ruhen.

Hapi 7: Projekti i Përfunduar

URIME

Për ata prej jush që duan vetëm një bazë të dhënash funksionale për të menaxhuar artikujt tuaj, mirë se vini në Organizatorin tuaj Online. Për ata mendje kurioze të interesuar për kodin pas këtij aplikacioni. Rrini rrotull ndërsa unë e prish atë.

*Ju jeni të lirë të fshini artikujt e testit PAS futjes së të paktën një prej artikujve tuaj në bazën e të dhënave. (Unë do të shpjegoj më vonë nëse qëndroni pranë).

Hapi 8: Hapi 1: Kodi Back-End (Server Code.gs)

Më parë ne hapëm skedarin Server Code.gs dhe unë dhashë një përshkrim të shpejtë të secilit prej funksioneve pasi qëllimi i tyre ishte t'i shërbente secilit prej artikujve që sapo krijuat, por tani ne do t'i zbërthejmë disa nga funksionalitetet dhe dobitë e quajtura për ta bërë këtë kod një sukses.

1) Kalimi i tabelës:

var ss = SpreadsheetApp.getActiveS spreadsheet (); var sheet = ss.getSheetByName ("Përgjigjet e Formularit 1"); var var = = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Ky kod është një bazë për të përshkuar një Fletë Google. Unë e quaj fletën me emër dhe jo me numër, në mënyrë që nëse fletët fshihen ose riorganizohen sipas funksionit, të mund të funksionojnë ende siç duhet.
• Në këtë kod unë jam duke mbledhur vetëm Range për të gjitha të dhënat në tabelë.

2) Caktimi i një ID:

var LastID = range.getCell (rowNum-1, 1); var CellValue = Numri (LastID.getValue ()); var ColA = 1; var max = 15; var min = 5; CellValue = CellValue + Math.round ((Math.andom ()* (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

• Më parë kam kërkuar që vlerat demo të lihen në tabelë derisa përdoruesi të ketë paraqitur të paktën një vlerë për veten e tij. Kjo ndodh sepse gjeneratori i Auto ID mbështetet në vlerën e fundit në bazën e të dhënave për tu mbushur.
• Unë marr rreshtin e fundit nga i dyti në të fundit sepse rreshti i fundit është vlera jonë e re dhe kolona e parë për vlerën e ID.
• Unë pastaj krijoj rastësisht një numër midis 5 dhe 15 dhe e shtoj atë në vlerën e fundit. *
• Më në fund e vendos këtë vlerë në kolonën ID të rreshtit të fundit.
• Tjetra ne e quajmë funksionin changeValueOnSubmit (e).

* Zgjodha 5-15 për të lejuar etiketimin e ardhshëm dhe integrimin në Google Home në mënyrë që numrat të mos jenë aq afër sa të shkaktojnë konfuzion në varëse rrobash ose etiketa veshjesh ose barkode.

3) Ndryshimi i vlerës së URL -së:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Ku e mbani këtë artikull veshjesh?"]; var ColD = ColumnID _ ("Figura e Artikullit") +1; var ColLoc = ColumnID _ ("Vendndodhja e paracaktuar")+1; DataChange = DataChange.toString (). zëvendësoj ("hapur?", "uc? eksport = shiko &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Kur dorëzoni një fotografi përmes një formulari Google, URL -ja e futur në Google Sheets është një lidhje me dokumentin aktual. Në rastin tonë, ndërsa po krijojmë një faqe HTML ne duam që lidhja të jetë vetëm imazhi.
• Duke ndryshuar "hapur?" një pjesë të URL -së për "uc? export = view &" ne kemi krijuar një lidhje me imazhin në vend.
• Ne do ta vendosim përsëri këtë vlerë të re në vendndodhjen e lidhjes aktuale të Artikullit Artikull.
• Unë jam gjithashtu duke vendosur "Vendndodhjen e paracaktuar" dhe "Vendndodhjen aktuale" të artikullit në të njëjtën gjë në bazën e të dhënave. Kjo do të ndihmojë kur përpiqeni të përdorni modalitetin tim të lavanderi.

• Ne do të zhyteni në të në faqen tjetër, por kjo është shikimi ynë i parë në funksionin ColumnID_ () që kam krijuar.

  Ky funksion përdor Emrat e Kolonave për ta përkthyer atë në numrin e plotë të kolonës, i cili është i dobishëm për thirrjen në rang që kërkon një numër kolone dhe jo emër

4) SpreadsheetApp.getUI ()

• Në imazhin e dytë mund të shihni përdorimin e SpreadsheetApp.getUI () siç ishte përdorur për të krijuar një shtesë të Menysë së Toolbar -it në Google Sheet.
• Funksioni.getUI () gjithashtu ndihmon në krijimin e një popup modal i cili përdoret për modalitetin Lavanderi dhe si një lidhje e shpejtë me ndërfaqen e faqes në internet.

5) Shërbimi HTML

• Ekzistojnë dy lloje të Shërbimeve HTML të përdorura në këtë kod: Template dhe HTMLOutput
• Modeli lejon që kodi të futet brenda kodit HTML në mënyrë që informacioni që vjen nga një server të mund të plotësohet kur faqja thirret.
• Dalja HTML shfaq faqe të thjeshta HTML.
• Ne gjithashtu kemi metodën përfshin () e cila na lejon të krijojmë skedarë të shumtë HTML dhe t'i kombinojmë ato në një skedar HTML të modeluar duke kthyer përmbajtjen e skedarit në një format HTML dhe jo në një varg.

Unë kam bashkangjitur një dokument të krijuar si Dokumentacioni i Shkrimeve të Aplikacioneve Google për të sjellë një njohje se si shpjegohen kodi burimor dhe funksionaliteti brenda Google Apps.

Hapi 9: Hapi 2: Kodi Back-End Pjesa 2 (Server Calls.gs)

Tani ne kemi futur Server Calls.gs. Këto funksione përdoren kryesisht në HTML JavaScript kështu që ato janë ndarë nga kodi që përdoret kryesisht në pjesën e pasme që ndodhen në Server Code.gs.

Figura 1) Ndryshoret globale:

Figura 2) marrja e artikujve:

Figura 3) fetchItemsQry

Figura 4) Artikujt e filtrit

Figura 5) marr FiltraWithQry

Figura 6) ColumnID, dhe CacheCalls

Ka shumë për të folur me secilën prej tyre. Dhe për të prishur kodin dhe për të shpjeguar se çfarë po ndodh, më duhej pak më shumë hapësirë për të shkruar. Bashkangjitur është një dokument për ndarjen e kodit të ServerCalls.gs

Ky dokument është krijuar si Dokumentacioni i Shkrimeve të Aplikacioneve Google dhe madje bën lidhje me objekte të ngjashme.

Hapi 10: Hapi 3: Kodi HTML (Application.html)

Kodi HTML bëhet shumë i pakënaqur brenda kutisë së dialogut të Instructable. Prandaj ju lutemi ndiqni së bashku me fotot e mësipërme.

1) Në kokën e faqes Application.html vendosim një titull dhe thërrasim faqen tonë CSS.html që të ngarkohet.

*Duke qenë një faqe HTML e modeluar, ne mund t'i shtojmë më shumë kod këtij dokumenti pa rrëmujë ekranin aktual duke përdorur metodën e përmendur më parë të përfshira (Emri i faqes) që gjendet në Server Code.gs

Kutia kryesore e titujve gjendet gjithashtu në këtë fotografi. Mund të ndryshoni titullin këtu dhe të futni veshjet "[Emri juaj]" ose çfarëdo tjetër që dëshironi të njihni këtë faqe si.

2) Pikërisht nën kokë është shiriti ynë kryesor i navigimit.

Kjo shirit navigimi përfshin të gjitha llojet e artikujve të listuar në fletën e artikujve brenda Fletëve tona të Google.

Një funksion inline thirret për të marrë një grup të këtyre artikujve. Pastaj drejtohet një lak për të përfshirë secilën prej këtyre opsioneve si një buton menuje, i kompletuar me një kod veprimi, kështu që kur një përdorues të klikojë në butonin e menysë, artikujt përkatës do të shfaqen në zonën e trupit.

3) Trupi kryesor.

Ka 4 pjesë në këtë pjesë. Një dalje teksti, filtri i shiritit anësor, imazhet e trupit kryesor dhe JS përfshin.

Dalja e tekstit lejon që përdoruesi të shohë një pamje të shpejtë të tekstit për llojin e artikujve që ata po shikojnë aktualisht në vend që t'i referohen opsionit të menysë që kanë zgjedhur.

Filtri sidebar përmban shumë filtra të disponueshëm për llojin e artikullit që ka zgjedhur një përdorues. Këta filtra pasqyrojnë të gjitha opsionet në dispozicion për këtë kategori, si dhe sa artikuj bien nën vlerën e asaj kategorie. Kjo shirit anësor është e mbushur me kod JavaScript (i cili do të diskutohet më tej).

Trupi kryesor aktualisht është i zbrazët, por ashtu si filtrat do të mbushet me kuti artikujsh që detajojnë ID -në e Artikullit, Ngjyrën, Madhësinë dhe Vendndodhjen me një imazh të përfshirë pasi përdoruesi të zgjedhë një kategori dhe Kodi JavaScript të popullojë këtë zonë.

Së fundi përfshin (JS), le të hedhim një vështrim në këtë në hapin tjetër.

Hapi 11: Hapi 4: Kodi JavaScript (JS.html)

Nëse mendoni se Kodi i Serverit ishte një seksion i rëndë, merrni një ngarkesë të kësaj.

Këtu kombinojmë HTML dhe SeverCode tonë me ndërveprimet e përdoruesve. Çdo artikull që klikohet duhet të përpunohet këtu për të marrë të dhënat e duhura dhe për t'i kthyer ato në një format të lexueshëm. Pra, le të hedhim një vështrim në thirrjet tona të para:

Skenari thërret: Unë jam duke përdorur 3 biblioteka të ndryshme për këtë projekt; jquery, bootstrap dhe një shtesë e veçantë për zgjedhjen e bootstrap. Këto biblioteka lejojnë formatimin e objekteve dhe thirrje më të lehtë ndaj elementeve brenda kodit HTML.

Linja ime tjetër e rëndësishme e JavaScript është më poshtë:

$ (dokument).keypress (funksioni (ngjarja) {if (ngjarja.që == '13') {event.preventDefault (); }});

Këtu po çaktivizoj çelësin e hyrjes që të mos shkaktojë ndonjë nga format. Ashtu si në këtë rast, aplikacioneve të Google Web u caktohet vetëm adresa e tyre e një faqeje. Një shtyp shtyp do të shtonte të dhëna në adresën HTML dhe do të përpiqej të ridrejtonte përdoruesin. Duke e çaktivizuar këtë, ju lejoni që kodi juaj JavaScript të bëjë të gjithë punën.

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

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

Këtu janë dy funksione që po bëjnë thirrje në skedarin Server.gs. Linja:

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

ka shumë pjesë pune, por skeleti është i rrënjosur nga "google.script.run" i cili i tregon faqes HTML se funksioni i mëposhtëm është në server.

• Pjesa e fundit e këtij kodi është funksioni që duhet ekzekutuar. Në këtë shembull ServerRemoveFilter ()
• Duke shtuar një withSuccessHandler () faqja HTML tani e di se çfarë të bëjë me të dhënat që kthehen, dhe kjo është për të drejtuar funksionin me kllapa.
• E njëjta vlen edhe për withFailureHandler ()

Tani që kemi prishur thirrjen e Kodit të Serverit, le të hedhim një vështrim të shpejtë në atë që ndodh kur këto thirrje të serverit arrijnë dhe dështojnë.

funksion allGood (e) {console.log ("Suksesi në server"); } funksion onFailure (gabim) {$ ("#mesazh-kuti"). html ("

Në pamundësi për të marrë artikujt e veshjeve në këtë kohë. GABIM: " + error.message +"

");} funksioni FailDBUPddate (gabim) {$ ("#mesazh-kuti "). html ("

Ju nuk keni qasje për të modifikuar vendndodhjen. GABIM: " + error.message +"

"); $ (". vendndodhja zgjedh "). prop (" me aftësi të kufizuara "," me aftësi të kufizuara ");}

Unë krijova një regjistër shumë të thjeshtë të tastierës për të nënkuptuar suksesin kur funksioni i vendndodhjes ekzekutohet të cilin mund ta shihni si allGood ().

Kur trajtoni gabimet, këto dy funksione nxjerrin mesazhin e gabimit ku përdoruesi mund të shohë duke përdorur një thirrje jQuery në objektin HTML me një ID të "mesazh-kutisë".

Tani le të kalojmë në punën e rëndë

Hapi 12: Hapi 5: JavaScript Code-Click Veprimet (JS.html)

Shiriti i menusë së lartë ka mundësi për secilin lloj artikulli. Funksioni me të cilin ata klikojnë është:

funksioni filterType (artikulli, id) {$ ("ul.navbar-nav li.active"). removeClass ("aktiv"); $ ("#Artikulli aktual"). html ("// KODI HTML KETU");

updateSideBar = e vërtetë;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Artikuj", artikull); var newSelect = "#type-"+id; $ (newSelect).addClass ("aktiv"); $ ("#myNavbar"). removeClass ("in"); }

Ne mund të shohim në këtë kod që kemi një google.script.run i cili thërret në Server për të marrë informacion. Funksioni i suksesit për këtë thirrje është updateItems ().

FIGURA 1 (me kodin e rëndë HTML brenda këtij funksioni është e vështirë të kopjoni rreptësisht kodin, pa u shfaqur një rrëmujë në këtë kuti)

Në kodin updateItems (), ne kemi shumë gjëra që ndodhin. Edhe një herë ne duhet të përshkojmë Objektin që na është kthyer dhe të shtojmë secilin artikull në faqen tonë kryesore të trupit.

Kodi HTML shtohet si vargje për të prishur kodin dhe për ta bërë më të lehtë leximin dhe shikimin se ku po futet itemData.

Në lakun e secilit artikull, unë jam duke hequr fushat që nuk dua t'i shoh në përshkrim, të tilla si Parazgjedhja, vula kohore dhe URL -ja e figurës. Unë heq URL -në e figurës nga përshkrimi sepse ajo po shtohet si href në një etiketë. Pasi të jetë mbledhur ky informacion, i dërgohet trupit kryesor duke përdorur funksionin jQuery.append ().

Pasi të jenë shtuar të gjithë artikujt në faqe, kjo pyetje e artikujve dërgohet përsëri në Kodin e Serverit për të renditur dhe kthyer opsionet e filtrit siç shihet në Figurën 2.

FIGURA 2 (azhurnimi i shiritit anësor)

Shumë e ngjashme me funksionin updateItems (), ne kemi edhe një herë vargje të kodit HTML dhe një lak për të gjitha opsionet e filtrit. Ndryshimi i vetëm i dukshëm është jQuery.selectpicker ('rifreskim'). Ky funksion vjen nga biblioteka e shkrimit që kemi përfshirë në hapin e fundit. Ai lejon që programuesi të shkruajë një HTML të thjeshtë të zgjedhur dhe ta lejojë bibliotekën ta përditësojë atë për të përfshirë funksionin e kërkueshëm, si dhe kodin CSS.

FIGURA 3 (filtrim me shiritin anësor)

Së fundmi kemi funksionin updateFilter (formData). Kjo përdoret kur një formë dorëzohet nga shiriti anësor. Fillojmë duke përdorur një funksion jQuery.serializeArray () kjo lexon kodin HTML të elementit të përcaktuar në rastin tonë një formë, dhe kthen vlerat në një varg për t'u dërguar në server. Dhe ne e fillojmë procesin nga Figura 1 përsëri.

Hapi 13: Fundi….në fund

Epo ja që e keni; një shpjegim të plotë dhe të plotë për t'ju ndihmuar të krijoni veshjet tuaja në internet, ose të përdorni funksionalitetin e krijuar në Skriptet e mia të Google për të zgjeruar projektin tuaj.

Ka qenë një udhëtim që kodon këtë projekt (dhe dokumenton përmes këtij Instructable), por mua më ka pëlqyer procesi dhe shpresoj që ju do të kënaqeni me produktin. Do të më pëlqente të dëgjoja nga dikush që bën rregullime siç thotë Michael Jordan "Tavani është çatia" dhe jam dakord që ky aplikacion nuk ka kufij.