Garderobarrangör: 13 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:44

Oavsett om det handlar om att handla kläder eller att alltid bli ombedd att låna någon vara, det finns tillfällen du önskar att du kunde kika in i din garderob var som helst för att se om du har något liknande. Garderobarrangören gör just det OCH MER!

Detta är en one -stop -butik och är expansiv för många andra ändamål. My Wardrobe Organizer är en kombination av Google Sheets som en SQL -databas, Google Scripts för hantering av data och Google WebApp för en onlineportal till dessa data. Slutanvändaren kan se alla föremål, filtrera efter något specifikt, markera objekt som utlånade, hantera sin tvätt och hindra mamma från att köpa samma skjorta till jul varje år*.

(*Ingen garanti. Mödrar kommer att köpa vad de vill oavsett om du behöver det eller inte)

Med en snabb blick på webbdesignen i bilden ovan kan man känna igen en välbekant layout. The Wardrobe Organizer är inrättad som vilken vanlig klädwebbplats som helst. Detta gränssnitt bryts upp av avdelningar på topp och filter på sidan, vilket ger den vanliga användaren bekantskap med funktionalitet. OCH den är enkel att använda.

Steg 1: Konfigurera din egen kopia

Låt oss börja med att skapa din egen kopia av detta projekt.

Google Drive

Klicka på länken ovan för att ta dig till min nuvarande version av denna applikation.

Du kommer att se tre objekt i den här mappen: Ett Google -formulär, ett Google -ark och en mapp.

Högerklicka på Google Sheet och klicka på Gör en kopia.

Ange platsen för den här kopian på din egen Drive.

Efter att du har kopierat detta dokument genereras Google -formuläret automatiskt i samma mapp som du flyttade Google -bladet.

Om du vill skapa mappen (detta är nödvändigt för att samla in uppladdningar av objektbilderna) klickar du på det kopierade Google -formuläret så visas en uppmaning som ber dig återställa mappplatsen för uppladdningar.

Du har nu en kopia av detta dokument att arbeta med själv!

Steg 2: Översikt över Google Form

Nu när du har din egen version av den här applikationen, låt oss ta en titt runt.

Ditt Google -formulär är konfigurerat för att acceptera många olika typer av objekt. Tröjor, byxor, klänningar och skor har dock olika storleksbegränsningar. Därför kommer ett annat avsnitt i det här formuläret att fyllas i baserat på den avdelning som du skickar ditt objekt till. I min (manliga artikel) mall har jag skapat fem olika storlekskategorier. (För damartiklar, klicka här, det finns många fler).

Under varje storleksavsnitt etablerade jag en unik titel för varje parameter jag ska samla in. Vi vill inte ha flera kolumner i vår databas med namnet "Storlek" annars skulle vi inte kunna avgöra vilken typ av kläder den storleken gäller.

I slutet av varje avsnitt riktas användaren till den sista delen av det här formuläret: Plats. Jag valde personligen att lägga till Location för att bestämma saker på kemtvättarna, i tvättstugan, på deras plats eller de föremål där jag har låtit en vän låna. Detta gör att jag kan vara organiserad och aldrig känna att jag saknar ett plagg någonstans.

Som jag nämnde från början kan detta projekt byggas ut på en miljon olika sätt. Du kan använda den för inventering, ett mer exakt organisationsverktyg eller för att låna kläder strikt. Fälten och sektionerna du kan lägga till är oändliga så känn dig inte begränsad till det som finns i min form. (För damartiklarna klicka här)

Innan du laddar upp några av dina egna objekt, låt oss gå vidare till nästa steg för att säkerställa korrekt inlämning.

Steg 3: Google Scripts: (Server Code.gs) Titta först på data och kod

Om du klickar in i Google Kalkylark -dokumentet ser du många kolumner med data (och några rader kvar för demonstration). Under inlämning av formulär hoppas vissa avsnitt över, detta framgår av de saknade uppgifterna i vissa kolumner. Men ytterligare kolumner som ID, Standardplats, Vem och Uppdaterad har lagts till för att bättre spåra redigeringarna av dessa objekt.

Ett ID -fält har skapats när du skickade in formuläret för att möjliggöra en unik identifierare när du passerar denna databas. För att skapa detta fält, kommer vi att titta på Script Editor genom att klicka på Verktyg> Script Editor.

