Wգեստապահարան Կազմակերպիչ ՝ 13 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:48

Անկախ նրանից, թե դա հագուստի գնում է, կամ միշտ ձեզանից պահանջվում է որևէ իր վերցնել, երբեմն կան դեպքեր, երբ կցանկանայիք որևէ տեղից նայել ձեր զգեստապահարան ՝ տեսնելու համար, թե նման բան ունե՞ք: Wգեստապահարանի կազմակերպիչը դա անում է և ԱՎԵԼԻ:

Սա միակողմանի խանութ է և ընդարձակ է բազմաթիվ այլ նպատակների համար: My Wardrobe Organizer- ը Google Sheets- ի ՝ որպես SQL տվյալների բազայի, Google Scripts տվյալների մշակման և Google WebApp- ի համակցումն է ՝ այս տվյալների առցանց պորտալի համար: Վերջնական օգտվողը կարող է տեսնել բոլոր իրերը, զտել ինչ -որ կոնկրետ բանի համար, ապրանքները նշել որպես փոխառու, կառավարել իր լվացքատունը և դադարեցնել մայրիկին ամեն տարի Սուրբ forննդյան տոների համար գնել ձեզ նույն վերնաշապիկը*:

(*Երաշխիք չկա: Մայրերը կգնեն այն, ինչ ուզում են, կարիքը կա, թե ոչ)

Վերևում պատկերված վեբ կայքի դիզայնին արագ հայացք գցելով ՝ կարելի է ճանաչել ծանոթ դասավորությունը: Wգեստապահարանի կազմակերպիչը ստեղծվել է ինչպես ցանկացած սովորական հագուստի կայք: Բաժանմունքները բաժանված են վերևում և կողքից տրամադրված զտիչներով, այս ինտերֆեյսը սովորական օգտագործողին ծանոթացնում է գործառույթներին: ԵՎ պարզ է օգտագործման համար:

Քայլ 1: Ստեղծեք ձեր սեփական պատճենը

Եկեք սկսենք ՝ ստեղծելով այս նախագծի ձեր սեփական օրինակը:

Google Drive

Կտտացրեք վերը նշված հղմանը ՝ ձեզ այս հավելվածի իմ ընթացիկ տարբերակին տանելու համար:

Այս թղթապանակում կտեսնեք 3 տարր ՝ Google Ձև, Google Աղյուսակ և Թղթապանակ:

Աջ սեղմեք Google Աղյուսակի վրա և կտտացրեք Պատճենել:

Սահմանեք այս պատճենի գտնվելու վայրը ձեր սեփական Drive- ում:

Այս փաստաթուղթը պատճենելուց հետո Google Ձևը ինքնաբերաբար կստեղծվի նույն պանակում, որտեղ տեղափոխել եք Google Աղյուսակը:

Թղթապանակ ստեղծելու համար (սա անհրաժեշտ է իրերի նկարների վերբեռնումները հավաքելու համար), կտտացրեք պատճենված Google ձևին և կհայտնվի հուշում, որը խնդրում է վերականգնել վերբեռնման համար պանակի գտնվելու վայրը:

Դուք այժմ ունեք այս փաստաթղթի պատճենը, որը կարող եք ինքներդ մշակել:

Քայլ 2: Google Ձևաթղթի ակնարկ

Այժմ, երբ դուք ունեք այս հավելվածի ձեր սեփական տարբերակը, եկեք նայենք շուրջը:

Ձեր Google Ձևը ստեղծվել է ՝ ընդունելու բազմաթիվ տարբեր տեսակի տարրեր: Այնուամենայնիվ, վերնաշապիկները, տաբատները, զգեստները և կոշիկները չափի տարբեր սահմանափակումներ ունեն: Հետևաբար, այս ձևի մեկ այլ բաժին կլրացվի ՝ հիմնվելով այն բաժնի վրա, որի ներքո ներկայացնում եք ձեր նյութը: Իմ (Արական հոդվածի) ձևանմուշում ես ստեղծել եմ 5 տարբեր չափերի կատեգորիաներ: (Կանանց հոդվածների համար կտտացրեք այստեղ, կան շատ ավելին):

Չափերի յուրաքանչյուր հատվածի ներքո ես սահմանեցի յուրահատուկ վերնագիր յուրաքանչյուր պարամետրի համար, որը ես կհավաքեմ: Մենք չենք ցանկանում մեր տվյալների բազայում ունենալ «Չափ» անվանումով բազմաթիվ սյունակներ, այլապես չենք կարողանա որոշել, թե որ չափի հագուստի տեսակին է վերաբերում:

Յուրաքանչյուր բաժնի վերջում օգտվողին ուղղորդում են այս ձևի վերջին հատվածին ՝ Տեղ. Ես անձամբ որոշեցի ավելացնել «Տեղանքը» `չորանոցների, լվացքի, դրանց տեղում կամ այն իրերը որոշելու համար, որոնցում ես ընկերոջս պարտք եմ վերցրել: Սա թույլ է տալիս ինձ լինել կազմակերպված և երբեք չզգալ, որ ինչ -որ տեղ կարոտում եմ հագուստի մի կտոր:

Ինչպես նշեցի ի սկզբանե, այս նախագիծը կարող է ընդլայնվել միլիոն տարբեր եղանակներով: Դուք կարող եք այն օգտագործել գույքագրման, կազմակերպման ավելի ճշգրիտ գործիքի կամ հագուստի խիստ փոխառության համար: Այն դաշտերն ու հատվածները, որոնք կարող եք ավելացնել, անվերջ են, այնպես որ մի սահմանափակվեք իմ տեսքով: (Կանանց հոդվածների համար կտտացրեք այստեղ)

Նախքան ձեր սեփական մի քանի իրերի վերբեռնումը, եկեք անցնենք հաջորդ քայլին `ապահովելու համար համապատասխան ներկայացումը:

Քայլ 3: Google Scripts: (Server Code.gs) Նախ նայեք տվյալները և ծածկագիրը

Սեղմելով Google Աղյուսակների փաստաթղթում ՝ կտեսնեք տվյալների բազմաթիվ սյունակներ (և որոշ տողեր, որոնք մնացել են ցուցադրման համար): Ձևաթուղթը ներկայացնելիս որոշ բաժիններ բաց են թողնվում, սա ակնհայտ է որոշ սյունակներում բացակայող տվյալներից: Բայց լրացուցիչ սյուներ, ինչպիսիք են ID- ն, Default Location- ը, Who- ը և Updated- ը, ավելացվել են `այս տարրերի խմբագրումներն ավելի լավ հետևելու համար:

Ձևաթուղթը ներկայացնելիս ստեղծվել է ID դաշտ, որը թույլ է տալիս եզակի նույնացուցիչ գտնել այս տվյալների շտեմարանն անցնելիս: Այս դաշտը ստեղծելու համար մենք կնայենք Script Editor- ին ՝ կտտացնելով Tools> Script Editor:

Script- ի խմբագրիչը բացված վիճակում այս նոր պատուհանի կողագոտում կնկատեք 8 փաստաթուղթ: Այս փաստաթղթերը օգնում են վերահսկել հետևի գործընթացը, առջևի ցուցադրումները և առջևի գործառական հնարավորությունները: Մենք ցատկելու ենք յուրաքանչյուրի մեջ (եթե մոտենաք), բայց հենց հիմա կտտացրեք Սերվերի կոդը:

Սերվերի Code.gs ֆայլում կան բազմաթիվ գործառույթներ.

onSubmit (e), onOpen (), doGet (), ներառել (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Այս գործառույթը կկարգավորվի որպես առաջին ֆունկցիա, որը գործարկվելու է Google ձևը ներկայացնելիս: Այս գործառույթի ներսում կարող եք տեղադրել այլ գործառույթներ, որոնք թույլ կտան շատ տարբեր գործընթացներ տեղի ունենալ:

onOpen (e) - Այս գործառույթը կոչվում է, երբ բացվում է Google Աղյուսակները: Այն համալրում է ընտրացանկի նոր տարբերակը, որը թույլ է տալիս արագ մուտք գործել հավելվածի հղումներին և դիտումներին:

doGet ()- Այս գործառույթը կոչվում է Վեբ հավելվածի հասցեի զանգ: Երբ օգտվողը թերթում է հրապարակված Վեբ հավելվածը, այս կոդը այդ էջին կասի, թե ինչ ցուցադրել: Այս դեպքում դա Application.html փաստաթուղթն է:

ներառում (ֆայլի անուն) - Այս գործառույթը օգտագործվում է HTML էջերի ներսում `այլ փաստաթղթեր կարդալու և դրանց բովանդակությունը մեկ այլ էջի համապատասխան HTML ձևաչափի մեջ տեղադրելու համար: Մենք այն օգտագործում ենք մեր CSS.html և JS.html ֆայլերի համար:

openApplication () և openLaundryApp () - Այս գործառույթները պարունակում են կոդը, որը գործարկվելու է, երբ օգտվողը կտտացնում է Google Աղյուսակի գործիքագոտում ավելացված ընտրացանկի կոճակներին:

changeValueOnSubmit (e) և setIDOnSubmit (e)- Սրանք այն գործառույթներն են, որոնք մենք այժմ կքննարկենք: Նրանք պատասխանատու են որոշակի դաշտերի լռելյայն արժեքներով թարմացնելու համար, երբ ձևը սկզբնապես ներկայացվում է:

Քայլ 4. Միացնել OnFormSubmit- ը

Այս երկու գործառույթները ՝ changeValueOnSubmit (e) և setIDOnSubmit (e), պետք է միացված լինեն ձևը ներկայացնելու օգտվողի գործողությանը: Դա անելու համար մենք պետք է միացնենք ձգան:

Մենք միացնում ենք ձգանը ՝ կտտացնելով Խմբագրել> Ընթացիկ նախագծի գործարկիչներ: Սա բացում է Google Developer Hub- ը:

Տրիգերի կառավարման վահանակի ներքևի աջ անկյունում կա կոճակ Ավելացնել ձգան: Սեղմեք այստեղ.

Այժմ մենք կստեղծենք գործառույթը, որը գործարկվի, երբ ձևը ներկայացվի: Մեր դեպքում ես ունեմ բազմաթիվ գործառույթներ (changeValueOnSubmit (e) և setIDOnSubmit (e)), որոնք ես դնում եմ onSubmit () ֆունկցիայի ներսում, այնպես որ ինձ մնում է միայն 1 ձգան կարգավորել: Հետևաբար, մենք կընտրենք onSubmit () և այս ձգանը կդնենք գործարկել On form submit- ի վրա:

Այժմ մենք ունենք աշխատանքային ձև, որը կհամալրի Google Աղյուսակ ՝ եզակի նույնացուցիչներով և կսահմանի կանխադրված արժեքներ:

Այժմ կարող եք վերբեռնել ձեր սեփական տարրերը ՝ օգտագործելով Google ձևը: (Սա անհրաժեշտ չէ շարունակել, քանի որ դրա մեջ արդեն կան ցուցադրական արժեքներ): Այժմ մենք կխորանանք օգտվողի միջերեսի մեջ:

Քայլ 5: Օգտագործողի միջերեսի կարգավորում

Ո WՈCOՅՆ! Մենք վերջապես հասանք այն հատվածին, որի համար եկել եք ՝ Օգտվողի միջերես !!!!

Առաջին հայացքից այստեղ ոչինչ չկա: Մենք դեռ որևէ զանգ չենք կատարել: Էջը ավելի արագ բեռնելու համար ես որոշեցի չփչացնել առաջին էջը ձեր ԲՈԼՈՐ իրերով և թույլ տալ ձեզ սեղմել այն, ինչ ցանկանում եք ավելի արագ տեսնել: Քանի որ դա այդպես է, հիմնական բովանդակության դաշտում տարրեր չկան, իսկ կողային հատվածում զտիչներ չկան: Եկեք սեղմենք Բոլորի վրա ՝ տեսնելու, թե ինչ կա մեր տվյալների բազայում:

Այժմ մենք մեր տվյալների բազայի յուրաքանչյուր տարր բեռնել ենք հիմնական բովանդակության դաշտ: Դուք կտեսնեք նկարներ, ID համարներ, գույն, չափեր և վայրեր: Տեղադրության դաշտը կարող է թարմացվել հենց այստեղ: Եթե որոշեք վարկով վերցնել իրը, կարող եք ընտրել այդ տարբերակը, այն կարող եք տեղադրել ձեր առանձնասենյակում, պահարանում կամ լվացքատանը:

Եվ մեր կողային գծում մենք ունենք բոլոր հնարավոր դաշտերը մեր նոր հարցման յուրաքանչյուր հագուստի համար: Պարզապես պատկերացրեք, որ այս կողային վահանակի վրա կա 20 տարբեր չափսերի տարբերակ, դա այնքան էլ արդյունավետ չի լինի, ուստի եկեք մեր որոնումը նեղացնենք ՝ սեղմելով Աքսեսուարներ:

Այժմ, երբ մենք բեռնել ենք Աքսեսուարներ, նայեք կողագոտուն: Այն հարմարվել է ընդամենը 3 դաշտի, քանի որ դրանք այն պարամետրերն են, որոնք կիրառելի են այս հարցման յուրաքանչյուր նյութի համար: Ես պատրաստվում եմ տեսակավորել ըստ գույնի: Սեղմելով գույնի վրա ՝ հայտնվում է բացվող տուփ: Այստեղ ես կարող եմ կամ մուտքագրել իմ ուզած գույնը, այնուհետև ընտրել այն, կամ եթե անմիջապես տեսնեմ իմ տարբերակը, ես պարզապես կտտացնեմ այն: Այս ցուցադրության համար ընտրեցի Կարմիրը: Կտտացրեք «Կիրառել զտիչ» այս կողագոտու ներքևում, և հիմնական բովանդակությունը կթարմացվի ՝ ցույց տալով ձեզ այն տարրերը, որոնցում կարմիր գույնը սահմանվել է որպես իրենց գույնի պարամետր:

Նախկինում ես նշեցի, որ այս տվյալների բազան օգնում է ինձ կառավարել իմ իրերը վարկով և լվացքատանը: Մի փոքր ավելի հեշտ դարձնելու համար, այս հիմնական էջի յուրաքանչյուր բացվող վայրը ձեռքով սեղմելու փոխարեն ես ստեղծեցի Լվացքի ռեժիմ: Վերադարձեք Google Աղյուսակ էջ և App View- ի ներքո կտեսնեք Լվացքի ռեժիմ: Այս տարբերակը կբերի ավելի փոքր մոդալ, որը ցույց է տալիս միայն Լվացքի գտնվելու վայրի տարրերը: Այժմ ես կարող եմ այս բոլոր տարրերը նշել որպես Default, ինչը դրանք կտեղադրի իրենց այն վայրերում, որտեղ նրանք սովորաբար պահվում են:

Քայլ 7: Նախագիծն ավարտված է:

ՇՆՈՐՀԱՎՈՐ

Ձեզանից նրանք, ովքեր պարզապես ցանկանում են աշխատանքային տվյալների բազա ՝ ձեր իրերը կառավարելու համար, բարի գալուստ ձեր առցանց կազմակերպիչ: Այն հետաքրքրասեր մտքերի համար, ովքեր հետաքրքրված են այս հավելվածի հետևում գտնվող ծածկագրով: Կողպեք, երբ ես քանդում եմ այն:

*Դուք ազատ եք ջնջել թեստային տարրերը ԲԱ databaseՈ yourԹՅՈՆ ձեր սեփական նյութերից առնվազն մեկը մուտքագրելուց հետո: (Ես կբացատրեմ ավելի ուշ, եթե դուք մոտենաք):

Քայլ 8: Քայլ 1. Հետընտրական ծածկագիր (Server Code.gs)

Ավելի վաղ մենք բացում էինք Server Code.gs ֆայլը, և ես արագ ներկայացնում էի գործառույթներից յուրաքանչյուրը, քանի որ դրանց նպատակն էր ծառայել ձեր ստեղծած տարրերից յուրաքանչյուրին, բայց այժմ մենք դրանք կբաժանենք որոշ ֆունկցիոնալ և օգտակար անուններով: այս ծածկագիրը հաջողության հասնելու համար:

1) Աղյուսակի անցում.

var ss = SpreadsheetApp.getActiveS spreadsheet (); var sheet = ss.getSheetByName («Ձևի պատասխաններ 1»); var միջակայք = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Այս ծածկագիրը հիմք է հանդիսանում Google Աղյուսակ անցնելու համար: Ես թերթը կոչում եմ անունով, այլ ոչ թե համարով, որպեսզի եթե թերթերը ջնջվեն կամ վերադասավորվեն ըստ գործառույթի, այն դեռ կարող է ճիշտ գործել:
• Այս ծածկագրում ես հավաքում եմ միայն Range- ը աղյուսակի բոլոր տվյալների համար:

2) անձը հաստատող փաստաթղթի նշանակում.

