শুরু হচ্ছে

ওভারভিউ

কিভাবে এম্বেড এপিআই ব্যবহার করতে হয় তার সম্পূর্ণ উদাহরণের মাধ্যমে এই নথিটি আপনাকে গাইড করবে। একবার সম্পন্ন হলে, আপনার কাছে এমন একটি অ্যাপ্লিকেশন থাকবে যা দেখতে এইরকম হবে।

এই নির্দেশিকায় আচ্ছাদিত উদাহরণের একটি স্ক্রিনশট
এই গাইডে কভার করা উদাহরণের একটি স্ক্রিনশট।

একটি সাধারণ ড্যাশবোর্ড তৈরি করা

আপনি এই 2টি সহজ পদক্ষেপ অনুসরণ করে আপনার সার্ভারে নমুনা অ্যাপ্লিকেশনটি চালু করতে পারেন:

  1. একটি নতুন ক্লায়েন্ট আইডি তৈরি করুন
  2. কোড কপি এবং পেস্ট করুন

আপনার এই অ্যাপ্লিকেশনটি চালু এবং চলমান হওয়ার পরে, পরবর্তী বিভাগটি বিস্তারিতভাবে ব্যাখ্যা করবে কিভাবে সমস্ত টুকরো একসাথে ফিট করে।

একটি নতুন ক্লায়েন্ট আইডি তৈরি করুন

Embed API আপনার জন্য একটি এক-ক্লিক সাইন-ইন উপাদান প্রদান করে প্রায় সমস্ত অনুমোদন প্রক্রিয়া পরিচালনা করে যা পরিচিত OAuth 2.0 ফ্লো ব্যবহার করে। এই বোতামটি আপনার পৃষ্ঠায় কাজ করার জন্য আপনার একটি ক্লায়েন্ট আইডির প্রয়োজন হবে৷

আপনি যদি কখনও একটি ক্লায়েন্ট আইডি তৈরি না করে থাকেন তবে আপনি এই নির্দেশাবলী অনুসরণ করে তা করতে পারেন।

আপনি নির্দেশাবলীর মধ্য দিয়ে যাওয়ার সময়, এটি গুরুত্বপূর্ণ যে আপনি এই দুটি গুরুত্বপূর্ণ পদক্ষেপকে উপেক্ষা করবেন না:

  • Analytics API সক্ষম করুন
  • সঠিক উত্স সেট করুন

ব্যবহারকারীদের অনুমোদন করার জন্য কোন ডোমেনগুলিকে এই কোডটি ব্যবহার করার অনুমতি দেওয়া হয় তা অরিজিনগুলি নিয়ন্ত্রণ করে৷ এটি অন্য লোকেদের আপনার কোড কপি করতে এবং তাদের সাইটে চালানো থেকে বাধা দেয়।

উদাহরণ http://example.com , যদি আপনার ওয়েবসাইট উদাহরণ আপনি যদি স্থানীয়ভাবে আপনার কোড পরীক্ষা করতে চান, তাহলে আপনাকে আপনার স্থানীয় সার্ভারের জন্যও মূল যোগ করতে হবে, উদাহরণস্বরূপ: http://localhost:8080

কোডটি কপি এবং পেস্ট করুন

একবার আপনার ক্লায়েন্ট আইডি সঠিক অরিজিন সেট সহ আপনি ডেমো তৈরি করতে প্রস্তুত। আপনার ক্লায়েন্ট আইডিতে আপনার সার্ভার প্লাগের একটি HTML ফাইলে নিম্নলিখিত কোডটি কপি করুন এবং পেস্ট করুন যেখানে এটি বলে: "এখানে আপনার ক্লায়েন্ট আইডি ঢোকান"।

<!DOCTYPE html>
<html>
<head>
  <title>Embed API Demo</title>
</head>
<body>

<!-- Step 1: Create the containing elements. -->

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

<!-- Step 2: Load the library. -->

<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>
<script>
gapi.analytics.ready(function() {

  // Step 3: Authorize the user.

  var CLIENT_ID = 'Insert your client ID here';

  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: CLIENT_ID,
  });

  // Step 4: Create the view selector.

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector'
  });

  // Step 5: Create the timeline chart.

  var timeline = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
    },
    chart: {
      type: 'LINE',
      container: 'timeline'
    }
  });

  // Step 6: Hook up the components to work together.

  gapi.analytics.auth.on('success', function(response) {
    viewSelector.execute();
  });

  viewSelector.on('change', function(ids) {
    var newIds = {
      query: {
        ids: ids
      }
    }
    timeline.set(newIds).execute();
  });
});
</script>
</body>
</html>

কোড ওয়াকথ্রু

এই বিভাগটি আপনাকে ধাপে ধাপে, নমুনা অ্যাপ্লিকেশনের জন্য প্রদত্ত কোডে ঠিক কী ঘটছে। এটি কীভাবে কাজ করে তা একবার আপনার উপলব্ধি হয়ে গেলে, আপনার নিজের তৈরি করতে সক্ষম হওয়া উচিত।

ধাপ 1: উপাদান পাত্রে তৈরি করুন

এম্বেড API উপাদানগুলির বেশিরভাগই আপনার পৃষ্ঠায় দৃশ্যমানভাবে কিছু রেন্ডার করবে। এই উপাদানগুলি কোথায় যায় তা নিয়ন্ত্রণ করার উপায় হল তাদের জন্য পাত্র তৈরি করে৷ উদাহরণ অ্যাপ্লিকেশনে আমাদের কাছে একটি প্রমাণীকরণ বোতাম, একটি দৃশ্য নির্বাচক এবং একটি চার্ট রয়েছে। এই উপাদানগুলির প্রতিটি নিম্নলিখিত HTML উপাদানগুলির মধ্যে রেন্ডার করা হয়:

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

