Organizér šatníku: 13 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:21

Ať už jde o nakupování oblečení nebo o to, aby vás někdo požádal o půjčení jakékoli položky, někdy si přejete, abyste se mohli odkudkoli podívat do svého šatníku, abyste zjistili, zda máte něco podobného. Organizér šatníku to dělá A VÍCE!

Toto je jednotné kontaktní místo a má mnoho dalších účelů. My Wardrobe Organizer je kombinace Tabulek Google jako databáze SQL, Google Scripts pro zpracování dat a Google WebApp pro online portál pro tato data. Koncový uživatel může vidět všechny položky, filtrovat na něco konkrétního, označit položky jako vypůjčené, spravovat své prádlo a zabránit mámě, aby vám každý rok kupovala na Vánoce stejné tričko*.

(*Bez záruky. Matky si koupí, co chtějí, ať to potřebujete nebo ne)

Při rychlém pohledu na design webových stránek na výše uvedeném obrázku lze rozpoznat známé rozložení. Organizér šatníku je nastaven jako každý běžný web s oblečením. Toto rozhraní, narušené odděleními nahoře a filtry na straně, přináší příležitostnému uživateli seznámení s funkcemi. A jeho použití je jednoduché.

Krok 1: Nastavení vlastní kopie

Začněme vytvořením vlastní kopie tohoto projektu.

Disk Google

Kliknutím na výše uvedený odkaz se dostanete k mé aktuální verzi této aplikace.

V této složce uvidíte 3 položky: formulář Google, list Google a složku.

Klikněte pravým tlačítkem na Tabulku Google a klikněte na Vytvořit kopii.

Nastavte umístění této kopie na svůj vlastní Disk.

Po zkopírování tohoto dokumentu bude formulář Google automaticky vygenerován ve stejné složce, kam jste přesunuli list Google.

Chcete -li vytvořit složku (je to nutné pro shromažďování odeslaných obrázků položek), klikněte na zkopírovaný formulář Google a zobrazí se výzva k obnovení umístění složky pro nahrávání.

Nyní máte kopii tohoto dokumentu, na které můžete pracovat sami!

Krok 2: Přehled formuláře Google

Nyní, když máte vlastní verzi této aplikace, pojďme se podívat kolem sebe.

Váš formulář Google je nastaven tak, aby přijímal mnoho různých typů položek. Trička, kalhoty, šaty a boty však mají různá omezení velikosti. Proto bude vyplněna jiná část tohoto formuláře na základě oddělení, pod které svou položku ukládáte. Ve své šabloně (Mužské články) jsem vytvořil 5 různých kategorií velikosti. (U ženských článků klikněte zde, existuje mnoho dalších).

V každé části pro určování velikosti jsem vytvořil jedinečný název pro každý parametr, který budu shromažďovat. Nechceme mít v databázi více sloupců s názvem „Velikost“, jinak bychom nemohli určit, na jaký typ oblečení se tato velikost vztahuje.

Na konci každé sekce je uživatel přesměrován na poslední část tohoto formuláře: Umístění. Osobně jsem se rozhodl přidat Umístění, abych určil položky v čistírně, v prádelně, na jejich místě nebo v těch předmětech, ve kterých jsem nechal kamaráda půjčit. To mi umožňuje být organizovaný a nikdy mít pocit, že mi někde chybí kousek oblečení.

Jak jsem zmínil od začátku, tento projekt lze rozšířit milionem různých způsobů. Můžete jej použít na inventář, přesnější organizační nástroj nebo na striktně půjčování oblečení. Pole a sekce, které můžete přidat, jsou nekonečné, takže se nemusíte omezovat na to, co je v mé formě. (Články pro ženy klikněte zde)

Než nahrajete několik vlastních položek, přejděte k dalšímu kroku, abychom zajistili správné odeslání.

Krok 3: Skripty Google: (Server Code.gs) Nejprve se podívejte na Data a kód

