Charla desarrollo de apps con sharepoint y office 365

Desarollo de Apps en SharePoint 2013CRUM

Luis Esteban ValenciaSebastián Acevedo

Luis Esteban Valencia14 años de Experiencia

Sharepoint 2007, 2010, 2013

Sharepoint Online

Office 365

ASP.NET/Web Forms/MVC

JS, Angular, Durandal

Azure Websites, Service Plans, Resource Groups, Service Bus, Azure Storage, Azure VMs, Redis Cache, Application Insights.Email – [email protected] – http://www.luisevalencia.comTwitter - @levalencia

Colaborador Grupo Office PnP:

https://github.com/OfficeDev/PnP/wiki/Monthly-Update-2014-November

Early Adopter Office PnP

https://mvp.microsoft.com/private/nomination/nominateanmvp

mailto:[email protected]

http://www.luisevalencia.com/








Sebastian Acevedo

Front-End DevOffice 365Asp.net MVC/Web APISharepoint AppsEmail:[email protected]

Twitter:http://twitter.com/SebasAcevedo

http://twitter.com/SebasAcevedo

http://twitter.com/SebasAcevedo

Agenda

• Tipos de Apps desde el punto de vista de la interfaz de usuario.• Tipos de Apps desde el punto de vista del alojamiento.• Herramientas de desarrollo.• CSOM vs REST• Cloud Application Model• Office PnP

Azure SharePoint Web

Hosting: Choice of Three Architecture Approaches

App Web (from WSP)

Parent Web

SharePoint-Hosted App

Provision an isolated sub web on a parent web• Reuse web elements

(lists, files, out-of-box web parts)• No server code allowed; use client JavaScript for logic, UX

Provider-Hosted App

“Bring your own server hosting infrastructure”SharePoint

WebGet remote events from SharePoint Use CSOM/REST + OAuth to work with SP

Cloud-based AppsYour Hosted Site

Autohosted App

Windows Azure + SQL Azure provisioned invisibly as apps are installed

App Shapes for SharePoint

Full page

Implement complete app experiences to satisfy business scenarios

PartsCreate app parts that can interact with the SharePoint experience

UI Command extensionsAdd new commands to the ribbon and item menus

Styling immersive full page apps