একটি কম্পোনেন্ট তৈরি করার সময়, আপনি এটির আইডি অ্যাট্রিবিউট দ্বারা কোন ধারকটি ব্যবহার করবেন তা বলবেন, যেমন আপনি পরবর্তী উদাহরণগুলিতে দেখতে পাবেন।

ধাপ 2: লাইব্রেরি লোড করুন

Embed API নিম্নলিখিত স্নিপেট দিয়ে লোড করা যেতে পারে।

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

লাইব্রেরি সম্পূর্ণরূপে লোড হয়ে গেলে, gapi.analytics.ready পাস করা যেকোনো কলব্যাক আহ্বান করা হবে।

<script>
gapi.analytics.ready(function() {
  // Put your application code here...
});
</script>

ধাপ 3: ব্যবহারকারীকে অনুমোদন করুন

Embed API আপনার জন্য একটি এক-ক্লিক সাইন-ইন উপাদান প্রদান করে প্রায় সমস্ত অনুমোদন প্রক্রিয়া পরিচালনা করে যা পরিচিত OAuth 2.0 ফ্লো ব্যবহার করে। এই বোতামটি আপনার পৃষ্ঠায় কাজ করার জন্য আপনাকে একটি কন্টেইনার রেফারেন্স এবং আপনার ক্লায়েন্ট আইডি পাস করতে হবে।

gapi.analytics.auth.authorize({
  container: 'auth-button',
  clientid: CLIENT_ID,
});

এটি 'অথ-বোতাম' আইডি সহ উপাদানের ভিতরে একটি বোতাম তৈরি করবে যা আপনার জন্য অনুমোদনের প্রবাহের যত্ন নেয়।

ধাপ 4: ভিউ সিলেক্টর তৈরি করুন

ভিউ নির্বাচক উপাদানটি একটি নির্দিষ্ট ভিউয়ের আইডি পেতে ব্যবহার করা যেতে পারে, যাতে আপনি এটির জন্য একটি প্রতিবেদন চালাতে পারেন।

একটি ভিউ নির্বাচক তৈরি করতে, আপনার যা দরকার তা হল কন্টেইনার রেফারেন্স যা আপনি ধাপ 1 এ তৈরি করেছেন।

var viewSelector = new gapi.analytics.ViewSelector({
  container: 'view-selector'
});

এটি ভিউ সিলেক্টর কম্পোনেন্ট তৈরি করে, কিন্তু এটি এখনও পৃষ্ঠায় রেন্ডার করে না। এটি করার জন্য আপনাকে execute() কল করতে হবে, যা ধাপ 6 এ পরিচালিত হয়।

ধাপ 5: টাইমলাইন চার্ট তৈরি করুন

এম্বেড এপিআই আপনাকে একটি চার্ট উপাদান সরবরাহ করে যা একটি Google চার্টের পাশাপাশি একটি প্রতিবেদন বস্তু উভয়ই। এটি ডেটা প্রদর্শনের প্রক্রিয়াটিকে ব্যাপকভাবে সরল করে কারণ চার্ট অবজেক্টটি আপনার প্রতিবেদনগুলিকে দৃশ্যের পিছনে চালাবে এবং ফলাফলের সাথে স্বয়ংক্রিয়ভাবে আপডেট করবে।

একটি চার্ট উপাদান তৈরি করতে আপনাকে API ক্যোয়ারী পরামিতিগুলির পাশাপাশি চার্টের বিকল্পগুলি নির্দিষ্ট করতে হবে। চার্ট বিকল্পগুলির মধ্যে আপনি ধাপ 1 এ তৈরি কন্টেইনারের আইডির একটি রেফারেন্স রয়েছে৷

var timeline = new gapi.analytics.googleCharts.DataChart({
  reportType: 'ga',
  query: {
    'dimensions': 'ga:date',
    'metrics': 'ga:sessions',
    'start-date': '30daysAgo',
    'end-date': 'yesterday',
  },
  chart: {
    type: 'LINE',
    container: 'timeline'
  }
});

ভিউ সিলেক্টরের মতো, এটি চার্টের উপাদান তৈরি করে কিন্তু পৃষ্ঠায় রেন্ডার করার জন্য আপনাকে execute() কল করতে হবে, যা পরবর্তী ধাপে ব্যাখ্যা করা হবে।

ধাপ 6: একসাথে কাজ করার জন্য উপাদানগুলিকে হুক করুন

এম্বেড এপিআই উপাদানগুলি ইভেন্টগুলি নির্গত করে যখন বিভিন্ন জিনিস ঘটে যেমন সফল অনুমোদন, একটি নতুন দৃশ্য নির্বাচন করা, বা একটি চার্ট সম্পূর্ণরূপে রেন্ডার করা হয়৷

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

gapi.analytics.auth.on('success', function(response) {
  viewSelector.execute();
});

viewSelector.on('change', function(ids) {
  var newIds = {
    query: {
      ids: ids
    }
  }
  timeline.set(newIds).execute();
});

বিভিন্ন উপাদান নির্গত সমস্ত ইভেন্টের সম্পূর্ণ তালিকার জন্য, API রেফারেন্স দেখুন

পরবর্তী পদক্ষেপ

এম্বেড এপিআই-এর সাহায্যে কীভাবে একটি মৌলিক ভিজ্যুয়ালাইজেশন তৈরি করা যায় তা এই নির্দেশিকা আপনাকে দেখিয়েছে। আপনি যদি আরও জানতে চান, তাহলে কী সম্ভব তার সম্পূর্ণ ধারণা পেতে API রেফারেন্সটি দেখুন।