Organizer do garderoby: 13 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:30

Niezależnie od tego, czy chodzi o zakupy ubrań, czy zawsze prosi się o pożyczenie jakiegokolwiek przedmiotu, czasami chciałbyś zajrzeć do swojej szafy z dowolnego miejsca, aby sprawdzić, czy masz coś podobnego. Organizer do szafy robi właśnie to I WIĘCEJ!

Jest to punkt kompleksowej obsługi i jest ekspansywny do wielu innych celów. Moja Szafa Organizer to połączenie Arkuszy Google jako bazy danych SQL, Skryptów Google do obsługi danych oraz Google WebApp dla portalu internetowego do tych danych. Użytkownik końcowy może zobaczyć wszystkie przedmioty, przefiltrować je według konkretnych kryteriów, oznaczyć przedmioty jako wypożyczone, zarządzać praniem i powstrzymać mamę od kupowania Ci co roku tej samej koszuli na Boże Narodzenie*.

(*Bez gwarancji. Matki kupią to, czego chcą, niezależnie od tego, czy tego potrzebujesz, czy nie)

Rzucając okiem na projekt strony internetowej na powyższym obrazku, można rozpoznać znajomy układ. Organizer do garderoby jest skonfigurowany jak każda zwykła strona z odzieżą. Podzielony na wydziały na górze i filtry umieszczone z boku, ten interfejs zapewnia zapoznanie się z funkcjonalnością zwykłemu użytkownikowi. I jest prosty w użyciu.

Krok 1: Konfigurowanie własnej kopii

Zacznijmy od stworzenia własnej kopii tego projektu.

dysk Google

Kliknij powyższy link, aby przejść do mojej aktualnej wersji tej aplikacji.

Zobaczysz 3 elementy w tym folderze: Formularz Google, Arkusz Google i Folder.

Kliknij prawym przyciskiem myszy Arkusz Google i kliknij Utwórz kopię.

Ustaw lokalizację tej kopii na swoim Dysku.

Po skopiowaniu tego dokumentu Formularz Google zostanie automatycznie wygenerowany w tym samym folderze, w którym przeniesiono Arkusz Google.

Aby utworzyć folder (jest to niezbędne do gromadzenia przesłanych zdjęć elementów), kliknij skopiowany formularz Google, a pojawi się monit z prośbą o przywrócenie lokalizacji folderu do przesyłania.

Masz teraz kopię tego dokumentu do samodzielnej pracy!

Krok 2: Przegląd formularza Google

Teraz, gdy masz już własną wersję tej aplikacji, rozejrzyjmy się.

Twój formularz Google jest skonfigurowany tak, aby akceptować wiele różnych typów elementów. Jednak koszule, spodnie, sukienki i buty mają różne ograniczenia dotyczące rozmiaru. W związku z tym inna sekcja tego formularza zostanie wypełniona w zależności od działu, w którym składasz przedmiot. W moim szablonie (Męski artykuł) stworzyłem 5 różnych kategorii rozmiarów. (Aby zapoznać się z artykułami dla kobiet, kliknij tutaj, jest ich o wiele więcej).

Pod każdą sekcją rozmiarów ustanowiłem unikalny tytuł dla każdego parametru, który będę zbierać. Nie chcemy mieć w naszej bazie wielu kolumn z nazwą „Rozmiar”, bo nie bylibyśmy w stanie określić, jakiego rodzaju ubrań dotyczy ten rozmiar.

Na końcu każdej sekcji użytkownik jest kierowany do ostatniej części tego formularza: Lokalizacja. Osobiście zdecydowałem się dodać lokalizację, aby określić przedmioty w pralni chemicznej, w pralni, na ich miejscu lub te przedmioty, w których pożyczyłem znajomemu. To pozwala mi być zorganizowanym i nigdy nie czuć, że gdzieś brakuje mi jakiejś części garderoby.

Jak wspomniałem od początku, projekt ten można rozbudować na milion różnych sposobów. Możesz go użyć do inwentaryzacji, dokładniejszego narzędzia organizacyjnego lub do stricte pożyczania ubrań. Pola i sekcje, które możesz dodać, są nieograniczone, więc nie ograniczaj się do tego, co jest w moim formularzu. (Aby zapoznać się z artykułami dla kobiet, kliknij tutaj)

Zanim zaczniesz przesyłać kilka własnych elementów, przejdźmy do następnego kroku, aby zapewnić prawidłowe przesłanie.

