이 페이지는 Cloud Translation API를 통해 번역되었습니다.

사용자 인터페이스 설정

이 Google Cloud Search 튜토리얼 페이지에서는 커스텀 검색 애플리케이션을 실행할 수 있습니다. 이 튜토리얼의 처음부터 시작하려면 다음을 참조하세요. Cloud Search 시작하기 튜토리얼

종속 항목 설치

커넥터가 아직 저장소의 색인을 생성하는 중이라면 새 셸을 열고 계속 진행합니다.
명령줄에서 디렉터리를 cloud-search-samples/end-to-end/search-interface
필요한 종속 항목을 다운로드하려면 실행하려면 다음 명령어를 실행합니다.

npm install

검색 애플리케이션 사용자 인증 정보 만들기

커넥터에서 Cloud Search를 호출하려면 서비스 계정 사용자 인증 정보가 필요합니다. API에 액세스할 수 있습니다 사용자 인증 정보를 만들려면 다음 안내를 따르세요.

Google Cloud 콘솔로 돌아갑니다.
왼쪽 탐색 메뉴에서 사용자 인증 정보를 클릭합니다.
사용자 인증 정보 만들기 드롭다운 목록에서 다음을 선택합니다. OAuth 클라이언트 ID. 'OAuth 클라이언트 ID 만들기' 페이지가 나타납니다.
(선택사항) 동의 화면을 구성하지 않은 경우 동의 화면 구성 'OAuth 동의' 화면이 나타납니다.
1. 내부를 클릭하고 만들기를 클릭합니다. 다른 'OAuth 동의' 화면 표시됩니다.
2. 필수 입력란을 작성합니다. 추가 안내는 사용자에게 안내하세요. 동의 섹션 OAuth 2.0을 설정합니다.
애플리케이션 유형 드롭다운 목록을 클릭하고 웹 애플리케이션을 선택합니다.
이름 필드에 'tutorial'을 입력합니다.
승인된 자바스크립트 원본 필드에서 URI 추가를 클릭합니다. 빈 'URI' 필드가 나타납니다.
URI 필드에 http://localhost:8080를 입력합니다.
만들기를 클릭합니다. 'OAuth 클라이언트가 생성됨' 화면이 나타납니다.
클라이언트 ID를 기록해 둡니다. 이 값은 애플리케이션이 실행될 때 OAuth2로 사용자 승인을 요청합니다. 클라이언트 보안 비밀번호는 필수 항목이 아닙니다. 를 참조하세요.
확인을 클릭합니다.

검색 애플리케이션 만들기

다음으로 관리 콘솔에서 검색 애플리케이션을 만듭니다. 검색 애플리케이션 검색 인터페이스를 가상으로 표현한 것으로 구성할 수 있습니다

Google 관리 콘솔로 돌아갑니다.
앱 아이콘을 클릭합니다. '앱 관리' 페이지가 나타납니다.
Google Workspace를 클릭합니다. '앱 Google Workspace 관리' 페이지가 나타납니다.
아래로 스크롤하여 Cloud Search를 클릭합니다. 'Google Workspace 설정' 페이지 표시됩니다.
검색 애플리케이션을 클릭합니다. '검색 애플리케이션' 페이지가 나타납니다.
둥근 노란색 +를 클릭합니다. '새 검색 애플리케이션 만들기' 대화상자가 나타납니다.
표시 이름 필드에 'tutorial'을 입력합니다.
만들기를 클릭합니다.
새로 만든 검색 애플리케이션 옆의 연필 아이콘을 클릭합니다. ('검색 애플리케이션 수정') '검색 애플리케이션 세부정보' 페이지가 나타납니다.
애플리케이션 ID를 기록해 둡니다.
데이터 소스 오른쪽의 연필 아이콘을 클릭합니다.
'튜토리얼' 옆의 사용 설정 전환을 클릭합니다. 이 전환 버튼을 사용하면 새로 만든 검색 애플리케이션의 튜토리얼 데이터 소스입니다.
'튜토리얼' 오른쪽 데이터 소스에서 표시 옵션을 클릭합니다.
모든 패싯을 확인합니다.
저장을 클릭합니다.
완료를 클릭합니다.

웹 애플리케이션 구성

사용자 인증 정보 및 검색 앱을 만든 후 애플리케이션 업데이트 다음과 같이 구성합니다.

