Kleiderschrank Organizer - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:18

Egal, ob Sie Kleidung kaufen oder ständig aufgefordert werden, sich etwas auszuleihen, manchmal möchten Sie von überall in Ihren Schrank schauen, um zu sehen, ob Sie etwas Ähnliches haben. Der Kleiderschrank-Organizer macht genau das UND MEHR!

Dies ist ein One-Stop-Shop und ist für viele andere Zwecke expansiv. My Wardrobe Organizer ist eine Kombination aus Google Sheets als SQL-Datenbank, Google Scripts für den Umgang mit den Daten und Google WebApp für ein Online-Portal zu diesen Daten. Der Endnutzer kann alle Artikel sehen, nach etwas Bestimmtem filtern, Artikel als ausgeliehen markieren, seine Wäsche verwalten und Mama davon abhalten, dir jedes Jahr das gleiche Hemd zu Weihnachten zu kaufen*.

(*Keine Garantie. Mütter kaufen, was sie wollen, ob Sie es brauchen oder nicht)

Bei einem kurzen Blick auf das Website-Design im obigen Bild erkennt man vielleicht ein vertrautes Layout. Der Kleiderschrank Organizer ist wie jede gewöhnliche Bekleidungswebsite eingerichtet. Aufgeteilt nach Abteilungen im oberen Bereich und Filtern an der Seite, macht diese Schnittstelle dem gelegentlichen Benutzer mit der Funktionalität vertraut. UND es ist einfach zu bedienen.

Schritt 1: Einrichten Ihrer eigenen Kopie

Beginnen wir damit, Ihre eigene Kopie dieses Projekts zu erstellen.

Google Drive

Klicken Sie auf den obigen Link, um zu meiner aktuellen Version dieser Anwendung zu gelangen.

In diesem Ordner werden 3 Elemente angezeigt: Ein Google-Formular, ein Google-Tabellenblatt und ein Ordner.

Klicken Sie mit der rechten Maustaste auf das Google-Blatt und klicken Sie auf Kopie erstellen.

Legen Sie als Speicherort dieser Kopie Ihr eigenes Laufwerk fest.

Nach dem Kopieren dieses Dokuments wird das Google-Formular automatisch in demselben Ordner generiert, in den Sie das Google-Blatt verschoben haben.

Um den Ordner zu erstellen (dies ist zum Sammeln von Uploads der Artikelbilder erforderlich), klicken Sie auf das kopierte Google-Formular und Sie werden aufgefordert, den Ordnerspeicherort für Uploads wiederherzustellen.

Sie haben jetzt eine Kopie dieses Dokuments, an der Sie selbst arbeiten können!

Schritt 2: Übersicht über das Google-Formular

Jetzt, da Sie Ihre eigene Version dieser Anwendung haben, schauen wir uns um.

Ihr Google-Formular ist so eingerichtet, dass es viele verschiedene Arten von Elementen akzeptiert. Hemden, Hosen, Kleider und Schuhe haben jedoch alle unterschiedliche Größenbeschränkungen. Daher wird je nach Abteilung, unter der Sie Ihren Artikel einreichen, ein anderer Abschnitt dieses Formulars ausgefüllt. In meiner Vorlage (Männerartikel) habe ich 5 verschiedene Größenkategorien erstellt. (Für Frauenartikel klicken Sie hier, es gibt viele mehr).

Unter jedem Abschnitt zur Größenbestimmung habe ich für jeden Parameter, den ich sammle, einen eindeutigen Titel festgelegt. Wir möchten in unserer Datenbank nicht mehrere Spalten mit dem Namen "Größe" haben, sonst könnten wir nicht feststellen, für welche Art von Kleidung diese Größe gilt.

Am Ende jedes Abschnitts wird der Benutzer zum letzten Teil dieses Formulars geleitet: Standort. Ich persönlich habe mich dafür entschieden, Standort hinzuzufügen, um Gegenstände in der Reinigung, in der Wäscherei, an ihrem Platz oder die Gegenstände zu bestimmen, die ich einem Freund ausgeliehen habe. Dadurch kann ich organisiert werden und habe nie das Gefühl, dass mir irgendwo ein Kleidungsstück fehlt.

