Cuprins:

Organizator dulap: 13 pași
Organizator dulap: 13 pași

Video: Organizator dulap: 13 pași

Video: Organizator dulap: 13 pași
Video: Organizator Tip Sertar Pentru Dulap - Joseph&Joseph 2024, Iulie
Anonim
Organizator dulap
Organizator dulap

Fie că faceți cumpărături pentru haine sau vi se cere întotdeauna să împrumutați orice articol, există momente în care doriți să vă uitați în dulap de oriunde pentru a vedea dacă aveți ceva similar.

Acesta este un ghișeu unic și este expansiv în multe alte scopuri. Organizatorul meu de garderobă este o combinație de Foi de calcul Google ca bază de date SQL, Scripturi Google pentru gestionarea datelor și Google WebApp pentru un portal online către aceste date. Utilizatorul final poate să vadă toate articolele, să filtreze pentru ceva anume, să marcheze articolele ca împrumutate, să își gestioneze rufele și să o oprească pe mama să vă cumpere aceeași cămașă de Crăciun în fiecare an *.

(* Fără garanție. Mamele vor cumpăra ceea ce vor, indiferent dacă aveți nevoie sau nu)

Aruncând o privire rapidă asupra designului site-ului web din imaginea de mai sus, s-ar putea recunoaște un aspect familiar. Organizatorul pentru garderobă este configurat ca orice site de îmbrăcăminte obișnuit. Despărțită de departamente în sus și filtre furnizate lateral, această interfață aduce familiaritatea cu funcționalitatea utilizatorului obișnuit. ȘI este simplu de utilizat.

Pasul 1: Configurarea propriei copii

Configurarea propriei copii
Configurarea propriei copii

Să începem prin a crea propria copie a acestui proiect.

Google Drive

Faceți clic pe linkul de mai sus pentru a vă duce la versiunea mea actuală a acestei aplicații.

Veți vedea 3 elemente în acest dosar: un formular Google, o foaie Google și un dosar.

Faceți clic dreapta pe foaia Google și faceți clic pe Faceți o copie.

Setați locația acestei copii pe propriul Drive.

După copierea acestui document, Formularul Google va fi generat automat în același folder în care ați mutat foaia Google.

Pentru a crea folderul (acest lucru este necesar pentru colectarea încărcărilor imaginilor articolului), faceți clic pe formularul Google copiat și va apărea o solicitare care vă va cere să restaurați locația folderului pentru încărcări.

Aveți acum o copie a acestui document pentru a lucra pentru dvs.!

Pasul 2: Prezentare generală a formularului Google

Prezentare generală a formularului Google
Prezentare generală a formularului Google
Prezentare generală a formularului Google
Prezentare generală a formularului Google
Prezentare generală a formularului Google
Prezentare generală a formularului Google
Prezentare generală a formularului Google
Prezentare generală a formularului Google

Acum, că aveți propria versiune a acestei aplicații, să aruncăm o privire în jur.

Formularul dvs. Google este configurat pentru a accepta multe tipuri diferite de articole. Cu toate acestea, cămășile, pantalonii, rochiile și pantofii au toate limite diferite de dimensionare. Prin urmare, o altă secțiune a acestui formular va fi completată pe baza departamentului în care depuneți articolul. În șablonul meu (articol pentru bărbați) am creat 5 categorii diferite de dimensionare. (Pentru articolele pentru femei, faceți clic aici, sunt multe altele).

Sub fiecare secțiune de dimensionare, am stabilit un titlu unic pentru fiecare parametru pe care îl voi colecta. Nu dorim să avem mai multe coloane în baza noastră de date cu numele „Dimensiune” sau nu vom putea determina la ce tip de haine se aplică acea mărime.

La sfârșitul fiecărei secțiuni, utilizatorul este direcționat către partea finală a acestui formular: Locație. Am ales personal să adaug Locație pentru a determina articolele de la Curățătorie, în rufe, la locul lor sau acele articole în care am lăsat un prieten să se împrumute. Acest lucru îmi permite să fiu organizat și să nu simt niciodată că îmi lipsește undeva o piesă vestimentară.

