사용자 인터페이스 설정

이 Google Cloud Search 튜토리얼 페이지에서는 삽입 가능한 검색 위젯을 사용하여 맞춤 검색 애플리케이션을 설정하는 방법을 보여줍니다. 이 튜토리얼을 처음부터 시작하려면 Cloud Search 시작하기 튜토리얼을 참고하세요.

종속 항목 설치

  1. 커넥터가 여전히 저장소의 색인을 생성하고 있다면 새 셸을 열고 계속 진행합니다.

  2. 명령줄에서 디렉터리를 cloud-search-samples/end-to-end/search-interface로 변경합니다.

  3. 웹 서버를 실행하는 데 필요한 종속 항목을 다운로드하려면 다음 명령어를 실행합니다.

npm install

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

커넥터는 Cloud Search API를 호출하는 데 서비스 계정 사용자 인증 정보가 필요합니다. 사용자 인증 정보를 만들려면 다음 단계를 따르세요.

  1. Google Cloud 콘솔로 돌아갑니다.

  2. 왼쪽 탐색 메뉴에서 사용자 인증 정보를 클릭합니다.

  3. 사용자 인증 정보 만들기 드롭다운 목록에서 OAuth 클라이언트 ID를 선택합니다. 'OAuth 클라이언트 ID 만들기' 페이지가 표시됩니다.

  4. (선택사항) 동의 화면을 구성하지 않았다면 동의 화면 구성을 클릭합니다. 'OAuth 동의' 화면이 표시됩니다.

    1. 내부를 클릭하고 만들기를 클릭합니다. 다른 'OAuth 동의' 화면이 표시됩니다.

    2. 필수 입력란을 작성합니다. 자세한 내용은 OAuth 2.0 설정의 사용자 동의 섹션을 참고하세요.

  5. 애플리케이션 유형 드롭다운 목록을 클릭하고 웹 애플리케이션을 선택합니다.

  6. 이름 입력란에 'tutorial'을 입력합니다.

  7. 승인된 JavaScript 출처 필드에서 URI 추가를 클릭합니다. 빈 'URI' 필드가 표시됩니다.

  8. URI 필드에 http://localhost:8080을 입력합니다.

  9. 만들기를 클릭합니다. 'OAuth 클라이언트 생성됨' 화면이 표시됩니다.

  10. 클라이언트 ID를 기록합니다. 이 값은 OAuth2로 사용자 승인을 요청할 때 애플리케이션을 식별하는 데 사용됩니다. 이 구현에는 클라이언트 보안 비밀번호가 필요하지 않습니다.

  11. 확인을 클릭합니다.

검색 애플리케이션 만들기

다음으로 관리 콘솔에서 검색 애플리케이션을 만듭니다. 검색 애플리케이션은 검색 인터페이스와 기본 구성을 가상적으로 나타낸 것입니다.

  1. Google 관리 콘솔로 돌아갑니다.
  2. 앱 아이콘을 클릭합니다. '앱 관리' 페이지가 표시됩니다.
  3. Google Workspace를 클릭합니다. 'Apps Google Workspace 관리' 페이지가 표시됩니다.
  4. 아래로 스크롤하여 Cloud Search를 클릭합니다. 'Google Workspace 설정' 페이지가 표시됩니다.
  5. 검색 애플리케이션을 클릭합니다. '애플리케이션 검색' 페이지가 표시됩니다.
  6. 노란색 원형 +를 클릭합니다. '새 검색 애플리케이션 만들기' 대화상자가 표시됩니다.
  7. 표시 이름 필드에 'tutorial'을 입력합니다.
  8. 만들기를 클릭합니다.
  9. 새로 만든 검색 애플리케이션 옆에 있는 연필 아이콘을 클릭합니다('검색 애플리케이션 수정'). '애플리케이션 세부정보 검색' 페이지가 표시됩니다.
  10. 애플리케이션 ID를 기록해 둡니다.
  11. 데이터 소스 오른쪽에 있는 연필 아이콘을 클릭합니다.
  12. '튜토리얼' 옆에 있는 사용 전환 버튼을 클릭합니다. 이 전환 버튼을 사용하면 새로 만든 검색 애플리케이션에 튜토리얼 데이터 소스가 사용 설정됩니다.
  13. '튜토리얼' 데이터 소스 오른쪽에서 표시 옵션을 클릭합니다.
  14. 모든 측정기준을 선택합니다.
  15. 저장을 클릭합니다.
  16. 완료를 클릭합니다.

웹 애플리케이션 구성

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

  1. 명령줄에서 디렉터리를 `cloud-search-samples/end-to-end/search-interface/public'으로 변경합니다.
  2. 텍스트 편집기로 app.js 파일을 엽니다.
  3. 파일 상단에서 searchConfig 변수를 찾습니다.
  4. [client-id]를 이전에 만든 OAuth 클라이언트 ID로 바꿉니다.
  5. [application-id]를 이전 섹션에 기록한 검색 애플리케이션 ID로 바꿉니다.
  6. 파일을 저장합니다.

애플리케이션 실행

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

npm run start

색인 쿼리

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

  1. 브라우저를 열고 http://localhost:8080로 이동합니다.
  2. 로그인을 클릭하여 앱이 나를 대신하여 Cloud Search를 쿼리할 수 있도록 승인합니다.
  3. 검색창에 'test'와 같은 검색어를 입력하고 Enter 키를 누릅니다. 페이지에는 검색 결과를 탐색할 수 있는 측정기준 및 페이징 컨트롤과 함께 검색 결과가 표시되어야 합니다.

코드 검토

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

위젯 로드 중

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

index.html
<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
/**
 * 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
<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
/**
 * 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
<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
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();

수고하셨습니다. 튜토리얼을 완료했습니다. 계속해서 정리 안내를 따르세요.

이전 다음