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 về hướng dẫn về Google Cloud Search trình bày 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 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 đăng nhập 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 tài khoản dịch vụ để gọi các API Cloud Search. Cách tạo thông tin đăng nhập:

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 thiết lập màn hình xin phép, hãy nhấp vào CẤU cấu hình MÀN HÌNH ĐỒNG Ý. Màn hình "Sự đồng ý của 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 ý 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 phần 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. 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 "Ứng dụng OAuth đã tạo" 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 người dùng cho phép bằng OAuth2. Không bắt buộc phải có 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à đại diện ả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" xuất hiện.
Nhấp vào Google Workspace. Trang "Quản trị Apps 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 Search Applications (Ứng dụng tìm kiếm). Trang "Ứng dụng tìm kiếm" 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" 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 "Thông tin chi tiết về ứng dụng tìm kiếm" xuất hiện.
Ghi lại Application ID (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 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 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-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ú ở 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 thay mặt bạn truy vấn Cloud Search.
Trong hộp tìm kiếm, hãy nhập truy vấn, chẳng hạn như từ "test" (kiểm thử) rồi nhấn phím Enter. Trang phải hiển thị kết quả truy vấn cùng với các thuộc tính và chế độ kiểm soát phân trang để điều hướng các kết quả.

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 theo 2 giai đoạn. Trước tiên, tập lệnh tự 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>

Tiếp theo, 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 API của Google, tính năng Đăng nhập bằng Google và các 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)
}

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

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 cấp phép, 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, chế độ xem chính xác sẽ được bật và 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 số ít mã đánh dấu HTML cho nội dung nhập từ 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 thành công phần hướng dẫn! Hãy tiếp tục để biết hướng dẫn dọn dẹp.

Trước Tiếp theo