Kledingkast Organizer: 13 Stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Of het nu gaat om het kopen van kleding of om altijd gevraagd te worden om een item te lenen, er zijn momenten waarop je zou willen dat je overal in je kast zou kunnen kijken om te zien of je iets soortgelijks hebt. De garderobe-organizer doet precies dat EN MEER!

Dit is een one-stop-shop en is uitgebreid voor vele andere doeleinden. My Wardrobe Organizer is een combinatie van Google Spreadsheets als SQL-database, Google Scripts voor het verwerken van de gegevens en Google WebApp voor een online portaal naar deze gegevens. De eindgebruiker kan alle items zien, op iets specifieks filteren, items markeren als uitgeleend, hun was beheren en voorkomen dat mama je elk jaar hetzelfde shirt voor Kerstmis koopt*.

(*Geen garantie. Moeders zullen kopen wat ze willen, of je het nu nodig hebt of niet)

Als je een snelle blik werpt op het website-ontwerp in de afbeelding hierboven, zou je een bekende lay-out kunnen herkennen. De Wardrobe Organizer is opgezet zoals elke gewone kledingwebsite. Opgesplitst door afdelingen bovenaan en filters aan de zijkant, brengt deze interface vertrouwdheid met functionaliteit voor de toevallige gebruiker. EN het is eenvoudig te gebruiken.

Stap 1: Uw eigen exemplaar instellen

Laten we beginnen met het maken van uw eigen kopie van dit project.

Google Drive

Klik op de bovenstaande link om naar mijn huidige versie van deze applicatie te gaan.

U ziet 3 items in deze map: een Google-formulier, een Google-spreadsheet en een map.

Klik met de rechtermuisknop op het Google-spreadsheet en klik op Een kopie maken.

Stel de Locatie van deze kopie in op je eigen Drive.

Nadat u dit document hebt gekopieerd, wordt het Google-formulier automatisch gegenereerd in dezelfde map waarin u het Google-spreadsheet hebt verplaatst.

