লুকার স্টুডিওতে আপনার সমস্ত ডেটা সংযুক্ত করুন এবং কল্পনা করুন৷

১. ভূমিকা

লুকার স্টুডিও আপনাকে বিনামূল্যে সুন্দর ডেটা ভিজ্যুয়ালাইজেশন সহ লাইভ, ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে দেয়। বিভিন্ন উৎস থেকে আপনার ডেটা সংগ্রহ করুন এবং সম্পূর্ণ সম্পাদনা ও শেয়ার করার সুবিধা সহ লুকার স্টুডিওতে সীমাহীন রিপোর্ট তৈরি করুন। নিচের স্ক্রিনশটটি একটি লুকার স্টুডিও ড্যাশবোর্ডের উদাহরণ:

2f296fddf6af7393.png

( লুকার স্টুডিওতে এই নমুনা প্রতিবেদনটি দেখতে এখানে ক্লিক করুন )

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

আপনি বিভিন্ন ক্ষেত্রে কমিউনিটি কানেক্টর ব্যবহার করতে পারেন:

  • আপনি একটি বাণিজ্যিক প্ল্যাটফর্ম (যেমন সোশ্যাল মিডিয়া, মার্কেটিং, অ্যানালিটিক্স, ইত্যাদি) থেকে ডেটা ভিজ্যুয়ালাইজ করছেন।
  • আপনি অন-প্রিমিস এন্টারপ্রাইজ ডেটা ভিজ্যুয়ালাইজ করছেন (যেমন অন-প্রিমিস MySQL ডেটাবেস থেকে বিক্রয় ডেটা)।
  • আপনি আপনার গ্রাহকদের আপনার পরিষেবা থেকে তাদের ডেটা দেখার একটি উপায় প্রদান করছেন।
  • আপনি একটি পুশ বাটন রিপোর্টিং প্ল্যাটফর্ম তৈরি করছেন
  • আপনি কোনো ওয়েব উৎস থেকে আপনার নিজের ডেটা ভিজ্যুয়ালাইজ করছেন (যেমন আপনার গুগল ফিট ড্যাশবোর্ড তৈরি করছেন)

আপনি যা শিখবেন

  • লুকার স্টুডিও কমিউনিটি কানেক্টর কীভাবে কাজ করে
  • গুগল অ্যাপস স্ক্রিপ্ট ব্যবহার করে কীভাবে একটি কমিউনিটি কানেক্টর তৈরি করবেন
  • লুকার স্টুডিওতে কমিউনিটি কানেক্টর কীভাবে ব্যবহার করবেন

আপনার যা যা লাগবে

  • ইন্টারনেট এবং একটি ওয়েব ব্রাউজারে প্রবেশাধিকার
  • একটি গুগল অ্যাকাউন্ট
  • বেসিক জাভাস্ক্রিপ্ট এবং ওয়েব এপিআই সম্পর্কে পরিচিতি

২. দ্রুত সমীক্ষা

আপনি এই কোডল্যাবটি কেন বেছে নিলেন?

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

আপনি এই কোডল্যাব/টিউটোরিয়ালটি কীভাবে ব্যবহার করার পরিকল্পনা করছেন?

শুধু চোখ বুলিয়ে নিন এটি পড়ুন এবং অনুশীলনগুলো সম্পূর্ণ করুন।

লুকার স্টুডিওর সাথে আপনার পরিচিতিকে আপনি কীভাবে মূল্যায়ন করবেন?

এটার কথা কখনো শুনিনি। আমি জানি এটা কী, কিন্তু আমি এটা ব্যবহার করি না। আমি এটা নিয়মিত ব্যবহার করি। আমি একজন বিশেষজ্ঞ ব্যবহারকারী।

আপনার পটভূমিকে সবচেয়ে ভালোভাবে কী বর্ণনা করে?

ডেভেলপার ব্যবসা / আর্থিক / ডেটা বিশ্লেষক ডেটা বিজ্ঞানী / ডেটা ইঞ্জিনিয়ার মার্কেটিং / সোশ্যাল মিডিয়া / ডিজিটাল অ্যানালিটিক্স বিশেষজ্ঞ ডিজাইনার অন্যান্য

জরিপের তথ্য জমা দেওয়ার জন্য আপনি পরবর্তী পৃষ্ঠায় যেতে পারেন।

