Organizzatore guardaroba: 13 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Che si tratti di acquistare vestiti o che ti venga sempre chiesto di prendere in prestito qualsiasi articolo, ci sono momenti in cui vorresti poter sbirciare nel tuo armadio da qualsiasi parte per vedere se hai qualcosa di simile. L'organizzatore per guardaroba fa proprio questo E ALTRO!

Questo è uno sportello unico ed è espansivo per molti altri scopi. My Wardrobe Organizer è una combinazione di Fogli Google come database SQL, Google Scripts per la gestione dei dati e Google WebApp per un portale online di questi dati. L'utente finale può vedere tutti gli articoli, filtrare per qualcosa di specifico, contrassegnare gli articoli come in prestito, gestire il proprio bucato e impedire alla mamma di comprarti la stessa maglietta per Natale ogni anno*.

(*Nessuna garanzia. Le madri compreranno ciò che vogliono, che tu ne abbia bisogno o meno)

Dando una rapida occhiata al design del sito web nell'immagine sopra, si potrebbe riconoscere un layout familiare. L'organizzatore del guardaroba è impostato come un normale sito Web di abbigliamento. Suddivisa per reparti in alto e filtri forniti sul lato, questa interfaccia porta familiarità con le funzionalità all'utente occasionale. ED è semplice da usare.

Passaggio 1: configurazione della propria copia

Iniziamo creando la tua copia di questo progetto.

Google Drive

Clicca sul link sopra per portarti alla mia versione attuale di questa applicazione.

Vedrai 3 elementi in questa cartella: un modulo Google, un foglio Google e una cartella.

Fare clic con il tasto destro sul foglio Google e fare clic su Crea una copia.

Imposta la posizione di questa copia sul tuo Drive.

Dopo aver copiato questo documento, il modulo Google verrà generato automaticamente nella stessa cartella in cui hai spostato il foglio Google.

Per creare la cartella (necessario per raccogliere i caricamenti delle immagini degli elementi), fai clic sul modulo Google copiato e verrà visualizzato un messaggio che ti chiederà di ripristinare la posizione della cartella per i caricamenti.

Ora hai una copia di questo documento su cui lavorare da solo!

Passaggio 2: panoramica del modulo Google

Ora che hai la tua versione di questa applicazione, diamo un'occhiata in giro.

Il tuo modulo Google è impostato per accettare molti tipi diversi di elementi. Tuttavia, camicie, pantaloni, vestiti e scarpe hanno tutti limiti di taglia diversi. Pertanto, verrà compilata una sezione diversa di questo modulo in base al dipartimento in cui archivi il tuo articolo. Nel mio modello (articolo maschile) ho creato 5 diverse categorie di dimensionamento. (Per gli articoli da donna, clicca qui, ce ne sono molti altri).

Sotto ogni sezione di dimensionamento, ho stabilito un titolo univoco per ogni parametro che raccoglierò. Non vogliamo avere più colonne nel nostro database con il nome "Taglia" o non saremmo in grado di determinare a quale tipo di vestiti si applica quella taglia.

Alla fine di ogni sezione, l'utente viene indirizzato alla parte finale di questo modulo: Posizione. Personalmente ho scelto di aggiungere la Posizione per determinare i capi in tintoria, in lavanderia, al loro posto o quei capi in cui ho prestato un amico. Questo mi permette di essere organizzato e non sentirmi mai come se mi mancasse un capo di abbigliamento da qualche parte.

Come ho detto fin dall'inizio, questo progetto può essere ampliato in un milione di modi diversi. Puoi usarlo per l'inventario, uno strumento di organizzazione più preciso o per prendere in prestito i vestiti. I campi e le sezioni che puoi aggiungere sono infiniti, quindi non sentirti limitato a ciò che è nel mio modulo. (Per gli Articoli Donna clicca qui)

Prima di caricare alcuni dei tuoi elementi, passiamo al passaggio successivo per garantire l'invio corretto.

Passaggio 3: Script di Google: (Server Code.gs) Primo sguardo ai dati e al codice

