Trang này được dịch bởi Cloud Translation API.

Thiết lập giao diện người dùng

Trang này của hướng dẫn về Google Cloud Search cho biết cách thiết lập bằng cách sử dụng tiện ích tìm kiếm có thể nhúng. Để bắt đầu từ đầu hướng dẫn này, hãy tham khảo Hướng dẫn bắt đầu sử dụng Cloud Search.

Cài đặt phần phụ thuộc

Nếu trình kết nối vẫn đang lập chỉ mục kho lưu trữ, hãy mở một shell mới và tiếp tục ở đó.
Từ dòng lệnh, hãy thay đổi thư mục thành cloud-search-samples/end-to-end/search-interface.
Để tải các phần phụ thuộc bắt buộc xuống cho đang chạy máy chủ web, hãy chạy lệnh sau:

npm install

Tạo thông tin xác thực ứng dụng tìm kiếm

Trình kết nối yêu cầu thông tin đăng nhập tài khoản dịch vụ để gọi Cloud Search API. Cách tạo thông tin xác thực:

Quay lại bảng điều khiển Google Cloud.
Trong bảng điều hướng bên trái, hãy nhấp vào Thông tin xác thực.
Trong danh sách thả xuống Tạo thông tin xác thực, hãy chọn Mã ứng dụng OAuth. Thao tác "Tạo mã ứng dụng khách OAuth" trang xuất hiện.
(Tùy chọn). Nếu bạn chưa thiết lập màn hình đồng ý, hãy nhấp vào CẤU HÌNH MÀN HÌNH ĐỒNG Ý. "Đồng ý qua OAuth" màn hình xuất hiện.
1. Nhấp vào Nội bộ rồi nhấp vào TẠO. Một "biểu mẫu đồng ý khác qua OAuth" màn hình sẽ xuất hiện.
2. Điền vào các trường bắt buộc. Để được hướng dẫn thêm, hãy tham khảo người dùng mục đồng ý của Thiết lập OAuth 2.0.
Nhấp vào danh sách thả xuống Application type (Loại ứng dụng) rồi chọn Web application (Ứng dụng web).
Trong trường Tên, hãy nhập "hướng dẫn".
Trong trường Nguồn gốc JavaScript được cho phép, hãy nhấp vào THÊM URI. Trống "URI" xuất hiện.
Trong trường URI, hãy nhập http://localhost:8080.
Nhấp vào TẠO. Ứng dụng "Đã tạo ứng dụng OAuth" màn hình xuất hiện.
Ghi lại mã ứng dụng khách. Giá trị này được dùng để xác định ứng dụng khi yêu cầu người dùng uỷ quyền bằng OAuth2. Không bắt buộc phải nhập mật khẩu ứng dụng khách cho việc triển khai này.
Nhấp vào OK.

Tạo ứng dụng tìm kiếm

Tiếp theo, hãy tạo một ứng dụng tìm kiếm trong bảng điều khiển dành cho quản trị viên. Ứng dụng tìm kiếm là một đại diện ảo của giao diện tìm kiếm và mặc định .

Quay lại Bảng điều khiển dành cho quản trị viên của Google.
Nhấp vào biểu tượng Ứng dụng. Trang "Quản trị ứng dụng" trang xuất hiện.
Nhấp vào Google Workspace. Trang "Quản trị các ứng dụng trên Google Workspace" trang xuất hiện.
Cuộn xuống rồi nhấp vào Cloud Search. Phần "Chế độ cài đặt của Google Workspace" trang sẽ xuất hiện.
Nhấp vào Search Applications (Tìm kiếm ứng dụng). "Các ứng dụng tìm kiếm" trang xuất hiện.
Nhấp vào dấu + màu vàng hình tròn. Thao tác "Tạo ứng dụng tìm kiếm mới" xuất hiện.
Trong trường Tên hiển thị, hãy nhập "hướng dẫn".
Nhấp vào TẠO.
Nhấp vào biểu tượng bút chì bên cạnh ứng dụng tìm kiếm mới tạo ("Chỉnh sửa ứng dụng tìm kiếm"). Phần "Thông tin chi tiết về ứng dụng tìm kiếm" trang xuất hiện.
Ghi lại Mã ứng dụng.
Ở bên phải mục Nguồn dữ liệu, hãy nhấp vào biểu tượng bút chì.
Bên cạnh "hướng dẫn", nhấp vào nút bật/tắt Bật. Nút bật/tắt này cho phép nguồn dữ liệu hướng dẫn cho ứng dụng tìm kiếm mới được tạo.
Bên phải "hướng dẫn" nguồn dữ liệu, hãy nhấp vào Tùy chọn hiển thị.
Hãy kiểm tra tất cả các thuộc tính.
Nhấp vào LƯU.
Nhấp vào XONG.

