Гардеробты ұйымдастырушы: 13 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:25

Киім сатып алу ма, әлде кез келген затты қарызға алуды сұрады ма, сізде кез келген жерден шкафқа кіріп, сізде ұқсас нәрсе бар -жоғын білгіңіз келеді.

Бұл бір терезе және көптеген басқа мақсаттарға арналған. Менің гардеробты ұйымдастырушы - бұл Google парақтарының SQL дерекқоры, деректерді өңдеуге арналған Google сценарийлері және осы деректердің онлайн порталына арналған Google WebApp қосымшасы. Соңғы пайдаланушы барлық заттарды көре алады, белгілі бір нәрсені сүзе алады, заттарды қарызға алынған деп белгілей алады, кірлерін реттей алады және анама жыл сайын Рождество мерекесінде сізге сол көйлек сатып алуды тоқтатады*.

(*Кепілдік жоқ. Аналар сізге қажет немесе қажет емес нәрсені сатып алады)

Жоғарыдағы суреттегі веб -сайттың дизайнына шолу жасай отырып, таныс макетті тануға болады. Гардероб ұйымдастырушысы кез келген қарапайым киім сайты сияқты орнатылған. Бөлімдер жоғарыдан және бүйірден берілген сүзгілермен бұзылған, бұл интерфейс кездейсоқ пайдаланушыға функционалдылықпен танысады. ЖӘНЕ қолдану оңай.

1 -қадам: жеке көшірмені орнату

Бұл жобаның жеке көшірмесін құрудан бастайық.

Google Drive

Сізді осы қосымшаның қазіргі нұсқасына апару үшін жоғарыдағы сілтемені басыңыз.

Сіз бұл қалтада 3 элементті көресіз: Google формасы, Google парағы және қалта.

Google парағын тінтуірдің оң жақ түймесімен нұқыңыз және «Көшіру» түймесін басыңыз.

Бұл көшірменің орнын жеке Drive -қа орнатыңыз.

Бұл құжатты көшіргеннен кейін Google Form сіз Google Sheet жылжытқан қалтада автоматты түрде жасалады.

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

Енді сізде бұл құжаттың көшірмесі бар, оны өзіңіз жасай аласыз!

2 -қадам: Google пішініне шолу

Енді сізде бұл қосымшаның жеке нұсқасы бар, айналаға шолу жасайық.

Сіздің Google Form әр түрлі элементтерді қабылдауға арналған. Бірақ көйлек, шалбар, көйлек пен аяқ киімнің өлшемдері әр түрлі. Сондықтан сіз өзіңіздің элементіңізді тапсыратын бөлімнің негізінде осы форманың басқа бөлімі толтырылады. Менің (Ерлер мақаласының) шаблонында мен өлшемдердің 5 түрлі категориясын құрдым. (Әйелдер мақалалары үшін мына жерді басыңыз, тағы басқалары бар).

Өлшемнің әр бөлімінің астында мен жинайтын әрбір параметр үшін бірегей тақырып құрдым. Біз дерекқорда «Өлшем» атауы бар бірнеше бағандардың болуын қаламаймыз немесе біз бұл өлшемдегі киімнің қай түріне сәйкес келетінін анықтай алмаймыз.

Әр бөлімнің соңында пайдаланушы осы форманың соңғы бөлігіне бағытталады: Орналасқан жері. Мен құрғақ тазалағыштардағы заттарды, кір жуатын орындарды, олардың орнына немесе досыма қарыз алуға рұқсат еткен заттарды анықтау үшін Орналасуды қосуды таңдадым. Бұл маған ұйымшыл болуға мүмкіндік береді және ешқашан бір жерде киімімді жоғалтып алғандай сезінбеймін.