৩. কমিউনিটি কানেক্টরদের সংক্ষিপ্ত বিবরণ

লুকার স্টুডিও কমিউনিটি কানেক্টরগুলো লুকার স্টুডিও থেকে ইন্টারনেটে প্রবেশযোগ্য যেকোনো ডেটা উৎসের সাথে সরাসরি সংযোগ স্থাপন করতে সক্ষম করে। আপনি বাণিজ্যিক প্ল্যাটফর্ম, পাবলিক ডেটাসেট বা আপনার নিজস্ব অন-প্রিমিস ব্যক্তিগত ডেটার সাথে সংযোগ করতে পারেন। কমিউনিটি কানেক্টরগুলো ওয়েব এপিআই, জেডিবিসি এপিআই, ফ্ল্যাট ফাইল (CSV, JSON, XML) এবং অ্যাপস স্ক্রিপ্ট সার্ভিসের মাধ্যমে ডেটা সংগ্রহ করতে পারে।

b25b8d6bea6da54b.png

এমন একটি পরিস্থিতির কথা ভাবুন যেখানে আপনি npm- এ একটি প্যাকেজ প্রকাশ করেছেন এবং দিনের পর দিন সেটির ডাউনলোড সংখ্যা ট্র্যাক করতে চান। এই কোডল্যাবে, আপনি একটি কমিউনিটি কানেক্টর তৈরি করবেন যা npm প্যাকেজ ডাউনলোড কাউন্টস এপিআই (API) ব্যবহার করে ডেটা সংগ্রহ করে। এরপর এই কমিউনিটি কানেক্টরটি লুকার স্টুডিও (Looker Studio)-তে ব্যবহার করে ডাউনলোড সংখ্যা ভিজ্যুয়ালাইজ করার জন্য একটি ড্যাশবোর্ড তৈরি করা যাবে।

৪. কমিউনিটি কানেক্টর ওয়ার্কফ্লো

একটি মৌলিক কমিউনিটি কানেক্টরে, আপনি চারটি ফাংশন সংজ্ঞায়িত করবেন:

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

ওয়ার্কফ্লো-এর বর্তমান ধাপের উপর নির্ভর করে, লুকার স্টুডিও এই কানেক্টর ফাংশনগুলো সম্পাদন করে এবং পরবর্তী ধাপগুলোতে এর প্রতিক্রিয়া ব্যবহার করে। নিচের ভিডিওটিতে এ বিষয়ে একটি সংক্ষিপ্ত বিবরণ দেওয়া হয়েছে:

  • কমিউনিটি কানেক্টর কীভাবে কাজ করে
  • কর্মপ্রবাহের বিভিন্ন ধাপ
  • যখন বিভিন্ন ফাংশন কল করা হয়
  • যখন লুকার স্টুডিও বিভিন্ন ইউজার ইন্টারফেস দেখায়
  • বিভিন্ন ধাপে প্রত্যাশিত ব্যবহারকারীর কার্যকলাপ

ভিডিওটি দেখার পর আপনি কোডল্যাবটি আবার শুরু করতে পারেন।

এই কার্যপ্রবাহ মুখস্থ করার কোনো প্রয়োজন নেই, একটি কানেক্টরের ভেতরে কী ঘটে তা বোঝার জন্য শুধু একবার দেখে নিন। আপনি যেকোনো সময় এই ডায়াগ্রামটিতে ফিরে আসতে পারেন।

cc6688bf38749e5.png

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

৫. আপনার অ্যাপস স্ক্রিপ্ট প্রজেক্ট সেট আপ করুন।

ধাপ ১: গুগল অ্যাপস স্ক্রিপ্ট-এ যান।

ধাপ ২: উপরের বাম দিকের অংশে " + নতুন প্রজেক্ট " এ ক্লিক করে একটি নতুন অ্যাপস স্ক্রিপ্ট প্রজেক্ট তৈরি করুন।

fb12d7318d0946cf.png

আপনি Code.gs ফাইলে একটি শেল প্রজেক্ট দেখতে পাবেন, যেখানে myFunction ফাংশনটি খালি থাকবে।

b245ce5eb3dd2ee2.png

ধাপ ৩: myFunction ফাংশনটি মুছে ফেলুন।

ধাপ ৪: প্রকল্পটির একটি নাম দিন:

  1. পৃষ্ঠার উপরের বাম দিকে থাকা Untitled project এ ক্লিক করুন।
  2. প্রকল্পের একটি শিরোনাম লিখুন।

