Shkaf tashkilotchisi: 13 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:25

Kiyim -kechak xarid qilyapsizmi yoki har doim biror narsani qarzga olishingizni so'rashganingizda, siz xohlagan paytingizda, shkafga har qanday joydan kirsangiz, shunga o'xshash narsangiz bor yoki yo'qligini bilib olishingiz mumkin.

Bu bitta oyna va boshqa maqsadlar uchun keng. Mening shkaf tashkilotchim - bu Google jadvallarining SQL ma'lumotlar bazasi, ma'lumotlarni qayta ishlash uchun Google skriptlari va ushbu ma'lumotlarga onlayn portal uchun Google WebApp birikmasidir. Oxirgi foydalanuvchi hamma narsani ko'rishi, ma'lum bir narsani filtrlashi, narsalarni qarzga qo'yilgan deb belgilashi, kirlarini boshqarishi va har yili Rojdestvo uchun sizga bir xil ko'ylak sotib olishini to'xtatishi mumkin*.

(*Kafolat yo'q. Onalar xohlagan narsalarini sizga kerak bo'ladimi -yo'qmi sotib oladi)

Yuqoridagi rasmdagi veb -sayt dizayniga tez nazar tashlasangiz, tanish tartibni tanib olishingiz mumkin. Shkafni tartibga soluvchi har qanday oddiy kiyim -kechak veb -sayti kabi o'rnatiladi. Yuqoridagi bo'limlar va yon tomonda joylashgan filtrlar tomonidan buzilgan ushbu interfeys oddiy foydalanuvchiga funktsional imkoniyatlar bilan tanishtiradi. VA undan foydalanish oson.

1 -qadam: O'z nusxasini o'rnatish

Bu loyihaning o'z nusxasini yaratish bilan boshlaylik.

Google Disk

Sizni ushbu ilovaning hozirgi versiyasiga olib borish uchun yuqoridagi havolani bosing.

Siz ushbu papkada 3 ta narsani ko'rasiz: Google formasi, Google varaqasi va papka.

Google sahifasini o'ng tugmasini bosing va nusxa ko'chirish -ni bosing.

Bu nusxaning joylashuvini shaxsiy diskka o'rnating.

Ushbu hujjatni nusxalashdan so'ng, Google Formasi avtomatik ravishda siz Google Sheet ko'chirgan papkada yaratiladi.

Papkani yaratish uchun (bu rasmlarning yuklanishini yig'ish uchun kerak), nusxalangan Google formasini bosing va yuklash uchun papkaning o'rnini tiklashni so'raydigan ko'rsatma paydo bo'ladi.

Sizda ushbu hujjatning nusxasi bor, u bilan ishlashingiz mumkin!

2 -qadam: Google formasiga umumiy nuqtai

Endi sizda ushbu ilovaning o'z versiyasi bor, atrofga nazar tashlaylik.

Sizning Google formangiz har xil turdagi narsalarni qabul qilish uchun sozlangan. Biroq, ko'ylaklar, shimlar, ko'ylaklar va poyabzallarning o'lchamlari har xil. Shuning uchun, siz o'z bo'limingizni topshirgan bo'limga asoslanib, ushbu shaklning boshqa bo'limi to'ldiriladi. Mening (Erkak Maqolasi) shablonida men 5 xil o'lchamli toifalarni yaratdim. (Ayollar maqolalari uchun bu erni bosing, yana ko'p narsalar bor).

Har bir o'lchov bo'limi ostida men yig'adigan har bir parametr uchun o'ziga xos sarlavha qo'ydim. Ma'lumotlar bazamizda "O'lcham" nomli bir nechta ustunlar bo'lishini xohlamaymiz yoki bu kiyimning qaysi turiga tegishli ekanligini aniqlay olmaymiz.

Har bir bo'lim oxirida foydalanuvchi ushbu shaklning oxirgi qismiga yo'naltiriladi: Manzil. Men shaxsan men Kimyoviy tozalash vositalaridagi kirlarni, ularning o'rnini yoki do'stim qarz olishga ruxsat bergan narsalarni aniqlash uchun Manzil qo'shishni tanladim. Bu menga tartibli bo'lishga imkon beradi va hech qachon kiyimimni biron joyda etishmayotganimni his qilmayman.

Boshidan aytib o'tganimdek, bu loyihani million xil usulda kengaytirish mumkin. Siz uni inventarizatsiya qilish, aniqroq tashkil qilish vositasi yoki kiyimni qat'iy qarz olish uchun ishlatishingiz mumkin. Siz qo'shishingiz mumkin bo'lgan maydonlar va bo'limlar cheksizdir, shuning uchun mening formamdagi narsalar bilan cheklanib qolmang. (Ayollar maqolalari uchun bu erni bosing)

O'zingizning bir nechta narsalarni yuklashni boshlashdan oldin, to'g'ri topshirishni ta'minlash uchun keyingi bosqichga o'tamiz.

3 -qadam: Google skriptlari: (Server Code.gs) Avval ma'lumotlar va kodga qarang

Google Sheets hujjatiga bosganingizda, siz ko'plab ma'lumotlar ustunlarini ko'rasiz (va ko'rsatish uchun qoldirilgan qatorlar). Formani topshirish paytida ba'zi bo'limlar o'tkazib yuboriladi, bu ba'zi ustunlardagi etishmayotgan ma'lumotlardan ko'rinadi. Ammo bu elementlarning tahririni yaxshiroq kuzatish uchun ID, Standart manzil, Kim va Yangilangan kabi qo'shimcha ustunlar qo'shilgan.

