Organizador de armario: 13 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

Ya sea que se trate de comprar ropa o de que siempre se le pida prestado algún artículo, hay ocasiones en las que desearía poder echar un vistazo a su armario desde cualquier lugar para ver si tiene algo similar.

Esta es una ventanilla única y es expansiva para muchos otros propósitos. My Wardrobe Organizer es una combinación de Google Sheets como base de datos SQL, Google Scripts para manejar los datos y Google WebApp para un portal en línea para estos datos. El usuario final puede ver todos los artículos, filtrar por algo específico, marcar artículos como prestados, administrar su ropa y evitar que mamá te compre la misma camisa para Navidad todos los años *.

(* Sin garantía. Las madres comprarán lo que quieran, lo necesites o no)

Al echar un vistazo rápido al diseño del sitio web en la imagen de arriba, uno podría reconocer un diseño familiar. El organizador de vestuario está configurado como cualquier sitio web de ropa ordinario. Dividida por departamentos en la parte superior y filtros proporcionados en el lateral, esta interfaz brinda familiaridad con la funcionalidad al usuario ocasional. Y es fácil de usar.

Paso 1: configuración de su propia copia

Comencemos creando su propia copia de este proyecto.

Google Drive

Haga clic en el enlace de arriba para llevarlo a mi versión actual de esta aplicación.

Verá 3 elementos en esta carpeta: un formulario de Google, una hoja de Google y una carpeta.

Haga clic derecho en la hoja de Google y haga clic en Hacer una copia.

Establezca la ubicación de esta copia en su propia unidad.

Después de copiar este documento, el formulario de Google se generará automáticamente en la misma carpeta que movió la hoja de Google.

Para crear la carpeta (esto es necesario para recopilar las cargas de las imágenes de los elementos), haga clic en el formulario de Google copiado y aparecerá un mensaje pidiéndole que restaure la ubicación de la carpeta para las cargas.

¡Ahora tiene una copia de este documento para trabajar usted mismo!

Paso 2: descripción general del formulario de Google

Ahora que tiene su propia versión de esta aplicación, echemos un vistazo.

Su formulario de Google está configurado para aceptar muchos tipos diferentes de elementos. Sin embargo, las camisas, pantalones, vestidos y zapatos tienen diferentes limitaciones de tamaño. Por lo tanto, se completará una sección diferente de este formulario en función del departamento en el que presente su artículo. En mi plantilla (Artículo masculino) he creado 5 categorías de tamaño diferentes. (Para artículos de mujeres, haga clic aquí, hay muchos más).

Debajo de cada sección de tamaño, establecí un título único para cada parámetro que recopilaré. No queremos tener varias columnas en nuestra base de datos con el nombre "Talla" o no podríamos determinar a qué tipo de ropa se aplica esa talla.

Al final de cada sección, se dirige al usuario a la parte final de este formulario: Ubicación. Personalmente, elegí agregar Ubicación para determinar los artículos en la tintorería, en la lavandería, en su lugar o aquellos artículos en los que le he prestado a un amigo. Esto me permite organizarme y nunca sentir que me falta una prenda de vestir en alguna parte.

Como mencioné desde el principio, este proyecto se puede expandir de un millón de formas diferentes. Puede usarlo para inventario, una herramienta de organización más precisa o para pedir prestada estrictamente ropa. Los campos y las secciones que puede agregar son infinitos, así que no se limite a lo que hay en mi formulario. (Para los artículos de mujeres, haga clic aquí)

Antes de subir algunos de sus propios elementos, pasemos al siguiente paso para garantizar un envío adecuado.

Paso 3: Google Scripts: (Server Code.gs) Primer vistazo a los datos y el código

Al hacer clic en el documento de Hojas de cálculo de Google, verá muchas columnas de datos (y algunas filas, dejadas como demostración). Durante el envío del formulario, se omiten algunas secciones, esto es evidente por los datos que faltan en algunas columnas. Pero se han agregado columnas adicionales como ID, Ubicación predeterminada, Quién y Actualizado para realizar un mejor seguimiento de las ediciones de estos elementos.

Se creó un campo de ID cuando envió el formulario para permitir un identificador único al atravesar esta base de datos. Para crear este campo, echaremos un vistazo al Editor de secuencias de comandos haciendo clic en Herramientas> Editor de secuencias de comandos.

Con el Editor de secuencias de comandos abierto, verá 8 documentos en la barra lateral de esta nueva ventana. Estos documentos ayudan a controlar el proceso de back-end, las pantallas de front-end y la funcionalidad de front-end. Saltaremos a cada uno (si te quedas) pero ahora mismo haz clic en Código del servidor.