var LastID = range.getCell (rowNum-1, 1); var CellValue = համարը (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 (ե);

• Նախկինում ես խնդրել էի, որ ցուցադրական արժեքները թողնվեն աղյուսակում, մինչև օգտվողը գոնե մեկ արժեք ներկայացնի իր համար: Դա պայմանավորված է նրանով, որ Auto ID- ի գեներատորը հիմնվում է տվյալների բազայի վերջին արժեքի վրա, որը պետք է լրացվի:
• Ես բերում եմ վերջին 2 -րդից վերջին տողը, քանի որ վերջին տողը մեր նոր արժեքն է և ID- ի արժեքի 1 -ին սյունակը:
• Այնուհետև ես պատահականորեն առաջացնում եմ թիվ 5 -ից 15 -ի միջև և ավելացնում վերջին արժեքին: *
• Վերջապես, ես այս արժեքը տեղադրում եմ վերջին տողի ID սյունակում:
• Հաջորդը մենք կանչում ենք changeValueOnSubmit (e) գործառույթը:

* Ես ընտրեցի 5-15-ը `ապագա պիտակավորման և Google Home- ի ինտեգրման հնարավորություն տալու համար, որպեսզի թվերը այնքան մոտ չլինեն, որ կախիչներ կամ հագուստի պիտակներ կամ շտրիխ կոդեր շփոթություն առաջացնեն:

3) URL- ի արժեքը փոխելը.

var DataChange = e.namedValues ["Նյութի նկար"]; var DefaultLocation = e.namedValues ["Որտե՞ղ եք պահում հագուստի այս հոդվածը"]; var ColD = ColumnID _ ("Նյութի նկար") +1; var ColLoc = ColumnID _ ("Default Location")+1; DataChange = DataChange.toString (). փոխարինել ("բացե՞լ", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Google ձևի միջոցով լուսանկար ներկայացնելիս Google Աղյուսակներում տեղադրված URL- ը հղում է իրական փաստաթղթին: Մեր դեպքում, երբ մենք ստեղծում ենք HTML էջ, մենք ցանկանում ենք, որ հղումը լինի միայն պատկերը:
• «Բացե՞լ» -ը փոխելով: URL- ի «uc? export = view» հասցեին, փոխարենը մենք ստեղծել ենք պատկերի հղում:
• Մենք այս նոր արժեքը կրկին կտեղադրենք ընթացիկ Item Picture հղման տեղում:
• Ես նաև կետի «Լռելյայն տեղադրություն» և «Ընթացիկ գտնվելու վայրը» նույնն եմ դնում տվյալների բազայում: Սա կօգնի, երբ փորձում եմ օգտագործել իմ Լվացքի ռեժիմը:

• Մենք դրան կխորանանք հաջորդ էջում, բայց սա մեր առաջին հայացքն է իմ ստեղծած ColumnID_ () գործառույթին:

  Այս ֆունկցիան օգտագործում է սյունակների անունները այն սյունակի ամբողջ թվին թարգմանելու համար, որն օգտակար է Range կանչերի համար, որը պահանջում է սյունակի համար, այլ ոչ թե անուն:

4) SpreadsheetApp.getUI ()

• Երկրորդ պատկերում դուք կարող եք տեսնել SpreadsheetApp.getUI () - ի օգտագործումը, ինչպես այն օգտագործվում էր Google Sheet- ում Գործիքադարակի ընտրացանկ ստեղծելու համար:
• . GetUI () գործառույթը նաև օգնում է ստեղծել մոդալ թռուցիկ, որն օգտագործվում է Լվացքի ռեժիմի համար և որպես վեբ կայքի ինտերֆեյսի արագ հղում:

5) HTMLService

• Այս ծածկագրում օգտագործվում են HTMLServices- ի երկու տեսակ ՝ Կաղապար և HTMLOutput
• Կաղապարը թույլ է տալիս ծածկագիր տեղադրել HTML կոդի ներսում, այնպես որ սերվերից ստացվող տեղեկատվությունը կարող է համալրվել էջը կանչելիս:
• HTML ելքը ցուցադրում է պարզ HTML էջեր:
• Մենք ունենք նաև () մեթոդը, որը թույլ է տալիս մեզ ստեղծել բազմաթիվ HTML ֆայլեր և դրանք միավորել մեկ ձևանմուշ HTML ֆայլում ՝ ֆայլի բովանդակությունը վերադարձնելով ոչ թե տող, այլ HTML ձևաչափով:

Ես կցել եմ մի փաստաթուղթ, որը ստեղծվել է Google App Scripts Documentation- ի նման `ծանոթանալու համար, թե ինչպես է բացատրվում կոդերի և գործառույթների բացատրությունը Google Apps- ում:

Քայլ 9: Քայլ 2. Հետընտրական ծածկագիր Մաս 2 (Սերվերի զանգեր. Զանգեր)

Այժմ մենք մուտքագրել ենք Server Calls.gs: Այս գործառույթները հիմնականում օգտագործվում են HTML JavaScript- ում, այնպես որ դրանք առանձնացվել են այն ծածկագրից, որն առաջին հերթին օգտագործվում է Server Code.gs- ում տեղակայված հետևի մասում:

Նկար 1) Գլոբալ փոփոխականներ.