După cum am menționat de la început, acest proiect poate fi extins într-un milion de moduri diferite. Îl puteți folosi pentru inventar, un instrument de organizare mai precis sau pentru împrumutarea strictă a hainelor. Câmpurile și secțiunile pe care le puteți adăuga sunt interminabile, așa că nu vă simțiți limitați la ceea ce este în forma mea. (Pentru articolele pentru femei faceți clic aici)

Înainte de a încărca câteva articole proprii, trecem la pasul următor pentru a ne asigura că suntem înscriși corect.

Pasul 3: Scripturi Google: (Server Code.gs) Mai întâi uitați-vă la date și cod

Scripturi Google: (Server Code.gs) Mai întâi uitați-vă la date și cod
Scripturi Google: (Server Code.gs) Mai întâi uitați-vă la date și cod
Scripturi Google: (Server Code.gs) Mai întâi uitați-vă la date și cod
Scripturi Google: (Server Code.gs) Mai întâi uitați-vă la date și cod

Dând clic pe documentul Foi de calcul Google, veți vedea multe coloane de date (și câteva rânduri, lăsate pentru demonstrare). În timpul trimiterii formularului, unele secțiuni sunt omise, acest lucru este evident din datele lipsă din unele coloane. Dar au fost adăugate coloane suplimentare precum ID, Locație implicită, Cine și Actualizat pentru a urmări mai bine modificările acestor elemente.

Un câmp ID a fost creat atunci când ați trimis formularul pentru a permite un identificator unic atunci când traversați această bază de date. Pentru a crea acest câmp, vom arunca o privire asupra Editorului de Scripturi făcând clic pe Instrumente> Editor de Scripturi.

Cu Editorul de scripturi deschis, veți observa 8 documente în bara laterală a acestei noi ferestre. Aceste documente vă ajută să controlați procesul back-end, afișajele front-end și funcționalitatea front-end. Vom sari în fiecare (dacă rămâneți în jur), dar chiar acum faceți clic pe Cod server.

În fișierul Server Code.gs există multe funcții:

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

onSubmit (e) - Această funcție va fi configurată ca prima funcție care se va executa la trimiterea unui formular Google. Puteți plasa alte funcții în interiorul acestei funcții pentru a permite să se întâmple multe procese diferite.

onOpen (e) - Această funcție este apelată la deschiderea Foi de calcul Google. Populează o nouă opțiune de meniu pentru a permite accesul rapid la linkurile și vizualizările aplicației.

doGet () - Această funcție este apelată la apelul de adresă Web App. Când un utilizator navighează la aplicația web publicată, acest cod va spune acelei pagini ce să afișeze. În acest caz, este documentul Application.html.

include (fileName) - Această funcție este utilizată în interiorul paginilor HTML pentru a citi alt document și a insera conținutul acestora într-un format HTML adecvat într-o altă pagină. Îl folosim pentru fișierele noastre CSS.html și JS.html.

openApplication () și openLaundryApp () - Aceste funcții conțin codul care se execută atunci când un utilizator face clic pe butoanele meniului adăugate la bara de instrumente Google Sheet.

changeValueOnSubmit (e) și setIDOnSubmit (e) - Acestea sunt funcțiile pe care le vom analiza pentru moment. Aceștia sunt responsabili pentru actualizarea anumitor câmpuri cu valori implicite atunci când formularul este inițial trimis.

Pasul 4: Activarea OnFormSubmit

Activarea OnFormSubmit
Activarea OnFormSubmit
Activarea OnFormSubmit
Activarea OnFormSubmit
Activarea OnFormSubmit
Activarea OnFormSubmit

Aceste două funcții, changeValueOnSubmit (e) și setIDOnSubmit (e), trebuie să fie conectate la acțiunea utilizatorului de a trimite un formular. Pentru a face acest lucru, trebuie să activăm un Trigger.

