Creando una app para SharePoint OnLine


Muy buenas a todos,

Hoy os quiero mostrar en un ejemplo sencillo como crear y desplegar nuestra primera App para SharePoint OnLine. Para este caso solo voy a mostrar una app tipo “Hola Mundo”, ya que el objetivo del post es enseñar los pasos que he seguido para subir una app personalizada a mi Tenant de SharePoint OnLine.

En futuros post, iré avanzando en desarrollos de apps más complejas y donde se ponga de manifiesto como trabajar con el modelo de objeto de clientes y la API REST que nos ofrece la versión de SharePoint 2013 y por ende, la versión OnLine.

Antes de entrar en cómo desarrollar y publicar nuestra App, vamos a hacer un breve resumen por el modelo de desarrollo que se propone para SharePoint 2013, y que cambia el paradigma y la forma en la que nos recomiendan llevar a cabo nuestros desarrollos.

El modelo de aplicaciones

Las aplicaciones de SharePoint son aplicaciones web ligeras y fáciles de usar que integran los estándares web y las tecnologías más habituales para ampliar las capacidades de un sitio web de SharePoint.

Una de las diferencias más importantes entre las extensiones de SharePoint 2010 y las aplicaciones para SharePoint es que aplicaciones para SharePoint no usan un modelo de objetos de servidor, ni tampoco usan código personalizado que se ejecuta en el servidor de SharePoint. Todos los componentes de código personalizado residen en el modelo de objetos de cliente ampliado o en servidores de aplicaciones hospedadas en la nube.

En la siguiente figura se muestra la arquitectura conceptual para la creación de aplicaciones en SharePoint

IC720355

El modelo de aplicaciones ofrece varias opciones de hospedaje para la aplicación. Puede elegir su propia pila web u hospedarla en SharePoint, tal como se muestra en la siguiente figura.

IC742264

  • Aplicaciones hospedadas en SharePoint: Las aplicaciones hospedadas en SharePoint se instalan en un sitio web de SharePoint 2013, denominado web de host. Tienen sus recursos hospedados en un subsitio aislado de una web de host, denominado web de aplicación.
  • Aplicaciones hospedadas por el proveedor: Las aplicaciones para SharePoint hospedadas por el proveedor incluyen componentes que están implementados y hospedados fuera de la granja de servidores de SharePoint. Las aplicaciones están instaladas en el web de host, pero sus componentes remotos están hospedados en otro servidor.

Todo lo que os he mostrado hasta aquí es un extracto de algunos artículos de la MSDN donde podemos profundizar más sobre el modelo de aplicaciones de SharePoint y que os dejo a continuación.

http://msdn.microsoft.com/es-es/library/office/fp179930%28v=office.15%29.aspx

http://msdn.microsoft.com/es-es/library/office/fp179887

http://msdn.microsoft.com/ES-ES/library/office/fp179899(v=office.15).aspx

http://msdn.microsoft.com/ES-ES/library/office/dn449636(v=office.15).aspx

Creando el catálogo de aplicaciones

Para este ejemplo, vamos a centrarnos en aplicaciones hospedadas en SharePoint. Lo primero que tenemos que hacer, es crear nuestro catálogo de aplicaciones, lo que creará un sitio donde podremos añadir nuestras aplicaciones para que estén disponible en el catálogo de aplicaciones del resto de nuestros sitios de SharePoint. Para ello, vamos al Centro de Administración de SharePoint y al apartado de aplicaciones tras lo cual haremos click en Catálogo de aplicaciones.

Captura de pantalla 2015-01-18 a las 19.29.02

Si es la primera vez que accedemos a esta opción, nos creará el sitio correspondiente al catálogo de aplicaciones, para lo que nos solicitará una serie de datos que deberemos indicar. A continuación accederemos al sitio del catálogo que tiene una forma como el siguiente.

Captura de pantalla 2015-01-18 a las 19.29.20

En este sitio que se acaba de crear, tenemos varias bibliotecas, una para subir aplicaciones de SharePoint y otra para subir aplicaciones de Office.

Creando nuestra App “Hola Mundo”

