Органайзер за гардероб: 13 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

Независимо дали става въпрос за пазаруване на дрехи или винаги сте помолени да вземете назаем някакъв предмет, има моменти, в които искате да надникнете в гардероба си отвсякъде, за да видите дали имате нещо подобно. Организаторът на гардероба прави точно това И ПОВЕЧЕ!

Това е едно гише и е обширно за много други цели. My Wardrobe Organizer е комбинация от Google Sheets като SQL база данни, Google Script за обработка на данните и Google WebApp за онлайн портал към тези данни. Крайният потребител може да види всички артикули, да филтрира за нещо конкретно, да маркира артикулите като наети, да управлява прането си и да попречи на мама да ви купи една и съща риза за Коледа всяка година*.

(*Без гаранция. Майките ще купуват това, което искат, независимо дали имате нужда от него или не)

Хвърляйки бърз поглед към дизайна на уебсайта на изображението по -горе, човек може да разпознае познато оформление. Организаторът на гардероби е създаден като всеки обикновен уебсайт за облекло. Разделен от отделите отгоре и филтри отстрани, този интерфейс запознава потребителите с функционалността. И е лесен за използване.

Стъпка 1: Настройване на собствено копие

Нека започнем със създаването на собствено копие на този проект.

Google Диск

Щракнете върху горната връзка, за да ви отведе до текущата ми версия на това приложение.

В тази папка ще видите 3 елемента: Google формуляр, Google лист и папка.

Щракнете с десния бутон върху листа на Google и щракнете върху Направи копие.

Задайте местоположението на това копие на вашия собствен Диск.

След като копирате този документ, Google формулярът ще бъде автоматично генериран в същата папка, в която сте преместили Google Sheet.

За да създадете папката (това е необходимо за събиране на качвания на снимки на елементите), щракнете върху копирания формуляр на Google и ще се появи подкана, която ще ви помоли да възстановите местоположението на папката за качване.

Вече имате копие на този документ, върху което да работите сами!

Стъпка 2: Преглед на формуляра на Google

Сега, когато имате своя собствена версия на това приложение, нека да се огледаме наоколо.

Вашият Google формуляр е настроен да приема много различни видове елементи. Ризите, панталоните, роклите и обувките обаче имат различни ограничения за оразмеряване. Следователно различен раздел от този формуляр ще бъде попълнен въз основа на отдела, в който сте подали вашия артикул. В моя шаблон (за мъжки артикули) създадох 5 различни категории за оразмеряване. (За дамски статии, щракнете тук, има много повече).

Под всеки раздел за оразмеряване установих уникално заглавие за всеки параметър, който ще събирам. Не искаме да имаме множество колони в нашата база данни с името „Размер“или няма да можем да определим към кой тип дрехи се отнася този размер.

В края на всеки раздел потребителят се насочва към последната част на този формуляр: Местоположение. Аз лично избрах да добавя Местоположение, за да определя предметите в Химическо чистене, в пералнята, на тяхно място или тези, в които съм оставил приятел да вземе назаем. Това ми позволява да се организирам и никога да не се чувствам така, сякаш някъде ми липсва част от облеклото.

Както споменах от самото начало, този проект може да бъде разширен по милион различни начини. Можете да го използвате за инвентаризация, по -прецизен инструмент за организация или за строго вземане на дрехи. Полетата и разделите, които можете да добавите, са безкрайни, така че не се чувствайте ограничени до това, което е във формата ми. (За дамските статии кликнете тук)

Преди да качите няколко свои собствени елемента, нека преминем към следващата стъпка, за да гарантираме правилното изпращане.

Стъпка 3: Скриптове на Google: (Server Code.gs) Първо погледнете данните и кода

Щраквайки върху документа на Google Sheets, ще видите много колони с данни (и някои редове, оставени за демонстрация). По време на изпращането на формуляри някои секции се пропускат, това е видно от липсващите данни в някои колони. Но бяха добавени допълнителни колони като ИД, Местоположение по подразбиране, Кой и Актуализиран за по -добро проследяване на редакциите на тези елементи.

При подаване на формуляра е създадено поле за идентификация, което позволява уникален идентификатор при преминаване през тази база данни. За да създадем това поле, ще разгледаме Script Editor, като щракнем върху Tools> Script Editor.

С отворен редактор на скриптове ще забележите 8 документа в страничната лента на този нов прозорец. Тези документи помагат да се контролира back-end процеса, front-end дисплеите и front-end функционалността. Ще скочим във всеки от тях (ако се придържате), но в момента щракнете върху Сървърния код.

