스마트 칩으로 Google 도서 링크 미리보기

코딩 수준: 중급
시간: 30분
프로젝트 유형: Google Workspace 부가기능

목표

• 부가기능의 기능을 이해합니다.
• 다음을 사용하여 부가기능을 빌드하는 방법을 알아봅니다. Apps Script에 대한 이해도를 높이고 있습니다.
• 환경을 설정합니다.
• 스크립트를 설정합니다.
• 스크립트를 실행합니다.

Google Workspace 부가기능 정보

이 샘플에서는 다음 링크에서 링크를 미리 보는 Google Workspace 부가기능을 만듭니다. Google 도서를 Google Docs 문서 Google 도서 URL을 그러면 부가기능이 링크 미리보기를 트리거합니다. 링크를 미리 보려면 스마트 칩에 연결하고 링크 위에 포인터를 가져가면 해당하는 카드를 볼 수 있습니다. 책에 대한 추가 정보를 표시합니다.

이 부가기능은 Apps Script의 UrlFetch 서비스를 사용하여 Google 도서에 연결 API를 사용하고 Google Docs에 표시할 Google 도서에 관한 정보를 제공합니다.

작동 방식

Google Workspace 부가기능의 매니페스트 파일이 나오면 스크립트는 Google Docs도구를 확장하고 Google 도서 웹사이트의 특정 패턴과 일치하는 URL 미리보기 (https://books.google.com).

코드 파일에서 스크립트는 Google Books API에 연결하고 를 사용하여 책에 대한 정보를 가져옵니다 (Volume의 인스턴스). 리소스) 이 스크립트는 이 정보를 사용하여 책의 제목, 그리고 요약, 페이지 수, 책 표지 및 평점 수 등이 있습니다.

Apps Script 서비스

이 부가기능은 다음 서비스를 사용합니다.

• UrlFetch 서비스: Google 도서에 연결 도서 (API의 인스턴스)에 대한 정보를 가져오는 API Volume 리소스).
• 카드 서비스: 사용자를 만듭니다. 인터페이스입니다.

기본 요건

이 샘플을 사용하려면 다음과 같은 기본 요건이 필요합니다.

• Google 계정 (Google Workspace 계정은 관리자의 승인이 필요함)

• 인터넷에 액세스할 수 있는 웹브라우저

• Google Cloud 프로젝트 연결할 수 있습니다 자세한 내용은 도메인에 대한 결제 사용 설정 프로젝트의 인스턴스입니다.

환경 설정

다음 섹션에서는 부가기능

Google Cloud 콘솔에서 Cloud 프로젝트 열기

아직 열려 있지 않으면 사용할 Cloud 프로젝트를 엽니다. 다음을 참조하세요.

1. Google Cloud 콘솔에서 프로젝트 선택 페이지로 이동합니다.

   Cloud 프로젝트 선택

2. 사용할 Google Cloud 프로젝트를 선택합니다. 또는 프로젝트 만들기를 클릭하고 화면에 표시된 안내를 따릅니다. Google Cloud 프로젝트를 만드는 경우 프로젝트에 결제를 사용 설정해야 할 수도 있습니다.

Google Books API 사용 설정

이 부가기능은 Google Books API에 연결됩니다. Google API를 사용하려면 먼저 Google Cloud 프로젝트에서 사용 설정해야 합니다. 단일 Google Cloud 프로젝트에서 하나 이상의 API를 사용 설정할 수 있습니다.

• Cloud 프로젝트에서 Books API를 사용 설정합니다.

  API 사용 설정하기

OAuth 동의 화면 구성

이 부가기능을 사용하려면 구성된 동의 화면이 표시됩니다. OAuth 동의 화면을 구성하면 개발자가 앱을 게시할 수 있도록 Google에서 앱을 사용자에게 표시하고 등록합니다. 확인할 수 있습니다

1. Google Cloud 콘솔에서 메뉴 로 이동합니다. > API 및 서비스 > OAuth 동의 화면.

   OAuth 동의 화면으로 이동

2. 사용자 유형으로 내부를 선택한 다음 만들기를 클릭합니다.
3. 앱 등록 양식을 작성한 다음 저장하고 계속하기를 클릭합니다.

4. 지금은 범위 추가를 건너뛰고 저장 후 계속을 클릭할 수 있습니다. 나중에 외부에서 사용하기 위해 앱을 만들 때 Google Workspace 조직에서 사용하는 경우 사용자 유형을 외부로 변경한 다음 앱에 필요한 승인 범위를 추가합니다.

5. 앱 등록 요약을 검토합니다. 변경하려면 수정을 클릭합니다. 앱이 등록이 확인되면 대시보드로 돌아가기를 클릭합니다.

Google Books API의 API 키 가져오기

1. Google Cloud 콘솔로 이동합니다. 결제가 사용 설정된 프로젝트가 열려 있는지 확인합니다.

2. Google Cloud 콘솔에서 메뉴 로 이동합니다. > API 및 서비스 > 사용자 인증 정보를 선택합니다.

   사용자 인증 정보로 이동

3. 사용자 인증 정보 만들기 > API 키를 클릭합니다.

