Qarderob təşkilatçısı: 13 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:46

İstər paltar üçün alış -veriş etsin, istərsə də hər zaman hər hansı bir əşyanı götürməyinizi xahiş etsəniz, bənzər bir şeyiniz olub olmadığını görmək üçün hər yerdən dolabınıza baxmaq istəyərsiniz.

Bu bir pəncərədir və bir çox digər məqsədlər üçün genişdir. Mənim Qarderob Təşkilatçım, SQL verilənlər bazası olaraq Google Cədvəllərin, məlumatların işlənməsi üçün Google Skriptlərinin və bu məlumatların onlayn portalı üçün Google WebApp -ın birləşməsidir. Son istifadəçi bütün əşyaları görə bilər, müəyyən bir şeyi süzə bilər, əşyaları kreditdə olduğunu qeyd edə bilər, paltarlarını idarə edə bilər və hər il Milad bayramı üçün ananın sizə eyni köynək almasını dayandıra bilər*.

(*Zəmanət yoxdur. Analar istədiklərini ehtiyacınız olsa da alacaqlar)

Yuxarıdakı şəkildəki veb sayt dizaynına tez bir nəzər salanda tanış bir planı tanıya bilərik. Qarderob Təşkilatçı hər hansı bir geyim veb saytı kimi qurulmuşdur. Yuxarıdakı bölmələr və yan tərəfdəki filtrlər tərəfindən qırılan bu interfeys, təsadüfi istifadəçiyə funksionallıq ilə tanışlıq gətirir. VƏ istifadəsi asandır.

Addım 1: Öz Kopyanızın Qurulması

Bu layihənin öz nüsxəsini yaratmaqla başlayaq.

Google Disk

Sizi bu tətbiqin hazırkı versiyasına aparmaq üçün yuxarıdakı linki vurun.

Bu qovluqda 3 element görəcəksiniz: Google Forması, Google Vərəqi və Qovluq.

Google Cədvəlini sağ vurun və Kopyala Et düyməsini basın.

Bu nüsxənin Məkanını öz Diskinizə təyin edin.

Bu sənədi kopyaladıqdan sonra Google Forması avtomatik olaraq Google Cədvəlini köçürdüyünüz qovluqda yaradılacaq.

Qovluq yaratmaq üçün (bu element şəkillərinin yüklənməsini toplamaq üçün lazımdır), kopyalanan Google Formasını vurun və yüklənmələr üçün qovluq yerini bərpa etməyinizi xahiş edən bir mesaj görünəcək.

İndi özünüz üzərində işləmək üçün bu sənədin bir nüsxəsi var!

Addım 2: Google Formasına Baxış

İndi bu tətbiqin öz versiyanız olduğuna görə ətrafa nəzər salaq.

Google Formanız bir çox fərqli maddə qəbul etmək üçün qurulmuşdur. Ancaq köynəklərin, şalvarların, paltarların və ayaqqabıların ölçü ölçüləri fərqli olur. Buna görə də, bu maddənin daxil etdiyiniz şöbəyə əsaslanaraq fərqli bir bölmə doldurulacaq. (Kişi məqaləsi) şablonumda 5 fərqli ölçü kateqoriyası yaratdım. (Qadın məqalələri üçün buraya vurun, daha çoxu var).

Hər bir ölçü bölməsi altında, toplayacağım hər bir parametr üçün unikal bir başlıq təyin etdim. Verilənlər bazamızda "Ölçü" adı ilə birdən çox sütunun olmasını istəmirik və ya bu ölçüdə hansı geyim növünə aid olduğunu müəyyən edə bilmərik.

Hər bölmənin sonunda istifadəçi bu formanın son hissəsinə yönləndirilir: Yer. Şəxsən mən Quru Təmizləyicilərdə, çamaşırxanada, yerlərində və ya bir dostumun borc almasına icazə verdiyim əşyaları təyin etmək üçün Yer əlavə etməyi seçdim. Bu, təşkilatlanmış olmağıma imkan verir və heç vaxt bir yerdə paltar itirdiyimi hiss etmirəm.

