Node.js-এ বিগ ডেটা থেকে Google স্লাইড উপস্থাপনা তৈরি করুন

1. সংক্ষিপ্ত বিবরণ

এই কোডল্যাবে, আপনি শিখবেন কিভাবে আপনি সবচেয়ে সাধারণ সফ্টওয়্যার লাইসেন্স বিশ্লেষণের জন্য একটি কাস্টম উপস্থাপনা টুল হিসেবে Google Slides ব্যবহার করতে পারেন। আপনি BigQuery API ব্যবহার করে GitHub-এর সমস্ত ওপেন সোর্স কোড অনুসন্ধান করবেন এবং আপনার ফলাফল উপস্থাপনের জন্য Google Slides API ব্যবহার করে একটি স্লাইড ডেক তৈরি করবেন। নমুনা অ্যাপ্লিকেশনটি Node.js ব্যবহার করে তৈরি করা হয়েছে, তবে একই মৌলিক নীতিগুলি যেকোনো আর্কিটেকচারের ক্ষেত্রে প্রযোজ্য।

তুমি কি শিখবে

  • স্লাইডস এপিআই ব্যবহার করে উপস্থাপনা তৈরি করা
  • একটি বৃহৎ ডেটাসেটের অন্তর্দৃষ্টি পেতে BigQuery ব্যবহার করা
  • গুগল ড্রাইভ এপিআই ব্যবহার করে একটি ফাইল অনুলিপি করা

তোমার যা লাগবে

  • Node.js ইনস্টল করা হয়েছে
  • ইন্টারনেট এবং একটি ওয়েব ব্রাউজার অ্যাক্সেস
  • একটি গুগল অ্যাকাউন্ট
  • একটি গুগল ক্লাউড প্ল্যাটফর্ম প্রকল্প

2. নমুনা কোড পান

আপনি আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করতে পারেন...

...অথবা কমান্ড লাইন থেকে GitHub রিপোজিটরি ক্লোন করুন।

git clone https://github.com/googleworkspace/slides-api.git

রিপোজিটরিতে এমন কিছু ডিরেক্টরি রয়েছে যা প্রক্রিয়ার প্রতিটি ধাপের প্রতিনিধিত্ব করে, যদি আপনার কোনও কার্যকরী সংস্করণ উল্লেখ করার প্রয়োজন হয়।

আপনি start ডিরেক্টরিতে থাকা কপিটি ব্যবহার করবেন, তবে প্রয়োজনে আপনি অন্য ফাইলগুলি উল্লেখ করতে বা কপি করতে পারেন।

৩. নমুনা অ্যাপটি চালান

প্রথমে, নোড স্ক্রিপ্টটি চালু করা যাক। কোডটি ডাউনলোড করার পরে, Node.js অ্যাপ্লিকেশনটি ইনস্টল এবং শুরু করতে নীচের নির্দেশাবলী অনুসরণ করুন:

  1. আপনার কম্পিউটারে একটি কমান্ড লাইন টার্মিনাল খুলুন এবং কোডল্যাবের start ডিরেক্টরিতে যান।
  2. Node.js নির্ভরতা ইনস্টল করতে নিম্নলিখিত কমান্ডটি প্রবেশ করান।
npm install
  1. স্ক্রিপ্টটি চালানোর জন্য নিম্নলিখিত কমান্ডটি প্রবেশ করান:
node .
  1. এই প্রকল্পের ধাপগুলি দেখানো অভিবাদনটি লক্ষ্য করুন।
-- Start generating slides. --
TODO: Get Client Secrets
TODO: Authorize
TODO: Get Data from BigQuery
TODO: Create Slides
TODO: Open Slides
-- Finished generating slides. --

আপনি slides.js , license.js , এবং auth.js এ আমাদের করণীয় তালিকা দেখতে পারেন। মনে রাখবেন যে আমরা অ্যাপটি সম্পূর্ণ করার জন্য প্রয়োজনীয় পদক্ষেপগুলিকে শৃঙ্খলিত করতে JavaScript Promises ব্যবহার করি কারণ প্রতিটি পদক্ষেপ পূর্ববর্তী পদক্ষেপটি সম্পন্ন হওয়ার উপর নির্ভরশীল।

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

