/** * Initialize the app after loading the Google API client &
* Cloud Search widget. */asyncfunctioninitializeApp(){awaitgapi.auth2.init({'clientId':searchConfig.clientId,'scope':'https://www.googleapis.com/auth/cloud_search.query'});letauth=gapi.auth2.getAuthInstance();// Watch for sign in status changes to update the UI appropriatelyletonSignInChanged=(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 buttonsdocument.getElementById("sign-in").onclick=(e)=>auth.signIn();document.getElementById("sign-out").onclick=(e)=>auth.signOut();// ...}
검색 인터페이스 만들기
검색 위젯에는 검색 입력과 검색 결과를 보유하기 위한 약간의 HTML 마크업이 필요합니다.
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-08-29(UTC)"],[],[],null,["# Set up the user interface\n\nThis page of the Google Cloud Search tutorial shows how to set up a custom\nsearch application using the embeddable search widget.\nTo start from the beginning of this tutorial, refer to\n[Cloud Search getting started tutorial](/workspace/cloud-search/docs/tutorials/end-to-end).\n\nInstall dependencies\n--------------------\n\n1. If the connector is still indexing the repository, open a new shell and\n continue there.\n\n2. From the command line, change directory to\n `cloud-search-samples/end-to-end/search-interface`.\n\n3. To download the required dependencies for\n running the web server, run the following command:\n\n npm install\n\nCreate the search application credentials\n-----------------------------------------\n\nThe connector requires service account credentials to call the Cloud Search\nAPIs. To create the credentials:\n\n1. Return to the [Google Cloud console](https://console.cloud.google.com/apis/dashboard).\n\n2. In the left navigation, click **Credentials**.\n\n3. From the **Create credentials** drop-down list, select\n **OAuth client ID**. The \"Create OAuth client ID\" page appears.\n\n4. (Optional). If you haven't configured the consent screen, click\n **CONFIGURE CONSENT SCREEN**. The \"OAuth consent\" screen appears.\n\n 1. Click **Internal** and click **CREATE**. Another \"OAuth consent\" screen\n appears.\n\n 2. Fill out required fields. For further instructions, refer to the user\n consent section of\n [Setting up OAuth 2.0](https://support.google.com/cloud/answer/6158849).\n\n5. Click the **Application type** drop-down list and select **Web application**.\n\n6. In the **Name** field, enter \"tutorial\".\n\n7. In **Authorized JavaScript origins** field, click **ADD URI**. An empty\n \"URIs\" field appears.\n\n8. In the **URIs** field, enter `http://localhost:8080`.\n\n9. Click **CREATE**. The \"OAuth client created\" screen appears.\n\n10. Note the client ID. This value is used to identify the application when\n requesting user authorization with OAuth2. The client secret is not required\n for this implementation.\n\n11. Click **OK**.\n\nCreate the search application\n-----------------------------\n\nNext, create a search application in the admin console. The search application\nis a virtual representation of the search interface and its default\nconfiguration.\n| **Note:** These steps must be performed by a domain administrator.\n\n1. Return to the [Google Admin console](https://admin.google.com).\n2. Click the Apps icon. The \"Apps administration\" page appears.\n3. Click **Google Workspace**. The \"Apps Google Workspace administration\" page appears.\n4. Scroll down and Click **Cloud Search**. The \"Settings for Google Workspace\" page appears.\n5. Click **Search Applications**. The \"Search Appplications\" page appears.\n6. Click the round yellow **+**. The \"Create a new search application\" dialog appears.\n7. In the **Display name** field, enter \"tutorial\".\n8. Click **CREATE**.\n9. Click the pencil icon next to the newly-created search application (\"Edit search application\"). The \"Search application details\" page appears.\n10. Note the **Application ID**.\n11. To the right of **Data sources**, click the pencil icon.\n12. Next to \"tutorial,\" click the **Enable** toggle. This toggle enables the tutorial data source for the newly created search application.\n13. To the right of the \"tutorial\" data source, click **Display options**.\n14. Check all the facets.\n15. Click **SAVE**.\n16. Click **DONE**.\n\nConfigure the web application\n-----------------------------\n\nAfter creating the credentials and search app, update the application\nconfiguration to include these values as follows:\n\n1. From the command line, change directory to \\`cloud-search-samples/end-to-end/search-interface/public.'\n2. Open `app.js` file with a text editor.\n3. Find the `searchConfig` variable at the top of the file.\n4. Replace `[client-id]` with the previously created OAuth client ID.\n5. Replace `[application-id]` with the search application ID noted in the previous section.\n6. Save the file.\n\nRun the application\n-------------------\n\nStart the application by running this command: \n\n npm run start\n\nQuery the index\n---------------\n\nTo query the index using the search widget:\n\n1. Open your browser and navigate to `http://localhost:8080`.\n2. Click **sign in** to authorize the app to query Cloud Search on your behalf.\n3. In the search box, enter a query, such as the word \"test,\" and press **enter**. The page should display the query results along with facets and pagination controls to navigate the results.\n\nReviewing the code\n------------------\n\nThe remaining sections examine how the user interface is built.\n\n### Loading the widget\n\nThe widget and related libraries are loaded in two phases. First, the bootstrap\nscript is loaded: \nindex.html \n[View on GitHub](https://github.com/googleworkspace/cloud-search-samples/blob/master/end-to-end/search-interface/public/index.html) \n\n```html\n\u003cscript src=\"https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad\" async defer\u003e\u003c/script\u003e\n```\n\nSecond, the `onLoad` callback is called once the script is ready. It then loads\nthe Google API client, Google Sign-in, and the Cloud Search widget libraries. \napp.js \n[View on GitHub](https://github.com/googleworkspace/cloud-search-samples/blob/master/end-to-end/search-interface/public/app.js) \n\n```javascript\n/**\n * Load the cloud search widget & auth libraries. Runs after\n * the initial gapi bootstrap library is ready.\n */\nfunction onLoad() {\n gapi.load('client:auth2:cloudsearch-widget', initializeApp)\n}\n```\n\nThe remaining initialization of the app is handled by `initializeApp`\nonce all the required libraries are loaded.\n\n### Handling authorization\n\nUsers must authorize the app to query on their behalf. While the widget\ncan prompt users to authorize, you can achieve a better user experience\nby handling authorization yourself.\n\nFor the search interface, the app presents two different views depending\non the sign-in state of the user. \nindex.html \n[View on GitHub](https://github.com/googleworkspace/cloud-search-samples/blob/master/end-to-end/search-interface/public/index.html) \n\n```html\n\u003cdiv class=\"content\"\u003e\n \u003cdiv id=\"app\" hidden\u003e\n \u003cdiv id=\"header\"\u003e\n \u003cbutton id=\"sign-out\"\u003eSign-out\u003c/button\u003e\n \u003c/div\u003e\n \u003c!-- Markup for widget...--\u003e\n \u003c/div\u003e\n \u003cdiv id=\"welcome\" hidden\u003e\n \u003ch1\u003eCloud Search Tutorial\u003c/h1\u003e\n \u003cp\u003eSign in with your Google account to search.\u003c/p\u003e\n \u003cbutton id=\"sign-in\"\u003eSign-in\u003c/button\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\nDuring initialization the correct view is enabled and the handlers for\nsign-in and sign-out events are configured: \napp.js \n[View on GitHub](https://github.com/googleworkspace/cloud-search-samples/blob/master/end-to-end/search-interface/public/app.js) \n\n```javascript\n/**\n * Initialize the app after loading the Google API client &\n * Cloud Search widget.\n */\nasync function initializeApp() {\n await gapi.auth2.init({\n 'clientId': searchConfig.clientId,\n 'scope': 'https://www.googleapis.com/auth/cloud_search.query'\n });\n\n let auth = gapi.auth2.getAuthInstance();\n\n // Watch for sign in status changes to update the UI appropriately\n let onSignInChanged = (isSignedIn) =\u003e {\n document.getElementById(\"app\").hidden = !isSignedIn;\n document.getElementById(\"welcome\").hidden = isSignedIn;\n if (resultsContainer) {\n resultsContainer.clear();\n }\n }\n auth.isSignedIn.listen(onSignInChanged);\n onSignInChanged(auth.isSignedIn.get()); // Trigger with current status\n\n // Connect sign-in/sign-out buttons\n document.getElementById(\"sign-in\").onclick = (e) =\u003e auth.signIn();\n document.getElementById(\"sign-out\").onclick = (e) =\u003e auth.signOut();\n\n // ...\n\n}\n```\n\n### Creating the search interface\n\nThe search widget requires a small amount of HTML markup for the search\ninput and to hold the search results: \nindex.html \n[View on GitHub](https://github.com/googleworkspace/cloud-search-samples/blob/master/end-to-end/search-interface/public/index.html) \n\n```html\n\u003cdiv id=\"search_bar\"\u003e\n \u003cdiv\u003e\n \u003cdiv id=\"suggestions_anchor\"\u003e\n \u003cinput type=\"text\" id=\"search_input\" placeholder=\"Search for...\"\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"facet_results\" \u003e\u003c/div\u003e\n\u003cdiv id=\"search_results\" \u003e\u003c/div\u003e\n```\n\nThe widget is initialized and bound to the input and container elements\nduring initialization: \napp.js \n[View on GitHub](https://github.com/googleworkspace/cloud-search-samples/blob/master/end-to-end/search-interface/public/app.js) \n\n```javascript\ngapi.config.update('cloudsearch.config/apiVersion', 'v1');\nresultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()\n .setSearchApplicationId(searchConfig.searchAppId)\n .setSearchResultsContainerElement(document.getElementById('search_results'))\n .setFacetResultsContainerElement(document.getElementById('facet_results'))\n .build();\n\nconst searchBox = new gapi.cloudsearch.widget.searchbox.Builder()\n .setSearchApplicationId(searchConfig.searchAppId)\n .setInput(document.getElementById('search_input'))\n .setAnchor(document.getElementById('suggestions_anchor'))\n .setResultsContainer(resultsContainer)\n .build();\n```\n\nCongratulations, you've successfully completed the tutorial! Continue on for\ncleanup instructions.\n\n[Previous](/workspace/cloud-search/docs/tutorials/end-to-end/setup-connector)\n[Next](/workspace/cloud-search/docs/tutorials/end-to-end/finish)"]]
