Garderobe Organizer: 13 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:28

Uanset om det handler om at købe tøj eller altid bliver bedt om at låne en vare, er der tidspunkter, hvor du ville ønske, at du kunne kigge ind i dit skab hvor som helst for at se, om du har noget lignende. Garderobe -arrangøren gør netop det OG MERE!

Dette er en one -stop -butik og er ekspansiv til mange andre formål. My Wardrobe Organizer er en kombination af Google Sheets som en SQL -database, Google Scripts til håndtering af dataene og Google WebApp til en online portal til disse data. Slutbrugeren kan se alle emnerne, filtrere efter noget bestemt, markere varer som udlånt, styre deres vasketøj og forhindre mor i at købe dig den samme skjorte til jul hvert år*.

(*Ingen garanti. Mødre vil købe, hvad de vil, uanset om du har brug for det eller ej)

Hvis man hurtigt kigger på webstedsdesignet på billedet ovenfor, kan man måske genkende et velkendt layout. Garderobeorganisatoren er konfigureret som ethvert almindeligt beklædningswebsted. Brudt op af afdelinger på toppen og filtre på siden, giver denne grænseflade kendskab til funktionalitet til den afslappede bruger. OG den er enkel at bruge.

Trin 1: Opsætning af din egen kopi

Lad os starte med at oprette din egen kopi af dette projekt.

Google Drev

Klik på ovenstående link for at tage dig til min nuværende version af denne applikation.

Du vil se tre elementer i denne mappe: En Google -formular, et Google -ark og en mappe.

Højreklik på Google Sheet, og klik på Make a Copy.

Indstil placeringen af denne kopi til dit eget drev.

Efter kopiering af dette dokument genereres Google -formularen automatisk i den samme mappe, som du flyttede Google Sheet.

For at oprette mappen (dette er nødvendigt for at indsamle uploads af elementbillederne) skal du klikke på den kopierede Google -formular, og der vises en prompt, hvor du bliver bedt om at gendanne mappens placering for uploads.

Du har nu en kopi af dette dokument at arbejde med selv!

Trin 2: Oversigt over Google -formular

Nu hvor du har din egen version af denne applikation, lad os tage et kig rundt.

Din Google -formular er konfigureret til at acceptere mange forskellige typer varer. Skjorter, bukser, kjoler og sko har dog alle forskellige størrelsesbegrænsninger. Derfor udfyldes en anden sektion af denne formular baseret på den afdeling, du arkiverer din vare under. I min (Mandartikels) skabelon har jeg oprettet 5 forskellige størrelseskategorier. (For kvinders artikler, klik her, der er mange flere).

Under hver størrelsesafdeling etablerede jeg en unik titel for hver parameter, jeg vil indsamle. Vi ønsker ikke at have flere kolonner i vores database med navnet "Størrelse", eller vi ville ikke være i stand til at afgøre, hvilken type tøj den størrelse gælder for.

I slutningen af hvert afsnit ledes brugeren til den sidste del af denne formular: Placering. Jeg valgte personligt at tilføje Location for at bestemme varer på renserierne, i vasketøjet, på deres sted eller de ting, hvor jeg har ladet en ven låne. Dette giver mig mulighed for at være organiseret og aldrig føle, at jeg mangler et stykke tøj et sted.

Som jeg nævnte fra begyndelsen, kan dette projekt udvides på en million forskellige måder. Du kan bruge det til lager, et mere præcist organisationsværktøj eller til strengt at låne tøj. De felter og sektioner, du kan tilføje, er uendelige, så vær ikke begrænset til, hvad der er i min form. (For kvinders artikler klik her)

Inden du uploader et par af dine egne varer, lad os gå videre til det næste trin for at sikre korrekt indsendelse.

Trin 3: Google Scripts: (Server Code.gs) Se først på data og kode

Hvis du klikker ind i Google Sheets -dokumentet, vil du se mange kolonner med data (og nogle rækker, der er tilbage til demonstration). Under indsendelse af formularer springes nogle sektioner over, dette fremgår af de manglende data i nogle kolonner. Men yderligere kolonner som f.eks. ID, standardplacering, hvem og opdateret er tilføjet for bedre at spore redigeringerne af disse elementer.

Et id -felt er blevet oprettet, da du indsendte formularen for at give mulighed for en unik identifikator, når du krydser denne database. For at oprette dette felt tager vi et kig på Script Editor ved at klikke på Værktøjer> Script Editor.

Når Script Editor er åben, vil du bemærke 8 dokumenter i sidebjælken i dette nye vindue. Disse dokumenter hjælper med at kontrollere backend-processen, front-end-skærme og front-end-funktionalitet. Vi hopper ind i hver enkelt (hvis du holder dig til), men klik nu på Server Code.

