Органайзер гардероба: 13 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:51

Будь то покупка одежды или постоянные просьбы одолжить какой-либо предмет, бывают случаи, когда вы хотите заглянуть в свой шкаф из любого места, чтобы увидеть, есть ли у вас что-то подобное. Органайзер гардероба делает именно это И БОЛЬШЕ!

Это универсальный магазин, который подходит для многих других целей. My Wizard Organizer - это комбинация Google Sheets в качестве базы данных SQL, скриптов Google для обработки данных и Google WebApp для онлайн-портала с этими данными. Конечный пользователь может увидеть все предметы, отфильтровать что-то конкретное, пометить предметы как взятые на время, управлять их стиркой и помешать маме покупать вам одну и ту же рубашку на Рождество каждый год *.

(* Нет гарантии. Матери будут покупать то, что им нужно, независимо от того, нужно это вам или нет)

Бегло взглянув на дизайн веб-сайта на изображении выше, можно узнать знакомый макет. Организатор гардероба настроен как любой обычный веб-сайт, посвященный одежде. Этот интерфейс, разбитый по отделам наверху и фильтрам сбоку, знакомит с функциональностью обычного пользователя. И им просто пользоваться.

Шаг 1. Создание собственной копии

Начнем с создания вашей собственной копии этого проекта.

Гугл драйв

Щелкните ссылку выше, чтобы перейти к моей текущей версии этого приложения.

В этой папке вы увидите 3 элемента: форму Google, таблицу Google и папку.

Щелкните правой кнопкой мыши лист Google и выберите «Сделать копию».

Установите Местоположение этой копии на свой собственный Диск.

После копирования этого документа форма Google будет автоматически создана в той же папке, в которую вы переместили лист Google.

Чтобы создать папку (это необходимо для сбора загрузок изображений элементов), щелкните скопированную форму Google, и появится запрос с просьбой восстановить местоположение папки для загрузок.

Теперь у вас есть копия этого документа, над которой вы можете работать сами!

Шаг 2. Обзор формы Google

Теперь, когда у вас есть собственная версия этого приложения, давайте посмотрим вокруг.

Ваша форма Google настроена для приема различных типов элементов. Однако рубашки, брюки, платья и обувь имеют разные ограничения по размеру. Поэтому будет заполнен другой раздел этой формы в зависимости от того, в какой отдел вы подаете свой товар. В моем шаблоне (Мужской статьи) я создал 5 различных категорий размеров. (Для женских статей нажмите здесь, их гораздо больше).

В каждом разделе размеров я установил уникальное название для каждого параметра, который я буду собирать. Мы не хотим иметь в нашей базе данных несколько столбцов с именем «Размер», иначе мы не сможем определить, к какому типу одежды относится этот размер.

В конце каждого раздела пользователь направляется к последней части этой формы: Location. Я лично решил добавить «Местоположение», чтобы определять предметы в химчистке, в прачечной, на их месте или те предметы, которые я дал другу позаимствовать. Это позволяет мне быть организованным и никогда не чувствовать, что я где-то упускаю какой-то предмет одежды.

Как я уже говорил с самого начала, этот проект можно расширить миллионами различных способов. Вы можете использовать его для инвентаризации, более точного инструмента организации или для строго одалживания одежды. Поля и разделы, которые вы можете добавить, бесконечны, поэтому не ограничивайтесь тем, что находится в моей форме. (Чтобы ознакомиться с женскими статьями, нажмите здесь)

Прежде чем вы загрузите несколько своих собственных элементов, давайте перейдем к следующему шагу, чтобы обеспечить правильную отправку.

Шаг 3. Сценарии Google: (Server Code.gs) Первый взгляд на данные и код

Щелкнув документ Google Sheets, вы увидите множество столбцов данных (и несколько строк, оставленных для демонстрации). При отправке формы некоторые разделы пропускаются, это видно по отсутствующим данным в некоторых столбцах. Но были добавлены дополнительные столбцы, такие как ID, Местоположение по умолчанию, Кто и Обновлено, чтобы лучше отслеживать изменения этих элементов.