Мен басынан бастап айтқанымдай, бұл жобаны миллион түрлі түрде кеңейтуге болады. Сіз оны инвентаризацияға, дәлірек ұйымдастыру құралы немесе киімді қатаң қарызға алу үшін пайдалана аласыз. Сіз қосуға болатын өрістер мен бөлімдер шексіз, сондықтан менің пішініммен шектелмеңіз. (Әйелдер мақалалары үшін мына жерді басыңыз)

Бірнеше жеке жүктеуді бастамас бұрын, дұрыс жіберуді қамтамасыз ету үшін келесі қадамға көшейік.

3 -қадам: Google сценарийлері: (Server Code.gs) Алдымен деректер мен кодты қараңыз

Google Sheets құжатына шертсеңіз, сіз көптеген деректер бағандарын көресіз (және көрсету үшін қалдырылған кейбір жолдар). Пішінді жіберу кезінде кейбір бөлімдер өткізіп жіберіледі, бұл кейбір бағандардағы жетіспейтін мәліметтерден көрінеді. Бұл элементтердің түзетулерін жақсырақ бақылау үшін идентификатор, әдепкі орын, кім және жаңартылған сияқты қосымша бағандар қосылды.

Идентификатор өрісі осы дерекқорды айналып өту кезінде бірегей идентификаторға рұқсат беру үшін пішінді жіберген кезде құрылды. Бұл өрісті құру үшін біз Құралдар> Сценарий редакторы түймесін басу арқылы Сценарий редакторын қарастырамыз.

Сценарий редакторы ашық болғанда, сіз осы жаңа терезенің бүйірлік тақтасында 8 құжатты байқайсыз. Бұл құжаттар соңғы процесті, алдыңғы дисплейлерді және алдыңғы функцияны басқаруға көмектеседі. Біз әрқайсысына кіреміз (егер сіз тоқтап қалсаңыз), бірақ дәл қазір сервер кодын басыңыз.

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