Krok 3: Skrypty Google: (Server Code.gs) Pierwsze spojrzenie na dane i kod

Klikając w dokument Arkuszy Google, zobaczysz wiele kolumn danych (i kilka wierszy pozostawionych do demonstracji). Podczas przesyłania formularza niektóre sekcje są pomijane, co wynika z brakujących danych w niektórych kolumnach. Dodano jednak dodatkowe kolumny, takie jak ID, Lokalizacja domyślna, Kto i Zaktualizowany, aby lepiej śledzić zmiany tych elementów.

Pole identyfikatora zostało utworzone podczas przesyłania formularza, aby umożliwić unikalny identyfikator podczas przechodzenia przez tę bazę danych. Aby utworzyć to pole, przyjrzymy się Edytorowi skryptów, klikając Narzędzia>Edytor skryptów.

Po otwarciu Edytora skryptów zauważysz 8 dokumentów na pasku bocznym tego nowego okna. Te dokumenty pomagają kontrolować proces zaplecza, wyświetlacze frontonu i funkcjonalność frontonu. Wskoczymy do każdego z nich (jeśli pozostaniesz w pobliżu), ale teraz kliknij Kod serwera.

W pliku Server Code.gs znajduje się wiele funkcji:

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

onSubmit(e) - ta funkcja zostanie skonfigurowana jako pierwsza funkcja uruchamiana po przesłaniu formularza Google. Możesz umieścić inne funkcje wewnątrz tej funkcji, aby umożliwić wykonanie wielu różnych procesów.

onOpen (e) - ta funkcja jest wywoływana po otwarciu Arkuszy Google. Wypełnia nową opcję menu, aby umożliwić szybki dostęp do łączy i widoków aplikacji.

doGet() - ta funkcja jest wywoływana w wywołaniu adresu aplikacji internetowej. Gdy użytkownik przejdzie do opublikowanej aplikacji sieci Web, ten kod poinformuje tę stronę, co ma wyświetlić. W tym przypadku jest to dokument Application.html.

include(fileName) - Ta funkcja jest używana wewnątrz stron HTML, aby odczytać inny dokument i wstawić ich zawartość do odpowiedniego formatu HTML na innej stronie. Używamy go do naszych plików CSS.html i JS.html.

openApplication() i openLaundryApp() - te funkcje zawierają kod uruchamiany, gdy użytkownik kliknie przyciski menu dodane do paska narzędzi Arkuszy Google.

changeValueOnSubmit(e) i setIDOnSubmit(e) - są to funkcje, którymi się teraz zajmiemy. Odpowiadają za aktualizację niektórych pól wartościami domyślnymi, gdy formularz jest początkowo przesyłany.

Krok 4: Włączenie OnFormSubmit

Te dwie funkcje, changeValueOnSubmit(e) i setIDOnSubmit(e), muszą być połączone z akcją użytkownika polegającą na przesłaniu formularza. Aby to zrobić, musimy włączyć wyzwalacz.

Włączamy wyzwalacz, klikając Edytuj > Wyzwalacze bieżącego projektu. Spowoduje to otwarcie Centrum programistów Google.

W prawym dolnym rogu pulpitu wyzwalacza znajduje się przycisk Dodaj wyzwalacz. Kliknij tutaj.

Skonfigurujemy teraz funkcję, która będzie uruchamiana po przesłaniu formularza. W naszym przypadku mam wiele funkcji (changeValueOnSubmit(e) i setIDOnSubmit(e)) które umieściłem w funkcji onSubmit(), więc muszę ustawić tylko 1 wyzwalacz. Dlatego wybierzemy onSubmit() i ustawimy ten wyzwalacz na uruchamianie On form submit.

Mamy teraz działający formularz, który zapełni Arkusz Google unikalnymi identyfikatorami i ustawi wartości domyślne.

Możesz teraz przesyłać własne elementy za pomocą formularza Google. (Nie jest to konieczne, aby kontynuować, ponieważ istnieją już wartości demonstracyjne). Zagłębimy się teraz w interfejs użytkownika.

Krok 5: Konfiguracja interfejsu użytkownika

WITAMY! W końcu dotarliśmy do części, po którą przyszedłeś, interfejsu użytkownika!!!!