Във файла Server Code.gs има много функции:

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

onSubmit (e) - Тази функция ще бъде конфигурирана като първата функция, която да се изпълнява, когато Google формуляр подаде. Можете да поставите други функции в тази функция, за да позволите да се случват много различни процеси.

onOpen (e) - Тази функция се извиква при отваряне на Google Sheets. Той попълва нова опция от менюто, която позволява бърз достъп до връзките и изгледите на приложения.

doGet ()- Тази функция се извиква при извикване на адреса на уеб приложението. Когато потребителят прегледа публикуваното уеб приложение, този код ще каже на страницата какво да покаже. В този случай това е документът Application.html.

include (fileName) - Тази функция се използва вътре в HTML страници за четене на друг документ и вмъкване на съдържанието им в подходящ HTML формат в друга страница. Използваме го за нашите CSS.html и JS.html файлове.

openApplication () и openLaundryApp () - Тези функции съдържат кода, който да се изпълнява, когато потребител кликне върху бутоните на менюто, добавени към лентата с инструменти на Google Sheet.

changeValueOnSubmit (e) и setIDOnSubmit (e)- Това са функциите, които ще разгледаме засега. Те са отговорни за актуализирането на определени полета със стойности по подразбиране, когато формулярът е изпратен първоначално.

Стъпка 4: Активиране на OnFormSubmit

Тези две функции, changeValueOnSubmit (e) и setIDOnSubmit (e), трябва да бъдат свързани с действието на потребителя при изпращане на формуляр. За да направим това, трябва да активираме Trigger.

Активираме задействането, като щракнем върху Редактиране> Задействанията на текущия проект. Това отваря Google Developer Hub.

В долния десен ъгъл на таблото за задействане има бутон Добавяне на спусък. Натисни тук.

Сега ще настроим функцията да се изпълнява при подаване на формуляр. В нашия случай имам множество функции (changeValueOnSubmit (e) и setIDOnSubmit (e)), които поставям във функция onSubmit (), така че трябва да настроя само 1 тригер. Затова ще изберем onSubmit () и ще настроим този тригер да се изпълнява при изпращане на формуляр.

Вече имаме работещ формуляр, който ще попълни Google Sheet с уникални идентификатори и ще зададе стойности по подразбиране.

Вече можете да качвате свои собствени елементи, като използвате формуляра на Google. (Това не е необходимо, за да продължите, тъй като вече има демонстрационни стойности в). Сега ще се потопим в потребителския интерфейс.

Стъпка 5: Настройване на потребителския интерфейс

ДОБРЕ ДОШЛИ! Най -накрая стигнахме до частта, за която сте дошли, потребителския интерфейс !!!!

На пръв поглед тук няма нищо. Все още не сме се обадили. За да заредя страницата по -бързо, реших да не тормозя първата страница с ВСИЧКИ ваши артикули и да ви позволя да кликнете върху това, което искате да видите по -бързо. Тъй като това е така, няма елементи в основното поле за съдържание и няма филтри в страничната лента. Нека кликнете върху Всички, за да видите какво има в нашата база данни.

Вече сме заредили всеки елемент от нашата база данни в полето за основно съдържание. Ще видите снимки, идентификационни номера, цвят, размери и местоположения. Полето за местоположение може да се актуализира точно тук! Ако решите да заемате предмета, можете да изберете тази опция, можете да го поставите в гардероба, скрина или прането.

И в страничната ни лента имаме всички възможни полета за всеки елемент от облеклото в новата ни заявка. Само си представете да имате 20 различни опции за оразмеряване на тази странична лента, това не би било много ефективно, така че нека да стесним търсенето си, като щракнем върху Аксесоари.

Сега, когато сме заредили аксесоари, погледнете страничната лента. Той се е коригирал само до 3 полета, тъй като това са параметрите, които се прилагат за всеки елемент в тази заявка. Ще направя сортиране по цвят. Като щракнете върху цвят, се появява падащо поле. Тук мога или да въведа желания от мен цвят и след това да го избера, или ако видя веднага опцията си, просто щраквам върху нея. Избрах Red за тази демонстрация. Щракнете върху Прилагане на филтър в долната част на тази странична лента и основното съдържание ще се опресни, като ви покаже елементите, които имат зададен цвят Червен като свой цветен параметър.