Wie ich von Anfang an erwähnt habe, kann dieses Projekt auf Millionen verschiedene Arten erweitert werden. Sie können es für die Inventur, ein genaueres Organisationswerkzeug oder für das strikte Ausleihen von Kleidung verwenden. Die Felder und Abschnitte, die Sie hinzufügen können, sind endlos, also fühlen Sie sich nicht auf das in meinem Formular beschränkt. (Für die Frauenartikel klicken Sie hier)

Bevor Sie einige Ihrer eigenen Elemente hochladen, gehen wir zum nächsten Schritt über, um die ordnungsgemäße Übermittlung sicherzustellen.

Schritt 3: Google Scripts: (Server Code.gs) Zuerst die Daten und den Code ansehen

Wenn Sie in das Google Tabellen-Dokument klicken, sehen Sie viele Datenspalten (und einige Zeilen, die zu Demonstrationszwecken gelassen wurden). Beim Absenden des Formulars werden einige Abschnitte übersprungen, dies ist an den fehlenden Daten in einigen Spalten ersichtlich. Es wurden jedoch zusätzliche Spalten wie ID, Standardstandort, Wer und Aktualisiert hinzugefügt, um die Bearbeitungen dieser Elemente besser verfolgen zu können.

Beim Absenden des Formulars wurde ein ID-Feld erstellt, um eine eindeutige Kennung beim Durchlaufen dieser Datenbank zu ermöglichen. Um dieses Feld zu erstellen, schauen wir uns den Skript-Editor an, indem wir auf Extras>Skript-Editor klicken.

Wenn der Skript-Editor geöffnet ist, werden Sie in der Seitenleiste dieses neuen Fensters 8 Dokumente bemerken. Diese Dokumente helfen bei der Steuerung des Back-End-Prozesses, der Front-End-Anzeigen und der Front-End-Funktionalität. Wir werden auf jeden einzelnen eingehen (wenn Sie in der Nähe bleiben), aber jetzt klicken Sie auf Servercode.

In der Datei Server Code.gs gibt es viele Funktionen:

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

onSubmit(e) – Diese Funktion wird als erste Funktion konfiguriert, die ausgeführt wird, wenn ein Google-Formular gesendet wird. Sie können andere Funktionen innerhalb dieser Funktion platzieren, um viele verschiedene Prozesse zu ermöglichen.

onOpen (e) - Diese Funktion wird aufgerufen, wenn Google Sheets geöffnet wird. Es enthält eine neue Menüoption, um einen schnellen Zugriff auf die Anwendungslinks und -ansichten zu ermöglichen.

doGet() – Diese Funktion wird beim Adressaufruf der Web-App aufgerufen. Wenn ein Benutzer zu der veröffentlichten Web-App navigiert, teilt dieser Code dieser Seite mit, was angezeigt werden soll. In diesem Fall ist es das Dokument Application.html.

include(fileName) - Diese Funktion wird innerhalb von HTML-Seiten verwendet, um andere Dokumente zu lesen und deren Inhalt in ein richtiges HTML-Format innerhalb einer anderen Seite einzufügen. Wir verwenden es für unsere CSS.html- und JS.html-Dateien.

openApplication() und openLaundryApp() - Diese Funktionen enthalten den Code, der ausgeführt wird, wenn ein Benutzer auf die Menüschaltflächen klickt, die der Google Sheet-Symbolleiste hinzugefügt wurden.

changeValueOnSubmit(e) und setIDOnSubmit(e) – Dies sind die Funktionen, die wir uns jetzt ansehen. Sie sind dafür verantwortlich, bestimmte Felder beim erstmaligen Senden des Formulars mit Standardwerten zu aktualisieren.

Schritt 4: Aktivieren von OnFormSubmit

Diese beiden Funktionen changeValueOnSubmit(e) und setIDOnSubmit(e) müssen mit der Benutzeraktion des Absendens eines Formulars verbunden werden. Dazu müssen wir einen Trigger aktivieren.