Med Script Editor öppen kommer du att märka 8 dokument i sidofältet i det här nya fönstret. Dessa dokument hjälper till att kontrollera back-end-process, front-end-skärmar och front-end-funktioner. Vi hoppar in i var och en (om du håller dig kvar) men just nu klickar du på Server Code.

I filen Server Code.gs finns det många funktioner:

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

onSubmit (e) - Den här funktionen kommer att konfigureras som den första funktionen som körs när ett Google -formulär skickar in. Du kan placera andra funktioner inuti denna funktion så att många olika processer kan hända.

onOpen (e) - Denna funktion kallas när Google Kalkylark öppnas. Det fyller ett nytt menyalternativ för att ge snabb åtkomst till programlänkarna och vyerna.

doGet ()- Den här funktionen anropas i webbappens adressanrop. När en användare surfar till den publicerade webbappen kommer den här koden att berätta för den sidan vad den ska visa. I det här fallet är det dokumentet Application.html.

include (filnamn) - Denna funktion används inuti HTML -sidor för att läsa andra dokument och infoga deras innehåll i ett korrekt HTML -format på en annan sida. Vi använder den för våra CSS.html- och JS.html -filer.

openApplication () och openLaundryApp () - Dessa funktioner innehåller koden som ska köras när en användare klickar på menyknapparna som läggs till i Google Sheets verktygsfält.

changeValueOnSubmit (e) och setIDOnSubmit (e)- Det här är de funktioner som vi ska titta på för tillfället. De ansvarar för att uppdatera vissa fält med standardvärden när formuläret först skickas.

Steg 4: Aktivera OnFormSubmit

Dessa två funktioner, changeValueOnSubmit (e) och setIDOnSubmit (e), måste anslutas till användaråtgärden för att skicka in ett formulär. För att göra det måste vi aktivera en Trigger.

Vi aktiverar utlösaren genom att klicka på Redigera> Aktuella projekts utlösare. Detta öppnar Google Developer Hub.

I det nedre högra hörnet av triggerpanelen finns en knapp Lägg till en trigger. Klicka här.

Vi kommer nu att konfigurera funktionen för att köra när ett formulär skickas in. I vårt fall har jag flera funktioner (changeValueOnSubmit (e) och setIDOnSubmit (e)) som jag lägger in i en onSubmit () -funktion så jag behöver bara ställa in en trigger. Därför kommer vi att välja onSubmit () och ställa in denna utlösare för att köra på formuläret skicka.

Vi har nu en arbetsform som fyller i ett Google -blad med unika identifierare och anger standardvärden.

Du kan nu ladda upp dina egna objekt med hjälp av Google -formuläret. (Detta är inte nödvändigt för att fortsätta eftersom det redan finns demovärden i). Vi kommer nu att dyka in i användargränssnittet.

Steg 5: Konfigurera användargränssnittet

VÄLKOMMEN! Vi har äntligen nått den del du kom efter, användargränssnittet !!!!

Vid första ögonkastet finns det ingenting här. Vi har inte ringt ännu. För att ladda sidan snabbare bestämde jag mig för att inte plåga den första sidan med ALLA dina objekt och låta dig klicka på det du vill se snabbare. Eftersom detta är fallet finns det inga objekt i huvudinnehållsfältet och inga filter i sidofältet. Låt oss klicka på Alla för att se vad som finns i vår databas.

Vi har nu laddat varje objekt i vår databas till huvudinnehållsfältet. Du kommer att se bilder, ID -nummer, färg, storlekar och platser. Platsfältet kan uppdateras här! Om du bestämmer dig för att låna ut objektet kan du välja det alternativet, du kan placera det i din garderob, byrå eller tvättstuga.

Och i vårt sidofält har vi alla möjliga fält för varje klädesplagg i vår nya fråga. Tänk dig att ha 20 olika storlekar på det här sidofältet, det skulle inte vara särskilt effektivt, så låt oss begränsa vår sökning genom att klicka på Tillbehör.

Nu när vi har laddat tillbehör, ta en titt på sidofältet. Den har justerat till endast 3 fält, eftersom det här är parametrarna som gäller för varje objekt i den här frågan. Jag ska göra en sortering efter färg. Genom att klicka på färg visas en listruta. Här kan jag antingen skriva in den färg jag vill ha och sedan välja den, eller om jag ser mitt alternativ direkt klickar jag bara på det. Jag valde rött för denna demonstration. Klicka på Apply Filter längst ned i sidofältet så uppdateras huvudinnehållet som visar objekt som har färgen Röd som färgparameter.

