Organitzador d’armaris: 13 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

Tant si es tracta de comprar roba com si sempre se us demana que demaneu prestat algun article, hi ha vegades que desitgeu que pugueu mirar el vostre armari des de qualsevol lloc per veure si teniu alguna cosa semblant.

Es tracta d'una finestreta única i és expansiu per a molts altres propòsits. My Wardrobe Organizer és una combinació de Fulls de càlcul de Google com a base de dades SQL, Google Scripts per al tractament de les dades i Google WebApp per a un portal en línia amb aquestes dades. L’usuari final pot veure tots els articles, filtrar alguna cosa específica, marcar articles com a préstecs, gestionar la roba i evitar que la mare et compri la mateixa camisa per Nadal cada any *.

(* Sense garantia. Les mares compraran el que vulguin tant si ho necessiteu com si no)

Fent una ullada ràpida al disseny del lloc web de la imatge superior, es pot reconèixer un disseny familiar. L’organitzador de vestuari es configura com qualsevol lloc web de roba normal. Desglossada per departaments a la part superior i filtres proporcionats al lateral, aquesta interfície proporciona familiaritat amb la funcionalitat a l'usuari ocasional. I és senzill d'utilitzar.

Pas 1: configuració de la vostra pròpia còpia

Comencem creant la vostra pròpia còpia d'aquest projecte.

Google Drive

Feu clic a l'enllaç anterior per accedir a la meva versió actual d'aquesta aplicació.

Veureu 3 elements en aquesta carpeta: un formulari de Google, un full de full de Google i una carpeta.

Feu clic amb el botó dret al full de Google i feu clic a Fes una còpia.

Establiu la ubicació d'aquesta còpia al vostre propi Drive.

Després de copiar aquest document, el formulari de Google es generarà automàticament a la mateixa carpeta on heu mogut el full de Google.