Wir aktivieren den Trigger, indem wir auf Bearbeiten > Trigger des aktuellen Projekts klicken. Dadurch wird der Google Developer Hub geöffnet.

In der unteren rechten Ecke des Trigger-Dashboards befindet sich eine Schaltfläche Trigger hinzufügen. Klicke hier.

Wir werden nun die Funktion so einrichten, dass sie ausgeführt wird, wenn ein Formular gesendet wird. In unserem Fall habe ich mehrere Funktionen (changeValueOnSubmit(e) und setIDOnSubmit(e)), die ich in eine onSubmit()-Funktion stecke, sodass ich nur 1 Trigger einrichten muss. Daher werden wir onSubmit() auswählen und diesen Trigger so einstellen, dass er beim Senden von Formularen ausgeführt wird.

Wir haben jetzt ein funktionierendes Formular, das ein Google Sheet mit eindeutigen Kennungen ausfüllt und Standardwerte festlegt.

Sie können jetzt Ihre eigenen Artikel über das Google-Formular hochladen. (Dies ist nicht notwendig, um fortzufahren, da bereits Demowerte vorhanden sind). Wir werden nun in die Benutzeroberfläche eintauchen.

Schritt 5: Einrichten der Benutzeroberfläche

WILLKOMMEN! Wir haben endlich den Teil erreicht, für den Sie gekommen sind, die Benutzeroberfläche!!!!

Auf den ersten Blick ist hier nichts zu sehen. Wir haben noch keine Anrufe getätigt. Um die Seite schneller zu laden, habe ich beschlossen, die erste Seite nicht mit ALLEN Ihren Artikeln zu plagen und Ihnen zu ermöglichen, schneller auf das zu klicken, was Sie sehen möchten. Da dies der Fall ist, gibt es keine Elemente im Hauptinhaltsfeld und keine Filter in der Seitenleiste. Klicken wir auf Alle, um zu sehen, was sich in unserer Datenbank befindet.

Wir haben jetzt jedes Element in unserer Datenbank in das Hauptinhaltsfeld geladen. Sie sehen Bilder, ID-Nummern, Farbe, Größen und Standorte. Das Standortfeld kann gleich hier aktualisiert werden! Wenn Sie sich entscheiden, den Artikel auszuleihen, können Sie diese Option auswählen und ihn in Ihren Schrank, Ihre Kommode oder Ihre Wäsche legen.

Und in unserer Sidebar haben wir alle möglichen Felder für jedes Kleidungsstück in unserer neuen Abfrage. Stellen Sie sich vor, Sie hätten 20 verschiedene Größenoptionen in dieser Seitenleiste, das wäre nicht sehr effektiv, also grenzen wir unsere Suche ein, indem Sie auf Zubehör klicken.

Nachdem wir Zubehör geladen haben, werfen Sie einen Blick auf die Seitenleiste. Es wurden nur 3 Felder angepasst, da dies die Parameter sind, die für jedes Element in dieser Abfrage gelten. Ich werde nach Farbe sortieren. Durch Klicken auf Farbe erscheint eine Dropdown-Box. Hier kann ich entweder die gewünschte Farbe eingeben und dann auswählen, oder wenn ich meine Option sofort sehe, klicke ich einfach darauf. Ich habe Rot für diese Demonstration ausgewählt. Klicken Sie unten in dieser Seitenleiste auf Filter anwenden. Der Hauptinhalt wird aktualisiert und zeigt Ihnen die Elemente an, deren Farbparameter die Farbe Rot festgelegt hat.

Ich habe bereits erwähnt, dass diese Datenbank mir hilft, meine Leihartikel und in meiner Wäscherei zu verwalten. Um es ein wenig einfacher zu machen, habe ich den Wäschemodus erstellt, anstatt manuell auf jede Dropdown-Position auf dieser Hauptseite zu klicken. Kehren Sie zur Google Sheet-Seite zurück und unter App View sehen Sie den Wäschemodus. Diese Option ruft ein kleineres Modal auf, das nur Artikel mit dem Standort von Laundry anzeigt. Ich kann jetzt alle diese Elemente als Standard markieren, wodurch sie wieder an ihren Orten abgelegt werden, an denen sie normalerweise gespeichert sind.