7172aebc181c91d4.png

Code.gs ফাইলে আপনার কানেক্টর কোড লেখা শুরু করুন।

৬. getAuthType() সংজ্ঞায়িত করুন

কানেক্টর দ্বারা ব্যবহৃত অথেনটিকেশন পদ্ধতি জানার প্রয়োজন হলে লুকার স্টুডিও getAuthType() ফাংশনটি কল করবে। এই ফাংশনটির উচিত থার্ড-পার্টি পরিষেবাটিকে অনুমোদন করার জন্য কানেক্টরের প্রয়োজনীয় অথেনটিকেশন পদ্ধতিটি রিটার্ন করা।

আপনি যে এনপিএম ডাউনলোড কানেক্টরটি তৈরি করছেন, তার জন্য কোনো থার্ড-পার্টি সার্ভিসের সাথে অথেন্টিকেট করার প্রয়োজন নেই, কারণ আপনি যে এপিআই ব্যবহার করছেন তার জন্য কোনো অথেন্টিকেশনের প্রয়োজন হয় না। নিচের কোডটি কপি করে আপনার Code.gs ফাইলে যোগ করুন:

কোড.জিএস

var cc = DataStudioApp.createCommunityConnector();

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

এখানে, আপনি নির্দেশ করছেন যে আপনার কানেক্টরের জন্য কোনো তৃতীয়-পক্ষের প্রমাণীকরণের ( AuthTypes.NONE ) প্রয়োজন নেই। সমস্ত সমর্থিত প্রমাণীকরণ পদ্ধতি দেখতে, AuthType() রেফারেন্সটি দেখুন।

৭. getConfig() সংজ্ঞায়িত করুন

আপনার কানেক্টরের ব্যবহারকারীদের এটি ব্যবহার শুরু করার আগে কানেক্টরটি কনফিগার করতে হবে। getConfig() ফাংশনের রেসপন্সটি সেই কনফিগারেশন অপশনগুলো নির্ধারণ করে যা ব্যবহারকারীরা দেখতে পাবেন। কানেক্টরের কনফিগারেশনের বিস্তারিত তথ্য পাওয়ার জন্য Looker Studio, getConfig() ফাংশনটিকে কল করে। getConfig() থেকে প্রাপ্ত রেসপন্সের উপর ভিত্তি করে, Looker Studio কানেক্টরের কনফিগারেশন স্ক্রিনটি রেন্ডার করবে এবং কানেক্টরের কিছু নির্দিষ্ট আচরণ পরিবর্তন করবে।

কনফিগারেশন স্ক্রিনে, আপনি নিম্নলিখিত ফর্ম উপাদানগুলি ব্যবহার করে তথ্য প্রদান করতে বা ব্যবহারকারীর ইনপুট নিতে পারেন:

TEXTINPUT

ইনপুট উপাদান

এক লাইনের টেক্সট বক্স।

TEXTAREA

ইনপুট উপাদান

একটি বহু-লাইন টেক্সট এরিয়া বক্স।

SELECT_SINGLE

ইনপুট উপাদান

একক-নির্বাচন বিকল্পগুলির জন্য একটি ড্রপডাউন।

SELECT_MULTIPLE

ইনপুট উপাদান

একাধিক বিকল্প বেছে নেওয়ার জন্য একটি ড্রপডাউন।

CHECKBOX

ইনপুট উপাদান

একটিমাত্র চেকবক্স যা বুলিয়ান মান গ্রহণ করতে ব্যবহার করা যায়।

INFO

ডিসপ্লে উপাদান

একটি স্থির সাধারণ টেক্সট বক্স যা ব্যবহারকারীকে নির্দেশনা বা তথ্য প্রদানের জন্য ব্যবহার করা যেতে পারে।

ব্যবহারকারীকে নির্দেশনা দেওয়ার জন্য INFO এলিমেন্ট এবং ব্যবহারকারীর কাছ থেকে প্যাকেজের নাম নেওয়ার জন্য TEXTINPUT এলিমেন্ট ব্যবহার করুন। getConfig() রেসপন্সে, আপনি এই ফর্ম এলিমেন্টগুলোকে configParams কী-এর অধীনে গ্রুপ করবেন।

