• 17/02/2021
• 2 minutos para o fim da leitura
• • o

Neste exercício, você criará uma solução de add-in do Office usando o Express.In this exercise you will create an Office Add-in solution using Express. A solução consistirá em duas partes.The solution will consist of two parts.

• O complemento, implementado como arquivos HTML e JavaScript estáticos.The add-in, implemented as static HTML and JavaScript files.
• Um Node.js/Express que serve o complemento e implementa uma API Web para recuperar dados para o complemento.A Node.js/Express server that serves the add-in and implements a web API to retrieve data for the add-in.

Criar o servidorCreate the server

1. Abra sua CLI (interface de linha de comando), navegue até um diretório onde você deseja criar seu projeto e execute o seguinte comando para gerar um package.jsno arquivo.Open your command-line interface (CLI), navigate to a directory where you want to create your project, and run the following command to generate a package.json file.

   yarn init
   

   Insira valores para os prompts conforme apropriado.Enter values for the prompts as appropriate. Se você não tiver certeza, os valores padrão serão bons.If you're unsure, the default values are fine.

2. Execute os seguintes comandos para instalar dependências.Run the following commands to install dependencies.

   yarn add express@4.17.1 express-promise-router@4.0.1 dotenv@8.2.0 node-fetch@2.6.1 jsonwebtoken@8.5.1@
   yarn add jwks-rsa@1.11.0 @azure/msal-node@1.0.0-beta.1 @microsoft/microsoft-graph-client@2.1.1
   yarn add date-fns@2.16.1 date-fns-tz@1.0.12 isomorphic-fetch@3.0.0 windows-iana@4.2.1
   yarn add -D typescript@4.0.5 ts-node@9.0.0 nodemon@2.0.6 @types/node@14.14.7 @types/express@4.17.9
   yarn add -D @types/node-fetch@2.5.7 @types/jsonwebtoken@8.5.0 @types/microsoft-graph@1.26.0
   yarn add -D @types/office-js@1.0.147 @types/jquery@3.5.4 @types/isomorphic-fetch@0.0.35
   

3. Execute o seguinte comando para gerar um tsconfig.jsno arquivo.Run the following command to generate a tsconfig.json file.

   tsc --init
   

4. Abra ./tsconfig.jsem um editor de texto e faça as seguintes alterações.Open ./tsconfig.json in a text editor and make the following changes.

   • Altere target o valor para es6 .Change the target value to es6.
   • Uncomment the outDir value and set it to ./dist .Uncomment the outDir value and set it to ./dist.
   • Uncomment the rootDir value and set it to ./src .Uncomment the rootDir value and set it to ./src.

5. Abra ./package.jse adicione a propriedade a seguir ao JSON.Open ./package.json and add the following property to the JSON.

   "scripts": {
     "start": "nodemon ./src/server.ts",
     "build": "tsc --project ./"
   },
   

6. Execute o seguinte comando para gerar e instalar certificados de desenvolvimento para o seu complemento.Run the following command to generate and install development certificates for your add-in.

   npx office-addin-dev-certs install
   

   Se for solicitado a confirmar, confirme as ações.If prompted for confirmation, confirm the actions. Depois que o comando é concluído, você verá uma saída semelhante à seguinte.Once the command completes, you will see output similar to the following.

   You now have trusted access to https://localhost.
   Certificate: <path>\localhost.crt
   Key: <path>\localhost.key
   

7. Crie um novo arquivo chamado .env na raiz do projeto e adicione o código a seguir.Create a new file named .env in the root of your project and add the following code.

   Substitua pelo caminho para localhost.crt e pelo caminho PATH_TO_LOCALHOST.CRT PATH_TO_LOCALHOST.KEY para localhost.key output pelo comando anterior.Replace PATH_TO_LOCALHOST.CRT with the path to localhost.crt and PATH_TO_LOCALHOST.KEY with the path to localhost.key output by the previous command.

8. Crie um novo diretório na raiz do seu projeto chamado src.Create a new directory in the root of your project named src.

9. Crie dois diretórios no diretório ./src: addin e api.Create two directories in the ./src directory: addin and api.

10. Crie um novo arquivo chamado auth.ts no diretório ./src/api e adicione o código a seguir.Create a new file named auth.ts in the ./src/api directory and add the following code.

    import Router from 'express-promise-router';
    
    const authRouter = Router();
    
    // TODO: Implement this router
    
    export default authRouter;
    

11. Crie um novo arquivo chamado graph.ts no diretório ./src/api e adicione o código a seguir.Create a new file named graph.ts in the ./src/api directory and add the following code.

    import Router from 'express-promise-router';
    
    const graphRouter = Router();
    
    // TODO: Implement this router
    
    export default graphRouter;
    

12. Crie um novo arquivo chamado server.ts no diretório ./src e adicione o código a seguir.Create a new file named server.ts in the ./src directory and add the following code.

Criar o suplementoCreate the add-in

1. Crie um novo arquivo taskpane.html no diretório ./src/addin e adicione o código a seguir.Create a new file named taskpane.html in the ./src/addin directory and add the following code.

2. Crie um novo arquivo denominado taskpane.css no diretório ./src/addin e adicione o código a seguir.Create a new file named taskpane.css in the ./src/addin directory and add the following code.

3. Crie um novo arquivo taskpane.js no diretório ./src/addin e adicione o código a seguir.Create a new file named taskpane.js in the ./src/addin directory and add the following code.

   // TEMPORARY CODE TO VERIFY ADD-IN LOADS
   'use strict';
   
   Office.onReady(info => {
     if (info.host === Office.HostType.Excel) {
       $(function() {
         $('p').text('Hello World!!');
       });
     }
   });
   

4. Crie um novo diretório no diretório .src/addin denominado ativos.Create a new directory in the .src/addin directory named assets.

5. Adicione três arquivos PNG neste diretório de acordo com a tabela a seguir.Add three PNG files in this directory according to the following table.

   Nome do arquivoFile name	Tamanho em pixelsSize in pixels
   icon-80.pngicon-80.png	80x8080x80
   icon-32.pngicon-32.png	32x3232x32
   icon-16.pngicon-16.png	16 x 1616x16

   Observação

   Você pode usar qualquer imagem que quiser para esta etapa.You can use any image you want for this step. Você também pode baixar as imagens usadas neste exemplo diretamente do GitHub.You can also download the images used in this sample directly from GitHub.

6. Crie um novo diretório na raiz do manifesto nomeado do projeto.Create a new directory in the root of the project named manifest.

7. Crie um novo arquivo manifest.xml na pasta ./manifest e adicione o código a seguir.Create a new file named manifest.xml in the ./manifest folder and add the following code. Substitua NEW_GUID_HERE por um novo GUID, como b4fa03b8-1eb6-4e8b-a380-e0476be9e019 .Replace NEW_GUID_HERE with a new GUID, like b4fa03b8-1eb6-4e8b-a380-e0476be9e019.

Side load the add-in in ExcelSide-load the add-in in Excel

1. Inicie o servidor executando o seguinte comando.Start the server by running the following command.

   yarn start
   

2. Abra seu navegador e navegue https://localhost:3000/taskpane.html até.Open your browser and browse to https://localhost:3000/taskpane.html. Você verá uma Not loaded mensagem.You should see a Not loaded message.

3. No navegador, vá para o Office.com e entre.In your browser, go to Office.com and sign in. Selecione Criar na barra de ferramentas à esquerda e selecione Planilha.Select Create in the left-hand toolbar, then select Spreadsheet.

   

4. Selecione a guia Inserir e, em seguida, selecione Os Complementos do Office.Select the Insert tab, then select Office Add-ins.

5. Selecione Carregar Meu Complemento e, em seguida, Procurar.Select Upload My Add-in, then select Browse. Carregue seu arquivo ./manifest/manifest.xml.Upload your ./manifest/manifest.xml file.

6. Selecione o botão Importar Calendário na guia Página Início para abrir o taskpane.Select the Import Calendar button on the Home tab to open the taskpane.

   

7. Depois que o taskpane abrir, você deverá ver uma Hello World! mensagem.After the taskpane opens, you should see a Hello World! message.