Po kliknutí na dokument Tabulek Google se zobrazí mnoho sloupců dat (a některé řádky ponechané pro demonstraci). Během odesílání formuláře jsou některé sekce přeskočeny, což je patrné z chybějících údajů v některých sloupcích. Byly však přidány další sloupce jako ID, Výchozí umístění, Kdo a Aktualizováno, aby bylo možné lépe sledovat úpravy těchto položek.

Při odeslání formuláře bylo vytvořeno pole ID, které umožňuje jedinečný identifikátor při procházení této databáze. Chcete -li vytvořit toto pole, podíváme se na editor skriptů kliknutím na Nástroje> Editor skriptů.

Při otevřeném editoru skriptů si v postranním panelu tohoto nového okna všimnete 8 dokumentů. Tyto dokumenty pomáhají řídit proces back-end, rozhraní front-end a funkce front-end. Skočíme do každého (pokud se budete držet), ale právě teď klikněte na Kód serveru.

V souboru Server Code.gs existuje mnoho funkcí:

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

onSubmit (e) - Tato funkce bude nakonfigurována jako první funkce, která se spustí při odeslání formuláře Google. Do této funkce můžete umístit další funkce, aby se umožnilo mnoho různých procesů.

onOpen (e) - Tato funkce se nazývá při otevření Tabulek Google. Vyplní novou možnost nabídky, která umožní rychlý přístup k odkazům a pohledům aplikace.

doGet ()- Tato funkce se nazývá při volání adresy webové aplikace. Když uživatel přejde na publikovanou webovou aplikaci, tento kód této stránce sdělí, co má zobrazit. V tomto případě se jedná o dokument Application.html.

include (název_souboru) - Tato funkce se používá uvnitř stránek HTML ke čtení jiného dokumentu a vkládání jejich obsahu do správného formátu HTML na jinou stránku. Používáme jej pro naše soubory CSS.html a JS.html.

openApplication () a openLaundryApp () - Tyto funkce obsahují kód, který se spustí, když uživatel klikne na tlačítka nabídky přidaná na panel nástrojů Tabulky Google.

changeValueOnSubmit (e) a setIDOnSubmit (e)- To jsou funkce, které prozatím prozkoumáme. Jsou zodpovědní za aktualizaci určitých polí s výchozími hodnotami při prvním odeslání formuláře.

Krok 4: Povolení OnFormSubmit

Tyto dvě funkce, changeValueOnSubmit (e) a setIDOnSubmit (e), je třeba propojit s akcí uživatele při odesílání formuláře. K tomu musíme povolit spoušť.

Aktivaci aktivujeme kliknutím na Upravit> Spouštěče aktuálního projektu. Tím se otevře Google Developer Hub.

V pravém dolním rohu ovládacího panelu spouště je tlačítko Přidat spoušť. Klikněte zde.

Nyní nastavíme funkci, která se má spustit při odeslání formuláře. V našem případě mám více funkcí (changeValueOnSubmit (e) a setIDOnSubmit (e)), které jsem vložil do funkce onSubmit (), takže musím nastavit pouze 1 spoušť. Proto vybereme onSubmit () a nastavíme tento spouštěč tak, aby běžel při odeslání formuláře.

Nyní máme funkční formulář, který naplní tabulku Google unikátními identifikátory a nastaví výchozí hodnoty.

Nyní můžete své vlastní položky nahrávat pomocí formuláře Google. (To není nutné pokračovat, protože již existují demo hodnoty v). Nyní se ponoříme do uživatelského rozhraní.

Krok 5: Nastavení uživatelského rozhraní

VÍTEJTE! Konečně jsme dosáhli části, pro kterou jste přišli, uživatelského rozhraní !!!!

