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

Trang này của hướng dẫn về Google Cloud Search trình bày 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 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ại đó.
Trên 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 cần thiết 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 của ứng dụng tìm kiếm

Trình kết nối yêu cầu thông tin xác thực của 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 bảng điều khiển 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 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 ĐỊNH CẤU HÌNH MÀN HÌNH XIN PHÉP. Màn hình "Xin phép bằ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 "Xin phép bằng OAuth" khác sẽ xuất hiện.
2. Điền thông tin vào các trường bắt buộc. Để biết thêm hướng dẫn, hãy tham khảo phần xin phép 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 Loại ứng dụng rồi chọn Ứng dụng web.
Trong trường Tên, hãy nhập "tutorial".
Trong trường Nguồn gốc JavaScript được uỷ quyền, 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 được dùng để xác định ứng dụng khi yêu cầu người dùng uỷ quyền bằng OAuth2. Bạn không cần 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 hình thức đại diện ảo cho giao diện tìm kiếm và cấu hình mặc định của ứng dụng đó.

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" sẽ xuất hiện.
Nhấp vào Google Workspace. Trang "Quản trị ứng dụng Google Workspace" sẽ xuất hiện.
Di chuyể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 Ứng dụng tìm kiếm. Trang "Ứng dụng tìm kiếm" sẽ xuất hiện.
Nhấp vào biểu tượng + màu vàng hình tròn. Hộp thoại "Tạo ứng dụng tìm kiếm mới" sẽ xuất hiện.
Trong trường Tên hiển thị, hãy nhập "tutorial".
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 "Thông tin chi tiết về ứng dụng tìm kiếm" sẽ xuất hiện.
Ghi lại Mã ứng dụng.
Ở bên phải Nguồn dữ liệu, hãy nhấp vào biểu tượng bút chì.
Bên cạnh "tutorial", hãy nhấp vào nút bật/tắt Bật. Nút bật/tắt này cho phép 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 "tutorial", hãy nhấp vào Chế độ hiển thị.
Đánh dấu vào tất cả các khía cạ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 để đưa các giá trị này vào như sau:

Trên 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 một 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 đã ghi lại trong phần trước.
Lưu tệp.

Chạy ứng dụng

Bắt đầu ứ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 để uỷ quyền cho ứ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ừ "test" rồi nhấn enter. Trang này sẽ hiển thị kết quả truy vấn cùng với các khía cạnh và nút điều khiển phân trang để di chuyển qua các kết quả.

Xem xét mã

Các phần còn lại sẽ xem xét cách xây dựng giao diện người dùng.

Đang tải tiện ích

Tiện ích và các thư viện liên quan được tải theo hai giai đoạn. Đầu tiên, tập lệnh 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 sau khi tập lệnh đã sẵn sàng. Sau đó, lệnh này sẽ tải ứng dụng API của Google, Đăng nhập bằng Google và các thư viện tiện ích Tìm kiếm trên 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)
}

Quá trình khởi chạy còn lại của ứng dụng 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 uỷ quyền cho ứng dụng truy vấn thay mặt họ. Mặc dù tiện ích có thể nhắc người dùng uỷ quyền, nhưng bạn có thể mang lại trải nghiệm người dùng tốt hơn 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ẽ trình bày 2 chế độ xem 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, chế độ xem chính xác sẽ được bật và các trình xử lý cho 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 yêu cầu một lượng nhỏ đánh dấu HTML cho dữ liệu đầu vào tìm kiếm 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 được khởi chạy 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 hướng dẫn này! Hãy tiếp tục để xem hướng dẫn dọn dẹp.

Trước Tiếp theo

Thiết lập giao diện người dùng Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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

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

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

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

Chạy ứng dụng

Truy vấn chỉ mục

Xem xét mã

Đang tải tiện ích

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

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

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