কাস্টম উপাদান তৈরি করা

ওভারভিউ

এম্বেড এপিআই বেশ কয়েকটি অন্তর্নির্মিত উপাদানের সাথে আসে এবং আপনাকে নিজের তৈরি করার একটি সহজ উপায়ও দেয়। এই নথিটি ব্যাখ্যা করে যে কীভাবে একটি নতুন কাস্টম উপাদান তৈরি করতে হয় এবং কীভাবে আপনার অ্যাপ্লিকেশনে তৃতীয়-পক্ষের উপাদান অন্তর্ভুক্ত করতে হয়।

একটি কাস্টম উপাদান তৈরি করা হচ্ছে

কাস্টম এম্বেড 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 এ মেথড অবজেক্ট পাস করা আপনাকে আপনার কম্পোনেন্টের প্রোটোটাইপে অ্যাক্সেস দেয়, কিন্তু এটি আপনাকে আপনার কম্পোনেন্টের কনস্ট্রাক্টরে অ্যাক্সেস দেয় না।

এই সমস্যাটির সমাধান করার জন্য, যখন নতুন এম্বেড 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 এর মতো পদ্ধতিগুলি অবিলম্বে উপলব্ধ হবে না, এবং সমস্ত কিছু লোড না হওয়া পর্যন্ত এই ধরনের পদ্ধতিগুলিকে আমন্ত্রণকারী কোডগুলিকে স্থগিত করতে হবে৷

এম্বেড এপিআই 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() {
      // ...
    }
  });
});

তৃতীয় পক্ষের উপাদান ব্যবহার করে

তৃতীয় পক্ষের এম্বেড API উপাদানগুলি সাধারণত পৃথক জাভাস্ক্রিপ্ট ফাইল হিসাবে প্যাকেজ করা হয় যা আপনি একটি <script> ট্যাগ ব্যবহার করে আপনার পৃষ্ঠায় অন্তর্ভুক্ত করতে পারেন।

লোড অর্ডার গুরুত্বপূর্ণ, তাই প্রথমে এম্বেড 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 বা date.js এর মতো একটি তারিখ ফর্ম্যাটিং লাইব্রেরি। এই নির্ভরতাগুলিকে নথিভুক্ত করা উপাদান লেখকের উপর নির্ভর করে এবং এই নির্ভরতাগুলি পূরণ হয়েছে তা নিশ্চিত করার জন্য উপাদান ব্যবহারকারীর উপর নির্ভর করে।