Facendo clic sul documento Fogli Google, vedrai molte colonne di dati (e alcune righe, lasciate a scopo dimostrativo). Durante l'invio del modulo vengono saltate alcune sezioni, questo è evidente dai dati mancanti in alcune colonne. Ma colonne aggiuntive come ID, Posizione predefinita, Chi e Aggiornato sono state aggiunte per tenere traccia meglio delle modifiche di questi elementi.

È stato creato un campo ID quando hai inviato il modulo per consentire un identificatore univoco durante l'attraversamento di questo database. Per creare questo campo, daremo un'occhiata allo Script Editor facendo clic su Strumenti>Script Editor.

Con lo Script Editor aperto, noterai 8 documenti nella barra laterale di questa nuova finestra. Questi documenti aiutano a controllare il processo di back-end, i display di front-end e la funzionalità di front-end. Passeremo a ciascuno di essi (se rimani in giro) ma in questo momento fai clic su Codice server.

Nel file Server Code.gs sono presenti molte funzioni:

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

onSubmit(e): questa funzione verrà configurata come prima funzione da eseguire quando viene inviato un modulo Google. È possibile inserire altre funzioni all'interno di questa funzione per consentire l'esecuzione di molti processi diversi.

onOpen (e) - Questa funzione viene chiamata quando si apre Fogli Google. Popola una nuova opzione di menu per consentire l'accesso rapido ai collegamenti e alle visualizzazioni dell'applicazione.

doGet(): questa funzione viene chiamata sulla chiamata dell'indirizzo dell'app Web. Quando un utente accede all'app Web pubblicata, questo codice indicherà a quella pagina cosa visualizzare. In questo caso si tratta del documento Application.html.

include(fileName) - Questa funzione viene utilizzata all'interno delle pagine HTML per leggere altri documenti e inserire il loro contenuto in un formato HTML appropriato all'interno di un'altra pagina. Lo usiamo per i nostri file CSS.html e JS.html.

openApplication() e openLaundryApp(): queste funzioni contengono il codice da eseguire quando un utente fa clic sui pulsanti di menu aggiunti alla barra degli strumenti di Google Sheet.

changeValueOnSubmit(e) e setIDOnSubmit(e)- Queste sono le funzioni che esamineremo per ora. Sono responsabili dell'aggiornamento di determinati campi con valori predefiniti quando il modulo viene inizialmente inviato.

Passaggio 4: abilitazione di OnFormSubmit

Queste due funzioni, changeValueOnSubmit(e) e setIDOnSubmit(e), devono essere collegate all'azione dell'utente di inviare un modulo. Per farlo dobbiamo abilitare un Trigger.

Abilitiamo il trigger facendo clic su Modifica > Trigger del progetto corrente. Questo apre l'hub per sviluppatori di Google.

Nell'angolo in basso a destra della dashboard dei trigger c'è un pulsante Aggiungi un trigger. Clicca qui.

Ora imposteremo la funzione per l'esecuzione quando viene inviato un modulo. Nel nostro caso ho più funzioni (changeValueOnSubmit(e) e setIDOnSubmit(e)) che inserisco all'interno di una funzione onSubmit() quindi devo solo impostare 1 trigger. Pertanto selezioneremo onSubmit() e imposteremo questo trigger per eseguire On form submit.

Ora abbiamo un modulo di lavoro che popolerà un foglio Google con identificatori univoci e imposterà valori predefiniti.

Ora puoi caricare i tuoi articoli utilizzando il modulo Google. (Questo non è necessario per continuare poiché sono già presenti valori demo). Ora ci addentreremo nell'interfaccia utente.

Passaggio 5: configurazione dell'interfaccia utente

BENVENUTO! Siamo finalmente arrivati alla parte per cui sei venuto, l'interfaccia utente!!!!