Na pierwszy rzut oka nic tu nie ma. Nie wykonaliśmy jeszcze żadnych połączeń. Aby szybciej załadować stronę, postanowiłem nie nękać pierwszej strony WSZYSTKIMI przedmiotami i pozwolić ci szybciej klikać to, co chcesz zobaczyć. Ponieważ tak jest, nie ma żadnych elementów w głównym polu treści ani filtrów na pasku bocznym. Kliknijmy Wszystkie, aby zobaczyć, co znajduje się w naszej bazie danych.

Załadowaliśmy teraz każdy element z naszej bazy danych do głównego pola zawartości. Zobaczysz zdjęcia, numery identyfikacyjne, kolor, rozmiary i lokalizacje. Pole lokalizacji można zaktualizować tutaj! Jeśli zdecydujesz się wypożyczyć przedmiot, możesz wybrać tę opcję, możesz umieścić go w szafie, komodzie lub pralni.

A na naszym pasku bocznym mamy wszystkie możliwe pola dla każdego elementu odzieży w naszym nowym zapytaniu. Wyobraź sobie, że masz 20 różnych opcji rozmiaru na tym pasku bocznym, nie byłoby to zbyt skuteczne, więc zawęźmy nasze wyszukiwanie, klikając Akcesoria.

Teraz, gdy załadowaliśmy Akcesoria, spójrz na pasek boczny. Dostosował się tylko do 3 pól, ponieważ są to parametry, które dotyczą każdego elementu w tym zapytaniu. Sortuję według koloru. Klikając kolor, pojawia się rozwijane pole. Tutaj mogę wpisać żądany kolor, a następnie go wybrać, lub jeśli od razu zobaczę moją opcję, po prostu ją kliknę. Do tej demonstracji wybrałem Red. Kliknij Zastosuj filtr u dołu tego paska bocznego, a główna zawartość odświeży się, pokazując elementy, które mają ustawiony kolor Czerwony jako parametr koloru.

Wspomniałem wcześniej, że ta baza danych pomaga mi zarządzać wypożyczonymi przedmiotami i praniem. Aby było trochę łatwiej, zamiast ręcznie klikać każdą lokalizację rozwijaną na tej stronie głównej, stworzyłem tryb prania. Wróć do strony Arkuszy Google i w widoku aplikacji zobaczysz Tryb prania. Ta opcja wyświetli mniejszy mod, który pokazuje tylko rzeczy z lokalizacją pralni. Teraz mogę oznaczyć wszystkie te elementy jako domyślne, co spowoduje umieszczenie ich z powrotem w ich lokalizacjach, w których normalnie są przechowywane.

Krok 7: Projekt zakończony

GRATULACJE

Tych z Was, którzy potrzebują tylko działającej bazy danych do zarządzania swoimi elementami, zapraszamy do Organizatora online. Dla tych ciekawskich umysłów zainteresowanych kodem tej aplikacji. Trzymaj się, jak to rozbijam.

*Możesz usunąć pozycje testowe PO wprowadzeniu co najmniej jednego z własnych pozycji do bazy danych. (Później wyjaśnię, jeśli zostaniesz w pobliżu).

Krok 8: Krok 1: Kod zaplecza (Server Code.gs)

Wcześniej otworzyliśmy plik Server Code.gs i szybko omówiłem każdą z funkcji, ponieważ ich celem było obsłużenie każdego z właśnie skonfigurowanych elementów, ale teraz podzielimy je na niektóre funkcje i narzędzia zwane aby ten kod odniósł sukces.

1) Przesuw stołu:

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

• Ten kod jest podstawą do przemierzania Arkusza Google. Nazywam arkusz według nazwy, a nie numeru, aby po usunięciu lub zmianie kolejności arkuszy według funkcji nadal działał prawidłowo.
• W tym kodzie zbieram tylko zakres dla wszystkich danych w tabeli.

2) Nadanie identyfikatora:

var LastID =range.getCell(rowNum-1, 1);var CellValue = Number(LastID.getValue());var ColA = 1; zm max =15; zm min=5; CellValue = CellValue+ Math.round((Math.random()* (maks - min) + min)); e.source.getActiveSheet().getRange(zakres.getLastRow(), ColA).setValue(CellValue); zmieńWartośćPrzy Przesłaniu(e);