По -рано споменах, че тази база данни ми помага да управлявам нещата си на заем и в пералнята си. За да го направя малко по -лесно, вместо да натискам ръчно всяко падащо място на тази главна страница, създадох Режим на пране. Върнете се на страницата на Google Sheet и под App View ще видите Laundry Mode. Тази опция ще изтегли по -малък модал, който показва само артикули с местоположението на прането. Вече мога да маркирам всички тези елементи като по подразбиране, което ще ги върне на местата, където обикновено се съхраняват.

Стъпка 7: Проектът е завършен

ПОЗДРАВЛЕНИЯ

За тези от вас, които просто искат работеща база данни за управление на вашите артикули, добре дошли във вашия онлайн организатор. За тези любопитни умове, които се интересуват от кода зад това приложение. Останете, докато го разбивам.

*Можете да изтриете тестовите елементи СЛЕД като въведете поне един от вашите собствени елементи в базата данни. (Ще обясня по -късно, ако се придържате).

Стъпка 8: Стъпка 1: Back-End код (Server Code.gs)

По -рано отворихме файла Server Code.gs и дадох бърз преглед на всяка от функциите, тъй като тяхната цел беше да обслужват всеки от елементите, които току -що сте настроили, но сега ще ги разбием някои от функционалностите и изявленията, наречени за да направи този код успешен.

1) Преминаване на маса:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Отговори на формуляр 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Този код е основа за преминаване през Google Sheet. Извиквам листа по име, а не по номер, така че ако листовете са изтрити или пренаредени по функция, все още могат да работят правилно.
• В този код събирам само Range за всички данни в таблицата.

2) Присвояване на идентификационен номер:

var LastID = range.getCell (rowNum-1, 1); var CellValue = Номер (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);

• По -рано помолих демонстрационните стойности да бъдат оставени в таблицата, докато потребителят не представи поне една стойност за себе си. Това е така, защото генераторът за автоматичен идентификатор разчита на последната стойност в базата данни за попълване.
• Извличам последния 2 -ри до последен ред, защото последният ред е нашата нова стойност и 1 -ва колона за стойността на ID.
• След това произволно генерирам число между 5 и 15 и го добавям към последната стойност. *
• Накрая поставям тази стойност в колоната ID на последния ред.
• След това извикваме функцията changeValueOnSubmit (e).

* Избрах 5-15, за да дам възможност за бъдещо етикетиране и интегриране в Google Home, така че номерата да не бъдат достатъчно близки, за да предизвикат объркване на закачалките или етикетите на дрехите или баркодовете.

3) Промяна на стойността на URL адреса:

var DataChange = e. namedValues ["Снимка на артикула"]; var DefaultLocation = e. namedValues ["Къде държите тази дреха?"]; var ColD = ColumnID _ ("Изображение на артикула") +1; var ColLoc = ColumnID _ ("Местоположение по подразбиране")+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);

• Когато изпращате снимка чрез Google формуляр, URL адресът, вмъкнат в Google Sheets, е връзка към действителния документ. В нашия случай, докато създаваме HTML страница, искаме връзката да бъде само изображението.
• Чрез промяна на „отворен?“част от URL адреса към „uc? export = view &“вместо това създадохме връзка към изображението.
• Отново ще поставим тази нова стойност в местоположението на текущата връзка към снимка на артикула.
• Също така настройвам „Местоположение по подразбиране“и „Текущо местоположение“на елемента на едно и също нещо в базата данни. Това ще помогне, когато се опитвате да използвате моя режим на пране.

• Ще се потопим в него на следващата страница, но това е първият ни поглед към функцията ColumnID_ (), която създадох.

  Тази функция използва имена на колони, за да я преведе в цяло число на колоната, което е полезно за извикване на диапазон, което изисква номер на колона, а не име

4) SpreadsheetApp.getUI ()

• Във второто изображение можете да видите използването на SpreadsheetApp.getUI (), използвано за създаване на допълнение към лентата с инструменти към Google Sheet.
• Функцията.getUI () също помага за създаването на модален изскачащ прозорец, който се използва за режим на пране и като бърза връзка към интерфейса на уебсайта.

5) HTMLService

• В този код се използват два типа HTMLServices: Template и HTMLOutput
• Шаблонът позволява вмъкването на код вътре в HTML кода, така че информацията, идваща от сървър, да може да бъде попълнена при извикване на страницата.
• HTML Output показва прости HTML страници.
• Също така имаме метода include (), който ни позволява да създаваме множество HTML файлове и да ги комбинираме в един HTML файл с шаблон, като връщаме съдържанието на файла в HTML формат, а не в низ.