A prima vista, non c'è niente qui. Non abbiamo ancora effettuato alcuna chiamata. Per caricare la pagina più velocemente ho deciso di non affliggere la prima pagina con TUTTI i tuoi elementi e permetterti di fare clic su ciò che vuoi vedere più velocemente. Poiché questo è il caso, non ci sono elementi nel campo del contenuto principale e nessun filtro nella barra laterale. Clicchiamo su Tutti per vedere cosa c'è nel nostro database.

Ora abbiamo caricato ogni elemento nel nostro database nel campo del contenuto principale. Vedrai immagini, numeri ID, colore, dimensioni e posizioni. Il campo della posizione può essere aggiornato proprio qui! Se decidi di prestare l'articolo, puoi selezionare quell'opzione, puoi metterlo nell'armadio, nel comò o nella lavanderia.

E nella nostra barra laterale abbiamo tutti i campi possibili per ogni capo di abbigliamento nella nostra nuova query. Immagina di avere 20 diverse opzioni di dimensionamento su questa barra laterale, non sarebbe molto efficace, quindi restringiamo la nostra ricerca facendo clic su Accessori.

Ora che abbiamo caricato Accessori, dai un'occhiata alla barra laterale. Si è adattato a soli 3 campi, poiché questi sono i parametri che si applicano a ogni elemento in questa query. Ho intenzione di fare un ordinamento per colore. Facendo clic su colore, viene visualizzata una casella a discesa. Qui posso digitare il colore che desidero e quindi selezionarlo, oppure se vedo subito la mia opzione, faccio semplicemente clic su di essa. Ho selezionato Rosso per questa dimostrazione. Fai clic su Applica filtro nella parte inferiore di questa barra laterale e il contenuto principale si aggiornerà mostrandoti gli elementi che hanno il colore Rosso impostato come parametro di colore.

Ho menzionato in precedenza che questo database mi aiuta a gestire i miei articoli in prestito e nella mia lavanderia. Per rendere le cose un po' più semplici, invece di fare clic manualmente su ogni posizione del menu a discesa in questa pagina principale, ho creato la Modalità lavanderia. Torna alla pagina di Google Sheet e in App View vedrai la modalità Lavanderia. Questa opzione visualizzerà un modale più piccolo che mostra solo gli articoli con la posizione di Lavanderia. Ora posso contrassegnare tutti questi elementi come Predefiniti, il che li ricollocherà nelle posizioni in cui sono normalmente archiviati.

Passaggio 7: progetto completato

CONGRATULAZIONI

Per quelli di voi che desiderano solo un database funzionante per gestire i propri articoli, benvenuti nel vostro Organizzatore online. Per quelle menti curiose interessate al codice alla base di questa applicazione. Resta fermo mentre lo rompo.

*Sei libero di cancellare gli articoli di prova DOPO aver inserito almeno uno dei tuoi articoli nel database. (Spiegherò più tardi se rimani in giro).

Passaggio 8: Passaggio 1: il codice di back-end (Server Code.gs)

In precedenza abbiamo aperto il file Server Code.gs e ho fornito un rapido riassunto di ciascuna delle funzioni poiché il loro scopo era quello di servire ciascuno degli elementi appena impostati, ma ora li analizzeremo alcune delle funzionalità e utilità chiamate per rendere questo codice un successo.

1) Attraversamento tavola:

var ss = SpreadsheetApp.getActiveSpreadsheet();var sheet = ss.getSheetByName("Risposte modulo 1"); var range = sheet.getRange(1, 1, sheet.getMaxRows()); var rowNum = range.getLastRow();

• Questo codice è una base per attraversare un foglio Google. Chiamo il foglio per nome piuttosto che per numero in modo che se i fogli vengono cancellati o riordinati per funzione possono ancora funzionare correttamente.
• In questo codice sto raccogliendo solo l'intervallo per tutti i dati nella tabella.

2) Assegnazione di un ID:

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