Когда вы отправили форму, было создано поле идентификатора, позволяющее использовать уникальный идентификатор при просмотре этой базы данных. Чтобы создать это поле, мы взглянем на Редактор скриптов, щелкнув Инструменты> Редактор скриптов.

В открытом редакторе сценариев вы увидите 8 документов на боковой панели этого нового окна. Эти документы помогают управлять внутренними процессами, интерфейсными дисплеями и интерфейсными функциями. Мы перейдем к каждому из них (если вы останетесь здесь), но сейчас нажмите Server Code.

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

onSubmit (e), onOpen (), doGet (), include (имя файла), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - эта функция будет настроена как первая функция, запускаемая при отправке формы Google. Вы можете разместить другие функции внутри этой функции, чтобы разрешить выполнение множества различных процессов.

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

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), должны быть связаны с действием пользователя по отправке формы. Для этого нам нужно включить триггер.

Активируем триггер, щелкнув Правка> Триггеры текущего проекта. Откроется Центр разработчиков Google.

В правом нижнем углу панели инструментов триггера есть кнопка Добавить триггер. Кликните сюда.

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

Теперь у нас есть рабочая форма, которая будет заполнять Google Sheet уникальными идентификаторами и устанавливать значения по умолчанию.

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

Шаг 5: Настройка пользовательского интерфейса

ДОБРО ПОЖАЛОВАТЬ! Наконец-то мы достигли той части, за которой вы пришли, - пользовательского интерфейса !!!!

На первый взгляд здесь ничего нет. Мы еще не звонили. Чтобы страница загружалась быстрее, я решил не засорять первую страницу ВСЕМИ вашими элементами и позволить вам быстрее нажимать на то, что вы хотите увидеть. В этом случае в поле основного содержимого нет элементов и фильтров на боковой панели. Нажмите «Все», чтобы увидеть, что находится в нашей базе данных.

Теперь мы загрузили каждый элемент нашей базы данных в основное поле содержимого. Вы увидите изображения, идентификационные номера, цвет, размеры и расположение. Поле локации можно обновить прямо здесь! Если вы решите одолжить предмет, вы можете выбрать этот вариант, вы можете поместить его в свой шкаф, комод или прачечную.

А на боковой панели у нас есть все возможные поля для каждого предмета одежды в нашем новом запросе. Только представьте, что на этой боковой панели есть 20 различных вариантов размеров, это было бы не очень эффективно, поэтому давайте сузим область поиска, нажав «Аксессуары».

Теперь, когда мы загрузили аксессуары, взгляните на боковую панель. Он адаптирован только к 3 полям, так как это параметры, которые применяются к каждому элементу в этом запросе. Я собираюсь сделать сортировку по цвету. При нажатии на цвет появляется раскрывающийся список. Здесь я могу либо ввести нужный цвет, а затем выбрать его, либо, если сразу увижу свой вариант, я просто щелкну его. Я выбрал красный для этой демонстрации. Нажмите Применить фильтр в нижней части этой боковой панели, и основное содержимое обновится, показывая элементы, для которых установлен красный цвет в качестве параметра цвета.

Я ранее упоминал, что эта база данных помогает мне управлять своими вещами, взятыми во временное пользование и в прачечной. Чтобы упростить задачу, вместо того, чтобы вручную щелкать каждое раскрывающееся меню на этой главной странице, я создал режим прачечной. Вернитесь на страницу Google Sheet и в разделе App View вы увидите Laundry Mode. Эта опция откроет модальное окно меньшего размера, в котором будут показаны только предметы с местонахождением прачечной. Теперь я могу пометить все эти элементы как значения по умолчанию, что вернет их на свои места, где они обычно хранятся.

Шаг 7: Проект завершен

ПОЗДРАВЛЯЮ

Для тех из вас, кому просто нужна рабочая база данных для управления вашими товарами, добро пожаловать в онлайн-органайзер. Для тех, кто интересуется кодом этого приложения. Оставайся, пока я его ломаю.

