Ta strona została przetłumaczona przez Cloud Translation API.

Generowanie prezentacji Google na podstawie big data w Node.js

1. Omówienie

Z tego ćwiczenia w Codelabs dowiesz się, jak używać Prezentacji Google jako własnych narzędzi do prezentacji, aby przeprowadzić analizę najpopularniejszych licencji na oprogramowanie. Będziesz wysyłać zapytania do całego kodu open source w GitHubie za pomocą interfejsu BigQuery API, a także przygotować prezentację za pomocą interfejsu Google Prezentacji API, aby zaprezentować wyniki. Przykładowa aplikacja została skompilowana w środowisku Node.js, ale te same podstawowe zasady mają zastosowanie do każdej architektury.

Czego się nauczysz

Tworzenie prezentacji przy użyciu interfejsu API Prezentacji
Korzystanie z BigQuery do uzyskiwania wglądu w duży zbiór danych
Kopiowanie pliku przy użyciu interfejsu Google Drive API

Czego potrzebujesz

Zainstalowano Node.js
Dostęp do internetu i przeglądarki
konto Google,
Projekt Google Cloud Platform

2. Pobieranie przykładowego kodu

Możesz pobrać cały przykładowy kod na swój komputer...

...lub skopiuj repozytorium GitHub z poziomu wiersza poleceń.

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

Repozytorium zawiera zbiór katalogów reprezentujących każdy etap procesu, na wypadek gdyby trzeba było odwoływać się do roboczej wersji.

Będziesz pracować na kopii znajdującej się w katalogu start, ale w razie potrzeby możesz odwołać się do innych plików lub kopiować z nich pliki.

3. Uruchamianie przykładowej aplikacji

Najpierw skonfigurujmy skrypt Node. Po pobraniu kodu wykonaj te instrukcje, aby zainstalować i uruchomić aplikację Node.js:

Otwórz terminal wiersza poleceń na komputerze i przejdź do katalogu start ćwiczenia w Codelabs.
Wpisz podane niżej polecenie, aby zainstalować zależności Node.js.

npm install

Wpisz to polecenie, aby uruchomić skrypt:

node .

Zwróć uwagę na powitanie, które wyświetla kroki dla tego projektu.

-- Start generating slides. --
TODO: Get Client Secrets
TODO: Authorize
TODO: Get Data from BigQuery
TODO: Create Slides
TODO: Open Slides
-- Finished generating slides. --

Listę zadań do wykonania znajdziesz w slides.js, license.js i auth.js. Pamiętaj, że do łączenia kroków wymaganych do ukończenia aplikacji używamy obietnic JavaScriptu, ponieważ każdy z nich zależy od tego, jaki krok został ukończony.

Jeśli nie znasz obietnic, nie martw się – dostarczymy cały potrzebny kod. Krótko mówiąc, obietnice pozwolą nam obsługiwać przetwarzanie asynchroniczne w bardziej synchroniczny sposób.

4. Pobieranie tajnych kluczy klienta

Aby korzystać z interfejsów API Prezentacji, BigQuery i Dysku, utworzymy klienta OAuth i konto usługi.

Skonfiguruj Google Developers Console

Użyj tego kreatora, aby utworzyć lub wybrać projekt w Google Developers Console i automatycznie włączyć interfejs API. Kliknij Dalej, a następnie Przejdź do danych logowania.
Na stronie Dodaj dane logowania do projektu kliknij przycisk Anuluj.
U góry strony wybierz kartę Ekran zgody OAuth. Wybierz Adres e-mail, wpisz nazwę produktu Slides API Codelab i kliknij przycisk Zapisz.

Włączanie interfejsów API BigQuery, Dysku i Prezentacji

Wybierz kartę Panel, kliknij przycisk Włącz API i włącz te 3 interfejsy API:
BigQuery API.
Interfejs Google Drive API
Interfejs API Prezentacji Google

Pobierz tajny klucz klienta OAuth (na potrzeby Prezentacji i Dysku)

Wybierz kartę Dane logowania, kliknij przycisk Utwórz dane logowania i wybierz Identyfikator klienta OAuth.
Wybierz typ aplikacji Other (Inna), wpisz nazwę Google Slides API Codelab i kliknij przycisk Create (Utwórz). Kliknij OK, aby zamknąć okno dialogowe.
Kliknij przycisk file_download (Pobierz plik JSON) po prawej stronie identyfikatora klienta.
Zmień nazwę pliku obiektu tajnego na client_secret.json i skopiuj go do katalogów start/ i finish/.

Pobierz tajny klucz konta usługi (dla BigQuery)