onSubmit (e), onOpen (), doGet (), қамтиды (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Бұл функция Google Form жіберген кезде іске қосылатын бірінші функция ретінде конфигурацияланады. Әр түрлі процестердің жүруіне мүмкіндік беру үшін осы функцияның ішіне басқа функцияларды орналастыруға болады.

onOpen (e) - Бұл функция Google Sheets ашылған кезде шақырылады. Ол бағдарлама сілтемелері мен көріністеріне жылдам қол жеткізуге мүмкіндік беретін жаңа мәзір опциясын толтырады.

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 парағын бірегей идентификаторлармен толтыратын және әдепкі мәндерді орнататын жұмыс формасы бар.

Енді сіз өзіңіздің элементтеріңізді Google Form көмегімен жүктей аласыз. (Мұны жалғастырудың қажеті жоқ, себебі демо мәндері бар). Енді біз пайдаланушы интерфейсіне енеміз.

5 -қадам: Пайдаланушы интерфейсін орнату

ҚОШ КЕЛДІҢІЗ! Біз сіз қолданған интерфейске қол жеткіздік !!!

Бір қарағанда, мұнда ештеңе жоқ. Біз әлі қоңырау шалған жоқпыз. Бетті тезірек жүктеу үшін мен барлық элементтері бар бірінші бетті бұзбауды және тезірек көргіңіз келетін нәрсені басуға мүмкіндік бердім. Бұл жағдайда негізгі мазмұн өрісінде элементтер жоқ және бүйірлік тақтада сүзгілер жоқ. Біздің мәліметтер қорында не бар екенін көру үшін Барлығын басыңыз.

Біз қазір мәліметтер базасындағы әрбір элементті негізгі мазмұн өрісіне жүктедік. Сіз суреттерді, жеке куәлік нөмірлерін, түсін, өлшемдерін және орналасқан жерлерін көресіз. Орналасу өрісін дәл осы жерден жаңартуға болады! Егер сіз затты несиеге беруді шешсеңіз, сіз бұл опцияны таңдай аласыз, оны шкафқа, киім ілетін жерге немесе кір жуатын орынға қоюға болады.

Біздің бүйірлік тақтада біз жаңа сұраныстағы әрбір киімге арналған мүмкін болатын өріс бар. Бұл бүйірлік тақтада өлшемнің 20 түрлі нұсқасы бар екенін елестетіп көріңізші, бұл өте тиімді болмайды, сондықтан аксессуарларды басу арқылы іздеуді қысқартамыз.

Енді біз аксессуарларды жүктедік, бүйірлік тақтаны қараңыз. Ол тек 3 өріске реттелді, себебі бұл осы сұраудың әрбір элементіне қолданылатын параметрлер. Мен түсі бойынша сұрыптау жасаймын. Түсті басу арқылы ашылмалы терезе пайда болады. Мұнда мен қалаған түсті енгізе аламын, содан кейін оны таңдай аламын, немесе егер мен бірден опцияны көрсем, оны басамын. Мен бұл демонстрация үшін Қызыл түсті таңдадым. Осы бүйірлік тақтаның төменгі жағындағы Сүзгіні қолдану түймесін басыңыз, сонда негізгі мазмұн түс параметрі ретінде қызыл түсі бар элементтерді көрсетеді.

Мен бұл дерекқорды қарызға және кір жуатын заттарымды басқаруға көмектесетінін бұрын айтқан болатынмын. Біраз жеңілдету үшін, осы басты беттегі әр ашылмалы орынды қолмен басудың орнына мен Кір жуу режимін жасадым. Google Sheet бетіне оралыңыз және Қолданбаларды қарау астында сіз Кір жуу режимін көресіз. Бұл опция Кір жуу орны бар элементтерді көрсететін кіші модалды шығарады. Енді мен бұл элементтердің барлығын әдепкі ретінде белгілей аламын, олар оларды әдетте сақталатын орындарына орналастырады.

7 -қадам: Жоба аяқталды

ҚҰТТЫҚТАЙМЫЗ

Егер сізде жұмыс істейтін мәліметтер базасы бар элементтерді басқарғысы келетіндер болса, онлайн ұйымдастырушыға қош келдіңіз. Осы қосымшаның кодына қызығатындар үшін. Мен оны бұзып жатқанда, жабысып тұрыңыз.

*Дерекқорға өз элементтеріңіздің кем дегенде біреуін енгізгеннен кейін тест тапсырмаларын жоюға болады. (Егер сіз тоқтап қалсаңыз, мен кейінірек түсіндіремін).

8-қадам: 1-қадам: Артқы код (Server Code.gs)

Бұрын біз Server Code.gs файлын аштық, мен олардың әрқайсысының функциясын қысқарттым, себебі олардың мақсаты сіз орнатқан элементтердің әрқайсысына қызмет ету болды, бірақ қазір біз оларды кейбір функциялар мен утилиталарды бұзамыз. бұл кодты сәтті ету үшін.

1) Кестені айналдыру:

var ss = SpreadsheetApp.getActiveS spreadsheet (); var page = ss.getSheetByName («Пішін жауаптары 1»); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Бұл код Google парағын өту үшін негіз болып табылады. Мен парақты нөмірден гөрі атауымен атаймын, егер парақтар жойылса немесе функция бойынша қайта реттелсе, олар әлі де дұрыс жұмыс істей алады.
• Бұл кодта мен кестедегі барлық деректердің диапазонын ғана жинаймын.

2) жеке куәлік беру:

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 -шіден соңғы жолды аламын, себебі соңғы жол - бұл біздің жаңа мәніміз және идентификатор мәні үшін 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 _ («Элемент суреті») +1; var ColLoc = ColumnID _ («Әдепкі орын»)+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 Form арқылы жіберу кезінде Google Sheets -ке енгізілген URL - бұл нақты құжатқа сілтеме. Біздің жағдайда, біз HTML бетін құра отырып, сілтеменің тек сурет болғанын қалаймыз.
• «Ашық?» Өзгерту арқылы URL мекенжайының бөлігі «uc? export = view &» үшін біз оның орнына суретке сілтеме жасадық.
• Біз бұл жаңа мәнді ағымдағы Item Picture сілтемесінің орнына орналастырамыз.
• Мен сондай -ақ элементтің «Әдепкі орналасуы» мен «Ағымдағы орнын» дерекқордағы бір нәрсеге орнатамын. Бұл менің кір жуу режимін қолдануға тырысқанда көмектеседі.