৪. ক্লায়েন্টের গোপন তথ্য পান

Slides, Bigquery, এবং Drive API ব্যবহার করার জন্য, আমরা একটি OAuth ক্লায়েন্ট এবং একটি পরিষেবা অ্যাকাউন্ট তৈরি করব।

গুগল ডেভেলপারস কনসোল সেটআপ করুন

  1. এই উইজার্ডটি ব্যবহার করে গুগল ডেভেলপারস কনসোলে একটি প্রকল্প তৈরি বা নির্বাচন করুন এবং স্বয়ংক্রিয়ভাবে API চালু করুন। Continue এ ক্লিক করুন, তারপর credentials এ যান
  2. আপনার প্রকল্পে শংসাপত্র যোগ করুন পৃষ্ঠায়, বাতিল করুন বোতামে ক্লিক করুন।
  3. পৃষ্ঠার উপরে, OAuth সম্মতি স্ক্রিন ট্যাবটি নির্বাচন করুন। একটি ইমেল ঠিকানা নির্বাচন করুন, পণ্যের নাম Slides API Codelab লিখুন এবং সংরক্ষণ বোতামে ক্লিক করুন।

BigQuery, Drive, এবং Slides API গুলি সক্ষম করুন

  1. ড্যাশবোর্ড ট্যাবটি নির্বাচন করুন, Enable API বোতামে ক্লিক করুন এবং নিম্নলিখিত 3টি API সক্ষম করুন:
  2. বিগকুয়েরি এপিআই
  3. গুগল ড্রাইভ এপিআই
  4. গুগল স্লাইডস এপিআই

OAuth ক্লায়েন্ট সিক্রেট ডাউনলোড করুন (স্লাইড এবং ড্রাইভের জন্য)

  1. শংসাপত্র ট্যাব নির্বাচন করুন, শংসাপত্র তৈরি করুন বোতামে ক্লিক করুন এবং OAuth ক্লায়েন্ট আইডি নির্বাচন করুন।
  2. অ্যাপ্লিকেশনের ধরণ Other নির্বাচন করুন, Google Slides API Codelab নামটি লিখুন এবং Create বোতামে ক্লিক করুন। ফলাফলের ডায়ালগটি খারিজ করতে OK এ ক্লিক করুন।
  3. ক্লায়েন্ট আইডির ডানদিকে file_download (JSON ডাউনলোড করুন) বোতামে ক্লিক করুন।
  4. আপনার গোপন ফাইলটির নাম পরিবর্তন করে client_secret.json রাখুন এবং এটি start/ এবং finish/ উভয় ডিরেক্টরিতে কপি করুন।

সার্ভিস অ্যাকাউন্ট সিক্রেট ডাউনলোড করুন (BigQuery এর জন্য)

  1. শংসাপত্র ট্যাব নির্বাচন করুন, শংসাপত্র তৈরি করুন বোতামে ক্লিক করুন এবং পরিষেবা অ্যাকাউন্ট কী নির্বাচন করুন।
  2. ড্রপডাউনে, New Service Account নির্বাচন করুন। আপনার পরিষেবার জন্য Slides API Codelab Service নামটি নির্বাচন করুন। তারপর Role এ ক্লিক করুন এবং BigQuery তে স্ক্রোল করুন এবং BigQuery Data Viewer এবং BigQuery Job User উভয়ই নির্বাচন করুন।
  3. কী টাইপের জন্য, JSON নির্বাচন করুন।
  4. তৈরি করুন এ ক্লিক করুন। কী ফাইলটি স্বয়ংক্রিয়ভাবে আপনার কম্পিউটারে ডাউনলোড হবে। প্রদর্শিত ডায়ালগটি থেকে বেরিয়ে আসতে বন্ধ করুন এ ক্লিক করুন।
  5. আপনার গোপন ফাইলটির নাম পরিবর্তন করে service_account_secret.json রাখুন এবং এটি start/ এবং finish/ উভয় ডিরেক্টরিতে কপি করুন।