En el archivo Server Code.gs hay muchas funciones:

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

onSubmit (e): esta función se configurará como la primera función que se ejecutará cuando se envíe un formulario de Google. Puede colocar otras funciones dentro de esta función para permitir que sucedan muchos procesos diferentes.

onOpen (e): esta función se llama cuando se abre Google Sheets. Completa una nueva opción de menú para permitir un acceso rápido a los enlaces y vistas de la aplicación.

doGet (): esta función se llama en la llamada de dirección de la aplicación web. Cuando un usuario navega a la aplicación web publicada, este código le indicará a esa página qué mostrar. En este caso, es el documento Application.html.

include (fileName): esta función se utiliza dentro de las páginas HTML para leer otro documento e insertar su contenido en un formato HTML adecuado dentro de otra página. Lo usamos para nuestros archivos CSS.html y JS.html.

openApplication () y openLaundryApp (): estas funciones contienen el código para ejecutarse cuando un usuario hace clic en los botones de menú agregados a la barra de herramientas de Google Sheet.

changeValueOnSubmit (e) y setIDOnSubmit (e): estas son las funciones que analizaremos por ahora. Son responsables de actualizar ciertos campos con valores predeterminados cuando el formulario se envía inicialmente.

Paso 4: Habilitar OnFormSubmit

Estas dos funciones, changeValueOnSubmit (e) y setIDOnSubmit (e), deben estar conectadas a la acción del usuario de enviar un formulario. Para hacerlo, necesitamos habilitar un Trigger.

Habilitamos el disparador haciendo clic en Editar> Disparadores del proyecto actual. Esto abre Google Developer Hub.

En la esquina inferior derecha del tablero de disparadores hay un botón Agregar un disparador. Haga clic aquí.

Ahora configuraremos la función para que se ejecute cuando se envíe un formulario. En nuestro caso, tengo varias funciones (changeValueOnSubmit (e) y setIDOnSubmit (e)) que puse dentro de una función onSubmit (), por lo que solo tengo que configurar 1 disparador. Por lo tanto, seleccionaremos onSubmit () y configuraremos este disparador para que se ejecute al enviar el formulario.

Ahora tenemos un formulario de trabajo que llenará una hoja de Google con identificadores únicos y establecerá valores predeterminados.

Ahora puede cargar sus propios elementos utilizando el formulario de Google. (Esto no es necesario para continuar porque ya hay valores de demostración). Ahora nos sumergiremos en la interfaz de usuario.

Paso 5: configuración de la interfaz de usuario

¡BIENVENIDO! ¡Finalmente hemos llegado a la parte que buscaste, la interfaz de usuario!

A primera vista, no hay nada aquí. Aún no hemos hecho ninguna llamada. Para cargar la página más rápido, decidí no plagar la primera página con TODOS sus elementos y permitirle hacer clic en lo que desea ver más rápido. Dado que este es el caso, no hay elementos en el campo de contenido principal ni filtros en la barra lateral. Hagamos clic en Todo para ver qué hay en nuestra base de datos.

Ahora hemos cargado todos los elementos de nuestra base de datos en el campo de contenido principal. Verá imágenes, números de identificación, colores, tamaños y ubicaciones. ¡El campo de ubicación se puede actualizar aquí mismo! Si decide prestar el artículo, puede seleccionar esa opción, puede colocarlo en su armario, tocador o lavandería.

Y en nuestra barra lateral tenemos todos los campos posibles para cada artículo de ropa en nuestra nueva consulta. Imagínese tener 20 opciones de tamaño diferentes en esta barra lateral, no sería muy efectivo, así que limitemos nuestra búsqueda haciendo clic en Accesorios.

Ahora que hemos cargado Accesorios, eche un vistazo a la barra lateral. Se ha ajustado a solo 3 campos, ya que estos son los parámetros que se aplican a todos los elementos de esta consulta. Voy a hacer una ordenación por color. Al hacer clic en el color, aparece un cuadro desplegable. Aquí puedo escribir el color que quiero y luego seleccionarlo, o si veo mi opción de inmediato, simplemente hago clic en ella. Seleccioné Red para esta demostración. Haga clic en Aplicar filtro en la parte inferior de esta barra lateral y el contenido principal se actualizará y le mostrará los elementos que tienen el color Rojo establecido como parámetro de color.