Na první pohled zde nic není. Zatím jsme nevolali. Chcete -li stránku načíst rychleji, rozhodl jsem se, že první stránku nebudu trápit VŠECHNY vaše položky a umožní vám kliknout rychleji na to, co chcete vidět. Protože tomu tak je, nejsou v hlavním poli obsahu žádné položky a na postranním panelu nejsou žádné filtry. Klikneme na Vše a uvidíme, co je v naší databázi.

Nyní jsme nahráli každou položku v naší databázi do hlavního pole obsahu. Uvidíte obrázky, identifikační čísla, barvu, velikosti a umístění. Pole polohy lze aktualizovat právě zde! Pokud se rozhodnete položku vypůjčit, můžete tuto možnost vybrat, můžete ji umístit do skříně, komody nebo prádelny.

A v našem postranním panelu máme všechna možná pole pro každou položku oblečení v našem novém dotazu. Představte si, že byste na tomto postranním panelu měli 20 různých možností nastavení velikosti, nebylo by to moc efektivní, pojďme tedy zúžit hledání kliknutím na Příslušenství.

Nyní, když jsme načetli Příslušenství, se podívejte na postranní panel. Upravila se pouze na 3 pole, protože to jsou parametry, které platí pro každou položku v tomto dotazu. Udělám třídění podle barvy. Kliknutím na barvu se zobrazí rozevírací pole. Zde mohu buď zadat požadovanou barvu a poté ji vybrat, nebo pokud hned uvidím svou možnost, jednoduše na ni kliknu. Pro tuto ukázku jsem vybral Red. Klikněte na Použít filtr v dolní části tohoto postranního panelu a hlavní obsah se obnoví a zobrazí položky, které mají jako parametr barvy nastavenou červenou barvu.

Dříve jsem zmínil, že tato databáze mi pomáhá spravovat své položky vypůjčené a v prádelně. Aby to bylo trochu snazší, místo ručního klikání na každé rozevírací umístění na této hlavní stránce jsem vytvořil režim praní. Vraťte se na stránku Tabulky Google a v části Zobrazení aplikace uvidíte režim Praní. Tato možnost vyvolá menší modál, který zobrazuje pouze položky s umístěním prádla. Nyní mohu všechny tyto položky označit jako výchozí, což je vrátí zpět na místa, kde jsou normálně uloženy.

Krok 7: Projekt dokončen

GRATULUJI

Pro ty z vás, kteří chtějí funkční databázi pro správu položek, vítejte ve svém online organizátoru. Pro ty zvědavé mysli, které zajímá kód za touto aplikací. Drž se, jak to rozebírám.

*Testovací položky můžete libovolně mazat, POKUD zadáte do databáze alespoň jednu vlastní položku. (Vysvětlím později, pokud se budete držet).

Krok 8: Krok 1: Back-End kód (Server Code.gs)

Dříve jsme otevřeli soubor Server Code.gs a já jsem rychle spustil všechny funkce, protože jejich účelem bylo obsloužit každou z položek, které jste právě nastavili, ale nyní je rozdělíme na část funkcí a nástrojů nazývaných aby byl tento kód úspěšný.

1) Procházení stolu:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Odpovědi na formulář 1"); rozsah varů = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Tento kód je základem pro procházení listu Google. Volám list spíše jménem než číslem, takže pokud jsou listy odstraněny nebo přeskupeny podle funkce, může stále fungovat správně.
• V tomto kódu shromažďuji pouze rozsah pro všechna data v tabulce.

2) Přiřazení 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);

• Dříve jsem požádal, aby byly demo hodnoty ponechány v tabulce, dokud uživatel neodeslal alespoň jednu hodnotu pro sebe. Důvodem je, že generátor automatického ID spoléhá na poslední hodnotu v databázi, kterou má naplnit.
• Načítám poslední 2. až poslední řádek, protože poslední řádek je naše nová hodnota a 1. sloupec pro hodnotu ID.
• Potom náhodně vygeneruji číslo mezi 5 a 15 a přidám ho k poslední hodnotě. *
• Nakonec tuto hodnotu umístím do sloupce ID posledního řádku.
• Dále voláme funkci changeValueOnSubmit (e).