Ma'lumotlar bazasi bo'ylab o'tishda yagona identifikatorga ruxsat berish uchun siz ariza topshirganingizda ID maydoni yaratiladi. Ushbu maydonni yaratish uchun biz asboblar> skript muharriri -ni bosish orqali skript muharririni ko'rib chiqamiz.

Skript muharriri ochiq bo'lsa, siz ushbu yangi oynaning yon panelida 8 ta hujjatni ko'rasiz. Bu hujjatlar orqadagi jarayonni, oldingi displeylarni va oldingi funktsiyalarni boshqarishga yordam beradi. Biz ularning har biriga o'tamiz (agar to'xtab qolsangiz), lekin hozir server kodini bosing.

Server Code.gs faylida ko'p funktsiyalar mavjud:

onSubmit (e), onOpen (), doGet (), o'z ichiga oladi (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Bu funksiya Google Formasi yuborilganda ishga tushadigan birinchi funksiya sifatida konfiguratsiya qilinadi. Siz turli xil jarayonlarni amalga oshirish uchun boshqa funktsiyalarni joylashtirishingiz mumkin.

onOpen (e) - bu funksiya Google Sheets ochilganda chaqiriladi. U ilovalar havolalari va ko'rinishiga tez kirishga ruxsat berish uchun yangi menyu variantini to'ldiradi.

doGet ()- bu funksiya veb-ilovalarning manzil qo'ng'irog'ida chaqiriladi. Agar foydalanuvchi e'lon qilingan veb -ilovani ko'rib chiqsa, bu sahifa nimani ko'rsatishi kerakligini ko'rsatadi. Bunday holda, bu Application.html hujjati.

include (fileName) - Bu funksiya HTML -sahifalar ichida boshqa hujjatni o'qish va uning mazmunini boshqa sahifaga tegishli HTML formatiga kiritish uchun ishlatiladi. Biz uni CSS.html va JS.html fayllari uchun ishlatamiz.

openApplication () va openLaundryApp () - Bu funktsiyalar foydalanuvchi Google Sheet asboblar paneliga qo'shilgan menyu tugmachalarini bosganda ishga tushadigan kodni o'z ichiga oladi.

changeValueOnSubmit (e) va setIDOnSubmit (e)- Bu biz hozir ko'rib chiqadigan vazifalar. Forma dastlab topshirilganda, ular ma'lum maydonlarni standart qiymatlar bilan yangilash uchun javobgardir.

4 -qadam: OnFormSubmit -ni yoqish

Bu ikkita funktsiyani, changeValueOnSubmit (e) va setIDOnSubmit (e), foydalanuvchining ariza yuborish harakatiga ulash lozim. Buning uchun biz Trigger -ni yoqishimiz kerak.

Biz Tartibga solish> Joriy loyihaning tetiklari tugmachasini bosish orqali ishga tushiramiz. Bu Google Developer Hub -ni ochadi.