* Вы можете удалить тестовые задания ПОСЛЕ того, как вы введете хотя бы один из ваших заданий в базу данных. (Я объясню позже, если вы останетесь).

Шаг 8: Шаг 1: внутренний код (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. Я называю лист по имени, а не по номеру, так что даже если листы удаляются или переупорядочиваются по функциям, они по-прежнему работают правильно.
• В этом коде я собираю только диапазон для всех данных в таблице.

2) Назначение идентификатора:

var LastID = range.getCell (rowNum-1, 1); var CellValue = Number (LastID.getValue ()); var ColA = 1; var max = 15; var min = 5; CellValue = CellValue + Math.round ((Math.random () * (макс - мин) + мин)); e.source.getActiveSheet ().getRange (диапазон.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (е);

• Ранее я просил оставить демонстрационные значения в таблице до тех пор, пока пользователь не отправит для себя хотя бы одно значение. Это связано с тем, что генератор Auto 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 («открыть?», «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 Таблицы, представляет собой ссылку на настоящий документ. В нашем случае, когда мы создаем HTML-страницу, мы хотим, чтобы ссылка была просто изображением.
• Изменяя "открытый?" часть URL-адреса на «uc? export = view &» вместо этого мы создали ссылку на изображение.
• Мы снова разместим это новое значение в месте ссылки на текущее изображение элемента.
• Я также устанавливаю "Местоположение по умолчанию" и "Текущее местоположение" элемента на одно и то же значение в базе данных. Это поможет при попытке использовать мой режим стирки.

• Мы углубимся в это на следующей странице, но это наш первый взгляд на созданную мной функцию ColumnID_ ().

  Эта функция использует имена столбцов для преобразования их в целое число столбца, что полезно для вызова диапазона, для которого требуется номер столбца, а не имя

4) SpreadsheetApp.getUI ()

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

5) HTMLService

• В этом коде используются два типа HTMLServices: шаблон и HTMLOutput.
• Шаблон позволяет вставлять код внутрь HTML-кода, чтобы информация, поступающая с сервера, могла быть заполнена при вызове страницы.
• Вывод HTML отображает простые HTML-страницы.
• У нас также есть метод includes (), который позволяет нам создавать несколько файлов HTML и объединять их в один шаблонный файл HTML, возвращая содержимое файла в формате HTML, а не в виде строки.

Я приложил документ, подобный документации по скриптам приложений Google, чтобы познакомить вас с объяснением исходного кода и функций в Google Apps.

Шаг 9: Шаг 2: внутренний код, часть 2 (Server Calls.gs)

Теперь у нас есть Server Calls.gs. Эти функции используются в основном в HTML JavaScript, поэтому они были отделены от кода, который в основном используется в серверной части, расположенной в Server Code.gs.

Рисунок 1) Глобальные переменные:

Рисунок 2) получение предметов:

Рисунок 3) fetchItemsQry

Рисунок 4) filterItems

Рисунок 5) fetchFiltersWithQry

Рисунок 6) ColumnID и CacheCalls

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

Этот документ настроен как Документация по скриптам приложений Google и даже содержит ссылки на похожие объекты.

Шаг 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-select. Эти библиотеки позволяют форматировать объекты и упрощать вызов элементов в HTML-коде.

Моя следующая важная строка JavaScript приведена ниже:

$ (документ).keypress (функция (событие) {если (event.which == '13') {event.preventDefault (); }});

Здесь я отключаю нажатие клавиши ввода для запуска любой из форм. В этом случае веб-приложениям Google назначается только адрес одной страницы. Нажатие Enter добавит данные в HTML-адрес и попытается перенаправить пользователя. Отключив это, вы разрешите вашему коду JavaScript выполнять всю работу.

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

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

Вот две функции, которые обращаются к файлу Server Code.gs. Линия:

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

В нем много рабочих частей, но его каркас основан на "google.script.run", который сообщает HTML-странице, что следующая функция находится на сервере.

