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

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

Trang hướng dẫn về Google Cloud Search này cho biết cách thiết lập một ứng dụng tìm kiếm tuỳ chỉnh bằng tiện ích tìm kiếm có thể nhúng. Để bắt đầu xem 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 để 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 các API Cloud Search. 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 khách OAuth. Trang "Tạo mã ứng dụng khách OAuth" sẽ xuất hiện.
(Tùy chọn). Nếu bạn chưa định cấu hình màn hình xin phép, hãy nhấp vào CẤU HÌNH CẤU HÌNH MÀN HÌNH ĐỒNG Ý. Màn hình "Đồng ý OAuth" sẽ xuất hiện.
1. Nhấp vào Nội bộ rồi nhấp vào TẠO. Một màn hình "Đồng ý bằng OAuth" khác 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 mục sự đồng ý của người dùng trong bài viết 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. Một trường "URI" trống sẽ xuất hiện.
Trong trường URI, hãy nhập http://localhost:8080.
Nhấp vào TẠO. Màn hình "Đã tạo ứng dụng OAuth" sẽ xuất hiện.
Ghi lại mã ứng dụng khách. Giá trị này dùng để xác định ứng dụng khi yêu cầu uỷ quyền cho người dùng bằng OAuth2. Bạn không bắt buộc phải có mật khẩu ứng dụng khách cho quá trình 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 bản trình bày ảo của giao diện tìm kiếm và cấu hình mặc định của giao diện này.

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" xuất hiện.
Nhấp vào Google Workspace. Trang "Quản trị các ứng dụng trong Google Workspace" sẽ xuất hiện.
Cuộn xuống rồi nhấp vào Cloud Search. Trang "Cài đặt cho Google Workspace" sẽ xuất hiện.
Nhấp vào Search Applications (Tìm kiếm ứng dụng). Trang "Ứng dụng tìm kiếm" sẽ xuất hiện.
Nhấp vào dấu + hình tròn màu vàng. Hộp thoại "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"). Trang "Chi tiết ứng dụng tìm kiếm" 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 chuyển Bật. Nút bật/tắt này bật nguồn dữ liệu hướng dẫn cho ứng dụng tìm kiếm mới tạo.
Ở bên phải nguồn dữ liệu "hướng dẫn", hãy nhấp vào Hiển thị các tuỳ chọn.
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 xác thực và ứng dụng tìm kiếm, hãy cập nhật cấu hình ứng dụng để 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-Giao diện/công khai".
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 cho bạn.
Trong hộp tìm kiếm, hãy nhập một truy vấn, chẳng hạn như từ "test" (kiểm thử) rồi nhấn enter. Trang sẽ hiển thị kết quả truy vấn cùng với các thuộc tính và chế độ điều khiển phân trang để điều hướng 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. Trước tiên, tập lệnh Tự khởi động đượ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 đó, ứng dụng này 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)
}

initializeApp sẽ xử lý quá trình khởi chạy ứng dụng còn lại sau khi bạn tải tất cả các thư viện bắt buộc.

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. Mặc dù tiện ích này có thể nhắc người dùng uỷ quyền, nhưng bạn có thể cải thiện trải nghiệm người dùng bằng cách tự xử lý việc uỷ quyền.

Đối với giao diện tìm kiếm, ứng dụng sẽ hiển thị 2 khung hiển thị khác nhau, tuỳ thuộc vào 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, hệ thống sẽ bật khung hiển thị chính xác và định cấu hình trình xử lý cho các sự kiện đăng nhập và đăng xuất:

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 đoạn mã đánh dấu HTML nhỏ cho nội dung nhập tìm kiếm và để lưu 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 phần tử đầu vào và vùng chứa trong quá trình 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! Hãy tiếp tục để xem hướng dẫn dọn dẹp.

Trước Tiếp theo