Гардеробдун уюштуруучусу: 13 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:40

Кийимдерди сатып алуу же ар дайым кандайдыр бир буюмду карызга алуу суранычы менен, сиз каалаган убакта шкафыңыздын ичине кирип, окшош нерсеңиз бар экенин билгиңиз келет.

Бул бирдиктүү терезе жана башка көптөгөн максаттар үчүн кеңири. My Wardrobe Organizer - бул Google Sheetsтин SQL маалымат базасы, маалыматтарды иштетүү үчүн Google Scriptтери жана бул маалыматтарга онлайн портал үчүн Google WebAppтын айкалышы. Акыркы колдонуучу бардык нерселерди көрө алат, белгилүү бир нерсени чыпкалайт, насыяга алынган деп белгилейт, кирлерин башкарат жана апама жыл сайын Рождество үчүн бир көйнөк сатып берүүнү токтото алат*.

(*Кепилдик жок. Энелер каалаган нерсесин сизге керекпи же жокпу сатып алышат)

Жогорудагы сүрөттөгү веб -сайттын дизайнына тез көз чаптырып, тааныш макетти таануу мүмкүн. Гардеробдун уюштуруучусу кадимки кийим веб -сайты сыяктуу орнотулган. Жогорудагы бөлүмдөр жана капталында берилген чыпкалар тарабынан талкаланган бул интерфейс жөнөкөй колдонуучунун иштеши менен таанышууга алып келет. ЖАНА колдонуу үчүн жөнөкөй.

1 -кадам: Өз көчүрмөсүн орнотуу

Келгиле, бул долбоордун жеке көчүрмөсүн түзүүдөн баштайлы.

Google Drive

Бул колдонмонун учурдагы версиясына жетүү үчүн жогорудагы Шилтемени басыңыз.

Сиз бул папкада 3 нерсени көрөсүз: Google Form, Google Sheet жана Папка.

Google Барагын оң баскыч менен чыкылдатып, Көчүрүү жасоону басыңыз.

Бул көчүрмөнүн жайгашкан жерин жеке Driveыңызга коюңуз.

Бул документти көчүргөндөн кийин, Google Формасы Google Барагын жылдырган папкада автоматтык түрдө түзүлөт.

Папканы түзүү үчүн (бул нерсенин сүрөттөрүнүн жүктөөлөрүн чогултуу үчүн керек), көчүрүлгөн Google формасын чыкылдатыңыз жана жүктөө үчүн папканын жайгашкан жерин калыбына келтирүүңүздү суранат.

Сизде бул документтин көчүрмөсү бар, өзүңүз үчүн иштейсиз!

2 -кадам: Google Формасына Жалпы Сереп

Эми бул колдонмонун өз версиясы бар болгондон кийин, айлананы карап көрөлү.

Сиздин Google Формаңыз ар кандай нерселерди кабыл алуу үчүн орнотулган. Бирок көйнөктөр, шымдар, көйнөктөр жана бут кийимдердин өлчөмү боюнча ар кандай чектөөлөр бар. Демек, бул форманын башка бөлүмү сиз предметиңизди берген бөлүмдүн негизинде толтурулат. Менин (Эркек макаланын) шаблонунда мен 5 түрдүү размер категориясын түздүм. (Аялдардын макалалары үчүн бул жерди басыңыз, дагы көптөгөн нерселер бар).

Ар бир өлчөө бөлүмүнүн астында, мен чогулта турган ар бир параметр үчүн уникалдуу аталышты койдум. Биз маалымат базабызда "Өлчөмү" деген аталыштагы бир нече мамычалардын болушун каалабайбыз же бул өлчөмдөгү кийимдин кайсы түрүнө тиешелүү экенин аныктай албайбыз.

Ар бир бөлүмдүн аягында колдонуучу бул форманын акыркы бөлүгүнө багытталат: Жайгашкан жери. Мен жеке эле Химиялык тазалагычтардагы, кир жуучу жайдагы, алардын ордуна же досум карызга берген нерселерди аныктоо үчүн Жайгашкан жерди кошууну чечтим. Бул мага уюшкандыкта болууга жана бир жерден кийимимди сагынып жүргөндөй сезбөөгө мүмкүнчүлүк берет.

Мен башынан эле айткандай, бул долбоорду миллиондогон түрдүү жолдор менен кеңейтүүгө болот. Сиз аны инвентаризация үчүн, тагыраак уюштуруу куралы же кийимди карызга алуу үчүн колдоно аласыз. Сиз кошо ала турган талаалар жана бөлүмдөр чексиз, андыктан менин формамдагылар менен чектелбеңиз. (Аялдардын макалалары үчүн бул жерди басыңыз)