• Wcześniej prosiłem o pozostawienie wartości demo w tabeli, dopóki użytkownik nie prześle co najmniej jednej wartości dla siebie. Dzieje się tak, ponieważ generator Auto ID do wypełnienia opiera się na ostatniej wartości w bazie danych.
• Pobieram ostatni wiersz od drugiego do ostatniego, ponieważ ostatni wiersz to nasza nowa wartość, a pierwsza kolumna dla wartości identyfikatora.
• Następnie losowo generuję liczbę od 5 do 15 i dodaję ją do ostatniej wartości. *
• Na koniec umieszczam tę wartość w kolumnie ID ostatniego wiersza.
• Następnie wywołujemy funkcję changeValueOnSubmit(e).

* Wybrałem 5-15, aby umożliwić przyszłe etykietowanie i integrację z Google Home, aby liczby nie były wystarczająco zbliżone, aby powodować zamieszanie na wieszakach, metkach lub kodach kreskowych.

3) Zmiana wartości adresu URL:

var DataChange = e.namedValues["Obraz elementu"];var DefaultLocation = e.namedValues["Gdzie trzymasz ten artykuł?"]; var ColD = ColumnID_("Obraz elementu") +1; var ColLoc = ColumnID_("Lokalizacja domyślna")+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(Lokalizacja domyślna);

• Podczas przesyłania zdjęcia za pośrednictwem Formularza Google adres URL wstawiony do Arkuszy Google jest linkiem do rzeczywistego dokumentu. W naszym przypadku, gdy tworzymy stronę HTML, chcemy, aby link był tylko obrazem.
• Zmieniając „otwarte?” część adresu URL do „uc?export=view&” zamiast tego utworzyliśmy link do obrazu.
• Ponownie umieścimy tę nową wartość w lokalizacji bieżącego łącza do zdjęcia przedmiotu.
• Ustawiam również "Lokalizacja domyślna" i "Aktualna lokalizacja" elementu na to samo w bazie danych. Pomoże to przy próbie korzystania z mojego trybu prania.

• Zagłębimy się w to na następnej stronie, ale to jest nasz pierwszy rzut oka na utworzoną przeze mnie funkcję ColumnID_().

  Ta funkcja używa nazw kolumn do przetłumaczenia ich na liczbę całkowitą kolumny, co jest przydatne w przypadku wywoływania zakresów, które wymagają numeru kolumny, a nie nazwy

4) Aplikacja arkusza kalkulacyjnego.getUI()

• Na drugim obrazie widać użycie SpreadsheetApp.getUI(), które było używane do tworzenia dodatku menu paska narzędzi do arkusza Google.
• Funkcja.getUI() pomaga również utworzyć wyskakujące okienko modalne, które jest używane w trybie prania i jako szybkie łącze do interfejsu witryny.

5) Usługa HTML

• W tym kodzie używane są dwa typy usług HTMLServices: Szablon i HTMLOutput
• Szablon pozwala na wstawienie kodu wewnątrz kodu HTML, dzięki czemu informacje pochodzące z serwera mogą zostać wypełnione podczas wywołania strony.
• HTML Output wyświetla proste strony HTML.
• Mamy również metodę include(), która pozwala nam tworzyć wiele plików HTML i łączyć je w jeden szablonowy plik HTML, zwracając zawartość pliku w formacie HTML, a nie jako ciąg znaków.

Załączam dokument skonfigurowany tak, jak Dokumentacja skryptów aplikacji Google, aby zapoznać się ze sposobem objaśniania kodu źródłowego i funkcji w Aplikacjach Google.

Krok 9: Krok 2: Kod zaplecza, część 2 (Server Calls.gs)

Teraz weszliśmy na Server Calls.gs. Funkcje te są używane głównie w HTML-u JavaScript, więc zostały oddzielone od kodu, który jest używany głównie w zapleczu, który znajduje się w Server Code.gs.

Rysunek 1) Zmienne globalne:

Zdjęcie 2) pobieranie przedmiotów:

Zdjęcie 3) fetchItemsQry

Zdjęcie 4) elementy filtrów

Zdjęcie 5) pobierzFiltryZQry

Rysunek 6) ColumnID i CacheCalls

Z każdym z nich jest tyle do omówienia. A żeby złamać kod i wyjaśnić, o co chodzi, potrzebowałem trochę więcej miejsca na pisanie. W załączniku znajduje się dokument z podziałem kodu na ServerCalls.gs

Ten dokument jest skonfigurowany jak dokumentacja Google App Scripts i zawiera nawet linki do podobnych obiektów.

Krok 10: Krok 3: Kod HTML (Aplikacja.html)

Kod HTML staje się bardzo nieszczęśliwy w oknie dialogowym Instructable. Dlatego proszę postępować zgodnie z powyższymi zdjęciami.

