कस्टम घटक बनाना

खास जानकारी

Embed API में कई बिल्ट-इन कॉम्पोनेंट होते हैं और यह आपको खुद का बनाने का एक आसान तरीका भी देता है. इस दस्तावेज़ में नया कस्टम कॉम्पोनेंट बनाने और अपने ऐप्लिकेशन में तीसरे पक्ष के कॉम्पोनेंट शामिल करने का तरीका बताया गया है.

कस्टम कॉम्पोनेंट बनाना

कस्टम एम्बेड एपीआई कॉम्पोनेंट, gapi.analytics.createComponent को कॉल करके और कॉम्पोनेंट के नाम और तरीके ऑब्जेक्ट को पास करके, बनाए जाते हैं.

createComponent को भेजा गया नाम, कॉम्पोनेंट के कंस्ट्रक्टर फ़ंक्शन का नाम होगा और इसे gapi.analytics.ext में सेव किया जाएगा. मेथड ऑब्जेक्ट में, ऐसे सभी फ़ंक्शन या प्रॉपर्टी होनी चाहिए जिन्हें आपको कॉम्पोनेंट के प्रोटोटाइप में जोड़ना है.

gapi.analytics.createComponent('MyComponent', {
  execute: function() {
    alert('I have been executed!');
  }
});

कॉम्पोनेंट बनाने के बाद, इसका इस्तेमाल करने के लिए, कॉम्पोनेंट कंस्ट्रक्टर के साथ new ऑपरेटर को कॉल किया जा सकता है.

// Create a new instance of MyComponent.
var myComponentInstance = new gapi.analytics.ext.MyComponent();

// Invoke the `execute` method.
myComponentInstance.execute() // Alerts "I have been executed!"

शुरू करने का तरीका

किसी मेथड ऑब्जेक्ट को createComponent में पास करने से, आपको कॉम्पोनेंट के प्रोटोटाइप का ऐक्सेस मिल जाता है, लेकिन इससे आपको कॉम्पोनेंट के कंस्ट्रक्टर का ऐक्सेस नहीं मिलता.

इस समस्या को ठीक करने के लिए, जब नए Embed API कॉम्पोनेंट बनाए जाएंगे, तो वे अपने-आप यह खोज लेंगे कि initialize नाम का एक तरीका मौजूद है. अगर यह मिल जाता है, तो इसे उसी arguments के साथ शुरू किया जाएगा जो कंस्ट्रक्टर को पास किया गया है. आम तौर पर, कंस्ट्रक्टर में डाले जाने वाले सभी लॉजिक को, इनीशियलाइज़ेशन मेथड में रखा जाना चाहिए.

यहां एक उदाहरण दिया गया है, जिसमें नए MyComponent इंस्टेंस बनाए जाने पर कुछ डिफ़ॉल्ट प्रॉपर्टी सेट की जाती हैं.

gapi.analytics.createComponent('MyComponent', {
  initialize: function(options) {
    this.name = options.name;
    this.isRendered = false;
  }
});

var myComponentInstance = new gapi.analytics.ext.MyComponent({name: 'John'});
alert(myComponentInstance.name); // Alerts "John"
alert(myComponentInstance.isRendered); // Alerts false

इनहेरिट किए गए तरीके

createComponent तरीके से बनाए गए कॉम्पोनेंट, सभी बिल्ट-इन कॉम्पोनेंट (get, set, on, once, off, emit) के शेयर किए गए बुनियादी तरीकों को अपने-आप इनहेरिट करेंगे. इससे यह पक्का होता है कि सभी कॉम्पोनेंट एक जैसा और अनुमान लगाने लायक तरीके से काम करते हैं.

उदाहरण के लिए, अगर आपके कॉम्पोनेंट के लिए उपयोगकर्ता को अनुमति देना ज़रूरी है, तो इनहेरिट किए गए इवेंट हैंडल करने के तरीकों का इस्तेमाल करके ऐसा किया जा सकता है.

gapi.analytics.createComponent('MyComponent', {
  initialize: function() {
    this.isRendered = false;
  },
  execute: function() {
    if (gapi.analytics.auth.isAuthorized()) {
      this.render();
    }
    else {
      gapi.analytics.auth.once('success', this.render.bind(this));
    }
  },
  render: function() {
    if (this.isRendered == false) {

      // Render this component...

      this.isRendered = true;
      this.emit('render');
    }
  }
});

var myComponentInstance = new gapi.analytics.ext.MyComponent();

// Calling execute here will delay rendering until after
// the user has been successfully authorized.
myComponentInstance.execute();
myComponentInstance.on('render', function() {
  // Do something when the component renders.
});

लाइब्रेरी तैयार होने तक इंतज़ार किया जा रहा है

'एम्बेड एपीआई' स्निपेट, लाइब्रेरी और उसकी सभी डिपेंडेंसी को एसिंक्रोनस रूप से लोड करता है. इसका मतलब है कि createComponent जैसे तरीके तुरंत उपलब्ध नहीं होंगे. साथ ही, ऐसे तरीकों को शुरू करने वाले कोड को तब तक टालना चाहिए, जब तक सब कुछ लोड नहीं हो जाता.

Embed API, gapi.analytics.ready तरीका उपलब्ध कराता है. यह लाइब्रेरी के पूरी तरह लोड होने पर, शुरू किए जाने वाले कॉलबैक को स्वीकार करता है. कस्टम कॉम्पोनेंट बनाते समय, आपको हमेशा अपना कोड ready फ़ंक्शन के अंदर रैप करना चाहिए, ताकि यह सभी ज़रूरी तरीकों के मौजूद होने से पहले न चले.

gapi.analytics.ready(function() {

  // This code will not run until the Embed API is fully loaded.
  gapi.analytics.createComponent('MyComponent', {
    execute: function() {
      // ...
    }
  });
});

तीसरे पक्ष के कॉम्पोनेंट इस्तेमाल करना

तीसरे पक्ष के एम्बेड एपीआई कॉम्पोनेंट को आम तौर पर अलग-अलग JavaScript फ़ाइलों के तौर पर पैक किया जाता है. इन्हें <script> टैग का इस्तेमाल करके, अपने पेज में शामिल किया जा सकता है.

ऑर्डर लोड करना मायने रखता है, इसलिए पहले Embed API स्निपेट को शामिल करना और उसके बाद अपनी कॉम्पोनेंट स्क्रिप्ट और उनकी कोई भी डिपेंडेंसी शामिल करना ज़रूरी है.

<!-- Include the Embed API snippet first. -->
<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<!-- Then include your components. -->
<script src="path/to/component.js"></script>
<script src="path/to/another-component.js"></script>

डिपेंडेंसी मैनेज करना

किसी कॉम्पोनेंट में कई डिपेंडेंसी हो सकती हैं, जैसे कि d3.js जैसी चार्टिंग लाइब्रेरी या moment.js जैसी तारीख को फ़ॉर्मैट करने वाली लाइब्रेरी. यह कॉम्पोनेंट के लेखक की ज़िम्मेदारी है कि वह इन डिपेंडेंसी का दस्तावेज़ तैयार करे और कॉम्पोनेंट उपयोगकर्ता पर निर्भर करे कि इन डिपेंडेंसी पूरी हुई हैं या नहीं.