Para crear una app para SharePoint, en Visual Studio (yo para probar he usado Visual Studio 2015 preview) seleccionamos Nuevo Proyecto->Visual C#->Office/SharePoint->Apps y seleccionamos el tipo de proyecto App for SharePoint. Una vez que indiquemos el nombre del proyecto pulsamos sobre Aceptar y tenemos que configurar aspectos de la aplicación, el tipo de modelo de aplicación y el sitio al que se subirá.

Captura de pantalla 2015-01-18 a las 20.37.01

Cuando indiquemos estos datos aceptamos y se crea el código de la app. La solución, de partida, se creará con una estructura como la que se ve a continuación.

Captura de pantalla 2015-01-18 a las 20.47.33

Lo más importante de este ejemplo, lo tenemos en los módulos Pages y Scripts, con el fichero Default.aspx donde se encuentra la página que se mostrará en nuestra aplicación y el fichero App.js con el código Javascript que accede al modelo de objetos de cliente de SharePoint para cargar el nombre del usuario conectado y mostrarlo en nuestra aplicación “Hola Mundo”.

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
    <meta name="WebPartPageExpansion" content="full" />

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

Y ahora el código correspondiente al archivo app.js.

'use strict';

ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");

function initializePage()
{
    var context = SP.ClientContext.get_current();
    var user = context.get_web().get_currentUser();

    // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
    $(document).ready(function () {
        getUserName();
    });

    // This function prepares, loads, and then executes a SharePoint query to get the current users information
    function getUserName() {
        context.load(user);
        context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
    }

    // This function is executed if the above call is successful
    // It replaces the contents of the 'message' element with the user name
    function onGetUserNameSuccess() {
        $('#message').text('Hello ' + user.get_title());
    }

    // This function is executed if the above call fails
    function onGetUserNameFail(sender, args) {
        alert('Failed to get user name. Error:' + args.get_message());
    }
}

Con esto ya tendremos lista nuestra aplicación y dispuesta para ser implementada y desplegada en nuestro sitio

Publicando nuestra App

Cuando ya tenemos la aplicación terminada, implementamos la misma. Esto nos crea en la carpeta de nuestro proyecto un archivo con extensión .app que será el que subiremos a nuestro sitio

Una vez que tenemos nuestra aplicación, vamos a nuestro catálogo de aplicaciones a la biblioteca de aplicaciones de SharePoint y subimos la aplicación que hemos creado e implementado.

Captura de pantalla 2015-01-18 a las 20.19.08

A partir de este momento, ya tenemos disponible la aplicación en el catálogo de aplicaciones disponibles en nuestro sitio

Captura de pantalla 2015-01-18 a las 20.20.13

Y agregándola al mismo, podemos ver el resultado en funcionamiento de nuestra aplicación.

Captura de pantalla 2015-01-18 a las 20.20.55

Y esto es todo por hoy, he mostrado en este post, como crear y desplegar una app en SharePoint, lo que me ha servido para empezar a introducirme en el mundo de las apps de SharePoint. Como os decía al principio, iremos avanzando con las opciones que nos permiten las apps en sucesivos post, y en poco tiempo intentaré combinar Polymer con una app de SharePoint para ver como se integra SharePoint 2013 con estos nuevos Frameworks de javascript.

Un saludo a todos.

Anuncios

6 comentarios en “Creando una app para SharePoint OnLine

  1. Man, este post es muy malo, dice cosas que estan en todo lado y se queda corto, no pones ejemplos de una app simple ni nada, te falta mucho hombre, es mejor que revalides tu profesion, o mires si eres bueno en otra, porque en esta dejas mucho que desear.

    • Hola Óscar, no tengo la suerte de conocerte, no obstante, gracias por participar en el blog. Te animo a que leas todo lo que he publicado sobre apps de SharePoint, y no solo sobre eso sino sobre otros temas…
      Creo que tu comentario es un tanto desafortunado, no obstante, siempre intento mejorar, en este mundo nunca se sabe todo.
      Un saludo

  2. Saludos amigo, bastante interesante tu post!!!!!

    Estoy iniciando en este mundo de SharePoint y me gustaría profundizar un poco mas con respecto a la programación de apps para SharePoint.

    Aparte de este post, cual otro me recomendarías para hacer cosas sencillas pero mas completas que el típico “Hola mundo”.

    Gracias de antemano desde Venzuela.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s