Бир нече жеке нерселериңизди жүктөөдөн мурун, туура тапшырууну камсыз кылуу үчүн кийинки кадамга өтөлү.

3 -кадам: Google Скрипттери: (Server Code.gs) Адегенде Маалыматтарга жана Кодго караңыз

Google Барактар документине чыкылдатуу менен, сиз көптөгөн маалымат тилкелерин көрөсүз (жана көрсөтүү үчүн калтырылган кээ бир саптар). Форма тапшыруу учурунда кээ бир бөлүмдөр өткөрүлүп жиберилет, бул кээ бир мамычалардагы дайындардын жоктугунан көрүнүп турат. Бирок бул элементтердин түзөтүүлөрүн жакшыраак көзөмөлдөө үчүн ID, Default Location, Who, and Updated сыяктуу кошумча мамычалар кошулду.

Бул маалымат базасын кыдырууда уникалдуу идентификаторго уруксат берүү үчүн форманы тапшырганыңызда ID талаасы түзүлдү. Бул талааны түзүү үчүн, Куралдар> Сценарий редакторун чыкылдатуу менен Скрипт редакторун карап чыгабыз.

Скрипт редактору ачык болгондо, сиз бул жаңы терезенин каптал тилкесинде 8 документти байкайсыз. Бул документтер арткы процессти, алдыңкы дисплейди жана алдыңкы функцияны башкарууга жардам берет. Биз ар бирине секиребиз (эгерде сиз жабышсаңыз), бирок азыр Сервер кодун чыкылдатыңыз.

Server Code.gs файлында көптөгөн функциялар бар:

onSubmit (e), onOpen (), doGet (), камтыйт (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Бул функция Google Формасы тапшырылганда иштей турган биринчи функция катары конфигурацияланат. Сиз көптөгөн башка процесстерге жол берүү үчүн бул функцияга башка функцияларды койсоңуз болот.

onOpen (e) - Бул функция Google Барактар ачылганда чакырылат. Бул колдонмонун шилтемелерине жана көрүнүштөрүнө тез жетүү үчүн жаңы менюнун вариантын толтурат.

doGet ()- Бул функция Web App дарегине чалууда чакырылган. Колдонуучу жарыяланган Желе Колдонмосун карап чыкканда, бул код ошол баракка эмнени көрсөтүү керектигин айтып берет. Бул учурда, бул Application.html документи.

include (fileName) - Бул функция HTML баракчаларынын ичинде башка документти окуу жана алардын мазмунун башка беттин ичинде туура HTML форматына киргизүү үчүн колдонулат. Биз муну CSS.html жана JS.html файлдарыбыз үчүн колдонобуз.

openApplication () жана openLaundryApp () - Бул функциялар колдонуучу Google Sheet куралдар тилкесине кошулган меню баскычтарын басканда иштей турган кодду камтыйт.

changeValueOnSubmit (e) жана setIDOnSubmit (e)- Бул азыр биз карай турган функциялар. Алар форма алгач тапшырылганда, айрым талааларды демейки маанилер менен жаңыртуу үчүн жооптуу.

4 -кадам: OnFormSubmit иштетүү

Бул эки функция, changeValueOnSubmit (e) жана setIDOnSubmit (e), колдонуучунун форма тапшыруу аракетине байланыштуу болушу керек. Бул үчүн биз триггерди иштетишибиз керек.

Биз Түзөтүү> Учурдагы долбоордун триггерлерин басып, триггерди иштетебиз. Бул Google Developer Hub ачат.

Триггер тактасынын төмөнкү оң бурчунда Триггер кошуу баскычы бар. Бул жерди басыңыз.

Эми биз форма тапшырылганда иштей турган функцияны орнотобуз. Биздин учурда менде onSubmit () функциясынын ичине койгон бир нече функциялар бар (changeValueOnSubmit (e) жана setIDOnSubmit (e)), ошондуктан мен 1 триггерди гана орнотушум керек. Ошондуктан, биз onSubmit () тандап, бул триггерди форма тапшырууда иштетүү үчүн коёбуз.

Азыр бизде Google Sheetти уникалдуу идентификаторлор менен толтура турган жана демейки маанилерди орнотуучу жумушчу форма бар.

Эми Google Формасын колдонуп, өзүңүздүн нерселериңизди жүктөй аласыз. (Муну улантуунун кажети жок, анткени демо маанилер мурунтан эле бар). Эми биз колдонуучу интерфейсине киребиз.

5 -кадам: Колдонуучу интерфейсин орнотуу

КОШ КЕЛДИҢИЗ! Биз акыры сиз келген бөлүккө жеттик, Колдонуучу интерфейси !!!!

Бир караганда, бул жерде эч нерсе жок. Азырынча эч кандай чала элекпиз. Баракты тезирээк жүктөө үчүн, мен баардык нерселериң менен биринчи баракка чалдыкпоону жана тезирээк көргүң келген нерсени чыкылдатууну чечтим. Бул ушундай болгондуктан, негизги мазмун талаасында эч нерсе жок жана каптал тилкесинде чыпкалар жок. Биздин базада эмне бар экенин көрүү үчүн Баарын чыкылдатыңыз.

Биз азыр базабыздагы ар бир нерсени негизги мазмун талаасына жүктөдүк. Сиз сүрөттөрдү, ID номерлерин, түсүн, өлчөмдөрүн жана жайгашкан жерлерин көрөсүз. Жайгашуу талаасы так ушул жерден жаңыртылышы мүмкүн! Эгерде сиз бул нерсени тандай турган нерсени карызга берүүнү чечсеңиз, аны шкафка, шкафка же кир жуучу жайга койсоңуз болот.

Жана биздин тилкеде биз жаңы сурообуздагы ар бир кийим үчүн мүмкүн болгон талаага ээбиз. Элестетип көрүңүз, бул каптал тилкесинде 20 түрдүү өлчөмдөр бар, бул анча эффективдүү болбойт, андыктан аксессуарларды чыкылдатуу менен издөөбүздү тарыталы.

Эми биз Аксессуарларды жүктөгөндөн кийин, каптал тилкесин караңыз. Бул 3 талаага гана ылайыкташтырылган, анткени булар бул суроодогу ар бир пунктка тиешелүү болгон параметрлер. Мен түсү боюнча бир түр кылам. Түстү басуу менен, ачылуучу кутуча пайда болот. Бул жерде мен каалаган түсүмдү терип, анан тандап алам, же мен дароо менин вариантымды көрсөм, аны жөн эле басам. Мен бул демонстрация үчүн Кызылды тандап алдым. Бул каптал тилкенин ылдый жагындагы Чыпканы колдонуу баскычын чыкылдатыңыз жана негизги мазмун сизге түс параметри катары Кызыл түскө ээ болгон нерселерди көрсөтүү менен жаңыртылат.

Мен мурда бул маалымат базасы кредитке жана кир жууган нерселеримди башкарууга жардам берерин айттым. Аны бир аз жеңилдетүү үчүн, бул башкы беттеги ар бир ачылуучу жерди кол менен чыкылдатуунун ордуна, мен кир жуучу режимди түздүм. Google Барагы барагына кайтыңыз жана Колдонмолордун Көрүнүшү астында Кир жуу режимин көрөсүз. Бул параметр Кир жуучу жайгашкан нерселерди гана көрсөтүүчү кичирээк модалды тартат. Мен азыр бул нерселердин бардыгын Демейки деп белгилей алам, алар аларды кадимкидей сакталган жерлерине кайтарышат.

7 -кадам: Долбоор аяктады

КУТТУКТАЙМ

Сиздин нерселериңизди башкарууну жумушчу базасы менен каалагандар үчүн, онлайн уюштуруучусуна кош келиңиз. Бул колдонмонун артындагы кодго кызыккандар үчүн. Мен аны талкалап жатканда, токтоп туруңуз.

*Сиз тесттик тапшырмаларды жок кылсаңыз болот, СИЗ жок дегенде өз нерселериңизди маалымат базасына киргизгенден кийин. (Туура айтсаңыз, кийин түшүндүрөм).

8-кадам: 1-кадам: Back-End Code (Server Code.gs)

Буга чейин биз Server Code.gs файлын ачканбыз, мен алардын ар биринин функциясын тез аткарып бердим, анткени алардын максаты сиз жөн гана орноткон нерселердин ар бирине кызмат кылуу болчу, бирок азыр биз аларды аталган функциялар менен утилиттердин айрымдарын бузабыз. бул кодду ийгиликтүү кылуу үчүн.

1) Таблицада өтүү:

var ss = SpreadsheetApp.getActiveS spreadsheet (); var var = ss.getSheetByName ("Форма жооптору 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Бул код Google Sheet аркылуу өтүү үчүн негиз болуп саналат. Мен баракты номерге эмес, атка чакырам, эгер баракчалар функциясы боюнча өчүрүлсө же кайра иретке келтирилсе дагы деле туура иштеши мүмкүн.
• Бул коддо мен столдогу бардык маалыматтардын диапазонун гана чогултуп жатам.

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

• Мен мурун демо маанилерин колдонуучу өзү үчүн жок дегенде бир баалуулукту тапшырганга чейин столдо калтырууну суранган элем. Бул Auto ID генератору толтуруу үчүн маалымат базасындагы акыркы мааниге таянгандыктан болот.
• Мен акыркы 2ден акыркы катарга чейин алып келем, анткени акыркы сап - бул биздин жаңы маанибиз жана ID мааниси үчүн 1 -тилке.
• Мен анда туш келди 5тен 15ке чейин санды жаратам жана аны акыркы мааниге кошом. *
• Акыры мен бул маанини акыркы саптын ID тилкесине жайгаштырам.
• Андан кийин changeValueOnSubmit (e) функциясын чакырабыз.

* Мен келечектеги энбелгилерди жана Google Home интеграциясына уруксат берүү үчүн 5-15ти тандадым, андыктан сандар илгичтерде же кийим тегдеринде же штрих-коддордо башаламандыкты жаратат.

3) URL баасын өзгөртүү:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Кийимдин бул макаласын кайда сактайсыз?"]; var ColD = ColumnID _ ("Item Picture") +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);

• Google Формасы аркылуу сүрөт тапшырууда Google Барактарына киргизилген URL чыныгы документке шилтеме болуп саналат. Биздин учурда, биз HTML баракчасын түзүп жатканда, шилтеме жөн эле сүрөт болушун каалайбыз.
• "Ачыкпы?" Өзгөртүү менен URLдин бир бөлүгү "uc? export = view &" үчүн биз анын ордуна сүрөттүн шилтемесин түздүк.
• Биз бул жаңы баалуулукту учурдагы Item Picture шилтемесинин ордуна жайгаштырабыз.
• Мен ошондой эле "Default Location" жана "Current Location" пунктун ошол эле нерсеге коюп жатам. Бул менин кир жуучу режимимди колдонууга аракет кылганда жардам берет.

• Биз ага кийинки бетте киребиз, бирок бул мен түзгөн ColumnID_ () функциясына биринчи көз карашыбыз.

  Бул функция Колоннанын Аталыштарын колдонуп, аны мамычанын бүтүн санына которот, бул диапазонго чалуу үчүн пайдалуу, ал аталыштын ордуна мамычанын номерин талап кылат

4) SpreadsheetApp.getUI ()

• Экинчи сүрөттө SpreadsheetApp.getUI () колдонулушун көрө аласыз, анткени ал Google Барагына Саймандар панелинин менюсун түзүүдө колдонулган.
• . GetUI () функциясы ошондой эле кир жуучу режимде жана веб -сайт интерфейсине тез шилтеме катары колдонулуучу модалдык калкыма терезени түзүүгө жардам берет.

5) HTMLService

• Бул коддо HTMLServicesтин эки түрү колдонулат: Template жана HTMLOutput
• Калып HTML кодунун ичине кодду киргизүүгө мүмкүндүк берет, андыктан барактан чалуу учурунда серверден келген маалыматты толтурууга болот.
• HTML Output жөнөкөй HTML барактарын көрсөтөт.
• Бизде камтыйт () ыкмасы бар, ал бизге бир нече HTML файлдарын түзүүгө жана файлдын мазмунун сапка эмес, HTML форматына кайтарып, аларды бир калыпталган HTML файлына бириктирүүгө мүмкүндүк берет.

Мен булак коду жана функциялары Google Apps ичинде кантип түшүндүрүлгөнү менен таанышуу үчүн Google App Scripts Documentation сыяктуу орнотулган документти тиркеп койдум.

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

Эми биз Server Calls.gs кирдик. Бул функциялар негизинен HTML JavaScriptте колдонулат, андыктан алар Server Code.gs сайтында жайгашкан арткы учунда колдонулган коддон ажыратылган.

Сүрөт 1) Глобалдык өзгөрмөлөр:

Сүрөт 2) пункттарды алуу:

Сүрөт 3) fetchItemsQry

Сүрөт 4) чыпкалар

