Garderobeskap: 13 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

Enten det handler om å kjøpe klær eller alltid bli bedt om å låne noe, så er det tider du skulle ønske at du kunne kikke inn i skapet ditt hvor som helst for å se om du har noe lignende. Garderobearrangøren gjør nettopp det OG MER!

Dette er en one -stop -butikk og er ekspansiv for mange andre formål. My Wardrobe Organizer er en kombinasjon av Google Sheets som en SQL -database, Google Scripts for håndtering av data og Google WebApp for en online portal til disse dataene. Sluttbrukeren kan se alle elementene, filtrere etter noe spesifikt, merke varer som utlånt, administrere klesvasken og stoppe mamma fra å kjøpe deg den samme skjorten til jul hvert år*.

(*Ingen garanti. Mødre vil kjøpe det de vil, enten du trenger det eller ikke)

Hvis du tar et raskt blikk på nettstedets design på bildet ovenfor, kan du gjenkjenne et kjent oppsett. Garderobeskapet er satt opp som alle vanlige klesnettsteder. Brukt opp av avdelinger på toppen og filtre på siden, gir dette grensesnittet kjennskap til funksjonalitet til den uformelle brukeren. OG den er enkel å bruke.

Trinn 1: Konfigurere din egen kopi

La oss starte med å lage din egen kopi av dette prosjektet.

Google Disk

Klikk på lenken ovenfor for å ta deg til min nåværende versjon av denne applikasjonen.

Du vil se tre elementer i denne mappen: Et Google -skjema, et Google -ark og en mappe.

Høyreklikk på Google -arket og klikk på Lag en kopi.

Angi plasseringen av denne kopien til din egen Disk.

Etter at du har kopiert dette dokumentet, genereres Google -skjemaet automatisk i samme mappe som du flyttet Google -arket.

For å opprette mappen (dette er nødvendig for å samle opp opplastinger av elementbildene), klikk på det kopierte Google -skjemaet, og du får en melding der du blir bedt om å gjenopprette mappens plassering for opplastinger.

Du har nå en kopi av dette dokumentet å jobbe med selv!

Trinn 2: Oversikt over Google -skjema

Nå som du har din egen versjon av denne applikasjonen, la oss ta en titt rundt.

Google -skjemaet ditt er konfigurert for å godta mange forskjellige typer varer. Skjorter, bukser, kjoler og sko har imidlertid forskjellige størrelsesbegrensninger. Derfor vil en annen del av dette skjemaet fylles ut basert på avdelingen du arkiverer varen din under. I min (Mannlige artikkels) mal har jeg laget fem forskjellige størrelseskategorier. (For kvinners artikler, klikk her, det er mange flere).

Under hver størrelseseksjon etablerte jeg en unik tittel for hver parameter jeg skal samle inn. Vi ønsker ikke å ha flere kolonner i databasen vår med navnet "Størrelse", ellers ville vi ikke kunne bestemme hvilken type klær den størrelsen gjelder.

På slutten av hver seksjon blir brukeren ledet til den siste delen av dette skjemaet: Location. Jeg valgte personlig å legge til Location for å finne ut ting på renseriene, i vaskeriet, på stedet eller de elementene der jeg har latt en venn låne. Dette gjør at jeg kan være organisert og aldri føle at jeg mangler et plagg et sted.

Som jeg nevnte fra begynnelsen, kan dette prosjektet utvides på en million forskjellige måter. Du kan bruke den til inventar, et mer presist organisasjonsverktøy eller til strengt lån av klær. Feltene og delene du kan legge til er uendelige, så ikke føl deg begrenset til det som er i min form. (For kvinneartiklene klikk her)

Før du laster opp noen få av dine egne varer, la oss gå videre til neste trinn for å sikre riktig innsending.

Trinn 3: Google Scripts: (Server Code.gs) Se først på dataene og koden

Når du klikker på Google Sheets -dokumentet, vil du se mange kolonner med data (og noen rader igjen for demonstrasjon). Under innsending av skjema hoppes noen seksjoner over, dette fremgår av manglende data i noen kolonner. Men flere kolonner som ID, standardplassering, hvem og oppdaterte er lagt til for bedre å spore redigeringene av disse elementene.

Et ID -felt ble opprettet da du sendte inn skjemaet for å tillate en unik identifikator når du krysser denne databasen. For å opprette dette feltet, vil vi se på Script Editor ved å klikke på Tools> Script Editor.