• Последний бит этого кода - это функция, которую нужно запустить. В этом примере ServerRemoveFilter ()
• Добавив withSuccessHandler (), HTML-страница теперь знает, что делать с возвращаемыми данными, и это нужно для запуска функции со скобками.
• То же самое относится к withFailureHandler ()

Теперь, когда мы разобрали вызов кода сервера, давайте кратко рассмотрим, что происходит, когда этот вызов сервера завершается успешно и терпит неудачу.

function allGood (e) {console.log («Успех на сервере»); } function onFailure (error) {$ ("# message-box"). html ("

В настоящее время невозможно получить одежду. ОШИБКА: "+ error.message +"

");} function FailDBUpdate (error) {$ (" # message-box "). html ("

У вас нет доступа для изменения местоположения. ОШИБКА: "+ error.message +"

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

Я создал очень простой консольный журнал для подтверждения успеха при запуске функции определения местоположения, который вы можете увидеть как allGood ().

При обработке ошибок эти две функции выводят сообщение об ошибке, которое пользователь может увидеть, используя jQuery-вызов объекта HTML с идентификатором «message-box».

А теперь перейдем к серьезной работе.

Шаг 12: Шаг 5: действия при нажатии на код JavaScript (JS.html)

В верхней строке меню есть параметры для каждого типа статьи. Функция, которую они запускают при щелчке, следующая:

функция filterType (article, id) {$ ("ul.navbar-nav li.active"). removeClass ("active"); $ ("# currentArticle"). html ("// HTML-КОД ЗДЕСЬ");

updateSideBar = true;

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

В этом коде мы видим, что у нас есть google.script.run, который обращается к серверу для получения информации. Функция успеха для этого вызова - updateItems ().

РИСУНОК 1 (с тяжелым HTML-кодом в этой функции трудно строго скопировать код, не создавая беспорядка в этом поле)

В коде updateItems () много чего происходит. Мы снова должны пройти через Object , который был нам возвращен, и добавить каждый элемент на нашу главную страницу.

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

В цикле для каждого элемента я удаляю поля, которые не хочу видеть в описании, такие как Default, timestamp и image URL. Я удаляю URL-адрес изображения из описания, потому что вместо этого он добавляется как href к тегу. Как только эта информация собрана, она отправляется в основную часть с помощью функции jQuery.append ().

После того, как все элементы были добавлены на страницу, этот запрос элементов снова отправляется в серверный код для сортировки и возврата параметров фильтра, как показано на рисунке 2.

РИСУНОК 2 (обновление боковой панели)

Очень похоже на функцию updateItems (), у нас снова есть массивы HTML-кода и цикл для всех параметров фильтра. Единственное заметное изменение - это jQuery.selectpicker ('обновить'). Эта функция взята из библиотеки сценариев, которую мы включили на последнем шаге. Это позволяет программисту написать простой выбранный HTML-код и позволить библиотеке обновлять его, чтобы включить функцию поиска, а также код CSS.

РИСУНОК 3 (фильтрация с помощью боковой панели)

Наконец, у нас есть функция updateFilter (formData). Это используется, когда форма отправляется с боковой панели. Мы начинаем с использования функции jQuery.serializeArray (), которая считывает HTML-код элемента, определенного в нашем случае формы, и возвращает значения в строке для отправки на сервер. И мы снова начинаем процесс с рисунка 1.

Шаг 13: Конец … наконец

Ну вот и все; полное и подробное объяснение, которое поможет вам создать свой собственный онлайн-гардероб или использовать функции, созданные в моих скриптах Google, для расширения вашего собственного проекта.

Написание этого проекта (и документирование с помощью этого руководства) было долгим путешествием, но мне понравился процесс, и я надеюсь, что вам понравится продукт. Я хотел бы услышать ответ от любого, кто вносит коррективы, как Майкл Джордан говорит: «Потолок - это крыша», и я согласен, что это приложение не имеет ограничений.