• In precedenza ho chiesto di lasciare i valori demo nella tabella fino a quando l'utente non ha inviato almeno un valore per se stesso. Questo perché il generatore di ID automatici si basa sull'ultimo valore nel database da popolare.
• Prendo l'ultima riga dalla seconda all'ultima perché l'ultima riga è il nostro nuovo valore e la prima colonna per il valore ID.
• Quindi genero casualmente un numero compreso tra 5 e 15 e lo aggiungo all'ultimo valore. *
• Infine inserisco questo valore nella colonna ID dell'ultima riga.
• Successivamente chiamiamo la funzione changeValueOnSubmit(e).

* Ho scelto 5-15 per consentire l'etichettatura futura e l'integrazione di Google Home in modo che i numeri non siano abbastanza vicini da causare confusione su grucce, etichette di abbigliamento o codici a barre.

3) Modifica del valore dell'URL:

var DataChange = e.namedValues["Immagine oggetto"];var DefaultLocation = e.namedValues["Dove tieni questo capo di abbigliamento?"]; var ColD = ColumnID_("Immagine elemento") +1; var ColLoc = ColumnID_("Posizione predefinita")+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);

• Quando si invia una foto tramite un modulo Google, l'URL inserito in Fogli Google è un collegamento al documento effettivo. Nel nostro caso, poiché stiamo creando una pagina HTML, vogliamo che il collegamento sia solo l'immagine.
• Modificando "aperto?" parte dell'URL a "uc?export=view&" abbiamo invece creato un collegamento all'immagine.
• Inseriremo nuovamente questo nuovo valore nella posizione del collegamento Immagine oggetto corrente.
• Sto anche impostando la "Posizione predefinita" e la "Posizione corrente" dell'articolo sulla stessa cosa nel database. Questo sarà d'aiuto quando proverai a usare la mia Modalità Lavanderia.

• Ci addentreremo nella pagina successiva, ma questa è la nostra prima occhiata alla funzione ColumnID_() che ho creato.

  Questa funzione utilizza i nomi delle colonne per tradurlo nell'intero di colonna, utile per le chiamate Range che richiedono un numero di colonna anziché un nome

4) SpreadsheetApp.getUI()

• Nella seconda immagine puoi vedere l'uso di SpreadsheetApp.getUI() utilizzato per creare un menu della barra degli strumenti oltre al foglio Google.
• La funzione.getUI() aiuta anche a creare un popup modale che viene utilizzato per la modalità lavanderia e come collegamento rapido all'interfaccia del sito web.

5) Servizio HTML

• Esistono due tipi di HTMLServices utilizzati in questo codice: Template e HTMLOutput
• Il modello consente di inserire il codice all'interno del codice HTML in modo che le informazioni provenienti da un server possano essere popolate quando viene chiamata la pagina.
• L'output HTML visualizza semplici pagine HTML.
• Abbiamo anche il metodo include() che ci consente di creare più file HTML e combinarli in un file HTML modellato restituendo il contenuto del file in un formato HTML anziché in una stringa.

Ho allegato un documento configurato come Documentazione sugli script di Google App per familiarizzare con il modo in cui il codice sorgente e le funzionalità vengono spiegate all'interno di Google Apps.

Passaggio 9: Passaggio 2: il codice back-end parte 2 (Server Calls.gs)

Ora abbiamo inserito il Server Calls.gs. Queste funzioni vengono utilizzate principalmente nel JavaScript HTML, quindi sono state separate dal codice utilizzato principalmente nel back-end che si trova in Server Code.gs.

Figura 1) Variabili globali:

Immagine 2) Recupero Articoli:

Immagine 3) fetchItemsQry

Immagine 4) filtroArticoli

Immagine 5) fetchFiltersWithQry

Immagine 6) ColumnID e CacheCalls

C'è così tanto di cui parlare con ciascuno di questi. E per scomporre il codice e spiegare cosa sta succedendo avevo bisogno di un po' più di spazio per la digitazione. In allegato è un documento per la ripartizione del codice del ServerCalls.gs

Questo documento è impostato come la documentazione degli script di Google App e crea persino collegamenti a oggetti simili.

Passaggio 10: Passaggio 3: il codice HTML (Application.html)

Il codice HTML diventa molto infelice all'interno della finestra di dialogo di Instructable. Quindi, per favore, segui le immagini sopra.