Med Script Editor åpen, vil du legge merke til 8 dokumenter i sidefeltet i dette nye vinduet. Disse dokumentene hjelper til med å kontrollere back-end-prosessen, front-end-skjermer og front-end-funksjonalitet. Vi hopper inn i hver enkelt (hvis du holder deg), men akkurat nå klikker du på Server Code.

I filen Server Code.gs er det mange funksjoner:

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

onSubmit (e) - Denne funksjonen blir konfigurert som den første funksjonen som skal kjøres når et Google -skjema sender inn. Du kan plassere andre funksjoner inne i denne funksjonen slik at mange forskjellige prosesser kan skje.

onOpen (e) - Denne funksjonen kalles når Google Sheets åpnes. Det fyller ut et nytt menyalternativ for å gi rask tilgang til programmets koblinger og visninger.

doGet ()- Denne funksjonen kalles på Web App-adresseanropet. Når en bruker surfer til den publiserte nettappen, vil denne koden fortelle siden hva den skal vise. I dette tilfellet er det dokumentet Application.html.

include (filnavn) - Denne funksjonen brukes inne på HTML -sider for å lese andre dokumenter og sette inn innholdet i et riktig HTML -format på en annen side. Vi bruker den for våre CSS.html- og JS.html -filer.

openApplication () og openLaundryApp () - Disse funksjonene inneholder koden som skal kjøres når en bruker klikker på menyknappene som er lagt til i verktøylinjen i Google Sheet.

changeValueOnSubmit (e) og setIDOnSubmit (e)- Dette er funksjonene vi skal se nærmere på nå. De er ansvarlige for å oppdatere visse felt med standardverdier når skjemaet først sendes inn.

Trinn 4: Aktivering av OnFormSubmit

Disse to funksjonene, changeValueOnSubmit (e) og setIDOnSubmit (e), må kobles til brukerhandlingen for å sende inn et skjema. For å gjøre dette må vi aktivere en utløser.

Vi aktiverer utløseren ved å klikke på Rediger> Aktuelle prosjektets utløsere. Dette åpner Google Developer Hub.

I nedre høyre hjørne av utløserdashbordet er en knapp Legg til en utløser. Klikk her.

Vi vil nå sette opp funksjonen for å kjøre når et skjema sendes inn. I vårt tilfelle har jeg flere funksjoner (changeValueOnSubmit (e) og setIDOnSubmit (e)) som jeg legger inne i en onSubmit () -funksjon, så jeg trenger bare å sette opp en trigger. Derfor vil vi velge onSubmit () og sette denne utløseren til å kjøre På innsending av skjema.

Vi har nå et arbeidsskjema som vil fylle ut et Google -ark med unike identifikatorer og angi standardverdier.

Du kan nå laste opp dine egne varer ved hjelp av Google -skjemaet. (Dette er ikke nødvendig for å fortsette, siden det allerede er demoverdier i). Vi vil nå dykke ned i brukergrensesnittet.

Trinn 5: Sette opp brukergrensesnittet

VELKOMMEN! Vi har endelig nådd den delen du kom etter, brukergrensesnittet !!!!

Ved første blikk er det ingenting her. Vi har ikke ringt ennå. For å laste siden raskere bestemte jeg meg for å ikke plage den første siden med ALLE elementene dine og la deg klikke på det du vil se raskere. Siden dette er tilfellet, er det ingen elementer i hovedinnholdsfeltet og ingen filtre i sidefeltet. La oss klikke på Alle for å se hva som er i databasen vår.

Vi har nå lastet inn alle elementene i databasen i hovedinnholdsfeltet. Du vil se bilder, ID -nummer, farger, størrelser og steder. Stedsfeltet kan oppdateres her! Hvis du bestemmer deg for å låne ut varen, kan du velge det alternativet, du kan plassere det i skapet, kommoden eller vaskeriet.

Og i sidefeltet har vi alle mulige felt for hvert klesplagg i den nye spørringen vår. Tenk deg å ha 20 forskjellige størrelsesalternativer på dette sidefeltet, det ville ikke være veldig effektivt, så la oss begrense søket vårt ved å klikke Tilbehør.

Nå som vi har lastet inn tilbehør, ta en titt på sidefeltet. Den har justert seg til bare 3 felt, siden dette er parametrene som gjelder for hvert element i denne spørringen. Jeg kommer til å gjøre en sortering etter farge. Ved å klikke på farge vises en rullegardinboks. Her kan jeg enten skrive inn fargen jeg vil ha og deretter velge den, eller hvis jeg ser alternativet mitt med en gang, klikker jeg bare på det. Jeg valgte Rød for denne demonstrasjonen. Klikk på Bruk filter nederst i dette sidefeltet, og hovedinnholdet oppdateres og viser deg elementene som har fargen Rød som fargeparameter.

