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 trong hướng dẫn về Google Cloud Search cho biết cách thiết lập ứ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 màn hình shell mới và tiếp tục ở đó.
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 bắt buộc xuống nhằm 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 xác thực tài khoản dịch vụ để gọi các API của 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 đồng ý, hãy nhấp vào ĐỊNH CẤU HÌNH MÀN HÌNH ĐỒNG Ý. Màn hình "OAuth consent" (Sự đồng ý qua 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 "OAuth consent" (Sự đồng ý về 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 đồ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 Loại ứng dụng rồi chọn Ứng dụng web.
Trong trường Name (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 "OAuth client created" (Đã 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 uỷ quyền của người dùng bằng OAuth2. Bạn không cần mật khẩu ứng dụng để triển khai phương thức 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 đó.

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 (Tìm kiếm trên đám mây). Trang "Cài đặt cho Google Workspace" sẽ xuất hiện.
Nhấp vào Tìm kiếm ứng dụng. Trang "Tìm kiếm ứng dụng" sẽ xuất hiện.
Nhấp vào biểu tượng + màu vàng 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 "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 "Tìm kiếm thông tin chi tiết về đơn đăng ký" sẽ 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", hãy nhấp vào nút bật/tắt Bật. Nút bật/tắt này sẽ 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 Tuỳ chọn hiển thị.
Kiểm tra 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 để bao gồm các giá trị 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 khách 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 và chuyển đến http://localhost:8080.
Nhấp vào đăng nhập để uỷ quyền cho ứng dụng thay mặt bạn truy vấn Cloud Search.
Trong hộp tìm kiếm, hãy nhập một cụm từ tìm kiếm, chẳng hạn như từ "kiểm thử" rồi nhấn phím enter. Trang này sẽ hiển thị kết quả truy vấn cùng với các phương diện và chế độ điều khiển phân trang để di chuyển qua các kết quả.

Xem lại mã

Các phần còn lại sẽ kiểm tra cách tạo 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. Trước tiên, tập lệnh khởi động sẽ đượ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 đó, ứng dụng này sẽ tải ứng dụng Google API, tính năng Đăng nhập bằng Google và thư viện tiện ích Tìm kiếm trên đám mây.

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ý phần khởi chạy còn lại của ứng dụng sau khi tải tất cả thư viện bắt buộc.

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

Người dùng phải uỷ quyền cho ứng dụng thay mặt họ truy vấn. 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 tốt hơn cho 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ị hai 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 sẽ đượ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ỏ mã đánh dấu HTML cho dữ liệu đầu vào tìm kiếm và để lưu trữ 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 tạo 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 tạo:

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! Tiếp tục để xem hướng dẫn dọn dẹp.

Trước Tiếp theo