1. Giriş
Google E-Tablolar ile Apps Komut Dosyası'nın Temelleri adlı codelab oynatma listesinin beşinci bölümüne hoş geldiniz. Bu codelab'de, veri kümesi grafiği oluşturmak için Apps Komut Dosyası'ndaki E-Tablo hizmetini nasıl kullanacağınız açıklanmaktadır. Ayrıca, grafiği Google Slaytlar'da yeni bir sunuya aktarmak için Slaytlar hizmetini nasıl kullanacağınızı da öğreneceksiniz.
Neler öğreneceksiniz?
- Apps Komut Dosyası ile çizgi grafik oluşturma
- Grafikleri yeni bir Slaytlar sunusuna aktarma
- E-Tablolar'da kullanıcılara iletişim kutularını nasıl sunacağınızı öğrenin.
Başlamadan önce
Bu codelab, Google E-Tablolar ile Apps Komut Dosyası'nın Temelleri oynatma listesindeki beşinci codelab'dir. Bu codelab'e başlamadan önce önceki codelab'leri tamamladığınızdan emin olun:
İhtiyacınız olanlar
- Bu oynatma listesinin önceki codelab'lerinde ele alınan temel Apps Komut Dosyası konuları hakkında bilgi sahibi olmanız gerekir.
- Apps Komut Dosyası düzenleyici hakkında temel bilgi
- Google E-Tablolar'ı temel düzeyde kullanabilme
- E-Tablolar A1 Notasyonunu okuma özelliği
- JavaScript ve
Stringsınıfı hakkında temel düzeyde bilgi sahibi olma
2. Kur
Devam etmeden önce bazı verilerin bulunduğu bir e-tabloya ihtiyacınız var. Daha önce olduğu gibi, bu alıştırmalar için kopyalayabileceğiniz bir veri sayfası sağladık. Aşağıdaki adımları uygulayın:
- Veri sayfasını kopyalamak için bu bağlantıyı tıklayın ve ardından Kopya oluştur'u tıklayın. Yeni e-tablo, Google Drive klasörünüze yerleştirilir ve "Tarihler ve ABD Doları Döviz Kurlarının Kopyası" olarak adlandırılır.
- E-tablo başlığını tıklayın ve "Tarihler ve ABD Doları Döviz Kurları Kopyası" olan başlığı "Tarihler ve ABD Doları Döviz Kurları" olarak değiştirin. E-tablonuz, farklı tarihlerdeki farklı ABD doları döviz kurlarıyla ilgili bazı temel bilgileri içerecek şekilde aşağıdaki gibi görünmelidir:
- Komut dosyası düzenleyiciyi açmak için Uzantılar > Apps Komut Dosyası'nı tıklayın.
Zaman kazanmanız için bu e-tabloya özel bir menü oluşturmanıza yardımcı olacak bir kod ekledik. E-tablonuzun kopyası açıldığında menünün göründüğünü fark etmiş olabilirsiniz:
Bu e-tablo ve proje ile codelab'e başlamaya hazırsınız. Grafikler ve zamana dayalı tetikleyiciler hakkında bilgi edinmeye başlamak için sonraki bölüme geçin.
3. Apps Komut Dosyası ile E-Tablolar'da grafik oluşturma
Bir veri kümesini görselleştirmek için belirli bir grafik tasarlamak istediğinizi varsayalım. Apps Komut Dosyası'nı kullanarak Google E-Tablolar'da grafik oluşturabilir, düzenleyebilir ve ekleyebilirsiniz. Bir e-tabloda bulunan grafiklere yerleştirilmiş grafik adı verilir.
Grafikler, bir veya daha fazla veri serisini görselleştirmek için kullanılır. Yerleştirilmiş grafiklerde sunulan veriler genellikle e-tablonun içinden alınır. Genellikle, e-tablodaki verilerin güncellenmesi, E-Tablolar'ın grafiği de otomatik olarak güncellemesine neden olur.
Apps Komut Dosyası'nı kullanarak sıfırdan özelleştirilmiş, yerleştirilmiş grafikler oluşturabilir veya mevcut grafikleri güncelleyebilirsiniz. Bu bölümde, Apps Komut Dosyası ve Spreadsheet hizmeti ile E-Tablolar'da yerleştirilmiş grafikler oluşturmanın temelleri tanıtılmaktadır.
Uygulama
Veri e-tablonuzun kopyasında, "Tarihler ve Döviz Kurları" veri kümesi, farklı tarihlerdeki farklı para birimlerinin döviz kurlarını (1 ABD doları için) gösterir. Bu verilerin bir bölümünü görselleştirmek için grafik oluşturan bir Apps Komut Dosyası işlevi uygulayacaksınız.
Aşağıdaki adımları uygulayın:
- Apps Komut Dosyası Düzenleyici'de, komut dosyası projenizin
Code.gskomut dosyasının sonuna,onOpen()işlevinden sonra aşağıdaki işlevi ekleyin:
/**
* Creates and inserts an embedded
* line chart into the active sheet.
*/
function createEmbeddedLineChart() {
var sheet = SpreadsheetApp.getActiveSheet();
var chartDataRange = sheet.getRange(
'Dates and USD Exchange Rates dataset!A2:F102');
var hAxisOptions = {
slantedText: true,
slantedTextAngle: 60,
gridlines: {
count: 12
}
};
var lineChartBuilder = sheet.newChart().asLineChart();
var chart = lineChartBuilder
.addRange(chartDataRange)
.setPosition(5, 8, 0, 0)
.setTitle('USD Exchange rates')
.setNumHeaders(1)
.setLegendPosition(Charts.Position.RIGHT)
.setOption('hAxis', hAxisOptions)
.setOption("useFirstColumnAsDomain", true)
.build();
sheet.insertChart(chart);
}
- Senaryo projenizi kaydedin.
Kod incelemesi
Eklediğiniz kod, temel bir çizgi grafik oluşturmak için "Tarihler ve ABD doları döviz kurları veri kümesi" grafiği menü öğesi tarafından çağrılan işlevi uygular. Kodu inceleyelim.
İlk satırlar aşağıdaki üç değişkeni ayarlar:
sheet: Şu anda etkin olan sayfaya yapılan bir referans.chartDataRange: Görselleştirmek istediğimiz veri aralığı. Kod, Dates and USD Exchange Rates dataset adlı sayfada A2 ile F102 arasındaki hücreleri kapsayan aralığı belirtmek için A1 gösterimini kullanır. Sayfayı özel olarak adlandırarak, aralık her zaman veri konumunu kapsadığından farklı bir sayfa etkin olsa bile menü öğesinin çalışmasını sağlarız. 2. satırdan itibaren başlamak, sütun başlıklarını dahil ettiğimiz ve yalnızca en son 100 tarihi (satır) grafiğe dökeceğimiz anlamına gelir.hAxisOptions: Kodun yatay eksenin görünümünü yapılandırmak için kullandığı bazı ayar bilgilerini içeren temel bir JavaScript nesnesi. Özellikle, yatay eksen metin etiketlerini 60 derecelik bir eğimle ayarlar ve dikey kılavuz çizgilerinin sayısını 12 olarak belirler.
Bir sonraki satırda çizgi grafik oluşturucu nesnesi oluşturulur. Apps Komut Dosyası'ndaki yerleştirilmiş grafikler, Builder tasarım kalıbı kullanılarak oluşturulur. Bu tasarım kalıbının tam açıklaması bu codelab'in kapsamı dışındadır. Bu nedenle, şimdilik Spreadsheet hizmetinin çeşitli EmbeddedChartBuilder sınıfları sağladığını anlamanız yeterlidir. Kodunuz, grafik oluşturmak için önce yerleştirilmiş bir grafik oluşturucu nesnesi oluşturur, grafik ayarlarını tanımlamak için bu nesnenin yöntemlerini kullanır ve ardından son EmbeddedChart nesnesini oluşturmak için bir build() yöntemini çağırır. Tüm grafik yapılandırması oluşturucu sınıflar aracılığıyla yönetildiğinden kodunuz EmbeddedChart nesnesini hiçbir zaman doğrudan değiştirmez.
E-Tablo hizmeti, bir üst EmbeddedChartBuilder sınıfı ve ondan devralınan birden fazla alt oluşturucu sınıfı (ör. EmbeddedLineChartBuilder) sağlar. Alt sınıflar, Apps Komut Dosyası'nın yalnızca belirli grafik türleri için geçerli olan grafik yapılandırma yöntemlerini oluşturuculara sağlamasına olanak tanır. Örneğin, EmbeddedPieChartBuilder sınıfı yalnızca pasta grafikler için geçerli olan bir set3D() yöntemi sağlar.
Kodunuzda bu satır, oluşturucu nesne değişkenini lineChartBuilder oluşturur:
var lineChartBuilder = sheet.newChart().asLineChart();
Kod, EmbeddedChartBuilder nesnesi oluşturmak için Sheet.newChart() yöntemini çağırır ve ardından oluşturucu türünü EmbeddedLineChartBuilder olarak ayarlamak için EmbeddedChartBuilder.asLineChart() yöntemini kullanır.
Ardından kod, lineChartBuilder'ı kullanarak grafiği oluşturur. Kodun bu bölümü, grafik ayarlarını tanımlamak için kullanılan bir dizi yöntem çağrısından ve ardından grafiği oluşturmak için kullanılan bir build() çağrısından oluşur. Önceki codelab'lerde gördüğünüz gibi, kodun okunabilirliğini korumak için yöntem zincirleme kullanılır. Yöntem çağrıları şunları yapar:
addRange(range): Grafiğin gösterdiği veri aralığını tanımlar.setPosition(anchorRowPos, anchorColPos, offsetX, offsetY): Grafiğin sayfada nereye yerleştirileceğini belirler. Burada kod, grafiğin sol üst köşesini H5 hücresine yerleştiriyor.setTitle(title): Grafik başlığını ayarlar.setNumHeaders(headers): Veri aralığındaki kaç satır veya sütunun başlık olarak ele alınacağını belirleyin. Burada kod, veri aralığındaki ilk satırı başlık olarak kullanır. Bu nedenle, söz konusu satırdaki metin, grafikteki her bir veri serisi için etiket olarak kullanılır.setLegendPosition(position): Grafik açıklamasını grafiğin sağ tarafına taşır. Bu yöntemde parametre olarak Charts.Position numaralandırması kullanılır.setOption(option, value): Karmaşık grafik seçeneklerini ayarlar. Burada kod,hAxisseçeneğinihAxisOptionsnesnesine ayarlar. Bu yöntemi kullanarak ayarlayabileceğiniz çeşitli seçenekler vardır. Her grafik türü için seçenekler ve olası değerler Charts API Grafik Galerisi'nde belgelenmiştir. Örneğin, çizgi grafikler için ayarlayabileceğiniz seçenekler Çizgi grafik yapılandırma seçenekleri bölümünde açıklanmıştır.setOption(option, value)yöntemi ileri düzey bir konu olduğundan Apps Komut Dosyası'nda grafik oluşturma konusunda daha rahat olana kadar bu yöntemi kullanmaktan kaçınabilirsiniz.build(): Yukarıdaki ayarları kullanarak birEmbeddedChartnesnesi oluşturur ve döndürür.
Son olarak, kod, oluşturulan grafiği etkin sayfaya yerleştirmek için Sheet.insertChart(chart) işlevini çağırır.
Sonuçlar
Biçimlendirme işlevinizin nasıl çalıştığını görmek için aşağıdakileri yapın:
- Henüz yapmadıysanız komut dosyası projenizi Apps Komut Dosyası Düzenleyici'ye kaydedin.
- Veri kümesini sun > "Tarihler ve ABD doları döviz kurları veri kümesi" grafiği menü öğesini tıklayın.
Komut dosyanız artık verilerinizin sağına yeni bir grafik yerleştiriyor:
Tebrikler, Apps Komut Dosyası ile yerleştirilmiş bir çizgi grafik oluşturdunuz. Sonraki bölümde, grafiğinizi Google Slaytlar'a nasıl aktaracağınız açıklanmaktadır.
4. Grafiklerinizi Slaytlar'a aktarma
Apps Komut Dosyası'nın en büyük avantajlarından biri, verileri bir Google Workspace uygulamasından diğerine kolayca taşımanıza olanak tanımasıdır. Bu uygulamaların çoğunda, E-Tablo hizmetine benzer özel bir Apps Komut Dosyası hizmeti bulunur. Örneğin, Gmail'de Gmail hizmeti, Google Dokümanlar'da Doküman hizmeti ve Google Slaytlar'da Slaytlar hizmeti bulunur. Tüm bu yerleşik hizmetlerle, bir uygulamadan veri ayıklayabilir, bu verileri işleyebilir ve sonucu başka bir uygulamaya yazabilirsiniz.
Bu bölümde, Google e-tablosundaki her yerleştirilmiş grafiği yeni bir Google Slaytlar sunusuna nasıl aktaracağınızı öğreneceksiniz. Ayrıca, E-Tablolar'da kullanıcı özel mesajlarınızı göstermenin iki yolunu da göreceksiniz.
Uygulama
Burada, Veri kümesini sun > Grafikleri Slaytlar'a aktar menü öğesi tarafından çağrılan işlevi uygulayacaksınız. Aşağıdaki adımları uygulayın:
- Apps Komut Dosyası Düzenleyici'de, komut dosyası projenizin
Code.gskomut dosyasının sonuna,createEmbeddedLineChart()işlevinden sonra aşağıdaki işlevi ekleyin:
/**
* Create a Slides presentation and export
* all the embedded charts in this spreadsheet
* to it, one chart per slide.
*/
function exportChartsToSlides() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
// Fetch a list of all embedded charts in this
// spreadsheet.
var charts = [];
var sheets = ss.getSheets();
for (var i = 0; i < sheets.length; i++) {
charts = charts.concat(sheets[i].getCharts());
}
// If there aren't any charts, display a toast
// message and return without doing anything
// else.
if (charts.length == 0) {
ss.toast('No charts to export!');
return;
}
// Create a Slides presentation, removing the default
// title slide.
var presentationTitle =
ss.getName() + " Presentation";
var slides = SlidesApp.create(presentationTitle);
slides.getSlides()[0].remove();
// Add charts to the presentation, one chart per slide.
var position = {left: 40, top: 30};
var size = {height: 340, width: 430};
for (var i = 0; i < charts.length; i++) {
var newSlide = slides.appendSlide();
newSlide.insertSheetsChart(
charts[i],
position.left,
position.top,
size.width,
size.height);
}
// Create and display a dialog telling the user where to
// find the new presentation.
var slidesUrl = slides.getUrl();
var html = "<p>Find it in your home Drive folder:</p>"
+ "<p><a href=\"" + slidesUrl + "\" target=\"_blank\">"
+ presentationTitle + "</a></p>";
SpreadsheetApp.getUi().showModalDialog(
HtmlService.createHtmlOutput(html)
.setHeight(120)
.setWidth(350),
"Created a presentation!"
);
}
- Senaryo projenizi kaydedin.
Kod incelemesi
Bu kod, beklediğinizden daha kısa olabilir. Kodu beş bölüme ayırarak ne yaptığını inceleyelim:
1: Grafikleri alma
İlk birkaç satır, etkin e-tabloda arama yaparak tüm yerleştirilmiş grafikleri bulur ve bunları charts dizisinde toplar. Bu satırlar, sayfa ve grafik listelerini almak için Spreadsheet.getSheets() yöntemini ve Sheet.getCharts() yöntemini kullanır. Her sayfadaki grafik listesini charts'ye eklemek için JavaScript Array.concat() yöntemi kullanılır.
2: Dışa aktarılacak grafiklerin olup olmadığını kontrol edin
Kod, dışa aktarılacak grafik olup olmadığını doğrular. Boş bir sunu oluşturmaktan kaçınmak istiyoruz. Bu nedenle, grafik yoksa kod bunun yerine Spreadsheet.toast(message) kullanarak toast mesajı oluşturur. Bu, E-Tablolar'ın sağ alt köşesinde açılan, birkaç saniye kalan ve sonra kaybolan küçük bir "göz atma" iletişim kutusudur:
Dışa aktarılacak grafik yoksa kod, kısa mesaj oluşturur ve başka bir işlem yapmadan çıkar. Dışa aktarılacak grafikler varsa kod, sonraki birkaç satırda sunu oluşturmaya devam eder.
3. Sunu oluşturma
Yeni sununun dosya adını tutmak için presentationTitle değişkeni oluşturulur. Bu değer, elektronik tablonun adı olarak ayarlanır ve sonuna " Presentation" eklenir. Ardından kod, sunu oluşturmak için Slaytlar hizmeti yöntemini SlidesApp.create(name) çağırır.
Yeni sunular tek bir boş slaytla oluşturulur. Bunu sunumumuzda istemediğimiz için kod, Presentation.getSlides() ve Slide.remove() ile kaldırır.
4: Grafikleri dışa aktarın
Bir sonraki bölümde, kod, içe aktarılan grafiklerin slaytta nereye yerleştirileceğini ve grafiğin ne kadar büyük olacağını (piksel cinsinden) ayarlamak için JavaScript nesnelerinin position ve size değerlerini tanımlar.
Kod, grafik listesindeki her grafiği döngüye alır. Her grafik için newSlide oluşturulur ve Presentation.appendSlide() ile slayt sununun sonuna eklenir. Slide.insertSheetsChart(sourceChart, left, top, width, height) yöntemi, grafiği belirtilen position ve size ile birlikte slayta aktarmak için kullanılır.
5: Sunu konumunu paylaşın
Son olarak, kodun kullanıcıya yeni sunumun nerede olduğunu bildirmesi gerekir. Tercihen, sunumu açmak için tıklayabileceği bir bağlantı da eklenmelidir. Bunun için kod, HTML hizmetini kullanarak özel bir modal iletişim kutusu oluşturur. Modal iletişim kutuları (Apps Komut Dosyası'nda özel iletişim kutuları olarak da bilinir), E-Tablolar arayüzünün üzerinde görünen pencerelerdir. Özel iletişim kutuları gösterildiğinde kullanıcıların E-Tablolar ile etkileşimde bulunması engellenir.
Özel iletişim kutusu oluşturmak için kodun, içeriğini tanımlayan HTML'ye ihtiyacı vardır. Bu, html değişkeninde sağlanır. İçerik, kısa bir paragraf ve bir köprü içerir. Köprü, presentationTitle değişkenidir ve Presentation.getUrl() tarafından sağlanan sunu URL'sine bağlanır. Köprüde ayrıca target="_blank" özelliği de kullanılır. Bu nedenle sunu, iletişim kutusunda değil yeni bir tarayıcı sekmesinde açılır.
HTML, HtmlService.createHtmlOutput(html) yöntemiyle HtmlOutput nesnesine ayrıştırılır. HtmlOutput nesnesi, kodun HtmlOutput.setHeight(height) ve HtmlOutput.setWidth(width) ile özel iletişim kutusunun boyutunu ayarlamasına olanak tanır.
htmlOutput oluşturulduktan sonra kod, verilen başlığa sahip iletişim kutusunu göstermek için Ui.showModalDialog(htmlOutput, title) yöntemini kullanır.
Sonuçlar
İkinci menü öğesini uyguladığınıza göre artık bu öğeyi kullanabilirsiniz. exportChartsToSlides() işlevini test etmek için:
- Henüz yapmadıysanız komut dosyası projenizi Apps Komut Dosyası Düzenleyici'ye kaydedin.
- E-tablonuzu açın ve dışa aktarılacak bir grafik oluşturmak için Veri kümesini sun > "Tarihler ve ABD doları döviz kurları veri kümesi" grafiği menü öğesini tıklayın. Etkin sayfadaki H5 hücresine sabitlenmiş olarak görünür.
- Veri kümesini sun > Grafikleri Slaytlar'a aktar menü öğesini tıklayın. Komut dosyasına yeniden yetki vermeniz istenebilir.
- Komut dosyanızın isteği işlediğini ve özel iletişim kutusunu gösterdiğini görmeniz gerekir.
- Yeni Slaytlar sunusunu açmak için Tarihler ve ABD Doları Döviz Kurları Sunusu bağlantısını tıklayın:
İsterseniz e-tablonuza daha fazla grafik ekleyebilir ve birden fazla slayt içeren bir sunu oluşturmak için menü öğesini yeniden seçebilirsiniz.
Artık E-Tablolar'da oluşturulan grafikleri Slaytlar sunusuna aktarabilirsiniz. Özel bir iletişim kutusu oluşturmak için kod da yazabilirsiniz.
Bu codelab'in son alıştırmasını tamamladınız. Öğrendiklerinizi gözden geçirmek için sonraki bölüme geçin.
5. Sonuç
Tebrikler. Bu codelab'i ve Google E-Tablolar ile Apps Komut Dosyası'nın Temelleri adlı codelab oynatma listesinin tamamını tamamladınız. E-Tablolar deneyiminizi genişletmek ve Apps Komut Dosyası'nın özelliklerini keşfetmek için bu oynatma listesinde öğretilen ilkeleri kullanabilirsiniz.
Bu codelab'i faydalı buldunuz mu?
Öğrendikleriniz
- Apps Komut Dosyası ile yerleştirilmiş bir çizgi grafik oluşturma
- E-Tablolar'da kullanıcıya nasıl kısa mesajlar ve özel iletişim kutuları gösterileceğini öğrenin.
- Grafiği yeni bir Slaytlar sunusuna aktarma
Sırada ne var?
Bu oynatma listesini başarıyla tamamladınız. Ancak Apps Komut Dosyası hakkında daha fazla bilgi edinmeniz gerekiyor.
Aşağıdaki kaynaklara göz atın:
- Apps Komut Dosyası geliştirici belgeleri
- Apps Komut Dosyası Kılavuzları
- Apps Komut Dosyası Referans belgeleri
- StackOverflow'daki Apps Komut Dosyası soruları
- GitHub'da Apps Komut Dosyası kod örnekleri
İyi komut dosyası yazmalar dileriz.