Activăm declanșatorul făcând clic pe Editare> Declanșatoare ale proiectului curent. Aceasta deschide Google Developer Hub.

În colțul din dreapta jos al tabloului de bord al declanșatorului se află un buton Adăugați un declanșator. Click aici.

Acum vom configura funcția pentru a rula atunci când este trimis un formular. În cazul nostru, am mai multe funcții (changeValueOnSubmit (e) și setIDOnSubmit (e)) pe care le-am introdus într-o funcție onSubmit (), așa că trebuie să configurez doar 1 declanșator. Prin urmare, vom selecta onSubmit () și vom seta acest declanșator pentru a rula În formularul de trimitere.

Acum avem un formular de lucru care va completa o foaie Google cu identificatori unici și va seta valorile implicite.

Acum puteți încărca propriile articole utilizând Formularul Google. (Acest lucru nu este necesar pentru a continua, deoarece există deja valori demo în). Acum ne vom scufunda în interfața cu utilizatorul.

Pasul 5: Configurarea interfeței cu utilizatorul

Configurarea interfeței cu utilizatorul
Configurarea interfeței cu utilizatorul
Configurarea interfeței cu utilizatorul
Configurarea interfeței cu utilizatorul
Configurarea interfeței cu utilizatorul
Configurarea interfeței cu utilizatorul

BINE ATI VENIT! Am ajuns în sfârșit la partea pentru care ați venit, interfața cu utilizatorul !!!!

La prima vedere, nu este nimic aici. Nu am făcut încă niciun apel. Pentru a încărca pagina mai repede, am decis să nu afectez prima pagină cu TOATE articolele dvs. și să vă permit să faceți clic pe ceea ce doriți să vedeți mai repede. Deoarece acesta este cazul, nu există elemente în câmpul de conținut principal și nici filtre în bara laterală. Să facem clic pe Toate pentru a vedea ce este în baza noastră de date.

Acum am încărcat fiecare articol din baza noastră de date în câmpul principal de conținut. Veți vedea imagini, numere de identificare, culoare, dimensiuni și locații. Câmpul de locație poate fi actualizat chiar aici! Dacă decideți să împrumutați articolul, puteți selecta acea opțiune, o puteți plasa în dulapul, comoda sau rufele.

Și în bara noastră laterală avem toate câmpurile posibile pentru fiecare articol de îmbrăcăminte din noua noastră interogare. Imaginați-vă că aveți 20 de opțiuni de dimensionare diferite pe această bară laterală, nu ar fi foarte eficient, așa că hai să restrângem căutarea făcând clic pe Accesorii.

Acum că am încărcat accesorii, aruncați o privire la bara laterală. S-a ajustat la doar 3 câmpuri, deoarece aceștia sunt parametrii care se aplică fiecărui articol din această interogare. Voi face un fel de culoare. Făcând clic pe culoare, apare o casetă derulantă. Aici pot să tastez culoarea dorită și apoi să o selectez, sau dacă îmi văd opțiunea imediat, voi face clic pe ea. Am selectat Roșu pentru această demonstrație. Faceți clic pe Aplicați filtru în partea de jos a acestei bare laterale și conținutul principal se va reîmprospăta, arătându-vă articolele care au culoarea roșie setată ca parametru de culoare.

Am menționat anterior că această bază de date mă ajută să-mi gestionez articolele împrumutate și în rufe. Pentru a ușura un pic, în loc să fac clic manual pe fiecare locație drop-down din această pagină principală, am creat Modul de spălare. Întoarceți-vă la pagina Foaie Google și sub Vizualizare aplicație veți vedea Modul de spălare. Această opțiune va afișa un mod mai mic care afișează numai articole cu locația de spălătorie. Acum pot marca toate aceste elemente ca implicite, ceea ce le va pune înapoi în locațiile în care sunt stocate în mod normal.

Pasul 7: Proiect finalizat