Trigger asboblar panelining pastki o'ng burchagida "Trigger qo'shish" tugmasi joylashgan. Bu yerni bosing.

Endi biz funktsiyani ariza yuborilganda ishga tushiramiz. Bizning holatda menda onSubmit () funktsiyasiga joylashtirilgan bir nechta funktsiyalar (changeValueOnSubmit (e) va setIDOnSubmit (e)) bor, shuning uchun men faqat 1 tetikni o'rnatishim kerak. Shuning uchun biz onSubmit () ni tanlaymiz va bu tetikni "Formani yuborish" rejimida ishga tushiramiz.

Endi bizda Google Sheet -ni noyob identifikatorlar bilan to'ldiradigan va standart qiymatlarni o'rnatadigan ishchi shakl mavjud.

Endi siz o'zingiz xohlagan narsalarni Google Form orqali yuklashingiz mumkin. (Buni davom ettirish shart emas, chunki demo qiymatlari allaqachon mavjud). Endi biz foydalanuvchi interfeysiga o'tamiz.

5 -qadam: Foydalanuvchi interfeysini sozlash

Xush kelibsiz! Biz nihoyat siz kelgan qismga - foydalanuvchi interfeysiga etib keldik !!!!

Bir qarashda, bu erda hech narsa yo'q. Biz hali hech qanday qo'ng'iroq qilmadik. Sahifani tezroq yuklash uchun men sizning barcha narsalaringiz bilan birinchi sahifani o'ldirmaslikka qaror qildim va ko'rmoqchi bo'lgan narsangizni tezroq bosishga ruxsat berdim. Bu shunday bo'lgani uchun asosiy kontent maydonida elementlar va yon panelda filtrlar yo'q. Ma'lumotlar bazamizda nima borligini bilish uchun Hammasini bosing.

Endi biz ma'lumotlar bazamizdagi har bir elementni asosiy tarkib maydoniga yukladik. Siz rasmlar, identifikator raqamlari, rang, o'lchamlar va joylarni ko'rasiz. Joylashuv maydonini shu erda yangilash mumkin! Agar siz qarz berishga qaror qilsangiz, uni tanlashingiz mumkin, uni shkafga, kiyim -kechak yoki kir yuvish xonasiga joylashtirishingiz mumkin.

Bizning yon panelimizda yangi so'rovimizdagi har bir kiyim -kechak uchun barcha imkoniyatlar mavjud. Tasavvur qiling -a, bu yon panelda 20 xil o'lchamdagi variant mavjud, bu unchalik samarali bo'lmaydi, shuning uchun aksessuarlarni bosish orqali qidiruvimizni qisqartiraylik.

Endi biz aksessuarlarni yukladik, yon panelga qarang. U faqat 3 ta maydonga moslashtirildi, chunki bu so'rovning har bir elementiga tegishli parametrlar. Men rang bo'yicha saralash qilmoqchiman. Rangni bosish orqali ochiladigan maydon paydo bo'ladi. Bu erda men xohlagan rangni yozib, keyin uni tanlashim mumkin, yoki agar men o'z variantimni ko'rsam, uni bosaman. Men bu namoyish uchun Qizilni tanladim. Yon panelning pastki qismidagi Filtrni qo'llash -ni bosing va asosiy tarkib rang parametrlari sifatida qizil rangga ega bo'lgan elementlarni ko'rsatadi.

Men ilgari aytganimdek, bu ma'lumotlar bazasi menga kir yuvish va kir yuvish bo'yicha narsalarimni boshqarishga yordam beradi. Buni biroz osonlashtirish uchun men ushbu asosiy sahifadagi ochiladigan joylarni qo'lda bosish o'rniga kir yuvish rejimini yaratdim. Google Sheet sahifasiga qayting va Ilovalarni ko'rish ostida kir yuvish rejimini ko'rasiz. Bu parametr faqat kir yuvish joyi ko'rsatilgan narsalarni ko'rsatadigan kichikroq modalni oladi. Endi men ushbu elementlarning barchasini standart deb belgilashim mumkin, bu ularni odatda saqlanadigan joylariga qaytaradi.

7 -qadam: Loyiha yakunlandi

TABRIKLAR

