Exercício – Mostrar dados do Microsoft 365

  • 3 minutos

Neste exercício, você praticará o uso de Kit de ferramentas do Microsoft Graph em seu aplicativo e a exibição de dados do Microsoft 365.

Antes de começar

Antes de fazer este exercício, conclua o primeiro exercício neste módulo.

Adicione o componente Agenda em seu aplicativo

Você já concluiu as etapas necessárias para lidar com a autenticação no exercício anterior. Agora, você mostrará eventos de calendário futuros no aplicativo para um usuário conectado. Adicione o componente Agenda no corpo do ficheiro index.html :

<mgt-agenda></mgt-agenda>

A versão final do arquivo index.html será semelhante à seguinte:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-agenda></mgt-agenda>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-agenda></mgt-agenda>
  </body>
</html>

Teste seu aplicativo em um navegador

Se tiver parado o Proxy de Programador após o último exercício, inicie-o novamente. Num terminal, execute o seguinte comando:

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

Mantenha o terminal aberto e a executar o Proxy Dev enquanto testa a sua aplicação.

Siga estas etapas para testar seu aplicativo em um navegador:

  1. Se for a primeira vez que você usa o locatário do desenvolvedor do Microsoft 365, talvez você não tenha nenhum evento no calendário da sua conta de locatário do desenvolvedor do Microsoft 365. Antes de começar a testar seu aplicativo, visite https://outlook.office.com/calendare entre com sua conta de locatário do desenvolvedor do Microsoft 365. Adicione eventos de exemplo para os próximos dias em seu calendário.

  2. No Visual Studio Code, execute o Live Server para testar a sua aplicação. Abrir o navegador e acesse to http://localhost:3000.

  3. Certifique-se de entrar com sua conta de locatário do desenvolvedor do Microsoft 365. Consenta as permissões de calendário necessárias e selecione Aceitar.

  4. Seu aplicativo mostrará seus próximos eventos de calendário:

    O resultado final no Microsoft Graph Toolkit.

  1. No Visual Studio Code, execute o Live Server para testar a sua aplicação. Abrir o navegador e acesse to http://localhost:3000.

  2. No browser, inicie sessão na sua aplicação. O Proxy de Programador irá simular o processo de autenticação.

  3. Seu aplicativo mostrará seus próximos eventos de calendário:

    O resultado final no Microsoft Graph Toolkit.

  4. Pare o Proxy de Programador premindo CTRL+C no terminal.

Observação

Agradecemos o seu feedback sobre a sua experiência com a utilização do Proxy Dev para concluir este exercício. Dedique um momento para concluir este breve inquérito.