Jeg har tidligere nevnt at denne databasen hjelper meg med å administrere elementene mine på lån og i vaskeriet mitt. For å gjøre det litt enklere, i stedet for å manuelt klikke på hvert rullegardinsted på denne hovedsiden, opprettet jeg Klesvask -modus. Gå tilbake til Google Sheet -siden, og under App View ser du Klesvask -modus. Dette alternativet vil trekke opp en mindre modal som bare viser varer med plasseringen av vaskeri. Jeg kan nå merke alle disse elementene som standard, som vil plassere dem tilbake på stedene de normalt er lagret på.

Trinn 7: Prosjektet er fullført

GRATULERER

For deg som bare vil ha en fungerende database for å administrere elementene dine, velkommen til din Online Organizer. For de nysgjerrige sinnene som er interessert i koden bak denne applikasjonen. Hold meg fast mens jeg bryter den ned.

*Du står fritt til å slette testelementene ETTER at du har lagt inn minst ett av dine egne elementer i databasen. (Jeg forklarer senere hvis du holder deg).

Trinn 8: Trinn 1: Back-End-koden (Server Code.gs)

Tidligere åpnet vi Server Code.gs -filen, og jeg ga en rask oversikt over hver av funksjonene ettersom formålet var å betjene alle elementene du nettopp konfigurerte, men nå vil vi bryte dem ned noen av funksjonene og verktøyene som kalles for å gjøre denne koden til en suksess.

1) Tabelloverføring:

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

• Denne koden er et grunnlag for å krysse et Google -ark. Jeg kaller arket ved navn i stedet for nummer, slik at hvis ark slettes eller omorganiseres etter funksjon, det fortsatt kan fungere skikkelig.
• I denne koden samler jeg bare området for alle dataene i tabellen.

2) Tilordne en ID:

var LastID = range.getCell (rowNum-1, 1); var CellValue = Number (LastID.getValue ()); var ColA = 1; var maks = 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 demoverdiene skal stå i tabellen til brukeren har sendt inn minst én verdi for seg selv. Dette er fordi Auto ID -generatoren er avhengig av den siste verdien i databasen som skal fylles ut.
• Jeg henter den siste 2. til siste raden fordi den siste raden er vår nye verdi og den første kolonnen for ID -verdien.
• Jeg genererer deretter tilfeldig et tall mellom 5 og 15 og legger det til den siste verdien. *
• Til slutt plasserer jeg denne verdien i ID -kolonnen i den siste raden.
• Deretter kaller vi funksjonen changeValueOnSubmit (e).

* Jeg valgte 5-15 for å tillate fremtidig merking og Google Home-integrasjon, slik at tallene ikke vil være nær nok til å forårsake forvirring på kleshengere eller klesmerker eller strekkoder.

3) Endring av URL -verdi:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Hvor oppbevarer du denne plagget?"]; var ColD = ColumnID _ ("Artikkelbilde") +1; var ColLoc = ColumnID _ ("Standardplassering")+1; DataChange = DataChange.toString (). Erstatt ("åpen?", "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 inn et bilde via et Google -skjema, er nettadressen som er satt inn i Google Sheets, en lenke til det faktiske dokumentet. I vårt tilfelle, da vi lager en HTML -side, vil vi at lenken bare skal være bildet.
• Ved å endre "åpen?" delen av nettadressen til "uc? export = view &" har vi opprettet en lenke til bildet i stedet.
• Vi vil igjen plassere denne nye verdien på stedet for den gjeldende varebildelinken.
• Jeg setter også "Standardplassering" og "Gjeldende plassering" for elementet til det samme i databasen. Dette vil hjelpe når du prøver å bruke vaskerimodus.

• Vi vil dykke ned i det på neste side, men dette er vårt første blikk på funksjonen ColumnID_ () jeg opprettet.

  Denne funksjonen bruker kolonnenavn til å oversette det til kolonneheltall, noe som er nyttig for områdeoppringning som krever et kolonnenummer i stedet for navn

4) SpreadsheetApp.getUI ()

• På det andre bildet kan du se bruken av SpreadsheetApp.getUI () som den brukte til å lage et tillegg til verktøylinjen i Google -arket.
• . GetUI () -funksjonen hjelper også med å lage en modal popup som brukes i Klesvask -modus og som en hurtigkobling til nettstedets grensesnitt.

5) HTMLService