Anteriormente mencioné que esta base de datos me ayuda a administrar mis artículos en préstamo y en mi lavandería. Para hacerlo un poco más fácil, en lugar de hacer clic manualmente en cada ubicación desplegable en esta página principal, creé el Modo de lavado. Regrese a la página de Google Sheet y en App View verá el modo de lavado. Esta opción abrirá un modal más pequeño que muestra solo los artículos con la ubicación de Lavandería. Ahora puedo marcar todos estos elementos como predeterminados, lo que los volverá a colocar en sus ubicaciones en las que normalmente están almacenados.

Paso 7: ¡Proyecto completado

¡FELICITACIONES

Para aquellos de ustedes que solo desean una base de datos funcional para administrar sus artículos, bienvenidos a su Organizador en línea. Para aquellas mentes curiosas interesadas en el código detrás de esta aplicación. Quédate mientras lo analizo.

* Puede eliminar los elementos de prueba DESPUÉS de ingresar al menos uno de sus propios elementos en la base de datos. (Te lo explicaré más tarde si te quedas).

Paso 8: Paso 1: el código de back-end (Server Code.gs)

Anteriormente, abrimos el archivo Server Code.gs y le di un resumen rápido de cada una de las funciones, ya que su propósito era servir cada uno de los elementos que acaba de configurar, pero ahora los desglosaremos en algunas de las funciones y utilidades llamadas para que este código sea un éxito.

1) Mesa atravesada:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Formulario de respuestas 1"); rango var = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Este código es la base para recorrer una hoja de Google. Llamo a la hoja por su nombre en lugar de por número para que, si las hojas se eliminan o reorganizan por función, aún puedan funcionar correctamente.
• En este código, estoy recopilando solo el Rango para todos los datos de la tabla.

2) Asignar un ID:

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 () * (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

• Anteriormente pedí que los valores de demostración se dejaran en la tabla hasta que el usuario haya enviado al menos un valor para sí mismo. Esto se debe a que el generador de Auto ID se basa en el último valor de la base de datos para completar.
• Busco la última fila de la segunda a la última porque la última fila es nuestro nuevo valor y la primera columna para el valor de ID.
• Luego genero aleatoriamente un número entre 5 y 15 y lo agrego al último valor. *
• Finalmente coloco este valor en la columna ID de la última fila.
• A continuación, llamamos a la función changeValueOnSubmit (e).

* Elegí 5-15 para permitir el etiquetado futuro y la integración de Google Home para que los números no estén lo suficientemente cerca como para causar confusión en las perchas o las etiquetas de la ropa o los códigos de barras.

3) Cambiar el valor de la URL:

var DataChange = e.namedValues ["Imagen del artículo"]; var DefaultLocation = e.namedValues ["¿Dónde guardas esta prenda de vestir?"]; var ColD = ColumnID _ ("Imagen del artículo") +1; var ColLoc = ColumnID _ ("Ubicación predeterminada") + 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);

• Al enviar una foto a través de un formulario de Google, la URL insertada en Google Sheets es un enlace al documento real. En nuestro caso, ya que estamos creando una página HTML, queremos que el enlace sea solo la imagen.
• Cambiando el "abrir?" parte de la URL a "uc? export = view &", en su lugar, hemos creado un enlace a la imagen.
• Volveremos a colocar este nuevo valor en la ubicación del enlace actual de la imagen del artículo.
• También estoy configurando la "Ubicación predeterminada" y la "Ubicación actual" del elemento en lo mismo en la base de datos. Esto ayudará cuando intente usar mi modo de lavado.

• Nos sumergiremos en él en la página siguiente, pero este es nuestro primer vistazo a la función ColumnID_ () que creé.

  Esta función usa nombres de columna para traducirlo al entero de columna, lo que es útil para las llamadas de rango que requieren un número de columna en lugar de un nombre

4) SpreadsheetApp.getUI ()

• En la segunda imagen, puede ver el uso de SpreadsheetApp.getUI () como se usó para crear una adición del menú de la barra de herramientas a la hoja de Google.
• La función.getUI () también ayuda a crear una ventana emergente modal que se utiliza para el modo Lavandería y como un enlace rápido a la interfaz del sitio web.

5) HTMLService

• Hay dos tipos de servicios HTML utilizados en este código: plantilla y HTMLOutput
• La plantilla permite insertar código dentro del código HTML para que la información proveniente de un servidor se pueda completar cuando se llama a la página.
• La salida HTML muestra páginas HTML simples.
• También tenemos el método includes () que nos permite crear varios archivos HTML y combinarlos en un archivo HTML con plantilla al devolver el contenido del archivo en un formato HTML en lugar de una cadena.