Per crear la carpeta (això és necessari per recollir les càrregues de les imatges de l'element), feu clic al formulari de Google copiat i apareixerà un missatge que us demanarà que restableixi la ubicació de la carpeta per a les càrregues.

Ara teniu una còpia d’aquest document per treballar-hi.

Pas 2: Visió general del formulari de Google

Ara que teniu la vostra pròpia versió d’aquesta aplicació, donem una ullada.

El formulari de Google està configurat per acceptar molts tipus d’elements diferents. No obstant això, les camises, els pantalons, els vestits i les sabates tenen limitacions de mida diferents. Per tant, s'emplenarà una secció diferent d'aquest formulari basada en el departament al qual envieu el vostre article. A la meva plantilla (article masculí) he creat 5 categories de mida diferents. (Per a articles sobre dones, feu clic aquí, n'hi ha molts més).

A cada secció de mida, he establert un títol únic per a cada paràmetre que recopilaré. No volem tenir diverses columnes a la nostra base de dades amb el nom "Mida" o no podríem determinar a quin tipus de roba s'aplica aquesta mida.

Al final de cada secció, l'usuari es dirigeix a la part final d'aquest formulari: Ubicació. Personalment, vaig escollir afegir la ubicació per determinar els articles a les tintoreries, a la bugaderia, al seu lloc o en aquells articles en els quals he deixat que un amic manllevi. Això em permet estar organitzat i mai sentir que em falta alguna peça de roba en algun lloc.

Com he esmentat des del principi, aquest projecte es pot ampliar d'un milió de maneres diferents. Podeu utilitzar-lo per inventari, una eina d’organització més precisa o per demanar préstecs estrictament de roba. Els camps i seccions que podeu afegir són infinits, de manera que no us limiteu al que estic en la meva forma. (Per als articles femenins, feu clic aquí)

Abans de penjar alguns dels vostres propis articles, anem al pas següent per assegurar-vos la tramesa adequada.

Pas 3: Google Scripts: (Server Code.gs) Mireu primer les dades i el codi

En fer clic al document de Fulls de càlcul de Google, veureu moltes columnes de dades (i algunes files, que queden per demostrar-les). Durant l’enviament de formularis s’ometen algunes seccions, això es desprèn de les dades que falten en algunes columnes. Però s’han afegit columnes addicionals com ara ID, Ubicació predeterminada, Qui i Actualitzat per fer un millor seguiment de les modificacions d’aquests elements.

S'ha creat un camp d'identificació quan heu enviat el formulari per permetre un identificador únic en recórrer aquesta base de dades. Per crear aquest camp, donarem una ullada a l'Editor de scripts fent clic a Eines> Editor de scripts.

Amb l’editor d’escriptures obert, notareu 8 documents a la barra lateral d’aquesta nova finestra. Aquests documents ajuden a controlar el procés de back-end, les pantalles frontals i la funcionalitat de front-end. Saltarem a cadascun d’ells (si us quedeu), però ara mateix feu clic a Codi de servidor.

Al fitxer Server Code.gs hi ha moltes funcions:

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

onSubmit (e): aquesta funció es configurarà com la primera funció que s'executarà quan s'enviï un formulari de Google. Podeu col·locar altres funcions dins d'aquesta funció per permetre que es produeixin processos diferents.

onOpen (e): s'anomena aquesta funció quan s'obre Google Sheets. S'emplena una nova opció de menú per permetre l'accés ràpid als enllaços i visualitzacions de l'aplicació.

doGet (): aquesta funció s'inicia en la trucada d'adreça de l'aplicació web. Quan un usuari navega per l'aplicació web publicada, aquest codi li indicarà a la pàgina què ha de mostrar-se. En aquest cas, es tracta del document Application.html.

include (fileName): aquesta funció s'utilitza a les pàgines HTML per llegir un altre document i inserir el seu contingut en un format HTML adequat dins d'una altra pàgina. L'utilitzem per als nostres fitxers CSS.html i JS.html.

openApplication () i openLaundryApp (): aquestes funcions contenen el codi que s’executa quan un usuari fa clic als botons de menú que s’afegeixen a la barra d’eines Google Sheet.

changeValueOnSubmit (e) i setIDOnSubmit (e): aquestes són les funcions que examinarem ara mateix. Són els responsables d’actualitzar determinats camps amb valors predeterminats quan s’envia el formulari inicialment.

Pas 4: habilitació d'OnFormSubmit

Aquestes dues funcions, changeValueOnSubmit (e) i setIDOnSubmit (e), han d’estar connectades a l’acció de l’usuari d’enviar un formulari. Per fer-ho, hem d’habilitar un activador.

Activem l’activador fent clic a Edita> Activadors del projecte actual. Això obre Google Developer Hub.

A l'extrem inferior dret del tauler del disparador hi ha un botó Afegeix un activador. Clica aquí.

Ara configurarem la funció perquè s’executi quan s’enviï un formulari. En el nostre cas, tinc diverses funcions (changeValueOnSubmit (e) i setIDOnSubmit (e)) que he posat dins d’una funció onSubmit (), de manera que només he de configurar 1 activador. Per tant, seleccionarem onSubmit () i establirem aquest activador perquè s’executi En enviar el formulari.

Ara tenim un formulari de treball que omplirà un full de Google amb identificadors únics i establirà els valors predeterminats.

Ara podeu penjar els vostres propis articles mitjançant el formulari de Google. (Això no és necessari per continuar, ja que ja hi ha valors de demostració). Ara ens endinsarem a la interfície d'usuari.

Pas 5: Configuració de la interfície d'usuari

BENVINGUT! Per fi hem arribat a la part per la qual heu vingut, la interfície d'usuari !!!!

A primera vista, aquí no hi ha res. Encara no hem fet cap trucada. Per carregar la pàgina més ràpidament, vaig decidir no plagar la primera pàgina amb TOTS els vostres articles i permetre que feu clic al que vulgueu veure més ràpidament. Com que és el cas, no hi ha elements al camp de contingut principal ni filtres a la barra lateral. Fem clic a Tot per veure què hi ha a la nostra base de dades.

Ara hem carregat tots els elements de la nostra base de dades al camp de contingut principal. Veureu imatges, números d’identificació, color, mides i ubicacions. El camp d'ubicació es pot actualitzar aquí mateix. Si decidiu préstec de l’article, podeu seleccionar aquesta opció, podeu col·locar-lo a l’armari, a l’aparador o a la bugaderia.

I a la nostra barra lateral, tenim tots els camps possibles per a totes les peces de roba de la nostra nova consulta. Imagineu-vos tenir 20 opcions de mida diferents en aquesta barra lateral, no seria molt eficaç, així que restringim la nostra cerca fent clic a Accessoris.

Ara que hem carregat Accessoris, mireu la barra lateral. S'ha ajustat a només 3 camps, ja que aquests són els paràmetres que s'apliquen a tots els elements d'aquesta consulta. Vaig a fer un tipus per color. En fer clic a color, apareix un quadre desplegable. Aquí puc escriure el color que vull i després seleccionar-lo, o si veig la meva opció de seguida, només hi faré clic. He seleccionat Red per a aquesta demostració. Feu clic a Aplica el filtre a la part inferior d'aquesta barra lateral i el contingut principal s'actualitzarà mostrant-vos els elements que tinguin el color vermell configurat com a paràmetre de color.

Anteriorment he esmentat que aquesta base de dades m’ajuda a gestionar els meus articles en préstec i a la meva bugaderia. Per fer-ho una mica més fàcil, en lloc de fer clic manualment a cada ubicació desplegable d’aquesta pàgina principal, he creat el mode de bugaderia. Torneu a la pàgina del full de Google i, a Visualització d'aplicacions, veureu el mode de bugaderia. Aquesta opció desplegarà una modalitat més petita que només mostra els articles amb la ubicació de la bugaderia. Ara puc marcar tots aquests elements com a predeterminats, que els tornaran a situar a les ubicacions on es guarden normalment.

Pas 7: projecte finalitzat

FELICITATS

Per a aquells de vosaltres que només vulguin una base de dades que funcioni per gestionar els vostres articles, us donem la benvinguda al vostre organitzador en línia. Per a aquelles ments curioses interessades en el codi que hi ha darrere d'aquesta aplicació. Enganxeu-vos mentre ho descompon.

* Podeu suprimir els elements de prova DESPRÉS que introduïu almenys un dels vostres propis elements a la base de dades. (Us explicaré més endavant si us quedeu).

Pas 8: Pas 1: el codi de fons (Server Code.gs)

Abans vam obrir el fitxer Server Code.gs i vaig fer una ràpida revisió de cadascuna de les funcions, ja que el seu propòsit era servir cadascun dels elements que acabeu de configurar, però ara els desglossarem algunes de les funcions i utilitats anomenades perquè aquest codi sigui un èxit.

1) Recorregut de taules:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Respostes del formulari 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Aquest codi és una base per recórrer un full de Google. Truco al full pel nom en lloc del número, de manera que si els fulls s’eliminen o es reordenen per funció, encara poden funcionar correctament.
• En aquest codi, només estic recopilant l'interval de totes les dades de la taula.

2) Assignació d'un identificador:

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

