Exercício: Noções básicas sobre suplementos de email

  • 7 minutos

Neste exercício, você aprenderá a criar seu primeiro projeto de suplemento do Outlook e carregá-lo no cliente Outlook.

Pré-requisitos

Desenvolver suplementos do Outlook requer o Outlook 2016 (ou posterior) ou Outlook na Web.

Você usará o Node.js para criar o suplemento personalizado do Outlook neste módulo. Os exercícios neste módulo presumem que você tenha as seguintes ferramentas instaladas em sua estação de trabalho de desenvolvedor.

Importante

Na maioria dos casos, instalar a versão mais recente das ferramentas a seguir é a melhor opção. As versões listadas aqui foram usadas quando este módulo foi publicado e testado pela última vez.

Você deve ter as versões mínimas desses pré-requisitos instaladas em sua estação de trabalho.

Para este exercício, você também precisará de uma conta GitHub.

Configurar

O suplemento que você criará neste tutorial lerá gists da conta do GitHub do usuário e adicionará a essência selecionada ao corpo de uma mensagem. Conclua as etapas a seguir para criar duas gists novas que você pode usar para testar o suplemento que você vai criar.

  1. Entre no GitHub.

  2. Crie uma nova gist.

    • No campodescrição do gist... , insira a Markdown Olá Mundo.

    • No campo nome do arquivo como extensão... campo, insira test.md.

    • Adicione a redução a seguir na caixa de texto multilinha:

      # Hello World

This is content converted from Markdown!

Here's a JSON sample:

  ```json
  {
    "foo": "bar"
  }
  ```

    • Selecione o botão criar gist público.

  3. Criar outro novo gist.

    • No campodescrição do gist... , insira Olá Mundo.

    • No campo nome do arquivo como extensão... campo, insira test.html.

    • Adicione a redução a seguir na caixa de texto multilinha:

      <html>
  <head>
    <style>
    h1 {
      font-family: Calibri;
    }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a test</p>
  </body>
</html>

    • Selecione o botão criar gist público.

Criar um projeto de um suplemento do Outlook

  1. Execute o seguinte comando para criar um projeto de suplemento usando o gerador Yeoman:

    yo office

    Observação

    Ao executar o comando yo office, você receberá informações sobre as políticas de coleta de dados de Yeoman e as ferramentas da CLI do suplemento do Office. Use as informações fornecidas para responder às solicitações como achar melhor.

    Quando solicitado, forneça as seguintes informações para criar seu projeto de suplemento:

    • Escolha um tipo de projeto: projeto do Painel de Tarefas do Suplemento do Office
    • Escolha um tipo de script: JavaScript
    • Qual será o nome do suplemento? Git the gist
    • Você gostaria de proporcionar suporte para qual aplicativo cliente do Office? Outlook

    Captura de tela dos prompts e respostas do gerador Yeoman.

    Depois de concluir o assistente, altere para a pasta de projeto criada pelo gerador (Meu Suplemento do Office) e instale os módulos npm executando a instalação do npm.

    Dica

    Você pode ignorar as orientações da próximas etapas fornecidas pelo gerador Yeoman após a criação do projeto de suplemento. O restante desta unidade inclui todas as etapas que você precisará seguir.

  2. Navegue até o diretório raiz do projeto.

    cd "Git the gist"

  3. Este suplemento usará as seguintes bibliotecas:

    • Biblioteca Showdown para converter o Markdown para HTML
    • Biblioteca URI.js para criar URLs relativos.
    • Biblioteca jquery para simplificar as interações com o DOM.

    Para instalar essas ferramentas para o seu projeto, execute o seguinte comando no diretório raiz do projeto.

    npm install showdown urijs jquery --SE

  4. Abra o projeto no VS Code ou no seu editor de código preferido.

    Dica

    No Windows, você pode navegar até o diretório raiz do projeto por meio da linha de comando e, em seguida, inserir o código . para abrir essa pasta no VS Code. No macOS, você precisará adicionar o comando de código ao caminho antes de poder usá-lo para abrir a pasta do projeto no VS Code.

Atualizar o manifesto

O manifesto de um suplemento influencia a forma como ele aparece no Outlook. Ele define a maneira como o suplemento aparece na lista de suplementos e os botões que aparecem na faixa de opções, além de definir as URLs para os arquivos HTML e JavaScript usados pelo suplemento.

Especifique as informações básicas

Faça as seguintes atualizações no arquivomanifest.xmlpara especificar algumas informações básicas sobre o suplemento:

  1. Encontre o elemento ProviderName e substitua o valor padrão pelo nome da sua empresa.

    <ProviderName>Contoso</ProviderName>

  2. Localize o elementoDescription, substitua o valor padrão com uma descrição do suplemento e salve o arquivo.

    <Description DefaultValue="Allows users to access their GitHub gists."/>

Testar o suplemento gerado

Antes de prosseguir, vamos testar o suplemento básico que criou o gerador para confirmar que o projeto está configurado corretamente.

Observação

Os Suplementos do Office devem usar HTTPS, e não HTTP, mesmo durante o desenvolvimento. Se for solicitado a instalação de um certificado após executar um dos seguintes comandos, aceite a solicitação para instalar o certificado que o gerador do Yeoman fornecer. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

  1. Execute o seguinte comando no diretório raiz do seu projeto. Ao executar esse comando, o servidor Web local será iniciado e seu complemento será sideload.

    npm start

  2. No Outlook, abra uma mensagem existente e selecione o botão Mostrar Painel de Tarefas.

  3. Quando solicitado com a caixa de diálogo Parar na Carga do Modo de Exibição da Web, selecione OK.

    Observação

    Se você selecionar Cancelar, a caixa de diálogo não será mostrada novamente enquanto esta instância do suplemento estiver em execução. No entanto, se você reiniciar o suplemento, você verá a caixa de diálogo novamente.

Se tudo tiver sido configurado corretamente, o painel de tarefas será aberto e exibirá a página de boas-vindas do suplemento.

Captura de tela do botão e do painel de tarefas adicionados pelo exemplo.

Resumo

Neste exercício, você aprendeu a criar seu primeiro projeto de suplemento do Outlook e carregá-lo no cliente Outlook.

Teste o seu conhecimento

1.

Quais são os seguintes tipos de suplementos de email com suporte no Outlook?

2.

Quais das seguintes opções são as duas opções principais para criar novos projetos de suplemento?