1) Nell'intestazione della pagina Application.html stabiliamo un titolo e chiamiamo la nostra pagina CSS.html da caricare.

* Essendo una pagina HTML basata su modelli, possiamo aggiungere più codice a questo documento senza ingombrare la schermata corrente utilizzando il metodo include (nomepagina) precedentemente menzionato trovato in Server Code.gs

La casella di intestazione principale si trova anche in questa immagine. Puoi modificare l'intestazione qui e inserire "Guardaroba di [Il tuo nome]" o qualsiasi altra cosa desideri riconoscere in questa pagina.

2) Appena sotto l'intestazione c'è la nostra barra di navigazione in alto.

Questa barra di navigazione include tutti i tipi di articoli elencati nel foglio Articolo all'interno dei nostri Fogli Google.

Viene chiamata una funzione inline per recuperare un array di questi elementi. Quindi viene eseguito un ciclo per includere ciascuna di queste opzioni come pulsante del menu, completo di un codice di azione in modo che quando un utente fa clic sul pulsante del menu, i rispettivi elementi appariranno nell'area del corpo.

3) Il corpo principale.

Ci sono 4 porzioni di questa parte. Include un output di testo, il filtro della barra laterale, le immagini del corpo principale e JS.

L'output di testo consente all'utente di vedere una rapida visualizzazione del testo per il tipo di elementi che sta attualmente guardando invece di fare riferimento all'opzione di menu selezionata.

Il filtro della barra laterale contiene i molti filtri disponibili per il tipo di elemento selezionato dall'utente. Questi filtri riflettono tutte le opzioni disponibili per questa categoria e quanti elementi rientrano in quel valore di categoria. Questa barra laterale è popolata con codice JavaScript (che verrà discusso in seguito).

Il corpo principale è attualmente vuoto, ma proprio come i filtri verrà riempito con caselle di articoli che dettagliano l'ID, il colore, le dimensioni e la posizione dell'articolo con un'immagine inclusa una volta che l'utente seleziona una categoria e il codice JavaScript popola quest'area.

Infine include (JS), diamo un'occhiata a questo nel passaggio successivo.

Passaggio 11: Passaggio 4: il codice JavaScript (JS.html)

Se pensavi che il codice del server fosse una sezione pesante, prendine un carico.

Qui combiniamo il nostro codice HTML e SeverCode con le interazioni dell'utente. Qualsiasi elemento su cui si fa clic deve essere elaborato qui per ottenere i dati corretti e restituirli in un formato leggibile. Quindi diamo un'occhiata alle nostre prime chiamate:

Lo script chiama: sto usando 3 diverse librerie per questo progetto; jquery, bootstrap e uno speciale componente aggiuntivo bootstrap-select. Queste librerie consentono la formattazione di oggetti e chiamate più semplici agli elementi all'interno del codice HTML.

La mia prossima importante riga di JavaScript è di seguito:

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

Qui sto disabilitando il tasto Invio dall'attivazione di qualsiasi modulo. Come in questo caso, alle Google Web Apps viene assegnato un solo indirizzo di pagina. Una pressione di invio aggiungerebbe dati all'indirizzo HTML e proverebbe a reindirizzare l'utente. Disabilitandolo, consenti al tuo codice JavaScript di fare tutto il lavoro.

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

funzione updateDBlocation(id, value){ google.script.run.withSuccessHandler(allGood).withFailureHandler(FailDBUpdate).updateLocation(id, value); }

Ecco due funzioni che effettuano chiamate al file Server Code.gs. La linea:

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

ha molte parti funzionanti ma lo scheletro è radicato da " google.script.run" che dice alla pagina HTML che la seguente funzione è sul server.

• L'ultimo bit di questo codice è la funzione da eseguire. In questo esempio ServerRemoveFilter()
• Aggiungendo un withSuccessHandler() la pagina HTML ora sa cosa fare con i dati che vengono restituiti, e questo è eseguire la funzione con la parentesi.
• Lo stesso vale per withFailureHandler()