* Vybral jsem 5–15, abych umožnil budoucí označování a integraci Google Home, takže čísla nebudou dostatečně blízko, aby to způsobilo zmatek na věšácích nebo značkách oblečení nebo čárových kódech.

3) Změna hodnoty URL:

var DataChange = e.namedValues ["Item Item"]; var DefaultLocation = e.namedValues ["Kam ukládáte tento oděv?"]; var ColD = ColumnID _ ("Obrázek položky") +1; var ColLoc = ColumnID _ ("Výchozí umístění")+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);

• Při odesílání fotografie prostřednictvím formuláře Google je adresa URL vložená do Tabulek Google odkazem na skutečný dokument. V našem případě, když vytváříme stránku HTML, chceme, aby odkaz byl pouze obrázek.
• Změnou „otevřeného?“část adresy URL na „uc? export = zobrazit &“jsme místo toho vytvořili odkaz na obrázek.
• Tuto novou hodnotu opět umístíme do umístění aktuálního odkazu Obrázek položky.
• Rovněž nastavuji položky „Výchozí umístění“a „Aktuální umístění“položky na stejnou věc v databázi. To pomůže při pokusu o použití mého režimu praní.

• Ponoříme se do toho na další stránce, ale toto je náš první pohled na funkci ColumnID_ (), kterou jsem vytvořil.

  Tato funkce používá názvy sloupců k překladu do celočíselného sloupce, což je užitečné pro volání rozsahu, které místo čísla vyžaduje číslo sloupce

4) SpreadsheetApp.getUI ()

• Na druhém obrázku můžete vidět použití SpreadsheetApp.getUI (), které bylo použito k vytvoření přidání nabídky lišty Toolbar do Tabulky Google.
• Funkce.getUI () také pomáhá vytvořit modální vyskakovací okno, které se používá pro režim Prádlo a jako rychlý odkaz na webové rozhraní.

5) Služba HTMLService

• V tomto kódu jsou použity dva typy HTMLServices: Template a HTMLOutput
• Šablona umožňuje vložení kódu do kódu HTML, takže informace přicházející ze serveru lze naplnit při volání stránky.
• HTML výstup zobrazuje jednoduché HTML stránky.
• Máme také metodu includes (), která nám umožňuje vytvářet více souborů HTML a kombinovat je do jednoho šablony HTML pomocí vrácení obsahu souboru ve formátu HTML, nikoli do řetězce.

Připojil jsem dokument nastavený jako Dokumentace skriptů Google App, abych vám přiblížil vysvětlení zdrojového kódu a funkcí v rámci Google Apps.

Krok 9: Krok 2: Back-End Code Part 2 (Server Calls.gs)

Nyní jsme zadali Server Calls.gs. Tyto funkce se používají především v HTML JavaScriptu, takže byly odděleny od kódu, který se primárně používá v back -endu, který se nachází v Server Code.gs.

Obrázek 1) Globální proměnné:

Obrázek 2) načítání položek:

Obrázek 3) fetchItemsQry

Obrázek 4) položky filtru

Obrázek 5) fetchFiltersWithQry

Obrázek 6) ColumnID a CacheCalls

S každým z nich je o čem mluvit. A abych rozbil kód a vysvětlil, co se děje, potřeboval jsem trochu více prostoru pro psaní. V příloze je dokument pro rozdělení kódu ServerCalls.gs

Tento dokument je nastaven jako Dokumentace skriptů Google App a dokonce vytváří odkazy na podobné objekty.

Krok 10: Krok 3: HTML kód (Application.html)

V dialogovém okně Instructable je HTML kód velmi nešťastný. Postupujte tedy podle výše uvedených obrázků.

