Looker Studio'da tüm verilerinizi bağlayın ve görselleştirin

1. Giriş

Looker Studio, mükemmel veri görselleştirmelerine sahip canlı, etkileşimli kontrol panellerini ücretsiz olarak oluşturmanızı sağlar. Tüm düzenleme ve paylaşma özellikleriyle çeşitli kaynaklardan verilerinizi getirip Looker Studio'da sınırsız rapor oluşturun. Aşağıdaki ekran görüntüsünde, örnek bir Looker Studio kontrol paneli verilmiştir:

2f296fddf6af7393.png

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

Topluluk Bağlayıcıları, Apps Komut Dosyası'nı kullanarak internetten erişilebilen herhangi bir veri kaynağı için bağlayıcılar oluşturmanıza olanak tanıyan bir Looker Studio özelliğidir. Topluluk Bağlayıcıları, Looker Studio topluluğu tarafından oluşturulur. Bu, herkesin Topluluk Bağlayıcıları oluşturabileceği anlamına gelir. Ayrıca, Topluluk Bağlayıcılarını diğer kullanıcılarla paylaşarak kendi verilerine Looker Studio içinden erişebilmelerini sağlayabilirsiniz.

Topluluk Bağlayıcılarını farklı kullanım durumlarında kullanabilirsiniz:

  • Ticari bir platformdaki (ör.sosyal medya, pazarlama, analiz vb.) verileri görselleştiriyorsanız
  • Şirket içi kurumsal verileri (ör. şirket içi MySQL veritabanından satış verileri) görselleştiriyorsanız
  • Müşterilerinize, hizmetinize ait verileri görselleştirmenin bir yolunu sunuyorsunuz.
  • Push düğmesi raporlama platformu oluşturuyorsunuz
  • Bir web kaynağındaki kendi verilerinizi görselleştiriyorsanız (ör. Google Fit kontrol panelinizi oluşturuyorsunuz)

Neler öğreneceksiniz?

  • Looker 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
  • Looker Studio'da Topluluk Bağlayıcıları kullanma

Gerekenler

  • İnternete ve web tarayıcısına erişim
  • Google Hesabı
  • Temel JavaScript ve Web API'lerine aşinalık

2. Kısa Anket

Neden bu codelab'i seçtiniz?

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

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

Yalnızca hızlı göz atma Okuyun ve alıştırmaları tamamlayın

Looker Studio'ya ne kadar aşina olduğunuzu nasıl değerlendirirsiniz?

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

Arka planınızı en iyi nasıl tanımlarsınız?

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

Anket bilgilerini göndermek için bir sonraki sayfaya geçebilirsiniz.

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

Looker Studio Topluluk Bağlayıcıları, Looker Studio'dan internet üzerinden erişilebilen herhangi bir veri kaynağına doğrudan bağlantı kurulmasını sağlar. Ticari platformlara, herkese açık veri kümelerine veya kendi şirket içi gizli 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ün bazında izlemek istediğiniz bir senaryo düşünün. Bu codelab'de npm paket indirme sayıları API'sini kullanarak veri getiren bir Topluluk Bağlayıcısı derleyeceksiniz. Ardından Topluluk Bağlayıcısı, indirme sayılarını görselleştirmeye yönelik bir kontrol paneli oluşturmak için Looker Studio'da kullanılabilir.

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

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

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

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

  • Topluluk Bağlayıcısı nasıl çalışır?
  • İş akışındaki farklı adımlar
  • Farklı fonksiyonlar
  • Looker Studio farklı kullanıcı arayüzleri gösterdiğinde
  • Farklı adımlarda beklenen kullanıcı işlemleri

Videoyu izledikten sonra codelab'i devam ettirebilirsiniz.

Bu iş akışını ezberlemeniz gerekmez. Bağlayıcıda neler olduğunu anlamak için göz atmanız yeterlidir. Bu şemaya istediğ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şturun

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

2. Adım: "+ Yeni proje" seçeneğini tıklayarak yeni bir Apps komut dosyası projesi oluşturun tıklayın.

fb12d7318d0946cf.png

Code.gs dosyasında boş myFunction işlevine sahip bir kabuk proje göreceksiniz.

b245ce5eb3dd2ee2.png

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

4. Adım: Projeye bir ad verin:

  1. Sayfanın sol üst tarafı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() değerini tanımlayın

Looker 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, üçüncü taraf hizmetini yetkilendirmek için bağlayıcının ihtiyaç duyduğu kimlik doğrulama yöntemini döndürmelidir.

Kullandığınız API herhangi bir kimlik doğrulama gerektirmediğinden, derlediğiniz npm indirme bağlayıcısı için herhangi bir üçüncü taraf hizmetiyle kimlik doğrulaması yapmanı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ı (AuthTypes.NONE) gerektirmediğini belirtiyorsunuz. Desteklenen tüm kimlik doğrulama yöntemlerini görmek için AuthType() referansını görüntüleyin.

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

Bağlayıcınızın kullanıcıları, bağlayıcıyı kullanmaya başlamadan önce yapılandırmaları gerekir. getConfig() işlevi yanıtı, kullanıcıların göreceği yapılandırma seçeneklerini tanımlar. Looker 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 Looker Studio, bağlayıcı yapılandırma ekranını oluşturur ve belirli bağlayıcı davranışını değiştirir.

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

TEXTINPUT

Giriş öğesi

Tek satırlık metin kutusu.

TEXTAREA

Giriş öğesi

Çok satırlı metin alanı kutusu.

SELECT_SINGLE

Giriş öğesi

Tekli seçim seçenekleri için açılır menü.

SELECT_MULTIPLE

Giriş öğesi

Çoklu seçim seçenekleri açılır listesi.

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 sağlamak için kullanılabilen statik bir düz metin kutusu.

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

Bağlandığınız API'de parametre olarak tarih değeri gerektiğinden getConfig() yanıtında dateRangeRequired öğesini true olarak ayarlayın. Bu sayede Looker Studio'ya, tüm veri istekleriyle birlikte tarih aralıkları sağlaması söylenir. Veri kaynağınız parametre olarak tarih gerektirmiyorsa bunu atlayabilirsiniz.

Şu getConfig() kodunu Code.gs dosyanıza, mevcut getAuthType() kodunun 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'a göre, bağlayıcıyı Looker Studio'da kullandığınızda aşağıdakine benzer bir yapılandırma ekranı görebilirsiniz. Fakat buna daha sonra değineceğim.

7de872f17e59e92.png

Bir sonraki işleve geçelim: getSchema().

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

Looker Studio, bağlayıcının kullanıcı tarafından seçilen yapılandırmayla ilişkilendirilmiş şemayı almak için getSchema() işlevini çağırır. getSchema() tarafından verilen yanıta göre Looker Studio, kullanıcıya alanlar ekranını gösterir ve bağlayıcıdaki tüm alanları listeler.

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 bir listesidir. Bir bağlayıcı, çeşitli yapılandırmalara bağlı olarak farklı alanları olan farklı bir şema döndürebilir. Şema, API kaynağınızdan getirdiğiniz alanları, Apps Komut Dosyası'nda hesapladığınız alanları ve hesaplanan bir alan formülü kullanılarak Looker Studio'da hesaplanan alanları içerebilir. Bağlayıcınız, şemadaki her alanla ilgili meta verileri sağlar. Örneğin:

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

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

Bağlayıcınızın nasıl getirdiğine bağlı olarak, getSchema() çağrıldığında şema sabitlenebilir veya dinamik olarak hesaplanabilir. getConfig() ürününde 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 için request bağımsız değişkenine erişmeniz gerekmez. Sonraki segmentte 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 sayısını indirin

day

İndirme sayısının tarihi

Bağlayıcınızın getSchema() kodunu aşağıda bulabilirsiniz. getFields() yardımcı işlevi, hem getSchema() hem de getData() için gerekli olduğundan 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, Looker Studio'da bağlayıcıyı kullandığınızda Looker Studio alanları ekranında aşağıdaki alanları görebilirsiniz. Ancak daha sonra bağlayıcınızı test ettiğinizde bunlara daha fazla değineceğiz.

c7cd7057b202be59.png

Son işlevimiz olan getData() ile devam edelim.

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

Looker Studio, veri getirmek için ihtiyaç duyduğunda getData() işlevini çağırır. getData() tarafından verilen yanıta göre Looker Studio, kontrol panelindeki grafikleri oluşturur ve günceller. getData() şu etkinlikler sırasında çağrılabilir:

  • Kullanıcı, kontrol paneline bir grafik ekler
  • Kullanıcı bir grafiği düzenler
  • Kullanıcı, kontrol panelini görüntüler
  • Kullanıcı, bir filtreyi veya ilişkili veri denetimini düzenler
  • Looker Studio'nun veri örneğine ihtiyacı var

Tamamlanan dosyayı kopyalayacağınız için bu sayfadaki herhangi bir kodu kopyalamanıza gerek yoktur.

getData()

kodlamanızı sağlar.

request nesnesini anlama

Looker Studio her getData() çağrısıyla request nesnesini iletir. Aşağıdaki request nesnesinin yapısını inceleyin. Bu, getData() fonksiyonunuzun 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() politikasında tanımlanan ve kullanıcı tarafından yapılandırılan parametreler için yapılandırma değerlerini içerir.
  • scriptParams nesnesi, bağlayıcının yürütmesiyle ilgili bilgileri içerir. Bu codelab'de bunu kullanmanız gerekmez.
  • getConfig() yanıtında istenirse dateRange, istenen tarih aralığını içerir.
  • fields, veri istenen alanların adlarının listesini içerir.

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

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

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

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

getData()Yanıtta, istenen alanlar için hem şema hem de veri sağlamanız gerekir. Kodu üç segmente böleceksiniz:

  • İstenen alanlar için şema oluşturun.
  • API'deki verileri getirin ve ayrıştırın.
  • Ayrıştırılmış verileri dönüştürün ve istenen alanlar için filtreleyin.

Tamamlanan dosyayı kopyalayacağınız için bu sayfadaki herhangi bir kodu kopyalamanıza gerek yoktur.

getData()

kodla karşılaşırsınız.

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şturun

// 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 olur:

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

Looker Studio tarafından sağlanan request.dateRange.startDate, request.dateRange.endDate ve request.configParams.package alanlarını kullanarak API'nin URL'sini oluşturun. Ardından UrlFetchApp komutunu kullanarak verileri API'den getirin(Apps Komut Dosyası Sınıfı: referans). 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ılmış verileri dönüştürün ve istenen alanlar için filtreyi kullanın

npm API'nin yanıtı aşağıdaki biçimde olur:

{
  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 paragrafta yer alan örnek yanıta göz atın.

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

Yanıtta, schema özelliğini kullanarak yalnızca istenen alanlar için şemayı döndürün. Verileri, rows özelliğini satır listesi olarak kullanarak döndürürsünüz. Her satır için values alanındaki alanların sırası, schema içindeki alanların dizisiyle eşleşmelidir. Önceki request örneğimize göre, getData() için yanıt şöyle olacaktı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ılmış verileri dönüştürmek ve istenen alanlara göre filtrelemek için 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: Bölüm 3

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 tamamladınız! Ardından, manifest dosyasını güncelleyin.

12. Manifest güncelleme

Apps Komut Dosyası düzenleyicisinde Proje Ayarları > "appsscript.json" dosyasını göster manifest dosyasını düzenleyicide açın.

90a68a58bbbb63c4.png

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

1081c738d5d577a6.png

appscript.json dosyanızı şununla 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 cihazınız test sürüşü için hazır.

13. Bağlayıcınızı Looker Studio'da test edin

Dağıtımı kullanma

1. Adım: Apps Komut Dosyası geliştirme ortamında, Dağıt'ı tıklayın > Dağıtımları test etme iletişim kutusunu açmak için Dağıtımları test edin.

3f57ea0feceb2596.png

Varsayılan dağıtım olan Head Deployment, listelenir.

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

3. Adım: Bağlayıcınızı Looker Studio'da yüklemek için <HEAD_DEPLOYMENT_ID> yer tutucusunu bağlayıcınızın Head Deployment ID'siyle değiştirin ve tarayıcınızdaki bağlantıyı izleyin:

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

Bağlayıcıyı yetkilendirin

Yeni Looker Studio kullanıcıları: Looker Studio'yu daha önce kullanmadıysanız Looker Studio'yu yetkilendirmeniz ve hükümler ve koşulları kabul etmeniz istenir. Yetkilendirme işlemini tamamlayın. Looker Studio'yu ilk kez kullandığınızda, pazarlama tercihlerinizi güncellemeniz için bir iletişim kutusu da görebilirsiniz. En son özellikler, güncellemeler ve ürün duyuruları hakkında e-posta yoluyla bilgi almak için Ürün duyuruları'na kaydolun.

Yükleme tamamlandıktan sonra, bağlayıcınızı yetkilendirmenizi isteyen bir istem görürsünüz.

d7e66726a1e64c05.png

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

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

Yetkilendirme tamamlandığında yapılandırma ekranı gösterilir. "Deniz feneri" yazın bağlantısını tıklayıp sağ üst köşedeki Bağlan 'ı tıklayın.

ec7416d6dbeabc8f.png

Şemayı onaylama

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

4a9084bd51d2fbb8.png

Gösterge tablosu oluşturma

Looker Studio kontrol paneli ortamında olursunuz. Rapora ekle'yi tıklayın.

1ca21e327308237c.png

Looker Studio'da, bir kullanıcı bağlayıcıya her eriştiğinde ve yeni bir yapılandırma eklediğinde, kullanıcının Looker Studio hesabında yeni bir veri kaynağı oluşturulur. Veri kaynağını, belirli bir yapılandırmaya göre bağlayıcının örneklendirmesi olarak düşünebilirsiniz. Bağlayıcıya ve kullanıcının seçtiği yapılandırmaya bağlı olarak bir veri kaynağı, belirli bir alan grubu içeren 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'yi tıklayın > Zaman Serisi. Ardından, zaman serisini zemine yerleştirin. Seçilen paket için npm indirme sayısının zaman serisi grafiğini görürsünüz. Tarih filtre denetimi 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! Böylece bu codelab'in sonuna gelmiş bulunuyorsunuz. Şimdi atabileceğiniz sonraki adımlara bakalım.

14. Sonraki adımlar

Oluşturduğunuz konnektörü iyileştirin

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

  • Looker Studio'da, bağlayıcınızın yapılandırma ekranında paket adı sağlamazsanız zaman serisi grafiğini çizdiğinizde 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 çok paket adını sorgulamak için destek eklemeyi deneyin. İpucu: npm paket indirme sayıları API'si birden fazla paket adının virgülle ayrılmış girişini destekler.
  • npm bağlayıcısı kodumuzda bu iki duruma yönelik çözümleri bulabilirsiniz.

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

Ek kaynaklar

Aşağıda, bu codelab'de ele alınan materyalleri daha yakından incelemenize yardımcı olacak çeşitli kaynaklar verilmiştir.

Kaynak Türü

Kullanıcı özellikleri

Geliştirici özellikleri

Belgeler

Yardım Merkezi

Geliştirici Belgeleri

Haberler ve Güncellemeler

Looker Studio'ya kaydolun > Kullanıcı Ayarları

Geliştirici Posta Listesi

Soru Sorma

Kullanıcı Forumu

Stack Overflow [looker-studio]

Videolar

DataVis DevTalk

Örnekler

Açık Kaynak Kod Deposu