I filen Server Code.gs er der mange funktioner:

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

onSubmit (e) - Denne funktion konfigureres som den første funktion, der kører, når en Google Formular indsender. Du kan placere andre funktioner inde i denne funktion, så mange forskellige processer kan ske.

onOpen (e) - Denne funktion kaldes, når Google Sheets åbnes. Det udfylder en ny menuindstilling for at give hurtig adgang til programmets links og visninger.

doGet ()- Denne funktion kaldes til opkaldet i Web App-adressen. Når en bruger søger til den publicerede webapp, fortæller denne kode denne side, hvad den skal vise. I dette tilfælde er det dokumentet Application.html.

include (filnavn) - Denne funktion bruges inde i HTML -sider til at læse andre dokumenter og indsætte deres indhold i et korrekt HTML -format på en anden side. Vi bruger det til vores CSS.html- og JS.html -filer.

openApplication () og openLaundryApp () - Disse funktioner indeholder koden, der skal køres, når en bruger klikker på menuknapperne, der er tilføjet til værktøjslinjen i Google Sheet.

changeValueOnSubmit (e) og setIDOnSubmit (e)- Det er de funktioner, vi vil se nærmere på nu. De er ansvarlige for at opdatere bestemte felter med standardværdier, når formularen først indsendes.

Trin 4: Aktivering af OnFormSubmit

Disse to funktioner, changeValueOnSubmit (e) og setIDOnSubmit (e), skal forbindes til brugerhandlingen for at indsende en formular. For at gøre det skal vi aktivere en udløser.

Vi aktiverer udløseren ved at klikke på Rediger> Aktuelle projekts udløsere. Dette åbner Google Developer Hub.

I nederste højre hjørne af trigger -instrumentbrættet er en knap Tilføj en trigger. Klik her.

Vi vil nu konfigurere funktionen til at køre, når der sendes en formular. I vores tilfælde har jeg flere funktioner (changeValueOnSubmit (e) og setIDOnSubmit (e)), som jeg satte inde i en onSubmit () -funktion, så jeg skal kun oprette 1 trigger. Derfor vælger vi onSubmit () og sætter denne udløser til at køre Ved formular indsendelse.

Vi har nu en arbejdsform, der udfylder et Google Sheet med unikke identifikatorer og angiver standardværdier.

Du kan nu uploade dine egne varer ved hjælp af Google -formularen. (Dette er ikke nødvendigt for at fortsætte, da der allerede er demoværdier i). Vi vil nu dykke ned i brugergrænsefladen.

Trin 5: Opsætning af brugergrænsefladen

VELKOMMEN! Vi har endelig nået den del, du kom efter, brugergrænsefladen !!!!

Ved første blik er der intet her. Vi har ikke foretaget opkald endnu. For at indlæse siden hurtigere besluttede jeg mig for ikke at plage den første side med ALLE dine varer og give dig mulighed for at klikke hurtigere på det, du vil se. Da dette er tilfældet, er der ingen elementer i hovedindholdsfeltet og ingen filtre i sidebjælken. Lad os klikke på Alle for at se, hvad der er i vores database.

Vi har nu indlæst hvert element i vores database i hovedindholdsfeltet. Du vil se billeder, ID -numre, farve, størrelser og placeringer. Placeringsfeltet kan opdateres lige her! Hvis du beslutter dig for at låne varen ud, kan du vælge den mulighed, du kan placere den i dit skab, kommode eller vasketøj.

Og i vores sidebjælke har vi alle mulige felter for hvert tøj i vores nye forespørgsel. Forestil dig bare at have 20 forskellige størrelsesindstillinger på dette sidebjælke, det ville ikke være særlig effektivt, så lad os indsnævre vores søgning ved at klikke på Tilbehør.

Nu hvor vi har indlæst Tilbehør, skal du kigge på sidebjælken. Det har justeret til kun 3 felter, da det er de parametre, der gælder for hvert element i denne forespørgsel. Jeg vil lave en sortering efter farve. Ved at klikke på farve vises en rullemenu. Her kan jeg enten skrive den farve, jeg ønsker, og derefter vælge den, eller hvis jeg ser min mulighed med det samme, klikker jeg bare på den. Jeg valgte Rød til denne demonstration. Klik på Anvend filter i bunden af denne sidepanel, og hovedindholdet opdateres, og viser dig de elementer, der har farven Rød indstillet som deres farveparameter.

