با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
این صفحه از آموزش Google Cloud Search نحوه راه‌اندازی یک برنامه جستجوی سفارشی با استفاده از ویجت جستجوی جاسازی‌شده را نشان می‌دهد. برای شروع از ابتدای این آموزش، به آموزش شروع جستجوی ابری مراجعه کنید.
وابستگی ها را نصب کنید
اگر کانکتور همچنان مخزن را ایندکس می کند، یک پوسته جدید باز کنید و در آنجا ادامه دهید.
از خط فرمان، دایرکتوری را به cloud-search-samples/end-to-end/search-interface تغییر دهید.
برای دانلود وابستگی های مورد نیاز برای اجرای وب سرور، دستور زیر را اجرا کنید:
npminstall
اعتبار برنامه جستجو را ایجاد کنید
رابط برای فراخوانی Cloud Search API به اعتبارنامه حساب سرویس نیاز دارد. برای ایجاد اعتبار:
از لیست کشویی Create credentials ، شناسه مشتری OAuth را انتخاب کنید. صفحه "ایجاد شناسه مشتری OAuth" ظاهر می شود.
(اختیاری). اگر صفحه رضایت را پیکربندی نکرده‌اید، روی پیکربندی صفحه رضایت کلیک کنید. صفحه "رضایت OAuth" ظاهر می شود.
روی Internal کلیک کنید و روی CREATE کلیک کنید. یکی دیگر از صفحه های "رضایت OAuth" ظاهر می شود.
فیلدهای الزامی را پر کنید برای دستورالعمل‌های بیشتر، به بخش رضایت کاربر تنظیمات OAuth 2.0 مراجعه کنید.
روی لیست کشویی Application type کلیک کنید و Web application را انتخاب کنید.
در قسمت Name عبارت "آموزش" را وارد کنید.
در فیلد مبداهای مجاز جاوا اسکریپت ، روی ADD URI کلیک کنید. یک فیلد خالی "URIs" ظاهر می شود.
در قسمت URIs ، http://localhost:8080 را وارد کنید.
روی CREATE کلیک کنید. صفحه "مشتری OAuth ایجاد شد" ظاهر می شود.
به شناسه مشتری توجه کنید. این مقدار برای شناسایی برنامه هنگام درخواست مجوز کاربر با OAuth2 استفاده می شود. رمز مشتری برای این پیاده سازی مورد نیاز نیست.
روی OK کلیک کنید.
برنامه جستجو را ایجاد کنید
بعد، یک برنامه جستجو در کنسول مدیریت ایجاد کنید. برنامه جستجو یک نمایش مجازی از رابط جستجو و پیکربندی پیش فرض آن است.
روی نماد برنامه ها کلیک کنید. صفحه "Apps Administration" ظاهر می شود.
روی Google Workspace کلیک کنید. صفحه "Apps Google Workspace Administration" ظاهر می شود.
به پایین بروید و روی Cloud Search کلیک کنید. صفحه "تنظیمات Google Workspace" ظاهر می شود.
روی جستجوی برنامه ها کلیک کنید. صفحه "جستجوی برنامه ها" ظاهر می شود.
روی زرد گرد + کلیک کنید. گفتگوی "ایجاد یک برنامه جستجوی جدید" ظاهر می شود.
در قسمت نمایش نام ، "آموزش" را وارد کنید.
روی CREATE کلیک کنید.
روی نماد مداد در کنار برنامه جستجوی تازه ایجاد شده ("ویرایش برنامه جستجو") کلیک کنید. صفحه "جستجوی جزئیات برنامه" ظاهر می شود.
به شناسه برنامه توجه کنید.
در سمت چپ منابع داده ، روی نماد مداد کلیک کنید.
در کنار «آموزش»، روی کلید فعال کردن کلیک کنید. این ضامن منبع داده های آموزشی را برای برنامه جستجوی تازه ایجاد شده فعال می کند.
در سمت راست منبع داده «آموزش»، روی گزینه‌های نمایش کلیک کنید.
تمام جنبه ها را بررسی کنید.
روی ذخیره کلیک کنید.
روی انجام شد کلیک کنید.
برنامه وب را پیکربندی کنید
پس از ایجاد اعتبارنامه و برنامه جستجو، پیکربندی برنامه را به‌روزرسانی کنید تا این مقادیر را به شرح زیر درج کند:
از خط فرمان، دایرکتوری را به "Cloud-search-samples/end-to-end/search-interface/public" تغییر دهید.
فایل app.js را با یک ویرایشگر متن باز کنید.
متغیر searchConfig را در بالای فایل پیدا کنید.
[client-id] را با شناسه مشتری OAuth ایجاد شده قبلی جایگزین کنید.
[application-id] را با شناسه برنامه جستجوی ذکر شده در بخش قبل جایگزین کنید.
فایل را ذخیره کنید.
برنامه را اجرا کنید
برنامه را با اجرای این دستور شروع کنید:
npmrunstart
فهرست را پرس و جو کنید
برای جستجوی فهرست با استفاده از ویجت جستجو:
مرورگر خود را باز کنید و به http://localhost:8080 بروید.
برای اجازه دادن به برنامه برای درخواست جستجوی Cloud Search از طرف شما روی ورود به سیستم کلیک کنید.
در کادر جستجو، عبارتی مانند کلمه "test" را وارد کرده و enter را فشار دهید. صفحه باید نتایج پرس و جو را به همراه جنبه ها و کنترل های صفحه بندی برای پیمایش نتایج نمایش دهد.
در حال بررسی کد
بخش‌های باقی‌مانده چگونگی ساخت رابط کاربری را بررسی می‌کنند.
در حال بارگیری ویجت
ویجت و کتابخانه های مربوطه در دو مرحله بارگذاری می شوند. ابتدا اسکریپت بوت استرپ بارگذاری می شود:
دوم، پس از آماده شدن اسکریپت، فراخوانی onLoad فراخوانی می شود. سپس سرویس گیرنده Google API، Google Sign-in و کتابخانه های ویجت Cloud Search را بارگیری می کند.
/** * Load the cloud search widget & auth libraries. Runs after * the initial gapi bootstrap library is ready. */functiononLoad(){gapi.load('client:auth2:cloudsearch-widget',initializeApp)}
پس از بارگیری تمام کتابخانه‌های مورد نیاز، مقدار اولیه‌سازی باقی‌مانده برنامه توسط initializeApp انجام می‌شود.
مجوز رسیدگی
کاربران باید به برنامه اجازه دهند که از طرف آنها پرس و جو کند. در حالی که ویجت می تواند کاربران را وادار به مجوز کند، شما می توانید با مدیریت مجوز به تجربه کاربری بهتری دست پیدا کنید.
برای رابط جستجو، برنامه بسته به وضعیت ورود به سیستم کاربر، دو نمای متفاوت ارائه می دهد.
/** * 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 برای ورودی جستجو و نگهداری نتایج جستجو نیاز دارد:
تاریخ آخرین به‌روزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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 بهوقت ساعت هماهنگ جهانی."],[],[],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)"]]