1) W nagłówku strony Application.html ustalamy tytuł i wywołujemy naszą stronę CSS.html do załadowania.

*Będąc stroną HTML z szablonem, możemy dodać więcej kodu do tego dokumentu bez zaśmiecania bieżącego ekranu, używając wcześniej wspomnianej metody include(pageName) znajdującej się w Server Code.gs

Na tym obrazku znajduje się również główne pole nagłówka. Możesz tutaj zmienić nagłówek i wpisać „Szafa [Twoje imię]” lub cokolwiek innego, pod którym chcesz rozpoznać tę stronę.

2) Tuż pod nagłówkiem znajduje się nasz górny pasek nawigacyjny.

Ten pasek nawigacyjny zawiera wszystkie typy artykułów wymienione w arkuszu Artykuł w naszych Arkuszach Google.

Funkcja inline jest wywoływana, aby pobrać tablicę tych elementów. Następnie uruchamiana jest pętla zawierająca każdą z tych opcji jako przycisk menu wraz z kodem akcji, więc gdy użytkownik kliknie przycisk menu, odpowiednie elementy pojawią się w obszarze treści.

3) Główny organ.

Ta część składa się z 4 porcji. Wyjście tekstowe, filtr paska bocznego, główne obrazy treści i zawartość JS.

Dane wyjściowe tekstu pozwalają użytkownikowi zobaczyć szybki podgląd tekstu dla tego, jaki typ pozycji aktualnie przegląda, zamiast odwoływać się do wybranej opcji menu.

Filtr paska bocznego zawiera wiele filtrów dostępnych dla typu elementu wybranego przez użytkownika. Filtry te odzwierciedlają wszystkie opcje dostępne dla tej kategorii, a także liczbę przedmiotów należących do tej wartości kategorii. Ten pasek boczny jest wypełniony kodem JavaScript (który zostanie omówiony dalej).

Główna treść jest obecnie pusta, ale podobnie jak filtry, zostanie wypełniona polami elementów wyszczególniającymi identyfikator elementu, kolor, rozmiar i lokalizację z obrazem dołączonym, gdy użytkownik wybierze kategorię, a kod JavaScript wypełni ten obszar.

Wreszcie include(JS), przyjrzyjmy się temu w następnym kroku.

Krok 11: Krok 4: Kod JavaScript (JS.html)

Jeśli myślałeś, że kod serwera jest ciężką sekcją, załaduj to.

Tutaj łączymy nasz kod HTML i SeverCode z interakcjami użytkownika. Każdy kliknięty element musi zostać tutaj przetworzony, aby uzyskać prawidłowe dane i zwrócić je w czytelnym formacie. Przyjrzyjmy się więc naszym pierwszym telefonom:

Skrypt woła: używam 3 różnych bibliotek do tego projektu; jquery, bootstrap oraz specjalny dodatek bootstrap-select. Te biblioteki umożliwiają formatowanie obiektów i łatwiejsze wywołania elementów w kodzie HTML.

Moja kolejna ważna linia JavaScript jest poniżej:

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

Tutaj wyłączam klawisz Enter z wyzwalania któregokolwiek z formularzy. Tak jak w tym przypadku, Google Web Apps mają przypisany tylko ich jednostronicowy adres. Naciśnięcie klawisza Enter doda dane do adresu HTML i spróbuje przekierować użytkownika. Wyłączając tę opcję, pozwalasz, aby kod JavaScript wykonał całą pracę.

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

funkcja updateDBlocation(id, wartość){ google.script.run.withSuccessHandler(allGood).withFailureHandler(FailDBUpdate).updateLocation(id, wartość); }

Oto dwie funkcje wywołujące plik Server Code.gs. Linia:

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

ma wiele części roboczych, ale szkielet jest zakorzeniony w „google.script.run”, który informuje stronę HTML, że następująca funkcja znajduje się na serwerze.

• Ostatni bit tego kodu to funkcja do uruchomienia. W tym przykładzie ServerRemoveFilter()
• Dzięki dodaniu withSuccessHandler() strona HTML wie teraz, co zrobić z zwracanymi danymi, a to jest uruchomienie funkcji z nawiasem.
• To samo dotyczy withFailureHandler()

Teraz, gdy już rozbiliśmy wywołanie kodu serwera, rzućmy okiem na to, co się stanie, gdy wywołanie serwera zakończy się powodzeniem i niepowodzeniem.

