Share via

Desenvolver Suplementos do Office com o Código do Visual Studio

  • Artigo

Este artigo descreve como usar o Código do Visual Studio (VS Code) para desenvolver um suplemento do Office.

Observação

Para saber mais sobre como usar o Visual Studio para criar um suplemento do Office, confira Desenvolver suplementos do Office com o Visual Studio.

Pré-requisitos

  • Node.js (a versão mais recente de LTS). Visite o siteNode.js para baixar e instalar a versão certa para seu sistema operacional.

  • A versão mais recente do Yeoman e do Yeoman gerador de Suplementos do Office. Para instalar essas ferramentas globalmente, execute o seguinte comando por meio do prompt de comando.

    npm install -g yo generator-office

    Observação

    Mesmo se você já instalou o gerador Yeoman, recomendamos atualizar seu pacote para a versão mais recente do npm.

  • Office conectado a uma assinatura Microsoft 365 (incluindo o Office na web).

    Observação

    Se você ainda não tiver o Office, poderá se qualificar para uma assinatura de desenvolvedor Microsoft 365 E5 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.

Criar um projeto de suplemento usando o gerador Yeoman

Se você estiver usando o VS Code como o seu ambiente de desenvolvimento integrado (IDE), crie o projeto do Suplemento do Office com o Gerador Yeoman para Suplementos do Office. O gerador Yeoman cria um projeto Node.js que pode ser gerenciado com o VS Code ou qualquer outro editor.

Para criar um Suplemento do Office com o gerador Yeoman, siga as instruções eminício rápido em 5 minutos que corresponda ao tipo de suplemento que você deseja criar.

Desenvolver o suplemento usando o VS Code

Quando o gerador Yeoman terminar de criar o projeto do suplemento, abra a pasta raiz do projeto com o VS Code.

Dica

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

O gerador Yeoman cria um suplemento básico com funcionalidade limitada. Você pode personalizar o suplemento editando o manifesto, HTML, JavaScript ou TypeScript e arquivos CSS no VS Code. Para obter uma descrição de alto nível sobre a estrutura e os arquivos do projeto no projeto de suplemento que o gerador de Yeoman cria, confira o tópico diretrizes do gerador Yeoman dentro em Início rápido em 5 minutos que corresponda ao tipo de suplemento que você criou.

Testar e depurar o suplemento

Os métodos para testar, depurar e solucionar problemas de Suplementos do Office variam de acordo com a plataforma. Para mais informações, confira Testar e depurar Suplementos do Office.

Publique o suplemento

Um Suplemento do Office é formado por um aplicativo Web e um arquivo de manifesto. O aplicativo Web define a interface do usuário e a funcionalidade do suplemento, enquanto o manifesto especifica o local do aplicativo Web e define as configurações e os recursos do suplemento.

Enquanto estiver desenvolvendo o suplemento, você poderá executá-lo em seu servidor Web local (localhost), mas quando estiver pronto para publicá-lo para que outros usuários acessem o, será necessário implantar o aplicativo Web em um servidor Web ou serviço de hospedagem na Web (por exemplo, Microsoft Azure) e atualizar o manifesto para especificar a URL do aplicativo implantado.

Quando o suplemento estiver funcionando conforme desejado e você estiver pronto para publicá-lo para que outros usuários acessem, conclua as etapas a seguir.

  1. Na linha de comando, no diretório raiz do projeto de suplemento, execute o comando a seguir para preparar todos os arquivos para implantação de produção.

    npm run build

    Quando a compilação for concluída, a pasta distno diretório raiz do projeto de suplemento incluirá os arquivos que você implantará nas etapas subsequentes.

  2. Carregue o conteúdo da pasta dist para o servidor Web que hospedará o suplemento. Você pode usar qualquer tipo de servidor Web ou serviço de hospedagem na Web para hospedar o suplemento.

  3. No VS Code, abra o arquivo de manifesto do suplemento localizado na pasta raiz do projeto (manifest.xml). Substitua todas as ocorrências de https://localhost:3000 pela URL do aplicativo Web implementado no servidor Web na etapa anterior.

  4. Escolha o método que deseja usar para implantar seu suplemento do Office e siga as instruções para publicar o arquivo de manifesto.

Confira também