• Det er to typer HTMLServices som brukes i denne koden: Mal og HTMLOutput
• Malen gjør det mulig å sette inn kode inne i HTML -koden, slik at informasjon som kommer fra en server kan fylles ut når siden kalles.
• HTML -utgang viser enkle HTML -sider.
• Vi har også metoden inkluderer () som lar oss lage flere HTML -filer og kombinere dem i en HTML -fil med en mal ved å returnere innholdet i filen i et HTML -format i stedet for en streng.

Jeg har lagt ved et dokument som er konfigurert som Google App Scripts Documentation for å gjøre deg kjent med hvordan kildekoden og funksjonaliteten forklares i Google Apps.

Trinn 9: Trinn 2: Back-End Code Del 2 (Server Calls.gs)

Nå har vi angitt Server Calls.gs. Disse funksjonene brukes hovedsakelig i HTML JavaScript, så de har blitt skilt fra kode som hovedsakelig brukes i bakenden som ligger i Server Code.gs.

Bilde 1) Globale variabler:

Bilde 2) henter varer:

Bilde 3) fetchItemsQry

Bilde 4) filterItems

Bilde 5) fetchFiltersWithQry

Bilde 6) ColumnID og CacheCalls

Det er så mye å snakke om med hver av disse. Og for å bryte koden ned og forklare hva som skjer, trengte jeg litt mer skriveplass. Vedlagt er et dokument for kodeoppdelingen av ServerCalls.gs

Dette dokumentet er konfigurert som Google App Scripts Documentation og til og med linker til lignende objekter.

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

HTML -koden blir veldig misfornøyd i dialogboksen til Instructable. Så følg med bildene ovenfor.

1) I overskriften på Application.html -siden etablerer vi en tittel og kaller vår CSS.html -side for å bli lastet inn.

*Siden vi er en HTML -side med maler, kan vi legge til mer kode i dette dokumentet uten å rote gjeldende skjermbilde ved å bruke den tidligere nevnte include (pageName) -metoden som finnes i Server Code.gs

Hovedoverskriften er også funnet på dette bildet. Du kan endre overskriften her og skrive inn "[Ditt navn] er garderobe" eller hva du ellers vil gjenkjenne denne siden som.

2) Like under toppteksten er vår øverste navigasjonslinje.

Denne navigasjonslinjen inneholder alle artikeltypene som er oppført på artikkelarket inne i våre Google -regneark.

En innebygd funksjon kalles for å hente en rekke av disse elementene. Deretter kjøres en løkke for å inkludere hvert av disse alternativene som en menyknapp, komplett med en handlingskode, så når en bruker klikker på menyknappen, vil de respektive elementene vises i kroppsområdet.

3) Hoveddelen.

Det er 4 porsjoner til denne delen. En tekstutgang, sidefeltfilteret, hovedtekstbildene og JS inkluderer.

Med tekstutdata kan brukeren se en rask tekstvisning for hvilken type elementer de ser på for tiden i stedet for å referere til menyalternativet de valgte.

Sidefeltfilteret inneholder de mange filterene som er tilgjengelige for elementtypen en bruker har valgt. Disse filtrene gjenspeiler alle tilgjengelige alternativer for denne kategorien, så vel som hvor mange varer som faller under den kategoriværdi. Denne sidefeltet er fylt med JavaScript -kode (som vil bli diskutert neste).

Hoveddelen er for øyeblikket tom, men akkurat som filtrene vil den bli fylt med varebokser som beskriver elementets ID, farge, størrelse og plassering med et bilde inkludert når brukeren velger en kategori og JavaScript -koden befolker dette området.

Til slutt inkluderer (JS), la oss ta en titt på dette på neste trinn.

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

Hvis du trodde at serverkoden var en tung del, kan du laste dette.

Her kombinerer vi HTML og SeverCode med brukerinteraksjoner. Ethvert element som klikkes må behandles her for å få de riktige dataene og returnere dem i et lesbart format. Så la oss ta en titt på våre første samtaler:

Skriptet kaller: Jeg bruker 3 forskjellige biblioteker for dette prosjektet; jquery, bootstrap og et spesielt tilleggsutvalg for bootstrap. Disse bibliotekene tillater formatering av objekter og enklere anrop til elementene i HTML -koden.

Min neste viktige JavaScript -linje er nedenfor:

$ (dokument).tastetrykk (function (hendelse) {if (event.which == '13') {event.preventDefault (); }});

Her deaktiverer jeg enter -tasten fra å utløse noen av skjemaene. Som i dette tilfellet tilordnes Google Web Apps bare adressen til én side. Et enter -trykk vil legge til data i HTML -adressen og prøve å omdirigere brukeren. Ved å deaktivere dette, lar du JavaScript -koden gjøre alt arbeidet.

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