• Біз оны келесі бетте ашамыз, бірақ бұл мен жасаған ColumnID_ () функциясына бірінші көзқарас.

  Бұл функция баған атауларын қолданады, оны бағанның бүтін санына аудару үшін пайдалы, ол атауды емес, баған нөмірін қажет етеді

4) SpreadsheetApp.getUI ()

• Екінші суретте сіз Google парағына құралдар тақтасы мәзірін жасау үшін пайдаланылатын SpreadsheetApp.getUI () қолданылуын көре аласыз.
• . GetUI () функциясы сонымен қатар кір жуу режимінде және веб -сайт интерфейсіне жылдам сілтеме ретінде қолданылатын модульдік қалқымалы терезені құруға көмектеседі.

5) HTMLService

• Бұл кодта HTMLServices екі түрі қолданылады: Үлгі және HTMLOutput
• Үлгі кодты HTML кодының ішіне енгізуге мүмкіндік береді, осылайша сервер шақырылатын ақпаратты бет шақырылған кезде толтыруға болады.
• HTML шығысы қарапайым HTML беттерін көрсетеді.
• Бізде сонымен қатар бірнеше HTML файлдарын құруға және оларды бір шаблонды HTML файлына біріктіруге мүмкіндік беретін, () әдісі бар, ол файлдың мазмұнын жолға емес, HTML форматында қайтаруға мүмкіндік береді.

Мен Google Apps -те бастапқы код пен функционалдылықтың қалай түсіндірілетінін білу үшін Google App Scripts Documentation сияқты құжатты тіркедім.

9-қадам: 2-қадам: Артқы код 2-бөлім (Server Calls.gs)

Енді біз Calls.gs серверіне кіреміз. Бұл функциялар негізінен HTML JavaScript -те қолданылады, сондықтан олар Server Code.gs сайтында орналасқан артқы жағында қолданылатын кодтан бөлінген.

Сурет 1) Жаһандық айнымалылар:

Сурет 2) заттарды алу:

3 -сурет) fetchItemsQry

Сурет 4) сүзгі элементтері

5 -сурет) fetFiltersWithQry

Сурет 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 коды осы аймақты толтырғаннан кейін суреттің элементі, түсі, өлшемі және орналасуы туралы егжей -тегжейлі мәліметтер қораптарымен толтырылады.

Соңында (JS) қамтиды, келесі қадамда осыған назар аударайық.

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

Егер сіз Сервер коды ауыр бөлім деп ойласаңыз, оны жүктеңіз.

Мұнда біз HTML мен SeverCode -ты пайдаланушылардың өзара әрекеттестігімен біріктіреміз. Тиісті деректерді алу және оны оқылатын форматта қайтару үшін басылған кез келген элемент осында өңделуі керек. Сонымен, алғашқы қоңырауларға назар аударайық:

Сценарий шақырады: Мен бұл жоба үшін 3 түрлі кітапхананы қолданамын; jquery, bootstrap және жүктеу жолағын таңдауға арналған арнайы қондырма. Бұл кітапханалар HTML кодындағы элементтерді нысандарды пішімдеуге және элементтерге оңай қоңырау шалуға мүмкіндік береді.

Менің келесі маңызды JavaScript желісі төменде:

$ (құжат).keypress (функция (оқиға) {if (event.which == '13') {event.preventDefault (); }});