He adjuntado un documento configurado como Documentación de scripts de aplicaciones de Google para familiarizarme con cómo se explica el código fuente y la funcionalidad en Google Apps.

Paso 9: Paso 2: el código de back-end, parte 2 (Server Calls.gs)

Ahora hemos ingresado al servidor Calls.gs. Estas funciones se utilizan principalmente en HTML JavaScript, por lo que se han separado del código que se utiliza principalmente en el back-end que se encuentra en Server Code.gs.

Imagen 1) Variables globales:

Imagen 2) obtención de artículos:

Imagen 3) fetchItemsQry

Imagen 4) filterItems

Imagen 5) fetchFiltersWithQry

Imagen 6) ColumnID y CacheCalls

Hay mucho de qué hablar con cada uno de estos. Y para descomponer el código y explicar lo que está pasando, necesitaba un poco más de espacio para escribir. Se adjunta un documento para el desglose del código de ServerCalls.gs

Este documento está configurado como Documentación de scripts de aplicaciones de Google e incluso crea enlaces a objetos similares.

Paso 10: Paso 3: el código HTML (Application.html)

El código HTML se vuelve muy infeliz dentro del cuadro de diálogo de Instructable. Así que siga las imágenes de arriba.

1) En el encabezado de la página Application.html establecemos un título y llamamos a nuestra página CSS.html para que se cargue.

* Al ser una página HTML con plantilla, podemos agregar más código a este documento sin saturar la pantalla actual utilizando el método include (pageName) mencionado anteriormente que se encuentra en Server Code.gs

El cuadro de encabezado principal también se encuentra en esta imagen. Puede cambiar el encabezado aquí e ingresar "Guardarropa de [su nombre]" o cualquier otra cosa que le gustaría reconocer en esta página.

2) Justo debajo del encabezado está nuestra barra de navegación superior.

Esta barra de navegación incluye todos los tipos de artículos que se enumeran en la hoja de artículos dentro de nuestras Hojas de cálculo de Google.

Se llama a una función en línea para obtener una matriz de estos elementos. Luego se ejecuta un ciclo para incluir cada una de estas opciones como un botón de menú, completo con un código de acción para que cuando un usuario haga clic en el botón de menú, los elementos respectivos aparecerán en el área del cuerpo.

3) El cuerpo principal.

Hay 4 partes de esta parte. Una salida de texto, el filtro de la barra lateral, las imágenes del cuerpo principal y JS incluye.

La salida de texto permite al usuario ver una vista de texto rápido para el tipo de elementos que está mirando actualmente en lugar de referirse a la opción de menú que seleccionó.

El filtro de la barra lateral contiene los muchos filtros disponibles para el tipo de elemento que ha seleccionado un usuario. Estos filtros reflejan todas las opciones disponibles para esta categoría, así como la cantidad de elementos que se incluyen en el valor de esa categoría. Esta barra lateral está llena de código JavaScript (que se discutirá a continuación).

El cuerpo principal está actualmente vacío, pero al igual que los filtros, se llenará con cuadros de elementos que detallan el ID, el color, el tamaño y la ubicación del elemento con una imagen incluida una vez que el usuario selecciona una categoría y el código JavaScript llena esta área.

Finalmente, incluye (JS), echemos un vistazo a esto en el siguiente paso.

Paso 11: Paso 4: el código JavaScript (JS.html)

Si pensaba que el Código del servidor era una sección pesada, obtenga una carga de esto.

Aquí combinamos nuestro HTML y SeverCode con las interacciones del usuario. Cualquier elemento en el que se haga clic debe procesarse aquí para obtener los datos correctos y devolverlo en un formato legible. Así que echemos un vistazo a nuestras primeras llamadas:

El script llama: Estoy usando 3 bibliotecas diferentes para este proyecto; jquery, bootstrap y un complemento especial de bootstrap-select. Estas bibliotecas permiten el formateo de objetos y llamadas más fáciles a los elementos dentro del código HTML.

Mi siguiente línea importante de JavaScript está a continuación:

$ (documento).keypress (function (evento) {if (event.which == '13') {event.preventDefault (); }});

Aquí estoy deshabilitando la tecla Intro para que no active cualquiera de los formularios. Como en este caso, a las aplicaciones web de Google solo se les asigna su dirección de una página. Una pulsación de Intro agregaría datos a la dirección HTML e intentaría redirigir al usuario. Al deshabilitar esto, permite que su código JavaScript haga todo el trabajo.

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

función updateDBlocation (id, valor) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, valor); }

Aquí hay dos funciones que están realizando llamadas al archivo Server Code.gs. La línea:

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

