Ejercicio: Conceptos básicos de complementos de correo

7 minutos

En este ejercicio, aprenderá a crear su primer proyecto de complemento de Outlook y a cargarlo en el cliente de Outlook.

Requisitos previos

El desarrollo de complementos de Outlook requiere Outlook 2016 (o posterior) o Outlook en la Web.

Usará Node.js para crear el complemento personalizado de Outlook en este módulo. En los ejercicios de este módulo se presupone que tiene las herramientas siguientes instaladas en su estación de trabajo del desarrollador.

Importante

En la mayoría de los casos, instalar la última versión de las siguientes herramientas es la mejor opción. Las versiones enumeradas aquí fueron usadas la última vez que se publicó y se probó este módulo.

Node.js : (la versión de LTS activa)
npm (instalado con Node.js)
Yeoman : v4.x (o superior)
Generador de Yeoman para Microsoft Office : v1.9.5
Visual Studio Code (VS Code) o el editor de código que prefiera

Debe tener las versiones mínimas de estos requisitos previos instaladas en su estación de trabajo.

Para este ejercicio, también necesitará una cuenta de GitHub.

Instalación

El complemento que creará en este tutorial leerá gist de la cuenta GitHub del usuario y agregará el gist seleccionado al cuerpo de un mensaje. Siga los pasos siguientes para crear dos gist nuevos que puede usar para probar el complemento que va a crear.

Inicie sesión en GitHub.
Cree un nuevo gist.
- En el campo Descripción del gist..., escriba Hello World Markdown.
- En el campo Nombre del archivo incluye la extensión..., escriba test.md.
- Agregue el markdown siguiente al cuadro de texto de varias líneas:
```
# Hello World

This is content converted from Markdown!

Here's a JSON sample:

  ```json
    {
      "foo": "bar"
    }
  ```
```
- Seleccione el botón Crear gist público.
Cree otro gist nuevo.
- En el campo Descripción del gist..., escriba Hello World Html.
- En el campo Nombre del archivo incluye la extensión..., escriba test.html.
- Agregue el markdown siguiente al cuadro de texto de varias líneas:
```
<html>
  <head>
    <style>
    h1 {
      font-family: Calibri;
    }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a test</p>
  </body>
</html>
```
- Seleccione el botón Crear gist público.

Crear un proyecto de complemento de Outlook

Ejecute el siguiente comando para crear un proyecto de complemento con el generador de Yeoman:
```
yo office
```
Nota:

Cuando ejecute el comando yo office, es posible que reciba mensajes sobre las directivas de recopilación de datos de Yeoman y las herramientas de la CLI de complementos de Office. Use la información adecuada que se proporciona para responder a los mensajes.

Cuando se le pida, proporcione la siguiente información para crear el proyecto de complemento:
- Elija un tipo de proyecto: proyecto del panel de tareas del complemento de Office
- Elija un tipo de script: JavaScript
- ¿Qué nombre quiere asignar al complemento? : Obtener el gist
- ¿Qué aplicación cliente de Office quiere admitir? : Outlook
Después de completar el asistente, cambie a la carpeta del proyecto creada por el generador (Complemento de Mi Office) e instale los módulos npm mediante la ejecución de npm install.

Sugerencia

Se pueden pasar por alto las instrucciones de los pasos siguientes que el generador de Yeoman ofrece después de que se haya creado el proyecto de complemento. El resto de esta unidad incluye todos los pasos que deberá seguir.
Vaya a la carpeta raíz del proyecto.
```
cd "Git the gist"
```
Este complemento usará las bibliotecas siguientes:
- La biblioteca Showdown para convertir el archivo Markdown a HTML.
- La biblioteca URI.js para crear direcciones URL relativas.
- La biblioteca jQuery para simplificar las interacciones DOM.
Para instalar estas herramientas para el proyecto, ejecute el comando siguiente en el directorio raíz del proyecto.
```
npm install showdown urijs jquery --SE
```
Abra el proyecto en VS Code o en el editor de código que prefiera.

Sugerencia

En Windows, puede navegar al directorio raíz del proyecto a través de la línea de comandos y, a continuación, escribir código . para abrir esa carpeta en VS Code. En macOS, deberá agregar el comando de código a la ruta de acceso antes de poder usar ese comando para abrir la carpeta del proyecto en VS Code.

Actualizar el manifiesto

El manifiesto de un complemento influye en cómo aparece en Outlook. Define cómo se muestran el complemento en la lista de complementos y los botones que aparecen en la cinta de opciones, y establece las direcciones URL de los archivos HTML y JavaScript que ese complemento usa.

Especificar información básica

Realice las siguientes actualizaciones en el archivo manifest.xml para especificar cierta información básica sobre el complemento:

Busque el elemento ProviderName y reemplace el valor predeterminado por el nombre de su compañía.
```
<ProviderName>Contoso</ProviderName>
```
Busque el elemento Description, reemplace el valor predeterminado por una descripción del complemento y guarde el archivo.
```
<Description DefaultValue="Allows users to access their GitHub gists."/>
```

Probar el complemento generado

Antes de seguir, vamos a probar el complemento básico que creó el generador para confirmar que el proyecto está configurado correctamente.

Nota:

Los complementos de Office deben usar HTTPS y no HTTP, incluso cuando está desarrollando. Si se le pide que instale un certificado después de ejecutar el siguiente comando, acepte la solicitud para instalar el certificado que proporciona el generador Yeoman. Es posible que también deba ejecutar el símbolo del sistema o el terminal como administrador para que se realicen los cambios.

Ejecute el siguiente comando en el directorio principal del proyecto. Al ejecutar este comando, se inicia el servidor web local y el complemento se transferirá localmente.
```
npm start
```
En Outlook, abra un mensaje existente y seleccione el botón Mostrar panel de tareas.
Cuando se le solicite el cuadro de diálogo WebView Stop On Load, seleccione Aceptar.

Nota:

Si selecciona Cancelar, no se volverá a mostrar el cuadro de diálogo mientras se esté ejecutando esta instancia del complemento. Sin embargo, si reinicia el complemento, verá el cuadro de diálogo de nuevo.

Si se ha configurado correctamente, el panel de tareas abrirá y representará la página principal del complemento.

Resumen

En este ejercicio, ha aprendido a crear su primer proyecto de complemento de Outlook y a cargarlo en el cliente de Outlook.

Comprobar sus conocimientos

¿Cuáles de los siguientes tipos de complementos de correo se admiten en Outlook?

Comandos y acciones de complementos

Complementos de extensión de módulo

Complementos contextuales

Complementos de redacción de mensajes

Complementos que se ejecutan al enviar

Todas las respuestas anteriores.

¿Cuáles son las dos opciones principales para crear nuevos proyectos de complemento?

Generador de Yeoman de Office y Visual Studio

Visual Studio y un creador de proyectos de la CLI de Office

Visual Studio y un proyecto de inicio descargable para proyectos basados en Node.js

Debe responder todas las preguntas antes de comprobar su trabajo.

Continuar