Նկար 2) Իրերի ձեռքբերում.

Նկար 3) fetchItemsQry

Նկար 4) ֆիլտրի տարրեր

Նկար 5) վերցնելՖիլտրերըՀրապույրով

Նկար 6) ColumnID և CacheCalls

Սրանցից յուրաքանչյուրի հետ խոսելու շատ բան կա: Եվ որպեսզի ծածկագիրը կոտրվի և բացատրվի, թե ինչ է կատարվում, ինձ մի փոքր ավելի շատ մուտքագրելու տարածք էր պետք: Կից ներկայացված է ServerCalls.gs ծածկագրի կոտրման փաստաթուղթ

Այս փաստաթուղթը ստեղծվել է Google App Scripts Documentation- ի նման և նույնիսկ հղումներ է կատարում նմանատիպ օբյեկտների:

Քայլ 10: Քայլ 3. HTML կոդ (Application.html)

HTML կոդը շատ դժգոհ է Instructable- ի երկխոսության վանդակում: Այսպիսով, խնդրում ենք հետևել վերը նշված նկարներին:

1) Application.html էջի վերնագրում մենք ստեղծում ենք վերնագիր և կանչում ենք մեր CSS.html էջը, որը պետք է բեռնվի:

*Լինելով կաղապարված HTML էջ ՝ մենք կարող ենք այս փաստաթղթին ավելացնել ավելի շատ ծածկագիր ՝ առանց ընթացիկ էկրանը չշփոթելու ՝ օգտագործելով նախկինում ներառված ներառման (էջի անվանումը) մեթոդը, որը հայտնաբերվել է Server Code.gs- ում

Այս նկարում է գտնվում նաև վերնագրի հիմնական տուփը: Այստեղ կարող եք փոխել վերնագիրը և մուտքագրել «[Ձեր անունը] զգեստապահարան» կամ ինչ որ այլ բան կցանկանայիք ճանաչել այս էջը:

2) Վերնագրի ներքևում մեր վերևի նավարկության բարն է:

Այս նավիգացիոն սանդղակը ներառում է հոդվածների բոլոր տեսակները, որոնք թվարկված են մեր Google Աղյուսակների հոդվածների թերթում:

Այս տարրերի զանգվածը բերելու համար կանչվում է ներկառուցված գործառույթ: Այնուհետև կատարվում է մի օղակ, որը ներառում է այս տարբերակներից յուրաքանչյուրը որպես ընտրացանկի կոճակ ՝ ամբողջական գործողության կոդով, այնպես որ, երբ օգտվողը կտտացնի ընտրացանկի կոճակին, համապատասխան տարրերը կհայտնվեն մարմնի տարածքում:

3) հիմնական մարմինը:

Այս մասում կա 4 բաժին: Տեքստի ելքը, կողային ֆիլտրը, հիմնական մարմնի պատկերները և JS- ն ներառում են:

Տեքստի ելքը թույլ է տալիս օգտվողին տեսնել տեքստի արագ դիտում, թե ինչ տեսակի իրեր են նրանք ներկայումս դիտում ՝ իրենց ընտրած ընտրացանկին հղում կատարելու փոխարեն:

Կողքի զտիչը պարունակում է բազմաթիվ զտիչներ, որոնք հասանելի են օգտվողի ընտրած տիպի համար: Այս զտիչներն արտացոլում են այս կատեգորիայի համար հասանելի բոլոր տարբերակները, ինչպես նաև այն կատեգորիայի արժեքի տակ ընկած քանի տարր: Այս կողագոտին համալրված է JavaScript կոդով (որը կքննարկվի հաջորդիվ):

