Gerenciar interatividade

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Configurar seu aplicativo para lidar com a interatividade.
• Manusear e responder às cargas de mensagens enviadas das mensagens do Kit de blocos.

Criar uma experiência de usuário perfeita

Até agora, você aprendeu o que é o Kit de blocos, como criar vários tipos de mensagens e onde essas mensagens podem residir dentro do Slack. Agora, vamos rever como fazer as mensagens do kit de blocos ganharem vida e como lidar com a interação do usuário. A interação do usuário pode ser o aperto de botão, uma opção de lista suspensa selecionada ou o envio de um modal. Todas essas ações precisam ser manuseadas pelo seu aplicativo para proporcionar uma experiência perfeita ao usuário. 

Ciclo de vida de interatividade

Com botões, listas suspensas, modais e muito mais, você pode configurar uma série de pontos de entrada de interação que permitem que os usuários invoquem uma resposta do aplicativo. O acionamento de um desses pontos de entrada cria uma carga de interação. Essa carga é um pacote de informações que explica o contexto da ação do usuário, dando ao aplicativo informações suficientes para criar uma resposta coerente.

Você fica com um fluxo de interação que se parece com o que segue.

1. Um usuário aciona uma interação usando um dos pontos de entrada de um aplicativo.
2. O aplicativo recebe e processa a carga de interação.
3. Usando esse contexto, o aplicativo gera uma resposta à interação.

Seu aplicativo precisa estar pronto para essas duas últimas etapas.

Configurar interatividade

Para que seu aplicativo receba cargas de interação, o Slack precisa saber para onde enviá-las. Cada aplicativo pode ser configurado com URLs de solicitação que indicam um ponto de extremidade na Web pertencente ao aplicativo hospedado.

Para configurar uma URL de solicitação para seu aplicativo:

1. Abra o painel de gerenciamento do aplicativo no site da API do Slack.
2. Clique em Interactivity & Shortcuts (Interatividade e atalhos) na barra lateral.
3. Habilite a Interactivity (Interatividade).

Você verá algumas novas opções aparecerem. As opções relevantes para a sua mensagem interativa do Kit de blocos são:

URL da solicitação: a URL para a qual você envia a carga de solicitação quando componentes interativos ou atalhos são usados (1). Você precisa adicionar a URL do aplicativo hospedado para lidar com essas cargas.

URL de carga de opções: essa é uma configuração usada pelos componentes do Kit de blocos - menus de seleção e menus com várias escolhas (2). Esses componentes podem carregar as opções do menu de uma URL de origem externa, e a URL de carga de opções determina qual URL será consultada para retornar as opções de menu.

O corpo da carga que o aplicativo recebe terá um campo de tipo que indica a origem da interação. As interações do usuário estão na carga block_actions. A carga fornece um contexto completo da interação que aconteceu dentro da sua mensagem do Kit de blocos. Ela inclui o usuário que interagiu, os campos de estado predefinidos de algum componente interativo utilizado, onde a interação acontece e muito mais.

Manusear cargas

Depois que uma carga é recebida, seu aplicativo deve responder ao usuário. Mesmo que possa haver muitas respostas, vamos nos concentrar na resposta de reconhecimento e na resposta de mensagem.

A resposta de reconhecimento é obrigatória para todos os aplicativos e reconhece o recebimento de uma carga de interação válida. E a resposta de mensagem abre inúmeras possibilidades para a resposta do seu aplicativo. Você pode responder com uma mensagem padrão "Obrigado", publicar uma resposta efêmera ou até mesmo atualizar a mensagem de origem. Qualquer rota escolhida envolverá o uso de response_url para enviar de volta a próxima etapa na mensagem interativa do Kit de blocos. A response_url é única para cada carga útil e pode ser usada para publicar mensagens de volta ao local onde a interação aconteceu. 

Vamos dar uma olhada mais profunda na carga block_actions e em alguns dos campos-chave.

Confira esse exemplo de uma carga que seria enviada de volta depois que um usuário faz uma escolha em um menu com várias escolhas.

O usuário seleciona Save it (Salvar) no menu.

A carga a seguir é enviada de volta para o aplicativo.

{
    "type": "block_actions",
    "user": {
        "id": "U018AF3MLPQ",
        "username": "hshavers",
        "name": "hshavers",
        "team_id": "TG4KUE8JV"
    },
    "api_app_id": "A02",
    "token": "Shh_its_a_seekrit",
    "container": {
        "type": "message",
        "text": "The contents of the original message where the action originated"
    },
    "trigger_id": "12466734323.1395872398",
    "team": {
        "id": "TG4KUE8JV",
        "domain": "community"
    },
    "enterprise": null,
    "is_enterprise_install": false,
    "state": {
        "values": {
            "enhWA": {
                "NfSha": {
                    "type": "static_select",
                    "selected_option": {
                        "text": {
                            "type": "plain_text",
                            "text": "Save it",
                            "emoji": true
                        },
                        "value": "value-2"
                    }
                }
            }
        }
    },
    "response_url": "https://www.postresponsestome.com/T123567/1509734234",
    "actions": [
        {
            "type": "static_select",
            "block_id": "enhWA",
            "action_id": "NfSha",
            "selected_option": {
                "text": {
                    "type": "plain_text",
                    "text": "Save it",
                    "emoji": true
                },
                "value": "value-2"
            },
            "placeholder": {
                "type": "plain_text",
                "text": "Manage",
                "emoji": true
            },
            "action_ts": "1623954664.372376"
        }
    ]
}

Essa carga está armazenando o valor do menu com várias escolhas, o usuário responsável pela seleção (em user), juntamente com o block_id vinculado a esse botão e menu de várias escolhas. 

A partir daqui, você pode repassar esses valores para enviar um reconhecimento de volta ao usuário, usando as informações em user para iniciar uma mensagem direta e as informações em block_id para confirmar a escolha. Seu aplicativo pode usar outras informações da carga para continuar fluxos de trabalho importantes ou uma automação, limitado apenas pela sua imaginação (e pelas APIs do Slack).

Resumo

Neste módulo, você aprendeu sobre o Kit de blocos, sobre como pode usá-lo para criar mensagens visualmente atraentes em seu aplicativo Slack e como elevar seu aplicativo a outro patamar. Você aprendeu sobre os diferentes tipos de blocos de layout disponíveis, onde essas mensagens robustas podem residir dentro do Slack e como tornar essas mensagens interativas e cheias de ação. Daqui, o Kit de blocos permite que você invente muitas maneiras mais criativas de tornar a vida profissional mais agradável, simples e produtiva.

Para onde vamos daqui?

Com o básico, você pode começar a explorar mais recursos do Kit de blocos e da plataforma. Aqui estão alguns caminhos que você pode pensar em trilhar.

• Leia a documentação do Kit de blocos para obter informações mais detalhadas sobre os componentes do Kit de blocos.
• Experimente o Criador do kit de blocos e confira os modelos a serem usados no seu próprio aplicativo.