যেহেতু আপনি যে API-এর সাথে সংযোগ করছেন তাতে প্যারামিটার হিসেবে তারিখের প্রয়োজন হয়, getConfig() রেসপন্সে dateRangeRequired কে true সেট করুন। এটি Looker Studio-কে সমস্ত ডেটা অনুরোধের সাথে তারিখের পরিসীমা সরবরাহ করতে নির্দেশ দেয়। যদি আপনার ডেটা সোর্সে প্যারামিটার হিসেবে তারিখের প্রয়োজন না হয়, তবে আপনি এটি বাদ দিতে পারেন।

আপনার Code.gs ফাইলে, বিদ্যমান getAuthType() কোডের নিচে নিম্নলিখিত getConfig() কোডটি যোগ করুন:

কোড.জিএস

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-তে কানেক্টরটি ব্যবহার করবেন, তখন নিচের মতো একটি কনফিগারেশন স্ক্রিন দেখতে পাবেন। তবে সে বিষয়ে পরে আরও আলোচনা করা হবে।

7de872f17e59e92.png

চলুন পরবর্তী ফাংশন - getSchema() - এ যাওয়া যাক।

৮. getSchema() এর সংজ্ঞা দাও।

কানেক্টরের জন্য ব্যবহারকারী-নির্বাচিত কনফিগারেশনের সাথে যুক্ত স্কিমাটি পেতে লুকার স্টুডিও getSchema() ফাংশনটি কল করে। getSchema() থেকে প্রাপ্ত প্রতিক্রিয়ার উপর ভিত্তি করে, লুকার স্টুডিও ব্যবহারকারীকে ফিল্ড স্ক্রিনটি দেখাবে, যেখানে কানেক্টরের সমস্ত ফিল্ডের তালিকা থাকবে।

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

  • ক্ষেত্রের নাম
  • ফিল্ডের জন্য ডেটা টাইপ
  • শব্দার্থিক তথ্য

আরও জানতে পরে getSchema() এবং Field রেফারেন্স পর্যালোচনা করুন।

আপনার কানেক্টর কীভাবে ডেটা সংগ্রহ করে তার উপর নির্ভর করে, getSchema() কল করার সময় স্কিমাটি স্থির বা গতিশীলভাবে গণনা করা হতে পারে। getConfig() থেকে ব্যবহারকারী দ্বারা সংজ্ঞায়িত কনফিগারেশন প্যারামিটারগুলো getSchema () ফাংশনের জন্য request আর্গুমেন্টে প্রদান করা হবে।

এই কোডল্যাবের জন্য আপনার request আর্গুমেন্টটি অ্যাক্সেস করার প্রয়োজন নেই। পরবর্তী অংশে getData() ` ফাংশনের জন্য কোড লেখার সময় আপনি ` request আর্গুমেন্ট সম্পর্কে আরও জানতে পারবেন।

আপনার কানেক্টরের জন্য স্কিমাটি নির্দিষ্ট এবং এতে নিম্নলিখিত ৩টি ফিল্ড রয়েছে:

packageName

ব্যবহারকারী যে npm প্যাকেজের নাম প্রদান করে

downloads

এনপিএম প্যাকেজের ডাউনলোড সংখ্যা

day

ডাউনলোড সংখ্যার তারিখ

নিচে আপনার কানেক্টরের জন্য getSchema() কোডটি দেওয়া হলো। getFields() হেল্পার ফাংশনটি ফিল্ড তৈরির কাজটি সহজ করে দেয়, কারণ এই কার্যকারিতাটি getSchema() এবং getData() উভয়ের জন্যই প্রয়োজন। আপনার 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 };
}

এই স্কিমার উপর ভিত্তি করে, আপনি যখন লুকার স্টুডিওতে কানেক্টরটি ব্যবহার করবেন, তখন লুকার স্টুডিও ফিল্ডস স্ক্রিনে নিম্নলিখিত ফিল্ডগুলি দেখতে পাবেন। তবে আপনার কানেক্টরটি পরীক্ষা করার সময় এ বিষয়ে আরও বিস্তারিত আলোচনা করা হবে।

c7cd7057b202be59.png

এবার আমরা আমাদের শেষ ফাংশন – getData() এ চলে যাই।

৯. getData() এর সংজ্ঞা দাও : পর্ব ১

যখনই ডেটা আনার প্রয়োজন হয়, লুকার স্টুডিও getData() ফাংশনটি কল করে। getData() থেকে প্রাপ্ত প্রতিক্রিয়ার উপর ভিত্তি করে, লুকার স্টুডিও ড্যাশবোর্ডে চার্টগুলো রেন্ডার ও আপডেট করে। নিম্নলিখিত ঘটনাগুলোর সময় getData() কল করা হতে পারে:

  • ব্যবহারকারী ড্যাশবোর্ডে একটি চার্ট যোগ করেন।
  • ব্যবহারকারী একটি চার্ট সম্পাদনা করেন
  • ব্যবহারকারী ড্যাশবোর্ডটি দেখছেন।
  • ব্যবহারকারী একটি ফিল্টার বা সংশ্লিষ্ট ডেটা নিয়ন্ত্রণ সম্পাদনা করে
  • লুকার স্টুডিওর ডেটার একটি নমুনা প্রয়োজন।

এই পৃষ্ঠা থেকে কোনো কোড কপি করার প্রয়োজন নেই, কারণ আপনি সম্পূর্ণ কোডটি কপি করবেন।

getData()

পরবর্তী ধাপে কোড।

request অবজেক্ট বোঝা

লুকার স্টুডিও প্রতিটি getData() কলের সাথে request অবজেক্টটি প্রেরণ করে। নিচে request অবজেক্টটির গঠন পর্যালোচনা করুন। এটি আপনাকে আপনার getData() ফাংশনের জন্য কোড লিখতে সাহায্য করবে।

request বস্তুর কাঠামো

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}
  • configParams অবজেক্টটিতে getConfig() এ সংজ্ঞায়িত এবং ব্যবহারকারী দ্বারা কনফিগার করা প্যারামিটারগুলোর কনফিগারেশন মান থাকবে।
  • scriptParams অবজেক্টটিতে কানেক্টর এক্সিকিউশনের জন্য প্রাসঙ্গিক তথ্য থাকবে। এই কোডল্যাবের জন্য এটি ব্যবহার করার প্রয়োজন নেই।
  • getConfig() রেসপন্সে অনুরোধ করা হলে, 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() প্রতিক্রিয়ার কাঠামো থাকবে।

১০. 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 URL-টি এই বিন্যাসে থাকবে:

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

Looker Studio দ্বারা প্রদত্ত request.dateRange.startDate , request.dateRange.endDate , এবং request.configParams.package ব্যবহার করে API-এর জন্য URL তৈরি করুন। তারপর UrlFetchApp (অ্যাপস স্ক্রিপ্ট ক্লাস: রেফারেন্স ) ব্যবহার করে API থেকে ডেটা ফেচ করুন। এরপর ফেচ করা রেসপন্সটি পার্স করুন।

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

১১. getData() এর সংজ্ঞা দাও : পর্ব ৩

সম্মিলিত getData() কোডটি নিচের মতো দেখাবে। আপনার 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 ফাইলের কাজ শেষ! এরপর, ম্যানিফেস্টটি আপডেট করুন।

১২. ম্যানিফেস্ট আপডেট করুন

অ্যাপস স্ক্রিপ্ট এডিটরে, প্রজেক্ট সেটিংস > এডিটরে 'appsscript.json' ম্যানিফেস্ট ফাইল দেখান নির্বাচন করুন।

90a68a58bbbb63c4.png

এটি একটি নতুন appsscript.json ম্যানিফেস্ট ফাইল তৈরি করবে।

1081c738d5d577a6.png

আপনার 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"]
  }
}

অ্যাপস স্ক্রিপ্ট প্রজেক্টটি সংরক্ষণ করুন।

5701ece1c89415c.png

অভিনন্দন! আপনি আপনার প্রথম কমিউনিটি কানেক্টরটি তৈরি করেছেন এবং এটি এখন পরীক্ষামূলক ব্যবহারের জন্য প্রস্তুত!

১৩. লুকার স্টুডিওতে আপনার কানেক্টরটি পরীক্ষা করুন।

ডিপ্লয়মেন্ট ব্যবহার করুন

ধাপ ১: অ্যাপস স্ক্রিপ্ট ডেভেলপমেন্ট এনভায়রনমেন্টে, টেস্ট ডিপ্লয়মেন্টস ডায়ালগটি খোলার জন্য Deploy > Test deployments- এ ক্লিক করুন।

3f57ea0feceb2596.png

ডিফল্ট ডেপ্লয়মেন্ট, অর্থাৎ হেড ডেপ্লয়মেন্ট , তালিকাভুক্ত করা হবে।

ধাপ ২: হেড ডিপ্লয়মেন্ট আইডি কপি করতে কপি-তে ক্লিক করুন।

ধাপ ৩: Looker Studio-তে আপনার কানেক্টর লোড করতে, নিচের লিঙ্কে থাকা <HEAD_DEPLOYMENT_ID> প্লেসহোল্ডারটিকে আপনার কানেক্টরের হেড ডিপ্লয়মেন্ট আইডি দিয়ে প্রতিস্থাপন করুন এবং আপনার ব্রাউজারে লিঙ্কটি অনুসরণ করুন:

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

সংযোগকারীকে অনুমোদন দিন

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

একবার লোড হয়ে গেলে, আপনার কানেক্টরটিকে অনুমোদন করার জন্য একটি প্রম্পট দেখতে পাবেন।

d7e66726a1e64c05.png

Authorize-এ ক্লিক করুন এবং কানেক্টরটিকে প্রয়োজনীয় অনুমোদন প্রদান করুন।

সংযোগকারীটি কনফিগার করুন

অনুমোদন সম্পন্ন হলে, কনফিগারেশন স্ক্রিনটি দেখা যাবে। টেক্সট ইনপুট এরিয়াতে " lighthouse " টাইপ করুন এবং উপরের ডানদিকে থাকা কানেক্ট (Connect) বাটনে ক্লিক করুন।

ec7416d6dbeabc8f.png

স্কিমাটি নিশ্চিত করুন

আপনি ফিল্ড স্ক্রিনটি দেখতে পাবেন। উপরের ডানদিকে থাকা 'Create Report'- এ ক্লিক করুন।

4a9084bd51d2fbb8.png

আপনার ড্যাশবোর্ড তৈরি করুন

আপনি লুকার স্টুডিও ড্যাশবোর্ড পরিবেশে থাকবেন। ‘অ্যাড টু রিপোর্ট’-এ ক্লিক করুন।

1ca21e327308237c.png

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

এখন একটি টাইম সিরিজ চার্ট যোগ করুন! মেনুতে, Insert > Time Series-এ ক্লিক করুন। তারপর ক্যানভাসে টাইম সিরিজটি রাখুন। আপনি নির্বাচিত প্যাকেজের npm ডাউনলোড সংখ্যার একটি টাইম সিরিজ চার্ট দেখতে পাবেন। একটি ডেট ফিল্টার কন্ট্রোল যোগ করুন এবং নিচে দেখানো অনুযায়ী ড্যাশবোর্ডটি দেখুন।

4c076e07665f57aa.gif

ব্যাস! আপনি এইমাত্র আপনার প্রথম কমিউনিটি কানেক্টর তৈরি করলেন! এর মাধ্যমেই এই কোডল্যাবটি শেষ হলো। এখন, চলুন দেখি এরপর আপনি কী কী পদক্ষেপ নিতে পারেন।

১৪. পরবর্তী পদক্ষেপ

আপনার তৈরি কানেক্টরটি উন্নত করুন

আপনি এইমাত্র যে কানেক্টরটি তৈরি করেছেন সেটিতে উন্নতি সাধন করুন:

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

কমিউনিটি কানেক্টরদের সাথে আরও বেশি কিছু করুন

অতিরিক্ত সম্পদ

এই কোডল্যাবে আলোচিত বিষয়বস্তু আরও গভীরভাবে জানার জন্য নিচে বিভিন্ন রিসোর্স দেওয়া হলো, যা আপনি ব্যবহার করতে পারেন।

সম্পদের ধরণ

ব্যবহারকারীর বৈশিষ্ট্য

ডেভেলপার ফিচার

ডকুমেন্টেশন

সহায়তা কেন্দ্র

ডেভেলপার ডকুমেন্টেশন

সংবাদ ও আপডেট

লুকার স্টুডিও -তে সাইন আপ করুন > ব্যবহারকারী সেটিংস

ডেভেলপার মেইলিং তালিকা

প্রশ্ন করুন

ব্যবহারকারী ফোরাম

স্ট্যাক ওভারফ্লো [লুকার-স্টুডিও]

ভিডিও

ডেটাভিস ডেভটক

উদাহরণ

ওপেন সোর্স রিপোজিটরি