Հիմնական տեքստը ներկայումս դատարկ է, բայց զտիչների պես այն կլցվի տարրերի տուփերով, որոնք մանրամասն նկարագրում են Նյութի ID- ն, Գույնը, Չափը և Տեղանքը `ներառված պատկերով, երբ օգտագործողը կատեգորիա է ընտրում և JavaScript ծածկագիրը համալրում է այս տարածքը:

Վերջապես ներառումները (JS), եկեք սա նայենք հաջորդ քայլին:

Քայլ 11: Քայլ 4. JavaScript կոդ (JS.html)

Եթե կարծում էիք, որ Սերվերի ծածկագիրը ծանր բաժին է, ապա ստացեք դրա բեռը:

Այստեղ մենք համատեղում ենք մեր HTML- ը և SeverCode- ը օգտվողների փոխազդեցության հետ: Itemանկացած տարր, որը կտտացված է, պետք է մշակվի այստեղ ՝ համապատասխան տվյալներ ստանալու և դրանք ընթերցելի ձևաչափով վերադարձնելու համար: Այսպիսով, եկեք նայենք մեր առաջին զանգերին.

Սցենարը կոչ է անում. Ես օգտագործում եմ 3 տարբեր գրադարաններ այս նախագծի համար. jquery, bootstrap և հատուկ bootstrap ընտրող հավելում: Այս գրադարանները թույլ են տալիս ձևակերպել օբյեկտները և ավելի հեշտ զանգեր կատարել HTML կոդի ներսում գտնվող տարրերին:

JavaScript- ի իմ հաջորդ կարևոր տողը ստորև է.

$ (փաստաթուղթ).keypress (գործառույթ (իրադարձություն) {if (event.which == '13') {event.preventDefault (); }});

Այստեղ ես անջատում եմ մուտքագրման բանալին ՝ ձևերից որևէ մեկը գործարկելուց: Ինչպես այս դեպքում, Google Web Apps- ին տրվում է միայն մեկ էջի հասցեն: Մուտքագրող մամուլը տվյալներ կավելացնի HTML հասցեին և կփորձի վերահղել օգտվողին: Անջատելով սա ՝ դուք թույլ եք տալիս, որ ձեր JavaScript ծածկագիրը կատարի ամբողջ աշխատանքը:

գործառույթը removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

գործառույթը updateDBlocation (id, value) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, արժեքը); }

Ահա երկու գործառույթ, որոնք զանգեր են կատարում Server Code.gs ֆայլին: Գիծը:

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

ունի շատ աշխատանքային մաս, բայց կմախքը արմատավորված է «google.script.run» - ից, որը HTML էջին ասում է, որ սերվերի վրա հետևյալ գործառույթն է:

• Այս ծածկագրի վերջին բիթը գործարկվող գործառույթն է: Այս օրինակում ServerRemoveFilter ()
• Ավելացնելով withSuccessHandler () ՝ HTML էջն այժմ գիտի, թե ինչ անել վերադարձված տվյալների հետ, և դա գործառույթը փակագծի միջոցով գործարկելն է:
• Նույնը վերաբերում է withFailureHandler- ին ()

Այժմ, երբ մենք խզել ենք Server Code զանգը, եկեք մի կարճ հայացք գցենք, թե ինչ է տեղի ունենում, երբ սերվերի այս զանգը հաջողվում և ձախողվում է:

function allGood (e) {console.log («Հաջողություն սերվերում»); } գործառույթը onFailure (սխալ) {$ ("#message-box"). html ("

Այս պահին անհնար է վերցնել հագուստի իրերը: ՍԽԱԼ. " + Error.message +"

");} գործառույթը FailDBU- ի թարմացում (սխալ) {$ ("#message-box "). html ("

Դուք հնարավորություն չունեք փոխելու գտնվելու վայրը: ՍԽԱԼ. " + Error.message +"

"); $ (". գտնվելու վայրը ընտրում է "). հենարան ('հաշմանդամ', 'հաշմանդամ');}

Ես ստեղծեցի շատ պարզ վահանակի տեղեկամատյան `հաջողություն նշելու համար, երբ տեղադրման գործառույթը գործարկվում է, որը կարող եք տեսնել որպես allGood ():

Սխալների հետ աշխատելիս այս երկու գործառույթները թողնում են սխալի հաղորդագրությունը, որտեղ օգտագործողը կարող է տեսնել ՝ օգտագործելով jQuery զանգը HTML օբյեկտին ՝ «message-box» ID- ով:

Հիմա անցնենք բծախնդիր աշխատանքին

Քայլ 12: Քայլ 5. JavaScript կոդի վրա սեղմեք գործողություններ (JS.html)

Վերին ցանկի տողում կան տարբերակներ յուրաքանչյուր հոդվածի տեսակի համար: Գործառույթը, որը նրանք կատարում են կտտոցով, հետևյալն է.