Om de map te maken (dit is nodig voor het verzamelen van uploads van de itemfoto's), klikt u op het gekopieerde Google-formulier en verschijnt er een prompt waarin u wordt gevraagd de maplocatie voor uploads te herstellen.

U heeft nu een kopie van dit document om zelf aan te werken!

Stap 2: Overzicht van Google-formulier

Nu u uw eigen versie van deze applicatie heeft, gaan we eens rondkijken.

Uw Google-formulier is ingesteld om veel verschillende soorten items te accepteren. Overhemden, broeken, jurken en schoenen hebben echter allemaal verschillende maatbeperkingen. Daarom zal een ander gedeelte van dit formulier worden ingevuld op basis van de afdeling waaronder u uw item indient. In mijn sjabloon (mannelijk artikel) heb ik 5 verschillende maatcategorieën gemaakt. (Klik hier voor damesartikelen, er zijn er nog veel meer).

Onder elke maatsectie heb ik een unieke titel vastgesteld voor elke parameter die ik ga verzamelen. We willen niet meerdere kolommen in onze database met de naam "Maat" hebben, anders zouden we niet kunnen bepalen voor welk type kleding die maat geldt.

Aan het einde van elke sectie wordt de gebruiker doorverwezen naar het laatste deel van dit formulier: Locatie. Ik heb er persoonlijk voor gekozen om Locatie toe te voegen om items te bepalen bij de stomerij, in de wasserij, op hun plaats of die items waarin ik een vriend heb laten lenen. Hierdoor kan ik georganiseerd zijn en heb ik nooit het gevoel dat ik ergens een kledingstuk mis.

Zoals ik vanaf het begin al zei, kan dit project op een miljoen verschillende manieren worden uitgebreid. Je kunt het gebruiken voor inventaris, een nauwkeuriger organisatietool of voor het strikt lenen van kleding. De velden en secties die je kunt toevoegen zijn eindeloos, dus voel je niet beperkt tot wat er in mijn formulier staat. (Voor de Dames Artikelen klik hier)

Voordat u een paar van uw eigen items gaat uploaden, gaan we verder met de volgende stap om ervoor te zorgen dat deze correct wordt ingediend.

Stap 3: Google Scripts: (Server Code.gs) Kijk eerst naar de gegevens en code

Als u in het Google Spreadsheets-document klikt, ziet u veel kolommen met gegevens (en enkele rijen, achtergelaten voor demonstratie). Tijdens het indienen van formulieren worden sommige secties overgeslagen, dit blijkt uit de ontbrekende gegevens in sommige kolommen. Maar er zijn extra kolommen toegevoegd, zoals ID, Standaardlocatie, Wie en Bijgewerkt om de bewerkingen van deze items beter bij te houden.

Er is een ID-veld gemaakt toen u het formulier indiende om een unieke identificatie mogelijk te maken bij het doorzoeken van deze database. Om dit veld te maken, bekijken we de Scripteditor door op Extra>Scripteditor te klikken.

Met de Script Editor geopend, ziet u 8 documenten in de zijbalk van dit nieuwe venster. Deze documenten helpen bij het beheersen van het back-endproces, front-enddisplays en front-endfunctionaliteit. We zullen in elk ervan springen (als je blijft hangen), maar klik nu op Servercode.

In het bestand Server Code.gs zijn er veel functies:

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

onSubmit(e) - Deze functie wordt geconfigureerd als de eerste functie die wordt uitgevoerd wanneer een Google-formulier wordt verzonden. U kunt andere functies binnen deze functie plaatsen om veel verschillende processen te laten plaatsvinden.

onOpen (e) - Deze functie wordt aangeroepen wanneer Google Spreadsheets wordt geopend. Het vult een nieuwe menuoptie om snelle toegang tot de toepassingskoppelingen en weergaven mogelijk te maken.

doGet()- Deze functie wordt aangeroepen bij de webapp-adresaanroep. Wanneer een gebruiker naar de gepubliceerde web-app bladert, vertelt deze code die pagina wat er moet worden weergegeven. In dit geval is dat het document Application.html.

include(fileName) - Deze functie wordt binnen HTML-pagina's gebruikt om andere documenten te lezen en hun inhoud in een juiste HTML-indeling op een andere pagina in te voegen. We gebruiken het voor onze CSS.html- en JS.html-bestanden.

openApplication() en openLaundryApp() - Deze functies bevatten de code die moet worden uitgevoerd wanneer een gebruiker op de menuknoppen klikt die zijn toegevoegd aan de Google Spreadsheet-werkbalk.

changeValueOnSubmit(e) en setIDOnSubmit(e)- Dit zijn de functies waar we nu naar zullen kijken. Ze zijn verantwoordelijk voor het bijwerken van bepaalde velden met standaardwaarden wanneer het formulier voor het eerst wordt ingediend.

Stap 4: OnFormSubmit inschakelen

Deze twee functies, changeValueOnSubmit(e) en setIDOnSubmit(e), moeten worden gekoppeld aan de gebruikersactie van het indienen van een formulier. Om dit te doen, moeten we een trigger inschakelen.

We schakelen de trigger in door op Bewerken > Triggers van huidig project te klikken. Hiermee wordt de Google Developer Hub geopend.

In de rechterbenedenhoek van het triggerdashboard bevindt zich een knop Een trigger toevoegen. Klik hier.

We zullen nu instellen dat de functie wordt uitgevoerd wanneer een formulier wordt verzonden. In ons geval heb ik meerdere functies (changeValueOnSubmit(e) en setIDOnSubmit(e)) die ik in een onSubmit()-functie plaats, dus ik hoef maar 1 trigger in te stellen. Daarom zullen we onSubmit() selecteren en deze trigger instellen om On form submission uit te voeren.

We hebben nu een werkformulier dat een Google-spreadsheet vult met unieke ID's en standaardwaarden instelt.

U kunt nu uw eigen items uploaden met behulp van het Google Formulier. (Dit is niet nodig om verder te gaan omdat er al demo-waarden in zijn). We duiken nu in de gebruikersinterface.

Stap 5: De gebruikersinterface instellen

WELKOM! We hebben eindelijk het onderdeel bereikt waar je voor kwam, de gebruikersinterface!!!!

Op het eerste gezicht is er hier niets. We hebben nog niet gebeld. Om de pagina sneller te laden heb ik besloten om de eerste pagina niet te plagen met AL je items en je sneller te laten klikken op wat je wilt zien. Aangezien dit het geval is, zijn er geen items in het hoofdinhoudsveld en geen filters in de zijbalk. Laten we op Alles klikken om te zien wat er in onze database staat.

We hebben nu elk item in onze database in het hoofdinhoudsveld geladen. U ziet foto's, ID-nummers, kleur, maten en locaties. Het locatieveld kan hier worden bijgewerkt! Als je besluit het artikel uit te lenen, kun je die optie selecteren, je kunt het in je kast, dressoir of wasgoed plaatsen.

En in onze zijbalk hebben we alle mogelijke velden voor elk kledingstuk in onze nieuwe zoekopdracht. Stelt u zich eens voor dat u 20 verschillende formaatopties in deze zijbalk heeft, het zou niet erg effectief zijn, dus laten we onze zoekopdracht verfijnen door op Accessoires te klikken.

Nu we Accessoires hebben geladen, kijk eens in de zijbalk. Het is aangepast naar slechts 3 velden, aangezien dit de parameters zijn die van toepassing zijn op elk item in deze query. Ik ga sorteren op kleur. Door op kleur te klikken, verschijnt een vervolgkeuzelijst. Hier kan ik de gewenste kleur typen en deze vervolgens selecteren, of als ik mijn optie meteen zie, klik ik erop. Ik heb Rood gekozen voor deze demonstratie. Klik op Filter toepassen onder aan deze zijbalk en de hoofdinhoud wordt vernieuwd en toont u de items met de kleur Rood als hun kleurparameter.

Ik heb eerder vermeld dat deze database me helpt bij het beheren van mijn uitgeleende artikelen en in mijn wasgoed. Om het een beetje makkelijker te maken, heb ik de wasmodus gemaakt in plaats van handmatig op elke vervolgkeuzelijst op deze hoofdpagina te klikken. Keer terug naar de Google Spreadsheet-pagina en onder App-weergave ziet u de wasmodus. Met deze optie wordt een kleinere modaal weergegeven die alleen items toont met de locatie van Wasserij. Ik kan nu al deze items als standaard markeren, waardoor ze terug worden geplaatst op hun locaties waar ze normaal zijn opgeslagen.

Stap 7: Project voltooid

PROFICIAT

Voor degenen onder u die gewoon een werkende database willen om uw items te beheren, welkom bij uw Online Organizer. Voor die nieuwsgierige geesten die geïnteresseerd zijn in de code achter deze applicatie. Blijf erbij terwijl ik het afbreek.

*U bent vrij om de testitems te verwijderen NADAT u ten minste één van uw eigen items in de database heeft ingevoerd. (Ik zal het later uitleggen als je in de buurt blijft).

Stap 8: Stap 1: de back-endcode (servercode.gs)

Eerder openden we het Server Code.gs-bestand en ik gaf een kort overzicht van elk van de functies, omdat hun doel was om elk van de items te bedienen die u zojuist hebt ingesteld, maar nu zullen we ze een aantal van de functionaliteit en hulpprogramma's noemen die worden genoemd om deze code tot een succes te maken.

1) Tafelverplaatsing:

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