Proiect finalizat!
Proiect finalizat!

FELICITĂRI

Pentru cei dintre voi care doresc doar o bază de date funcțională pentru a vă gestiona articolele, bine ați venit la organizatorul dvs. online. Pentru mințile curioase interesate de codul din spatele acestei aplicații. Rămâneți în jur când o descompun.

* Sunteți liber să ștergeți elementele de test DUPĂ ce ați introdus cel puțin unul din propriile dvs. elemente în baza de date. (Vă explic mai târziu dacă rămâneți în jur).

Pasul 8: Pasul 1: Codul de back-end (Server Code.gs)

Pasul 1: codul back-end (Server Code.gs)
Pasul 1: codul back-end (Server Code.gs)
Pasul 1: codul back-end (Server Code.gs)
Pasul 1: codul back-end (Server Code.gs)

Mai devreme am deschis fișierul Server Code.gs și am dat o scurtă descriere a fiecărei funcții, deoarece scopul lor era să servească fiecare dintre elementele pe care tocmai le-ați configurat, dar acum le vom descompune unele dintre funcționalitățile și utilitățile numite pentru a face acest cod un succes.

1) Traversarea mesei:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Form Răspunsuri 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

  • Acest cod este o bază pentru parcurgerea unei foi de calcul Google. Apel foaia după nume, mai degrabă decât prin număr, astfel încât, dacă foile sunt șterse sau rearanjate după funcție, pot funcționa în continuare corect.
  • În acest cod colectez doar domeniul pentru toate datele din tabel.

2) Atribuirea unui 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);

  • Am solicitat anterior ca valorile demo să fie lăsate în tabel până când utilizatorul a trimis cel puțin o valoare pentru ei înșiși. Acest lucru se datorează faptului că generatorul de identificare automată se bazează pe ultima valoare din baza de date de populat.
  • Aduc ultimul al doilea până la ultimul rând, deoarece ultimul rând este noua noastră valoare și prima coloană pentru valoarea ID.
  • Apoi generez aleatoriu un număr între 5 și 15 și îl adaug la ultima valoare. *
  • În cele din urmă, plasez această valoare în coloana ID a ultimului rând.
  • Apoi numim funcția changeValueOnSubmit (e).

* Am ales 5-15 pentru a permite etichetarea viitoare și integrarea Google Home, astfel încât numerele să nu fie suficient de apropiate pentru a provoca confuzie pe umerașe sau etichete de îmbrăcăminte sau coduri de bare.

3) Modificarea valorii URL:

var DataChange = e.namedValues ["Imagine articol"]; var DefaultLocation = e.namedValues ["Unde păstrați acest articol de îmbrăcăminte?"]; var ColD = ColumnID _ ("Imagine articol") +1; var ColLoc = ColumnID _ ("Default Location") + 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);

  • Când trimiteți o fotografie printr-un formular Google, adresa URL inserată în Foi de calcul Google este un link către documentul real. În cazul nostru, deoarece creăm o pagină HTML, dorim ca linkul să fie doar imaginea.
  • Schimbând „deschisul”? parte a adresei URL către „uc? export = view &” am creat în schimb un link către imagine.
  • Vom plasa din nou această nouă valoare în locația linkului curent Imagine articol.
  • De asemenea, setez „Locația implicită” și „Locația curentă” a articolului la același lucru din baza de date. Acest lucru va fi util atunci când încerc să folosesc modul meu de spălare.
  • Ne vom scufunda în pagina următoare, dar aceasta este prima noastră privire la funcția ColumnID_ () pe care am creat-o.

    Această funcție folosește Nume coloane pentru ao traduce în întregul coloană, care este util pentru apelarea Range care necesită mai degrabă un număr de coloană decât un nume

4) SpreadsheetApp.getUI ()

  • În cea de-a doua imagine puteți vedea utilizarea SpreadsheetApp.getUI () așa cum a fost folosită pentru a crea un meniu al Barei de instrumente Google pe foaia de calcul.
  • Funcția.getUI () ajută, de asemenea, la crearea unui popup modal care este utilizat pentru modul Spălătorie și ca un link rapid către interfața site-ului web.