Jag nämnde tidigare denna databas hjälper mig att hantera mina objekt utlånade och i min tvätt. För att göra det lite enklare skapade jag tvättläget istället för att manuellt klicka på varje nedrullningsplats på denna huvudsida. Återgå till Google Sheet -sidan och under App View ser du Tvättläge. Detta alternativ kommer att dra upp en mindre modal som endast visar föremål med platsen för tvätt. Jag kan nu markera alla dessa objekt som standard som placerar dem tillbaka på sina platser där de normalt lagras.

Steg 7: Projektet slutfört

GRATTIS

För dig som bara vill ha en fungerande databas för att hantera dina objekt, välkommen till din Online Organizer. För de nyfikna sinnen som är intresserade av koden bakom denna applikation. Håll mig kvar när jag bryter ner den.

*Du kan radera testobjekten efter att du har angett minst ett av dina egna objekt i databasen. (Jag förklarar senare om du håller dig kvar).

Steg 8: Steg 1: Back-End-koden (serverkod.gs)

Tidigare öppnade vi Server Code.gs -filen och jag gav en snabb genomgång av var och en av funktionerna eftersom deras syfte var att betjäna alla de objekt du just konfigurerade men nu kommer vi att bryta ner dem några av de funktioner och verktyg som kallas för att göra denna kod till en framgång.

1) Bordskörning:

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

• Denna kod är en grund för att korsa ett Google -blad. Jag kallar arket med namn i stället för nummer så att om ark raderas eller ordnas om efter funktion fortfarande kan fungera korrekt.
• I denna kod samlar jag bara intervallet för all data i tabellen.

2) Tilldela ett 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);

• Jag bad tidigare att demovärdena ska stå kvar i tabellen tills användaren har skickat in minst ett värde för sig själv. Detta beror på att Auto ID -generatorn förlitar sig på det sista värdet i databasen som ska fyllas i.
• Jag hämtar den sista 2: a till sista raden eftersom den sista raden är vårt nya värde och den första kolumnen för ID -värdet.
• Jag genererar sedan slumpmässigt ett tal mellan 5 och 15 och lägger till det till det sista värdet. *
• Slutligen placerar jag detta värde i ID -kolumnen i den sista raden.
• Därefter kallar vi funktionen changeValueOnSubmit (e).

* Jag valde 5-15 för att möjliggöra framtida märkning och Google Home-integration så att siffrorna inte kommer att vara tillräckligt nära för att orsaka förvirring på galgar eller klädmärken eller streckkoder.

3) Ändra URL -värde:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Var förvarar du denna klädsel?"]; var ColD = ColumnID _ ("Artikelbild") +1; var ColLoc = ColumnID _ ("Standardplats")+1; DataChange = DataChange.toString (). Ersätt ("open?", "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 skickar in ett foto via ett Google -formulär är URL: en införd i Google Kalkylark en länk till det faktiska dokumentet. I vårt fall, när vi skapar en HTML -sida vill vi att länken bara är bilden.
• Genom att ändra "öppen?" del av webbadressen till "uc? export = view &" har vi skapat en länk till bilden istället.
• Vi kommer igen att placera detta nya värde på platsen för den aktuella artikelbildslänken.
• Jag ställer också in "Standardplats" och "Aktuell plats" för objektet till samma sak i databasen. Detta kommer att hjälpa när jag försöker använda mitt tvättläge.

• Vi kommer att dyka in i det på nästa sida men det här är vår första blick på funktionen ColumnID_ () som jag skapade.

  Denna funktion använder kolumnnamn för att översätta det till kolumnens heltal, vilket är användbart för områdesamtal som kräver ett kolumnnummer i stället för namn

4) SpreadsheetApp.getUI ()

• I den andra bilden kan du se användningen av SpreadsheetApp.getUI () som den använde för att skapa ett tillägg i verktygsfältmenyn till Google Sheet.
• . GetUI () -funktionen hjälper också till att skapa en modal popup som används för tvättläge och som en snabb länk till webbplatsens gränssnitt.

5) HTMLService