Сүрөт 5) fetchFiltersWithQry

Сүрөт 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 табылган мурда айтылган (pageName) ыкмасын колдонуу менен учурдагы экранды бузбастан, бул документке көбүрөөк код кошо алабыз.

Негизги баш кутуча дагы ушул сүрөттө. Сиз бул жердин башын өзгөртүп, "[Сиздин атыңыздын] гардеробун" же бул баракты тааныгыңыз келген башка нерсени киргизсеңиз болот.

2) Төмөндө баштын астында биздин эң жогорку багыттоо тилкеси жайгашкан.

Бул навигация тилкеси Google Барактардын ичиндеги Макалалар баракчасында көрсөтүлгөн бардык макалалардын түрлөрүн камтыйт.

Бул элементтердин массивин алуу үчүн киргизилген функция чакырылат. Андан кийин, бул варианттардын ар бирин меню баскычы катары камтуу үчүн, бир код иштейт, андыктан колдонуучу меню баскычын чыкылдатканда, тийиштүү нерселер дене аймагында көрүнөт.

3) Негизги дене.

Бул бөлүктө 4 порция бар. Текстти чыгаруу, каптал тилкесинин чыпкасы, негизги дене сүрөттөрү жана JS камтыйт.

Тексттин чыгышы колдонуучуга алар тандап алган меню вариантына кайрылуунун ордуна, учурда карап жаткан нерселердин текстинин тез көрүнүшүн көрүүгө мүмкүнчүлүк берет.

Каптал тилкесинин чыпкасы колдонуучу тандаган нерсенин түрү үчүн жеткиликтүү болгон көптөгөн чыпкаларды камтыйт. Бул чыпкалар бул категория үчүн жеткиликтүү болгон бардык варианттарды, ошондой эле канча категория ошол категорияга кирет. Бул каптал тилкеси JavaScript коду менен толтурулган (бул кийинкиде талкууланат).

Негизги дене учурда бош, бирок чыпкалар сыяктуу эле, колдонуучу категорияны жана JavaScript коду бул жерди толтургандан кийин, анын IDси, түсү, өлчөмү жана жайгашкан жери сүрөттөлгөн пункт кутучалары менен толтурулат.

Акыр -аягы, камтыйт (JS), Келгиле, бул кийинки кадамда карап көрөлү.

11 -кадам: 4 -кадам: JavaScript коду (JS.html)

Эгерде сиз Server Code оор бөлүм деп ойлосоңуз, анда бул жүктү алыңыз.

Бул жерде биз HTML менен SeverCodeду колдонуучулардын өз ара аракети менен бириктиребиз. Тиешелүү маалыматтарды алуу жана окула турган форматта кайтаруу үчүн, чыкылдатылган ар бир нерсе бул жерде иштелип чыгышы керек. Ошентип, биринчи чалууларыбызды карап көрөлү:

Сценарий чакырат: Мен бул долбоор үчүн 3 башка китепкананы колдонуп жатам; jquery, bootstrap жана атайын bootstrap тандоо кошумча. Бул китепканалар объекттерди форматтоого жана HTML кодунун ичиндеги элементтерге жеңилирээк чалууларга мүмкүнчүлүк берет.

JavaScriptтин кийинки маанилүү линиясы төмөндө:

$ (документ).keypress (функция (окуя) {if (event.which == '13') {event.preventDefault (); }});

Бул жерде мен enter ачкычын формалардын бирин иштетүүдөн ажыратып жатам. Бул учурда, Google Желе Колдонмолоруна алардын бир барак дареги гана ыйгарылат. Enter баскычы HTML дарегине маалыматтарды кошуп, колдонуучуну кайра багыттоого аракет кылат. Муну өчүрүү менен сиз JavaScript кодуңузга бардык иштерди аткарууга уруксат бересиз.

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