Əvvəldən qeyd etdiyim kimi, bu layihə bir milyon fərqli şəkildə genişləndirilə bilər. Bunu inventarlaşdırma, daha dəqiq bir təşkilat vasitəsi və ya paltar almaq üçün istifadə edə bilərsiniz. Əlavə edə biləcəyiniz sahələr və bölmələr sonsuzdur, buna görə formamdakılarla məhdudlaşmayın. (Qadın məqalələri üçün bura daxil olun)

Bir neçə öz məhsulunuzu yükləməyə başlamazdan əvvəl, düzgün təqdim etməyi təmin etmək üçün növbəti mərhələyə keçək.

Addım 3: Google Skriptləri: (Server Code.gs) Əvvəlcə Məlumatlara və Kodlara baxın

Google Cədvəl sənədinə tıkladığınızda bir çox məlumat sütunu (və nümayiş üçün buraxılmış bəzi sətirlər) görəcəksiniz. Forma təqdim edərkən bəzi bölmələr atlanır, bu, bəzi sütunlarda çatışmayan məlumatlardan aydın görünür. Ancaq bu elementlərin düzəlişlərini daha yaxşı izləmək üçün ID, Varsayılan Yer, Kim və Yenilənmiş kimi əlavə sütunlar əlavə edilmişdir.

Bu verilənlər bazasını keçərkən unikal bir identifikatora icazə vermək üçün formanı təqdim etdiyiniz zaman bir ID sahəsi yaradılmışdır. Bu sahəni yaratmaq üçün Alətlər> Ssenari Redaktorunu tıklayaraq Script Redaktoruna nəzər salacağıq.

Script Redaktoru açıldıqda, bu yeni pəncərənin yan çubuğunda 8 sənədi görəcəksiniz. Bu sənədlər arxa uç prosesini, ön ekranları və ön uç funksiyasını idarə etməyə kömək edir. Hər birinə girəcəyik (ətrafda olsanız), ancaq indi Server Kodunu vurun.

Server Code.gs faylında bir çox funksiya var:

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

onSubmit (e) - Bu funksiya, Google Formu təqdim edildikdə işləyəcək ilk funksiya olaraq konfiqurasiya ediləcək. Bir çox fərqli prosesin baş verməsinə imkan vermək üçün bu funksiyanın içərisinə digər funksiyaları yerləşdirə bilərsiniz.

onOpen (e) - Google Cədvəl açıldıqda bu funksiya çağırılır. Tətbiq bağlantılarına və görünüşlərinə sürətli daxil olmaq üçün yeni bir menyu seçimini doldurur.

doGet ()- Bu funksiya Veb Tətbiqi ünvan zəngində çağırılır. İstifadəçi nəşr olunan Veb Tətbiqinə baxdıqda bu kod həmin səhifəyə nəyin göstəriləcəyini bildirəcək. Bu halda bu Application.html sənədidir.

include (fileName) - Bu funksiya digər sənədləri oxumaq və məzmunlarını başqa bir səhifəyə uyğun bir HTML formatına daxil etmək üçün HTML səhifələrinin içərisində istifadə olunur. CSS.html və JS.html fayllarımız üçün istifadə edirik.

openApplication () və openLaundryApp () - Bu funksiyalar istifadəçi Google Cədvəl alətlər çubuğuna əlavə edilmiş menyu düymələrini tıkladıqda işlədiləcək kodu ehtiva edir.

changeValueOnSubmit (e) və setIDOnSubmit (e)- Bunlar indi araşdıracağımız funksiyalardır. Forma əvvəlcə təqdim edildikdə müəyyən sahələri standart dəyərlərlə yeniləməkdən məsuldurlar.

Addım 4: OnFormSubmit'i aktivləşdirin

Bu iki funksiyanın, changeValueOnSubmit (e) və setIDOnSubmit (e), bir forma göndərmə istifadəçi hərəkətinə bağlanması lazımdır. Bunu etmək üçün bir Tetikleyiciyi aktiv etməliyik.

Düzenle> Cari layihənin tetikleyicilerini tıklayarak tetiği aktivləşdiririk. Bu, Google Developer Hub -ı açır.

Tetikleyici tablosunun sağ alt küncündə Tətik əlavə et düyməsi var. Bura basın.

İndi bir forma təqdim edildikdə işləyəcək funksiyanı quracağıq. Bizim vəziyyətimizdə onSubmit () funksiyasının içərisinə qoyduğum bir çox funksiya (changeValueOnSubmit (e) və setIDOnSubmit (e)) var, buna görə yalnız 1 tətik qurmalıyam. Buna görə onSubmit () seçəcəyik və bu tetikleyiciyi Forma Göndərmə rejimində işə salın.

İndi unikal identifikatorları olan bir Google Cədvəlini dolduracaq və standart dəyərləri təyin edəcək bir iş formumuz var.

İndi Google Formu istifadə edərək öz əşyalarınızı yükləyə bilərsiniz. (Demo dəyərləri artıq olduğu üçün davam etmək lazım deyil). İndi istifadəçi interfeysinə girəcəyik.

Addım 5: İstifadəçi Arayüzünün Qurulması

HOŞ GELDİNİZ! Nəhayət gəldiyiniz hissəyə, İstifadəçi İnterfeysinə çatdıq !!!!

İlk baxışdan burada heç nə yoxdur. Hələ heç bir zəng etməmişik. Səhifəni daha sürətli yükləmək üçün TÜM əşyalarınız olan ilk səhifəni vəba etməməyə və görmək istədiyinizi daha sürətli tıklamağa qərar verdim. Belə olduğu üçün əsas məzmun sahəsində heç bir maddə və yan çubuğunda heç bir filtr yoxdur. Verilənlər bazamızda nə olduğunu görmək üçün Hamısını vuraq.

İndi verilənlər bazamızdakı hər bir elementi əsas məzmun sahəsinə yüklədik. Şəkilləri, şəxsiyyət nömrələrini, rəngini, ölçülərini və yerlərini görəcəksiniz. Məkan sahəsi burada yenilənə bilər! Kredit götürmək qərarına gəlsəniz, seçiminizi şkafınıza, paltarınıza və ya paltaryuyanınıza yerləşdirə bilərsiniz.

Yan çubuğumuzda, yeni sorğumuzdakı hər bir geyim maddəsi üçün mümkün olan hər bir sahəyə sahibik. Bu kenar çubuğunda 20 fərqli ölçü seçiminin olmasını təsəvvür edin, bu o qədər də təsirli olmayacaq, buna görə də Aksesuarlar tıklayarak axtarışımızı daraltaq.

İndi Aksesuarları yüklədikdən sonra yan çubuğa baxın. Yalnız 3 sahəyə uyğunlaşdırılmışdır, çünki bu sorğudakı hər bir elementə tətbiq olunan parametrlərdir. Rəngə görə bir növ edəcəyəm. Rəngə basaraq açılan bir qutu görünür. Burada ya istədiyim rəngi yaza bilərəm, sonra da seçə bilərəm, ya da seçimimi dərhal görsəm sadəcə tıklayacam. Bu nümayiş üçün Qırmızı seçdim. Bu yan çubuğun altındakı Filtri Tətbiq et düyməsini vurun və əsas məzmun, rəng parametri olaraq Qırmızı rəngli əşyaları göstərən təzələnəcək.

Daha əvvəl qeyd etdiyim bu verilənlər bazası, əşyalarımı kreditlə və camaşırxanada idarə etməyə kömək edir. Bir az daha asanlaşdırmaq üçün bu ana səhifədəki hər açılan yeri əl ilə tıklamaq əvəzinə Çamaşır rejimi yaratdım. Google Cədvəl səhifəsinə qayıdın və Tətbiq Görünüşü altında Çamaşır rejimini görəcəksiniz. Bu seçim yalnız Camaşırxana yeri olan əşyaları göstərən daha kiçik bir modal çəkəcək. İndi bu maddələrin hamısını Default olaraq qeyd edə bilərəm ki, bu da onları normal saxladıqları yerlərə qaytaracaq.

Addım 7: Layihə Tamamlandı

TƏBRİK EDİRİK

Əşyalarınızı idarə etmək üçün yalnız işləyən bir verilənlər bazası istəyənlər üçün Online Təşkilatçınıza xoş gəlmisiniz. Bu tətbiqin arxasındakı kodla maraqlananlar üçün. Mən parçalayanda ətrafımda qal.

*Verilənlər bazasına öz maddələrinizdən ən az birini daxil etdikdən sonra test tapşırıqlarını silməkdə sərbəstsiniz. (Ətrafda qalsanız sonra izah edərəm).

Addım 8: Addım 1: Arxa Uç Kodu (Server Code.gs)

Daha əvvəl Server Code.gs faylını açdıq və hər bir funksiyanı tez bir şəkildə tamamladım, çünki məqsədləri qurduğunuz hər bir elementə xidmət etmək idi, amma indi onları bəzi funksionallıqları və kommunalları parçalayacağıq. bu kodu müvəffəqiyyətli etmək üçün.

1) Cədvəldə keçid:

var ss = SpreadsheetApp.getActiveS spreadsheet (); var hesabatı = ss.getSheetByName ("Form cavabları 1"); var aralığı = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = sıra.getLastRow ();

• Bu kod Google Cədvəlini keçmək üçün əsasdır. Vərəqləri nömrədən çox adla çağırıram ki, vərəqlər funksiyaya görə silinsə və ya yenidən düzülsəydi hələ də düzgün işləyə bilər.
• Bu kodda cədvəldəki bütün məlumatlar üçün yalnız Aralığı toplayıram.

2) Şəxsiyyət vəsiqəsinin verilməsi:

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

• Əvvəllər istifadəçinin özləri üçün ən azı bir dəyər təqdim etməyincə demo dəyərlərinin cədvəldə qalmasını istəmişdim. Bunun səbəbi, Auto ID generatorunun doldurmaq üçün verilənlər bazasındakı son dəyərə etibar etməsidir.
• Sonuncu 2 -ci hissəni sonuncu satıra gətirirəm, çünki sonuncu satır yeni dəyərimiz və ID dəyəri üçün 1 -ci sütundur.
• Daha sonra təsadüfi olaraq 5 ilə 15 arasında bir ədəd yaradıram və son dəyərə əlavə edirəm. *
• Nəhayət, bu dəyəri son sətrin ID sütununa yerləşdirirəm.
• Sonra changeValueOnSubmit (e) funksiyasını çağırırıq.

* Gələcək etiketləmə və Google Home inteqrasiyasına icazə vermək üçün 5-15 seçdim ki, nömrələr asma və ya geyim etiketlərində və ya barkodlarda qarışıqlıq yaradacaq qədər yaxın olmayacaq.

3) URL dəyərinin dəyişdirilməsi:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Bu geyim məqaləsini harada saxlayırsınız?"]; var ColD = ColumnID _ ("Item Picture") +1; var ColLoc = ColumnID _ ("Varsayılan Yer")+1; DataChange = DataChange.toString (). əvəz edin ("açıq?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Bir Google Forması vasitəsilə bir şəkil təqdim edərkən Google Cədvəllərə daxil edilmiş URL, əsl sənədin bir keçididir. Bizim vəziyyətimizdə, bir HTML səhifəsi yaradarkən, linkin yalnız şəkil olmasını istəyirik.
• "Açıq?" URL -nin bir hissəsini "uc? export = view &" yerinə şəkilə bir keçid yaratdıq.
• Yenidən bu yeni dəyəri cari Item Picture bağlantısının yerinə yerləşdirəcəyik.
• Maddənin "Varsayılan Yer" və "Cari Yer" məlumat bazasındakı eyni şeyi təyin edirəm. Paltaryuyan Modumdan istifadə etməyə çalışanda bu kömək edəcək.

• Növbəti səhifədə araşdıracağıq, ancaq bu, yaratdığım ColumnID_ () funksiyasına ilk baxışımızdır.

  Bu funksiya, Sütun Adlarından istifadə edir, onu ad əvəzinə bir sütun nömrəsi tələb edən Aralıq zənglər üçün faydalıdır

4) CədvəlApp.getUI ()

• İkinci görüntüdə, Google Cədvəlinə Alətlər Çərçivəsi menyusu yaratmaq üçün istifadə edildiyi kimi SpreadsheetApp.getUI () istifadəsini görə bilərsiniz.
• . GetUI () funksiyası, Çamaşır rejimi üçün istifadə olunan və veb sayt interfeysinə sürətli bir keçid olaraq istifadə olunan bir modal popup yaratmağa da kömək edir.

5) HTML Xidməti

• Bu kodda iki növ HTMLServices istifadə olunur: Şablon və HTMLOutput
• Şablon, kodun HTML kodunun içərisinə daxil edilməsinə imkan verir, beləliklə səhifədən zəng edildikdə serverdən gələn məlumatlar doldurula bilər.
• HTML Çıxış sadə HTML səhifələrini göstərir.
• Faylın məzmununu simli deyil, HTML formatında qaytararaq birdən çox HTML faylı yaratmağımıza və onları bir şablonlu HTML sənədində birləşdirməyimizə imkan verən () metodumuz da var.

Google Tətbiqlərində mənbə kodunun və funksionallığın necə izah ediləcəyi ilə tanış olmaq üçün Google Tətbiq Skriptləri Sənədləri kimi qurulmuş bir sənəd əlavə etdim.

Addım 9: Addım 2: Arxa Uç Kodu 2-ci hissə (Server Calls.gs)

İndi Server Calls.gs saytına daxil olduq. Bu funksiyalar əsasən HTML JavaScript -də istifadə olunur, buna görə də Server Code.gs -də yerləşən arxa hissədə istifadə olunan koddan ayrılmışdır.

Şəkil 1) Qlobal Dəyişənlər:

Şəkil 2) maddələrin alınması:

Şəkil 3) fetchItemsQry

Şəkil 4) Məhsullar

Şəkil 5) fetchFiltersWithQry

Şəkil 6) ColumnID və CacheCalls

Bunların hər biri ilə danışacaq çox şey var. Və kodu parçalamaq və nə baş verdiyini izah etmək üçün bir az daha yazmağa ehtiyacım var. ServerCalls.gs -in kod dağılımı üçün bir sənəd əlavə olunur

Bu sənəd Google Tətbiq Skript Sənədləri kimi qurulur və hətta oxşar obyektlərə bağlantılar yaradır.

Addım 10: Addım 3: HTML Kodu (Application.html)

HTML kodu bir Instructable informasiya qutusunda çox bədbəxt olur. Odur ki, yuxarıdakı şəkilləri izləyin.

1) Application.html səhifəsinin başlığında bir başlıq qururuq və CSS.html səhifəmizi yükləmək üçün çağırırıq.

*Şablon HTML səhifəsi olaraq, Server Code.gs -də əvvəllər qeyd olunan (pageName) metodundan istifadə edərək cari ekranı qarışdırmadan bu sənədə daha çox kod əlavə edə bilərik.

Əsas başlıq qutusu da bu şəkildə tapılmışdır. Burada başlığı dəyişə və "[Adınızın] Qarderobuna" daxil ola bilərsiniz və ya bu səhifəni tanımaq istədiyiniz hər şeyi edə bilərsiniz.

2) Başlığın altında ən üst naviqasiya çubuğumuz var.

Bu naviqasiya çubuğuna Google Cədvəllərimizdəki məqalə vərəqində sadalanan bütün məqalə növləri daxildir.

Bu elementlərdən bir sıra əldə etmək üçün daxili funksiya çağırılır. Daha sonra bu variantların hər birini bir hərəkət kodu ilə tamamlanmış bir menyu düyməsi olaraq daxil etmək üçün bir dövrə işə salınır, buna görə istifadəçi menyu düyməsini tıkladıqda, müvafiq maddələr bədən sahəsində görünəcək.

3) Əsas bədən.

Bu hissədə 4 hissə var. Bir mətn çıxışı, kenar çubuğu filtri, əsas bədən şəkilləri və JS daxildir.

Mətn çıxışı, istifadəçinin seçdiyi menyu seçiminə istinad etmək əvəzinə hazırda hansı növ maddələrə baxdığını tez bir mətn görünüşü görməsinə imkan verir.

Kenar çubuğu filtri, istifadəçinin seçdiyi maddə növü üçün mövcud olan bir çox filtrdən ibarətdir. Bu filtrlər, bu kateqoriya üçün mövcud olan bütün variantları və bu kateqoriya dəyərinə düşən neçə maddəni əks etdirir. Bu kenar çubuğunda JavaScript kodu var (bundan sonra müzakirə olunacaq).

Əsas gövdə hazırda boşdur, ancaq filtrlər kimi, istifadəçi bir kateqoriya seçdikdən və JavaScript Kodu bu sahəni doldurduqdan sonra Elementin ID'sini, Rəngini, Ölçüsünü və Məkanını əks etdirən maddə qutuları ilə doldurulacaq.

Nəhayət daxildir (JS), növbəti addımda buna bir nəzər salaq.

Addım 11: Addım 4: JavaScript Kodu (JS.html)

Server Kodunun ağır bir bölmə olduğunu düşünürsünüzsə, bunun yükünü alın.

Burada HTML və SeverCode -u istifadəçi qarşılıqlı əlaqələri ilə birləşdiririk. Tıklanan hər hansı bir maddə, uyğun məlumatları əldə etmək və oxunaqlı bir formatda qaytarmaq üçün burada işlənməlidir. Beləliklə, ilk zənglərimizə baxaq:

Ssenari çağırır: Bu layihə üçün 3 fərqli kitabxanadan istifadə edirəm; jquery, bootstrap və xüsusi bir bootstrap seçin əlavə. Bu kitabxanalar, obyektlərin formatlanmasına və HTML kodundakı elementlərə daha asan zənglərə imkan verir.

JavaScript -in növbəti vacib xətti aşağıda verilmişdir:

$ (sənəd).keypress (funksiya (hadisə) {if (event.which == '13') {event.preventDefault (); }});

Burada enter düyməsini hər hansı bir forma tetiklemesini aradan buraxıram. Bu vəziyyətdə olduğu kimi, Google Veb Tətbiqlərinə yalnız bir səhifəlik ünvan verilir. Giriş mətni HTML ünvanına məlumat əlavə edəcək və istifadəçini yönləndirməyə çalışacaq. Bunu deaktiv etməklə JavaScript kodunuzun bütün işləri görməsinə icazə verirsiniz.

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

updateDBlocation funksiyası (id, dəyər) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, dəyər); }

Burada Server Code.gs faylına zəng edən iki funksiya var. Xətt:

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

bunun bir çox işçi hissəsi var, ancaq iskelet HTML səhifəsinə aşağıdakı funksiyanın serverdə olduğunu bildirən "google.script.run" dan qaynaqlanır.

• Bu kodun son biti işləmə funksiyasıdır. Bu nümunədə ServerRemoveFilter ()
• WithSuccessHandler () əlavə etməklə HTML səhifəsi artıq qaytarılmış məlumatlar ilə nə edəcəyini bilir və bu funksiyanı mötərizədə işlətməkdir.
• Eyni forFailureHandler ()

Server Kodu zəngini pozduğumuza görə, bu server zənginin müvəffəqiyyətli və uğursuz olanda baş verənlərə qısa bir nəzər salaq.