Прикачих документ, създаден като Google App Scripts Documentation, за да запозная по -добре начина, по който изходният код и функционалността са обяснени в Google Apps.

Стъпка 9: Стъпка 2: Back-End Code Част 2 (Server Calls.gs)

Сега трябва да въведем сървъра Calls.gs. Тези функции се използват предимно в HTML JavaScript, така че са отделени от кода, който се използва предимно в задния край, който се намира в Server Code.gs.

Снимка 1) Глобални променливи:

Снимка 2) Извличане на елементи:

Снимка 3) fetchItemsQry

Снимка 4) filterItems

Снимка 5) fetchFiltersWithQry

Снимка 6) ColumnID и CacheCalls

Има толкова много за разговор с всеки от тях. И за да разбия кода и да обясня какво се случва, ми трябваше малко повече място за писане. Приложен е документ за разбивката на кода на ServerCalls.gs

Този документ е настроен като документация на Google App Scripts Documentation и дори прави връзки към подобни обекти.

Стъпка 10: Стъпка 3: HTML кодът (Application.html)

HTML кодът става много нещастен в диалоговия прозорец на Instructable. Така че, моля, следвайте снимките по -горе.

1) В заглавката на страницата Application.html установяваме заглавие и извикваме нашата страница CSS.html за зареждане.

*Като шаблонна HTML страница, можем да добавим още код към този документ, без да претрупваме текущия екран, като използваме споменатия по -горе метод include (pageName), намерен в Server Code.gs

Основното заглавно поле също се намира на тази снимка. Можете да промените заглавката тук и да въведете „Гардероба на [Вашето име]“или каквото друго искате да разпознаете тази страница.

2) Точно под заглавката е горната ни навигационна лента.

Тази лента за навигация включва всички видове статии, изброени в листа с статии в нашите Google Таблици.

Извиква се вградена функция за извличане на масив от тези елементи. След това се изпълнява цикъл, който включва всяка от тези опции като бутон от меню, пълен с код на действие, така че когато потребител кликне върху бутона на менюто, съответните елементи ще се появят в областта на тялото.

3) Основното тяло.

Тази част има 4 части. Текстов изход, филтърът на страничната лента, изображенията на основното тяло и JS включват.

Текстовият изход позволява на потребителя да види бърз текстов изглед за типа елементи, които разглежда в момента, вместо да се позовава на опцията от менюто, която са избрали.

Филтърът на страничната лента съдържа многото налични филтри за типа елемент, който потребителят е избрал. Тези филтри отразяват всички налични опции за тази категория, както и колко артикула попадат в стойността на тази категория. Тази странична лента е попълнена с JavaScript код (който ще бъде разгледан по -нататък).

Основното тяло понастоящем е празно, но също като филтрите, то ще бъде запълнено с полета с елементи, които подробно описват идентификатора, цвета, размера и местоположението на артикула с включено изображение, след като потребителят избере категория и кодът на JavaScript попълни тази област.

Накрая включва (JS), нека да разгледаме това на следващата стъпка.

Стъпка 11: Стъпка 4: JavaScript кодът (JS.html)

Ако смятате, че кодът на сървъра е тежък раздел, вземете това.

Тук комбинираме нашия HTML и SeverCode с потребителски взаимодействия. Всеки елемент, върху който е щракнато, трябва да бъде обработен тук, за да получи правилните данни и да ги върне в четим формат. Така че нека да разгледаме първите ни обаждания:

Скриптът извиква: Използвам 3 различни библиотеки за този проект; jquery, bootstrap и специална добавка за избор на bootstrap. Тези библиотеки позволяват форматиране на обекти и по -лесни извиквания към елементите в HTML кода.

Следващият ми важен ред на JavaScript е по -долу:

$ (документ).keypress (function (event) {if (event.which == '13') {event.preventDefault (); }});

Тук деактивирам клавиша за въвеждане да задейства някоя от формите. Тъй като в този случай на Google Web Apps се присвоява само адресът на една страница. Натискането на Enter ще добави данни към HTML адреса и ще се опита да пренасочи потребителя. Като деактивирате това, вие позволявате на вашия JavaScript код да свърши цялата работа.

функция removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

функция updateDBlocation (id, стойност) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, стойност); }