Ora che abbiamo analizzato la chiamata del codice del server, diamo una rapida occhiata a cosa succede quando queste chiamate al server hanno successo e falliscono.

function allGood(e){ console.log("Success on server"); } function onFailure(error){ $("#message-box").html("

Impossibile recuperare capi di abbigliamento in questo momento. ERRORE: " + errore.messaggio +"

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

Non hai accesso per modificare la posizione. ERRORE: " + errore.messaggio +"

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

Ho creato un registro della console molto semplice per indicare il successo quando viene eseguita la funzione di localizzazione che puoi vedere come allGood().

Quando si gestiscono gli errori, queste due funzioni generano il messaggio di errore in cui l'utente può vedere utilizzando una chiamata jQuery all'oggetto HTML con un ID di "message-box".

Ora passiamo al lavoro grintoso

Passaggio 12: Passaggio 5: le azioni clic sul codice JavaScript (JS.html)

La barra dei menu in alto ha opzioni per ogni tipo di articolo. La funzione che eseguono al clic è:

funzione filterType(articolo, id){ $("ul.navbar-nav li.active").removeClass("active"); $("#currentArticle").html(" //CODICE HTML QUI");

updateSideBar = vero;

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

Possiamo vedere in questo codice che abbiamo un google.script.run che chiama il server per recuperare informazioni. La funzione di successo per questa chiamata è updateItems().

FIGURA 1 (con il pesante codice HTML all'interno di questa funzione è difficile copiare rigorosamente il codice, senza che appaia un pasticcio in questa casella)

Nel codice updateItems(), succedono molte cose. Ancora una volta dobbiamo attraversare l'Oggetto che ci è stato restituito e aggiungere ogni elemento alla nostra pagina del corpo principale.

Il codice HTML viene aggiunto come Array per suddividere il codice e semplificare la lettura e la visualizzazione di dove viene inserito itemData.

Nel ciclo di ogni elemento, sto rimuovendo i campi che non voglio vedere nella descrizione come Predefinito, timestamp e URL dell'immagine. Rimuovo l'URL dell'immagine dalla descrizione perché viene invece aggiunto come href a un tag. Una volta che queste informazioni sono state assemblate, vengono inviate al corpo principale utilizzando la funzione jQuery.append().

Dopo che tutti gli elementi sono stati aggiunti alla pagina, questa query di elementi viene inviata nuovamente al Codice del server per ordinare e restituire le opzioni di filtro come mostrato in Figura 2.

FIGURA 2 (aggiornamento della barra laterale)

Molto simile alla funzione updateItems(), abbiamo ancora una volta array di codice HTML e un ciclo per tutte le opzioni di filtro. L'unico cambiamento evidente è il jQuery.selectpicker('refresh'). Questa funzione proviene dalla libreria di script che abbiamo incluso nell'ultimo passaggio. Consente al programmatore di scrivere un semplice HTML selezionato e lasciare che la libreria lo aggiorni per includere la funzione di ricerca e il codice CSS.

FIGURA 3 (filtraggio con la barra laterale)

Infine abbiamo la funzione updateFilter(formData). Viene utilizzato quando un modulo viene inviato dalla barra laterale. Iniziamo utilizzando una funzione jQuery.serializeArray() questa legge il codice HTML dell'elemento definito nel nostro caso un form, e restituisce i valori in una stringa da inviare al server. E ricominciamo da capo il processo dall'immagine 1.

Fase 13: La Fine…finalmente

Beh, il gioco è fatto; una spiegazione completa e approfondita per aiutarti a creare il tuo guardaroba online o utilizzare la funzionalità creata nei miei Google Script per espandere il tuo progetto.

È stato un viaggio codificare questo progetto (e documentare attraverso questo Instructable) ma mi è piaciuto il processo e spero che apprezzerai il prodotto. Mi piacerebbe avere una risposta da chiunque esegua modifiche mentre Michael Jordan dice "Il soffitto è il tetto" e sono d'accordo che questa applicazione non ha limiti.