Sizning ma'lumotlaringizni boshqarish uchun ishlaydigan ma'lumotlar bazasini xohlaydiganlar uchun, onlayn tashkilotchingizga xush kelibsiz. Ushbu dasturning orqasidagi kodni qiziqtiradigan qiziquvchilar uchun. Men uni sindirib tashlaganimda, turing.

*Ma'lumotlar bazasiga o'zingizning hech bo'lmaganda bittasini kiritganingizdan so'ng, test topshiriqlarini o'chirib tashlashingiz mumkin. (Agar to'xtab qolsangiz, keyinroq tushuntiraman).

8-qadam: 1-qadam: Orqa kod (Server Code.gs)

Ilgari biz Server Code.gs faylini ochgan edik va men har bir funktsiyani tezda qisqartirdim, chunki ularning maqsadi siz o'rnatgan har bir elementga xizmat qilish edi, lekin hozir biz ularni ba'zi funktsiyalar va xizmatlarni buzamiz. bu kodni muvaffaqiyatli qilish uchun.

1) Jadvalni aylantirish:

var ss = SpreadsheetApp.getActiveS spreadsheet (); var varaq = ss.getSheetByName ("Forma javoblari 1"); var diapazoni = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = diapazon.getLastRow ();

• Bu kod Google jadvalini aylanib o'tish uchun asosdir. Men varaqni raqamdan ko'ra nom bilan chaqiraman, shuning uchun agar varaqlar o'chirilsa yoki funktsiyasi bo'yicha qayta tartiblansa, u to'g'ri ishlashi mumkin.
• Ushbu kodda men jadvaldagi barcha ma'lumotlar uchun faqat diapazonni yig'aman.

2) ID berish:

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

• Men ilgari demo qiymatlarini foydalanuvchi o'zi uchun hech bo'lmaganda bitta qiymat kiritmaguncha jadvalda qoldirilishini so'radim. Buning sababi, Auto ID generatori to'ldirish uchun ma'lumotlar bazasidagi oxirgi qiymatga tayanadi.
• Men oxirgi 2 -chi qatorni olaman, chunki oxirgi qator - bu bizning yangi qiymatimiz va ID qiymati uchun 1 -ustun.
• Keyin tasodifiy ravishda 5 dan 15 gacha raqam hosil qilaman va uni oxirgi qiymatga qo'shaman. *
• Nihoyat, men bu qiymatni oxirgi qatorning ID ustuniga joylashtiraman.
• Keyin biz changeValueOnSubmit (e) funktsiyasini chaqiramiz.

* Men kelgusida etiketkalash va Google Home-ni birlashtirishga ruxsat berish uchun 5-15 ni tanladim, shunda raqamlar ilmoqlar yoki kiyim teglari yoki shtrix-kodlarda chalkashliklarga olib kelmaydi.

3) URL qiymatini o'zgartirish:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Siz bu kiyim -kechak maqolasini qayerda saqlaysiz?"]; var ColD = ColumnID _ ("Item Tasvir") +1; var ColLoc = ColumnID _ ("Standart joylashuv")+1; DataChange = DataChange.toString (). almashtirish ("ochiq?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Fotosuratni Google formasi orqali yuborishda Google Sheets -ga kiritilgan URL - bu haqiqiy hujjatga havola. Bizning holatlarimizda, biz HTML -sahifani yaratayotganimizda, havola shunchaki rasm bo'lishini xohlaymiz.
• "Ochiqmi?" "uc? export = view &" URL manzilining o'rniga biz rasmga havola yaratdik.
• Biz bu yangi qiymatni yana "Item Picture" havolasi joylashgan joyga joylashtiramiz.
• Men ma'lumotlar bazasida "Standart joylashuv" va "Joriy joylashuv" ni ham xuddi shunday o'rnataman. Bu kir yuvish rejimidan foydalanishda yordam beradi.

• Biz keyingi sahifada sho'ng'iymiz, lekin bu men yaratgan ColumnID_ () funktsiyasiga birinchi qarashimiz.

  Bu funktsiya ustun nomlaridan foydalanadi va uni ustunlar soniga tarjima qiladi, bu nomni emas, balki ustun raqamini talab qiladi

4) SpreadsheetApp.getUI ()

• Ikkinchi rasmda siz Google Sheet -ga asboblar paneli menyusini yaratish uchun ishlatilganidek, SpreadsheetApp.getUI () dan foydalanishni ko'rishingiz mumkin.
• . GetUI () funktsiyasi, shuningdek, kir yuvish rejimida va veb -sayt interfeysiga tezkor havola sifatida ishlatiladigan modali qalqib chiquvchi oynani yaratishga yordam beradi.

5) HTML xizmati

• Ushbu kodda HTMLServices ning ikki turi ishlatiladi: Andoza va HTMLOutput
• Shablon HTML kodining ichiga kod kiritishga imkon beradi, shuning uchun serverdan keladigan ma'lumotlar sahifa chaqirilganda to'ldirilishi mumkin.
• HTML chiqishi oddiy HTML sahifalarini ko'rsatadi.
• Shuningdek, bizda bir nechta HTML -fayllarni yaratish va ularni bitta HTML -faylda birlashtirish orqali fayl tarkibini satr o'rniga HTML formatida qaytarish imkonini beradigan include () usuli mavjud.

Men Google Apps -da manba kodi va funksionalligi qanday tushuntirilgani bilan tanishish uchun Google App Scripts Documentation kabi hujjatni biriktirdim.

9-qadam: 2-qadam: Orqa kodning 2-qismi (Server Calls.gs)

Endi biz Server Calls.gs saytiga kiramiz. Bu funktsiyalar asosan HTML JavaScript -da ishlatiladi, shuning uchun ular birinchi navbatda Server Code.gs saytining orqa qismida ishlatiladigan koddan ajratilgan.

1 -rasm) Global o'zgaruvchilar:

2 -rasm) narsalarni olish:

3 -rasm) fetchItemsQry

Rasm 4) filtri elementlari

5 -rasm) fetFiltersWithQry

6 -rasm) ColumnID va CacheCalls

Bularning har biri bilan gaplashish uchun juda ko'p narsa bor. Va kodni buzish va nima bo'layotganini tushuntirish uchun menga biroz ko'proq joy yozish kerak edi. ServerCalls.gs kodini ajratish uchun hujjat ilova qilingan

Bu hujjat Google App Scripts Documentation kabi o'rnatiladi va hatto shunga o'xshash ob'ektlarga havolalar beradi.

10 -qadam: 3 -qadam: HTML kodi (Application.html)

HTML kodi Instructable muloqot oynasida juda baxtsiz bo'ladi. Shuning uchun, iltimos, yuqoridagi rasmlarni kuzatib boring.

1) Application.html sahifasining sarlavhasida biz sarlavha qo'yamiz va CSS.html sahifamizni yuklash uchun chaqiramiz.

*Shablonli HTML -sahifa bo'lib, biz Server Code.gs -da ilgari aytilgan include (pageName) usulini ishlatib, joriy ekranni bezovta qilmasdan, ushbu hujjatga qo'shimcha kod qo'shishimiz mumkin.

Asosiy rasmlar qutisi ham bu rasmda topilgan. Siz bu yerdagi sarlavhani o'zgartirishingiz va "[Ismingiz] ning shkafi" ni yoki bu sahifani tanishni xohlagan narsangizni kiritishingiz mumkin.

2) Sarlavha ostida bizning yuqori navigatsiya paneli joylashgan.

Bu navigatsiya paneli Google Sheets -dagi Maqolalar varag'ida ko'rsatilgan barcha turdagi maqolalarni o'z ichiga oladi.

Ushbu elementlarning qatorini olish uchun ichki funksiya chaqiriladi. Keyin ushbu variantlarning har birini menyu tugmachasi sifatida kiritish uchun operatsiya kodi bilan to'ldiriladi, shuning uchun foydalanuvchi menyu tugmachasini bosganida, tanadagi tegishli elementlar paydo bo'ladi.

3) Asosiy qism.

Ushbu bo'limda 4 ta bo'lim mavjud. Matn chiqishi, yon panel filtri, asosiy tasvirlar va JS o'z ichiga oladi.

Matn chiqishi foydalanuvchi tanlagan menyu variantiga murojaat qilish o'rniga, hozirda qaysi turdagi elementlarni ko'rib chiqayotganini, tezkor matn ko'rinishini ko'rish imkonini beradi.