Schritt 7: Projekt abgeschlossen

HERZLICHEN GLÜCKWUNSCH

Für diejenigen unter Ihnen, die nur eine funktionierende Datenbank zum Verwalten Ihrer Artikel benötigen, sind Sie bei Ihrem Online-Organizer willkommen. Für neugierige Köpfe, die sich für den Code dieser Anwendung interessieren. Bleiben Sie dabei, während ich es zerlege.

*Es steht Ihnen frei, die Testobjekte zu löschen, NACHDEM Sie mindestens eines Ihrer eigenen Objekte in die Datenbank eingegeben haben. (Ich werde es später erklären, wenn Sie in der Nähe bleiben).

Schritt 8: Schritt 1: der Back-End-Code (Server Code.gs)

Zuvor haben wir die Datei Server Code.gs geöffnet und ich habe eine kurze Übersicht über jede der Funktionen gegeben, da ihr Zweck darin bestand, jedes der Elemente zu bedienen, die Sie gerade eingerichtet haben, aber jetzt werden wir sie auf einige der genannten Funktionen und Dienstprogramme aufschlüsseln um diesen Code zu einem Erfolg zu machen.

1) Tischdurchfahrt:

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

• Dieser Code ist eine Grundlage für das Durchlaufen eines Google Sheets. Ich nenne das Blatt nach Namen und nicht nach Nummern, damit es auch dann ordnungsgemäß funktionieren kann, wenn Blätter gelöscht oder nach Funktion neu angeordnet werden.
• In diesem Code sammle ich nur den Bereich für alle Daten in der Tabelle.

2) Zuweisen einer ID:

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

• Ich habe zuvor darum gebeten, die Demowerte in der Tabelle zu belassen, bis der Benutzer mindestens einen Wert für sich selbst eingereicht hat. Dies liegt daran, dass der Auto-ID-Generator beim Auffüllen auf den letzten Wert in der Datenbank angewiesen ist.
• Ich rufe die letzte vorletzte Zeile ab, da die letzte Zeile unser neuer Wert und die erste Spalte für den ID-Wert ist.
• Ich generiere dann zufällig eine Zahl zwischen 5 und 15 und addiere sie zum letzten Wert. *
• Schließlich platziere ich diesen Wert in der ID-Spalte der letzten Zeile.
• Als nächstes rufen wir die Funktion changeValueOnSubmit(e) auf.

* Ich habe 5-15 gewählt, um zukünftige Beschriftungen und die Integration von Google Home zu ermöglichen, damit die Zahlen nicht nah genug sind, um Verwirrung auf Kleiderbügeln oder Kleideretiketten oder Barcodes zu verursachen.

3) URL-Wert ändern:

var DataChange = e.namedValues["Artikelbild"];var DefaultLocation = e.namedValues["Wo bewahren Sie dieses Kleidungsstück auf?"]; var ColD = ColumnID_("Elementbild") +1; var ColLoc = ColumnID_("Default Location")+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);

• Beim Senden eines Fotos über ein Google-Formular ist die in Google Sheets eingefügte URL ein Link zum eigentlichen Dokument. In unserem Fall möchten wir beim Erstellen einer HTML-Seite, dass der Link nur das Bild ist.
• Durch das Ändern des "offen?" Teil der URL zu "uc?export=view&" haben wir stattdessen einen Link zum Bild erstellt.
• Wir werden diesen neuen Wert wieder an der Stelle des aktuellen Artikelbild-Links platzieren.
• Ich stelle auch den "Standardstandort" und den "Aktuellen Standort" des Artikels in der Datenbank auf dasselbe ein. Dies ist hilfreich, wenn Sie versuchen, meinen Wäschemodus zu verwenden.