Client chrome control can give your full page app the basic look and feel of the SharePoint host web$(document).ready(function () { hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl")); var scriptbase = hostweburl + "/_layouts/15/"; $.getScript(scriptbase + "SP.UI.Controls.js", renderChrome);});

function renderChrome() { var options = { "appIconUrl": "", "appTitle": "CSOM/JSOM/REST demos", }; // Place the chrome control in the <div> with ID="chrome_ctrl_placeholder" var nav = new SP.UI.Controls.Navigation("chrome_ctrl_placeholder", options); nav.setVisible(true);}

Styling immersive full page apps

Full page app with and without chrome control

Comparing SharePoint Hosted vs. Provider Hosted Apps

SharePoint Hosted Provider Hosted

App Scope SharePoint Site Site or Tenancy

Architecture Web Site Multi-Tenant App

Developer Skillset SharePoint + HTML/JS Full Stack

UI Technologies SharePoint + HTML/JS Any Web Stack

Server Code None Any

Storage Lists and Doc Libs Any

Key Limitations No Server Code Hosting Expertise Required

Choosing between Provider-Hosted and SharePoint-Hosted.

Provider Hosted Apps SharePoint Hosted Apps

Preferred hosting model for almost all types of apps

Good for smaller apps & resource storage

Full power of web – choose your infrastructure & technology

SharePoint-based; no server-side code

May require your own hosting Automatically hosted in SharePoint

May require you own handling of multitenancy & permission management

Inherent multitenancy & isolation

Demo Sharepoint Hosted App

• Chrome Control (By Default on Sharepoint Hosted Apps)• Full Immersive App• App Part (consume a web service)

SharePoint app development tools

App development tools

“Napa” Office 365 development tools Browser-based development environment (SharePoint-hosted apps only)

Office dev tools for Visual Studio 2012/2013

“Napa” Office 365 development tools

SharePoint-hosted apps only All you need is an Office 365 account and a supported browser Install “Napa” Office 365 Development Tools (free)

“Napa” Office 365 development tools

Access from “Site Contents”

Office dev tools for Visual Studio

Available for Visual Studio 2012 and 2013 Download at:

http://aka.ms/officedevtoolsforvs2013 http://aka.ms/officedevtoolsforvs2012 VS 2012 users should also download the AppForSharePointWebToolkit package: http://www.nuget.org/packages/AppForSharePointWebToolkit

Latest version: “Office Developer Tools for Visual Studio 2013 – March 2014 Update” Allows you to target your app exclusively to SharePoint Online in Office 365

http://aka.ms/officedevtoolsforvs2013





http://www.nuget.org/packages/AppForSharePointWebToolkit

http://www.nuget.org/packages/AppForSharePointWebToolkit


<F5> deploy/debug experience IIS Express/LocalDB

Add app components to project

Cloud-hosted apps include ASP.NET web project Web Forms and MVC supported (can convert existing projects to apps)


ASP.NET web application projects include classes to handle app authentication. SharePointContext.cs

Functions to manage SharePoint context across page requests Can create user and/or app contexts for app and/or host webs

TokenHelper.cs Functions to create and obtain ContextToken and AccessToken objects

On other platforms, you have to do the OAuth implementation and manage tokens yourself

Demo

Napa Visual Studio

Accessing SharePoint data remotely

Accessing SharePoint data remotely

.NET Managed client object model (CSOM) JavaScript client object model (JSOM) REST endpoints with Odata

You can do REST with JS You can do REST with C#

.NET Managed client object model

When you create an App for SharePoint 2013 project, references to the .NET Framework assemblies are automatically added to the project {SharePointRoot}\ISAPI\Microsoft.SharePoint.Client.Runtime.dll {SharePointRoot}\ISAPI\Microsoft.SharePoint.Client.dll

Other CSOM assemblies you may need: …DocumentManagement.dll, …Publishing.dll, …Search.dll, …Taxonomy.dll, …UserProfiles.dll

Add the following statement to your code-behind:using Microsoft.SharePoint.Client;

.NET Managed client object model – Only for Provider Hosted Apps

Follow these steps: Create a ClientContext object, passing in the URL of a SharePoint site Call the Load() function to build the request query for any value properties your application needs to access Execute the query by calling the ExecuteQuery() function

var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);

using (var clientContext = spContext.CreateUserClientContextForSPHost())

{

clientContext.Load(clientContext.Web, web => web.Title);

clientContext.ExecuteQuery();

Response.Write(clientContext.Web.Title);

}

Demo CSOM

JavaScript client object model library

Add a reference to the JavaScript client object model (JSOM) using HTML <script> tags Reference the host web URL because the app web may not exist in every scenario in cloud-hosted apps

Reference the following libraries, in this order:1. ASP.NET AJAX library (MicrosoftAjax.js)2. SP.Runtime.js file3. SP.js file4. SP.RequestExecutor.js file (cross-domain library)


function execRequests() {

var clientContext = new SP.ClientContext(appweburl);

var appWeb = clientContext.get_web();

appWebListColl = appWeb.get_lists();

clientContext.load(appWebListColl);

clientContext.executeQueryAsync(onAppWebGetListSuccess, onJSOMError);

var factory = new SP.ProxyWebRequestExecutorFactory(appweburl);

clientContext.set_webRequestExecutorFactory(factory);

var appContextSite = new SP.AppContextSite(clientContext, hostweburl);

var hostWeb = appContextSite.get_web();

hostWebListColl = hostWeb.get_lists();

clientContext.load(hostWebListColl);

clientContext.executeQueryAsync(onHostWebGetListSuccess, onJSOMError);

}

REST endpoints with OData

SharePoint 2013 provides a Representational State Transfer (REST) web service that leverages the OData protocol (http://odata.org)

Construct HTTP requests to specially crafted URLs to access and manipulate SharePoint data Responses to these HTTP requests can be returned in Atom or JSON format

Can be used with CSOM, JSOM, or any other stack No external assembly references required!

http://odata.org/

Demo

Minicalendar


URL Returns_api/web/title The title of the current site_api/web/lists/getByTitle('Announcements') The Announcements list_api/web/lists/getByTitle('Announcements')/fields

The columns in the Announcements list

_api/web/lists/getByTitle('Tasks')/items The items in the Tasks list_api/web/siteusers The users in the site_api/web/sitegroups The user groups in the site_api/web/GetFolderByServerRelativeUrl('/Shared Documents')

The root folder of the Shared Documents library

_api/web/GetFolderByServerRelativeUrl('/Plans')/Files('a.txt')/$value

The file a.txt from the Plans library

Table adapted from http://msdn.microsoft.com/en-us/magazine/dn198245.aspx

Example read (GET) request URLs

http://msdn.microsoft.com/en-us/magazine/dn198245.aspx

http://msdn.microsoft.com/en-us/magazine/dn198245.aspx


To get the title of my SharePoint site, construct an HTTP GET request to the following URL:https://djsp.sharepoint.com/_api/web/title

Returned data (if authorized):<?xml version="1.0" encoding="UTF-8"?><d:Title xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:gml="http://www.opengis.net/gml"xmlns:georss="http://www.georss.org/georss" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">Danny's O365 Dev Tenant</d:Title>

https://djsp.sharepoint.com/_api/web/title

https://djsp.sharepoint.com/_api/web/title

CSOM vs. REST

Generally a matter of personal preferenceCSOM REST

Less “chatty” (requests can be batched) More “chatty” (no request batching)Handles the “plumbing” of calls to SharePoint Requires you to construct and manage your own

HTTPRequest/Response objectsRequires CAML for queries Uses standard OData vocabulariesCan interact with managed metadata taxonomies and workflows

No support for interacting with managed metadata taxonomies and workflowsEasy to leverage third-party libraries (jQuery)Can be debugged using FiddlerNo external assembly references required

Table adapted from http://www.andrewconnell.com/blog/sharepoint-2013-csom-vs.-rest-...-my-preference-and-why

http://www.andrewconnell.com/blog/sharepoint-2013-csom-vs.-rest-...-my-preference-and-why

Authentication and authorization for apps

App authentication/authorization

We can’t interact with data stored in SharePoint unless we (our apps) are authenticated to SharePoint and authorized to access data Authentication: Are you who you say you are? Authorization: Do you have permission to do what you are trying to do?

How can cloud-hosted apps for SharePoint securely access data from the remote web? Firewalls could be between servers Code and script could be running on different domains The external web server might not even be running Windows!

App principals

Apps for SharePoint have distinct identities Associated with an app principal (just like users have user principals)

App principal can be granted permissions Apps must request permissions to the host web or any other location outside of the app web

Always has Full Control to the app web

OAuth tokens are used to pass app identity Requires the use of Client ID and Secret values

App permissions

AppManifest.xml must include requests for the scope at which permissions are needed and the permission needed within that scope

Scopes: Permissions:

App authorization policy types

User-only Only the user identity is considered (non-app interactions with SharePoint). Timer Jobs as Azure Web Jobs.

App + User Both the user identity and the app identity are considered “Access denied” if one and/or the other lacks permissions

App-only Only the app identity is considered Allows for elevation above current user’s permissions (or when there is no current user) Only supported for server-side code in cloud-hosted apps Can’t be used with certain APIs (e.g., Project Server, search)

App permissions

Trust must be explicitly granted by the user installing the app (all or nothing)

User installing the app must also have all permissions the app is requesting

OAuth in SharePoint 2013

OAuth 2.0 is an open protocol for authorization http://tools.ietf.org/html/draft-ietf-oauth-v2-22

Enables users to authorize the service provider (in this case, SharePoint 2013) to provide tokens instead of credentials

OAuth is used: To authorize requests by an app for SharePoint to access SharePoint resources on behalf of a user To authenticate apps in the Office Store, an app catalog, or a developer tenant

http://tools.ietf.org/html/draft-ietf-oauth-v2-22

http://tools.ietf.org/html/draft-ietf-oauth-v2-22

OAuth in SharePoint 2013

Windows Azure Access Control Service (ACS) acts as the authorization server for provider hosted“low trust” apps

The provider hosted app uses OAuth to authenticate with SharePoint 2013 SharePoint requests a context token from ACS(Access Control Service) that it can send to the provider-hosted app’s server (contains a refresh token) The provider hosted app’s server uses the refresh and context tokens (along with its client ID and secret values) to request an access token from ACS The provider-hosted app’s server then uses the access token to talk back to SharePoint

Deploying provider-hosted apps


First, you must register an app principal Automatically handled for Autohosted apps and <F5> localhost deployments Requires a visit to /_layouts/15/AppRegNew.aspx for provider-hosted apps


Generate/specify Client Id/Client Secret values Specify a Title and App Domain


Update <appSettings> values in web.config<add key="ClientId" value="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" /><add key="ClientSecret" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=" />

Deploy/publish your remote web project Set full URL for Start page in AppManifest.xml


Right-click and “Publish…” the app project Click Package the app to generate .app file


Deploy the .app file to your app catalog


Click the link to launch the app Grant permissions the app requests

Demo Instalacion Provider Hosted App

https://github.com/OfficeDev/PnP



Charla desarrollo de apps con sharepoint y office 365

Technology

Transcript of Charla desarrollo de apps con sharepoint y office 365