Định cấu hình ứng dụng web

Sau khi tạo thông tin đăng nhập và ứng dụng tìm kiếm, hãy cập nhật ứng dụng cấu hình để bao gồm các giá trị này như sau:

Từ dòng lệnh, hãy thay đổi thư mục thành `cloud-search-samples/end-to-end/search-interface/public.'
Mở tệp app.js bằng trình chỉnh sửa văn bản.
Tìm biến searchConfig ở đầu tệp.
Thay thế [client-id] bằng mã ứng dụng OAuth đã tạo trước đó.
Thay thế [application-id] bằng mã ứng dụng tìm kiếm được ghi chú trong phần trước.
Lưu tệp.

Chạy ứng dụng

Khởi động ứng dụng bằng cách chạy lệnh sau:

npm run start

Truy vấn chỉ mục

Cách truy vấn chỉ mục bằng tiện ích tìm kiếm:

Mở trình duyệt rồi chuyển đến http://localhost:8080.
Nhấp vào đăng nhập để cho phép ứng dụng truy vấn Cloud Search thay mặt bạn.
Trong hộp tìm kiếm, hãy nhập một truy vấn, chẳng hạn như từ "kiểm tra" và nhấn nhập. Trang sẽ hiển thị kết quả truy vấn cùng với các thuộc tính và các điều khiển phân trang để điều hướng các kết quả.

Đang xem xét mã

Các phần còn lại tìm hiểu cách xây dựng giao diện người dùng.

Đang tải tiện ích

Tiện ích này và các thư viện liên quan được tải trong hai giai đoạn. Đầu tiên, quy trình Tự thân khởi nghiệp tập lệnh đã được tải:

index.html

Xem trên GitHub

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

Thứ hai, lệnh gọi lại onLoad được gọi khi tập lệnh đã sẵn sàng. Sau đó, Google Ads sẽ tải ứng dụng API của Google, tính năng Đăng nhập bằng Google và thư viện tiện ích Cloud Search.

app.js

Xem trên 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)
}

Hoạt động khởi chạy ứng dụng còn lại do initializeApp xử lý sau khi đã tải tất cả các thư viện cần thiết.

Xử lý việc uỷ quyền

Người dùng phải cho phép ứng dụng thay mặt họ truy vấn. Trong khi tiện ích có thể nhắc người dùng cấp quyền, bạn có thể có được trải nghiệm người dùng tốt hơn bằng cách tự xử lý yêu cầu uỷ quyền.

Đối với giao diện tìm kiếm, ứng dụng sẽ hiển thị hai chế độ xem khác nhau, tuỳ thuộc vào về trạng thái đăng nhập của người dùng.

index.html

Xem trên 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>

Trong quá trình khởi chạy, khung hiển thị chính xác được bật và trình xử lý cho các sự kiện đăng nhập và đăng xuất được định cấu hình:

app.js

Xem trên 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();

  // ...

}

Tạo giao diện tìm kiếm

Tiện ích tìm kiếm này yêu cầu một ít mã đánh dấu HTML cho tính năng tìm kiếm nhập và giữ kết quả tìm kiếm:

index.html

Xem trên 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>

Tiện ích này được khởi động và liên kết với các thành phần đầu vào và vùng chứa trong khi khởi chạy:

app.js

Xem trên 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();

Xin chúc mừng, bạn đã hoàn tất thành công hướng dẫn! Đi tiếp trong hướng dẫn dọn dẹp.

Trước Tiếp theo