Node.js के बिग डेटा से Google Slides प्रज़ेंटेशन बनाएं

1. खास जानकारी

इस कोडलैब में, आपको यह पता चलेगा कि सबसे आम सॉफ़्टवेयर लाइसेंस का विश्लेषण करने के लिए, Google Slides को कस्टम प्रज़ेंटेशन टूल के तौर पर कैसे इस्तेमाल किया जा सकता है. BigQuery API का इस्तेमाल करके, GitHub पर सभी ओपन सोर्स कोड के लिए क्वेरी की जाएगी. इसके बाद, नतीजे दिखाने के लिए Google Slides API का इस्तेमाल करके एक स्लाइड डेक बनाया जाएगा. ऐप्लिकेशन का नमूना Node.js का इस्तेमाल करके बनाया गया है, लेकिन एक जैसे बुनियादी सिद्धांत सभी आर्किटेक्चर पर लागू होते हैं.

आप इन चीज़ों के बारे में जानेंगे

  • Slides API का इस्तेमाल करके प्रज़ेंटेशन बनाना
  • किसी बड़े डेटासेट के बारे में अहम जानकारी पाने के लिए, BigQuery का इस्तेमाल करना
  • Google Drive API का इस्तेमाल करके फ़ाइल कॉपी करना

आपको इनकी ज़रूरत होगी

  • Node.js इंस्टॉल किया गया
  • इंटरनेट और वेब ब्राउज़र का ऐक्सेस
  • Google खाता
  • Google Cloud Platform प्रोजेक्ट

2. सैंपल कोड पाएं

आप या तो सभी नमूना कोड को अपने कंप्यूटर पर डाउनलोड कर सकते हैं...

...या कमांड लाइन से, GitHub रिपॉज़िटरी का क्लोन बनाएं.

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

डेटा स्टोर करने की जगह में, प्रोसेस के हर चरण के बारे में बताने वाली डायरेक्ट्री का सेट होता है. ज़रूरत पड़ने पर, काम करने वाले वर्शन का रेफ़रंस दिया जा सकता है.

आपको start डायरेक्ट्री में मौजूद कॉपी पर काम करना होगा. हालांकि, आपके पास दूसरी फ़ाइलों को देखने या उनमें मौजूद फ़ाइलों को कॉपी करने का विकल्प होता है.

3. सैंपल ऐप्लिकेशन चलाएं

सबसे पहले, नोड स्क्रिप्ट तैयार करके उसे चलाएं. कोड डाउनलोड होने के बाद, 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 प्रॉमिसेस का इस्तेमाल करते हैं. ऐसा इसलिए, क्योंकि हर चरण पूरे किए जा रहे पिछले चरण पर निर्भर करता है.

अगर आपको प्रॉविज़निंग की जानकारी नहीं है, तो चिंता न करें. हम आपको वे सभी कोड उपलब्ध करा देंगे जिनकी आपको ज़रूरत होगी. संक्षेप में, प्रॉम्ट हमें एसिंक्रोनस प्रोसेसिंग को और सिंक्रोनस तरीके से करने का तरीका प्रदान करते हैं.

4. क्लाइंट सीक्रेट पाएं

Slides, BigQuery, और Drive API का इस्तेमाल करने के लिए, हम OAuth क्लाइंट और सेवा खाता बनाएंगे.

Google Developers Console सेट करें

  1. Google Developers Console में कोई प्रोजेक्ट बनाने या चुनने और एपीआई को अपने-आप चालू करने के लिए, इस विज़र्ड का इस्तेमाल करें. जारी रखें पर क्लिक करें. इसके बाद, क्रेडेंशियल पर जाएं पर क्लिक करें.
  2. अपने प्रोजेक्ट में क्रेडेंशियल जोड़ें पेज पर, रद्द करें बटन पर क्लिक करें.
  3. पेज पर सबसे ऊपर, OAuth का इस्तेमाल करने के लिए सहमति वाली स्क्रीन टैब चुनें. ईमेल पता चुनें, प्रॉडक्ट का नाम Slides API Codelab डालें, और सेव करें बटन पर क्लिक करें.

BigQuery, Drive, और Slides के एपीआई चालू करें

  1. डैशबोर्ड टैब चुनें, एपीआई चालू करें बटन पर क्लिक करें और इन तीन एपीआई को चालू करें:
  2. BigQuery एपीआई
  3. Google Drive एपीआई
  4. Google Slides API

OAuth क्लाइंट सीक्रेट डाउनलोड करें (Slides और Drive के लिए)

  1. क्रेडेंशियल टैब चुनें, क्रेडेंशियल बनाएं बटन पर क्लिक करें और OAuth क्लाइंट आईडी चुनें.
  2. ऐप्लिकेशन प्रकार अन्य चुनें, Google Slides API Codelab नाम डालें और बनाएं बटन पर क्लिक करें.नज़र आने वाले डायलॉग को खारिज करने के लिए ठीक है पर क्लिक करें.
  3. क्लाइंट आईडी की दाईं ओर मौजूद file_download (JSON डाउनलोड करें) बटन पर क्लिक करें.
  4. अपनी सीक्रेट फ़ाइल का नाम बदलकर client_secret.json करें. इसके बाद, इसे start/ और finish/, दोनों डायरेक्ट्री में कॉपी करें.

सेवा खाते का सीक्रेट डाउनलोड करना (BigQuery के लिए)

  1. क्रेडेंशियल टैब चुनें, क्रेडेंशियल बनाएं बटन पर क्लिक करें और सेवा खाता कुंजी चुनें.
  2. ड्रॉपडाउन में, नया सेवा खाता चुनें. अपनी सेवा के लिए Slides API Codelab Service नाम चुनें. इसके बाद, भूमिका पर क्लिक करें और स्क्रोल करके BigQuery पर जाएं. इसके बाद, BigQuery डेटा व्यूअर और BigQuery जॉब यूज़र दोनों चुनें.
  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 . के साथ चलाएं.

5. OAuth2 क्लाइंट बनाएं

स्लाइड बनाने के लिए, अपनी auth.js फ़ाइल में नीचे दिया गया कोड जोड़कर, Google API में पुष्टि करने की सुविधा जोड़ें. पुष्टि करने की इस प्रक्रिया के तहत, आपके Google खाते को ऐक्सेस करने का अनुरोध किया जाएगा. इससे Google Drive में फ़ाइलों को पढ़ने और उनमें बदलाव करने की अनुमति मिलेगी. साथ ही, Google Slides में प्रज़ेंटेशन बनाने और Google BigQuery से रीड-ओनली क्वेरी लागू करने का अनुरोध भी किया जा सकेगा. (ध्यान दें: हमने 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);
}

6. BigQuery सेटअप करें

BigQuery एक्सप्लोर करें (ज़रूरी नहीं)

BigQuery की मदद से, हम बड़े डेटासेट की क्वेरी कुछ ही सेकंड में कर पाते हैं. प्रोग्राम के हिसाब से क्वेरी करने से पहले, वेब इंटरफ़ेस का इस्तेमाल करते हैं. अगर आपने पहले कभी BigQuery सेट अप नहीं किया है, तो इस क्विकस्टार्ट में दिया गया तरीका अपनाएं.

BigQuery में उपलब्ध GitHub डेटा ब्राउज़ करने और अपनी क्वेरी चलाने के लिए, Cloud Console खोलें. GitHub पर सबसे लोकप्रिय सॉफ़्टवेयर लाइसेंस के बारे में जानने के लिए, इस क्वेरी को लिखें और Run बटन दबाएं.

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 फ़ंक्शन, एक प्रॉमिस देगा.

license**.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 करने की कोशिश करें.

7. स्लाइड बनाएं

अब मज़े की बात! स्लाइड एपीआई के create और batchUpdate तरीकों को कॉल करके स्लाइड बनाते हैं. हमारी फ़ाइल को इस फ़ाइल से बदलें:

slides.js

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

8. Slides खोलें

आखिर में, प्रज़ेंटेशन को ब्राउज़र में खोलें. slides.js में जाकर, यह तरीका अपडेट करें.

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 का इस्तेमाल करके, ईमेल के ज़रिए अपनी स्लाइड शेयर करें
  • टेंप्लेट स्लाइड को कमांड लाइन आर्ग्युमेंट के तौर पर पसंद के मुताबिक बनाएं

ज़्यादा जानें