명령줄에서 디렉터리를 `cloud-search-samples/end-to-end/search-interface/public.'
텍스트 편집기로 app.js 파일을 엽니다.
파일 상단에서 searchConfig 변수를 찾습니다.
[client-id]를 이전에 만든 OAuth 클라이언트 ID로 바꿉니다.
[application-id]를 이전 섹션에 나와 있습니다.
파일을 저장합니다.

애플리케이션 실행

다음 명령어를 실행하여 애플리케이션을 시작합니다.

npm run start

색인 쿼리

검색 위젯을 사용하여 색인을 쿼리하려면 다음 안내를 따르세요.

브라우저를 열고 http://localhost:8080으로 이동합니다.
로그인을 클릭하여 앱이 Cloud Search를 쿼리할 수 있도록 승인합니다. 확인할 수 있습니다
검색창에 '테스트'와 같은 검색어를 입력하고 그리고 Enter를 누릅니다. 페이지에 패싯 및 쿼리 결과와 함께 쿼리 결과가 페이지로 나누기 컨트롤을 사용하여 결과를 탐색할 수 있습니다.

코드 검토

나머지 섹션에서는 사용자 인터페이스가 어떻게 빌드되는지 살펴봅니다.

위젯 로드

위젯 및 관련 라이브러리는 두 단계로 로드됩니다. 먼저, 부트스트랩은 스크립트가 로드됩니다.

index.html

GitHub에서 보기

<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

둘째, 스크립트가 준비되면 onLoad 콜백이 호출됩니다. 그런 다음 Google API 클라이언트, Google 로그인, Cloud Search 위젯 라이브러리를 통해 액세스할 수 있습니다.

app.js

GitHub에서 보기

/**
 * Load the cloud search widget & auth libraries. Runs after
 * the initial gapi bootstrap library is ready.
 */
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

앱의 나머지 초기화는 initializeApp에서 처리합니다. 모든 필수 라이브러리가 로드된 후에는

승인 처리

사용자를 대신하여 쿼리하려면 사용자가 앱을 승인해야 합니다. 위젯이 사용자에게 승인하라는 메시지를 표시할 수 있으므로 더 나은 사용자 경험을 달성할 수 있습니다. 직접 처리해야 합니다.

검색 인터페이스의 경우 앱은 검색에 따라 두 가지 뷰를 제공합니다. 사용자의 로그인 상태에 적용됩니다.

index.html

GitHub에서 보기

<div class="content">
  <div id="app" hidden>
    <div id="header">
      <button id="sign-out">Sign-out</button>
    </div>
    <!-- Markup for widget...-->
  </div>
  <div id="welcome" hidden>
    <h1>Cloud Search Tutorial</h1>
    <p>Sign in with your Google account to search.</p>
    <button id="sign-in">Sign-in</button>
  </div>
</div>

초기화 중에 올바른 뷰가 사용 설정되고 로그인 및 로그아웃 이벤트는 다음과 같이 구성됩니다.

app.js

GitHub에서 보기

/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
async function initializeApp() {
  await gapi.auth2.init({
      'clientId': searchConfig.clientId,
      'scope': 'https://www.googleapis.com/auth/cloud_search.query'
  });

  let auth = gapi.auth2.getAuthInstance();

  // Watch for sign in status changes to update the UI appropriately
  let onSignInChanged = (isSignedIn) => {
    document.getElementById("app").hidden = !isSignedIn;
    document.getElementById("welcome").hidden = isSignedIn;
    if (resultsContainer) {
      resultsContainer.clear();
    }
  }
  auth.isSignedIn.listen(onSignInChanged);
  onSignInChanged(auth.isSignedIn.get()); // Trigger with current status

  // Connect sign-in/sign-out buttons
  document.getElementById("sign-in").onclick = (e) =>  auth.signIn();
  document.getElementById("sign-out").onclick = (e) => auth.signOut();

  // ...

}

검색 인터페이스 만들기

검색 위젯을 사용하려면 검색에 필요한 HTML 마크업이 약간 필요합니다. 검색 결과를 유지하려면 다음을 수행합니다.

index.html

GitHub에서 보기

<div id="search_bar">
  <div>
    <div id="suggestions_anchor">
      <input type="text" id="search_input" placeholder="Search for...">
    </div>
  </div>
</div>
<div id="facet_results" ></div>
<div id="search_results" ></div>

위젯이 초기화되고 입력 및 컨테이너 요소에 결합됨 초기화가 진행되는 동안 다음을 실행합니다.

app.js

GitHub에서 보기

gapi.config.update('cloudsearch.config/apiVersion', 'v1');
resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setSearchResultsContainerElement(document.getElementById('search_results'))
  .setFacetResultsContainerElement(document.getElementById('facet_results'))
  .build();

const searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setInput(document.getElementById('search_input'))
  .setAnchor(document.getElementById('suggestions_anchor'))
  .setResultsContainer(resultsContainer)
  .build();

축하합니다. 튜토리얼을 완료했습니다. 에서 다음 시간 동안 계속 정리 안내를 참조하세요.

이전 다음