• Det finns två typer av HTMLServices som används i den här koden: Mall och HTMLOutput
• Mall gör det möjligt att infoga kod inuti HTML -koden så att information som kommer från en server kan fyllas i när sidan anropas.
• HTML -utmatning visar enkla HTML -sidor.
• Vi har också metoden inklusive () som gör att vi kan skapa flera HTML -filer och kombinera dem i en mallad HTML -fil genom att returnera innehållet i filen i ett HTML -format snarare än en sträng.

Jag har bifogat ett dokument som är konfigurerat som Google App Scripts Documentation för att göra det bekant med hur källkod och funktionalitet förklaras i Google Apps.

Steg 9: Steg 2: Back-End-koden Del 2 (serversamtal.gs)

Nu har vi angett Server Calls.gs. Dessa funktioner används främst i HTML -JavaScript så att de har separerats från kod som främst används i backend som finns i Server Code.gs.

Bild 1) Globala variabler:

Bild 2) hämtar objekt:

Bild 3) fetchItemsQry

Bild 4) filterItems

Bild 5) fetchFiltersWithQry

Bild 6) ColumnID och CacheCalls

Det finns så mycket att prata om med var och en av dessa. Och för att bryta ner koden och förklara vad som händer behövde jag lite mer skrivutrymme. Bifogat ett dokument för kodnedbrytning av ServerCalls.gs

Detta dokument är konfigurerat som Google App Scripts Documentation och gör till och med länkar till liknande objekt.

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

HTML -koden blir väldigt olycklig i en instruktionsdialogruta. Så följ gärna bilderna ovan.

1) I sidhuvudet på sidan Application.html upprättar vi en titel och kallar vår CSS.html -sida för att laddas.

*Eftersom vi är en mallad HTML -sida kan vi lägga till mer kod i detta dokument utan att störa den aktuella skärmen genom att använda den tidigare nämnda metoden include (pageName) som finns i Server Code.gs

Huvudrubriken finns också på denna bild. Du kan ändra rubriken här och ange "[Your Name]'s Wardrobe" eller vad du än vill känna igen den här sidan som.

2) Strax under rubriken är vårt översta navigeringsfält.

Denna navigeringsfält innehåller alla artikeltyper som anges i artikelbladet inuti våra Google Kalkylark.

En inline -funktion kallas för att hämta en uppsättning av dessa objekt. Sedan körs en loop för att inkludera vart och ett av dessa alternativ som en menyknapp, komplett med en åtgärdskod så när en användare klickar på menyknappen kommer respektive objekt att visas i kroppsområdet.

3) Huvudkroppen.

Det finns 4 portioner till denna del. En textutmatning, sidofältets filter, huvudkroppsbilderna och JS inkluderar.

Textutmatningen gör att användaren kan se en snabb textvy för vilken typ av objekt de tittar på för närvarande istället för att hänvisa till menyalternativet de valde.

Sidofältets filter innehåller de många tillgängliga filtren för den typ av objekt som en användare har valt. Dessa filter återspeglar alla tillgängliga alternativ för denna kategori samt hur många artiklar som faller under det kategorivärdet. Detta sidofält fylls med JavaScript -kod (som kommer att diskuteras härnäst).

Huvudkroppen är för närvarande tom, men precis som filtren kommer den att fyllas med objektrutor som beskriver objektets ID, färg, storlek och plats med en bild inkluderad när användaren väljer en kategori och JavaScript -koden fyller detta område.

Slutligen inkluderar (JS), låt oss ta en titt på detta i nästa steg.

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

Om du tyckte att serverkoden var en tung sektion kan du ladda detta.

Här kombinerar vi vår HTML och SeverCode med användarinteraktioner. Varje objekt som klickas måste bearbetas här för att få rätt data och returnera det i ett läsbart format. Så låt oss ta en titt på våra första samtal:

Skriptet kallar: Jag använder tre olika bibliotek för detta projekt; jquery, bootstrap och ett speciellt tillägg för bootstrap-select. Dessa bibliotek möjliggör formatering av objekt och enklare samtal till elementen i HTML -koden.

Min nästa viktiga JavaScript -rad är nedan:

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

Här inaktiverar jag enter -nyckeln från att utlösa någon av formulärerna. Som i det här fallet tilldelas Google Web Apps endast en sidadress. En enter -press skulle lägga till data till HTML -adressen och försöka omdirigera användaren. Genom att inaktivera detta tillåter du din JavaScript -kod att göra allt arbete.

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

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