• Anteriorment he demanat que es deixessin els valors de demostració a la taula fins que l'usuari hagi enviat com a mínim un valor. Això es deu al fet que el generador d'identificadors automàtics es basa en l'últim valor de la base de dades a emplenar.
• Recupero la darrera fila de l'última a l'última fila perquè l'última fila és el nostre valor nou i la primera columna del valor d'identificador.
• A continuació, genero a l’atzar un número entre 5 i 15 i l’afegeixo a l’últim valor. *
• Finalment, col·loque aquest valor a la columna ID de la darrera fila.
• A continuació, anomenem la funció changeValueOnSubmit (e).

* Vaig escollir entre 5 i 15 per permetre l'etiquetatge i la integració de Google Home en el futur, de manera que els números no siguin prou propers com per provocar confusió a les perxes o etiquetes de roba o codis de barres.

3) Canvi del valor de l'URL:

var DataChange = e.namedValues ["Imatge de l'article"]; var DefaultLocation = e.namedValues ["On guardeu aquest article de roba?"]; var ColD = ID de la columna _ ("Imatge de l'element") +1; var ColLoc = ColumnID _ ("Ubicació per defecte") + 1; DataChange = DataChange.toString (). replace ("obert?", "uc? export = vista &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• En enviar una foto mitjançant un formulari de Google, l'URL inserit a Fulls de càlcul de Google és un enllaç al document real. En el nostre cas, com que estem creant una pàgina HTML, volem que l'enllaç sigui només la imatge.
• En canviar el "obert?" part de l'URL a "uc? export = view &" hem creat un enllaç a la imatge.
• Tornarem a col·locar aquest valor nou a la ubicació de l’enllaç Imatge d’element actual.
• També estic configurant "Ubicació predeterminada" i "Ubicació actual" de l'element a la mateixa cosa de la base de dades. Això ajudarà quan intenti utilitzar el meu mode de bugaderia.

• Ens endinsarem a la pàgina següent, però aquesta és la nostra primera mirada a la funció ColumnID_ () que he creat.

  Aquesta funció utilitza els noms de columna per traduir-lo al nombre enter de columna, cosa que és útil per a les trucades de rang que requereixen un número de columna en lloc de nom

4) SpreadsheetApp.getUI ()

• A la segona imatge podeu veure l’ús de SpreadsheetApp.getUI () com s’utilitzava per crear un complement de menú de la barra d’eines al full de Google.
• La funció.getUI () també ajuda a crear una finestra emergent modal que s’utilitza per al mode de bugaderia i com a enllaç ràpid a la interfície del lloc web.

5) Servei HTML

