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 für Chat-Nutzer präsentieren und von ihnen erfassen können. Chat-Apps können Karten in den folgenden Oberflächen erstellen und anzeigen:

  • Nachrichten, die eine oder mehrere Karten enthalten.
  • Startseiten: Das ist eine Karte, die auf dem Tab Startseite in Direktnachrichten mit der Chat-App angezeigt wird.
  • Dialoge sind 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 in der Regel 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 hinzufügen, z. B. Spalten und Rastern.
  • Fixierte Fußzeilen, die unten in Dialogfeldern angezeigt werden, um dauerhafte UI-Elemente wie Schaltflächen zu präsentieren.

Vorbereitung

Eine Google Chat-App, die so konfiguriert ist, dass sie Interaktionsereignisse empfängt und darauf reagiert. Wenn Sie eine interaktive Chat-App erstellen möchten, führen Sie einen der folgenden Schnellstarts aus, je nachdem, welche App-Architektur 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 CardHeader-Widget stellt die Kopfzeile einer Karte dar. Überschriften 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 CardSection-Widget ist ein Container auf hoher Ebene 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 mit zwei textParagraph-Widgets:

Horizontale Trennlinie zwischen Widgets einfügen

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

Im Folgenden sehen Sie eine Karte, die ein divider-Widget zwischen anderen Widget-Typen enthält:

Spalten hinzufügen

Im columns-Widget werden bis zu zwei Spalten auf einer Karte angezeigt. Sie können jeder Spalte Widgets hinzufügen. Die Widgets werden in der Reihenfolge angezeigt, in der sie angegeben sind. Wenn Sie mehr als zwei Spalten einfügen oder Zeilen verwenden möchten, nutzen Sie das grid-Widget.

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

Im folgenden Beispiel ist eine Karte mit einem columns-Widget zu sehen, das zwei Textspalten enthält. 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 der einzelnen Spalten 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 angezeigt, 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 den einzelnen Spalten einnimmt:

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

Horizontale Ausrichtung einer Spalte definieren

Sie können Widgets horizontal links-, rechtsbündig oder zentriert in einer Spalte ausrichten, indem Sie das Feld horizontalAligment 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 links ausgerichtet:

Im folgenden Beispiel wird Text in einer Spalte horizontal zentriert:

Im folgenden Beispiel wird Text in einer Spalte horizontal rechts ausgerichtet:

Vertikale Ausrichtung einer Spalte definieren

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

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

Im folgenden Beispiel wird Text in einer Spalte vertikal zentriert:

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

Raster zum Anzeigen einer Sammlung von Elementen hinzufügen

Im grid-Widget wird ein Raster mit einer Sammlung von Elementen angezeigt. 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, die Actions sind und ausgeführt werden, wenn sich das Textfeld ändert, z. B. wenn ein Nutzer Text hinzufügt oder löscht.

Das folgende Beispiel zeigt ein Raster mit zwei Spalten und einem einzelnen Element:

Wenn Sie festlegen möchten, wo Text zusammen mit einem Bild in einem Raster angezeigt werden soll, 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 zeigt 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 für ein Raster oder eine Spalte hinzufügen

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

Das folgende Beispiel zeigt ein Raster mit zwei Spalten und einem Bild in jedem Raster. Der Typ, die Formatierung und die Farbe des Rahmens wurden so definiert, dass sie auf alle Elemente im Raster angewendet werden.

Im folgenden Beispiel sehen Sie ein Raster mit drei Spalten und einem Bild in jedem Raster. Der Rahmenstil und -typ sind individuell definiert. Das erste Bild hat einen Rahmen, der als STROKE definiert ist. 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 Carousel-Widget zeigt eine Sammlung von CarouselCard-Objekten an, die auf dem Bildschirm gescrollt werden können. Sie können jeder 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 CardFixedFooter-Widget ist nur für Dialoge verfügbar.

Im Folgenden finden Sie ein Beispiel für ein CardFixedFooter-Widget mit zwei Schaltflächen:

Fehlerbehebung

Wenn eine Google Chat-App oder Karte einen Fehler zurückgibt, wird in der Chat-Benutzeroberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht bearbeitet werden.“ Manchmal wird in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt, aber die Chat-App oder ‑Karte liefert ein unerwartetes Ergebnis, z. B. wird eine Kartennachricht nicht angezeigt.

Auch wenn in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt wird, sind aussagekräftige Fehlermeldungen und Protokolldaten verfügbar, die Ihnen helfen, Fehler zu beheben, wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Informationen zum Aufrufen, Debuggen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.