Creando Provider-Hosted AddIns

La nave nodriza de nuestra versión Office 365. Una de las mayores frustraciones que he sentido como desarrollador en Office 365, y lo que conseguirá que podamos avanzar realmente de lo que hacíamos en versiones On-Premise hacia la nube. Check it!

Crear una colección de sitios de desarrollador

SharePoint Online dispone de un tipo de plantilla especial llamada «Sitio del desarrollador». La dinámica es la de disponer de un espacio en el que desplegar nuestras Apps que tenemos en desarrollo.

Tras ver que todo marcha dispondremos de dos opciones, o bien publicarla globalmente en la suscripción, o bien subirla al Office Store. Mas adelante puede que me plantee hablar de cómo realizar estas acciones, pero primero, aprendamos cómo montar todas las piezas y crear nuestros primeros controles alojados en Azure.

Si no disponemos en la suscripción de una colección de sitios de este tipo, pasaremos a crearla desde la administración de SharePoint, como se ve en la imagen a continuación, sino utilizaremos la existente.

Developer Site

 

 

Crear un WebApp en Azure

Como en todo este tipo de entradas, hay cosas que se asumen. Una de ellas será, que disponemos de una cuenta en Azure. Crearemos dentro de la cuenta una nueva aplicación web, de esta forma.

Azure New WebApp

Tras ello nos descargaremos el perfil público, *.PublishSettings que necesitaremos después para empaquetar la solución en Visual Studio.

Azure Download Profile

 

Crear solución en Visual Studio de tipo Provider-Hosted

Abrimos el Visual Studio (en mis capturas se trata de la versión 2013 Ultimate). Seleccionamos la plantilla Visual C# -> Office / SharePoint -> Apps -> App for SharePoint. Le ponemos un nombre, indicamos la ubicación y pulsamos OK.

New App Visual Studio

A continuación, si es la primera vez que realizamos esta operación se nos pedirán las credenciales del usuario de SharePoint Online (si ya hemos abierto alguna instancia de este tipo, Visual Studio no nos requerirá login). Éste usuario debe ser administrador de SharePoint.

Tras ello nos aparecerá la siguiente pantalla. Donde indicaremos la ubicación del sitio del desarrollador (lo identifica de forma automática tras el paso de credenciales), y el tipo de hospedaje que queremos realizar. Indicamos Provider-Hosted y pulsamos Next >.

New App - Step 2

Indicamos qué tipo de proyecto queremos realizar. Como tampoco es plan de añadir una capa de complejidad incorporando MVC a la ecuación, lo dejamos como ASP.NET Web Forms.

New App - Step 3

Este paso lo dejamos con la primera opción marcada. El segundo punto, el uso de certificados, se utiliza para entornos On-Premise, donde no requiramos Azure, sino que los desplegaremos sobre un servidor propio.

New App - Step 4

Ya disponemos de nuestra solución. Ésta se compone de dos proyectos:

  • SPFtw.FirstClientWebPart: Nuestro proyecto alojado en SharePoint. Éste incluye aquellos controles que deseemos agregar, como listas, tipos de contenido, receptores de evento, client webparts, etc…
  • SPFtw.FirstClientWebPartWeb: Será el proyecto alojado en Azure. Éste contendrá el código referenciado en el anterior proyecto.

New App - 2 projects

 

Crear un ClientWebPart

Pulsamos botón derecho sobre el primer proyecto SPFtw.FirstClientWebPart -> Add… -> New Item. Le ponemos el nombre que queramos y pulsamos Add.

New App - New Client WebPart

Esto nos genera la siguiente estructura:

  • SPFtw.FirstClientWebPart:
    • Un módulo con el nombre que hayamos dado al ClientWebPart generado.
    • Éste incluye un fichero Elements.xml con la configuración del WebPart (Propiedades, título, descripción, tool parts, etc…).
  • SPFtw.FirstClientWebPartWeb.
    • Dentro de la carpeta Pages nos genera una página *.aspx con el nombre que hayamos dado al ClientWebPart. En ésta ya podremos crear nuestro código, y hacer uso del code behind para nuestra lógica.

New App - SP ftw Client WebPart

 

Publicar la solución

Para empaquetar la solución iremos al primer proyecto, pulsaremos botón derecho -> Publish…

New App - Publish

Nos llevará a esta pantalla. En esta pantalla crearemos un nuevo perfil de publicación.

New App - Publish - New Profile

El primer paso será importar el perfil público que descargamos de Azure. Lo buscamos y pulsamos Finish.

New App - Publish - Import Profile

A continuación nos pedirá que identifiquemos un ClientId y un SecretId.

New App - Request ClientId

Para ello nos quedaremos en Stand-By y volveremos a SharePoint, donde los generaremos. Para ello navegaremos a la dirección:  https:// {tenant} .sharepoint.com/sites/dev/_layouts/15/appregnew.aspx. Donde {tenant} será el nombre de nuestra organización.

En esta pantalla rellenaremos la información de la siguiente manera:

  • Client Id y Client Secret: Pulsamos el botón Generate.
  • Title: Nombre que queramos dar al Addin.
  • App Domain: Url de la aplicación web generada en Azure.
  • Redirect URI: Página a la que se redirige por defecto. En nuestro caso, la propia página Default.aspx que ha creado nuestro proyecto en Visual Studio.

New App - ClientId y SecretId

Con estos datos generados, volvemos a Visual Studio. Rellenamos ClientId, ClientSecret, y pulsamos en Finish.

New App - Response ClientId

También deberemos dirigirnos al fichero WebConfig.xml y rellenar de igual manera.

New App - Webconfig

 

Desplegar la solución

Con el perfil ya cargado, y los Client Id y Client Secret generados en SharePoint para activar la conectividad entre ambos entornos, desplegaremos la solución. Si es la primera vez que realizamos el despliegue, o si hemos realizado cambios en el proyecto Web de la solución (el segundo que se aloja en Azure), pulsaremos en Deploy your web project.

New App - Deploy

Si es la primera vez que vamos a subir la aplicación a SharePoint, o si hicimos cambios en el primer proyecto (añadir otro client webpart, una lista, etc…), empaquetamos la app.

New App - Package

Esto nos generará un fichero con extensión *.app, en nuestro ejemplo SPFtw.FirstClientWebPart.app, que es el que utilizaremos en el portal del desarrollador para desplegarlo en SharePoint.

New App - Deploy 1to5

Tras esperar un instante a que se instale, ya podremos insertar nuestro ClientWebPart en la página, y disfrutar, cómo no, de un enlace a este blog 😀

New App - Insert webpart

Espero que disfrutéis esta entrada, o que al menos, os ahorre tiempo de configuración, pudiendo seguir todos los pasos cómodamente. Ride the cloud!

2 comentarios en “Creando Provider-Hosted AddIns”

  1. Al fin he encontrado la pieza del puzzle que me faltaba… No conocía el cambio manual del web.config y estaba atascado.

    ¡Gracias!

  2. Welcome everyone ! I’m Suzanne.
    Even though I jokingly credit my mother for my writing talent, I know that it is a ability I have fostered from childhood. Though my mother is a writer, I also started out young.
    I’ve always had a way with words, according to my favorite educator. I was always so excited in science when we had to do a research assignment .
    Now, I help current students achieve the grades that have always come easily to me. It is my way of giving back to communities because I understand the obstacles they must overcome to graduate.

    Suzanne Jarvis – Academic Writer – Filmsciencesparalleles Corp

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.