Мұнда мен кез келген форманы іске қосудан enter пернесін өшіремін. Бұл жағдайда Google веб -қосымшаларына тек бір беттік мекенжай тағайындалады. Енгізу түймесі деректерді HTML мекенжайына қосады және пайдаланушыны қайта бағыттауға тырысады. Мұны өшіру арқылы сіз JavaScript кодыңызға барлық жұмысты орындауға рұқсат бересіз.

removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters () функциясы; }

updateDBlocation функциясы (идентификатор, мән) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (идентификатор, мән); }

Міне, Server Code.gs файлына қоңырау шалатын екі функция. Сызық:

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

оның көптеген жұмыс бөліктері бар, бірақ қаңқасы «google.script.run» -дан алынған, ол HTML бетіне келесі функция серверде екенін айтады.

• Бұл кодтың соңғы биті - бұл іске қосылатын функция. Бұл мысалда ServerRemoveFilter ()
• WithSuccessHandler () қосу арқылы HTML беті енді қайтарылатын деректермен не істеу керектігін біледі және бұл функцияны жақшамен бірге іске қосады.
• Бұл forFailureHandler () үшін де қолданылады

Енді біз Server Code қоңырауын бұздық, бұл серверлік қоңырау сәтті және сәтсіз болған кезде не болатынын қысқаша қарастырайық.

allGood (e) функциясы {console.log («Сервердегі сәттілік»); } функциясы onFailure (қате) {$ («#хабар-қорап»). html («

Қазіргі уақытта киімдерді алу мүмкін емес. ҚАТЕ: « + error.message +»

«);} функциясы FailDBUpdate (қате) {$ (»#хабар-қорап «). html (»

Орынды өзгертуге сіздің рұқсатыңыз жоқ. ҚАТЕ: « + error.message +»

«); $ (». location-selects «). prop ('ажыратылған', 'ажыратылған');}

Мен allGood () ретінде көруге болатын орналасу функциясы іске қосылған кезде сәттілікті білдіретін өте қарапайым консоль журналын жасадым.

Қателерді өңдеу кезінде бұл екі функция «хабарлама терезесі» идентификаторы бар HTML нысанына jQuery қоңырауының көмегімен пайдаланушы көре алатын қате туралы хабарды шығарады.

Енді күрделі жұмысқа көшейік

12-қадам: 5-қадам: JavaScript кодын басу әрекеттері (JS.html)

Жоғарғы мәзір жолағында әр мақала түріне арналған опциялар бар. Олар басу кезінде іске қосылатын функция:

filterType функциясы (мақала, идентификатор) {$ («ul.navbar-nav li.active»). removeClass («белсенді»); $ («#currentArticle»). html («// HTML КОДЫ МЫНА ЖЕРДЕ»);

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 -СУРЕТ (бүйірлік тақтаны жаңарту)

UpdateItems () функциясына өте ұқсас, бізде тағы да HTML кодының жиымдары және барлық сүзгі опциялары үшін цикл бар. Жалғыз байқалатын өзгеріс - jQuery.selectpicker («жаңарту»). Бұл функция біз соңғы қадамға енгізген сценарийлер кітапханасынан келеді. Бұл бағдарламашыға қарапайым HTML таңдауға және кітапханаға оны іздеуге болатын функцияны, сондай -ақ CSS кодын қосуға мүмкіндік береді.

3 -СУРЕТ (бүйірлік тақта арқылы сүзу)

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

13 -қадам: Соңы … ақырында

Міне, сізде бар; жеке гардеробыңызды орнатуға немесе жеке жобаңызды кеңейту үшін Google Scripts -те жасалған мүмкіндіктерді пайдалануға көмектесетін толық және толық түсініктеме.

Бұл жобаны кодтау (және осы нұсқаулық арқылы құжаттау) саяхат болды, бірақ мен бұл процесті ұнадым және сізге өнім ұнайтынына сенемін. Мен Майкл Джордан «төбе - бұл шатыр» деп айтатындай, түзетулер енгізетін кез келген адамнан жауап алғым келеді және мен бұл қосымшаның шектеулері жоқ екеніне келісемін.