Yon panel filtri foydalanuvchi tanlagan element turi uchun mavjud bo'lgan ko'plab filtrlarni o'z ichiga oladi. Ushbu filtrlar ushbu toifadagi barcha variantlarni, shuningdek, ushbu toifadagi nechta elementni o'z ichiga oladi. Bu yon paneli JavaScript kodi bilan to'ldirilgan (bu keyingi muhokama qilinadi).

Hozirgi vaqtda asosiy tanasi bo'sh, lekin filtrlar singari, foydalanuvchi toifani tanlagandan va JavaScript kodi bu maydonni to'ldirgandan so'ng, uning identifikatori, rangi, o'lchami va joylashuvi tasvirlangan elementlar qutilari bilan to'ldiriladi.

Nihoyat, o'z ichiga oladi (JS), keyingi bosqichda buni ko'rib chiqaylik.

11 -qadam: 4 -qadam: JavaScript kodi (JS.html)

Agar siz Server kodini og'ir bo'lim deb o'ylagan bo'lsangiz, buni yuklang.

Bu erda biz HTML va SeverCode -ni foydalanuvchilarning o'zaro ta'siri bilan birlashtiramiz. Tegishli ma'lumotlarni olish va uni o'qiladigan formatda qaytarish uchun bosilgan har qanday element bu erda qayta ishlanishi kerak. Shunday qilib, birinchi qo'ng'iroqlarimizni ko'rib chiqaylik:

Skript chaqiradi: men bu loyiha uchun 3 xil kutubxonadan foydalanayapman; jquery, bootstrap va maxsus bootstrap-ni tanlang. Bu kutubxonalar ob'ektlarni formatlash va HTML kodidagi elementlarga qo'ng'iroqlarni osonlashtirish imkonini beradi.

JavaScript -ning navbatdagi muhim qatori quyida:

$ (hujjat).keypress (funktsiya (hodisa) {if (event.which == '13') {event.preventDefault (); }});

Bu erda men kirish tugmachasini har qanday shaklni ishga tushirishni o'chirib qo'yaman. Bu holatda, Google veb -ilovalariga faqat bitta sahifali manzil beriladi. Kirish matni HTML manziliga ma'lumotlarni qo'shadi va foydalanuvchini qayta yo'naltirishga harakat qiladi. Buni o'chirib qo'yish orqali siz JavaScript kodingizga barcha ishlarni bajarishga ruxsat berasiz.

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

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

Bu erda Server Code.gs faylini chaqiradigan ikkita funktsiya. Chiziq:

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

ko'p ishchi qismlari bor, lekin skeleti "google.script.run" dan olingan bo'lib, HTML sahifasiga quyidagi funksiya serverda ekanligini bildiradi.

• Ushbu kodning oxirgi qismi - bu ishga tushirish funktsiyasi. Bu misolda ServerRemoveFilter ()
• WithSuccessHandler () ni qo'shish bilan HTML sahifasi endi qaytariladigan ma'lumotlar bilan nima qilishni biladi va bu funktsiyani qavs bilan ishlatishdir.
• Xuddi shu narsa withFailureHandler () uchun ham amal qiladi.

Endi biz Server kodi chaqiruvini buzdik, keling, ushbu server qo'ng'irog'i muvaffaqiyatli va muvaffaqiyatsiz bo'lganda nima bo'lishini ko'rib chiqaylik.