• Wir werden auf der nächsten Seite darauf eingehen, aber dies ist unser erster Blick auf die von mir erstellte ColumnID_()-Funktion.

  Diese Funktion verwendet Spaltennamen, um sie in die Ganzzahl der Spalte zu übersetzen, was für Range-Aufrufe hilfreich ist, die eine Spaltennummer anstelle eines Namens erfordern

4) TabellenkalkulationApp.getUI()

• Im zweiten Bild können Sie die Verwendung von SpreadsheetApp.getUI() sehen, wie es verwendet wurde, um eine Toolbar-Menüerweiterung zum Google Sheet zu erstellen.
• Die Funktion.getUI() hilft auch dabei, ein modales Popup zu erstellen, das für den Wäschemodus und als schneller Link zur Website-Benutzeroberfläche verwendet wird.

5) HTML-Dienst

• In diesem Code werden zwei Arten von HTMLServices verwendet: Template und HTMLOutput
• Die Vorlage ermöglicht das Einfügen von Code in den HTML-Code, sodass Informationen, die von einem Server stammen, beim Aufruf der Seite ausgefüllt werden können.
• HTML-Ausgabe zeigt einfache HTML-Seiten an.
• Wir haben auch die Methode include(), die es uns ermöglicht, mehrere HTML-Dateien zu erstellen und sie in einer HTML-Vorlage mit Vorlagen zu kombinieren, indem der Inhalt der Datei in einem HTML-Format statt in einer Zeichenfolge zurückgegeben wird.

Ich habe ein Dokument wie die Google App Scripts-Dokumentation angehängt, um mich mit der Erklärung von Quellcode und Funktionen in Google Apps vertraut zu machen.

Schritt 9: Schritt 2: der Back-End-Code Teil 2 (Server Calls.gs)

Jetzt haben wir die Server Calls.gs eingetragen. Diese Funktionen werden hauptsächlich in HTML-JavaScript verwendet, sodass sie von Code getrennt wurden, der hauptsächlich im Backend verwendet wird, das sich in Server Code.gs befindet.

Bild 1) Globale Variablen:

Bild 2) Artikel holen:

Bild 3) fetchItemsQry

Bild 4) filterItems

Bild 5) fetchFiltersWithQry

Bild 6) ColumnID und CacheCalls

Mit jedem von ihnen gibt es so viel zu besprechen. Und um den Code aufzuschlüsseln und zu erklären, was vor sich geht, brauchte ich etwas mehr Platz zum Tippen. Anbei ein Dokument zur Code-Aufschlüsselung der ServerCalls.gs

Dieses Dokument ist wie die Google App Scripts-Dokumentation aufgebaut und stellt sogar Links zu ähnlichen Objekten her.

Schritt 10: Schritt 3: Der HTML-Code (Application.html)

HTML-Code wird im Dialogfeld eines Instructable sehr unglücklich. Folgen Sie also bitte den obigen Bildern.

1) Im Header der Seite Application.html legen wir einen Titel fest und rufen unsere CSS.html-Seite zum Laden auf.

*Da es sich um eine HTML-Seite mit Vorlagen handelt, können wir diesem Dokument mehr Code hinzufügen, ohne den aktuellen Bildschirm zu überladen, indem wir die zuvor erwähnte include(pageName)-Methode in Server Code.gs verwenden

Die Hauptheaderbox ist auch in diesem Bild zu finden. Sie können die Kopfzeile hier ändern und "[Ihr Name]'s Kleiderschrank" eingeben oder was auch immer Sie diese Seite sonst noch erkennen möchten.

2) Direkt unter der Kopfzeile befindet sich unsere obere Navigationsleiste.

Diese Navigationsleiste enthält alle Artikeltypen, die auf dem Artikelblatt in unseren Google Tabellen aufgeführt sind.

Eine Inline-Funktion wird aufgerufen, um ein Array dieser Elemente abzurufen. Dann wird eine Schleife ausgeführt, um jede dieser Optionen als Menüschaltfläche einzuschließen, komplett mit einem Aktionscode. Wenn ein Benutzer auf die Menüschaltfläche klickt, werden die entsprechenden Elemente im Hauptbereich angezeigt.