1) V záhlaví stránky Application.html vytvoříme nadpis a zavoláme naši stránku CSS.html k načtení.

*Jako šablona HTML stránky můžeme do tohoto dokumentu přidat další kód, aniž bychom přeplnili aktuální obrazovku pomocí dříve zmíněné metody include (pageName), která se nachází v Server Code.gs

Na tomto obrázku je také hlavní pole záhlaví. Zde můžete změnit záhlaví a zadat „šatník [vašeho jména]“nebo cokoli jiného, co byste chtěli rozpoznat jako tuto stránku.

2) Hned pod záhlavím je náš horní navigační panel.

Tento navigační panel obsahuje všechny typy článků uvedené v listu článku v našich Tabulkách Google.

K načtení pole těchto položek je volána vložená funkce. Poté se spustí smyčka, která zahrne každou z těchto možností jako tlačítko nabídky, doplněná kódem akce, takže když uživatel klikne na tlačítko nabídky, příslušné položky se zobrazí v oblasti těla.

3) Hlavní tělo.

Tato část má 4 části. Obsahuje textový výstup, filtr postranního panelu, obrázky hlavního textu a JS.

Textový výstup umožňuje uživateli zobrazit rychlé zobrazení textu pro jaký typ položek, na které se aktuálně dívá, místo aby odkazoval na volbu nabídky, kterou vybrali.

Filtr postranního panelu obsahuje mnoho filtrů dostupných pro typ položky, kterou uživatel vybral. Tyto filtry odrážejí všechny možnosti dostupné pro tuto kategorii a také počet položek spadajících pod hodnotu dané kategorie. Tento postranní panel je naplněn kódem JavaScript (o kterém bude řeč dále).

Hlavní tělo je aktuálně prázdné, ale stejně jako filtry bude vyplněno políčky s podrobnostmi o ID položky, barvě, velikosti a umístění s obrázkem, jakmile uživatel vybere kategorii a kód JavaScript vyplní tuto oblast.

Nakonec obsahuje (JS), podívejme se na to v dalším kroku.

Krok 11: Krok 4: JavaScriptový kód (JS.html)

Pokud jste si mysleli, že kód serveru je těžká část, načtěte to.

Zde kombinujeme naše HTML a SeverCode s interakcemi uživatelů. Jakákoli položka, na kterou se kliká, musí být zpracována zde, aby byla získána správná data a vrácena v čitelném formátu. Pojďme se tedy podívat na naše první hovory:

Skript volá: Pro tento projekt používám 3 různé knihovny; jquery, bootstrap a speciální doplněk pro výběr bootstrapu. Tyto knihovny umožňují formátování objektů a snadnější volání prvků v kódu HTML.

Můj další důležitý řádek JavaScriptu je níže:

$ (dokument).keypress (funkce (událost) {if (event.which == '13') {event.preventDefault (); }});

Zde deaktivuji klávesu Enter, aby nespouštěla některý z formulářů. Stejně jako v tomto případě je Webovým aplikacím Google přiřazena pouze jedna adresa stránky. Stisknutím klávesy Enter přidáte data na adresu HTML a pokusíte se uživatele přesměrovat. Pokud toto zakážete, umožníte kódu JavaScript vykonávat veškerou práci.

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

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

Zde jsou dvě funkce, které provádějí volání do souboru Server Code.gs. Linie:

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

má mnoho pracovních částí, ale kostra je odvozena z „google.script.run“, který říká stránce HTML, že na serveru je následující funkce.

• Poslední bit tohoto kódu je funkce ke spuštění. V tomto případě ServerRemoveFilter ()
• Přidáním withSuccessHandler () stránka HTML nyní ví, co dělat s vrácenými daty, a to je spuštění funkce s závorkou.
• Totéž platí pro withFailureHandler ()

Nyní, když jsme rozdělili volání kódu serveru, pojďme se rychle podívat na to, co se stane, když tato volání serveru uspějí a selžou.

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