Ето две функции, които правят обаждания към файла Server Code.gs. Линията:

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

има много работни части, но скелетът се корени от "google.script.run", който казва на HTML страницата, че следната функция е на сървъра.

• Последният бит от този код е функцията за изпълнение. В този пример ServerRemoveFilter ()
• Чрез добавяне на withSuccessHandler () HTML страницата вече знае какво да прави с данните, които се връщат, и това е да стартира функцията с скобите.
• Същото се отнася и за withFailureHandler ()

Сега, след като разбихме повикването на кода на сървъра, нека да разгледаме набързо какво се случва, когато тези повиквания на сървъра успеят и се провалят.

функция allGood (д) {console.log ("Успех на сървъра"); } функция onFailure (грешка) {$ ("#message-box"). html ("

Понастоящем не може да се извлече дрехи. ГРЕШКА: " + грешка. Съобщение +"

");} функция FailDBUpdate (грешка) {$ ("#съобщение-кутия "). html ("

Нямате достъп за промяна на местоположението. ГРЕШКА: " + грешка. Съобщение +"

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

Създадох много прост дневник на конзолата, за да отбележа успех, когато се изпълнява функцията за местоположение, която можете да видите като allGood ().

При обработката на грешките, тези две функции извеждат съобщението за грешка, където потребителят може да види, като използва jQuery извикване към HTML обекта с идентификатор на "box-box".

Сега нека се заемем с тежката работа

Стъпка 12: Стъпка 5: Действията при кликване с JavaScript код (JS.html)

Горната лента с менюта има опции за всеки тип статия. Функцията, която те изпълняват при щракване, е:

функция filterType (статия, идентификатор) {$ ("ul.navbar-nav li.active"). removeClass ("активен"); $ ("#currentArticle"). html ("// HTML КОД ТУК");

updateSideBar = вярно;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Статии", статия); var newSelect = "#type-"+id; $ (newSelect).addClass ("активен"); $ ("#myNavbar"). removeClass ("в"); }

Можем да видим в този код, че имаме google.script.run, който се обажда на сървъра за извличане на информация. Успешната функция за това извикване е updateItems ().

СНИМКА 1 (с тежкия HTML код в тази функция е трудно да се копира стриктно кода, без да се появява бъркотия в това поле)

В кода updateItems () се случват много неща. Отново трябва да преминем през обекта , който ни беше върнат, и да добавим всеки елемент към основната си основна страница.

HTML кодът се добавя като масиви, за да разбие кода и да улесни четенето и да види къде се вмъква itemData.

В цикъла на всеки елемент премахвам полета, които не искам да виждам в описанието, като по подразбиране, времева марка и URL адрес на снимката. Премахвам URL адреса на снимката от описанието, защото вместо това се добавя като href към маркер. След като тази информация бъде събрана, тя се изпраща до основното тяло с помощта на функцията jQuery.append ().

След като всички елементи са добавени към страницата, тази заявка за елементи се изпраща отново до кода на сървъра, за да сортира и върне опциите за филтриране, както се вижда на снимка 2.

СНИМКА 2 (актуализиране на страничната лента)

Много подобно на функцията updateItems (), отново имаме масиви от HTML код и цикъл за всички опции за филтриране. Единствената забележима промяна е jQuery.selectpicker („опресняване“). Тази функция идва от скриптовата библиотека, която включихме в последната стъпка. Той позволява на програмиста да напише прост HTML за избор и да позволи на библиотеката да го актуализира, за да включва функция за търсене, както и CSS код.

СНИМКА 3 (филтриране със страничната лента)

Накрая имаме функцията updateFilter (formData). Това се използва, когато формуляр е изпратен от страничната лента. Започваме с помощта на функция jQuery.serializeArray (), която чете HTML кода на елемента, дефиниран в нашия случай форма, и връща стойностите в низ за изпращане на сървъра. И започваме процеса от снимка 1 отначало.

Стъпка 13: Краят…. Окончателно

Е, има го; пълно и задълбочено обяснение, което да ви помогне да настроите свой собствен онлайн гардероб или да използвате функционалността, създадена в моите скриптове на Google, за да разширите своя собствен проект.

Това беше пътуване, кодиращо този проект (и документиране чрез този Instructable), но аз се насладих на процеса и се надявам, че ще се насладите на продукта. Бих искал да получа отговор от всеки, който направи корекции, тъй като Майкъл Джордан казва „Таванът е покривът“и съм съгласен, че това приложение няма граници.