5) Serviciu HTML

  • Există două tipuri de servicii HTML utilizate în acest cod: șablon și ieșire HTML
  • Șablonul permite introducerea codului în interiorul codului HTML, astfel încât informațiile provenite de la un server să poată fi completate atunci când pagina este apelată.
  • HTML Output afișează pagini HTML simple.
  • De asemenea, avem metoda include () care ne permite să creăm mai multe fișiere HTML și să le combinăm într-un singur fișier HTML șablonat, returnând conținutul fișierului într-un format HTML, mai degrabă decât într-un șir.

Am atașat un document configurat, cum ar fi Documentația Scripturilor Google App, pentru a vă familiariza cu modul în care codul sursă și funcționalitatea sunt explicate în Google Apps.

Pasul 9: Pasul 2: Codul Back-End Partea 2 (Server Calls.gs)

Pasul 2: codul back-end partea 2 (Server Calls.gs)
Pasul 2: codul back-end partea 2 (Server Calls.gs)
Pasul 2: codul back-end partea 2 (Server Calls.gs)
Pasul 2: codul back-end partea 2 (Server Calls.gs)
Pasul 2: codul back-end partea 2 (Server Calls.gs)
Pasul 2: codul back-end partea 2 (Server Calls.gs)

Acum am intrat în Server Calls.gs. Aceste funcții sunt utilizate în principal în codul HTML JavaScript, astfel încât au fost separate de codul care este utilizat în principal în partea din spate care se află în Server Code.gs.

Imaginea 1) Variabile globale:

Imaginea 2) preluarea articolelor:

Imaginea 3) fetchItemsQry

Imagine 4) filterItems

Imaginea 5) fetchFiltersWithQry

Imaginea 6) ColumnID și CacheCalls

Există atât de multe de vorbit despre fiecare dintre acestea. Și pentru a descompune codul și a explica ce se întâmplă, aveam nevoie de un pic mai mult spațiu de tastare. Atașat este un document pentru defalcarea codului ServerCalls.gs

Acest document este configurat ca documentația Google App Scripts și creează chiar și linkuri către obiecte similare.

Pasul 10: Pasul 3: codul HTML (Application.html)

Pasul 3: Codul HTML (Application.html)
Pasul 3: Codul HTML (Application.html)
Pasul 3: Codul HTML (Application.html)
Pasul 3: Codul HTML (Application.html)
Pasul 3: Codul HTML (Application.html)
Pasul 3: Codul HTML (Application.html)

Codul HTML devine foarte nemulțumit în caseta de dialog a Instructable. Deci, vă rugăm să urmați împreună cu imaginile de mai sus.

1) În antetul paginii Application.html stabilim un titlu și apelăm pagina noastră CSS.html pentru a fi încărcată.

* Fiind o pagină HTML șablonată, putem adăuga mai mult cod la acest document fără a aglomera ecranul curent folosind metoda include (pageName) menționată anterior găsită în Server Code.gs

Caseta principală de antet se găsește și în această imagine. Puteți schimba antetul aici și introduceți „Garderoba [Numele tău]” sau orice altceva ai dori să recunoști această pagină.

2) Chiar sub antet se află bara noastră de navigare de sus.

Această bară de navigare include toate tipurile de articole listate pe foaia de articole din Foi de calcul Google.

O funcție inline este apelată pentru a prelua o serie de aceste elemente. Apoi se rulează o buclă pentru a include fiecare dintre aceste opțiuni ca buton de meniu, completat cu un cod de acțiune, astfel încât atunci când un utilizator face clic pe butonul de meniu, articolele respective vor apărea în zona corpului.

3) Corpul principal.

Există 4 porțiuni pentru această parte. O ieșire de text, filtrul barei laterale, imaginile corpului principal și JS includ.