V tuto chvíli nelze načíst položky oblečení. CHYBA: " + error.message +"

");} funkce FailDBUpdate (chyba) {$ ("#message-box "). html ("

K úpravě umístění nemáte přístup. CHYBA: " + error.message +"

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

Vytvořil jsem velmi jednoduchý protokol konzoly, který znamená úspěch při spuštění funkce určování polohy, kterou můžete vidět jako allGood ().

Při zpracování chyb tyto dvě funkce vypisují chybovou zprávu, kam se uživatel může podívat pomocí volání jQuery na objekt HTML s ID „message-box“.

Nyní se vrhneme na odvážnou práci

Krok 12: Krok 5: Akce kliknutí kódem JavaScript (JS.html)

Horní panel nabídek má možnosti pro každý typ článku. Funkce, kterou spouští po kliknutí, je:

funkce filterType (článek, id) {$ ("ul.navbar-nav li.active"). removeClass ("aktivní"); $ ("#currentArticle"). html ("// HTML KÓD ZDE");

updateSideBar = true;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Články", článek); var newSelect = "#type-"+id; $ (newSelect).addClass ("aktivní"); $ ("#myNavbar"). removeClass ("in"); }

V tomto kódu vidíme, že máme soubor google.script.run, který volá server k načtení informací. Funkce úspěchu pro toto volání je updateItems ().

OBRÁZEK 1 (s těžkým kódem HTML v této funkci je obtížné přesně zkopírovat kód, aniž by v tomto poli vypadal nepořádek)

V kódu updateItems () se děje spousta věcí. Opět musíme projít Objektem , který nám byl vrácen, a přidat každou položku na naši hlavní stránku těla.

Kód HTML se přidá jako pole, aby se kód rozbil a usnadnilo se čtení a zjišťování, kam se vkládá itemData.

Ve smyčce každé položky odstraňuji pole, která nechci v popisu vidět, například Výchozí, časové razítko a URL obrázku. Odstraním adresu URL obrázku z popisu, protože je místo toho přidána jako href do značky. Jakmile jsou tyto informace shromážděny, jsou odeslány do hlavního těla pomocí funkce jQuery.append ().

Po přidání všech položek na stránku se tento dotaz na položky znovu odešle na serverový kód, aby seřadily a vrátily možnosti filtrování, jak je vidět na obrázku 2.

OBRÁZEK 2 (aktualizace postranní lišty)

Velmi podobné funkci updateItems () máme opět pole HTML kódu a smyčku pro všechny možnosti filtrování. Jedinou znatelnou změnou je jQuery.selectpicker ('refresh'). Tato funkce pochází z knihovny skriptů, kterou jsme zahrnuli v posledním kroku. Umožňuje programátorovi napsat jednoduchý výběrový HTML a nechat knihovnu aktualizovat tak, aby obsahovala prohledávatelnou funkci i kód CSS.

OBRÁZEK 3 (filtrování pomocí postranního panelu)

Nakonec máme funkci updateFilter (formData). Používá se při odeslání formuláře z postranního panelu. Začneme pomocí funkce jQuery.serializeArray () to přečte HTML kód prvku definovaného v našem případě formulář a vrátí hodnoty v řetězci, který má být odeslán na server. A proces začínáme od obrázku 1 znovu.

Krok 13: Konec …. Konečně

Tady to máte; úplné a důkladné vysvětlení, které vám pomůže s nastavením vlastního online šatníku nebo s využitím funkcí vytvořených v mých skriptech Google k rozšíření vašeho vlastního projektu.

Byla to cesta kódující tento projekt (a dokumentující prostřednictvím tohoto Instructable), ale tento proces jsem si užil a doufám, že se vám bude líbit. Rád bych se ozval každému, kdo provádí úpravy, protože Michael Jordan říká „Strop je střecha“a souhlasím, že tato aplikace nemá žádné limity.