գործառույթը filterType (հոդված, id) {$ ("ul.navbar-nav li.active"). removeClass ("ակտիվ"); $ ("#currentArticle"). html ("// HTML ԿՈԴ ԱՅՍՏԵ");

updateSideBar = ճշմարիտ;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems («Հոդվածներ», հոդված); var newSelect = "#տիպ-"+id; $ (newSelect).addClass («ակտիվ»); $ ("#myNavbar"). removeClass ("in"); }

Այս ծածկագրում մենք կարող ենք տեսնել google.script.run- ը, որը զանգում է Սերվերին `տեղեկատվություն ստանալու համար: Այս զանգի հաջող գործառույթը updateItems () է:

ՆԿԱՐ 1 (այս ֆունկցիայի ծանր HTML ծածկագրով դժվար է պատճենել ծածկագիրը ՝ առանց այս վանդակում խառնաշփոթ երեւալու)

UpdItems () ծածկագրում մենք շատ բաներ ենք ունենում: Եվս մեկ անգամ մենք պետք է անցնենք մեզ վերադարձված օբյեկտի միջով և յուրաքանչյուր տարր ավելացնենք մեր հիմնական էջին:

HTML ծածկագիրն ավելացվում է որպես raանգվածներ ՝ ծածկագիրը կոտրելու և այն ավելի հեշտ ընթերցելու և տեսնելու համար, թե որտեղ է տեղադրվում itemData- ն:

Յուրաքանչյուր նյութի օղակում ես հեռացնում եմ այն դաշտերը, որոնք ես չեմ ցանկանում տեսնել նկարագրության մեջ, ինչպիսիք են ՝ Լռելյայն, ժամանակային նշանը և նկարի URL- ը: Ես հեռացնում եմ նկարի URL- ը նկարագրությունից, քանի որ դրա փոխարեն այն որպես href ավելացվում է պիտակի վրա: Այս տեղեկատվությունը հավաքելուց հետո այն ուղարկվում է հիմնական մարմնին ՝ օգտագործելով jQuery.append () գործառույթը:

Բոլոր տարրերը էջին ավելացվելուց հետո տարրերի այս հարցումը նորից ուղարկվում է Սերվերի կոդ ՝ տեսակավորելու և վերադարձնելու ֆիլտրի ընտրանքները, ինչպես երևում է Նկար 2 -ում:

ՆԿԱՐ 2 (կողքի սանդղակի թարմացում)

Շատ նման է updateItems () գործառույթին, մենք ևս մեկ անգամ ունենք HTML կոդերի զանգվածներ և օղակ `զտիչի բոլոր տարբերակների համար: Միակ նկատելի փոփոխությունը jQuery.selectpicker- ն է («թարմացնել»): Այս գործառույթը գալիս է սցենարների գրադարանից, որը մենք ներառել ենք վերջին քայլին: Այն թույլ է տալիս ծրագրավորողին գրել պարզ ընտրված HTML և թույլ տալ, որ գրադարանը թարմացնի այն ՝ ներառելով որոնելի գործառույթը, ինչպես նաև CSS ծածկագիրը:

ՆԿԱՐ 3 (ֆիլտրացում կողագոտու միջոցով)

Վերջապես, մենք ունենք updateFilter (formData) գործառույթը: Սա օգտագործվում է, երբ ձևը ներկայացվում է կողագոտուց: Մենք սկսում ենք jQuery ֆունկցիայի օգտագործմամբ: Եվ մենք գործընթացը նորից սկսում ենք Նկար 1 -ից:

Քայլ 13: Վերջ… վերջապես

Դե, դուք ունեք այն; ամբողջական և մանրակրկիտ բացատրություն, որը կօգնի ձեզ ստեղծել ձեր սեփական առցանց զգեստապահարան կամ օգտագործել իմ Google Scripts- ում ստեղծված ֆունկցիոնալությունը `ձեր սեփական նախագիծը ընդլայնելու համար:

Սա մի ծրագիր էր, որը ծածկագրում էր այս նախագիծը (և փաստաթղթավորում էր այս Instructable- ի միջոցով), բայց ես վայելել եմ գործընթացը և հուսով եմ, որ դուք կվայելեք արտադրանքը: Ես շատ կցանկանայի պատասխան լսել բոլոր նրանցից, ովքեր փոփոխություններ են կատարում, ինչպես ասում է Մայքլ Jordanորդանը «Առաստաղը տանիք է», և ես համաձայն եմ, որ այս հավելվածը սահմաններ չունի: