Bu sayfa, Cloud Translation API ile çevrilmiştir.

Google Chat uygulaması için ana sayfa oluşturma

Bu sayfada, Google Chat uygulamanızla doğrudan mesajlar için ana sayfa oluşturma açıklanmaktadır. Google Chat API'sinde uygulama ana sayfası olarak adlandırılan ana sayfa, bir kullanıcı ile Chat uygulaması arasındaki doğrudan mesaj alanlarının Ana Sayfa sekmesinde görünen özelleştirilebilir bir kart arayüzüdür.

İki widget'lı uygulama ana ekranı kartı. — **Şekil 1**: Chat uygulamasıyla doğrudan mesajlarda görünen bir ana sayfa örneği.

Uygulama ana sayfasını kullanarak Chat uygulamasıyla etkileşim kurma ipuçları paylaşabilir veya kullanıcıların Chat'ten harici bir hizmete ya da araca erişip bunları kullanmasına izin verebilirsiniz.

Chat uygulamaları için mesajlaşma ve kullanıcı arayüzlerini tasarlayıp önizlemek üzere Kart Oluşturucu'yu kullanın:

Kart Oluşturucu'yu açın

Ön koşullar

Node.js

Etkileşim etkinliklerini alan ve bunlara yanıt veren bir Google Chat uygulaması. HTTP hizmeti kullanarak etkileşimli bir Chat uygulaması oluşturmak için bu hızlı başlangıç kılavuzunu tamamlayın.

Python

Java

Apps Komut Dosyası

Etkileşim etkinliklerini alan ve bunlara yanıt veren bir Google Chat uygulaması. Apps Komut Dosyası'nda etkileşimli bir Chat uygulaması oluşturmak için bu hızlı başlangıç kılavuzunu tamamlayın.

Chat uygulamanız için uygulama ana sayfasını yapılandırma

Uygulama ana sayfasını desteklemek için Chat uygulamanızı APP_HOME etkileşim etkinliklerini alacak şekilde yapılandırmanız gerekir. Chat uygulamanız, bir kullanıcı Chat uygulamasıyla doğrudan mesajlaşırken Ana Sayfa sekmesini tıkladığında bu etkinliği alır.

Google Cloud Console'da yapılandırma ayarlarınızı güncellemek için aşağıdakileri yapın:

Google Cloud Console'da Menü > Diğer ürünler > Google Workspace > Ürün Kitaplığı > Google Chat API'ye gidin.

Google Chat API'ye gitme
Yönet'i ve ardından Yapılandırma sekmesini tıklayın.
Etkileşimli özellikler bölümündeki İşlevsellik bölümüne gidin ve Uygulama Ana Sayfası'nı Destekle'yi seçin.
Chat uygulamanız bir HTTP hizmeti kullanıyorsa Bağlantı ayarları'na gidin ve Uygulama ana sayfası URL'si alanı için bir uç nokta belirtin. HTTP uç nokta URL'si alanında belirttiğiniz URL'yi kullanabilirsiniz.
Kaydet'i tıklayın.

Uygulama ana sayfası kartı oluşturma

Kullanıcı uygulama ana sayfasını açtığında Chat uygulamanız, APP_HOME etkileşim etkinliğini pushCard gezinme ve Card ile birlikte RenderActions örneği döndürerek işlemelidir. Kart, etkileşimli bir deneyim oluşturmak için sohbet uygulamasının işleyip ek kartlar veya bir iletişim kutusuyla yanıtlayabileceği düğmeler ya da metin girişleri gibi etkileşimli widget'lar içerebilir.

Aşağıdaki örnekte, Chat uygulaması, kartın oluşturulma zamanını ve bir düğmeyi gösteren bir ilk uygulama ana sayfası kartı görüntülüyor. Kullanıcı düğmeyi tıkladığında Sohbet uygulaması, güncellenen kartın oluşturulma zamanını gösteren güncellenmiş bir kart döndürür.

Node.js

node/app-home/index.js

GitHub'da göster

app.post('/', async (req, res) => {
  let event = req.body.chat;

  let body = {};
  if (event.type === 'APP_HOME') {
    // App home is requested
    body = { action: { navigations: [{
      pushCard: getHomeCard()
    }]}}
  } else if (event.type === 'SUBMIT_FORM') {
    // The update button from app home is clicked
    commonEvent = req.body.commonEventObject;
    if (commonEvent && commonEvent.invokedFunction === 'updateAppHome') {
      body = updateAppHome()
    }
  }

  return res.json(body);
});

// Create the app home card
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

Python

python/app-home/main.py

GitHub'da göster

@app.route('/', methods=['POST'])
def post() -> Mapping[str, Any]:
  """Handle requests from Google Chat

  Returns:
      Mapping[str, Any]: the response
  """
  event = request.get_json()
  match event['chat'].get('type'):

    case 'APP_HOME':
      # App home is requested
      body = { "action": { "navigations": [{
        "pushCard": get_home_card()
      }]}}

    case 'SUBMIT_FORM':
      # The update button from app home is clicked
      event_object = event.get('commonEventObject')
      if event_object is not None:
        if 'update_app_home' == event_object.get('invokedFunction'):
          body = update_app_home()

    case _:
      # Other response types are not supported
      body = {}

  return json.jsonify(body)


def get_home_card() -> Mapping[str, Any]:
  """Create the app home card

  Returns:
      Mapping[str, Any]: the card
  """
  return { "sections": [{ "widgets": [
    { "textParagraph": {
      "text": "Here is the app home 🏠 It's " +
        datetime.datetime.now().isoformat()
    }},
    { "buttonList": { "buttons": [{
      "text": "Update app home",
      "onClick": { "action": {
        "function": "update_app_home"
      }}
    }]}}
  ]}]}

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java

GitHub'da göster

// Process Google Chat events
@PostMapping("/")
@ResponseBody
public GenericJson onEvent(@RequestBody JsonNode event) throws Exception {
  switch (event.at("/chat/type").asText()) {
    case "APP_HOME":
      // App home is requested
      GenericJson navigation = new GenericJson();
      navigation.set("pushCard", getHomeCard());

      GenericJson action = new GenericJson();
      action.set("navigations", List.of(navigation));

      GenericJson response = new GenericJson();
      response.set("action", action);
      return response;
    case "SUBMIT_FORM":
      // The update button from app home is clicked
      if (event.at("/commonEventObject/invokedFunction").asText().equals("updateAppHome")) {
        return updateAppHome();
      }
  }

  return new GenericJson();
}

// Create the app home card
GoogleAppsCardV1Card getHomeCard() {
  return new GoogleAppsCardV1Card()
    .setSections(List.of(new GoogleAppsCardV1Section()
      .setWidgets(List.of(
        new GoogleAppsCardV1Widget()
          .setTextParagraph(new GoogleAppsCardV1TextParagraph()
            .setText("Here is the app home 🏠 It's " + new Date())),
        new GoogleAppsCardV1Widget()
          .setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
            .setText("Update app home")
            .setOnClick(new GoogleAppsCardV1OnClick()
              .setAction(new GoogleAppsCardV1Action()
                .setFunction("updateAppHome"))))))))));
}

Apps Komut Dosyası

Tüm onAppHome etkileşim etkinliklerinden sonra çağrılan APP_HOME işlevini uygulayın:

Bu örnek, card JSON döndürerek kart mesajı gönderir. Apps Komut Dosyası kart hizmetini de kullanabilirsiniz.

apps-script/app-home/app-home.gs

GitHub'da göster

/**
 * Responds to a APP_HOME event in Google Chat.
 */
function onAppHome() {
  return { action: { navigations: [{
    pushCard: getHomeCard()
  }]}};
}

/**
 * Returns the app home card.
 */
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

Uygulama ana ekranı etkileşimlerine yanıt verme

İlk uygulama ana sayfası kartınızda düğmeler veya seçim girişleri gibi etkileşimli widget'lar varsa Chat uygulamanız, RenderActions örneğini updateCard gezinme ile döndürerek ilgili etkileşim etkinliklerini işlemelidir. Etkileşimli widget'ları işleme hakkında daha fazla bilgi edinmek için Kullanıcılar tarafından girilen bilgileri işleme başlıklı makaleyi inceleyin.

Önceki örnekte, ilk uygulama ana sayfası kartında bir düğme vardı. Kullanıcı düğmeyi her tıkladığında, aşağıdaki kodda gösterildiği gibi CARD_CLICKED etkileşim etkinliği, updateAppHome işlevini tetikleyerek uygulamanın ana sayfa kartını yeniler:

Node.js

node/app-home/index.js

GitHub'da göster

// Update the app home
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}}
};

Python

python/app-home/main.py

GitHub'da göster

def update_app_home() -> Mapping[str, Any]:
  """Update the app home

  Returns:
      Mapping[str, Any]: the update card render action
  """
  return { "renderActions": { "action": { "navigations": [{
    "updateCard": get_home_card()
  }]}}}

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java

GitHub'da göster

// Update the app home
GenericJson updateAppHome() {
  GenericJson navigation = new GenericJson();
  navigation.set("updateCard", getHomeCard());

  GenericJson action = new GenericJson();
  action.set("navigations", List.of(navigation));

  GenericJson renderActions = new GenericJson();
  renderActions.set("action", action);

  GenericJson response = new GenericJson();
  response.set("renderActions", renderActions);
  return response;
}

Apps Komut Dosyası

Bu örnek, card JSON döndürerek kart mesajı gönderir. Apps Komut Dosyası kart hizmetini de kullanabilirsiniz.

apps-script/app-home/app-home.gs

GitHub'da göster

/**
 * Updates the home app.
 */
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}};
}

İletişim kutularını açma

Chat uygulamanız, iletişim kutularını açarak uygulama ana sayfasındaki etkileşimlere de yanıt verebilir.

Çeşitli widget'ların yer aldığı bir iletişim kutusu. — **3. Şekil**: Kullanıcıyı kişi eklemeye yönlendiren bir iletişim kutusu.

Uygulama ana sayfasından bir iletişim kutusu açmak için ilgili etkileşim etkinliğini, renderActions nesnesi içeren updateCard gezinme ile Card döndürerek işleyin. Aşağıdaki örnekte, bir Chat uygulaması, CARD_CLICKED etkileşim etkinliğini işleyerek ve bir iletişim kutusu açarak bir uygulama ana sayfası kartındaki düğme tıklamasına yanıt veriyor:

{ renderActions: { action: { navigations: [{ updateCard: { sections: [{
  header: "Add new contact",
  widgets: [{ "textInput": {
    label: "Name",
    type: "SINGLE_LINE",
    name: "contactName"
  }}, { textInput: {
    label: "Address",
    type: "MULTIPLE_LINE",
    name: "address"
  }}, { decoratedText: {
    text: "Add to favorites",
    switchControl: {
      controlType: "SWITCH",
      name: "saveFavorite"
    }
  }}, { decoratedText: {
    text: "Merge with existing contacts",
    switchControl: {
      controlType: "SWITCH",
      name: "mergeContact",
      selected: true
    }
  }}, { buttonList: { buttons: [{
    text: "Next",
    onClick: { action: { function: "openSequentialDialog" }}
  }]}}]
}]}}]}}}

Bir iletişim kutusunu kapatmak için aşağıdaki etkileşim etkinliklerini işleyin:

CLOSE_DIALOG: İletişim kutusunu kapatır ve Chat uygulamasının ilk uygulama ana kartına döner.
CLOSE_DIALOG_AND_EXECUTE: İletişim kutusunu kapatır ve uygulamanın ana kartını yeniler.

Aşağıdaki kod örneğinde, bir iletişim kutusunu kapatıp uygulama ana kartına dönmek için CLOSE_DIALOG kullanılır:

{ renderActions: { action: {
  navigations: [{ endNavigation: { action: "CLOSE_DIALOG" }}]
}}}

Kullanıcılardan bilgi toplamak için sıralı diyaloglar da oluşturabilirsiniz. Sıralı iletişim kutuları oluşturmayı öğrenmek için İletişim kutularını açma ve yanıtlama başlıklı makaleyi inceleyin.

Uygulama ana sayfasını kullanan Chat uygulaması örneklerini görüntüleyin.
İletişim kutularını açma ve yanıtlama

Google Chat uygulaması için ana sayfa oluşturma Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Ön koşullar

Node.js

Python

Java

Apps Komut Dosyası

Chat uygulamanız için uygulama ana sayfasını yapılandırma

Uygulama ana sayfası kartı oluşturma

Node.js

Python

Java

Apps Komut Dosyası

Uygulama ana ekranı etkileşimlerine yanıt verme

Node.js

Python

Java

Apps Komut Dosyası

İletişim kutularını açma

İlgili konular

Google Chat uygulaması için ana sayfa oluşturma