Jeg nævnte tidligere denne database hjælper mig med at administrere mine varer udlånt og i mit vasketøj. For at gøre det lidt lettere, oprettede jeg i stedet for manuelt at klikke på hvert dropdown -sted på denne hovedside vasketøjstilstand. Vend tilbage til Google Sheet -siden, og under App View kan du se vasketøjstilstand. Denne indstilling trækker et mindre modal op, der kun viser varer med placeringen af vasketøj. Jeg kan nu markere alle disse elementer som standard, som vil placere dem tilbage på deres placeringer, de normalt er gemt i.

Trin 7: Projekt afsluttet

TILLYKKE

For dem af jer, der bare vil have en fungerende database til at styre dine varer, velkommen til din Online Organizer. For de nysgerrige sind interesseret i koden bag denne applikation. Bliv ved, mens jeg bryder det ned.

*Du er fri til at slette testelementerne, EFTER du har indtastet mindst et af dine egne elementer i databasen. (Jeg forklarer senere, hvis du bliver ved).

Trin 8: Trin 1: Back-End-koden (serverkode.gs)

Tidligere åbnede vi Server Code.gs -filen, og jeg gav en hurtig oversigt over hver af funktionerne, da deres formål var at betjene alle de elementer, du lige har konfigureret, men nu vil vi bryde dem ned nogle af de funktioner og funktioner, der kaldes for at gøre denne kode til en succes.

1) Bordkrydsning:

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

• Denne kode er et grundlag for at krydse et Google Sheet. Jeg kalder arket ved navn i stedet for nummer, så hvis ark slettes eller omarrangeres efter funktion, kan det stadig fungere korrekt.
• I denne kode samler jeg bare området for alle dataene i tabellen.

2) Tildeling af et 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);

• Jeg har tidligere bedt om, at demoværdierne skal stå i tabellen, indtil brugeren har indsendt mindst én værdi til sig selv. Dette skyldes, at Auto ID -generatoren er afhængig af den sidste værdi i databasen, der skal udfyldes.
• Jeg henter den sidste 2. til sidste række, fordi den sidste række er vores nye værdi og den 1. kolonne for ID -værdien.
• Jeg genererer derefter tilfældigt et tal mellem 5 og 15 og tilføjer det til den sidste værdi. *
• Endelig placerer jeg denne værdi i ID -kolonnen i den sidste række.
• Dernæst kalder vi funktionen changeValueOnSubmit (e).

* Jeg valgte 5-15 for at give mulighed for fremtidig mærkning og Google Home-integration, så tallene ikke vil være tæt nok til at forårsage forvirring på bøjler eller tøjmærker eller stregkoder.

3) Ændring af URL -værdi:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Hvor opbevarer du denne beklædningsgenstand?"]; var ColD = ColumnID _ ("Item Picture") +1; var ColLoc = ColumnID _ ("Standardplacering")+1; DataChange = DataChange.toString (). erstat ("åben?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Når du sender et foto via en Google -formular, er URL'en indsat i Google Sheets et link til det faktiske dokument. I vores tilfælde, da vi opretter en HTML -side, ønsker vi, at linket bare er billedet.
• Ved at ændre "åben?" del af webadressen til "uc? export = view &" har vi i stedet oprettet et link til billedet.
• Vi vil igen placere denne nye værdi på placeringen af det aktuelle link til elementbillede.
• Jeg indstiller også elementets "Standardplacering" og "Aktuel placering" til det samme i databasen. Dette vil hjælpe, når jeg prøver at bruge min vasketøjstilstand.

• Vi vil dykke ned i det på den næste side, men dette er vores første blik på funktionen ColumnID_ (), jeg har oprettet.

  Denne funktion bruger kolonnenavne til at oversætte det til kolonneheltallet, hvilket er nyttigt for områdeopkald, der kræver et kolonnenummer frem for navn

4) SpreadsheetApp.getUI ()

• På det andet billede kan du se brugen af SpreadsheetApp.getUI () som den bruges til at oprette en værktøjslinjemenu -tilføjelse til Google Sheet.
• . GetUI () -funktionen hjælper også med at oprette en modal popup, der bruges til vasketøjstilstand og som et hurtigt link til webstedets grænseflade.

5) HTMLService

• Der er to typer HTMLServices, der bruges i denne kode: Skabelon og HTMLOutput
• Skabelon gør det muligt at indsætte kode inde i HTML -koden, så oplysninger fra en server kan udfyldes, når siden kaldes.
• HTML Output viser enkle HTML -sider.
• Vi har også metoden inkluderer (), som giver os mulighed for at oprette flere HTML -filer og kombinere dem i en HTML -fil med en skabelon ved at returnere filens indhold i et HTML -format frem for en streng.