• Deze code is een basis voor het doorlopen van een Google-spreadsheet. Ik noem het blad bij naam in plaats van nummer, zodat als bladen worden verwijderd of herschikt op functie, nog steeds goed kan werken.
• In deze code verzamel ik alleen het bereik voor alle gegevens in de tabel.

2) Een ID toewijzen:

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

• Ik heb eerder gevraagd om de demo-waarden in de tabel te laten staan totdat de gebruiker ten minste één waarde voor zichzelf heeft ingediend. Dit komt omdat de Auto ID-generator afhankelijk is van de laatste waarde in de database om te vullen.
• Ik haal de laatste 2e tot de laatste rij op omdat de laatste rij onze nieuwe waarde is en de 1e kolom voor de ID-waarde.
• Ik genereer dan willekeurig een getal tussen 5 en 15 en voeg het toe aan de laatste waarde. *
• Als laatste plaats ik deze waarde in de ID-kolom van de laatste rij.
• Vervolgens noemen we de functie changeValueOnSubmit(e).

* Ik heb 5-15 gekozen om toekomstige etikettering en Google Home-integratie mogelijk te maken, zodat de cijfers niet dicht genoeg bij elkaar komen om verwarring te veroorzaken op hangers of kledinglabels of streepjescodes.

3) URL-waarde wijzigen:

var DataChange = e.namedValues["Item Picture"];var DefaultLocation = e.namedValues["Waar bewaart u dit kledingstuk?"]; var ColD = ColumnID_("Item Afbeelding") +1; var ColLoc = ColumnID_("Standaardlocatie")+1;DataChange = DataChange.toString().replace("open?", "uc?export=view&"); e.source.getActiveSheet().getRange(e.range.rowStart, Cold).setValue(DataChange); e.source.getActiveSheet().getRange(e.range.rowStart, ColLoc).setValue(DefaultLocation);

• Bij het indienen van een foto via een Google-formulier is de URL die in Google Spreadsheets is ingevoegd, een link naar het eigenlijke document. In ons geval, terwijl we een HTML-pagina maken, willen we dat de link alleen de afbeelding is.
• Door de "openen?" gedeelte van de URL naar "uc?export=view&" hebben we in plaats daarvan een link naar de afbeelding gemaakt.
• We zullen deze nieuwe waarde opnieuw plaatsen op de locatie van de huidige itemafbeelding-link.
• Ik stel ook de "Standaardlocatie" en "Huidige locatie" van het item in op hetzelfde in de database. Dit zal helpen wanneer ik mijn wasmodus probeer te gebruiken.

• We zullen er op de volgende pagina in duiken, maar dit is onze eerste blik op de functie ColumnID_() die ik heb gemaakt.

  Deze functie gebruikt Kolomnamen om het te vertalen in het kolom-geheel getal, wat handig is voor het aanroepen van een bereik waarvoor een kolomnummer is vereist in plaats van een naam

4) SpreadsheetApp.getUI()

• In de tweede afbeelding ziet u het gebruik van de SpreadsheetApp.getUI() zoals deze werd gebruikt om een Toolbar Menu-toevoeging aan het Google-spreadsheet te maken.
• De.getUI()-functie helpt ook bij het maken van een modale pop-up die wordt gebruikt voor de wasmodus en als een snelle link naar de website-interface.

5) HTML-service

• Er zijn twee soorten HTMLServices die in deze code worden gebruikt: Sjabloon en HTMLOutput
• Met sjabloon kan code in de HTML-code worden ingevoegd, zodat informatie die van een server komt, kan worden ingevuld wanneer de pagina wordt opgeroepen.
• HTML-uitvoer geeft eenvoudige HTML-pagina's weer.
• We hebben ook de methode include() waarmee we meerdere HTML-bestanden kunnen maken en deze kunnen combineren in één HTML-sjabloonbestand door de inhoud van het bestand in een HTML-indeling te retourneren in plaats van een tekenreeks.

Ik heb een document bijgevoegd dat is opgezet als Google App Scripts Documentation om bekendheid te geven aan hoe broncode en functionaliteit worden uitgelegd in Google Apps.

Stap 9: Stap 2: de back-endcode deel 2 (Server Calls.gs)

Nu hebben we de Server Calls.gs ingevoerd. Deze functies worden voornamelijk gebruikt in HTML JavaScript, dus ze zijn gescheiden van code die voornamelijk wordt gebruikt in de backend die zich in Server Code.gs bevindt.

Afbeelding 1) Globale variabelen:

Afbeelding 2) items ophalen:

Afbeelding 3) fetchItemsQry

Afbeelding 4) filterItems

Afbeelding 5) fetchFiltersWithQry

Afbeelding 6) ColumnID en CacheCalls

Er is zoveel om over te praten met elk van deze. En om de code op te splitsen en uit te leggen wat er aan de hand is, had ik wat meer typruimte nodig. Bijgevoegd is een document voor de uitsplitsing van de code van de ServerCalls.gs

Dit document is opgezet als Google App Scripts-documentatie en maakt zelfs koppelingen naar vergelijkbare objecten.

Stap 10: Stap 3: de HTML-code (Application.html)

HTML-code wordt erg ongelukkig in het dialoogvenster van een Instructable. Dus volg alstublieft de bovenstaande foto's.

