Crie o seu primeiro suplemento do painel de tarefas do PowerPoint

Neste artigo, você passará pelo processo de criação de um suplemento do painel de tarefas do PowerPoint.

Pré-requisitos

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

• 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 ainda não tiver o Office, poderá qualificar-se para uma subscrição de programador Microsoft 365 E5 através do Programa para Programadores do Microsoft 365. Para obter detalhes, consulte as FAQ. Em alternativa, pode inscrever-se numa avaliação gratuita de um mês ou comprar um plano do Microsoft 365.

Criar o projeto do suplemento

Decida o tipo de manifesto que pretende utilizar, seja o manifesto unificado do Microsoft 365 ou o manifesto apenas do suplemento. Para saber mais sobre os mesmos, consulte o manifesto de Suplementos do Office.

yo office

yo office

Depois que você concluir o assistente, o gerador criará o projeto e instalará os componentes Node de suporte.

Explore o projeto

O projeto de suplemento que você criou com o gerador Yeoman contém um código de exemplo para um suplemento básico do painel de tarefas. Se você quiser examinar os componentes do seu projeto de suplemento, abra o projeto no seu editor de código e revise os arquivos listados abaixo. Quando estiver pronto para experimentar o suplemento, prossiga para a próxima seção.

• O ficheiro ./manifest.json ou manifest.xml no diretório de raiz do projeto define as definições e capacidades do suplemento.
• O arquivo ./src/taskpane/taskpane.html contém a marcação HTML do painel de tarefas.
• O arquivo ./src/taskpane/taskpane.css contém o CSS que é aplicado ao conteúdo no painel de tarefas.
• O ficheiro ./src/taskpane/taskpane.ts contém o código da API JavaScript do Office que facilita a interação entre o painel de tarefas e a aplicação cliente do Office.

Experimente

1. Navegue até a pasta raiz do projeto.

   cd "My Office Add-in"
   

2. Conclua as etapas a seguir para iniciar o servidor Web local e fazer o sideload do seu suplemento.

   Observação

   • Os Suplementos do Office devem utilizar HTTPS e não HTTP, mesmo quando estiver a desenvolver. Se lhe for pedido para instalar um certificado depois de executar um dos seguintes comandos, aceite o pedido para instalar o certificado que o gerador Yeoman fornece. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta for a primeira vez que desenvolve um Suplemento do Office no seu computador, poderá ser-lhe pedido na linha de comandos para conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback localhost para o Microsoft Edge WebView?"). Quando lhe for pedido, introduza Y para permitir a isenção. Tenha em atenção que precisará de privilégios de administrador para permitir a isenção. Uma vez permitido, não lhe deverá ser pedida uma isenção quando carregar os Suplementos do Office no futuro (a menos que remova a isenção do seu computador). Para saber mais, consulte "Não é possível abrir este suplemento a partir do localhost" ao carregar um Suplemento do Office ou ao utilizar o Fiddler.

     

   • Quando utiliza o gerador Yeoman pela primeira vez para desenvolver um Suplemento do Office, o seu browser predefinido abre uma janela onde lhe será pedido para iniciar sessão na sua conta do Microsoft 365. Se não for apresentada uma janela de início de sessão e encontrar um erro de tempo limite de sideload ou início de sessão, execute atk auth login m365.

   Dica

   Se você estiver testando o seu suplemento no Mac, execute o seguinte comando antes de continuar. O servidor Web local é iniciado quando este comando é executado.

   npm run dev-server
   

   • Para testar seu suplemento no PowerPoint, execute o seguinte comando no diretório raiz do seu projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o PowerPoint com o suplemento carregado.

     npm start
     

   • Para testar seu suplemento no PowerPoint em um navegador, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua "{url}" pelo URL de um documento do PowerPoint no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

     Observação

     Se estiver a desenvolver num Mac, coloque as {url} aspas simples. Não o faça no Windows.

     npm run start -- web --document {url}
     

     Eis alguns exemplos.

     • npm run start -- web --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start -- web --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start -- web --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Se o seu suplemento não carregar em sideload no documento, carregue-o manualmente ao seguir as instruções em Suplementos de sideload manualmente para Office na Web.

3. No PowerPoint, insira um novo diapositivo em branco, selecione o separador Base e, em seguida, selecione o botão Mostrar Painel de Tarefas no friso para abrir o painel de tarefas do suplemento.

   

4. Na parte inferior do painel de tarefas, escolha o link Executar para inserir o texto "Olá, Mundo" no slide atual.

   

5. Quando quiser parar o servidor Web local e desinstalar o suplemento, siga as instruções aplicáveis:

   • Para parar o servidor, execute o seguinte comando. Se tiver utilizado npm start, o seguinte comando também desinstala o suplemento.

     npm stop
     

   • Se tiver carregado manualmente o suplemento em sideload, consulte Remover um suplemento sideloaded.

Próximas etapas

Parabéns, você criou com êxito um suplemento do painel de tarefas do PowerPoint! Em seguida, saiba mais sobre os recursos de um suplemento do PowerPoint e crie um suplemento mais complexo seguindo as etapas deste tutorial de suplemento do PowerPoint.

Solução de problemas

• Certifique-se de que o seu ambiente está pronto para o desenvolvimento do Office ao seguir as instruções em Configurar o seu ambiente de desenvolvimento.

• O passo automático npm install que o Yo Office executa pode falhar. Se vir erros ao tentar executar npm start, navegue para a pasta do projeto recentemente criada numa linha de comandos e execute npm installmanualmente . Para obter mais informações sobre o Yo Office, consulte Criar projetos de Suplementos do Office com o Yeoman Generator.

• Poderá ver avisos gerados ao executar npm install para o gerador Yeoman ou para o projeto. Na maioria dos casos, pode ignorar estes avisos com segurança. Por vezes, as dependências são preteridas e as respetivas substituições não são suportadas por outros pacotes dos quais o projeto depende. Se quiser resolve estes avisos, utilize a npm-check-updates ferramenta .

  • Na linha de comandos no diretório do projeto de raiz, execute npm i -g npm-check-updates. Esta ação instala a ferramenta globalmente.
  • Execute ncu -u. Isto fornece um relatório de todos os pacotes e de que versões serão atualizados.
  • Execute npm install para atualizar todos os pacotes.

  Para obter mais informações sobre avisos ao executar npm installo , consulte Avisos e dependências no Node.js e npm world.

• Se não vir o botão de suplemento no friso (por exemplo, Mostrar Painel de Tarefas), selecione o botão Suplementos no separador dofriso Base e, em seguida, selecione o suplemento de teste.

Exemplos de código

• Suplemento "Hello world" do PowerPoint: saiba como criar um suplemento do Office simples com apenas um manifesto, uma página Web HTML e um logótipo.

Confira também

• Visão geral da plataforma Suplementos do Office
• Desenvolver Suplementos do Office
• Usando o Visual Studio Code para publicar