Jeg har vedhæftet et dokument, der er oprettet som Google App Scripts Documentation for at gøre en bekendtskab til, hvordan kildekode og funktionalitet forklares i Google Apps.

Trin 9: Trin 2: Back-End-koden Del 2 (Serveropkald.gs)

Nu har vi indtastet Server Calls.gs. Disse funktioner bruges primært i HTML JavaScript, så de er blevet adskilt fra kode, der primært bruges i bagenden, der er placeret i Server Code.gs.

Billede 1) Globale variabler:

Billede 2) Henter varer:

Billede 3) fetchItemsQry

Billede 4) filterItems

Billede 5) fetchFiltersWithQry

Billede 6) ColumnID og CacheCalls

Der er så meget at tale om med hver af disse. Og for at bryde koden ned og forklare, hvad der foregår, havde jeg brug for lidt mere skriveplads. Vedhæftet er et dokument til kodeopdelingen af ServerCalls.gs

Dette dokument er konfigureret som Google App Scripts Documentation og laver endda links til lignende objekter.

Trin 10: Trin 3: HTML -koden (Application.html)

HTML -kode bliver meget utilfreds i en instruktionsdialogboks. Så følg venligst med billederne ovenfor.

1) I overskriften på siden Application.html etablerer vi en titel og kalder vores CSS.html -side for at blive indlæst.

*Da vi er en skabeloniseret HTML -side, kan vi tilføje mere kode til dette dokument uden at lukke den aktuelle skærm ved at bruge den tidligere nævnte metode til inkludering (sidenavn), der findes i Server Code.gs

Hovedhovedboksen findes også på dette billede. Du kan ændre overskriften her og indtaste "[Dit navn] 's garderobe" eller hvad du ellers vil genkende denne side som.

2) Lige under overskriften er vores øverste navigationslinje.

Denne navigationslinje indeholder alle de artikeltyper, der er angivet på artikelarket inde i vores Google Sheets.

En inline -funktion kaldes for at hente en matrix af disse elementer. Derefter køres en loop for at inkludere hver af disse muligheder som en menuknap, komplet med en handlingskode, så når en bruger klikker på menuknappen, vises de respektive elementer i kropsområdet.

3) Hoveddelen.

Der er 4 portioner til denne del. Et tekstoutput, sidebjælksfilteret, hovedtekstbillederne og JS inkluderer.

Tekstoutput giver brugeren mulighed for at se en hurtig tekstvisning for, hvilken type elementer de aktuelt kigger på i stedet for at henvise til den menupunkt, de har valgt.

Sidefeltfilteret indeholder de mange tilgængelige filter til den type emne, en bruger har valgt. Disse filtre afspejler alle de tilgængelige muligheder for denne kategori samt hvor mange varer, der falder ind under denne kategoriværdi. Denne sidepanel er udfyldt med JavaScript -kode (som vil blive diskuteret næste).

Hoveddelen er i øjeblikket tom, men ligesom filtrene vil den blive fyldt med emnebokse, der beskriver elementets id, farve, størrelse og placering med et billede inkluderet, når brugeren vælger en kategori, og JavaScript -koden befolker dette område.

Endelig inkluderer (JS), lad os tage et kig på dette på det næste trin.

Trin 11: Trin 4: JavaScript -koden (JS.html)

Hvis du troede, at serverkoden var en tung sektion, kan du få en masse af dette.

Her kombinerer vi vores HTML og SeverCode med brugerinteraktioner. Ethvert element, der klikkes på, skal behandles her for at få de korrekte data og returnere det i et læsbart format. Så lad os se på vores første opkald:

Scriptet kalder: Jeg bruger 3 forskellige biblioteker til dette projekt; jquery, bootstrap og en særlig bootstrap-vælg tilføjelse. Disse biblioteker giver mulighed for formatering af objekter og lettere opkald til elementerne i HTML -koden.

Min næste vigtige JavaScript -linje er herunder:

$ (dokument).tastetryk (funktion (hændelse) {if (event.which == '13') {event.preventDefault (); }});

Her deaktiverer jeg enter -tasten fra at udløse nogen af formularerne. Som i dette tilfælde er Google Web Apps kun tildelt en enkelt sideadresse. Et enter -tryk ville føje data til HTML -adressen og forsøge at omdirigere brugeren. Ved at deaktivere dette tillader du din JavaScript -kode at udføre alt arbejdet.

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

funktion updateDBlocation (id, værdi) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, værdi); }

Her er to funktioner, der foretager opkald til filen Server Code.gs. Linjen:

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