Här är två funktioner som ringer till filen Server Code.gs. Linjen:

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

har många arbetsdelar till det men skelettet är rotat från "google.script.run" som berättar för HTML -sidan att följande funktion finns på servern.

• Den sista biten i den här koden är funktionen som ska köras. I det här exemplet ServerRemoveFilter ()
• Genom att lägga till en withSuccessHandler () vet HTML -sidan nu vad de ska göra med data som returneras, och detta är för att köra funktionen med parentes.
• Detsamma gäller för withFailureHandler ()

Nu när vi har brutit ner serverkodssamtalet, låt oss ta en snabb titt på vad som händer när dessa serversamtal lyckas och misslyckas.

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

Det går inte att hämta klädesplagg just nu. FEL: " + error.message +"

");} funktionen FailDBUpdate (fel) {$ ("#meddelande-box "). html ("

Du har inte tillgång till att ändra platsen. FEL: " + error.message +"

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

Jag skapade en mycket enkel konsollogg för att indikera framgång när platsfunktionen körs som du kan se som allGood ().

Vid hanteringen av felen matar dessa två funktioner ut felmeddelandet där användaren kan se genom att använda ett jQuery-anrop till HTML-objektet med ett ID för "meddelande-box".

Låt oss nu gå ner till det jobbiga arbetet

Steg 12: Steg 5: JavaScript-kod-klicka-åtgärder (JS.html)

Den övre menyraden har alternativ för varje artikeltyp. Funktionen de kör på klick är:

function filterType (artikel, id) {$ ("ul.navbar-nav li.active"). removeClass ("active"); $ ("#currentArticle"). html ("// HTML -KOD HÄR");

updateSideBar = true;

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

Vi kan se i den här koden att vi har en google.script.run som ringer till servern för att hämta information. Framgångsfunktionen för detta samtal är updateItems ().

BILD 1 (med den tunga HTML -koden inom denna funktion är det svårt att kopiera strikt koden, utan att det uppstår en röra i den här rutan)

I updateItems () -koden har vi många saker som händer. Återigen måste vi gå igenom objektet som returnerades till oss och lägga till varje objekt på vår huvudsida.

HTML -koden läggs till som matriser för att bryta upp koden och göra det lättare att läsa och se var itemData infogas.

I slingan för varje objekt tar jag bort fält som jag inte vill se i beskrivningen som Standard, tidsstämpel och bild -URL. Jag tar bort bild -URL från beskrivningen eftersom den läggs till som href till en tagg istället. När denna information är samlad skickas den till huvuddelen med funktionen jQuery.append ().

Efter att alla objekt har lagts till på sidan skickas denna fråga med objekt till serverkoden igen för att sortera och returnera filteralternativen enligt bild 2.

BILD 2 (uppdatering av sidofältet)

Mycket liknande funktionen updateItems (), vi har återigen matriser med HTML -kod och en loop för alla filteralternativ. Den enda märkbara ändringen är jQuery.selectpicker ("uppdatera"). Denna funktion kommer från skriptbiblioteket som vi inkluderade i det sista steget. Det gör det möjligt för programmeraren att skriva en enkel markerad HTML och låta biblioteket uppdatera den så att den inkluderar sökbar funktion samt CSS -koden.

BILD 3 (filtrering med sidofältet)

Slutligen har vi updateFilter (formData) -funktionen. Detta används när ett formulär skickas från sidofältet. Vi börjar med att använda en jQuery -funktion.serializeArray () detta läser HTML -koden för elementet som definieras i vårt fall ett formulär och returnerar värdena i en sträng som ska skickas till servern. Och vi startar processen från bild 1 om igen.

Steg 13: Slutet …. Slutligen

Jo där har du det; en fullständig och grundlig förklaring som hjälper dig att skapa din egen onlinegarderob eller använda funktionen som skapats i mina Google Scripts för att utöka ditt eget projekt.

Det har varit en resa som kodar detta projekt (och dokumenterar genom detta instruerbara) men jag har haft processen och hoppas att du kommer att gilla produkten. Jag vill gärna höra från alla som gör justeringar när Michael Jordan säger "Taket är taket" och jag håller med om att den här applikationen inte har några gränser.