allGood (e) funktsiyasi {console.log ("Serverda muvaffaqiyat"); } funktsiyasi onFailure (xato) {$ ("#xabarlar qutisi"). html ("

Kiyim -kechak buyumlarini olib bo'lmadi. XATO: " + error.message +"

");} funktsiyasi FailDBUpdate (xato) {$ ("#xabar qutisi "). html ("

Joylashuvni o'zgartirish uchun sizda ruxsat yo'q. XATO: " + error.message +"

"); $ (". joy-tanlaydi "). prop (" o'chirilgan "," o'chirilgan ");}

AllGood () sifatida ko'rishingiz mumkin bo'lgan joylashuv funktsiyasi ishga tushirilganda muvaffaqiyatga erishish uchun men juda oddiy konsol jurnalini yaratdim.

Xatolarni ko'rib chiqishda, bu ikkita funktsiya "xabar qutisi" identifikatori bilan HTML ob'ektiga jQuery chaqiruvi yordamida foydalanuvchi ko'rishi mumkin bo'lgan xato xabarini chiqaradi.

Keling, og'ir ishlarga o'taylik

12-qadam: 5-qadam: JavaScript kodini bosish harakatlari (JS.html)

Yuqori menyu satrida har bir maqola turi uchun variantlar mavjud. Ular bosish paytida bajaradigan vazifasi:

filterType funktsiyasi (maqola, id) {$ ("ul.navbar-nav li.active"). removeClass ("faol"); $ ("#currentArticle"). html ("// HTML KOD BU YERDA");

updateSideBar = rost;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Maqolalar", maqola); var newSelect = "#type-"+id; $ (newSelect).addClass ("faol"); $ ("#myNavbar"). removeClass ("ichida"); }

Bu kodda bizda ma'lumot olish uchun Serverga qo'ng'iroq qiladigan google.script.run borligini ko'rishimiz mumkin. Bu qo'ng'iroqning muvaffaqiyati - updateItems ().

1 -RASM (bu funktsiyadagi og'ir HTML kodi bilan, bu qutida tartibsizlik bo'lmasdan, kodni qat'iy nusxalash qiyin)

UpdateItems () kodida bizda ko'p narsalar ro'y bermoqda. Biz yana bizga qaytarilgan Ob'ekt orqali o'tamiz va har bir elementni asosiy sahifamizga qo'shamiz.

HTML kodi kodni ajratish va o'qishni osonlashtirish va itemData qayerga kiritilayotganini ko'rishni osonlashtirish uchun massiv sifatida qo'shiladi.

Har bir elementning davrasida men standart, vaqt tamg'asi va rasm URL manzili kabi tavsifda ko'rishni istamagan maydonlarni olib tashlayman. Tasvirdan rasm URL manzilini olib tashlayman, chunki u href sifatida tegga qo'shiladi. Bu ma'lumotlar yig'ilgandan so'ng, jQuery.append () funktsiyasi yordamida asosiy tanaga yuboriladi.

Sahifaga barcha elementlar qo'shilgandan so'ng, ushbu so'rov 2 -rasmda ko'rsatilgan filtr variantlarini saralash va qaytarish uchun yana Server kodiga yuboriladi.

2 -rasm (yon panelni yangilash)

UpdateItems () funktsiyasiga juda o'xshash, bizda yana HTML -kodlar qatori va barcha filtr variantlari uchun pastadir mavjud. Faqat sezilarli o'zgarish - bu jQuery.selectpicker ("yangilash"). Bu funksiya biz oxirgi bosqichga kiritgan skriptlar kutubxonasidan keladi. Bu dasturchiga oddiy HTML -ni tanlashga imkon beradi va kutubxonani CSS kodi bilan bir qatorda qidirish funktsiyasini o'z ichiga oladi.

3 -RASM (yon panel bilan filtrlash)

Va nihoyat, bizda updateFilter (formData) funktsiyasi mavjud. Bu yon paneldan ariza yuborilganda ishlatiladi. Biz jQuery funktsiyasidan foydalanishni boshlaymiz.serializeArray () bu bizning holatimizda aniqlangan elementning HTML kodini o'qiydi va serverga yuboriladigan satrdagi qiymatlarni qaytaradi. Va biz jarayonni 1 -rasmdan qaytadan boshlaymiz.

13 -qadam: Oxir oqibat

Xo'sh, sizda bor; o'z shaxsiy shkafingizni o'rnatishga yoki o'z loyihangizni kengaytirish uchun Google Skriptlarimda yaratilgan imkoniyatlardan foydalanishga yordam beradigan to'liq va batafsil tushuntirish.

Bu loyihani kodlash (va bu ko'rsatma orqali hujjatlashtirish) sayohati edi, lekin men bu jarayondan zavqlandim va sizga mahsulot yoqadi deb umid qilaman. Maykl Jordan aytganidek, "shift - bu tom", deb o'zgartirgan har qanday odamdan javob olishni istardim va men bu ilovaning chegarasi yo'qligiga qo'shilaman.