tiene muchas partes funcionales, pero el esqueleto tiene sus raíces en "google.script.run", lo que le dice a la página HTML que la siguiente función está en el servidor.

• El último bit de este código es la función a ejecutar. En este ejemplo ServerRemoveFilter ()
• Al agregar un withSuccessHandler (), la página HTML ahora sabe qué hacer con los datos que se devuelven, y esto es para ejecutar la función entre paréntesis.
• Lo mismo se aplica a withFailureHandler ()

Ahora que hemos desglosado la llamada al código del servidor, echemos un vistazo rápido a lo que sucede cuando estas llamadas al servidor tienen éxito y fallan.

function allGood (e) {console.log ("Éxito en el servidor"); } function onFailure (error) {$ ("# cuadro de mensaje"). html ("

No se pueden recuperar los artículos de ropa en este momento. ERROR: "+ error.message +"

");} función FailDBUpdate (error) {$ (" # cuadro de mensaje "). html ("

No tiene acceso para modificar la ubicación. ERROR: "+ error.message +"

"); $ (". ubicación-selecciona "). prop ('deshabilitado', 'deshabilitado');}

Creé un registro de consola muy simple para indicar el éxito cuando se ejecuta la función de ubicación, que puede ver como allGood ().

Al manejar los errores, estas dos funciones generan el mensaje de error donde el usuario puede ver usando una llamada jQuery al objeto HTML con un ID de "message-box".

Ahora vayamos al trabajo duro

Paso 12: Paso 5: las acciones de clic de código JavaScript (JS.html)

La barra de menú superior tiene opciones para cada tipo de artículo. La función que ejecutan al hacer clic es:

function filterType (artículo, id) {$ ("ul.navbar-nav li.active"). removeClass ("activo"); $ ("# currentArticle"). html ("// CÓDIGO HTML AQUÍ");

updateSideBar = true;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Artículos", artículo); var newSelect = "#tipo -" + id; $ (newSelect).addClass ("activo"); $ ("# myNavbar"). removeClass ("en"); }

Podemos ver en este código que tenemos un google.script.run que llama al servidor para recuperar información. La función de éxito para esta llamada es updateItems ().

IMAGEN 1 (con el código HTML pesado dentro de esta función, es difícil copiar estrictamente el código, sin que aparezca un desorden en este cuadro)

En el código updateItems (), están sucediendo muchas cosas. Una vez más debemos atravesar el Objeto que nos fue devuelto y agregar cada elemento a nuestra página principal.

El código HTML se agrega como matrices para dividir el código y facilitar la lectura y ver dónde se inserta itemData.

En el ciclo de cada elemento, estoy eliminando campos que no quiero ver en la descripción, como Predeterminado, marca de tiempo y URL de imagen. Elimino la URL de la imagen de la descripción porque se está agregando como href a una etiqueta. Una vez reunida esta información, se envía al cuerpo principal mediante la función jQuery.append ().

Una vez que se han agregado todos los elementos a la página, esta consulta de elementos se envía nuevamente al Código de servidor para ordenar y devolver las opciones de filtro como se ve en la Imagen 2.

IMAGEN 2 (actualizando la barra lateral)

Muy similar a la función updateItems (), una vez más tenemos matrices de código HTML y un bucle para todas las opciones de filtro. El único cambio notable es jQuery.selectpicker ('actualizar'). Esta función proviene de la biblioteca de scripts que incluimos en el último paso. Permite al programador escribir un HTML de selección simple y dejar que la biblioteca lo actualice para incluir la función de búsqueda, así como el código CSS.

IMAGEN 3 (filtrado con la barra lateral)

Por último tenemos la función updateFilter (formData). Se utiliza cuando se envía un formulario desde la barra lateral. Comenzamos usando una función jQuery.serializeArray () esta lee el código HTML del elemento definido en nuestro caso un formulario, y devuelve los valores en una cadena para ser enviados al servidor. Y comenzamos el proceso desde la Imagen 1 de nuevo.

Paso 13: El fin … finalmente

Bueno, ahí lo tienes; una explicación completa y detallada para ayudarlo a configurar su propio guardarropa en línea, o utilizar la funcionalidad creada en mis Google Scripts para expandir su propio proyecto.

Ha sido un viaje codificar este proyecto (y documentar a través de este Instructable) pero he disfrutado el proceso y espero que disfruten del producto. Me encantaría recibir noticias de cualquiera que haga ajustes como dice Michael Jordan "El techo es el techo" y estoy de acuerdo en que esta aplicación no tiene límites.