• Hi ha dos tipus de serveis HTML que s’utilitzen en aquest codi: Plantilla i Sortida HTML
• La plantilla permet inserir codi dins del codi HTML, de manera que la informació que prové d'un servidor es pot omplir quan es crida la pàgina.
• La sortida HTML mostra pàgines HTML simples.
• També tenim el mètode include () que ens permet crear diversos fitxers HTML i combinar-los en un fitxer HTML amb plantilla retornant el contingut del fitxer en un format HTML en lloc d’una cadena.

He adjuntat un document configurat com Documentació de scripts d'aplicacions de Google per conèixer de quina manera s'explica el codi font i la funcionalitat a Google Apps.

Pas 9: pas 2: el codi de fons part 2 (Server Calls.gs)

Ara hem introduït el Server Calls.gs. Aquestes funcions s'utilitzen principalment a l'HTML de JavaScript, de manera que s'han separat del codi que s'utilitza principalment a la part posterior que es troba a Server Code.gs.

Imatge 1) Variables globals:

Imatge 2) recuperació d'articles:

Imatge 3) fetchItemsQry

Imatge 4) filterItems

Imatge 5) fetchFiltersWithQry

Imatge 6) ColumnID i CacheCalls

Hi ha molt de què parlar amb cadascun d’aquests. I per desglossar el codi i explicar què passa, necessitava una mica més d'espai per escriure. S'adjunta un document per al desglossament del codi de ServerCalls.gs

Aquest document està configurat com a documentació de Google App Scripts i, fins i tot, fa enllaços a objectes similars.

Pas 10: pas 3: el codi HTML (Application.html)

El codi HTML queda molt descontent al quadre de diàleg d’Instruible. Per tant, seguiu les imatges anteriors.

1) A la capçalera de la pàgina Application.html establim un títol i cridem a la nostra pàgina CSS.html per carregar-la.

* En ser una pàgina HTML amb plantilla, podem afegir més codi a aquest document sense desordenar la pantalla actual mitjançant el mètode d’inclusió anteriorment (nom_pàgina) esmentat a Server Code.gs

El quadre principal de capçalera també es troba en aquesta imatge. Podeu canviar la capçalera aquí i introduir "Armari [del vostre nom]" o qualsevol altra cosa que vulgueu reconèixer com a aquesta pàgina.

2) Just a sota de la capçalera hi ha la barra de navegació superior.

Aquesta barra de navegació inclou tots els tipus d’articles que es mostren al full d’articles dels nostres Fulls de càlcul de Google.

Es crida una funció en línia per obtenir una matriu d’aquests elements. A continuació, s'executa un bucle per incloure cadascuna d'aquestes opcions com a botó de menú, amb un codi d'acció, de manera que quan un usuari faci clic al botó de menú, apareixeran els elements respectius a l'àrea del cos.

3) El cos principal.

Hi ha 4 porcions en aquesta part. Inclou una sortida de text, el filtre de la barra lateral, les imatges del cos principal i el JS.

La sortida de text permet a l’usuari veure una visualització ràpida de text del tipus d’elements que mira actualment en lloc de fer referència a l’opció de menú que ha seleccionat.

El filtre de la barra lateral conté molts filtres disponibles per al tipus d’element que ha seleccionat un usuari. Aquests filtres reflecteixen totes les opcions disponibles per a aquesta categoria, així com el nombre d’elements que pertanyen al valor d’aquesta categoria. Aquesta barra lateral s'omple de codi JavaScript (que es parlarà a continuació).

Actualment, el cos principal està buit, però, igual que els filtres, s’omplirà de quadres d’elements que detallen l’identificador, el color, la mida i la ubicació de l’element amb una imatge inclosa un cop l’usuari selecciona una categoria i el codi JavaScript ocupa aquesta àrea.

Finalment, inclou (JS), fem una ullada al següent pas.

Pas 11: pas 4: el codi JavaScript (JS.html)

Si creieu que el codi del servidor era una secció pesada, obteniu-ne un munt.

Aquí combinem el nostre HTML i SeverCode amb les interaccions dels usuaris. Qualsevol element on es faci clic s’ha de processar aquí per obtenir les dades adequades i retornar-les en un format llegible. Fem una ullada a les nostres primeres trucades:

El script crida: Estic fent servir 3 biblioteques diferents per a aquest projecte; jquery, bootstrap i un complement especial bootstrap-select. Aquestes biblioteques permeten el format d’objectes i faciliten les trucades als elements del codi HTML.

A continuació, es mostra la següent important línia de JavaScript:

$ (document).keypress (funció (esdeveniment) {if (event.which == '13') {event.preventDefault (); }});