allGood (e) funksiyası {console.log ("Serverdə uğur"); } funksiyası onFailure (səhv) {$ ("#mesaj qutusu"). html ("

Geyim əşyalarını əldə etmək mümkün deyil. HATA: " + error.message +"

");} funksiyası FailDBUpdate (səhv) {$ ("#mesaj qutusu "). html ("

Məkanı dəyişdirmək üçün girişiniz yoxdur. HATA: " + error.message +"

"); $ (". yeri seçir "). prop ('əlil', 'əlil');}

AllGood () kimi görə biləcəyiniz yer funksiyası işlədikdə uğur qazanmaq üçün çox sadə bir konsol jurnalı yaratdım.

Səhvləri idarə edərkən, bu iki funksiya istifadəçinin "mesaj qutusu" ID-si olan HTML obyektinə jQuery zəngindən istifadə edərək görə biləcəyi səhv mesajını verir.

İndi gəlin çətin işlərə

Addım 12: Addım 5: JavaScript Kod Tıklama Fəaliyyətləri (JS.html)

Üst menyu çubuğunda hər bir məqalə növü üçün seçimlər var. Klik üzərində işlədikləri funksiya:

filterType funksiyası (məqalə, id) {$ ("ul.navbar-nav li.active"). removeClass ("aktiv"); $ ("#currentArticle"). html ("// HTML KODU BURADA");

updateSideBar = doğru;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Məqalələr", məqalə); var newSelect = "#type-"+id; $ (newSelect).addClass ("aktiv"); $ ("#myNavbar"). removeClass ("daxilində"); }

Bu kodda məlumat almaq üçün Serverə zəng edən bir google.script.run olduğunu görə bilərik. Bu çağırışın müvəffəqiyyət funksiyası updateItems () dir.

ŞƏKİL 1 (bu funksiyadakı ağır HTML kodu ilə, bu qutuda qarışıqlıq yaratmadan kodu qəti şəkildə kopyalamaq çətindir)

UpdateItems () kodunda baş verən çox şey var. Bir daha bizə qaytarılmış Obyektdən keçməliyik və hər bir elementi əsas bədən səhifəmizə əlavə etməliyik.

HTML kodu, kodu parçalamaq və itemData'nın daxil edildiyini oxumağı və görməyi asanlaşdırmaq üçün Array olaraq əlavə olunur.

Hər bir maddənin döngəsində Default, zaman damgası və şəkil URL kimi təsvirdə görmək istəmədiyim sahələri silirəm. Şəkil URL -ni təsvirdən silirəm, çünki əvəzinə bir etiketə href olaraq əlavə olunur. Bu məlumatlar toplandıqdan sonra jQuery.append () funksiyasından istifadə edərək əsas orqana göndərilir.

Bütün maddələr səhifəyə əlavə edildikdən sonra, şəkil 2 -də göründüyü kimi filtr seçimlərini sıralamaq və geri qaytarmaq üçün bu maddələr sorğusu yenidən Server Koduna göndərilir.

ŞƏKİL 2 (SideBar yenilənir)

UpdateItems () funksiyasına çox bənzəyir, bir daha HTML kodu və bütün filtr seçimləri üçün bir döngəyə sahibik. Yalnız nəzərə çarpan dəyişiklik jQuery.selectpicker ('yeniləmə') dir. Bu funksiya son addıma daxil etdiyimiz skript kitabxanasından gəlir. Proqramçıya sadə bir HTML yazmağa və kitabxananın onu axtarıla bilən funksiyanı və CSS kodunu daxil etmək üçün yeniləməsinə imkan verir.

ŞƏKİL 3 (yan çubuqla süzgəc)

Nəhayət, updateFilter (formData) funksiyasına sahibik. Kenar çubuğundan bir forma təqdim edildikdə istifadə olunur. Bir jQuery funksiyasından istifadə edərək başlayırıq.serializeArray () bu, bizim halımızda müəyyən edilmiş elementin HTML kodunu bir forma oxuyur və serverə göndəriləcək bir sətirdəki dəyərləri qaytarır. Və prosesi yenidən Şəkil 1 -dən başlayırıq.

Addım 13: Sona…. Nəhayət

Yaxşı, səndə var; öz onlayn qarderobunuzu qurmağınıza və ya öz layihənizi genişləndirmək üçün Google Skriptlərimdə yaradılan funksiyalardan istifadə etməyinizə kömək edəcək tam və hərtərəfli izahat.

Bu layihəni kodlaşdıran bir səyahət oldu (və bu Təlimat vasitəsi ilə sənədləşdirmə), amma prosesdən zövq aldım və ümid edirəm məhsuldan zövq alacaqsınız. Michael Jordan "tavan damdır" deyərkən düzəlişlər edən hər kəsdən eşitmək istərdim və bu tətbiqin heç bir məhdudiyyətinin olmadığını qəbul edirəm.