function allGood(e){ console.log("Sukces na serwerze"); } function onFailure(error){ $("#message-box").html("

W tej chwili nie można pobrać elementów odzieży. BŁĄD: " + komunikat o błędzie +"

"); } function FailDBUpdate(błąd){ $("#message-box").html("

Nie masz dostępu do zmiany lokalizacji. BŁĄD: " + komunikat o błędzie +"

"); $(".location-selects").prop('wyłączone', 'wyłączone'); }

Stworzyłem bardzo prosty dziennik konsoli, który oznacza sukces po uruchomieniu funkcji lokalizacji, którą można zobaczyć jako allGood().

Podczas obsługi błędów te dwie funkcje wyświetlają komunikat o błędzie, który użytkownik może zobaczyć, używając wywołania jQuery do obiektu HTML o identyfikatorze „message-box”.

A teraz przejdźmy do drobiazgowej roboty

Krok 12: Krok 5: Działania JavaScript Code-Click (JS.html)

Górny pasek menu zawiera opcje dla każdego typu artykułu. Funkcja, którą uruchamiają po kliknięciu, to:

function filterType(artykuł, id){ $("ul.navbar-nav li.active").removeClass("active"); $("#bieżącyArtykuł").html(" // KOD HTML TUTAJ");

aktualizacjaSideBar = prawda;

google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure).fetchItems("Artykuły", artykuł); var newSelect = "#type-"+id; $(newSelect).addClass("aktywny"); $("#myNavbar").removeClass("w"); }

Widzimy, że w tym kodzie mamy google.script.run, który wywołuje serwer w celu pobrania informacji. Funkcją powodzenia tego wywołania jest updateItems().

ZDJĘCIE 1 (z ciężkim kodem HTML w ramach tej funkcji trudno jest ściśle skopiować kod, bez bałaganu w tym polu)

W kodzie updateItems() dzieje się wiele rzeczy. Po raz kolejny musimy przejść przez obiekt, który został nam zwrócony i dodać każdy element do naszej głównej strony głównej.

Kod HTML jest dodawany jako tablice, aby rozbić kod i ułatwić odczytanie i zobaczenie, gdzie jest wstawiany itemData.

W pętli każdego elementu usuwam pola, których nie chcę widzieć w opisie, takie jak Default, timestamp i picture URL. Usuwam adres URL zdjęcia z opisu, ponieważ zamiast tego jest dodawany jako href do tagu. Po zebraniu tych informacji są one wysyłane do głównej treści za pomocą funkcji jQuery.append().

Po dodaniu wszystkich elementów do strony, to zapytanie o elementy jest ponownie wysyłane do kodu serwera w celu posortowania i zwrócenia opcji filtrowania, jak pokazano na rysunku 2.

ZDJĘCIE 2 (aktualizacja paska bocznego)

Bardzo podobnie do funkcji updateItems(), znów mamy tablice kodu HTML i pętlę dla wszystkich opcji filtrowania. Jedyną zauważalną zmianą jest jQuery.selectpicker('refresh'). Ta funkcja pochodzi z biblioteki skryptów, którą zawarliśmy w ostatnim kroku. Pozwala programiście na napisanie prostego wybranego kodu HTML i zaktualizowanie go przez bibliotekę, aby zawierał funkcję wyszukiwania, a także kod CSS.

ZDJĘCIE 3 (filtrowanie za pomocą paska bocznego)

Na koniec mamy funkcję updateFilter(formData). Jest używany, gdy formularz jest przesyłany z paska bocznego. Zaczynamy od użycia funkcji jQuery.serializeArray(), która odczytuje kod HTML elementu zdefiniowanego w naszym przypadku formularza i zwraca wartości w ciągu znaków, które mają zostać wysłane do serwera. I zaczynamy cały proces od Rysunku 1 od nowa.

Krok 13: Koniec….wreszcie

Cóż, masz to; pełne i dokładne wyjaśnienie, które pomoże Ci założyć własną garderobę online lub wykorzystać funkcjonalność stworzoną w moich skryptach Google do rozszerzenia własnego projektu.

To była podróż kodująca ten projekt (i dokumentująca za pomocą tego Instructable), ale podobał mi się ten proces i mam nadzieję, że spodoba ci się ten produkt. Chciałbym usłyszeć od każdego, kto wprowadza poprawki, jak Michael Jordan mówi „Sufit to dach” i zgadzam się, że ta aplikacja nie ma ograniczeń.