Criar aplicativos de produtividade usando o Microsoft Graph Toolkit

O Microsoft Graph Toolkit é uma coleção de componentes Web e provedores de autenticação para conectar aplicativos a dados e inteligência do Microsoft 365. Este tutorial mostra como criar um aplicativo Web para monitorar seus eventos de calendário, tarefas de tarefas e arquivos usando componentes do Microsoft Graph Toolkit e um provedor MSAL2.

Como o exemplo funciona?

Este exemplo cria um aplicativo Web que consome o provedor MSAL2 do Microsoft Graph Toolkit para habilitar a autenticação por meio de Microsoft Entra ID e usa componentes da interface do usuário para renderizar eventos de calendário, tarefas a serem executadas e arquivos que parecerão experiências nativas da Microsoft.

Captura de tela mostrando o exemplo do One Productivity Hub

Pré-requisitos

Você precisa de um locatário do desenvolvedor do Microsoft 365. Você pode se qualificar para um por meio do Programa de Desenvolvedor do Microsoft 365; para obter detalhes, confira as perguntas frequentes. Como alternativa, você pode se inscrever para uma avaliação gratuita de 1 mês ou comprar um plano do Microsoft 365.
Instale Visual Studio Code.
Instale Visual Studio Code Live Server para testar seu aplicativo Web.

Registrar o aplicativo no Microsoft Entra ID

40 minutos restantes

Registre o aplicativo no Microsoft Entra ID para habilitar a autenticação do usuário.

Acesse o centro de administração do Microsoft Entra e entre com seu locatário do Programa de Desenvolvedores do Microsoft 365.
Expanda o menu > Identidade expanda Aplicativos> selecione Registros de aplicativo>Novo registro.
Conclua o formulário Registrar um aplicativo usando os valores a seguir e selecione Registrar.
- Nome: Uma demonstração do Hub de Produtividade
- Tipos de conta com suporte: contas em qualquer diretório organizacional (Qualquer diretório Microsoft Entra – Multilocatário) e contas pessoais da Microsoft (por exemplo, Skype, Xbox)
- URI de redirecionamento: selecione SPA (aplicativo de página única) como um tipo de URI de redirecionamento e coloque http://localhost:3000/index.html como um URI de redirecionamento para testar localmente.
Quando o registro do aplicativo for concluído, acesse a guia Visão geral na página do aplicativo e copie a ID do Aplicativo (cliente). Você precisa dessa ID para a etapa a seguir.

Criar o aplicativo

30 minutos restantes

Nesta etapa, você criará um aplicativo Web e habilitará a autenticação com o provedor MSAL2 do Microsoft Graph Toolkit.

Criar um aplicativo Web

Crie uma nova pasta e nomeie-a oneProductivityHub. Clique com o botão direito do mouse e abra a pasta com Visual Studio Code.
Crie um novo arquivo na pasta OneProductivityHub e nomeie-o index.html.
Selecione CTRL + SPACE e escolha exemplo de HTML nas opções.

Para habilitar a autenticação com o Microsoft Graph Toolkit por meio de uma CDN, adicione a seguinte marca de script em index.html dentro da <body></body> seção:

<script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
</script>

Inicializar o provedor MSAL2

Em index.html, adicione o provedor MSAL2 na seção da <body></body> seguinte maneira:
```
<mgt-msal2-provider
    client-id="<YOUR_CLIENT_ID>"
    scopes="User.Read,
    User.ReadBasic.All,
    Calendars.Read,
    Files.Read,
    Files.Read.All,
    Sites.Read.All,
    Tasks.Read,
    Tasks.ReadWrite,
    People.Read">
</mgt-msal2-provider>
```
Importante

Os seguintes escopos definidos no provedor serão mostrados como uma lista de permissões necessárias para solicitar o consentimento do usuário durante o processo de autenticação: User.Read, User.ReadBasic.All, Calendars.Read, Files.Read, Files.Read.All, Sites.Read.All, Tasks.Read, Tasks.ReadWrite, People.Read.
Substitua <YOUR_CLIENT_ID> pela ID do cliente copiada do aplicativo Microsoft Entra.

Verifique se a versão final do index.html é semelhante ao exemplo a seguir:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>One Productivity Hub</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <script src='main.js'></script>
</head>
<body>
  <script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
  </script>
  <mgt-msal2-provider
      client-id="<YOUR_CLIENT_ID>"
      scopes="User.Read,
      User.ReadBasic.All,
      Calendars.Read,
      Files.Read,
      Files.Read.All,
      Sites.Read.All,
      Tasks.Read
      Tasks.ReadWrite,
      People.Read">
  </mgt-msal2-provider>
</body>
</html>

Projetar o aplicativo

20 minutos restantes

Nesta etapa, você projetará seu aplicativo Web usando componentes do Microsoft Graph Toolkit e o estilizará com CSS.

Em index.html na <body></body>seção, adicione o código a seguir no provedor.

<div>
  <mgt-login />
</div>

Criar um título e uma coluna para o restante dos componentes

Para fazer seu aplicativo parecer estruturado, crie um título e uma coluna para cada recurso que será adicionado no One Productivity Hub. Em index.html em <body></body>, adicione o seguinte código HTML dentro do div, no componente de logon.

<div class="features">

  <div class="header"><div class="title">
    <h2>One Productivity Hub</h2>
    <div class="row">
      <div class="column"><h3>Calendar events</h3></div>
      <div class="column"><h3>To-do tasks</h3></div>
      <div class="column"><h3>Files</h3></div>
    </div>
  </div></div>

  <div class="row" id="content">
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
  </div>

</div>

Componente Agenda

No div marcado com class="row", adicione o componente Agenda dentro da primeira coluna div.

<mgt-agenda />

Componente to-do

No div marcado com class="row", adicione o componente To-do dentro da segunda coluna div.

<mgt-todo />

Componente FileList

No div marcado com class="row", adicione o componente Lista de arquivos dentro da terceira coluna div.

<mgt-file-list />

Estilizar seu aplicativo Web com o CSS

Crie um arquivo index.css em seu projeto e adicione o código CSS a seguir.

body,
#root>div {
    background-color: #F3F2F1;
}
.features {
    min-height: 80vh;
    margin: 20px;
    background-color: #FFF;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header {
    display: flex;
    background-color: #f0f0f0;
}
.title {
    margin-top: 20px;
    margin-left: 10px;
    width: 100%;
}
.title h2 {
    font-size: 24px;
    padding-left: 5px;
    display: inline;
    font-weight: 600;
}
.title h3 {
    float: left;
    width: 32%;
    background:transparent;
    font-size: 16px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    color: #8A8886;
    font-weight: 600;
}
mgt-login {
    margin-left: 20px;
    --avatar-size: 60px;
    --font-family: 'Segoe UI';
    --font-size: 20px;
    --font-weight: 700;
    --color: black;
    --text-transform: none;
    --line2-font-size: 14px;
    --line2-font-weight: 400;
    --line2-color: #8A8886;
    --line2-text-transform: none;
}
#content, html, body {
    height: 98%;
  }
#mgt-col {
  float: left;
  width: 32%;
  background:transparent;
  height:500px;
  overflow: hidden;
  padding: 5px;
  margin-top: 5px;
}
#mgt-col:hover {
  overflow-y: auto;
}

Em index.html no <head></head>, defina o link href de planilha de estilos como index.css.
```
<link rel='stylesheet' type='text/css' media='screen' href='index.css'>
```

Verifique se a versão final do index.html é semelhante à seguinte.

<!DOCTYPE html>
  <html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>One Productivity Hub</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='index.css'>
    <script src='main.js'></script>
  </head>
  <body>
    <script type="module">
      import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
      registerMgtMsal2Provider();
      registerMgtComponents();
    </script>
    <mgt-msal2-provider
        client-id="<YOUR_CLIENT_ID>"
        scopes="User.Read,
        User.ReadBasic.All,
        Calendars.Read,
        Files.Read,
        Files.Read.All,
        Sites.Read.All,
        Tasks.Read,
        Tasks.ReadWrite,
        People.Read">
    </mgt-msal2-provider>
    <div>
      <mgt-login />
    </div>
    <div class="features">
        <div class="header">
            <div class="title">
                <h2>One Productivity Hub</h2>
                <div class="row">
                    <div class="column"><h3>Calendar events</h3></div>
                    <div class="column"><h3>To-do tasks</h3></div>
                    <div class="column"><h3>Files</h3></div>
                </div>
            </div>
        </div>
        <div class="row" id="content">
            <div class="column" id="mgt-col"><mgt-agenda /></div>
            <div class="column" id="mgt-col"><mgt-todo /></div>
            <div class="column" id="mgt-col"><mgt-file-list /></div>
        </div>
    </div>
  </body>
</html>

Executar o aplicativo

10 minutos restantes

Nesta etapa, você executará seu aplicativo de exemplo no navegador usando o Live Server.

Selecione CTRL + SHIFT + P para abrir o painel no Visual Studio Code, digite Preferences no painel e selecione Preferences: Open Workspace Settings (JSON) entre as opções.

settings.json No arquivo aberto, adicione o código a seguir.

{
"liveServer.settings.host": "localhost",
"liveServer.settings.port": 3000
}

Selecione CTRL + SHIFT + P para abrir o painel no Visual Studio Code, digite Live Server no painel e selecione Live Server: Open with Live Server entre as opções. O Live Server executará o aplicativo em seu navegador.
Selecione Entrar e use seu locatário do Programa de Desenvolvedor do Microsoft 365 para entrar.
Consentir com as permissões necessárias para usar os recursos do aplicativo, como exibir eventos de calendário, tarefas a fazer e pastas de arquivo.
Para garantir que o aplicativo One Productivity Hub funcione corretamente, adicione alguns eventos de calendário, tarefas a fazer e pastas de arquivo no locatário do Desenvolvedor do Microsoft 365.

Resumo

100% concluído!

Você criou com êxito seu aplicativo de exemplo do One Productivity Hub usando o Microsoft Graph Toolkit. Neste tutorial, você criou um aplicativo Web e consumiu o provedor msal2 do Microsoft Graph Toolkit e os componentes da interface do usuário.

Se você estiver procurando maneiras de aprimorar seu aplicativo do One Productivity Hub, confira a lista de componentes da Web disponíveis no Microsoft Graph Toolkit e inclua componentes adicionais em seu aplicativo.

Próximas etapas

Para saber mais sobre o Microsoft Graph Toolkit, confira a visão geral do Microsoft Graph Toolkit e o caminho de aprendizagem Desenvolver aplicativos com o Microsoft Graph Toolkit .

Partilhar via

Criar aplicativos de produtividade usando o Microsoft Graph Toolkit

Como o exemplo funciona?

Pré-requisitos

Registrar o aplicativo no Microsoft Entra ID

Criar o aplicativo

Criar um aplicativo Web

Inicializar o provedor MSAL2

Projetar o aplicativo

Criar um título e uma coluna para o restante dos componentes

Componente Agenda

Componente to-do

Componente FileList

Estilizar seu aplicativo Web com o CSS

Executar o aplicativo

Resumo

Próximas etapas

Comentários

Partilhar via

Criar aplicativos de produtividade usando o Microsoft Graph Toolkit

Como o exemplo funciona?

Pré-requisitos

Registrar o aplicativo no Microsoft Entra ID

Criar o aplicativo

Criar um aplicativo Web

Inicializar o provedor MSAL2

Projetar o aplicativo

Inicializar o componente Logon

Criar um título e uma coluna para o restante dos componentes

Componente Agenda

Componente to-do

Componente FileList

Estilizar seu aplicativo Web com o CSS

Executar o aplicativo

Resumo

Próximas etapas

Comentários