Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Data Studio में अपने सभी डेटा को कनेक्ट और विज़ुअलाइज़ करना

1. परिचय

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

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

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

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

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

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

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

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

इंटरनेट और वेब ब्राउज़र का ऐक्सेस
Google खाता
JavaScript और Web API की बुनियादी जानकारी

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

डेवलपर

कारोबार / फ़ाइनेंस / डेटा विश्लेषक

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

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

डिज़ाइनर

अन्य

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

जब Data 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() फ़ंक्शन के जवाब से पता चलता है कि उपयोगकर्ताओं को कॉन्फ़िगरेशन के कौनसे विकल्प दिखेंगे. Data Studio, कनेक्टर के कॉन्फ़िगरेशन की जानकारी पाने के लिए getConfig() फ़ंक्शन को कॉल करता है. getConfig() से मिले जवाब के आधार पर, Data Studio, कनेक्टर के कॉन्फ़िगरेशन की स्क्रीन रेंडर करेगा और कनेक्टर के कुछ व्यवहार में बदलाव करेगा.

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

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

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

जिस एपीआई से कनेक्ट किया जा रहा है उसके लिए तारीख को पैरामीटर के तौर पर इस्तेमाल करना ज़रूरी है. इसलिए, getConfig() रिस्पॉन्स में dateRangeRequired को true पर सेट करें. इससे Data 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 के आधार पर, Data Studio में कनेक्टर का इस्तेमाल करने पर, आपको इस तरह की कॉन्फ़िगरेशन स्क्रीन दिख सकती है. हालांकि, इसके बारे में ज़्यादा जानकारी बाद में दी जाएगी.

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

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

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

आपके कनेक्टर के किसी भी कॉन्फ़िगरेशन के लिए, स्कीमा उन सभी फ़ील्ड की सूची होती है जिनके लिए कनेक्टर डेटा उपलब्ध करा सकता है. अलग-अलग कॉन्फ़िगरेशन के आधार पर, कनेक्टर अलग-अलग फ़ील्ड के साथ अलग-अलग स्कीमा दिखा सकता है. स्कीमा में ऐसे फ़ील्ड शामिल हो सकते हैं जिन्हें आपने एपीआई सोर्स से फ़ेच किया है. साथ ही, इसमें Apps Script में कैलकुलेट किए गए फ़ील्ड और कैलकुलेटेड फ़ील्ड के फ़ॉर्मूले का इस्तेमाल करके Data 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 };
}

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

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

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

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

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

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

getData()

कोड डालें.

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

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

Data 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. Data Studio में अपने कनेक्टर की जांच करना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

14. अगले चरण

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

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

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

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

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

अन्य संसाधन

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

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

Data Studio में अपने सभी डेटा को कनेक्ट और विज़ुअलाइज़ करना

1. परिचय

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

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

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

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

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

आपको Data 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. Data Studio में अपने कनेक्टर की जांच करना

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

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

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

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

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

14. अगले चरण

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

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

अन्य संसाधन

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

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