Wybierz kartę Dane logowania, kliknij przycisk Utwórz dane logowania i wybierz Klucz konta usługi.
W menu wybierz New Service Account (Nowe konto usługi). Wybierz nazwę Slides API Codelab Service dla swojej usługi. Następnie kliknij Rola i przewiń do sekcji BigQuery, a potem zaznacz Wyświetlający dane BigQuery i Użytkownik zadań BigQuery.
W polu Typ klucza wybierz JSON.
Kliknij Utwórz. Plik klucza zostanie automatycznie pobrany na Twój komputer. Kliknij Zamknij, aby zamknąć wyświetlone okno.
Zmień nazwę pliku obiektu tajnego na service_account_secret.json i skopiuj go do katalogów start/ i finish/.

Pobieranie tajnych kluczy klienta

W języku start/auth.js wypełnimy metodę 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));
    });
  });
}

Klucze tajny klienta zostały wczytane. Dane logowania zostaną przekazane do następnej obietnicy. Uruchom projekt za pomocą narzędzia node ., aby sprawdzić, czy nie ma błędów.

5. Utwórz klienta OAuth2

Aby utworzyć slajdy, dodajmy uwierzytelnianie do interfejsów API Google, dodając poniższy kod do pliku auth.js. W ramach tego uwierzytelniania będzie można prosić o dostęp do Twojego konta Google z możliwością odczytywania i zapisywania plików na Dysku Google, tworzenia prezentacji w Prezentacjach Google oraz wykonywania zapytań tylko do odczytu z Google BigQuery. (Uwaga: getClientSecrets nie został zmieniony)

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. Skonfiguruj BigQuery

Poznaj BigQuery (opcjonalnie)

BigQuery pozwala nam wysyłać zapytania do ogromnych zbiorów danych w kilka sekund. Zanim zaczniesz tworzyć zapytania programowe, użyj interfejsu internetowego. Jeśli dopiero zaczynasz konfigurować BigQuery, wykonaj czynności opisane w tym krótkim wprowadzeniu.

Otwórz konsolę Cloud, aby przeglądać dane GitHub dostępne w BigQuery i uruchamiać własne zapytania. Aby poznać najpopularniejsze licencje na oprogramowanie w GitHubie, napisz to zapytanie i naciśnij przycisk Uruchom.

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

Właśnie przeanalizowaliśmy miliony publicznych repozytoriów w GitHubie i odkryliśmy najpopularniejsze licencje. Super! Teraz skonfigurujmy uruchamianie tego samego zapytania, ale tym razem automatycznie.

Skonfiguruj BigQuery

Zastąp kod w pliku license.js. Funkcja bigquery.query zwróci obietnicę.

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

Spróbuj console.log niektóre dane zawarte w wywołaniu zwrotnym Promise, aby zrozumieć strukturę naszych obiektów i zobaczyć, jak działa kod.

7. Tworzenie prezentacji

Teraz zaczyna się najciekawsza część: Możesz utworzyć slajdy, wywołując metody create i batchUpdate interfejsu Prezentacje API. Nasz plik powinien zostać zastąpiony następującym plikiem:

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. Otwórz Prezentacje

Na koniec otwórz prezentację w przeglądarce. Zaktualizuj tę metodę w 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);
}

Uruchom projekt po raz ostatni, aby zobaczyć efekt końcowy.

9. Gratulacje!

Udało Ci się wygenerować Prezentacje Google na podstawie danych przeanalizowanych w BigQuery. Skrypt tworzy prezentację przy użyciu interfejsu API Prezentacji Google i BigQuery, aby zgłosić analizę najpopularniejszych licencji na oprogramowanie.

Możliwe ulepszenia

Oto kilka dodatkowych pomysłów na jeszcze atrakcyjniejszą integrację:

Dodaj obrazy do każdego slajdu
Udostępnij slajdy w e-mailu, korzystając z interfejsu Gmail API.
Dostosuj slajd szablonu jako argument wiersza poleceń

Więcej informacji

Zapoznaj się z dokumentacją dla deweloperów dotyczącą interfejsu API Prezentacji Google.
Publikuj pytania i znajduj odpowiedzi na stronie Stack Overflow pod tagiem google-slides-api.

Generowanie prezentacji Google na podstawie big data w Node.js

1. Omówienie

Czego się nauczysz

Czego potrzebujesz

2. Pobieranie przykładowego kodu

3. Uruchamianie przykładowej aplikacji

4. Pobieranie tajnych kluczy klienta

Skonfiguruj Google Developers Console

Włączanie interfejsów API BigQuery, Dysku i Prezentacji

Pobierz tajny klucz klienta OAuth (na potrzeby Prezentacji i Dysku)

Pobierz tajny klucz konta usługi (dla BigQuery)

Pobieranie tajnych kluczy klienta

auth.js

5. Utwórz klienta OAuth2

auth.js

6. Skonfiguruj BigQuery

Poznaj BigQuery (opcjonalnie)

bigquery.sql

Skonfiguruj BigQuery

license**.js**

7. Tworzenie prezentacji

slides.js

8. Otwórz Prezentacje

slides.js

9. Gratulacje!

Możliwe ulepszenia

Więcej informacji

license.js