Ieșirea textului permite utilizatorului să vadă o vizualizare rapidă a textului pentru ce tip de elemente se uită în prezent, în loc să se refere la opțiunea de meniu pe care a selectat-o.

Filtrul din bara laterală conține numeroasele filtre disponibile pentru tipul de element selectat de un utilizator. Aceste filtre reflectă toate opțiunile disponibile pentru această categorie, precum și câte articole se încadrează în valoarea categoriei respective. Această bară laterală este populată cu cod JavaScript (care va fi discutat în continuare).

Corpul principal este gol în prezent, dar la fel ca filtrele, acesta va fi umplut cu casete de elemente care detaliază ID-ul articolului, culoarea, dimensiunea și locația, cu o imagine inclusă odată ce utilizatorul selectează o categorie și codul JavaScript populează această zonă.

În cele din urmă include (JS), să aruncăm o privire la acest lucru la pasul următor.

Pasul 11: Pasul 4: Codul JavaScript (JS.html)

Pasul 4: codul JavaScript (JS.html)
Pasul 4: codul JavaScript (JS.html)

Dacă ați crezut că Codul serverului este o secțiune grea, obțineți o încărcătură de acest lucru.

Aici combinăm codul nostru HTML și SeverCode cu interacțiunile utilizatorilor. Orice articol pe care se face clic trebuie procesat aici pentru a obține datele adecvate și a le returna într-un format lizibil. Deci, să aruncăm o privire la primele noastre apeluri:

Scriptul apelează: folosesc 3 biblioteci diferite pentru acest proiect; jquery, bootstrap și un supliment special bootstrap-select. Aceste biblioteci permit formatarea obiectelor și apeluri mai ușoare către elementele din codul HTML.

Următoarea mea linie importantă de JavaScript este mai jos:

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

Aici dezactivez tasta Enter pentru a declanșa oricare dintre formulare. Ca și în acest caz, aplicațiilor web Google li se atribuie doar o singură adresă de pagină. O apăsare Enter ar adăuga date la adresa HTML și ar încerca să redirecționeze utilizatorul. Dezactivând acest lucru, permiteți codului dvs. JavaScript să facă toată treaba.

funcția removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

funcție updateDBlocation (id, valoare) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, valoare); }

Iată două funcții care efectuează apeluri către fișierul Server Code.gs. Linia:

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

are multe părți de lucru, dar scheletul este înrădăcinat din „google.script.run”, care spune paginii HTML că următoarea funcție este pe server.

  • Ultimul bit al acestui cod este funcția de executat. În acest exemplu ServerRemoveFilter ()
  • Prin adăugarea unui withSuccessHandler (), pagina HTML știe acum ce să facă cu datele returnate și aceasta este pentru a rula funcția cu paranteză.
  • Același lucru se aplică cu withFailureHandler ()

Acum că am descompus apelul de cod server, să aruncăm o privire rapidă asupra a ceea ce se întâmplă când aceste apeluri de server reușesc și eșuează.

