Karten für Google Chat-Apps erstellen

Auf dieser Seite wird beschrieben, wie Sie die Komponenten und die Struktur einer Karte erstellen. Karten sind Benutzeroberflächen, mit denen Google Chat-Apps Informationen von Chat-Nutzern präsentieren und erfassen können. Chat-Apps können Karten in den folgenden Oberflächen erstellen und anzeigen:

  • Nachrichten, die eine oder mehrere Karten enthalten.
  • Startseiten: Eine Karte, die auf dem Tab Startseite in Direktnachrichten mit der Chat-App angezeigt wird.
  • Dialogfelder, d. h. Karten, die in einem neuen Fenster über Nachrichten und Startseiten geöffnet werden.

Auf dieser Seite erfahren Sie mehr über die folgenden Komponenten einer Karte:

  • Überschriften, die normalerweise den Titel einer Karte oder eines Kartenabschnitts enthalten.
  • Abschnitte, die den Hauptteil der Karte bilden, einschließlich Widgets und anderer interaktiver Elemente. In einem Kartenabschnitt können Sie der Karte mehr Struktur verleihen, einschließlich Spalten und Rastern.
  • Fixierte Fußzeilen, die unten in Dialogfeldern angezeigt werden, um dauerhafte UI-Elemente wie Schaltflächen anzuzeigen.

Vorbereitung

Eine Google Chat-App, die so konfiguriert ist, dass sie Nutzerinteraktionen empfangen und darauf reagieren kann. Wenn Sie eine interaktive Chat-App erstellen möchten, führen Sie eine der folgenden Kurzanleitungen aus, je nachdem, welche Anwendungsarchitektur Sie verwenden möchten:

Mit dem Card Builder können Sie Nachrichten und Benutzeroberflächen für Chat-Apps entwerfen und in der Vorschau ansehen:

Card Builder öffnen

Header hinzufügen

Das Widget CardHeader stellt die Kopfzeile einer Karte dar. Kopfzeilen können einen Titel, einen Untertitel und ein Avatarbild für Ihre Karte enthalten.

Das folgende Beispiel zeigt ein CardHeader-Objekt:

Einen oder mehrere Kartenabschnitte hinzufügen

Das Widget CardSection ist ein übergeordneter Container innerhalb einer Karte. Mit Kartenabschnitten können Sie Widgets innerhalb einer Karte gruppieren. Für jeden Kartenabschnitt können Sie eine Überschrift und ein oder mehrere Widgets einfügen.

Das folgende Beispiel zeigt ein CardSection-Objekt, das zwei textParagraph-Widgets enthält:

Horizontale Trennlinie zwischen Widgets hinzufügen

Das divider-Widget zeigt eine horizontale Linie an, die sich über die Breite einer Karte zwischen vertikal gestapelten Widgets erstreckt. Die Linie ist eine visuelle Trennung, die Nutzern hilft, zwischen den einzelnen Widgets zu unterscheiden, sodass Karten leichter zu erfassen und zu verstehen sind.

Im Folgenden sehen Sie eine Karte, die aus einem divider-Widget zwischen anderen Widget-Typen besteht:

Spalten hinzufügen

Das columns-Widget zeigt bis zu zwei Spalten in einer Karte an. Sie können jeder Spalte Widgets hinzufügen. Die Widgets werden in der angegebenen Reihenfolge angezeigt. Wenn Sie mehr als zwei Spalten oder Zeilen verwenden möchten, verwenden Sie das Widget grid.

Die Höhe jeder Spalte wird durch die höhere Spalte bestimmt. Wenn beispielsweise die erste Spalte höher als die zweite ist, haben beide Spalten die Höhe der ersten Spalte. Da jede Spalte eine andere Anzahl von Widgets enthalten kann, können Sie keine Zeilen definieren oder Widgets zwischen den Spalten ausrichten.

Im folgenden Beispiel wird eine Karte mit einem columns-Widget mit zwei Textspalten angezeigt. Wenn Sie nur das Spaltenlayout sehen und das Codebeispiel minimieren möchten, klicken Sie auf Minimieren. Wenn der Platz begrenzt ist, wie im folgenden Beispiel, wird die zweite Spalte unter der ersten Spalte umgebrochen.

Spaltenbreite definieren

Spalten werden nebeneinander angezeigt. Sie können die Breite jeder Spalte mit dem Feld horizontalSizeStyle anpassen. Wenn die Bildschirmbreite des Nutzers zu gering ist, wird die zweite Spalte unter der ersten umgebrochen:

  • Im Web wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite kleiner oder gleich 480 Pixel ist.
  • Auf iOS-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite kleiner oder gleich 300 pt ist.
  • Auf Android-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite kleiner oder gleich 320 dp ist.

Im folgenden Beispiel wird eine Karte mit einem columns-Widget gezeigt, das zwei Textspalten mit jeweils vier Elementen enthält. Auf jedes Element in den Spalten wird horizontalSizeStyle angewendet, um zu steuern, wie viel Platz der Text in jeder Spalte einnimmt:

  • Der erste Textabsatz verwendet FILL_MINIMUM_SPACE, um maximal 30 % der Breite der Karte zu füllen.
  • Im zweiten Textabsatz wird FILL_AVAILABLE_SPACE verwendet, um den verfügbaren Platz in der Breite der Karte zu füllen. In diesem Beispiel füllt es 70 % der Breite der Karte aus.
  • Im dritten Textabsatz ist horizontalSizeStyle nicht definiert. Daher wird standardmäßig der verfügbare Platz der Karte ausgefüllt.
  • Der vierte Textabsatz verwendet FILL_MINIMUM_SPACE, um maximal 30 % der Kartenbreite zu füllen.

Horizontale Ausrichtung einer Spalte definieren

Sie können Widgets horizontal links, rechts oder in der Mitte einer Spalte ausrichten, indem Sie das Feld horizontalAlignment definieren. Wenn das Feld horizontalAlignment nicht definiert ist, werden Widgets in einer Spalte linksbündig ausgerichtet.

Im folgenden Beispiel wird Text in einer Spalte horizontal linksbündig ausgerichtet:

Im folgenden Beispiel wird Text innerhalb einer Spalte horizontal zentriert ausgerichtet:

Im folgenden Beispiel wird Text in einer Spalte horizontal rechtsbündig ausgerichtet:

Vertikale Ausrichtung einer Spalte definieren

Sie können Widgets vertikal oben, unten oder in der Mitte einer Spalte ausrichten, indem Sie das Feld verticalAlignment definieren. Wenn das Feld verticalAlignment nicht definiert ist, werden Widgets in einer Spalte oben ausgerichtet.

Im folgenden Beispiel wird Text in einer Spalte vertikal oben ausgerichtet:

Im folgenden Beispiel wird Text innerhalb einer Spalte vertikal zentriert ausgerichtet:

Im folgenden Beispiel wird Text innerhalb einer Spalte vertikal unten ausgerichtet:

Raster hinzufügen, um eine Sammlung von Elementen anzuzeigen

Das grid-Widget zeigt ein Raster mit einer Sammlung von Elementen an. Ein Raster unterstützt eine beliebige Anzahl von Spalten und Elementen. Die Anzahl der Zeilen wird durch die Anzahl der Elemente geteilt durch die Anzahl der Spalten bestimmt. Ein Raster mit 10 Elementen und 2 Spalten hat 5 Zeilen. Ein Raster mit 11 Elementen und 2 Spalten hat 6 Zeilen.

Das Widget unterstützt Vorschläge, die Nutzern helfen, einheitliche Daten einzugeben, und On-Change-Aktionen, d. h. Actions, die ausgeführt werden, wenn eine Änderung im Texteingabefeld auftritt, z. B. wenn ein Nutzer Text hinzufügt oder löscht.

Das folgende Beispiel zeigt ein zweispaltiges Raster mit einem einzelnen Element:

Wenn Sie festlegen möchten, wo Text mit einem Bild in einem Raster angezeigt wird, können Sie das Feld gridItemLayout angeben. In diesem Feld können Sie festlegen, ob der Text über oder unter dem Element im Raster angezeigt wird. Wenn gridItemLayout nicht definiert ist, wird der Text standardmäßig unter dem Element im Raster angezeigt.

Das folgende Beispiel ist ein dreispaltiges Raster mit Text und einem Bild in jedem Raster. Im ersten Raster wird Text definiert, der über dem Bild angezeigt werden soll, im zweiten Raster Text, der unter dem Bild angezeigt werden soll, und im dritten Raster wird die Position des Texts nicht definiert.

Rahmen zu einem Raster oder einer Spalte hinzufügen

Für Elemente, die in einem column- oder grid-Widget angezeigt werden, können Sie diesen UI-Elementen einen Rahmen hinzufügen, indem Sie ein borderType-Feld und ein borderStyle-Feld definieren. Wenn kein borderStyle-Feld definiert ist, wird standardmäßig kein Rahmen angezeigt. Sie können einen borderType definieren, der auf alle Elemente in einem Widget angewendet wird, oder den Stil auf jedes einzelne Element in einem Widget anwenden.

Das folgende Beispiel ist ein zweispaltiges Raster mit einem Bild in jedem Raster, wobei der Rahmentyp, der Stil und die Farbe so definiert wurden, dass sie für alle Elemente im Raster gelten.

Das folgende Beispiel ist ein dreispaltiges Raster mit einem Bild in jedem Raster. Der Rahmenstil und der Typ sind jeweils einzeln definiert. Für das erste Bild ist ein Rahmen als STROKE definiert. Das zweite Bild hat einen Rahmen, der als NO_BORDER definiert ist. Für das dritte Bild ist kein Rahmen definiert.

Karussell hinzufügen

Das Widget Carousel zeigt eine Sammlung von CarouselCard-Objekten an, die auf dem Bildschirm ein- und ausgeblendet werden können. Sie können jedem CarouselCard mehrere Widgets hinzufügen.

Das Widget CardFixedFooter stellt die Fußzeile einer Dialogfeldnachricht dar, die von einer Chat-App gesendet wird. Fußzeilen können eine primäre und eine sekundäre Schaltfläche enthalten.

Das Widget CardFixedFooter ist nur für Dialoge verfügbar.

Das folgende Beispiel zeigt ein CardFixedFooter-Widget mit zwei Schaltflächen:

Fehlerbehebung

Wenn eine Google Chat-App oder Karte einen Fehler zurückgibt, wird auf der Chat-Oberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht verarbeitet werden.“ Manchmal wird in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt, aber die Chat-App oder -Karte liefert ein unerwartetes Ergebnis. Beispielsweise wird eine Kartennachricht möglicherweise nicht angezeigt.

Auch wenn in der Chat-Benutzeroberfläche möglicherweise keine Fehlermeldung angezeigt wird, sind beschreibende Fehlermeldungen und Protokolldaten verfügbar, mit denen Sie Fehler beheben können, wenn das Fehler-Logging für Chat-Apps aktiviert ist. Hilfe zum Anzeigen, Debuggen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.