رابط های مبتنی بر کارت

نمونه کارت الحاقی

افزونه‌های Google Workspace اطلاعات و کنترل‌های کاربر را در نوار کناری رابط کاربری برنامه میزبان ارائه می‌کنند. یک افزونه شامل یک نوار ابزار شناسایی اصلی به همراه یک یا چند کارت است.

هر کارت نمایانگر «صفحه» خاصی از رابط کاربری افزونه شما است، و پیمایش به یک کارت جدید معمولاً فقط ایجاد آن کارت و فشار دادن آن به پشته کارت داخلی است. می‌توانید جریان‌های ناوبری بین کارت‌ها را برای یک تجربه تعاملی غنی تعریف کنید.

کارت ها می توانند غیر متنی یا متنی باشند. کارت های متنی زمانی به کاربر ارائه می شوند که برنامه میزبان در یک زمینه خاص باشد. به عنوان مثال، هنگام باز کردن یک پیام جیمیل یا رویداد تقویم. کارت‌های غیر متنی (مانند صفحات اصلی ) خارج از یک زمینه خاص میزبان به کاربر ارائه می‌شوند. به عنوان مثال، هنگامی که کاربر در حال مشاهده صندوق ورودی Gmail، پوشه اصلی Drive، یا تقویم است.

افزونه‌های Google Workspace ساخته‌شده در Apps Script از سرویس Card برای ایجاد رابط کاربری از کارت‌ها استفاده می‌کنند. افزونه‌های ساخته‌شده به زبان‌های دیگر باید JSON با فرمت مناسب را برای رابط به عنوان کارت بازگردانند.

هر کارت از یک هدر و یک یا چند بخش کارت تشکیل شده است. هر بخش از مجموعه ای از ویجت ها تشکیل شده است. ویجت ها اطلاعات را به کاربر نمایش می دهند یا کنترل های تعاملی مانند دکمه ها را ارائه می دهند.

رابط های مبتنی بر کارت دارای مزایای زیر هستند:

  • برای ایجاد رابط های مبتنی بر کارت نیازی به دانش HTML یا CSS نیست.
  • کارت‌ها و ویجت‌ها به‌طور خودکار طراحی می‌شوند تا با برنامه‌های Google Workspace که گسترش می‌دهند، به خوبی کار کنند.

  • رابط های مبتنی بر کارت هم در دستگاه های دسکتاپ و هم در دستگاه های تلفن همراه کار می کنند، اما شما فقط باید یک بار رابط را تعریف کنید.

ایجاد رابط های مبتنی بر کارت

هنگام ساخت افزونه های مبتنی بر کارت، درک مفاهیم خاص و الگوهای طراحی مهم است. راهنماهای زیر اطلاعاتی را که برای ایجاد افزونه‌های مؤثر مبتنی بر کارت نیاز دارید ارائه می‌کند:

هنگام ایجاد کارت و اجرای رفتار رابط کاربری به این صفحات مراجعه کنید. همچنین می توانید نمونه های اضافی زیر را برای ارجاع در هنگام پیاده سازی افزونه مفید بیابید:

  • راه اندازی سریع افزونه Google Workspace "Cats".

    این نمونه افزودنی یک رابط کاربری ساده Google Workspace با چندین صفحه و صفحه اصلی را نشان می دهد.

  • افزونه Google Workspace: "Translate"

    این نمونه افزودنی یک افزونه Google Workspace را نشان می‌دهد که به کاربران امکان می‌دهد متن را از داخل Docs، Sheets و Slides ترجمه کنند.

  • افزودنی Google Workspace: "فهرست تیم ها"

    این نمونه افزودنی یک نمونه افزودنی پیچیده‌تر Google Workspace را نشان می‌دهد که اطلاعات کاربر در مورد گیرندگان پیام Gmail، ویرایشگرهای فایل Drive، یا شرکت‌کنندگان رویداد Calendar را نشان می‌دهد. شما فقط می توانید از این افزونه در یک دامنه استفاده کنید، زیرا از Directory API برای بازیابی اطلاعات کاربر استفاده می کند.

،

نمونه کارت الحاقی

افزونه‌های Google Workspace اطلاعات و کنترل‌های کاربر را در نوار کناری رابط کاربری برنامه میزبان ارائه می‌کنند. یک افزونه شامل یک نوار ابزار شناسایی اصلی به همراه یک یا چند کارت است.

هر کارت نمایانگر «صفحه» خاصی از رابط کاربری افزونه شما است، و پیمایش به یک کارت جدید معمولاً فقط ایجاد آن کارت و فشار دادن آن به پشته کارت داخلی است. می‌توانید جریان‌های ناوبری بین کارت‌ها را برای یک تجربه تعاملی غنی تعریف کنید.

کارت ها می توانند غیر متنی یا متنی باشند. کارت های متنی زمانی به کاربر ارائه می شوند که برنامه میزبان در یک زمینه خاص باشد. به عنوان مثال، هنگام باز کردن یک پیام جیمیل یا رویداد تقویم. کارت‌های غیر متنی (مانند صفحات اصلی ) خارج از یک زمینه خاص میزبان به کاربر ارائه می‌شوند. به عنوان مثال، هنگامی که کاربر در حال مشاهده صندوق ورودی Gmail، پوشه اصلی Drive، یا تقویم است.

افزونه‌های Google Workspace ساخته‌شده در Apps Script از سرویس Card برای ایجاد رابط کاربری از کارت‌ها استفاده می‌کنند. افزونه‌های ساخته‌شده به زبان‌های دیگر باید JSON با فرمت مناسب را برای رابط به عنوان کارت بازگردانند.

هر کارت از یک هدر و یک یا چند بخش کارت تشکیل شده است. هر بخش از مجموعه ای از ویجت ها تشکیل شده است. ویجت ها اطلاعات را به کاربر نمایش می دهند یا کنترل های تعاملی مانند دکمه ها را ارائه می دهند.

رابط های مبتنی بر کارت دارای مزایای زیر هستند:

  • برای ایجاد رابط های مبتنی بر کارت نیازی به دانش HTML یا CSS نیست.
  • کارت‌ها و ویجت‌ها به‌طور خودکار طراحی می‌شوند تا با برنامه‌های Google Workspace که گسترش می‌دهند، به خوبی کار کنند.

  • رابط های مبتنی بر کارت هم در دستگاه های دسکتاپ و هم در دستگاه های تلفن همراه کار می کنند، اما شما فقط باید یک بار رابط را تعریف کنید.

ایجاد رابط های مبتنی بر کارت

هنگام ساخت افزونه های مبتنی بر کارت، درک مفاهیم خاص و الگوهای طراحی مهم است. راهنماهای زیر اطلاعاتی را که برای ایجاد افزونه‌های مؤثر مبتنی بر کارت نیاز دارید ارائه می‌کند:

هنگام ایجاد کارت و اجرای رفتار رابط کاربری به این صفحات مراجعه کنید. همچنین می توانید نمونه های اضافی زیر را برای ارجاع در هنگام پیاده سازی افزونه مفید بیابید:

  • راه اندازی سریع افزونه Google Workspace "Cats".

    این نمونه افزودنی یک رابط کاربری ساده Google Workspace با چندین صفحه و صفحه اصلی را نشان می دهد.

  • افزونه Google Workspace: "Translate"

    این نمونه افزودنی یک افزونه Google Workspace را نشان می‌دهد که به کاربران امکان می‌دهد متن را از داخل Docs، Sheets و Slides ترجمه کنند.

  • افزودنی Google Workspace: "فهرست تیم ها"

    این نمونه افزودنی یک نمونه افزودنی پیچیده‌تر Google Workspace را نشان می‌دهد که اطلاعات کاربر در مورد گیرندگان پیام Gmail، ویرایشگرهای فایل Drive، یا شرکت‌کنندگان رویداد Calendar را نشان می‌دهد. شما فقط می توانید از این افزونه در یک دامنه استفاده کنید، زیرا از Directory API برای بازیابی اطلاعات کاربر استفاده می کند.