Gardırop Düzenleyici: 13 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:19

İster kıyafet alışverişi yapın, ister her zaman herhangi bir öğeyi ödünç almanız istensin, her yerden dolabınıza bakıp benzer bir şeye sahip olup olmadığınızı görmek istediğiniz zamanlar vardır. Dolap Düzenleyici tam da bunu VE DAHA FAZLASINI yapar!

Bu bir tek durak noktasıdır ve diğer birçok amaç için geniştir. My Wardrobe Organizer, bir SQL veritabanı olarak Google E-Tablolar, verileri işlemek için Google Komut Dosyaları ve bu verilere yönelik çevrimiçi bir portal için Google WebApp'in bir birleşimidir. Son kullanıcı tüm öğeleri görebilir, belirli bir şey için filtreleyebilir, öğeleri ödünç verildi olarak işaretleyebilir, çamaşırlarını yönetebilir ve annenin her yıl Noel için size aynı gömleği almasını engelleyebilir*.

(*Garanti Yoktur. Anneler siz isteseniz de istemeseniz de istediğini alır)

Yukarıdaki resimdeki web sitesi tasarımına hızlı bir göz atıldığında, tanıdık bir düzen tanınabilir. Gardırop Düzenleyici, herhangi bir sıradan giyim sitesi gibi kurulmuştur. Üstte departmanlar ve yanda sağlanan filtreler tarafından ayrılan bu arayüz, sıradan kullanıcılara işlevsellik ile aşinalık getiriyor. VE kullanımı basittir.

1. Adım: Kendi Kopyanızı Ayarlayın

Bu projenin kendi kopyanızı oluşturarak başlayalım.

Google sürücü

Sizi bu uygulamanın mevcut sürümüne götürmek için yukarıdaki Bağlantıya tıklayın.

Bu klasörde 3 öğe göreceksiniz: Google Formu, Google E-Tablosu ve Klasör.

Google E-Tablosuna sağ tıklayın ve Kopyasını Oluştur'a tıklayın.

Bu kopyanın Konumunu kendi Drive'ınıza ayarlayın.

Bu belgeyi kopyaladıktan sonra, Google Formu, Google E-Tablosunu taşıdığınız klasörde otomatik olarak oluşturulacaktır.

Klasörü oluşturmak için (bu, öğe resimlerinin yüklemelerini toplamak için gereklidir), kopyalanan Google Formunu tıkladığınızda, yüklemeler için klasör konumunu geri yüklemenizi isteyen bir istem görüntülenir.

Artık kendiniz üzerinde çalışmak için bu belgenin bir kopyasına sahipsiniz!

2. Adım: Google Formuna Genel Bakış

Artık bu uygulamanın kendi sürümünüze sahip olduğunuza göre, etrafa bir göz atalım.

Google Formunuz birçok farklı öğe türünü kabul edecek şekilde ayarlanmıştır. Ancak gömlekler, pantolonlar, elbiseler ve ayakkabıların hepsinin farklı beden sınırlamaları vardır. Bu nedenle, bu formun farklı bir bölümü, öğenizi gönderdiğiniz departmana göre doldurulacaktır. (Erkek Makale) şablonumda 5 farklı boyutlandırma kategorisi oluşturdum. (Kadın Makaleleri için buraya tıklayın, çok daha fazlası var).

Her boyutlandırma bölümünün altında toplayacağım her parametre için benzersiz bir başlık oluşturdum. Veritabanımızda "Beden" adında birden fazla sütun olmasını istemiyoruz veya bu bedenin hangi tür giysiler için geçerli olduğunu belirleyemeyiz.

Her bölümün sonunda, kullanıcı bu formun son kısmına yönlendirilir: Konum. Kuru Temizlemecilerde, çamaşırhanede, yerlerinde veya bir arkadaşımın ödünç almasına izin verdiğim eşyaları belirlemek için Kişisel olarak Konum eklemeyi seçtim. Bu benim organize olmamı sağlıyor ve hiçbir zaman bir yerde bir parça kıyafetim eksikmiş gibi hissetmiyorum.

Başından beri bahsettiğim gibi, bu proje milyonlarca farklı şekilde genişletilebilir. Envanter, daha kesin bir organizasyon aracı veya kesinlikle ödünç kıyafet almak için kullanabilirsiniz. Ekleyebileceğiniz alanlar ve bölümler sonsuzdur, bu yüzden formumdakilerle sınırlı hissetmeyin. (Kadın Makaleleri için tıklayınız)

Kendi öğelerinizden birkaçını yüklemeye başlamadan önce, doğru gönderimi sağlamak için bir sonraki adıma geçelim.

3. Adım: Google Komut Dosyaları: (Sunucu Code.gs) Verilere ve Kodlara İlk Bakış

Google E-Tablolar belgesine tıkladığınızda, birçok veri sütunu (ve gösteri için bırakılmış bazı satırlar) göreceksiniz. Form gönderimi sırasında bazı bölümler atlanıyor, bu bazı sütunlardaki eksik verilerden belli oluyor. Ancak, bu öğelerdeki düzenlemeleri daha iyi izlemek için Kimlik, Varsayılan Konum, Kim ve Güncellendi gibi ek sütunlar eklendi.

Bu veritabanında gezinirken benzersiz bir tanımlayıcıya izin vermek için formu gönderdiğinizde bir kimlik alanı oluşturulmuştur. Bu alanı oluşturmak için Araçlar>Script Düzenleyici'ye tıklayarak Script Düzenleyici'ye göz atacağız.

Komut Dosyası Düzenleyicisi açıkken, bu yeni pencerenin kenar çubuğunda 8 belge göreceksiniz. Bu belgeler, arka uç sürecini, ön uç ekranlarını ve ön uç işlevselliğini kontrol etmeye yardımcı olur. Her birine atlayacağız (eğer takılırsanız) ama şimdi Sunucu Koduna tıklayın.

Server Code.gs dosyasında birçok işlev vardır:

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

onSubmit(e) - Bu işlev, bir Google Formu gönderildiğinde çalışacak ilk işlev olarak yapılandırılacaktır. Birçok farklı işlemin gerçekleşmesine izin vermek için bu işlevin içine başka işlevler yerleştirebilirsiniz.

onOpen (e) - Bu işlev, Google E-Tablolar açıldığında çağrılır. Uygulama bağlantılarına ve görünümlerine hızlı erişim sağlamak için yeni bir menü seçeneği sunar.

doGet()- Bu işlev, Web Uygulaması adres çağrısında çağrılır. Bir kullanıcı yayınlanan Web Uygulamasına göz attığında, bu kod o sayfaya neyin görüntüleneceğini söyleyecektir. Bu durumda, Application.html belgesidir.

include(fileName) - Bu işlev, başka bir belgeyi okumak ve içeriklerini başka bir sayfa içinde uygun bir HTML biçimine eklemek için HTML sayfalarının içinde kullanılır. CSS.html ve JS.html dosyalarımız için kullanıyoruz.

openApplication() ve openLaundryApp() - Bu işlevler, bir kullanıcı Google Sheet araç çubuğuna eklenen menü düğmelerini tıkladığında çalıştırılacak kodu içerir.

changeValueOnSubmit(e) ve setIDOnSubmit(e)- Şimdilik inceleyeceğimiz fonksiyonlar bunlar. Form ilk gönderildiğinde belirli alanları varsayılan değerlerle güncellemekten sorumludurlar.

Adım 4: OnFormSubmit'i Etkinleştirme

Bu iki işlev, changeValueOnSubmit(e) ve setIDOnSubmit(e), bir form gönderme kullanıcı eylemine bağlanmalıdır. Bunu yapmak için bir Tetikleyiciyi etkinleştirmemiz gerekiyor.

Düzenle > Mevcut projenin tetikleyicileri'ne tıklayarak tetikleyiciyi etkinleştiriyoruz. Bu, Google Developer Hub'ı açar.

Tetik panosunun sağ alt köşesinde Tetik ekle düğmesi bulunur. Buraya Tıkla.

Şimdi bir form gönderildiğinde çalışacak işlevi ayarlayacağız. Bizim durumumuzda bir onSubmit() işlevinin içine koyduğum birden fazla işlevim (changeValueOnSubmit(e) ve setIDOnSubmit(e)) var, bu yüzden yalnızca 1 tetikleyici ayarlamam gerekiyor. Bu nedenle, onSubmit() öğesini seçeceğiz ve bu tetikleyiciyi On form send çalıştıracak şekilde ayarlayacağız.

Artık bir Google E-Tablosunu benzersiz tanımlayıcılarla dolduracak ve varsayılan değerleri ayarlayacak bir çalışma formumuz var.

Artık Google Formunu kullanarak kendi öğelerinizi yükleyebilirsiniz. (Zaten demo değerleri olduğu için bu devam etmek gerekli değildir). Şimdi kullanıcı arayüzüne dalacağız.

Adım 5: Kullanıcı Arayüzünü Ayarlama

HOŞGELDİNİZ! Sonunda geldiğiniz kısma ulaştık, Kullanıcı Arayüzü!!!!

İlk bakışta, burada hiçbir şey yok. Henüz herhangi bir arama yapmadık. Sayfayı daha hızlı yüklemek için, ilk sayfayı TÜM öğelerinizle rahatsız etmemeye ve görmek istediklerinizi daha hızlı tıklamanıza izin vermeye karar verdim. Durum böyle olduğundan, ana içerik alanında hiçbir öğe ve kenar çubuğunda hiçbir filtre yoktur. Veritabanımızda ne olduğunu görmek için Tümü'ne tıklayalım.

Artık veritabanımızdaki her öğeyi ana içerik alanına yükledik. Resimleri, kimlik numaralarını, rengi, boyutları ve yerleri göreceksiniz. Konum alanı buradan güncellenebilir! Ödünç almaya karar verirseniz, bu seçeneği seçebilir, dolabınıza, şifonyerinize veya çamaşırhanenize koyabilirsiniz.

Ve kenar çubuğumuzda, yeni sorgumuzdaki her giyim eşyası için mümkün olan her alana sahibiz. Bu kenar çubuğunda 20 farklı boyut seçeneği olduğunu hayal edin, bu çok etkili olmaz, o yüzden Aksesuarlar 'a tıklayarak aramamızı daraltalım.

Artık Aksesuarları yüklediğimize göre, kenar çubuğuna bir göz atın. Bu sorgudaki her öğe için geçerli olan parametreler olduğundan yalnızca 3 alana ayarlanmıştır. Renge göre sıralama yapacağım. Renk seçeneğine tıkladığınızda bir açılır kutu görünür. Burada ya istediğim rengi yazıp sonra seçebilirim ya da seçeneğimi hemen görürsem tıklayacağım. Bu gösteri için Kırmızı'yı seçtim. Bu kenar çubuğunun altındaki Filtre Uygula'yı tıkladığınızda, ana içerik, renk parametresi olarak Kırmızı rengi ayarlanmış öğeleri göstererek yenilenecektir.

Daha önce bu veritabanının ödünç aldığım ve çamaşırlarımdaki eşyalarımı yönetmeme yardımcı olduğundan bahsetmiştim. Bunu biraz daha kolaylaştırmak için, bu ana sayfadaki her açılır konuma manuel olarak tıklamak yerine Çamaşır Modu'nu oluşturdum. Google E-Tablo sayfasına dönün ve Uygulama Görünümü altında Çamaşır Modu'nu göreceksiniz. Bu seçenek, yalnızca Çamaşırhane konumuna sahip öğeleri gösteren daha küçük bir model açacaktır. Artık tüm bu öğeleri, normalde depolandıkları konumlarına geri yerleştirecek olan Varsayılan olarak işaretleyebilirim.

Adım 7: Proje Tamamlandı

TEBRİKLER

Öğelerinizi yönetmek için yalnızca çalışan bir veritabanı isteyenler için Çevrimiçi Düzenleyicinize hoş geldiniz. Bu uygulamanın arkasındaki kodla ilgilenen meraklı beyinler için. Ben onu yıkarken yanında kal.

*Kendi öğelerinizden en az birini veritabanına girdikten sonra test öğelerini silmekte özgürsünüz. (Eğer takılırsan daha sonra açıklarım).

Adım 8: Adım 1: Arka Uç Kodu (Sunucu Kodu.gs)

Daha önce Server Code.gs dosyasını açtık ve amaçları az önce kurduğunuz öğelerin her birine hizmet etmek olduğundan, işlevlerin her birinin hızlı bir şekilde gözden geçirilmesini sağladım, ancak şimdi bunları bazı işlevsellik ve yardımcı programları parçalayacağız. Bu kodu başarılı kılmak için.

1) Tablo geçişi:

var ss = SpreadsheetApp.getActiveSpreadsheet();var sayfa = ss.getSheetByName("Form Yanıtları 1"); var aralık = sayfa.getRange(1, 1, sayfa.getMaxRows()); var rowNum = range.getLastRow();

• Bu kod, bir Google E-Tablosunu geçmek için bir temeldir. Sayfayı numara yerine adıyla çağırırım, böylece sayfalar silinir veya işlev tarafından yeniden düzenlenirse yine de düzgün çalışabilir.
• Bu kodda, tablodaki tüm veriler için yalnızca Aralık topluyorum.

2) Kimlik atama:

var LastID =range.getCell(rowNum-1, 1);var CellValue = Number(LastID.getValue());var ColA = 1; var maks =15; var min=5; CellValue = CellValue+ Math.round((Math.random()* (maks - min) + min)); e.source.getActiveSheet().getRange(range.getLastRow(), ColA).setValue(CellValue); changeValueOnSubmit(e);

• Kullanıcı kendisi için en az bir değer gönderene kadar demo değerlerinin tabloda bırakılmasını daha önce istemiştim. Bunun nedeni, Otomatik Kimlik oluşturucunun doldurmak için veritabanındaki son değere dayanmasıdır.
• Son satırdan son satıra kadar getiriyorum çünkü son satır yeni değerimiz ve ID değeri için 1. sütun.
• Daha sonra rastgele 5 ile 15 arasında bir sayı üretip son değere ekliyorum. *
• Son olarak bu değeri son satırın ID sütununa yerleştiriyorum.
• Daha sonra changeValueOnSubmit(e) işlevini çağırırız.

* Rakamların askılarda, giysi etiketlerinde veya barkodlarda karışıklığa neden olmayacak kadar yakın olmaması için gelecekteki etiketleme ve Google Home entegrasyonuna izin vermek için 5-15'i seçtim.

3) URL Değerini Değiştirme:

var DataChange = e.namedValues["Öğe Resmi"];var DefaultLocation = e.namedValues["Bu giysiyi nerede tutuyorsunuz?"]; var ColdD = ColumnID_("Öğe Resmi") +1; var ColLoc = ColumnID_("Varsayılan Konum")+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);

• Bir Google Formu aracılığıyla fotoğraf gönderirken, Google E-Tablolar'a eklenen URL, asıl belgeye bir bağlantıdır. Bizim durumumuzda, bir HTML sayfası oluştururken bağlantının sadece resim olmasını istiyoruz.
• "Açık" ı değiştirerek URL'nin "uc?export=view&" kısmına bunun yerine resme bir bağlantı oluşturduk.
• Bu yeni değeri tekrar mevcut Öğe Resmi bağlantısının bulunduğu yere yerleştireceğiz.
• Ayrıca, öğenin "Varsayılan Konum" ve "Geçerli Konum" öğelerini veritabanında aynı şeye ayarlıyorum. Bu, Çamaşır Modumu kullanmaya çalışırken yardımcı olacaktır.

• Bir sonraki sayfada inceleyeceğiz ama bu, oluşturduğum ColumnID_() işlevine ilk bakışımız.

  Bu işlev, ad yerine sütun numarası gerektiren Aralık çağrısı için yararlı olan sütun tamsayısına çevirmek için Sütun Adlarını kullanır

4) Elektronik TabloApp.getUI()

• İkinci resimde, Google E-Tablosuna ek bir Araç Çubuğu Menüsü oluşturmak için kullanılan SpreadsheetApp.getUI()'nin kullanımını görebilirsiniz.
• .getUI() işlevi ayrıca Çamaşırhane modu için ve web sitesi arayüzüne hızlı bir bağlantı olarak kullanılan kalıcı bir açılır pencere oluşturmaya yardımcı olur.

5) HTML Hizmeti

• Bu kodda kullanılan iki tür HTML Hizmeti vardır: Şablon ve HTMLOutput
• Şablon, kodun HTML kodunun içine eklenmesine izin verir, böylece sayfa çağrıldığında bir sunucudan gelen bilgiler doldurulabilir.
• HTML Çıktısı, basit HTML sayfalarını görüntüler.
• Ayrıca, birden çok HTML dosyası oluşturmamıza ve dosyanın içeriğini bir dize yerine bir HTML biçiminde döndürerek bunları şablonlu tek bir HTML dosyasında birleştirmemize olanak tanıyan include() yöntemine de sahibiz.

Google Apps'ta kaynak kodun ve işlevselliğin nasıl açıklandığına aşinalık kazandırmak için Google App Komut Dosyaları Belgeleri gibi ayarlanmış bir belge ekledim.

Adım 9: Adım 2: Arka Uç Kodu Bölüm 2 (Sunucu Çağrıları.gs)

Şimdi Server Calls.gs'ye girdik. Bu işlevler öncelikle HTML JavaScript'te kullanılır, bu nedenle esas olarak Server Code.gs'de bulunan arka uçta kullanılan koddan ayrılmıştır.

Resim 1) Global Değişkenler:

Resim 2) Öğeleri getirme:

Resim 3) fetchItemsQry

Resim 4) filtreÖğeler

Resim 5) fetchFiltersWithQry

Resim 6) ColumnID ve CacheCalls

Bunların her biri hakkında konuşacak çok şey var. Kodu parçalamak ve neler olduğunu açıklamak için biraz daha fazla yazma alanına ihtiyacım vardı. Ekli, ServerCalls.gs'nin kod dökümü için bir belgedir.

Bu belge, Google Uygulama Komut Dosyaları Belgeleri gibi ayarlanmıştır ve hatta benzer nesnelere bağlantılar oluşturur.

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

HTML kodu, bir Eğitilebilir'in iletişim kutusunda çok mutsuz olur. Bu yüzden lütfen yukarıdaki resimlerle birlikte takip edin.

1) Application.html sayfasının başlığında bir başlık oluşturuyoruz ve yüklenmesi için CSS.html sayfamızı çağırıyoruz.

*Şablonlu bir HTML sayfası olduğundan, Server Code.gs'de bulunan daha önce bahsedilen include(pageName) yöntemini kullanarak mevcut ekranı karıştırmadan bu belgeye daha fazla kod ekleyebiliriz.

Ana başlık kutusu da bu resimde bulunur. Başlığı buradan değiştirebilir ve "[Adınız]'ın Gardırobunu" veya bu sayfayı tanımak istediğiniz herhangi bir şeyi girebilirsiniz.

2) Başlığın hemen altında üst gezinme çubuğumuz bulunur.

Bu gezinme çubuğu, Google E-Tablolarımızın içindeki Makale sayfasında listelenen tüm makale türlerini içerir.

Bu öğelerin bir dizisini getirmek için bir satır içi işlev çağrılır. Ardından, bu seçeneklerin her birini bir eylem koduyla birlikte bir menü düğmesi olarak dahil etmek için bir döngü çalıştırılır, böylece bir kullanıcı menü düğmesine tıkladığında ilgili öğeler gövde alanında görünür.

3) Ana gövde.

Bu kısımda 4 kısım bulunmaktadır. Bir metin çıktısı, kenar çubuğu filtresi, ana gövde görüntüleri ve JS içerir.

Metin çıktısı, kullanıcının seçtikleri menü seçeneğine başvurmak yerine, şu anda ne tür öğelere baktıklarına ilişkin hızlı bir metin görünümü görmesine olanak tanır.

Kenar çubuğu filtresi, bir kullanıcının seçtiği öğe türü için kullanılabilen birçok filtreyi içerir. Bu filtreler, bu kategori için mevcut olan tüm seçeneklerin yanı sıra o kategori değerine kaç öğenin düştüğünü de yansıtır. Bu kenar çubuğu JavaScript koduyla doldurulur (bu daha sonra tartışılacaktır).

Ana gövde şu anda boştur, ancak tıpkı filtreler gibi, kullanıcı bir kategori seçtiğinde ve JavaScript Kodu bu alanı doldurduğunda, Öğenin Kimliği, Rengi, Boyutlandırması ve Konumunu ayrıntılandıran öğe kutuları ile doldurulacaktır.

Son olarak içerir(JS), hadi bir sonraki adımda buna bir göz atalım.

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

Sunucu Kodunun ağır bir bölüm olduğunu düşünüyorsanız, bunun bir yükünü alın.

Burada HTML ve SeverCode'umuzu kullanıcı etkileşimleriyle birleştiriyoruz. Tıklanan herhangi bir öğe, uygun verileri almak ve okunabilir bir biçimde döndürmek için burada işlenmelidir. O halde ilk çağrılarımıza bir göz atalım:

Komut dosyası şunları çağırır: Bu proje için 3 farklı kitaplık kullanıyorum; jquery, önyükleme ve özel bir önyükleme seçme eklentisi. Bu kitaplıklar, nesnelerin biçimlendirilmesine ve HTML kodu içindeki öğelere daha kolay çağrı yapılmasına olanak tanır.

Bir sonraki önemli JavaScript satırım aşağıdadır:

$(belge).keypress(function(event){ if (event.what == '13') { event.preventDefault(); } });

Burada, formlardan herhangi birini tetiklemek için enter tuşunu devre dışı bırakıyorum. Bu durumda olduğu gibi, Google Web Apps'a yalnızca bir sayfa adresi atanır. Enter tuşuna basmak, HTML adresine veri ekler ve kullanıcıyı yeniden yönlendirmeye çalışır. Bunu devre dışı bırakarak, JavaScript kodunuzun tüm işi yapmasına izin vermiş olursunuz.

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

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

İşte Server Code.gs dosyasına çağrı yapan iki fonksiyon. Çizgi:

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

pek çok çalışma parçası var ama iskelet, HTML sayfasına aşağıdaki işlevin sunucuda olduğunu söyleyen "google.script.run" dan geliyor.

• Bu kodun son biti çalıştırılacak fonksiyondur. Bu örnekte ServerRemoveFilter()
• Bir withSuccessHandler() ekleyerek, HTML sayfası artık döndürülen verilerle ne yapacağını bilir ve bu, işlevi parantez içinde çalıştırmaktır.
• Aynısı withFailureHandler() için de geçerlidir.

Artık Sunucu Kodu çağrısını çözdüğümüze göre, bu sunucu çağrıları başarılı ve başarısız olduğunda ne olduğuna hızlıca bir göz atalım.

function allGood(e){ console.log("Sunucuda Başarı"); } function onFailure(hata){ $("#message-box").html("

Şu anda Giyim Öğeleri Alınamıyor. HATA: " + error.message +"

"); } function FailDBUpdate(hata){ $("#message-box").html("

Konumu değiştirmek için erişiminiz yok. HATA: " + error.message +"

"); $(".location-selects").prop('devre dışı', 'devre dışı'); }

allGood() olarak görebileceğiniz konum işlevi çalıştırıldığında başarıyı belirtmek için çok basit bir konsol günlüğü oluşturdum.

Hataları işlerken, bu iki işlev, kullanıcının "mesaj kutusu" kimliğine sahip HTML nesnesine bir jQuery çağrısı kullanarak görebileceği hata mesajını verir.

Şimdi cesur işlere geçelim

Adım 12: Adım 5: JavaScript Kod Tıklama Eylemleri (JS.html)

Üst menü çubuğunda her makale türü için seçenekler bulunur. Tıklamada çalıştırdıkları işlev:

function filterType(makale, id){ $("ul.navbar-nav li.active").removeClass("etkin"); $("#currentArticle").html(" //HTML KODU BURADA");

updateSideBar = doğru;

google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure).fetchItems("Makaleler", makale); var newSelect = "#type-"+id; $(newSelect).addClass("etkin"); $("#myNavbar").removeClass("in"); }

Bu kodda, sunucuyu bilgi almak için çağıran bir google.script.run'umuz olduğunu görebiliriz. Bu çağrının başarı işlevi updateItems() işlevidir.

RESİM 1 (bu işlevdeki ağır HTML koduyla, bu kutuda bir karışıklık görünmeden kodu kesinlikle kopyalamak zordur)

updateItems() kodunda birçok şey oluyor. Bir kez daha bize geri gönderilen Nesne üzerinden geçmeli ve her bir öğeyi ana gövde sayfamıza eklemeliyiz.

HTML kodu, kodu bölmek ve itemData'nın nereye eklendiğini okumayı ve görmeyi kolaylaştırmak için Diziler olarak eklenir.

Her öğenin döngüsünde, Açıklamada görmek istemediğim Varsayılan, zaman damgası ve resim URL'si gibi alanları kaldırıyorum. Bunun yerine bir etikete href olarak eklendiğinden, resim URL'sini açıklamadan kaldırdım. Bu bilgiler toplandıktan sonra jQuery.append() işlevi kullanılarak ana gövdeye gönderilir.

Sayfaya tüm itemler eklendikten sonra bu item sorgusu tekrar Server Code'a gönderilerek resim 2'de görüldüğü gibi filtre seçenekleri sıralanır ve döndürülür.

RESİM 2 (SideBar'ın güncellenmesi)

updateItems() işlevine çok benzer şekilde, bir kez daha HTML kodu dizilerine ve tüm filtre seçenekleri için bir döngüye sahibiz. Göze çarpan tek değişiklik jQuery.selectpicker('refresh'). Bu fonksiyon son adımda eklediğimiz script kütüphanesinden gelmektedir. Programcının basit bir seçme HTML yazmasına ve kütüphanenin onu CSS kodunun yanı sıra aranabilir işlevi içerecek şekilde güncellemesine izin verir.

RESİM 3 (kenar çubuğuyla filtreleme)

Son olarak updateFilter(formData) fonksiyonumuz var. Bu, kenar çubuğundan bir form gönderildiğinde kullanılır. Bir jQuery işlevi.serializeArray() kullanarak başlıyoruz, bu, bizim durumumuzda bir formda tanımlanan öğenin HTML kodunu okur ve sunucuya gönderilecek bir dizedeki değerleri döndürür. Ve işlemi tekrar Resim 1'den başlatıyoruz.

Adım 13: Son…. sonunda

işte sende var; kendi çevrimiçi gardırobunuzu oluşturmanıza veya kendi projenizi genişletmek için Google Komut Dosyalarımda oluşturulan işlevleri kullanmanıza yardımcı olacak eksiksiz ve kapsamlı bir açıklama.

Bu projeyi kodlamak (ve bu Eğitilebilir Kitap aracılığıyla belgelemek) bir yolculuktu, ancak süreçten keyif aldım ve ürünü beğeneceğinizi umuyorum. Michael Jordan'ın "Tavan çatıdır" dediği gibi ayarlamalar yapan herkesten haber almayı çok isterim ve bu uygulamanın sınırı olmadığına katılıyorum.