function updateDBlocation (id, value) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, verdi); }

Her er to funksjoner som ringer til Server Code.gs -filen. Køen:

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

har mange arbeidsdeler til det, men skjelettet er forankret fra "google.script.run" som forteller HTML -siden at følgende funksjon er på serveren.

• Den siste biten av denne koden er funksjonen som skal kjøres. I dette eksempelet ServerRemoveFilter ()
• Ved å legge til en withSuccessHandler () vet HTML -siden nå hva de skal gjøre med dataene som returneres, og dette er for å kjøre funksjonen med parentes.
• Det samme gjelder withFailureHandler ()

Nå som vi har brutt ned serverkodeanropet, la oss ta et raskt blikk på hva som skjer når disse serveranropene lykkes og mislykkes.

function allGood (e) {console.log ("Suksess på server"); } funksjon onFailure (feil) {$ ("#message-box"). html ("

Kan ikke hente klesplagg for øyeblikket. FEIL: " + error.message +"

");} funksjon FailDBUpdate (feil) {$ ("#melding-boks "). html ("

Du har ikke tilgang til å endre stedet. FEIL: " + error.message +"

"); $ (". location-selects "). prop ('deaktivert', 'deaktivert');}

Jeg opprettet en veldig enkel konsolllogg for å indikere suksess når posisjonsfunksjonen kjøres som du kan se som allGood ().

Når du håndterer feilene, sender disse to funksjonene ut feilmeldingen der brukeren kan se ved å bruke et jQuery-anrop til HTML-objektet med en ID for "meldingsboks".

La oss nå gå ned til det grusomme arbeidet

Trinn 12: Trinn 5: JavaScript-kode-klikkhandlingene (JS.html)

Den øverste menylinjen har alternativer for hver artikkeltype. Funksjonen de kjører på klikk er:

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

updateSideBar = true;

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

Vi kan se i denne koden at vi har en google.script.run som ringer til serveren for å hente informasjon. Suksessfunksjonen for denne samtalen er updateItems ().

BILDE 1 (med den tunge HTML -koden i denne funksjonen er det vanskelig å kopiere strengt koden, uten at det vises rot i denne boksen)

I updateItems () -koden har vi mange ting som skjer. Nok en gang må vi gå gjennom objektet som ble returnert til oss og legge hvert element til hovedkroppssiden.

HTML -koden legges til som matriser for å bryte opp koden og gjøre det lettere å lese og se hvor itemData blir satt inn.

I løkken til hvert element fjerner jeg felt som jeg ikke ønsker å se i beskrivelsen, for eksempel Standard, tidsstempel og bilde -URL. Jeg fjerner bilde -URL fra beskrivelsen fordi den i stedet legges til som href til en tag. Når denne informasjonen er samlet, blir den sendt til hoveddelen med funksjonen jQuery.append ().

Etter at alle elementene er lagt til på siden, sendes denne spørringen om elementer til serverkoden igjen for å sortere og returnere filteralternativene som vist på bilde 2.

BILDE 2 (oppdatering av sidelinjen)

Veldig lik funksjonen updateItems (), har vi igjen matriser med HTML -kode og en sløyfe for alle filteralternativene. Den eneste merkbare endringen er jQuery.selectpicker ('oppdater'). Denne funksjonen kommer fra skriptbiblioteket vi inkluderte i det siste trinnet. Det gjør det mulig for programmereren å skrive en enkel, valgt HTML og la biblioteket oppdatere den til å inkludere søkbar funksjon samt CSS -koden.

BILDE 3 (filtrering med sidefeltet)

Til slutt har vi updateFilter (formData) -funksjonen. Dette brukes når et skjema sendes inn fra sidefeltet. Vi starter med å bruke en jQuery -funksjon.serializeArray () dette leser HTML -koden til elementet som er definert i vårt tilfelle et skjema, og returnerer verdiene i en streng som skal sendes til serveren. Og vi starter prosessen fra Bilde 1 på nytt.

Trinn 13: Slutten …. Endelig

Vel, det har du; en fullstendig og grundig forklaring for å hjelpe deg med å sette opp din egen garderobe på nettet, eller bruke funksjonaliteten som er opprettet i Google Scripts for å utvide ditt eget prosjekt.

Det har vært en reise som har kodet dette prosjektet (og dokumentert gjennom dette Instructable), men jeg har hatt glede av prosessen og håper du vil like produktet. Jeg vil gjerne høre fra alle som foretar justeringer da Michael Jordan sier "Taket er taket", og jeg er enig i at denne applikasjonen ikke har noen grenser.