ক্লায়েন্টের গোপন তথ্য পান

start/auth.js এ, getClientSecrets পদ্ধতিটি পূরণ করা যাক।

auth.js সম্পর্কে

const fs = require('fs');

/**
 * Loads client secrets from a local file.
 * @return {Promise} A promise to return the secrets.
 */
module.exports.getClientSecrets = () => {
  return new Promise((resolve, reject) => {
    fs.readFile('client_secret.json', (err, content) => {
      if (err) return reject('Error loading client secret file: ' + err);
      console.log('loaded secrets...');
      resolve(JSON.parse(content));
    });
  });
}

আমরা এখন ক্লায়েন্ট সিক্রেট লোড করেছি। ক্রেডেনশিয়ালগুলি পরবর্তী প্রতিশ্রুতিতে পাঠানো হবে। কোনও ত্রুটি না থাকার জন্য node . দিয়ে প্রকল্পটি চালান।

৫. একটি OAuth2 ক্লায়েন্ট তৈরি করুন

স্লাইড তৈরি করতে, আমাদের auth.js ফাইলে নিম্নলিখিত কোড যোগ করে Google API গুলিতে প্রমাণীকরণ যোগ করা যাক। এই প্রমাণীকরণটি Google ড্রাইভে ফাইলগুলি পড়তে এবং লিখতে, Google স্লাইডে উপস্থাপনা তৈরি করতে এবং Google BigQuery থেকে কেবল পঠনযোগ্য প্রশ্নগুলি সম্পাদন করতে আপনার Google অ্যাকাউন্টে অ্যাক্সেসের অনুরোধ করবে। (দ্রষ্টব্য: আমরা getClientSecrets পরিবর্তন করিনি)

auth.js সম্পর্কে

const fs = require('fs');
const readline = require('readline');
const openurl = require('openurl');
const googleAuth = require('google-auth-library');
const TOKEN_DIR = (process.env.HOME || process.env.HOMEPATH ||
      process.env.USERPROFILE) + '/.credentials/';
const TOKEN_PATH = TOKEN_DIR + 'slides.googleapis.com-nodejs-quickstart.json';

// If modifying these scopes, delete your previously saved credentials
// at ~/.credentials/slides.googleapis.com-nodejs-quickstart.json
const SCOPES = [
  'https://www.googleapis.com/auth/presentations', // needed to create slides
  'https://www.googleapis.com/auth/drive', // read and write files
  'https://www.googleapis.com/auth/bigquery.readonly' // needed for bigquery
];

/**
 * Loads client secrets from a local file.
 * @return {Promise} A promise to return the secrets.
 */
module.exports.getClientSecrets = () => {
  return new Promise((resolve, reject) => {
    fs.readFile('client_secret.json', (err, content) => {
      if (err) return reject('Error loading client secret file: ' + err);
      console.log('loaded secrets...');
      resolve(JSON.parse(content));
    });
  });
}

/**
 * Create an OAuth2 client promise with the given credentials.
 * @param {Object} credentials The authorization client credentials.
 * @param {function} callback The callback for the authorized client.
 * @return {Promise} A promise to return the OAuth client.
 */
module.exports.authorize = (credentials) => {
  return new Promise((resolve, reject) => {
    console.log('authorizing...');
    const clientSecret = credentials.installed.client_secret;
    const clientId = credentials.installed.client_id;
    const redirectUrl = credentials.installed.redirect_uris[0];
    const auth = new googleAuth();
    const oauth2Client = new auth.OAuth2(clientId, clientSecret, redirectUrl);

    // Check if we have previously stored a token.
    fs.readFile(TOKEN_PATH, (err, token) => {
      if (err) {
        getNewToken(oauth2Client).then(() => {
          resolve(oauth2Client);
        });
      } else {
        oauth2Client.credentials = JSON.parse(token);
        resolve(oauth2Client);
      }
    });
  });
}

/**
 * Get and store new token after prompting for user authorization, and then
 * fulfills the promise. Modifies the `oauth2Client` object.
 * @param {google.auth.OAuth2} oauth2Client The OAuth2 client to get token for.
 * @return {Promise} A promise to modify the oauth2Client credentials.
 */
function getNewToken(oauth2Client) {
  console.log('getting new auth token...');
  openurl.open(oauth2Client.generateAuthUrl({
    access_type: 'offline',
    scope: SCOPES
  }));

  console.log(''); // \n
  return new Promise((resolve, reject) => {
    const rl = readline.createInterface({
      input: process.stdin,
      output: process.stdout
    });
    rl.question('Enter the code from that page here: ', (code) => {
      rl.close();
      oauth2Client.getToken(code, (err, token) => {
        if (err) return reject(err);
        oauth2Client.credentials = token;
        let storeTokenErr = storeToken(token);
        if (storeTokenErr) return reject(storeTokenErr);
        resolve();
      });
    });
  });
}

/**
 * Store token to disk be used in later program executions.
 * @param {Object} token The token to store to disk.
 * @return {Error?} Returns an error or undefined if there is no error.
 */
function storeToken(token) {
  try {
    fs.mkdirSync(TOKEN_DIR);
    fs.writeFileSync(TOKEN_PATH, JSON.stringify(token));
  } catch (err) {
    if (err.code != 'EEXIST') return err;
  }
  console.log('Token stored to ' + TOKEN_PATH);
}

৬. BigQuery সেটআপ করুন

BigQuery এক্সপ্লোর করুন (ঐচ্ছিক)

BigQuery আমাদেরকে সেকেন্ডের মধ্যে বিশাল ডেটাসেট অনুসন্ধান করতে সাহায্য করে। প্রোগ্রাম্যাটিকভাবে অনুসন্ধান করার আগে ওয়েব ইন্টারফেস ব্যবহার করা যাক। যদি আপনি আগে কখনও BigQuery সেট আপ না করে থাকেন, তাহলে এই Quickstart এর ধাপগুলি অনুসরণ করুন

BigQuery-তে উপলব্ধ GitHub ডেটা ব্রাউজ করতে ক্লাউড কনসোলটি খুলুন এবং আপনার নিজস্ব কোয়েরিগুলি চালান। এই কোয়েরিটি লিখে এবং Run বোতাম টিপে GitHub-এর সবচেয়ে জনপ্রিয় সফ্টওয়্যার লাইসেন্সগুলি খুঁজে বের করা যাক।

bigquery.sql সম্পর্কে

WITH AllLicenses AS (
  SELECT * FROM `bigquery-public-data.github_repos.licenses`
)
SELECT
  license,
  COUNT(*) AS count,
  ROUND((COUNT(*) / (SELECT COUNT(*) FROM AllLicenses)) * 100, 2) AS percent
FROM `bigquery-public-data.github_repos.licenses`
GROUP BY license
ORDER BY count DESC
LIMIT 10

আমরা GitHub-এ লক্ষ লক্ষ পাবলিক রিপো বিশ্লেষণ করেছি এবং সবচেয়ে জনপ্রিয় লাইসেন্সগুলি খুঁজে পেয়েছি। দারুন! এবার একই কোয়েরি চালানোর সেটআপ করা যাক, কিন্তু এবার প্রোগ্রাম্যাটিকভাবে।

BigQuery সেটআপ করুন

license.js ফাইলে কোডটি প্রতিস্থাপন করুন। bigquery.query ফাংশনটি একটি প্রতিশ্রুতি প্রদান করবে।

লাইসেন্স **.js**

const google = require('googleapis');
const read = require('read-file');
const BigQuery = require('@google-cloud/bigquery');
const bigquery = BigQuery({
  credentials: require('./service_account_secret.json')
});

// See codelab for other queries.
const query = `
WITH AllLicenses AS (
  SELECT * FROM \`bigquery-public-data.github_repos.licenses\`
)
SELECT
  license,
  COUNT(*) AS count,
  ROUND((COUNT(*) / (SELECT COUNT(*) FROM AllLicenses)) * 100, 2) AS percent
FROM \`bigquery-public-data.github_repos.licenses\`
GROUP BY license
ORDER BY count DESC
LIMIT 10
`;

/**
 * Get the license data from BigQuery and our license data.
 * @return {Promise} A promise to return an object of licenses keyed by name.
 */
module.exports.getLicenseData = (auth) => {
  console.log('querying BigQuery...');
  return bigquery.query({
    query,
    useLegacySql: false,
    useQueryCache: true,
  }).then(bqData => Promise.all(bqData[0].map(getLicenseText)))
    .then(licenseData => new Promise((resolve, reject) => {
      resolve([auth, licenseData]);
    }))
    .catch((err) => console.error('BigQuery error:', err));
}

/**
 * Gets a promise to get the license text about a license
 * @param {object} licenseDatum An object with the license's
 *   `license`, `count`, and `percent`
 * @return {Promise} A promise to return license data with license text.
 */
function getLicenseText(licenseDatum) {
  const licenseName = licenseDatum.license;
  return new Promise((resolve, reject) => {
    read(`licenses/${licenseName}.txt`, 'utf8', (err, buffer) => {
      if (err) return reject(err);
      resolve({
        licenseName,
        count: licenseDatum.count,
        percent: licenseDatum.percent,
        license: buffer.substring(0, 1200) // first 1200 characters
      });
    });
  });
}

আমাদের অবজেক্টের গঠন বুঝতে এবং কোডটি কীভাবে কাজ করে তা দেখতে আমাদের Promise এর কলব্যাকের ভিতরে কিছু ডেটা console.log করার চেষ্টা করুন।

৭. স্লাইড তৈরি করুন

এবার মজার অংশে! আসুন Slides API এর create এবং batchUpdate পদ্ধতিগুলি কল করে স্লাইড তৈরি করি। আমাদের ফাইলটি নিম্নলিখিতগুলি দিয়ে প্রতিস্থাপন করা উচিত:

স্লাইডস.জেএস

const google = require('googleapis');
const slides = google.slides('v1');
const drive = google.drive('v3');
const openurl = require('openurl');
const commaNumber = require('comma-number');

const SLIDE_TITLE_TEXT = 'Open Source Licenses Analysis';

/**
 * Get a single slide json request
 * @param {object} licenseData data about the license
 * @param {object} index the slide index
 * @return {object} The json for the Slides API
 * @example licenseData: {
 *            "licenseName": "mit",
 *            "percent": "12.5",
 *            "count": "1667029"
 *            license:"<body>"
 *          }
 * @example index: 3
 */
function createSlideJSON(licenseData, index) {
  // Then update the slides.
  const ID_TITLE_SLIDE = 'id_title_slide';
  const ID_TITLE_SLIDE_TITLE = 'id_title_slide_title';
  const ID_TITLE_SLIDE_BODY = 'id_title_slide_body';

  return [{
    // Creates a "TITLE_AND_BODY" slide with objectId references
    createSlide: {
      objectId: `${ID_TITLE_SLIDE}_${index}`,
      slideLayoutReference: {
        predefinedLayout: 'TITLE_AND_BODY'
      },
      placeholderIdMappings: [{
        layoutPlaceholder: {
          type: 'TITLE'
        },
        objectId: `${ID_TITLE_SLIDE_TITLE}_${index}`
      }, {
        layoutPlaceholder: {
          type: 'BODY'
        },
        objectId: `${ID_TITLE_SLIDE_BODY}_${index}`
      }]
    }
  }, {
    // Inserts the license name, percent, and count in the title
    insertText: {
      objectId: `${ID_TITLE_SLIDE_TITLE}_${index}`,
      text: `#${index + 1} ${licenseData.licenseName}  — ~${licenseData.percent}% (${commaNumber(licenseData.count)} repos)`
    }
  }, {
    // Inserts the license in the text body paragraph
    insertText: {
      objectId: `${ID_TITLE_SLIDE_BODY}_${index}`,
      text: licenseData.license
    }
  }, {
    // Formats the slide paragraph's font
    updateParagraphStyle: {
      objectId: `${ID_TITLE_SLIDE_BODY}_${index}`,
      fields: '*',
      style: {
        lineSpacing: 10,
        spaceAbove: {magnitude: 0, unit: 'PT'},
        spaceBelow: {magnitude: 0, unit: 'PT'},
      }
    }
  }, {
    // Formats the slide text style
    updateTextStyle: {
      objectId: `${ID_TITLE_SLIDE_BODY}_${index}`,
      style: {
        bold: true,
        italic: true,
        fontSize: {
          magnitude: 10,
          unit: 'PT'
        }
      },
      fields: '*',
    }
  }];
}

/**
 * Creates slides for our presentation.
 * @param {authAndGHData} An array with our Auth object and the GitHub data.
 * @return {Promise} A promise to return a new presentation.
 * @see https://developers.google.com/apis-explorer/#p/slides/v1/
 */
module.exports.createSlides = (authAndGHData) => new Promise((resolve, reject) => {
  console.log('creating slides...');
  const [auth, ghData] = authAndGHData;

  // First copy the template slide from drive.
  drive.files.copy({
    auth: auth,
    fileId: '1toV2zL0PrXJOfFJU-NYDKbPx9W0C4I-I8iT85TS0fik',
    fields: 'id,name,webViewLink',
    resource: {
      name: SLIDE_TITLE_TEXT
    }
  }, (err, presentation) => {
    if (err) return reject(err);

    const allSlides = ghData.map((data, index) => createSlideJSON(data, index));
    slideRequests = [].concat.apply([], allSlides); // flatten the slide requests
    slideRequests.push({
      replaceAllText: {
        replaceText: SLIDE_TITLE_TEXT,
        containsText: { text: '{{TITLE}}' }
      }
    })

    // Execute the requests
    slides.presentations.batchUpdate({
      auth: auth,
      presentationId: presentation.id,
      resource: {
        requests: slideRequests
      }
    }, (err, res) => {
      if (err) {
        reject(err);
      } else {
        resolve(presentation);
      }
    });
  });
});

৮. স্লাইড খুলুন

সবশেষে, ব্রাউজারে প্রেজেন্টেশনটি খুলি। slides.js এ নিম্নলিখিত পদ্ধতিটি আপডেট করুন।

স্লাইডস.জেএস

/**
 * Opens a presentation in a browser.
 * @param {String} presentation The presentation object.
 */
module.exports.openSlidesInBrowser = (presentation) => {
  console.log('Presentation URL:', presentation.webViewLink);
  openurl.open(presentation.webViewLink);
}

চূড়ান্ত ফলাফল দেখানোর জন্য আপনার প্রকল্পটি শেষবারের মতো চালান।

9. অভিনন্দন!

BigQuery ব্যবহার করে বিশ্লেষণ করা ডেটা থেকে আপনি সফলভাবে Google Slides তৈরি করেছেন। আপনার স্ক্রিপ্ট Google Slides API এবং BigQuery ব্যবহার করে একটি উপস্থাপনা তৈরি করে সবচেয়ে সাধারণ সফ্টওয়্যার লাইসেন্সের বিশ্লেষণ রিপোর্ট করে।

সম্ভাব্য উন্নতি

আরও আকর্ষণীয় ইন্টিগ্রেশন তৈরির জন্য এখানে কিছু অতিরিক্ত ধারণা দেওয়া হল:

  • প্রতিটি স্লাইডে ছবি যোগ করুন
  • Gmail API ব্যবহার করে ইমেলের মাধ্যমে আপনার স্লাইডগুলি ভাগ করুন
  • কমান্ড লাইন আর্গুমেন্ট হিসেবে টেমপ্লেট স্লাইডটি কাস্টমাইজ করুন

আরও জানুন