1) In de header van de Application.html-pagina stellen we een titel vast en roepen we onze CSS.html-pagina op om te laden.

* Omdat het een HTML-pagina met een sjabloon is, kunnen we meer code aan dit document toevoegen zonder het huidige scherm te vervuilen door de eerder genoemde methode include (pageName) te gebruiken die te vinden is in Server Code.gs

Het hoofdkoptekstvak is ook te vinden in deze afbeelding. U kunt hier de koptekst wijzigen en "[Uw naam]'s Garderobe" invoeren of iets anders waarin u deze pagina wilt herkennen.

2) Net onder de koptekst bevindt zich onze bovenste navigatiebalk.

Deze navigatiebalk bevat alle artikeltypen zoals vermeld op het artikelblad in onze Google Spreadsheets.

Er wordt een inline-functie aangeroepen om een array van deze items op te halen. Vervolgens wordt een lus uitgevoerd om elk van deze opties als een menuknop op te nemen, compleet met een actiecode, zodat wanneer een gebruiker op de menuknop klikt, de respectieve items in het hoofdgedeelte verschijnen.

3) Het hoofdgedeelte.

Dit deel bestaat uit 4 porties. Een tekstuitvoer, het zijbalkfilter, de hoofdtekstafbeeldingen en de JS omvatten.

Met de tekstuitvoer kan de gebruiker een snelle tekstweergave zien voor welk type items ze momenteel bekijken in plaats van te verwijzen naar de menu-optie die ze hebben geselecteerd.

Het zijbalkfilter bevat de vele filters die beschikbaar zijn voor het type item dat een gebruiker heeft geselecteerd. Deze filters geven alle beschikbare opties voor deze categorie weer, evenals hoeveel items onder die categoriewaarde vallen. Deze zijbalk is gevuld met JavaScript-code (die hierna zal worden besproken).

Het hoofdgedeelte is momenteel leeg, maar net als de filters wordt het gevuld met itemvakken met details over de ID, kleur, maat en locatie van het item met een afbeelding erin zodra de gebruiker een categorie selecteert en de JavaScript-code dit gebied vult.

Eindelijk de include (JS), laten we dit eens bekijken in de volgende stap.

Stap 11: Stap 4: de JavaScript-code (JS.html)

Als je dacht dat de servercode een zware sectie was, neem dan een lading hiervan.

Hier combineren we onze HTML en SeverCode met gebruikersinteracties. Elk item waarop wordt geklikt, moet hier worden verwerkt om de juiste gegevens te krijgen en terug te sturen in een leesbaar formaat. Laten we dus eens kijken naar onze eerste oproepen:

Het script roept: Ik gebruik 3 verschillende bibliotheken voor dit project; jQuery, bootstrap en een speciale add-on voor bootstrap-select. Deze bibliotheken zorgen voor de opmaak van objecten en eenvoudiger aanroepen van de elementen binnen de HTML-code.

Mijn volgende belangrijke regel JavaScript staat hieronder:

$(document).toetsdruk(function(event){ if (event.which == '13') { event.preventDefault(); } });

Hier schakel ik de enter-toets uit om een van de formulieren te activeren. Zoals in dit geval wordt aan Google Web Apps alleen hun adres voor één pagina toegewezen. Een enter-pers zou gegevens toevoegen aan het HTML-adres en proberen de gebruiker om te leiden. Door dit uit te schakelen, laat je je JavaScript-code al het werk doen.

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

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

Hier zijn twee functies die het bestand Server Code.gs aanroepen. De lijn:

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

heeft veel werkende onderdelen, maar het skelet is geroot van " google.script.run", wat de HTML-pagina vertelt dat de volgende functie op de server staat.

• Het laatste stukje van deze code is de functie die moet worden uitgevoerd. In dit voorbeeld ServerRemoveFilter()
• Door een withSuccessHandler() toe te voegen, weet de HTML-pagina nu wat te doen met de gegevens die worden geretourneerd, en dit is om de functie tussen haakjes uit te voeren.
• Hetzelfde geldt voor de withFailureHandler()

Nu we de servercode-aanroep hebben afgebroken, laten we een snelle blik werpen op wat er gebeurt als deze serveraanroep slaagt en faalt.

