En este ejercicio creará una solución de complemento de Office con Express.In this exercise you will create an Office Add-in solution using Express. La solución constará de dos partes.The solution will consist of two parts.

  • El complemento, implementado como archivos HTML y JavaScript estáticos.The add-in, implemented as static HTML and JavaScript files.
  • Un Node.js/Express que sirve el complemento e implementa una API web para recuperar datos del complemento.A Node.js/Express server that serves the add-in and implements a web API to retrieve data for the add-in.

Crear el servidorCreate the server

  1. Abre la interfaz de línea de comandos (CLI), navega a un directorio donde quieras crear el proyecto y ejecuta el siguiente comando para generar una package.jsen el archivo.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
    

    Escriba los valores de los mensajes según corresponda.Enter values for the prompts as appropriate. Si no está seguro, los valores predeterminados están bien.If you're unsure, the default values are fine.

  2. Ejecute los siguientes comandos para instalar dependencias.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. Ejecute el siguiente comando para generar una tsconfig.jsen el archivo.Run the following command to generate a tsconfig.json file.

    tsc --init
    
  4. Abra ./tsconfig.jsen un editor de texto y realice los siguientes cambios.Open ./tsconfig.json in a text editor and make the following changes.

    • Cambie el target valor a es6 .Change the target value to es6.
    • Descomprima outDir el valor y esta establece el valor en ./dist .Uncomment the outDir value and set it to ./dist.
    • Descomprima rootDir el valor y esta establece el valor en ./src .Uncomment the rootDir value and set it to ./src.
  5. Abra ./package.jsy agregue la siguiente propiedad al JSON.Open ./package.json and add the following property to the JSON.

    "scripts": {
      "start": "nodemon ./src/server.ts",
      "build": "tsc --project ./"
    },
    
  6. Ejecute el siguiente comando para generar e instalar certificados de desarrollo para el complemento.Run the following command to generate and install development certificates for your add-in.

    npx office-addin-dev-certs install
    

    Si se le solicita confirmación, confirme las acciones.If prompted for confirmation, confirm the actions. Una vez completado el comando, verá un resultado similar al siguiente.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. Cree un archivo denominado .env en la raíz del proyecto y agregue el siguiente código.Create a new file named .env in the root of your project and add the following code.

    Reemplace con la ruta de acceso a localhost.crt y con la ruta de acceso a PATH_TO_LOCALHOST.CRT PATH_TO_LOCALHOST.KEY la salida localhost.key por el 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. Cree un directorio en la raíz del proyecto denominado src.Create a new directory in the root of your project named src.

  9. Cree dos directorios en el directorio ./src: addin y api.Create two directories in the ./src directory: addin and api.

  10. Cree un archivo denominado auth.ts en el directorio ./src/api y agregue el siguiente código.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. Cree un archivo denominado graph.ts en el directorio ./src/api y agregue el siguiente código.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. Cree un archivo denominado server.ts en el directorio ./src y agregue el siguiente código.Create a new file named server.ts in the ./src directory and add the following code.

Crear el complementoCreate the add-in

  1. Cree un archivo denominado taskpane.html en el directorio ./src/addin y agregue el siguiente código.Create a new file named taskpane.html in the ./src/addin directory and add the following code.

  2. Cree un archivo denominado taskpane.css en el directorio ./src/addin y agregue el siguiente código.Create a new file named taskpane.css in the ./src/addin directory and add the following code.

  3. Cree un archivo denominado taskpane.js en el directorio ./src/addin y agregue el siguiente código.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. Cree un nuevo directorio en el directorio .src/addin denominado assets.Create a new directory in the .src/addin directory named assets.

  5. Agregue tres archivos PNG en este directorio de acuerdo con la tabla siguiente.Add three PNG files in this directory according to the following table.

    Nombre de archivoFile name Tamaño en píxelesSize in pixels
    icon-80.pngicon-80.png 80x8080x80
    icon-32.pngicon-32.png 32x3232x32
    icon-16.pngicon-16.png 16x1616x16

    Nota

    Puede usar cualquier imagen que desee para este paso.You can use any image you want for this step. También puede descargar las imágenes usadas en este ejemplo directamente desde GitHub.You can also download the images used in this sample directly from GitHub.

  6. Cree un nuevo directorio en la raíz del manifiesto con nombre del proyecto.Create a new directory in the root of the project named manifest.

  7. Cree un archivo denominado manifest.xml en la carpeta ./manifest y agregue el siguiente código.Create a new file named manifest.xml in the ./manifest folder and add the following code. Reemplazar NEW_GUID_HERE con un nuevo GUID, como b4fa03b8-1eb6-4e8b-a380-e0476be9e019 .Replace NEW_GUID_HERE with a new GUID, like b4fa03b8-1eb6-4e8b-a380-e0476be9e019.

Carga lateral del complemento en ExcelSide-load the add-in in Excel

  1. Inicie el servidor ejecutando el siguiente comando.Start the server by running the following command.

    yarn start
    
  2. Abra el explorador y vaya a https://localhost:3000/taskpane.html .Open your browser and browse to https://localhost:3000/taskpane.html. Debería ver un Not loaded mensaje.You should see a Not loaded message.

  3. En el explorador, vaya a Office.com e inicie sesión.In your browser, go to Office.com and sign in. Seleccione Crear en la barra de herramientas izquierda y, a continuación, seleccione Hoja de cálculo.Select Create in the left-hand toolbar, then select Spreadsheet.

    Captura de pantalla del menú Crear en Office.com

  4. Seleccione la pestaña Insertar y, a continuación, seleccione Complementos de Office.Select the Insert tab, then select Office Add-ins.

  5. Seleccione Cargar mi complemento y, a continuación, seleccione Examinar.Select Upload My Add-in, then select Browse. Cargue el archivo ./manifest/manifest.xml.Upload your ./manifest/manifest.xml file.

  6. Seleccione el botón Importar calendario en la pestaña Inicio para abrir el panel de tareas.Select the Import Calendar button on the Home tab to open the taskpane.

    Captura de pantalla del botón Importar calendario en la pestaña Inicio

  7. Después de abrir el panel de tareas, debería ver un Hello World! mensaje.After the taskpane opens, you should see a Hello World! message.

    Captura de pantalla del mensaje Hola a todos