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

Bu sayfada, web siteniz için nasıl ana sayfa oluşturacağınız açıklanmaktadır. Google Chat uygulaması. Uygulama ana sayfası, özelleştirilebilir bir kart arayüzüdür Doğrudan bir web sitesini ziyaret ettiğinde Chat uygulamasının kullanıcıya gönderdiği sohbet mesajı gönderebilir.

Örneğin, şunları yapabilirsiniz: uygulamanın ana kartı mesajını, Chat uygulaması - eğik çizgiyle başlayan komutlar. Son kullanıcılar için uygulama ana sayfası Chat uygulamasının doğrudan mesajında yalnızca Uygulama geliştirici bu özelliği etkinleştirir.

---

Chat uygulamaları için JSON kart mesajları tasarlayıp önizlemek üzere Kart Oluşturucu'yu kullanın:

Kart Oluşturucu'yu açın

---

Ön koşullar

Python

Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Bir HTTP hizmeti kullanarak etkileşimli Chat uygulaması için bu hızlı başlangıç kılavuzunu tamamlayın.

Apps Komut Dosyası

Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Bir Apps Komut Dosyası'ndaki etkileşimli Chat uygulaması için bu hızlı başlangıç kılavuzunu tamamlayın.

Node.js

Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Bir HTTP hizmeti kullanarak etkileşimli Chat uygulaması için bu hızlı başlangıç kılavuzunu tamamlayın.

Java

Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Bir HTTP hizmeti kullanarak etkileşimli Chat uygulaması için bu hızlı başlangıç kılavuzunu tamamlayın.

Chat API'yi yapılandırma

Uygulama ana sayfasını desteklemek için Chat API yapılandırmanızı güncellemeniz gerekir kullanıma sunduk.

Python

1. Google Cloud konsolunda Menü'ye gidin. > Diğer ürünler > Google Workspace > Ürün Kitaplığı > Google Chat API'yi tıklayın.

   Google Chat API'ye git

2. Yönet'i, ardından Yapılandırma sekmesini tıklayın.

3. Destek Uygulaması Ana Sayfası onay kutusunu seçin.

4. Uygulama Ana Sayfa URL'si alanına bir URL ekleyin. Bu değer genellikle aynıdır URL'sini Uygulama URL'si olarak ayarlayın. Bu URL şunun için çağrılır: APP_HOME etkinlik.

5. Kaydet'i tıklayın.

Apps Komut Dosyası

1. Google Cloud konsolunda Menü'ye gidin. > Diğer ürünler > Google Workspace > Ürün Kitaplığı > Google Chat API'yi tıklayın.

   Google Chat API'ye git

2. Yönet'i, ardından Yapılandırma sekmesini tıklayın.

3. Destek Uygulaması Ana Sayfası onay kutusunu seçin.

4. Kaydet'i tıklayın.

Node.js

1. Google Cloud konsolunda Menü'ye gidin. > Diğer ürünler > Google Workspace > Ürün Kitaplığı > Google Chat API'yi tıklayın.

   Google Chat API'ye git

2. Yönet'i, ardından Yapılandırma sekmesini tıklayın.

3. Destek Uygulaması Ana Sayfası onay kutusunu seçin.

4. Uygulama Ana Sayfa URL'si alanına bir URL ekleyin. Bu değer genellikle aynıdır URL'sini Uygulama URL'si olarak ayarlayın. Bu URL şunun için çağrılır: APP_HOME etkinlik.

5. Kaydet'i tıklayın.

Java

1. Google Cloud konsolunda Menü'ye gidin. > Diğer ürünler > Google Workspace > Ürün Kitaplığı > Google Chat API'yi tıklayın.

   Google Chat API'ye git

2. Yönet'i, ardından Yapılandırma sekmesini tıklayın.

3. Destek Uygulaması Ana Sayfası onay kutusunu seçin.

4. Uygulama Ana Sayfa URL'si alanına bir URL ekleyin. Bu değer genellikle aynıdır URL'sini Uygulama URL'si olarak ayarlayın. Bu URL şunun için çağrılır: APP_HOME etkinlik.

5. Kaydet'i tıklayın.

Uygulama derleme ana sayfası

Daha fazla örnek için Google Chat uygulaması örnekleri başlıklı makaleyi inceleyin.

Uygulama ana kartı, bir kullanıcı şuradan doğrudan bir mesaj açtığında başlatılır: yanıt olarak güncellenebilir. Düğme tıklaması, form gönderme veya iletişim kutusu kapatma gibi etkileşimli bir etkinlik.

Aşağıdaki örnekte Chat uygulamasında Kartın oluşturulduğu zamanı gösteren ilk uygulama ana kartı bir düğme gibi. Kullanıcı düğmeyi tıkladığında Chat uygulaması değeri, güncellenen kartın oluşturulduğu zamanı gösteren güncellenmiş bir kart döndürür.

Uygulama ana sayfası için ilk kartı oluştur

Uygulama ana sayfası derlemek için Chat uygulaması şunları yapmalıdır: APP_HOME etkileşim etkinliği ve şunu döndürür: RenderActions pushCard navigasyon ile.

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"
      }}
    }]}}
  ]}]}

Apps Komut Dosyası

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

Bu örnekte, kart JSON'a ekleyin. Ayrıca şunu da kullanabilirsiniz: Apps Komut Dosyası kart hizmeti.

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"
      }}
    }]}}
  ]}]};
}

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"
      }}
    }]}}
  ]}]};
}

Java

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

GitHub'da göster

/**
 * Process Google Chat events
 *
 * @param event Event from chat.
 * @return GenericJson
 * @throws Exception
 */
@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() {
  GoogleAppsCardV1TextParagraph textParagraph = new GoogleAppsCardV1TextParagraph();
  textParagraph.setText("Here is the app home 🏠 It's " + new Date());

  GoogleAppsCardV1Widget textParagraphWidget = new GoogleAppsCardV1Widget();
  textParagraphWidget.setTextParagraph(textParagraph);

  GoogleAppsCardV1Action action = new GoogleAppsCardV1Action();
  action.setFunction("updateAppHome");

  GoogleAppsCardV1OnClick onClick = new GoogleAppsCardV1OnClick();
  onClick.setAction(action);

  GoogleAppsCardV1Button button = new GoogleAppsCardV1Button();
  button.setText("Update app home");
  button.setOnClick(onClick);

  GoogleAppsCardV1ButtonList buttonList = new GoogleAppsCardV1ButtonList();
  buttonList.setButtons(List.of(button));

  GoogleAppsCardV1Widget buttonListWidget = new GoogleAppsCardV1Widget();
  buttonListWidget.setButtonList(buttonList);

  GoogleAppsCardV1Section section = new GoogleAppsCardV1Section();
  section.setWidgets(List.of(textParagraphWidget, buttonListWidget));

  GoogleAppsCardV1Card card = new GoogleAppsCardV1Card();
  card.setSections(List.of(section));

  return card;
}

Uygulama ana sayfa kartını güncelleme

İlk uygulama ana kartınız, düğmeler gibi etkileşimli widget'lar içeriyorsa girişleriniz olduğunda, Chat uygulamanız ilgili etkileşim etkinliklerini, RenderActions updateCard navigasyon ile. Etkileşimli reklamları yönetme hakkında daha fazla bilgi edinmek için hakkında bilgi için Kullanıcıların girdiği işlem bilgileri.

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()
  }]}}}

Apps Komut Dosyası

Bu örnekte, kart JSON'a ekleyin. Ayrıca şunu da kullanabilirsiniz: Apps Komut Dosyası kart hizmeti.

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

GitHub'da göster

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

Node.js

node/app-home/index.js

GitHub'da göster

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

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;
}

Sınırlamalar

Genel olarak navigation Chat uygulamalarında kullanılamaz. Kart destesini iade edemezsiniz. Yalnızca pushCard (ilk yanıt için) ve updateCard (güncellemeler için) Chat uygulamalarında kullanılabilir.

İlgili konular

• Uygulama ana sayfasını kullanan Chat uygulaması örneklerini görüntüleyin.

• Bir iletişim kutusu açmak için OPEN_DIALOG etkileşimini kullanın. Daha fazla bilgi için bkz. Bir uygulama ana sayfa kartına yanıt olarak bir iletişim kutusu açın.

• Bir iletişim kutusunu kapatmak için CLOSE_DIALOG etkileşimini kullanarak iletişim kutusunu kapatın ve uygulama ana kartına dönün veya CLOSE_DIALOG_EXECUTE uygulamasını kullanın etkileşimini kullanarak iletişim kutusunu kapatıp uygulama ana kartını yenileyin. Örneğin, daha fazla bilgi için Uygulama ana sayfa kartı için iletişim kutusuna yanıt verin.

• Uygulama ana sayfasının nasıl kullanılacağına ilişkin bir örnek için bkz. codelab'deki sorun yönetimi Chat uygulaması Gemini ile Google Chat için uygulama geliştirme