4. 이후 단계에서 사용할 수 있도록 API 키를 기록해 둡니다.

스크립트 설정

다음 섹션에서는 부가기능

Apps Script 프로젝트 만들기

1. 다음 버튼을 클릭하여 Google 도서에서 링크 미리보기를 엽니다. Apps Script 프로젝트.
   프로젝트 열기
2. Overview(개요)를 클릭합니다.
3. 개요 페이지에서 사본 만들기를 클릭합니다.
4. Apps Script 프로젝트 사본에서 Code.gs으로 이동합니다. 파일을 만들고 YOUR_API_KEY를 이전 섹션에 나와 있습니다.

Cloud 프로젝트 번호를 복사합니다.

1. Google Cloud 콘솔에서 메뉴 로 이동합니다. > IAM 및 관리자 > 설정을 탭합니다.

   IAM & 관리자 설정으로 이동

2. 프로젝트 번호 필드에 값을 복사합니다.

Apps Script 프로젝트의 Cloud 프로젝트 설정

1. Apps Script 프로젝트에서 클릭 프로젝트 설정
2. Google Cloud Platform(GCP) 프로젝트에서 프로젝트 변경을 클릭합니다.
3. GCP 프로젝트 번호에 Google Cloud 프로젝트 번호를 붙여넣습니다.
4. 프로젝트 설정을 클릭합니다.

부가기능 테스트

다음 섹션에서는 개발자가 만든 부가기능을 테스트합니다.

테스트 배포 설치

1. Apps Script 프로젝트에서 편집기를 클릭합니다.
2. YOUR_API_KEY를 이전 섹션을 확인해 보았습니다
3. 배포 > 배포 테스트를 클릭합니다.
4. 설치 > 완료를 클릭합니다.

Google Docs에서 링크 미리보기

1. 다음에서 Google Docs 문서 만들기: docs.new.
2. 다음 URL을 문서에 붙여넣고 tab 키를 눌러 URL을 스마트 칩으로 변환합니다. <ph type="x-smartling-placeholder">https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ</ph>
3. 스마트 칩 위로 포인터를 가져간 다음 메시지가 표시되면 다음에 대한 액세스를 승인합니다. 부가기능을 실행할 수 있습니다 미리보기 카드는 책에 관한 정보를 찾을 수 있습니다.

다음 이미지는 링크 미리보기를 보여줍니다.

코드 검토

이 문제의 Apps Script 코드를 검토하려면 소스 코드 보기를 클릭하여 섹션:

소스 코드 보기

appsscript.json

solutions/add-on/book-smartchip/appsscript.json

GitHub에서 보기

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/script.external_request"
  ],
  "urlFetchWhitelist": [
    "https://www.googleapis.com/books/v1/volumes/"
  ],
  "addOns": {
    "common": {
      "name": "Preview Books Add-on",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/library-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "bookLinkPreview",
          "patterns": [
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books"
            },
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books/edition"
            }
          ],
          "labelText": "Book",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/book-icon.png",
          "localizedLabelText": {
            "es": "Libros"
          }
        }
      ]
    }
  }
}

Code.gs

solutions/add-on/book-smartchip/Code.js

GitHub에서 보기

function getBook(id) {
  const apiKey = 'YOUR_API_KEY'; // Replace with your API key
  const apiEndpoint = `https://www.googleapis.com/books/v1/volumes/${id}?key=${apiKey}&country=US`;
  const response = UrlFetchApp.fetch(apiEndpoint);
  return JSON.parse(response);
}

function bookLinkPreview(event) {
 if (event.docs.matchedUrl.url) {
    const segments = event.docs.matchedUrl.url.split('/');
    const volumeID = segments[segments.length - 1];

    const bookData = getBook(volumeID);
    const bookTitle = bookData.volumeInfo.title;
    const bookDescription = bookData.volumeInfo.description;
    const bookImage = bookData.volumeInfo.imageLinks.small;
    const bookAuthors = bookData.volumeInfo.authors;
    const bookPageCount = bookData.volumeInfo.pageCount;

    const previewHeader = CardService.newCardHeader()
      .setSubtitle('By ' + bookAuthors)
      .setTitle(bookTitle);

    const previewPages = CardService.newDecoratedText()
      .setTopLabel('Page count')
      .setText(bookPageCount);

    const previewDescription = CardService.newDecoratedText()
      .setTopLabel('About this book')
      .setText(bookDescription).setWrapText(true);

    const previewImage = CardService.newImage()
      .setAltText('Image of book cover')
      .setImageUrl(bookImage);

    const buttonBook = CardService.newTextButton()
      .setText('View book')
      .setOpenLink(CardService.newOpenLink()
        .setUrl(event.docs.matchedUrl.url));

    const cardSectionBook = CardService.newCardSection()
      .addWidget(previewImage)
      .addWidget(previewPages)
      .addWidget(CardService.newDivider())
      .addWidget(previewDescription)
      .addWidget(buttonBook);

    return CardService.newCardBuilder()
    .setHeader(previewHeader)
    .addSection(cardSectionBook)
    .build();
  }
}

관련 주제

• 스마트 칩으로 링크 미리보기
• Google Books API 참조 문서