function allGood (e) {console.log ("Succes pe server"); } funcție pe Eșec (eroare) {$ ("# mesaj-casetă"). html ("

În acest moment nu se pot prelua articole vestimentare. EROARE: „+ error.message +”

");} funcție FailDBUpdate (eroare) {$ (" # mesaj-casetă "). html ("

Nu aveți acces pentru a modifica locația. EROARE: „+ error.message +”

"); $ (". locație-selectează "). prop ('dezactivat', 'dezactivat');}

Am creat un jurnal de consolă foarte simplu pentru a semnifica succesul atunci când funcția de locație este executată, pe care o puteți vedea ca allGood ().

Atunci când gestionează erorile, aceste două funcții generează mesajul de eroare unde utilizatorul poate vedea utilizând un apel jQuery către obiectul HTML cu un ID de „casetă de mesaj”.

Acum să trecem la treabă

Pasul 12: Pasul 5: acțiunile JavaScript cu clic pe cod (JS.html)

Pasul 5: Acțiunile JavaScript cu clic pe cod (JS.html)
Pasul 5: Acțiunile JavaScript cu clic pe cod (JS.html)
Pasul 5: Acțiunile JavaScript cu clic pe cod (JS.html)
Pasul 5: Acțiunile JavaScript cu clic pe cod (JS.html)
Pasul 5: acțiunile JavaScript cu clic pe cod (JS.html)
Pasul 5: acțiunile JavaScript cu clic pe cod (JS.html)

Bara de meniu din partea de sus are opțiuni pentru fiecare tip de articol. Funcția pe care o execută pe clic este:

funcție filterType (articol, id) {$ ("ul.navbar-nav li.active"). removeClass ("activ"); $ ("# currentArticle"). html ("// COD HTML HTML AICI");

updateSideBar = adevărat;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems („Articole”, articol); var newSelect = "#type -" + id; $ (newSelect).addClass ("activ"); $ ("# myNavbar"). removeClass ("în"); }

Putem vedea în acest cod că avem un google.script.run care apelează la server pentru a prelua informații. Funcția de succes pentru acest apel este updateItems ().

IMAGINE 1 (cu codul HTML greu din această funcție este dificil să copiați strict codul, fără a apărea o mizerie în această casetă)

În codul updateItems (), avem multe lucruri care se întâmplă. Încă o dată trebuie să traversăm obiectul care ne-a fost returnat și să adăugăm fiecare articol la pagina noastră principală a corpului.

Codul HTML este adăugat ca matrice pentru a separa codul și a face mai ușor de citit și de a vedea unde se inserează itemData.

În bucla fiecărui articol, șterg câmpurile pe care nu vreau să le văd în descriere, cum ar fi Implicit, marcaj de timp și adresa URL a imaginii. Șterg adresa URL a imaginii din descriere, deoarece este adăugată ca href la o etichetă. Odată ce aceste informații sunt asamblate, acestea sunt trimise corpului principal folosind funcția jQuery.append ().

După ce toate elementele au fost adăugate la pagină, această interogare a articolelor este trimisă din nou la codul serverului pentru a sorta și a returna opțiunile de filtrare așa cum se vede în imaginea 2.

IMAGINE 2 (actualizarea SideBar)

Foarte similar cu funcția updateItems (), avem din nou matrici de cod HTML și o buclă pentru toate opțiunile de filtrare. Singura modificare vizibilă este jQuery.selectpicker („refresh”). Această funcție provine din biblioteca de scripturi pe care am inclus-o în ultimul pas. Acesta permite programatorului să scrie un HTML simplu selectat și să permită bibliotecii să îl actualizeze pentru a include funcția de căutare, precum și codul CSS.

IMAGINE 3 (filtrare cu bara laterală)

În cele din urmă avem funcția updateFilter (formData). Acesta este utilizat atunci când un formular este trimis din bara laterală. Începem prin a utiliza o funcție jQuery.serializeArray (), aceasta citește codul HTML al elementului definit în cazul nostru, un formular și returnează valorile dintr-un șir pentru a fi trimise la server. Și începem procesul din imaginea 1 din nou.

Pasul 13: Sfârșitul … în cele din urmă

Sfârșitul … în cele din urmă
Sfârșitul … în cele din urmă
Sfârșitul….în cele din urmă
Sfârșitul….în cele din urmă

Ei bine, acolo îl aveți; o explicație completă și detaliată pentru a vă ajuta să vă configurați propriul dulap online sau să utilizați funcționalitatea creată în scripturile mele Google pentru a vă extinde propriul proiect.

A fost o călătorie care codifică acest proiect (și documentează prin acest instructabil), dar m-am bucurat de acest proces și sper că vă veți bucura de produs. Mi-ar plăcea să aud de la oricine face modificări, așa cum Michael Jordan spune „Plafonul este acoperișul” și sunt de acord că această aplicație nu are limite.

Recomandat: