Looker Studio में अपना सारा डेटा कनेक्ट करना और उसे विज़ुअलाइज़ करना

1. परिचय

Looker Studio की मदद से, लाइव और इंटरैक्टिव डैशबोर्ड बनाए जा सकते हैं. साथ ही, डेटा को बेहतर तरीके से विज़ुअलाइज़ किया जा सकता है. इसके लिए, आपको कोई शुल्क नहीं देना होगा. अलग-अलग सोर्स से अपना डेटा फ़ेच करें. साथ ही, Looker Studio में जितनी चाहें उतनी रिपोर्ट बनाएं. इनमें बदलाव करने और इन्हें शेयर करने की पूरी सुविधा मिलती है. यहां दिए गए स्क्रीनशॉट में, Looker Studio डैशबोर्ड का उदाहरण दिखाया गया है:

( Looker Studio में इस उदाहरण रिपोर्ट को देखने के लिए यहां क्लिक करें)

कम्यूनिटी कनेक्टर, Looker Studio की एक सुविधा है. इसकी मदद से, इंटरनेट से ऐक्सेस किए जा सकने वाले किसी भी डेटा सोर्स से कनेक्ट होने वाले कनेक्टर बनाने के लिए, Apps Script का इस्तेमाल किया जा सकता है. कम्यूनिटी कनेक्टर, Looker Studio कम्यूनिटी ने बनाए हैं. इसका मतलब है कि कोई भी व्यक्ति कम्यूनिटी कनेक्टर बना सकता है. आपके पास कम्यूनिटी कनेक्टर को अन्य लोगों के साथ शेयर करने का विकल्प भी होता है. इससे वे Looker Studio में अपना डेटा ऐक्सेस कर सकते हैं.

कम्यूनिटी कनेक्टर का इस्तेमाल अलग-अलग कामों के लिए किया जा सकता है:

आपने किसी कमर्शियल प्लैटफ़ॉर्म (जैसे कि सोशल मीडिया, मार्केटिंग, Analytics वगैरह) से डेटा विज़ुअलाइज़ किया हो
आपने एंटरप्राइज़ के ऑन-प्रिमाइसेस डेटा को विज़ुअलाइज़ किया हो. जैसे, ऑन-प्रिमाइसेस MySQL डेटाबेस से बिक्री का डेटा
आपने अपने ग्राहकों को, आपकी सेवा से मिले डेटा को विज़ुअलाइज़ करने का तरीका उपलब्ध कराया हो
आपको पुश बटन रिपोर्टिंग प्लैटफ़ॉर्म बनाना है
आपने वेब सोर्स से मिले डेटा को विज़ुअलाइज़ किया हो. जैसे, Google Fit का डैशबोर्ड बनाना

आपको क्या सीखने को मिलेगा

Looker Studio का कम्यूनिटी कनेक्टर कैसे काम करता है
कम्यूनिटी कनेक्टर बनाने के लिए, Google Apps Script का इस्तेमाल करने का तरीका
Looker Studio में कम्यूनिटी कनेक्टर इस्तेमाल करने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

इंटरनेट और वेब ब्राउज़र का ऐक्सेस
Google खाता
बुनियादी JavaScript और वेब एपीआई के बारे में जानकारी

2. क्विक सर्वे

आपने इस कोडलैब को क्यों चुना?

मुझे डेटा विज़ुअलाइज़ेशन में दिलचस्पी है.

मुझे Looker Studio के बारे में ज़्यादा जानना है

मुझे अपना कम्यूनिटी कनेक्टर बनाना है.

मुझे Looker Studio को किसी दूसरे प्लैटफ़ॉर्म के साथ इंटिग्रेट करना है.

मुझे Google Cloud के समाधानों में दिलचस्पी है.

आपको इस कोडलैब/ट्यूटोरियल का इस्तेमाल कैसे करना है?

सिर्फ़ सरसरी तौर पर देखें

इसे पढ़ें और एक्सरसाइज़ पूरी करें

Looker Studio के बारे में आपको कितनी जानकारी है?

मैंने इसके बारे में कभी नहीं सुना

मुझे पता है कि यह क्या है, लेकिन मैं इसका इस्तेमाल नहीं करता/करती.

मैं इसका नियमित तौर पर इस्तेमाल करता/करती हूं.

मैं एक विशेषज्ञ उपयोगकर्ता हूं.

इनमें से कौनसा विकल्प आपके बैकग्राउंड के बारे में सबसे अच्छी तरह बताता है?

डेवलपर

बिज़नेस / फ़ाइनेंशियल / डेटा ऐनलिसिस्ट

डेटा साइंटिस्ट / डेटा इंजीनियर

मार्केटिंग / सोशल मीडिया / डिजिटल ऐनलिटिक्स एक्सपर्ट

डिज़ाइनर

अन्य

सर्वे की जानकारी सबमिट करने के लिए, अगले पेज पर जाएं.

3. कम्यूनिटी कनेक्टर के बारे में खास जानकारी

Looker Studio के कम्यूनिटी कनेक्टर की मदद से, Looker Studio को इंटरनेट से ऐक्सेस किए जा सकने वाले किसी भी डेटा सोर्स से सीधे कनेक्ट किया जा सकता है. आपके पास कमर्शियल प्लैटफ़ॉर्म, सार्वजनिक डेटासेट या अपने निजी डेटा से कनेक्ट करने का विकल्प होता है. कम्यूनिटी कनेक्टर, वेब एपीआई, JDBC एपीआई, फ़्लैट फ़ाइलें (CSV, JSON, XML) और Apps Script Services के ज़रिए डेटा फ़ेच कर सकते हैं.

मान लें कि आपने npm पर कोई पैकेज पब्लिश किया है. अब आपको यह ट्रैक करना है कि हर दिन उस पैकेज को कितनी बार डाउनलोड किया गया. इस कोडलैब में, आपको एक कम्यूनिटी कनेक्टर बनाना होगा. यह npm पैकेज डाउनलोड की संख्या के एपीआई का इस्तेमाल करके डेटा फ़ेच करता है. इसके बाद, Looker Studio में कम्यूनिटी कनेक्टर का इस्तेमाल करके, डाउनलोड की संख्या को विज़ुअलाइज़ करने के लिए डैशबोर्ड बनाया जा सकता है.

4. कम्यूनिटी कनेक्टर का वर्कफ़्लो

बेसिक कम्यूनिटी कनेक्टर में, आपको चार फ़ंक्शन तय करने होंगे:

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

वर्कफ़्लो के मौजूदा चरण के आधार पर, Looker Studio इन कनेक्टर फ़ंक्शन को लागू करता है और अगले चरणों में रिस्पॉन्स का इस्तेमाल करता है. नीचे दिए गए वीडियो में, इनके बारे में खास जानकारी दी गई है:

कम्यूनिटी कनेक्टर कैसे काम करता है
वर्कफ़्लो के अलग-अलग चरण
जब अलग-अलग फ़ंक्शन कॉल किए जाते हैं
Looker Studio में अलग-अलग यूज़र इंटरफ़ेस कब दिखते हैं
अलग-अलग चरणों में उपयोगकर्ता की अनुमानित कार्रवाइयां

वीडियो देखने के बाद, कोडलैब को फिर से शुरू किया जा सकता है.

इस वर्कफ़्लो को याद रखने की ज़रूरत नहीं है. बस एक बार देख लें, ताकि आपको पता चल जाए कि कनेक्टर में क्या होता है. आपके पास कभी भी इस डायग्राम पर वापस आने का विकल्प होता है.

अगले चरण में, Google Apps Script में कनेक्टर बनाना शुरू करें. आपको Apps Script यूज़र इंटरफ़ेस (यूआई) और इस कोडलैब के बीच स्विच करना होगा.

5. Apps Script प्रोजेक्ट सेट अप करना

पहला चरण: Google Apps Script पर जाएं.

दूसरा चरण: सबसे ऊपर बाईं ओर मौजूद, "+ नया प्रोजेक्ट" पर क्लिक करके, नया Apps Script प्रोजेक्ट बनाएं.

आपको Code.gs फ़ाइल में, खाली myFunction फ़ंक्शन वाला शेल प्रोजेक्ट दिखेगा.

तीसरा चरण: myFunction फ़ंक्शन मिटाएं.

चौथा चरण: प्रोजेक्ट को कोई नाम दें:

पेज में सबसे ऊपर बाईं ओर मौजूद, Untitled project पर क्लिक करें
प्रोजेक्ट का टाइटल डालें.

Code.gs फ़ाइल में कनेक्टर कोड लिखना शुरू करें.

6. getAuthType() को परिभाषित करना

जब Looker Studio को कनेक्टर के इस्तेमाल किए गए पुष्टि करने के तरीके के बारे में जानना होगा, तब वह getAuthType() फ़ंक्शन को कॉल करेगा. इस फ़ंक्शन को, पुष्टि करने का वह तरीका दिखाना चाहिए जो कनेक्टर को तीसरे-पक्ष की सेवा को अनुमति देने के लिए ज़रूरी है.

आपने npm डाउनलोड कनेक्टर बनाया है. इसके लिए, आपको किसी तीसरे पक्ष की सेवा से पुष्टि करने की ज़रूरत नहीं है. ऐसा इसलिए, क्योंकि जिस एपीआई का इस्तेमाल किया जा रहा है उसके लिए पुष्टि करना ज़रूरी नहीं है. इस कोड को कॉपी करके अपनी Code.gs फ़ाइल में जोड़ें:

Code.gs

var cc = DataStudioApp.createCommunityConnector();

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

यहां, आपने बताया है कि आपके कनेक्टर को तीसरे पक्ष की पुष्टि करने की ज़रूरत नहीं है (AuthTypes.NONE). पुष्टि करने के सभी तरीकों को देखने के लिए, AuthType() रेफ़रंस देखें.

7. getConfig() को परिभाषित करना

आपके कनेक्टर का इस्तेमाल करने वाले लोगों को, इसका इस्तेमाल शुरू करने से पहले इसे कॉन्फ़िगर करना होगा. getConfig() फ़ंक्शन के जवाब से यह तय होता है कि उपयोगकर्ताओं को कॉन्फ़िगरेशन के कौनसे विकल्प दिखेंगे. Looker Studio, कनेक्टर के कॉन्फ़िगरेशन की जानकारी पाने के लिए getConfig() फ़ंक्शन को कॉल करता है. getConfig() से मिले जवाब के आधार पर, Looker Studio, कनेक्टर कॉन्फ़िगरेशन स्क्रीन को रेंडर करेगा और कनेक्टर के कुछ व्यवहार में बदलाव करेगा.

कॉन्फ़िगरेशन स्क्रीन पर, यहां दिए गए फ़ॉर्म एलिमेंट का इस्तेमाल करके जानकारी दी जा सकती है या उपयोगकर्ता से इनपुट लिया जा सकता है:

`TEXTINPUT`	इनपुट एलिमेंट	एक लाइन का टेक्स्ट बॉक्स.
`TEXTAREA`	इनपुट एलिमेंट	कई लाइन वाला टेक्स्ट एरिया बॉक्स.
`SELECT_SINGLE`	इनपुट एलिमेंट	एक विकल्प चुनने के लिए ड्रॉपडाउन.
`SELECT_MULTIPLE`	इनपुट एलिमेंट	एक साथ कई विकल्प चुनने के लिए ड्रॉपडाउन.
`CHECKBOX`	इनपुट एलिमेंट	यह एक चेकबॉक्स होता है, जिसका इस्तेमाल बूलियन वैल्यू कैप्चर करने के लिए किया जा सकता है.
`INFO`	डिसप्ले एलिमेंट	यह एक स्टैटिक सादा टेक्स्ट बॉक्स होता है. इसका इस्तेमाल, उपयोगकर्ता को निर्देश देने या जानकारी देने के लिए किया जा सकता है.

उपयोगकर्ता को निर्देश देने के लिए, INFO एलिमेंट का इस्तेमाल करें. साथ ही, उपयोगकर्ता से इनपुट पैकेज का नाम पाने के लिए, TEXTINPUT एलिमेंट का इस्तेमाल करें. getConfig() जवाब में, इन फ़ॉर्म एलिमेंट को configParams कुंजी के तहत ग्रुप किया जाएगा.

जिस एपीआई से कनेक्ट किया जा रहा है उसके लिए तारीख को पैरामीटर के तौर पर इस्तेमाल करना ज़रूरी है. इसलिए, getConfig() रिस्पॉन्स में dateRangeRequired को true पर सेट करें. इससे Looker Studio को यह पता चलता है कि सभी डेटा अनुरोधों के साथ तारीख की सीमाएं देनी हैं. अगर आपके डेटा सोर्स के लिए तारीख को पैरामीटर के तौर पर इस्तेमाल करना ज़रूरी नहीं है, तो इसे छोड़ा जा सकता है.

अपनी Code.gs फ़ाइल में, getAuthType() के मौजूदा कोड के नीचे यह getConfig()कोड जोड़ें:

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

इन configParams के आधार पर, Looker Studio में कनेक्टर का इस्तेमाल करते समय, आपको इस तरह की कॉन्फ़िगरेशन स्क्रीन दिख सकती है. हालांकि, इसके बारे में ज़्यादा जानकारी बाद में दी जाएगी.

चलिए, अब अगले फ़ंक्शन - getSchema() के बारे में जानते हैं.

8. getSchema() को परिभाषित करना

Looker Studio, कनेक्टर के लिए उपयोगकर्ता के चुने गए कॉन्फ़िगरेशन से जुड़ा स्कीमा पाने के लिए, getSchema() फ़ंक्शन को कॉल करता है. getSchema() से मिले जवाब के आधार पर, Looker Studio उपयोगकर्ता को फ़ील्ड स्क्रीन दिखाएगा. इसमें कनेक्टर के सभी फ़ील्ड की सूची होगी.

आपके कनेक्टर के किसी खास कॉन्फ़िगरेशन के लिए, स्कीमा उन सभी फ़ील्ड की सूची होती है जिनके लिए कनेक्टर डेटा उपलब्ध करा सकता है. अलग-अलग कॉन्फ़िगरेशन के आधार पर, कनेक्टर अलग-अलग फ़ील्ड के साथ अलग-अलग स्कीमा दिखा सकता है. स्कीमा में ऐसे फ़ील्ड शामिल हो सकते हैं जिन्हें आपने एपीआई सोर्स से फ़ेच किया है. साथ ही, इसमें ऐसे फ़ील्ड भी शामिल हो सकते हैं जिनकी गिनती Apps Script में की जाती है. इसके अलावा, इसमें ऐसे फ़ील्ड भी शामिल हो सकते हैं जिनकी गिनती Looker Studio में, कैलकुलेटेड फ़ील्ड के फ़ॉर्मूले का इस्तेमाल करके की जाती है. आपका कनेक्टर, स्कीमा में मौजूद हर फ़ील्ड के बारे में मेटाडेटा उपलब्ध कराता है. इसमें यह जानकारी शामिल होती है:

फ़ील्ड का नाम
फ़ील्ड के लिए डेटा टाइप
सिमैंटिक जानकारी

ज़्यादा जानने के लिए, बाद में getSchema() और Field रेफ़रंस देखें.

कनेक्टर के डेटा फ़ेच करने के तरीके के आधार पर, स्कीमा को तय किया जा सकता है या getSchema() को कॉल किए जाने पर डाइनैमिक तरीके से कैलकुलेट किया जा सकता है. getConfig() के कॉन्फ़िगरेशन पैरामीटर, उपयोगकर्ता की ओर से तय किए जाते हैं. इन्हें getSchema() फ़ंक्शन के लिए request आर्ग्युमेंट में दिया जाएगा.

इस कोडलैब के लिए, आपको request आर्ग्युमेंट को ऐक्सेस करने की ज़रूरत नहीं है. अगले सेगमेंट में, request फ़ंक्शन के लिए कोड लिखते समय, आपको request आर्ग्युमेंट के बारे में ज़्यादा जानकारी मिलेगी.getData()

आपके कनेक्टर के लिए स्कीमा तय है. इसमें ये तीन फ़ील्ड शामिल हैं:

`packageName`	उपयोगकर्ता की ओर से दिए गए npm पैकेज का नाम
`downloads`	npm पैकेज के डाउनलोड की संख्या
`day`	डाउनलोड की संख्या की तारीख

आपके कनेक्टर के लिए getSchema() कोड यहां दिया गया है. getFields() हेल्पर फ़ंक्शन, फ़ील्ड बनाने की प्रोसेस को आसान बनाता है. ऐसा इसलिए, क्योंकि इस सुविधा की ज़रूरत getSchema() और getData(), दोनों को होती है. अपनी Code.gs फ़ाइल में यह कोड जोड़ें:

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

इस स्कीमा के आधार पर, Looker Studio में कनेक्टर का इस्तेमाल करने पर, आपको Looker Studio की फ़ील्ड स्क्रीन में ये फ़ील्ड दिख सकते हैं. हालांकि, कनेक्टर की जांच करते समय आपको इसके बारे में ज़्यादा जानकारी मिलेगी.

अब हम अपने आखिरी फ़ंक्शन - getData() पर चलते हैं.

9. getData() को परिभाषित करें: पहला हिस्सा

Looker Studio, डेटा फ़ेच करने के लिए कभी भी getData() फ़ंक्शन को कॉल करता है. getData() से मिले जवाब के आधार पर, Looker Studio डैशबोर्ड में चार्ट रेंडर और अपडेट करेगा. इन इवेंट के दौरान getData() को कॉल किया जा सकता है:

उपयोगकर्ता ने डैशबोर्ड में कोई चार्ट जोड़ा
उपयोगकर्ता ने किसी चार्ट में बदलाव किया
उपयोगकर्ता ने डैशबोर्ड देखा
उपयोगकर्ता, किसी फ़िल्टर या उससे जुड़े डेटा कंट्रोल में बदलाव करता है
Looker Studio को डेटा के सैंपल की ज़रूरत होती है

आपको इस पेज से कोई भी कोड कॉपी करने की ज़रूरत नहीं है, क्योंकि आपको पूरा किया गया

getData()

कोड डालें.

`request` ऑब्जेक्ट के बारे में जानकारी

Looker Studio, हर getData() कॉल के साथ request ऑब्जेक्ट पास करता है. नीचे दिए गए request ऑब्जेक्ट के स्ट्रक्चर की समीक्षा करें. इससे आपको getData() फ़ंक्शन के लिए कोड लिखने में मदद मिलेगी.

`request` ऑब्जेक्ट का स्ट्रक्चर

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}

configParams ऑब्जेक्ट में, getConfig() में तय किए गए और उपयोगकर्ता की ओर से कॉन्फ़िगर किए गए पैरामीटर के लिए कॉन्फ़िगरेशन वैल्यू शामिल होंगी.
scriptParams ऑब्जेक्ट में, कनेक्टर को लागू करने से जुड़ी जानकारी शामिल होगी. इस कोडलैब के लिए, आपको इसका इस्तेमाल करने की ज़रूरत नहीं है.
अगर getConfig()response में तारीख की सीमा का अनुरोध किया गया है, तो dateRange में तारीख की सीमा शामिल होगी.
fields में उन फ़ील्ड के नामों की सूची होगी जिनके लिए डेटा का अनुरोध किया गया है.

आपके कनेक्टर के लिए, getData() फ़ंक्शन से मिला request का उदाहरण कुछ ऐसा दिख सकता है:

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

ऊपर दिए गए request में getData()कॉल के लिए, सिर्फ़ दो फ़ील्ड का अनुरोध किया जा रहा है. भले ही, कनेक्टर स्कीमा में अतिरिक्त फ़ील्ड मौजूद हों. अगले पेज पर, इस getData()कॉल के लिए जवाब का उदाहरण और getData()जवाब का सामान्य स्ट्रक्चर दिया गया है.

10. getData() को परिभाषित करना: दूसरा हिस्सा

getData()जवाब में, आपको अनुरोध किए गए फ़ील्ड के लिए स्कीमा और डेटा, दोनों देने होंगे. आपको कोड को तीन सेगमेंट में बांटना होगा:

अनुरोध किए गए फ़ील्ड के लिए स्कीमा बनाएं.
एपीआई से डेटा फ़ेच और पार्स करना.
पार्स किए गए डेटा में बदलाव करना और अनुरोध किए गए फ़ील्ड के लिए फ़िल्टर करना.

getData()

अगले पेज पर मौजूद कोड.

यह आपके कनेक्टर के लिए getData() का स्ट्रक्चर है.

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

अनुरोध किए गए फ़ील्ड के लिए स्कीमा बनाना

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

एपीआई से डेटा फ़ेच करना और उसे पार्स करना

npm API का यूआरएल इस फ़ॉर्मैट में होगा:

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

Looker Studio की ओर से दिए गए request.dateRange.startDate, request.dateRange.endDate, और request.configParams.package का इस्तेमाल करके, एपीआई के लिए यूआरएल बनाएं. इसके बाद, UrlFetchApp(Apps Script Class: reference) का इस्तेमाल करके, एपीआई से डेटा फ़ेच करें. इसके बाद, फ़ेच किए गए जवाब को पार्स करें.

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

पार्स किए गए डेटा में बदलाव करना और अनुरोध किए गए फ़ील्ड के लिए फ़िल्टर करना

npm API से मिलने वाला जवाब इस फ़ॉर्मैट में होगा:

{
  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 से मिले जवाब को बदलें और getData() जवाब को इस फ़ॉर्मैट में दें. अगर यह फ़ॉर्मैट समझ में नहीं आ रहा है, तो नीचे दिए गए पैराग्राफ़ में जवाब का उदाहरण देखें.

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

जवाब में, सिर्फ़ अनुरोध किए गए फ़ील्ड के लिए स्कीमा दिखाएं. इसके लिए, schema प्रॉपर्टी का इस्तेमाल करें. आपको rows प्रॉपर्टी का इस्तेमाल करके, डेटा को लाइनों की सूची के तौर पर दिखाना होगा. हर लाइन के लिए, values में मौजूद फ़ील्ड का क्रम, schema में मौजूद फ़ील्ड के क्रम से मेल खाना चाहिए. request के पिछले उदाहरण के आधार पर, getData() के लिए मिलने वाला जवाब ऐसा दिखेगा:

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

आपने पहले ही स्कीमा का सबसेट बना लिया है. पार्स किए गए डेटा को बदलने और अनुरोध किए गए फ़ील्ड के लिए उसे फ़िल्टर करने के लिए, इस फ़ंक्शन का इस्तेमाल करें.

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() को परिभाषित करना: पार्ट 3

getData() कोड को जोड़ने के बाद, वह कुछ ऐसा दिखेगा. अपनी Code.gs फ़ाइल में यह कोड जोड़ें:

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 फ़ाइल का इस्तेमाल कर लिया है! इसके बाद, मेनिफ़ेस्ट अपडेट करें.

12. मेनिफ़ेस्ट अपडेट करना

Apps Script एडिटर में, प्रोजेक्ट सेटिंग > मेनिफ़ेस्ट फ़ाइल "appsscript.json" एडिटर में दिखाएं को चुनें.

इससे एक नई appsscript.json मेनिफ़ेस्ट फ़ाइल बन जाएगी.

अपनी appscript.json फ़ाइल की जगह यह कोड डालें:

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 Script प्रोजेक्ट सेव करें.

बधाई हो! आपने अपना पहला कम्यूनिटी कनेक्टर बना लिया है और अब इसे आज़माया जा सकता है!

13. Looker Studio में अपने कनेक्टर की जांच करना

डिप्लॉयमेंट का इस्तेमाल करना

पहला चरण: Apps Script के डेवलपमेंट एनवायरमेंट में, तैनात करें > टेस्ट डिप्लॉयमेंट पर क्लिक करके, टेस्ट डिप्लॉयमेंट डायलॉग खोलें.

डिफ़ॉल्ट डिप्लॉयमेंट, हेड डिप्लॉयमेंट के तौर पर दिखेगा.

दूसरा चरण: हेड डिप्लॉयमेंट आईडी को कॉपी करने के लिए, कॉपी करें पर क्लिक करें.

तीसरा चरण: Looker Studio में कनेक्टर लोड करने के लिए, यहां दिए गए लिंक में <HEAD_DEPLOYMENT_ID> प्लेसहोल्डर की जगह अपने कनेक्टर का हेड डिप्लॉयमेंट आईडी डालें. इसके बाद, अपने ब्राउज़र में लिंक खोलें:

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

कनेक्टर को अनुमति देना

Looker Studio का पहली बार इस्तेमाल करने वाले लोग: अगर आपने Looker Studio का इस्तेमाल पहले कभी नहीं किया है, तो आपको Looker Studio को अनुमति देने के लिए कहा जाएगा. साथ ही, आपको शर्तों और नियमों को स्वीकार करना होगा. अनुमति देने की प्रोसेस पूरी करें. Looker Studio का पहली बार इस्तेमाल करने पर, आपको मार्केटिंग से जुड़ी प्राथमिकताओं को अपडेट करने के लिए एक डायलॉग बॉक्स भी दिख सकता है. अगर आपको ईमेल से नई सुविधाओं, अपडेट, और प्रॉडक्ट से जुड़ी सूचनाओं की जानकारी चाहिए, तो प्रॉडक्ट से जुड़ी सूचनाएं पाने के लिए साइन अप करें.

लोड होने के बाद, आपको कनेक्टर को अनुमति देने का अनुरोध दिखेगा.

'अनुमति दें' पर क्लिक करें और कनेक्टर को ज़रूरी अनुमति दें.

कनेक्टर को कॉन्फ़िगर करना

अनुमति मिलने के बाद, कॉन्फ़िगरेशन स्क्रीन दिखेगी. टेक्स्ट डालने की जगह में "lighthouse" टाइप करें. इसके बाद, सबसे ऊपर दाईं ओर मौजूद कनेक्ट करें पर क्लिक करें.

स्कीमा की पुष्टि करें

आपको फ़ील्ड स्क्रीन दिखेगी. सबसे ऊपर दाईं ओर, रिपोर्ट बनाएं पर क्लिक करें.

अपना डैशबोर्ड बनाएं

इसके बाद, आपको Looker Studio के डैशबोर्ड पर ले जाया जाएगा. रिपोर्ट में जोड़ें पर क्लिक करें.

Looker Studio में, जब भी कोई उपयोगकर्ता किसी कनेक्टर को ऐक्सेस करता है और नया कॉन्फ़िगरेशन जोड़ता है, तो उसके Looker Studio खाते में एक नया डेटा सोर्स बन जाता है. डेटा सोर्स को, किसी कॉन्फ़िगरेशन के आधार पर कनेक्टर का इंस्टैंटिएशन माना जा सकता है. कनेक्टर और उपयोगकर्ता के चुने गए कॉन्फ़िगरेशन के आधार पर, डेटा सोर्स फ़ील्ड के खास सेट वाली डेटा टेबल दिखाएगा. उपयोगकर्ता, एक ही कनेक्टर से कई डेटा सोर्स बना सकते हैं. किसी डेटा सोर्स का इस्तेमाल कई रिपोर्ट में किया जा सकता है. साथ ही, एक ही रिपोर्ट में कई डेटा सोर्स का इस्तेमाल किया जा सकता है.

अब एक टाइम सीरीज़ चार्ट जोड़ें! मेन्यू में, शामिल करें > टाइम सीरीज़ पर क्लिक करें. इसके बाद, टाइम सीरीज़ को कैनवस में रखें. आपको चुने गए पैकेज के लिए, npm डाउनलोड की संख्या का टाइम सीरीज़ चार्ट दिखेगा. तारीख के हिसाब से फ़िल्टर करने का कंट्रोल जोड़ें और डैशबोर्ड को नीचे दिए गए तरीके से देखें.

हो गया! आपने अभी-अभी अपना पहला कम्यूनिटी कनेक्टर बनाया है! यह कोडलैब यहीं खत्म होता है. अब देखते हैं कि आपको आगे क्या करना है.

14. अगले चरण

बनाए गए कनेक्टर को बेहतर बनाना

अभी बनाए गए कनेक्टर में ये सुधार करें:

Looker Studio में, अगर आपने कनेक्टर के लिए कॉन्फ़िगरेशन स्क्रीन में पैकेज का नाम नहीं दिया है, तो टाइम सीरीज़ चार्ट बनाते समय आपको गड़बड़ी का मैसेज दिखेगा. अपने कनेक्टर के कॉन्फ़िगरेशन में, इनपुट की पुष्टि करने की सुविधा या डिफ़ॉल्ट विकल्प जोड़कर देखें.
अपने कनेक्टर कॉन्फ़िगरेशन में, एक साथ कई पैकेज के नामों को क्वेरी करने की सुविधा जोड़ें. अहम जानकारी: npm पैकेज डाउनलोड की संख्या बताने वाला एपीआई में, कॉमा लगाकर अलग किए गए कई पैकेज के नाम डाले जा सकते हैं.
इन दोनों समस्याओं के समाधान, हमारे npm कनेक्टर कोड में देखे जा सकते हैं.

कम्यूनिटी कनेक्टर का ज़्यादा फ़ायदा पाएं

कनेक्टर एपीआई और मेनिफ़ेस्ट के लिए, रेफ़रंस देखें.
सबसे सही तरीके समझने के लिए, हमारी ओपन सोर्स रिपॉज़िटरी में कनेक्टर कोड का उदाहरण देखें.
clasp Codelab पूरा करें, ताकि आप अपने लोकल एनवायरमेंट में कम्यूनिटी कनेक्टर बना सकें.
पूरा कम्यूनिटी कनेक्टर बनाने के बाद, पब्लिश करने के उपलब्ध विकल्पों पर विचार करें.
Looker Studio के लिए कम्यूनिटी विज़ुअलाइज़ेशन बनाएं.

अन्य संसाधन

इस कोडलैब में शामिल कॉन्टेंट के बारे में ज़्यादा जानने के लिए, यहां दिए गए अलग-अलग संसाधनों का इस्तेमाल किया जा सकता है.

संसाधन का टाइप	उपयोगकर्ता से जुड़ी सुविधाएँ	डेवलपर के लिए सुविधाएं
दस्तावेज़ के रूप में	सहायता केंद्र	डेवलपर के लिए दस्तावेज़
खबरें और अपडेट	Looker Studio > उपयोगकर्ता सेटिंग में जाकर साइन अप करें	डेवलपर के लिए ईमेल पाने वाली सूची
सवाल पूछें	उपयोगकर्ता फ़ोरम	Stack Overflow [looker-studio]
वीडियो	DataVis DevTalk
उदाहरण	रिपोर्ट गैलरी कनेक्टर गैलरी	ओपन सोर्स रिपॉज़िटरी

Looker Studio में अपना सारा डेटा कनेक्ट करना और उसे विज़ुअलाइज़ करना

1. परिचय

आपको क्या सीखने को मिलेगा

आपको किन चीज़ों की ज़रूरत होगी

2. क्विक सर्वे

आपने इस कोडलैब को क्यों चुना?

आपको इस कोडलैब/ट्यूटोरियल का इस्तेमाल कैसे करना है?

Looker Studio के बारे में आपको कितनी जानकारी है?

इनमें से कौनसा विकल्प आपके बैकग्राउंड के बारे में सबसे अच्छी तरह बताता है?

3. कम्यूनिटी कनेक्टर के बारे में खास जानकारी

4. कम्यूनिटी कनेक्टर का वर्कफ़्लो

5. Apps Script प्रोजेक्ट सेट अप करना

6. getAuthType() को परिभाषित करना

Code.gs

7. getConfig() को परिभाषित करना

Code.gs

8. getSchema() को परिभाषित करना

Code.gs

9. getData() को परिभाषित करें: पहला हिस्सा

request ऑब्जेक्ट के बारे में जानकारी

request ऑब्जेक्ट का स्ट्रक्चर

10. getData() को परिभाषित करना: दूसरा हिस्सा

अनुरोध किए गए फ़ील्ड के लिए स्कीमा बनाना

एपीआई से डेटा फ़ेच करना और उसे पार्स करना

पार्स किए गए डेटा में बदलाव करना और अनुरोध किए गए फ़ील्ड के लिए फ़िल्टर करना

11. getData() को परिभाषित करना: पार्ट 3

Code.gs

12. मेनिफ़ेस्ट अपडेट करना

appsscript.json

13. Looker Studio में अपने कनेक्टर की जांच करना

डिप्लॉयमेंट का इस्तेमाल करना

कनेक्टर को अनुमति देना

कनेक्टर को कॉन्फ़िगर करना

स्कीमा की पुष्टि करें

अपना डैशबोर्ड बनाएं

14. अगले चरण

बनाए गए कनेक्टर को बेहतर बनाना

कम्यूनिटी कनेक्टर का ज़्यादा फ़ायदा पाएं

अन्य संसाधन

`request` ऑब्जेक्ट के बारे में जानकारी

`request` ऑब्जेक्ट का स्ट्रक्चर