3) Der Hauptkörper.

Es gibt 4 Portionen zu diesem Teil. Eine Textausgabe, der Seitenleistenfilter, die Hauptkörperbilder und die JS-Includes.

Die Textausgabe ermöglicht dem Benutzer eine schnelle Textansicht für die Art von Elementen, die er gerade betrachtet, anstatt auf die ausgewählte Menüoption zu verweisen.

Der Seitenleistenfilter enthält die vielen verfügbaren Filter für den Elementtyp, den ein Benutzer ausgewählt hat. Diese Filter spiegeln alle für diese Kategorie verfügbaren Optionen sowie die Anzahl der Elemente wider, die unter diesen Kategoriewert fallen. Diese Seitenleiste wird mit JavaScript-Code gefüllt (der als nächstes besprochen wird).

Der Hauptteil ist derzeit leer, wird aber genau wie die Filter mit Artikelfeldern gefüllt, die die Artikel-ID, Farbe, Größe und Position mit einem Bild enthalten, sobald der Benutzer eine Kategorie auswählt und der JavaScript-Code diesen Bereich auffüllt.

Schließlich enthält (JS), schauen wir uns dies im nächsten Schritt an.

Schritt 11: Schritt 4: Der JavaScript-Code (JS.html)

Wenn Sie dachten, der Servercode sei ein schwerer Abschnitt, holen Sie sich eine Menge davon.

Hier kombinieren wir unser HTML und SeverCode mit Benutzerinteraktionen. Jedes angeklickte Element muss hier verarbeitet werden, um die richtigen Daten zu erhalten und in einem lesbaren Format zurückzugeben. Schauen wir uns also unsere ersten Anrufe an:

Die Skriptaufrufe: Ich verwende 3 verschiedene Bibliotheken für dieses Projekt; jquery, Bootstrap und ein spezielles Bootstrap-Select-Add-on. Diese Bibliotheken ermöglichen die Formatierung von Objekten und einfachere Aufrufe der Elemente innerhalb des HTML-Codes.

Meine nächste wichtige JavaScript-Zeile ist unten:

$(Dokument). Tastendruck(function(event){ if (event.which == '13') {event.preventDefault(); } });

Hier deaktiviere ich die Eingabetaste, um eines der Formulare auszulösen. Wie in diesem Fall wird Google Web Apps nur ihre eine Seitenadresse zugewiesen. Eine Eingabetaste würde der HTML-Adresse Daten hinzufügen und versuchen, den Benutzer umzuleiten. Indem Sie dies deaktivieren, erlauben Sie Ihrem JavaScript-Code, die gesamte Arbeit zu erledigen.

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

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

Hier sind zwei Funktionen, die Aufrufe an die Datei Server Code.gs tätigen. Die Linie:

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

hat viele funktionierende Teile, aber das Skelett stammt aus " google.script.run", was der HTML-Seite mitteilt, dass sich die folgende Funktion auf dem Server befindet.

• Das letzte Bit dieses Codes ist die auszuführende Funktion. In diesem Beispiel ServerRemoveFilter()
• Durch Hinzufügen eines withSuccessHandler() weiß die HTML-Seite nun, was mit den zurückgegebenen Daten zu tun ist, und zwar um die Funktion mit Klammern auszuführen.
• Gleiches gilt für withFailureHandler()

Nachdem wir nun den Servercode-Aufruf aufgeschlüsselt haben, werfen wir einen kurzen Blick darauf, was passiert, wenn diese Serveraufrufe erfolgreich sind und fehlschlagen.

