Tüm verilerinizi Data Studio'da bağlayıp görselleştirme

1. Giriş

Data Studio, güzel veri görselleştirmeleri içeren canlı ve etkileşimli kontrol panellerini ücretsiz olarak oluşturmanıza olanak tanır. Verilerinizi çeşitli kaynaklardan alın ve Data Studio'da sınırsız rapor oluşturun. Düzenleme ve paylaşım özelliklerinin tamamı kullanılabilir. Aşağıdaki ekran görüntüsü, örnek bir Data Studio kontrol panelini göstermektedir:

2f296fddf6af7393.png

( Bu örnek raporu Data Studio'da görüntülemek için burayı tıklayın)

Topluluk bağlayıcıları, Data Studio'da Apps Komut Dosyası'nı kullanarak internetten erişilebilen tüm veri kaynaklarına bağlayıcılar oluşturmanıza olanak tanıyan bir özelliktir. Topluluk bağlayıcıları, Data Studio topluluğu tarafından oluşturulur. Bu nedenle, herkes topluluk bağlayıcıları oluşturabilir. Ayrıca, topluluk bağlayıcılarını diğer kullanıcılarla paylaşarak onların da Data Studio'dan kendi verilerine erişmesini sağlayabilirsiniz.

Topluluk bağlayıcılarını farklı kullanım alanlarında kullanabilirsiniz:

  • Ticari bir platformdaki (ör. sosyal medya, pazarlama, analiz vb.) verileri görselleştiriyorsunuz.
  • Şirket içi kurumsal verileri (ör. şirket içi MySQL veritabanındaki satış verileri) görselleştiriyorsanız
  • Müşterilerinize, hizmetinizdeki verilerini görselleştirebilecekleri bir yöntem sunuyorsunuz
  • Tek tuşla raporlama platformu oluşturuyorsanız
  • Web kaynağındaki kendi verilerinizi görselleştiriyorsanız (ör. Google Fit kontrol panelinizi oluşturuyorsanız)

Neler öğreneceksiniz?

  • Data Studio topluluk bağlayıcısının işleyiş şekli
  • Topluluk bağlayıcısı oluşturmak için Google Apps Komut Dosyası'nı kullanma
  • Data Studio'da topluluk bağlayıcılarını kullanma

İhtiyacınız olanlar

  • İnternet erişimi ve web tarayıcısı
  • Google Hesabı
  • Temel JavaScript ve Web API'leri hakkında bilgi

2. Kısa Anket

Neden bu codelab'i seçtiniz?

Genel olarak veri görselleştirme ile ilgileniyorum. Data Studio hakkında daha fazla bilgi edinmek istiyorum Kendi Topluluk Bağlayıcımı oluşturmak istiyorum. Data Studio'yu başka bir platformla entegre etmeye çalışıyorum. Google Cloud çözümleriyle ilgileniyorum.

Bu codelab'i/eğitimi nasıl kullanmayı planlıyorsunuz?

Yalnızca göz atın Okuyun ve alıştırmaları tamamlayın

Data Studio'ya ne kadar aşinasınız?

Hiç duymadım Ne olduğunu biliyorum ama kullanmıyorum. Düzenli olarak kullanıyorum. Uzman kullanıcıyım.

Geçmişinizi en iyi şekilde tanımlayan seçenek hangisi?

Geliştirici İş / Finans / Veri Analisti Veri Bilimci / Veri Mühendisi Pazarlama / Sosyal Medya / Dijital Analiz Uzmanı Tasarımcı Diğer

Anket bilgilerini göndermek için sonraki sayfaya gidebilirsiniz.

3. Topluluk Bağlayıcıları'na genel bakış

Data Studio topluluk bağlayıcıları, Data Studio'dan internet üzerinden erişilebilen tüm veri kaynaklarına doğrudan bağlantı oluşturulmasını sağlar. Ticari platformlara, herkese açık veri kümelerine veya kendi şirket içi özel verilerinize bağlanabilirsiniz. Topluluk Bağlayıcıları, Web API'leri, JDBC API'leri, düz dosyalar (CSV, JSON, XML) ve Apps Komut Dosyası Hizmetleri aracılığıyla veri getirebilir.

b25b8d6bea6da54b.png

npm'de bir paket yayınladığınızı ve paketin zaman içindeki indirme sayısını güne göre izlemek istediğinizi varsayalım. Bu codelab'de, npm paket indirme sayısı API'sini kullanarak veri getiren bir Topluluk Bağlayıcısı oluşturacaksınız. Topluluk Bağlayıcısı, indirme sayılarını görselleştirmek için Data Studio'da kontrol paneli oluşturmak üzere kullanılabilir.

4. Topluluk Bağlayıcısı İş Akışı

Temel bir Topluluk Bağlayıcısı'nda dört işlev tanımlarsınız:

  • getAuthType()
  • getConfig()
  • getSchema()
  • getData()

Data Studio, iş akışının mevcut adımına bağlı olarak bu bağlayıcı işlevlerini yürütür ve yanıtı sonraki adımlarda kullanır. Aşağıdaki videoda şu konularla ilgili genel bilgiler verilmektedir:

  • Topluluk Bağlayıcı'nın işleyiş şekli
  • İş akışındaki farklı adımlar
  • Farklı işlevler çağrıldığında
  • Data Studio'nun farklı kullanıcı arayüzleri gösterdiği durumlar
  • Farklı adımlarda beklenen kullanıcı işlemleri

Videoyu izledikten sonra codelab'e devam edebilirsiniz.

Bu iş akışını ezberlemenize gerek yoktur. Bağlayıcıda neler olduğunu anlamak için göz atmanız yeterlidir. Bu şemaya dilediğiniz zaman geri dönebilirsiniz.

cc6688bf38749e5.png

Sonraki adımda, Google Apps Komut Dosyası'nda bağlayıcınızı oluşturmaya başlayacaksınız. Apps Komut Dosyası kullanıcı arayüzü ile bu codelab arasında geçiş yapmanız gerekir.

5. Apps Komut Dosyası projenizi oluşturma

1. adım: Google Apps Komut Dosyası'nı ziyaret edin.

2. adım: Sol üst kısımdaki "+ Yeni proje"yi tıklayarak yeni bir Apps Komut Dosyası projesi oluşturun.

fb12d7318d0946cf.png

myFunction dosyasında boş bir Code.gs işlevi içeren bir kabuk projesi görürsünüz.

b245ce5eb3dd2ee2.png

3. adım: myFunction işlevini silin.

4. adım: Projeye bir ad verin:

  1. Sayfanın sol üst kısmındaki Untitled project simgesini tıklayın.
  2. Proje başlığı girin.

7172aebc181c91d4.png

Bağlayıcı kodunuzu Code.gs dosyasına yazmaya başlayın.

6. getAuthType() işlevini tanımlayın

Data Studio, bağlayıcı tarafından kullanılan kimlik doğrulama yöntemini bilmesi gerektiğinde getAuthType() işlevini çağırır. Bu işlev, bağlayıcının üçüncü taraf hizmetini yetkilendirmek için ihtiyaç duyduğu kimlik doğrulama yöntemini döndürmelidir.

Oluşturduğunuz npm indirme bağlayıcısı için, kullandığınız API herhangi bir kimlik doğrulama gerektirmediğinden herhangi bir üçüncü taraf hizmetiyle kimlik doğrulamanız gerekmez. Aşağıdaki kodu kopyalayıp Code.gs dosyanıza ekleyin:

Code.gs

var cc = DataStudioApp.createCommunityConnector();

function getAuthType() {
  var AuthTypes = cc.AuthType;
  return cc
    .newAuthTypeResponse()
    .setAuthType(AuthTypes.NONE)
    .build();
}

Burada, bağlayıcınızın herhangi bir üçüncü taraf kimlik doğrulaması gerektirmediğini belirtiyorsunuz (AuthTypes.NONE). Desteklenen tüm kimlik doğrulama yöntemlerini görmek için AuthType() referansını inceleyin.

7. getConfig() işlevini tanımlayın

Bağlayıcınızı kullananların, kullanmaya başlamadan önce bağlayıcıyı yapılandırması gerekir. getConfig() işlev yanıtı, kullanıcıların göreceği yapılandırma seçeneklerini tanımlar. Data Studio, bağlayıcının yapılandırma ayrıntılarını almak için getConfig() işlevini çağırır. getConfig() tarafından sağlanan yanıta göre Data Studio, bağlayıcı yapılandırma ekranını oluşturur ve belirli bağlayıcı davranışlarını değiştirir.

Yapılandırma ekranında, aşağıdaki form öğelerini kullanarak bilgi sağlayabilir veya kullanıcı girişi alabilirsiniz:

TEXTINPUT

Giriş öğesi

Tek satırlık bir metin kutusu.

TEXTAREA

Giriş öğesi

Çok satırlı bir textarea kutusu.

SELECT_SINGLE

Giriş öğesi

Tek seçimlik seçenekler için açılır liste.

SELECT_MULTIPLE

Giriş öğesi

Çoklu seçim seçenekleri için açılır liste.

CHECKBOX

Giriş öğesi

Boole değerlerini yakalamak için kullanılabilecek tek bir onay kutusu.

INFO

Görüntüleme öğesi

Kullanıcıya talimat veya bilgi vermek için kullanılabilen statik bir düz metin kutusu.

Kullanıcı talimatları sağlamak için INFO öğesini, kullanıcının giriş paket adını almak için ise TEXTINPUT öğesini kullanın. getConfig() yanıtında, bu form öğelerini configParams anahtarı altında gruplandıracaksınız.

Bağlandığınız API, tarih parametresini gerektirdiğinden getConfig() yanıtında dateRangeRequired değerini true olarak ayarlayın. Bu, Data Studio'ya tüm veri istekleriyle birlikte tarih aralıkları sağlamasını söyler. Veri kaynağınızda parametre olarak tarih gerekmiyorsa bunu atlayabilirsiniz.

Aşağıdaki getConfig()kodunu Code.gs dosyanıza, getAuthType() için mevcut kodun altına ekleyin:

Code.gs

function getConfig(request) {
  var config = cc.getConfig();
  
  config.newInfo()
    .setId('instructions')
    .setText('Enter npm package names to fetch their download count.');
  
  config.newTextInput()
    .setId('package')
    .setName('Enter a single package name')
    .setHelpText('e.g. googleapis or lighthouse')
    .setPlaceholder('googleapis');
  
  config.setDateRangeRequired(true);
  
  return config.build();
}

Bu configParams'lere göre, bağlayıcıyı Data Studio'da kullandığınızda aşağıdaki gibi bir yapılandırma ekranı görmeyi bekleyebilirsiniz. Fakat buna daha sonra değineceğim.

7de872f17e59e92.png

Bir sonraki işlev olan getSchema()'ya geçelim.

8. getSchema() işlevini tanımlayın

Data Studio, bağlayıcı için kullanıcı tarafından seçilen yapılandırmayla ilişkili şemayı almak üzere getSchema() işlevini çağırır. getSchema() tarafından sağlanan yanıta göre Data Studio, bağlayıcıdaki tüm alanların listelendiği alanlar ekranını kullanıcıya gösterir.

Bağlayıcınızın belirli bir yapılandırması için şema, bağlayıcının veri sağlayabileceği tüm alanların listesidir. Bağlayıcı, çeşitli yapılandırmalara bağlı olarak farklı alanlara sahip farklı bir şema döndürebilir. Şema; API kaynağınızdan getirdiğiniz alanları, Apps Komut Dosyası'nda hesapladığınız alanları ve hesaplanmış alan formülü kullanılarak Data Studio'da hesaplanan alanları içerebilir. Bağlayıcınız, şemadaki her alanla ilgili meta verileri sağlar. Bu veriler şunları içerir:

  • Alanın adı
  • Alan için veri türü
  • Anlamsal bilgiler

Daha fazla bilgi edinmek için getSchema() ve Field referansını inceleyin.

Bağlayıcınızın getirme şekline bağlı olarak, getSchema() çağrıldığında şema sabit olabilir veya dinamik olarak hesaplanabilir. getConfig()'da kullanıcı tarafından tanımlanan yapılandırma parametreleri, getSchema() işlevinin request bağımsız değişkeninde sağlanır.

Bu codelab'de request bağımsız değişkenine erişmeniz gerekmez. Bir sonraki bölümde getData() işlevi için kod yazarken request bağımsız değişkeni hakkında daha fazla bilgi edineceksiniz.

Bağlayıcınız için şema sabittir ve aşağıdaki 3 alanı içerir:

packageName

Kullanıcının sağladığı npm paketinin adı

downloads

NPM paketinin indirilme sayısı

day

İndirme sayısının tarihi

Bağlayıcınızın getSchema() kodunu aşağıda bulabilirsiniz. getFields() yardımcı işlevi, bu işlev hem getSchema() hem de getData() tarafından gerektiğinden alanların oluşturulmasını soyutlar. Code.gs dosyanıza aşağıdaki kodu ekleyin:

Code.gs

function getFields(request) {
  var cc = DataStudioApp.createCommunityConnector();
  var fields = cc.getFields();
  var types = cc.FieldType;
  var aggregations = cc.AggregationType;
  
  fields.newDimension()
    .setId('packageName')
    .setType(types.TEXT);
  
  fields.newMetric()
    .setId('downloads')
    .setType(types.NUMBER)
    .setAggregation(aggregations.SUM);
  
  fields.newDimension()
    .setId('day')
    .setType(types.YEAR_MONTH_DAY);
  
  return fields;
}

function getSchema(request) {
  var fields = getFields(request).build();
  return { schema: fields };
}

Bu şemaya göre, bağlayıcıyı Data Studio'da kullandığınızda Data Studio alanları ekranında aşağıdaki alanları görmeyi bekleyebilirsiniz. Ancak bağlayıcınızı test ederken bu konu hakkında daha fazla bilgi edineceksiniz.

c7cd7057b202be59.png

Son işlevimize geçelim: getData().

9. getData() işlevini tanımlama: 1. Bölüm

Data Studio, veri getirmesi gerektiğinde getData() işlevini çağırır. Data Studio, getData() tarafından sağlanan yanıta göre kontrol panelindeki grafikleri oluşturur ve günceller. getData(), aşağıdaki etkinlikler sırasında çağrılabilir:

  • Kullanıcı, kontrol paneline grafik eklediğinde
  • Kullanıcı bir grafiği düzenlediğinde
  • Kullanıcı kontrol panelini görüntüler
  • Kullanıcı, ilişkili bir filtreyi veya veri kontrolünü düzenlediğinde
  • Data Studio'nun veri örneğine ihtiyacı var

Tamamlanmış kodu kopyalayacağınız için bu sayfadan herhangi bir kodu kopyalamanıza gerek yoktur.

getData()

kodu daha sonraki bir adımda girin.

request nesnesini anlama

Data Studio, her getData() çağrısında request nesnesini iletir. Aşağıdaki request nesnesinin yapısını inceleyin. Bu, getData() işlevinizin kodunu yazmanıza yardımcı olur.

request nesne yapısı

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}
  • configParams nesnesi, getConfig() içinde tanımlanan ve kullanıcı tarafından yapılandırılan parametrelerin yapılandırma değerlerini içerir.
  • scriptParams nesnesi, bağlayıcı yürütmeyle ilgili bilgileri içerir. Bu codelab'de bunu kullanmanız gerekmez.
  • dateRange, getConfig() yanıtında istenirse istenen tarih aralığını içerir.
  • fields, veri istenen alanların adlarının listesini içerir.

Bağlayıcınız için request işlevinden alınan bir örnek getData() şu şekilde görünebilir:

{
  configParams: {
    package: 'jquery'
  },
  dateRange: {
    startDate: '2017-07-16',
    endDate: '2017-07-18'
  },
  fields: [
    {
      name: 'day',
    },
    {
      name: 'downloads',
    }
  ]
}

getData()Yukarıdaki request için bağlayıcı şemasında ek alanlar olmasına rağmen yalnızca iki alan isteniyor. Sonraki sayfada bu getData()çağrısının örnek yanıtı ve genel getData()yanıt yapısı yer alacak.

10. getData() işlevini tanımlama: 2. Bölüm

getData()Yanıtında, istenen alanlar için hem şemayı hem de verileri sağlaman gerekir. Kodu üç segmente ayıracaksınız:

  • İstenen alanlar için şema oluşturun.
  • API'den veri getirme ve ayrıştırma.
  • Ayrıştırılan verileri dönüştürün ve istenen alanlara göre filtreleyin.

Tamamlanmış kodu kopyalayacağınız için bu sayfadan herhangi bir kodu kopyalamanıza gerek yoktur.

getData()

kodunu sonraki sayfada.

Bu, bağlayıcınız için getData() yapısıdır.

function getData(request) {

  // TODO: Create schema for requested fields.
  
  // TODO: Fetch and parse data from API.
  
  // TODO: Transform parsed data and filter for requested fields.

  return {
    schema: <filtered schema>,
    rows: <transformed and filtered data>
  };
}

İstenen alanlar için şema oluşturma

// Create schema for requested fields
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

API'den veri getirme ve ayrıştırma

npm API URL'si şu biçimde olacaktır:

https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}

Data Studio tarafından sağlanan request.dateRange.startDate, request.dateRange.endDate ve request.configParams.package kullanarak API'nin URL'sini oluşturun. Ardından, UrlFetchApp(Apps Komut Dosyası Sınıfı: referans) kullanarak verileri API'den getirin. Ardından, getirilen yanıtı ayrıştırın.

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;

Ayrıştırılan verileri dönüştürme ve istenen alanlara göre filtreleme

npm API'den gelen yanıt aşağıdaki biçimde olacaktır:

{
  downloads: [
    {
    day: '2014-02-27',
    downloads: 1904088
    },
    ..
    {
    day: '2014-03-04',
    downloads: 7904294
    }
  ],
  start: '2014-02-25',
  end: '2014-03-04',
  package: 'somepackage'
}

npm API'den gelen yanıtı dönüştürün ve getData() yanıtını aşağıdaki biçimde sağlayın. Bu biçim net değilse aşağıdaki paragraftaki örnek yanıta göz atın.

{
  schema: [
    {
      object(Field)
    }
  ],
  rows: [
    {
      values: [string]
    }
  ]
}

Yanıt olarak, schema özelliğini kullanarak yalnızca istenen alanların şemasını döndürün. Verileri, rows özelliğini kullanarak satır listesi olarak döndürürsünüz. Her satır için values içindeki alanların sırası, schema içindeki alanların sırasıyla eşleşmelidir. request ile ilgili önceki örneğimize göre, getData() için yanıt şu şekilde görünür:

{
  schema: requestedFields.build(),
  rows: [
    {
      values: [ 38949, '20170716']
    },
    {
      values: [ 165314, '20170717']
    },
    {
      values: [ 180124, '20170718']
    },
  ]
}

Şemanın alt kümesini zaten oluşturdunuz. Ayrıştırılan verileri dönüştürmek ve istenen alanlar için filtrelemek üzere aşağıdaki işlevi kullanın.

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

11. getData() işlevini tanımlama: 3. Bölüm

Birleştirilmiş getData() kodu aşağıdaki gibi görünür. Code.gs dosyanıza aşağıdaki kodu ekleyin:

Code.gs

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

function getData(request) {
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;
  var rows = responseToRows(requestedFields, parsedResponse, request.configParams.package);

  return {
    schema: requestedFields.build(),
    rows: rows
  };
}

Code.gs dosyasıyla işiniz bitti. Ardından, manifest dosyasını güncelleyin.

12. Manifesti güncelleme

Apps Komut Dosyası Düzenleyici'de Proje Ayarları > "appsscript.json" manifest dosyasını düzenleyicide göster'i seçin.

90a68a58bbbb63c4.png

Bu işlem, yeni bir appsscript.json manifest dosyası oluşturur.

1081c738d5d577a6.png

appscript.json dosyanızı aşağıdakilerle değiştirin:

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",

  "dataStudio": {
    "name": "npm Downloads - From Codelab",
    "logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.png",
    "company": "Codelab user",
    "companyUrl": "https://developers.google.com/looker-studio/",
    "addonUrl": "https://github.com/googledatastudio/example-connectors/tree/master/npm-downloads",
    "supportUrl": "https://github.com/googledatastudio/community-connectors/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"]
  }
}

Apps Komut Dosyası projesini kaydedin.

5701ece1c89415c.png

Tebrikler! İlk topluluk bağlayıcınızı oluşturdunuz ve test etmeye hazır.

13. Bağlayıcınızı Data Studio'da test etme

Dağıtımı kullanma

1. adım: Test dağıtımları iletişim kutusunu açmak için Apps Komut Dosyası geliştirme ortamında Dağıt > Test dağıtımları'nı tıklayın.

3f57ea0feceb2596.png

Varsayılan dağıtım olan Ana Dağıtım listelenir.

2. adım: Head Deployment ID'yi kopyalamak için Kopyala'yı tıklayın.

3. adım: Bağlayıcınızı Data Studio'ya yüklemek için aşağıdaki bağlantıda yer alan <HEAD_DEPLOYMENT_ID> yer tutucusunu bağlayıcınızın Head Deployment ID'si ile değiştirin ve tarayıcınızda bağlantıyı takip edin:

https://lookerstudio.google.com/datasources/create?connectorId=<HEAD_DEPLOYMENT_ID>

Bağlayıcıyı yetkilendirin

Data Studio'yu ilk kez kullananlar: Data Studio'yu daha önce kullanmadıysanız Data Studio'yu yetkilendirmeniz ve hüküm ve koşulları kabul etmeniz istenir. Yetkilendirme işlemini tamamlayın. Data Studio'yu ilk kez kullandığınızda pazarlama tercihlerinizle ilgili bir iletişim kutusu da görebilirsiniz. En son özellikler, güncellemeler ve ürün duyurularıyla ilgili gelişmeleri e-posta yoluyla öğrenmek istiyorsanız Ürün duyuruları'na kaydolun.

Yüklendikten sonra bağlayıcınızı yetkilendirmeniz istenir.

d7e66726a1e64c05.png

Yetkilendir'i tıklayın ve bağlayıcı için gerekli yetkilendirmeyi sağlayın.

Bağlayıcıyı yapılandırma

Yetkilendirme tamamlandığında yapılandırma ekranı gösterilir. Metin giriş alanına "lighthouse" yazın ve sağ üstteki Bağlan'ı tıklayın.

ec7416d6dbeabc8f.png

Şemayı onaylayın

Alanlar ekranını görürsünüz. Sağ üstteki Rapor Oluştur'u tıklayın.

4a9084bd51d2fbb8.png

Gösterge tablosu oluşturma

Data Studio kontrol paneli ortamında olacaksınız. Rapora Ekle'yi tıklayın.

1ca21e327308237c.png

Data Studio'da bir kullanıcı her bağlayıcıya erişip yeni bir yapılandırma eklediğinde, kullanıcının Data Studio hesabında yeni bir veri kaynağı oluşturulur. Veri kaynağını, belirli bir yapılandırmaya dayalı olarak bağlayıcının somutlaştırılmış hali olarak düşünebilirsiniz. Kullanıcının seçtiği bağlayıcıya ve yapılandırmaya bağlı olarak, bir veri kaynağı belirli bir alan grubuna sahip bir veri tablosu döndürür. Kullanıcılar aynı bağlayıcıdan birden fazla veri kaynağı oluşturabilir. Bir veri kaynağı birden fazla raporda kullanılabilir ve aynı raporda birden fazla veri kaynağı kullanılabilir.

Şimdi bir zaman serisi grafiği ekleyin. Menüde Ekle > Zaman Serisi'ni tıklayın. Ardından zaman serisini tuvale yerleştirin. Seçilen paket için npm indirme sayısının zaman serisi grafiğini görürsünüz. Tarih filtresi kontrolü ekleyin ve kontrol panelini aşağıda gösterildiği gibi görüntüleyin.

4c076e07665f57aa.gif

İşte bu kadar. İlk topluluk bağlayıcınızı oluşturdunuz. Bu işlem sizi bu codelab'in sonuna getirir. Şimdi de sonraki adımlarda neler yapabileceğinize bakalım.

14. Sonraki adımlar

Oluşturduğunuz bağlayıcıyı iyileştirme

Yeni oluşturduğunuz bağlayıcıda iyileştirmeler yapın:

  • Data Studio'da bağlayıcınızın yapılandırma ekranında paket adı sağlamazsanız zaman serisi grafiğini çizerken bir hata mesajı görürsünüz. Bağlayıcı yapılandırmanıza giriş doğrulaması veya varsayılan bir seçenek eklemeyi deneyin.
  • Bağlayıcı yapılandırmanıza aynı anda birden fazla paket adını sorgulama desteği eklemeyi deneyin. İpucu: npm paket indirme sayısı API'si virgülle ayrılmış birden fazla paket adının girişini destekler.
  • Bu sorunların her ikisi için de npm bağlayıcı kodumuzda çözümler bulabilirsiniz.

Topluluk Bağlayıcıları ile daha fazlasını yapın

Ek kaynaklar

Bu codelab'de ele alınan materyalleri daha ayrıntılı bir şekilde incelemenize yardımcı olacak çeşitli kaynaklara aşağıdan erişebilirsiniz.

Kaynak Türü

Kullanıcı Özellikleri

Geliştirici Özellikleri

Belgeler

Yardım Merkezi

Geliştirici Belgeleri

Haberler ve Güncellemeler

Data Studio > Kullanıcı Ayarları'nda kaydolun.

Geliştirici Posta Listesi

Soru sorma

Kullanıcı Forumu

Stack Overflow [looker-studio]

Videolar

DataVis DevTalk

Örnekler

Açık Kaynak Deposu