Gerar painel lateral da reunião
O painel lateral da reunião aprimora sua experiência na reunião e ajuda os organizadores e apresentadores a ter um conjunto diferente de exibições e ações.
Principais recursos do painel lateral da reunião
- Provisionamentos para adicionar novo ponto de agenda.
- Adiciona a agenda como entrada de texto à lista do Painel Lateral.
- Publica a lista de agendas no chat da reunião.
Este guia passo a passo ajuda você a gerar o painel lateral da reunião para adicionar e publicar a agenda. Você verá a seguinte saída:
Pré-requisitos
Instale as seguintes ferramentas e configure seu ambiente de desenvolvimento:
Microsoft Teams com conta válida
SignalR para atualizar a agenda em tempo real
Versão mais recente do ngrok somente para teste de devbox ou qualquer solução de túnel equivalente
Observação
Depois de baixar o ngrok, inscreva-se e instale o authtoken.
Configurar o ambiente local
Selecione Código.
No menu suspenso, selecione Abrir com o GitHub Desktop.
Selecione Clonar.
Criar e registrar seu bot
As etapas a seguir ajudam você a criar e registrar seu bot no portal do Azure.
- Crie um recurso de Bot do Azure para registrar o bot no Azure Serviço de Bot.
- Crie o segredo do cliente para habilitar a autenticação de SSO do bot.
- Adicione o canal do Teams para implantar o bot.
- Use o ngrok para criar um túnel para os pontos de extremidade do servidor Web.
- Adicione o ponto de extremidade de mensagens ao túnel ngrok que você criou.
Para criar um recurso de Bot do Azure
Acesse o Portal do Azure.
Selecione Criar um recurso.
Na caixa de pesquisa, insira o Bot do Azure.
Selecione Enter.
Selecione o Bot do Azure.
Selecionar Criar.
Insira o nome do identificador do bot necessário no identificador do Bot.
Selecione sua Assinatura na lista suspensa.
Selecione seu Grupo de recursos na lista suspensa.
Você também pode criar um novo grupo de recursos (selecione Criar > insira o nome do recurso > selecione OK).
Se você tiver criado um novo grupo de recursos, selecione o local necessário na lista suspensa Novo local do grupo de recursos.
Na seção ID do Aplicativo da Microsoft , por padrão , a opção Criar nova ID de Aplicativo da Microsoft está selecionada.
Você pode selecionar Usar o registro de aplicativo existente e inserir a ID do aplicativo existente e a senha do aplicativo existente ou selecionar Criar nova ID de Aplicativo da Microsoft.
Observação
Não é possível criar mais de um bot com a mesma ID do Aplicativo da Microsoft.
Selecione o tipo de aplicativo como multilocatário.
Selecione Rever + criar.
Se a validação for aprovada, selecione Criar.
Levará alguns minutos para o serviço de bot ser provisionado.
Selecione Vá para o recurso.
Seu bot do Azure é criado.
Para criar o segredo do cliente
Execute as seguintes etapas se você tiver criado uma nova ID de Aplicativo da Microsoft:
No painel esquerdo, selecione Configuração.
Dica
Salve a ID do Aplicativo da Microsoft ou a ID do Cliente para referência futura.
Ao lado da ID do Aplicativo da Microsoft, selecione Gerenciar.
Na seção Segredos do cliente , selecione Novo segredo do cliente.
A janela Adicionar um segredo do cliente é exibida.
Insira Descrição.
Selecione Adicionar.
Na coluna Valor , selecione Copiar para área de transferência.
Dica
Salve o valor de segredos do cliente ou a senha do aplicativo para referência futura.
Para adicionar o canal do Teams
Selecione Início.
Selecione seu bot de recursos recentes.
Selecione Canais no painel esquerdo e selecione Microsoft Teams
.
Marque a caixa de seleção para aceitar os Termos de Serviço.
Selecione Concordar.
Selecione Aplicar.
Para criar um túnel para o servidor Web local
Use o ngrok para criar um túnel para os pontos de extremidade HTTPS disponíveis publicamente do servidor Web em execução localmente. Execute o seguinte comando no ngrok:
ngrok http -host-header=localhost 3978
Dica
Se você encontrar ERR_NGROK_4018, siga as etapas fornecidas no Prompt de Comando para se inscrever e autenticar o ngrok. Em seguida, execute o ngrok http -host-header=localhost 3978 comando.
Para adicionar o ponto de extremidade de mensagens
No ngrok, copie a URL HTTPS.
Observação
A URL HTTPS em seu ngrok é seu nome de domínio totalmente qualificado. É
WebAppDomainum nome de domínio totalmente qualificado que não incluihttps://nele.Em Configurações do bot do Azure que você criou, selecione Configuração.
No ponto de extremidade de Mensagens, use a URL HTTPS disponível no ngrok e, no final da URL, adicione /api/messages.
Selecione Aplicar.
Você configurou com êxito um bot no Azure Serviço de Bot.
Atualizar o registro Azure AD aplicativo
Acesse o Portal do Azure.
Selecione Azure Active Directory.
No painel de navegação esquerdo, selecione Registros de Aplicativo.
Selecione seu bot.
Em Gerenciar, selecione Expor uma API.
Selecione Definir.
Defina o URI da ID do Aplicativo na forma de
api://your ngrok/botid-{AppID}.
A imagem a seguir mostra o nome de domínio:
Observação
Se você estiver usando um serviço de túnel, como o ngrok, atualize o valor sempre que o subdomínio ngrok for alterado.
For example: api://f631****.ngrok.io/92c11075-c629-4a1e-ab58-02b4fd4204c2, onde estáf631****.ngrok.ioo novo nome do subdomínio ngrok.Selecione Adicionar um escopo.
No painel exibido, insira como
access_as_usero nome do escopo.Definir Quem pode consentir? para
Admins and users.Para configurar os prompts de consentimento do administrador e do usuário com os valores apropriados para
access_as_usero escopo, forneça as seguintes informações nos campos:Insira
Teams can access the user’s profilecomo Administração de exibição de consentimento.Insira
Allows Teams to call the app’s web APIs as the current usercomo Administração de consentimento.Insira como
Teams can access the user profile and make requests on the user’s behalfnome de exibição de consentimento do usuário.Insira como
Enable Teams to call this app’s APIs with the same rights as the userdescrição de consentimento do usuário.
Verifique se o Estado está definido como Habilitado.
Selecione Adicionar escopo para salvar.
Observação
O nome do escopo deve corresponder ao URI da ID do Aplicativo
/access_as_usercom acrescentado no final.api://4d52****.ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user
Na seção Aplicativos cliente autorizados, identifique os aplicativos que você deseja autorizar para o aplicativo Web do seu aplicativo.
Selecione Adicionar um aplicativo cliente.
Insira a ID do cliente: para
1fec8e78-bce4-4aaf-ab1b-5451cc387264o aplicativo móvel ou da área de trabalho do Teams.
Você pode inserir a ID do Cliente:
5e3ce6c0-2b1f-4285-8d4b-75ee78787346para o aplicativo Web do Teams.
Selecione Escopos autorizados.
A imagem a seguir exibe a ID do cliente:
No painel esquerdo, selecione Permissões de API.
Observação
Os usuários precisarão consentir com essas permissões somente se o Azure AD aplicativo estiver registrado em um locatário diferente.
Selecione Adicionar uma permissão.
Selecione Microsoft Graph.
Selecione Permissões delegadas.
Adicione as seguintes permissões:
- offline_access
- Openid
- profile
- User.Read
Selecione Adicionar permissões.
No painel esquerdo, selecione Autenticação para definir um URI de redirecionamento.
Observação
Se um aplicativo não receber consentimento do administrador de TI, os usuários deverão fornecer consentimento na primeira vez que usarem um aplicativo.
Selecione Adicionar uma plataforma.
Selecione Web.
Insira o URI de redirecionamento para seu aplicativo acrescentando-se
auth-endao nome de domínio totalmente qualificado:https://your ngrok/auth-end.Habilite a concessão implícita e os fluxos híbridos selecionando as seguintes caixas de seleção:
- Tokens de ID
- Tokens de acesso
Selecione Configurar.
Configurar configurações de aplicativo e arquivos de manifesto
Navegue até appsettings.json no repositório clonado.
Abra appsettings.json no Visual Studio e atualize as seguintes informações:
- Defina
"MicrosoftAppId"como a ID do aplicativo Microsoft do bot. - Defina
"MicrosoftAppPassword"como o valor da ID do segredo do cliente do bot. - Defina
"BaseUrl"como o nome de domínio ngrok totalmente qualificado.
- Defina
Navegue até manifest.json no repositório clonado.
Abra manifest.json no Visual Studio e faça as seguintes alterações:
- Substitua todas as ocorrências pelo
<<Your_Domain_URL>>nome de domínio ngrok totalmente qualificado. - Substitua todas as ocorrências pela
<<Microsoft-App-ID>>ID do aplicativo Microsoft do bot.
- Substitua todas as ocorrências pelo
Compilar e executar o serviço
Para compilar e executar o serviço usando o Visual Studio ou a linha de comando
Abra o Visual Studio.
Navegue até o projeto > /solução de > abertura de arquivo.
Selecione o arquivo SidePanel.sln na pasta csharp .
Pressione F5 para executar o projeto.
Selecione Sim se a caixa de diálogo a seguir for exibida:
Uma página da Web é aberta com uma mensagem Seu bot está pronto!.
Adicionar Painel Lateral de Reuniões ao Teams
No repositório clonado, navegue até csharp > Painel Lateral > Manifesto.
Crie um .zip com os seguintes arquivos que estão presentes na pasta Manifesto :
manifest.json
icon-outline.png
icon-color.png
Crie uma reunião com alguns apresentadores e participantes.
Depois que a reunião for criada, vá para a página de detalhes da reunião e selecione Adicionar um aplicativo.
Na janela pop-up, selecione Gerenciar aplicativos.
Selecione Fazer o upload de um aplicativo personalizado.
Selecione Abrir para carregar o .zip arquivo criado na pasta Manifesto .
Selecione Adicionar.
A seção Gerenciar aplicativos exibe a lista de aplicativos.
Vá para a reunião do Teams.
Selecione Adicionar um aplicativo.
Na página de seleção do aplicativo, o aplicativo é exibido como Painel Lateral.
Selecione o aplicativo Painel Lateral.
Selecione Salvar.
O aplicativo está visível no Painel Lateral da reunião.
Interagir com o aplicativo no Teams
Vamos interagir com o aplicativo no Teams!
Selecione Adicionar Novo Item de Agenda para adicionar uma nova agenda à lista de agendas padrão.
Insira um novo item de agenda na lista e selecione Adicionar.
A nova agenda é adicionada à lista.
Selecione Publicar Agenda.
A nova lista de agendas é exibida no chat da reunião.
Desafio completo
Você conseguiu algo assim?
Parabéns!
Você concluiu o tutorial para começar a usar um aplicativo do Painel Lateral!
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.