Aquí estic desactivant la tecla d'inici per activar qualsevol dels formularis. Com en aquest cas, a les aplicacions web de Google només se'ls assigna l'adreça d'una pàgina. Si premeu Enter, s’afegirien dades a l’adreça HTML i s’intentaria redirigir l’usuari. En desactivar-ho, permetreu que el vostre codi JavaScript faci tota la feina.

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

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

Aquí hi ha dues funcions que fan trucades al fitxer Server Code.gs. La línia:

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

té moltes parts útils, però l'esquelet està arrelat de "google.script.run", que indica a la pàgina HTML que la funció següent es troba al servidor.

• L'últim bit d'aquest codi és la funció que cal executar. En aquest exemple ServerRemoveFilter ()
• En afegir un withSuccessHandler (), la pàgina HTML ja sap què fer amb les dades que es retornen, i això és executar la funció amb parèntesi.
• El mateix s'aplica a withFailureHandler ()

Ara que hem desglossat la trucada de codi de servidor, fem una ullada ràpida al que passa quan aquestes trucades de servidor tenen èxit i fracassen.

function allGood (e) {console.log ("Èxit al servidor"); } funció onFallure (error) {$ ("# message-box"). html ("

No es poden obtenir articles de roba en aquest moment. ERROR: "+ error.message +"

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

No teniu accés per modificar la ubicació. ERROR: "+ error.message +"

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

He creat un registre de consola molt senzill per significar l'èxit quan s'executa la funció d'ubicació que podeu veure com allGood ().

Quan es gestionen els errors, aquestes dues funcions generen el missatge d'error on l'usuari pot veure mitjançant una trucada jQuery a l'objecte HTML amb un identificador de "quadre de missatge".

Ara anem a la tasca descarnada

Pas 12: pas 5: les accions de clic en codi JavaScript (JS.html)

La barra de menú superior té opcions per a cada tipus d'article. La funció que s'executa en fer clic és:

funció filterType (article, identificador) {$ ("ul.navbar-nav li.active"). removeClass ("active"); $ ("# currentArticle"). html ("// CODI HTML AQUÍ");

updateSideBar = true;

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

Podem veure en aquest codi que tenim un google.script.run que crida al servidor per recuperar informació. La funció d’èxit d’aquesta trucada és updateItems ().

IMATGE 1 (amb el codi HTML pesat d’aquesta funció és difícil copiar estrictament el codi, sense que aparegui cap embolic en aquest quadre)

Al codi updateItems () tenim moltes coses que passen. Una vegada més hem de recórrer l’objecte que ens ha estat retornat i afegir cada element a la pàgina principal del cos.

El codi HTML s’afegeix com a matrius per desglossar el codi i facilitar la lectura i veure on s’està inserint itemData.

Al bucle de cada element, eliminaré els camps que no vull veure a la descripció, com ara Predeterminat, marca de temps i URL de la imatge. Elimino l’URL de la imatge de la descripció perquè s’està afegint com a href a una etiqueta. Un cop reunida aquesta informació, s’envia al cos principal mitjançant la funció jQuery.append ().

Després d’haver afegit tots els elements a la pàgina, aquesta consulta d’elements s’envia de nou al codi del servidor per ordenar i retornar les opcions de filtre tal com es veu a la imatge 2.

IMATGE 2 (actualització de la barra lateral)

Molt similar a la funció updateItems (), tornem a tenir matrius de codi HTML i un bucle per a totes les opcions de filtre. L'únic canvi notable és el jQuery.selectpicker ('refresh'). Aquesta funció prové de la biblioteca de scripts que hem inclòs a l'últim pas. Permet al programador escriure un simple HTML seleccionat i deixar que la biblioteca l’actualitzi per incloure la funció de cerca i el codi CSS.

IMATGE 3 (filtrat amb la barra lateral)

Per últim tenim la funció updateFilter (formData). S’utilitza quan s’envia un formulari des de la barra lateral. Comencem utilitzant una funció jQuery.serializeArray (), es llegeix el codi HTML de l’element definit en el nostre cas un formulari i retorna els valors d’una cadena que s’enviaran al servidor. I tornem a començar el procés des de la imatge 1.

Pas 13: el final … finalment

Doncs allà ho tens; una explicació completa i completa que us ajudarà a configurar el vostre propi armari en línia o a utilitzar la funcionalitat creada als meus scripts de Google per ampliar el vostre propi projecte.

Ha estat un recorregut que codifica aquest projecte (i documenta a través d’aquest Instructable), però he gaudit del procés i espero que gaudiu del producte. M'encantaria rebre notícies de qualsevol persona que faci ajustos, ja que Michael Jordan diu "El sostre és el sostre" i estic d'acord que aquesta aplicació no té límits.