har mange arbejdsdele til det, men skelettet er rodfæstet fra "google.script.run", der fortæller HTML -siden, at følgende funktion er på serveren.

• Den sidste bit af denne kode er den funktion, der skal køres. I dette eksempel ServerRemoveFilter ()
• Ved at tilføje en withSuccessHandler () ved HTML -siden nu, hvad de skal gøre med de data, der returneres, og dette er for at køre funktionen med parentes.
• Det samme gælder for withFailureHandler ()

Nu hvor vi har nedbrudt serverkodeopkaldet, lad os tage et hurtigt blik på, hvad der sker, når disse serveropkald lykkes og mislykkes.

function allGood (e) {console.log ("Succes på server"); } funktion onFailure (fejl) {$ ("#message-box"). html ("

Kunne ikke hente tøjvarer på nuværende tidspunkt. FEJL: " + fejl.message +"

");} funktion FailDBUpdate (fejl) {$ ("#message-box "). html ("

Du har ikke adgang til at ændre placeringen. FEJL: " + fejl.message +"

"); $ (". location-select "). prop ('deaktiveret', 'deaktiveret');}

Jeg oprettede en meget enkel konsollog for at betegne succes, når placeringsfunktionen køres, som du kan se som allGood ().

Når fejlene håndteres, udsender disse to funktioner fejlmeddelelsen, hvor brugeren kan se ved hjælp af et jQuery-opkald til HTML-objektet med et id med "meddelelsesboks".

Lad os nu komme ned til det grusomme arbejde

Trin 12: Trin 5: JavaScript-kode-klik-handlingerne (JS.html)

Den øverste menulinje har muligheder for hver artikeltype. Funktionen, de kører ved klik, er:

funktion filterType (artikel, id) {$ ("ul.navbar-nav li.active"). removeClass ("aktiv"); $ ("#currentArticle"). html ("// HTML -KODE HER");

updateSideBar = sand;

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

Vi kan se i denne kode, at vi har en google.script.run, som kalder til serveren for at hente oplysninger. Succesfunktionen for dette opkald er updateItems ().

BILLEDE 1 (med den tunge HTML -kode inden for denne funktion er det svært at kopiere strengt koden, uden at der vises rod i denne boks)

I updateItems () -koden sker der mange ting. Endnu en gang skal vi gennemgå objektet , der blev returneret til os, og tilføje hvert element til vores hovedkropsside.

HTML -koden tilføjes som arrays for at bryde koden op og gøre det lettere at læse og se, hvor itemData indsættes.

I løkken for hvert element fjerner jeg felter, som jeg ikke ønsker at se i beskrivelsen, f.eks. Standard, tidsstempel og billedwebadresse. Jeg fjerner billedwebadressen fra beskrivelsen, fordi den i stedet tilføjes som href til et tag. Når disse oplysninger er samlet, sendes de til hoveddelen ved hjælp af funktionen jQuery.append ().

Efter at alle elementerne er blevet føjet til siden, sendes denne forespørgsel efter varer til serverkoden igen for at sortere og returnere filterindstillingerne som vist i billede 2.

BILLEDE 2 (opdatering af sidebjælken)

Meget lig updateItems () -funktionen, har vi igen arrays med HTML -kode og en loop til alle filterindstillingerne. Den eneste mærkbare ændring er jQuery.selectpicker ('opdater'). Denne funktion kommer fra scriptbiblioteket, vi inkluderede i det sidste trin. Det giver programmereren mulighed for at skrive en simpel udvalgt HTML og lade biblioteket opdatere det til at omfatte søgbar funktion samt CSS -koden.

BILLEDE 3 (filtrering med sidepanelet)

Endelig har vi updateFilter (formData) funktionen. Dette bruges, når der sendes en formular fra sidelinjen. Vi starter med at bruge en jQuery -funktion.serializeArray () dette læser HTML -koden for det element, der er defineret i vores tilfælde en formular, og returnerer værdierne i en streng, der skal sendes til serveren. Og vi starter processen fra billede 1 forfra.

Trin 13: Slutningen …. Endelig

Nå der har du det; en fuld og grundig forklaring til at hjælpe dig med at oprette din egen online garderobe eller udnytte den funktionalitet, der er oprettet i mine Google Scripts til at udvide dit eget projekt.

Det har været en rejse, der har kodet dette projekt (og dokumenteret gennem dette instruerbare), men jeg har nydt processen og håber, at du vil nyde produktet. Jeg vil meget gerne høre fra alle, der foretager justeringer, da Michael Jordan siger "Loftet er taget", og jeg er enig i, at denne applikation ikke har nogen grænser.