function allGood(e){ console.log("Succes op server"); } functie onFailure(fout){ $("#message-box").html("

Kan op dit moment geen kledingartikelen ophalen. FOUT: " + error.bericht +"

"); } functie FailDBUpdate(fout){ $("#message-box").html("

U heeft geen toegang om de locatie te wijzigen. FOUT: " + error.bericht +"

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

Ik heb een heel eenvoudig consolelogboek gemaakt om succes aan te geven wanneer de locatiefunctie wordt uitgevoerd, die u kunt zien als allGood().

Bij het afhandelen van de fouten geven deze twee functies het foutbericht weer waar de gebruiker kan zien door een jQuery-aanroep naar het HTML-object te gebruiken met een ID van "message-box".

Laten we nu beginnen met het gruizige werk

Stap 12: Stap 5: de JavaScript Code-Click Actions (JS.html)

De bovenste menubalk heeft opties voor elk artikeltype. De functie die ze uitvoeren op klik is:

functie filterType(artikel, id){ $("ul.navbar-nav li.active").removeClass("active"); $("#currentArticle").html(" //HTML-CODE HIER");

updateSideBar = waar;

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

We kunnen in deze code zien dat we een google.script.run hebben die naar de server roept om informatie op te halen. De succesfunctie voor deze aanroep is updateItems().

AFBEELDING 1 (met de zware HTML-code binnen deze functie is het moeilijk om de code strikt te kopiëren, zonder een puinhoop in dit vak)

In de updateItems()-code gebeurt er veel. We moeten opnieuw door het object gaan dat naar ons is teruggestuurd en elk item toevoegen aan onze hoofdpagina.

De HTML-code wordt toegevoegd als arrays om de code op te splitsen en het gemakkelijker te maken om te lezen en te zien waar itemData wordt ingevoegd.

In de loop van elk item verwijder ik velden die ik niet in de beschrijving wil zien, zoals standaard, tijdstempel en afbeeldings-URL. Ik verwijder de afbeeldings-URL uit de beschrijving omdat deze in plaats daarvan als href aan een tag wordt toegevoegd. Zodra deze informatie is verzameld, wordt deze naar de hoofdtekst gestuurd met behulp van de jQuery.append()-functie.

Nadat alle items aan de pagina zijn toegevoegd, wordt deze query van items opnieuw naar de servercode verzonden om de filteropties te sorteren en terug te sturen, zoals te zien is in Afbeelding 2.

AFBEELDING 2 (bijwerken van de zijbalk)

Zeer vergelijkbaar met de functie updateItems() hebben we opnieuw arrays van HTML-code en een lus voor alle filteropties. De enige merkbare verandering is de jQuery.selectpicker('refresh'). Deze functie komt uit de scriptbibliotheek die we in de laatste stap hebben opgenomen. Het stelt de programmeur in staat om een eenvoudige geselecteerde HTML te schrijven en de bibliotheek deze te laten updaten om zowel een doorzoekbare functie als de CSS-code op te nemen.

AFBEELDING 3 (filteren met de zijbalk)

Ten slotte hebben we de functie updateFilter(formData). Dit wordt gebruikt wanneer een formulier vanuit de zijbalk wordt ingediend. We beginnen met het gebruik van een jQuery-functie.serializeArray() deze leest de HTML-code van het element dat in ons geval een formulier is gedefinieerd en retourneert de waarden in een tekenreeks die naar de server moet worden verzonden. En we beginnen het proces vanaf Afbeelding 1 helemaal opnieuw.

Stap 13: Het einde… eindelijk

Nou daar heb je het; een volledige en grondige uitleg om je te helpen bij het opzetten van je eigen online garderobe, of gebruik de functionaliteit die in mijn Google Scripts is gemaakt om je eigen project uit te breiden.

Het is een reis geweest om dit project te coderen (en te documenteren via deze Instructable), maar ik heb genoten van het proces en hoop dat je van het product zult genieten. Ik zou graag iets horen van iedereen die aanpassingen maakt zoals Michael Jordan zegt: "Het plafond is het dak" en ik ben het ermee eens dat deze toepassing geen grenzen kent.