updateDBlocation функциясы (id, маани) {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 чалуусун бузуп койдук, келгиле, бул сервердик чалуу ийгиликтүү жана ийгиликсиз болгондо эмне болорун карап көрөлү.

allGood (e) функциясы {console.log ("Сервердеги ийгилик"); } onFailure функциясы (ката) {$ ("#билдирүү кутусу"). html ("

Азырынча Кийимдерди алуу мүмкүн эмес. КАТА: " + error.message +"

");} FailDBUpdate функциясы (ката) {$ ("#билдирүү кутусу "). html ("

Сиз жайгашкан жерди өзгөртүүгө мүмкүнчүлүгүңүз жок. КАТА: " + error.message +"

"); $ (". location-selects "). prop ('ажыратылган', 'өчүрүлгөн');}

Мен allGood () катары көрө турган жайгашуу функциясы иштетилгенде ийгиликке жетүү үчүн абдан жөнөкөй консол журналын түздүм.

Каталарды иштетүүдө бул эки функция ката билдирүүсүн чыгарат, анда колдонуучу "билдирүү кутусунун" идентификатору менен HTML объектине jQuery чалуусун колдонуп көрө алат.

Эми келгиле, түйшүктүү ишке

12-кадам: 5-кадам: JavaScript Code-Click Actions (JS.html)

Жогорку меню тилкесинде ар бир макаланын түрү үчүн параметрлер бар. Алар чыкылдатуу менен иштейт:

filterType функциясы (макала, id) {$ ("ul.navbar-nav li.active"). removeClass ("активдүү"); $ ("#currentArticle"). html ("// HTML CODE BERE");

updateSideBar = чын;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Макалалар", макала); var newSelect = "#type-"+id; $ (newSelect).addClass ("активдүү"); $ ("#myNavbar"). removeClass ("in"); }

Биз бул коддон бизде маалыматты алуу үчүн Серверге чалган google.script.run бар экенин көрө алабыз. Бул чалуу үчүн ийгилик функциясы updateItems ().

СҮРӨТ 1 (бул функциянын ичиндеги оор HTML коду менен бул кутуда башаламандык пайда болбостон, кодду так көчүрүү кыйын)

UpdateItems () кодунда бизде көп нерселер болуп жатат. Дагы бир жолу бизге кайтарылган Объект аркылуу өтүшүбүз керек жана ар бир нерсени башкы денебиздин барагына кошушубуз керек.

HTML коду массивдер катары кодду бузуп, окууну жеңилдетүү жана itemData кайда салынып жатканын көрүүгө кошулат.

Ар бир нерсенин укуругунда, мен сүрөттөмөдө көргүм келбеген талааларды алып салам, мисалы Демейки, убакыт белгиси жана сүрөт URL. Сүрөттүн URL'ин сүрөттөмөдөн алып салам, анткени анын ордуна href катары тегге кошулуп жатат. Бул маалымат чогултулгандан кийин, jQuery.append () функциясын колдонуу менен негизги органга жөнөтүлөт.

Бардык нерселер баракка кошулгандан кийин, бул суроо суроо 2 -сүрөттө көрүнгөндөй чыпкалоо параметрлерин иреттөө жана кайтаруу үчүн кайрадан Сервер кодексине жөнөтүлөт.

СҮРӨТ 2 (SideBar жаңыртылып жатат)

UpdateItems () функциясына абдан окшош, биз дагы бир жолу HTML кодунун массивдерине жана чыпканын бардык варианттары үчүн циклге ээбиз. Бир гана байкалаарлык өзгөрүү - jQuery.selectpicker ('refresh'). Бул функция биз акыркы кадамга киргизген скрипт китепканасынан келет. Бул программистке жөнөкөй тандалган HTML жазууга жана китепканага аны издөө функциясын, ошондой эле CSS кодун кошуу үчүн жаңыртууга мүмкүнчүлүк берет.

3 -СҮРӨТ (каптал тилкеси менен чыпкалоо)

Акырында бизде updateFilter (formData) функциясы бар. Бул форма каптал тилкесинен тапшырылганда колдонулат. Биз jQuery функциясын колдонуу менен баштайбыз.serializeArray () бул биздин учурда формада аныкталган элементтин HTML кодун окуйт жана серверге жөнөтүлө турган саптагы маанилерди кайтарат. Жана биз процессти 1 -сүрөттөн кайра баштайбыз.

13 -кадам: Акыр ….акыры

Мынакей, сенде бар; толук жана кылдат түшүндүрмөсү, сиз өзүңүздүн жеке онлайн гардеробуңузду орнотууга же Google Scriptтеримде түзүлгөн мүмкүнчүлүктү өз долбооруңузду кеңейтүүгө жардам берет.

Бул бул долбоорду коддоочу саякат болду (жана бул Нускамалык аркылуу документтештирүү), бирок мен бул процесстен ырахат алдым жана сизге продукт жагат деп ишенем. Майкл Джордан "Шып - бул чатыр" деп айткандан кийин, мен оңдоолорду киргизгендерден жооп алгым келет жана бул колдонмонун чеги жок экенине кошулам.