Funktion allGood(e){ console.log("Erfolg auf dem Server"); } Funktion onFailure(error){ $("#message-box").html("

Kleidungsstücke können derzeit nicht abgerufen werden. FEHLER: " + error.message +"

"); } Funktion FailDBUpdate(Fehler){ $("#message-box").html("

Sie haben keinen Zugriff, um den Standort zu ändern. FEHLER: " + error.message +"

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

Ich habe ein sehr einfaches Konsolenprotokoll erstellt, um den Erfolg anzuzeigen, wenn die Standortfunktion ausgeführt wird, die Sie als allGood() sehen können.

Bei der Behandlung der Fehler geben diese beiden Funktionen die Fehlermeldung aus, die der Benutzer durch einen jQuery-Aufruf an das HTML-Objekt mit der ID "message-box" sehen kann.

Kommen wir nun zur groben Arbeit

Schritt 12: Schritt 5: die JavaScript-Code-Klick-Aktionen (JS.html)

Die obere Menüleiste enthält Optionen für jeden Artikeltyp. Die Funktion, die sie beim Klicken ausführen, ist:

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

updateSideBar = true;

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

Wir können in diesem Code sehen, dass wir ein google.script.run haben, das den Server aufruft, um Informationen abzurufen. Die Erfolgsfunktion für diesen Aufruf ist updateItems().

BILD 1 (mit dem schweren HTML-Code innerhalb dieser Funktion ist es schwierig, den Code streng zu kopieren, ohne dass in dieser Box ein Durcheinander erscheint)

Im Code updateItems() passieren viele Dinge. Noch einmal müssen wir das Objekt durchgehen, das an uns zurückgegeben wurde, und jedes Element zu unserer Hauptkörperseite hinzufügen.

Der HTML-Code wird als Arrays hinzugefügt, um den Code aufzuteilen und es einfacher zu machen, zu lesen und zu sehen, wo itemData eingefügt wird.

In der Schleife jedes Elements entferne ich Felder, die ich nicht in der Beschreibung sehen möchte, z. B. Standard, Zeitstempel und Bild-URL. Ich entferne die Bild-URL aus der Beschreibung, da sie stattdessen als href zu einem Tag hinzugefügt wird. Sobald diese Informationen zusammengestellt sind, werden sie mit der Funktion jQuery.append() an den Hauptteil gesendet.

Nachdem alle Elemente zur Seite hinzugefügt wurden, wird diese Abfrage der Elemente erneut an den Servercode gesendet, um die Filteroptionen zu sortieren und zurückzugeben, wie in Abbildung 2 zu sehen.

BILD 2 (Aktualisieren der SideBar)

Ganz ähnlich der Funktion updateItems() haben wir wieder Arrays von HTML-Code und eine Schleife für alle Filteroptionen. Die einzige auffällige Änderung ist die jQuery.selectpicker('refresh'). Diese Funktion stammt aus der Skriptbibliothek, die wir im letzten Schritt eingefügt haben. Es ermöglicht dem Programmierer, einen einfachen ausgewählten HTML-Code zu schreiben und ihn von der Bibliothek aktualisieren zu lassen, um durchsuchbare Funktionen sowie den CSS-Code einzuschließen.

BILD 3 (Filtern mit der Seitenleiste)

Schließlich haben wir die Funktion updateFilter(formData). Dies wird verwendet, wenn ein Formular über die Seitenleiste gesendet wird. Wir beginnen mit der Verwendung einer jQuery-Funktion.serializeArray(), die den HTML-Code des in unserem Fall ein Formular definierten Elements liest und die Werte in einem String zurückgibt, der an den Server gesendet werden soll. Und wir beginnen den Prozess noch einmal von Bild 1 aus.

Schritt 13: Das Ende….endlich

Nun, da hast du es; eine vollständige und gründliche Erklärung, um Ihnen beim Einrichten Ihrer eigenen Online-Garderobe zu helfen, oder nutzen Sie die in meinen Google Scripts erstellten Funktionen, um Ihr eigenes Projekt zu erweitern.

Es war eine Reise, die dieses Projekt codiert (und durch dieses Instructable dokumentiert), aber ich habe den Prozess genossen und hoffe, dass Sie das Produkt genießen werden. Ich würde gerne von jedem hören, der Anpassungen vornimmt, da Michael Jordan sagt "Die Decke ist das Dach" und ich stimme zu, dass diese Anwendung keine Grenzen hat.