SP Apps, New Model, New App
Store: The Office Store
Alberto Díaz Martín (@adiazcan)
Juan Carlos González Martín (@jcgm1978)
Session Agenda
• Overview of the SharePoint Apps model
• SharePoint-Hosted Apps
• Autohosted Apps
• Provider-Hosted Apps
• Development Tools & Technologies
• Show me the money: The Office Store
Microsoft Vision: Modernizing the Platform
Today’sMarket Today’sTrends Our Principles
Evolution of SharePoint Development
2007 2010 2013
So…What are SharePoint Apps?
• Apps are self-contained pieces of functionality that extend the
capabilities of a SharePoint site
• Apps integrate the best of the web and SharePoint; they are
targeted and easy-to-use, and do a great job at solving user
needs
App
App ManifestWeb Page
<XML>HTML/CSS/JS
The Result: A new Cloud Apps Model
ServerClient
BrowserHost
Common Apps Architecture
WebServerHost
SharePoint
& Exchange
OtherDevices
&Clients
Office
APP
3rdPartyServices
ClientAPIs
ServerAPIs
App Permissions
• App permissions are configured in the App manifest:
– Developers specify the permissions the App needs to be able to
run
• Apps request permissions during installation:
– Granting App permissions is all or nothing – It’s not possible to
pick or choose what permissions are granted to the App
• App permissions are granted by the user installing and
executing the App:
– Users can only grant the permissions they have
CREATING A SHAREPOINT APP WITH
NAPA
DEMO
Apps Hosting Models
 “Bring your own server
hosting infrastructure”
 Your hosted site
Any Web Server
(Online or On-premises)
SharePoint
(Online)
Windows Azure
 Host your code in SharePoint
 Client side technologies and
declarative workflows
SharePoint
(Online or On-premises)
Cloud-based Apps:
 Get remote events from SharePoint
 Use CSOM/REST + OAuth to work with SP
 Reuse web elements
(lists, files, out-of-box web parts)
 No server code allowed; use client
JavaScript for logic, UX
App Hosting Models
• Cloud-Hosted vs. SharePoint-Hosted?
Cloud 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
SharePoint-Hosted Apps
• Why SharePoint-Hosted Apps?
INHERENT
MULTI-TENANCY
& ISOLATION
NO ADDITIONAL
COST
NO NEED FOR
ADDITIONAL
INFRASTRUCTURE
AUTHENTICATION
IS AUTOMATIC
SYMMETRIC
IN OFFICE 365
AND ON-PREM
SharePoint component isolation
• 1 app installation = 1 “app web”
• App webs are isolated in their own domain:
• Leverages web browser same-origin policy for script isolation
Host
web
App
web
https://contoso.sharepoint.com/site/
https://contoso-appUID.sharepoint.com/site/app/
App Layers & Components
Data Layer
• Lists & Libraries:
• Fields & Content
Types
• Data Stored in
Content DB
• WebProxy: Any data
source
• App scoped BDC
models & ECTs
Business Layer
• JavaScript:
• CSOM & REST API
• Workflows
• Custom Actions
UX Layer
• Declarative Pages &
HTML Pages
• Custom Actions
• OOB Web Parts
• App Parts
• Other elements:
• CSS files
Business Layer – JS CSOM & REST API
• JavaScript CSOM:
• REST/OData:
var ctx = new SP.ClientContext("http://mydomain-appUID.spo.com/site/app");
ctx.load(ctx.get_web().get_title());
ctx.executeQueryAsync();
http://contoso-appUID.spo.com/site/app/_api/web/Title
UX Layer - User Experience
• Get styling for free:
– App Web Template:
• Blank starting place
• SharePoint provides OOB CSS to style contents and the whole App 
Integrated & aligned with the core UX SharePoint experience
• App Master page for chroming (app.master)
• App lock down feature hides dangerous UI entry points inside appweb
• Reusable UI components:
– List view web part
– Reusable UI controls like dialogs and callouts
– Custom Actions let you extend menus, ribbon, and script
UX Layer - App Web Custom Actions
• Target to any location: Ribbon, ECB, ScriptLink
• Web scoped
• You can add your own business logic
CREATING A SHAREPOINT-HOSTED
APP IN VISUAL STUDIO
DEMO
Autohosted Apps
Tenant A
Tenant B
App Layers & Components
Data Layer
• Lists & Libraries
• Relational DBs:
• Hosted in SQL
Azure
• App scoped BDC
models & ECTs
• Others: be careful
with latency
Business Layer
• CSOM (.NET) &
REST API
• Workflows
• Custom Actions
UX Layer
• Declarative Pages
• Custom Actions
• OOB Web Parts
• App Parts
• Other elements:
• CSS files
• JS for Chroming
UX Layer - Optimizing UX
• Leverage the chrome control:
– Allows full-screen Apps to be framed in the chrome and styles
similar to the host web: placeholders for icons, breadcrumbs,
menus, …
• Import styles from host web:
– Add reference to: http://<host web
domain>/_layouts/15/defaultcss.ashx in the head of app page
• The chrome control automatically adds styles from the host web,
so this approach is only required for pages displayed in app parts
or modal windows
App Permissions
• Azure Access Control Service (ACS) plays the role of the
authorization server:
– Azure ACS stores basic information about the app and provides
apps access tokens for calling SharePoint APIs
Usage Model and Licensing
• Microsoft-owned Azure account:
– All Autohosted Apps for SharePoint are provisioned into a Microsoft-owned
Azure account that only Microsoft has access to
• Licensing through the Office 365 tenant:
– Azure hosting costs passed through to tenant…developers don’t pay for
hosting
• App Catalog:
– Great for company-specific customizations
– 1 App Catalogue per Office 365 tenant
• SharePoint Store:
– Great for ISVs or developers looking a way of monetizing SharePoint Apps
– The bad news: Autohosted Apps are not supported in the SharePoint Store yet
Autohosted Apps Key Takeaways
• Easy to Develop:
– Familiar tools, simple deployment, and automatic DR
• Simplified Upgrade:
– Autohosted Apps provide a reliable upgrade path: just deploy a new version of your App, and the
upgrade is automatically done
• Cloud Ready:
– Autohosted Apps are designed to provide an uncompromised cloud experience in Office 365
• Rich SharePoint Integration:
– New APIs allow the Autohosted Apps to run on top of Azure but richly integrated with SharePoint
• Low Cost of Entry for Developers:
– No more bulky development environment:
• A Surface Pro + Visual Studio + An Office 365 Tenant
Provider-Hosted Apps
• What technologies can we use?
Data Layer
• Any Data Store:
SQL, mySQL,
Oracle, CSV, Access,
FoxPro, DB2,
SQLite, …
• Lists & Libraries
• App scoped BDC
models & ECTs
• Indeed any data
source
Business Layer
• CSOM (.NET) +
REST API
• Use any server side
code technology of
your choice:
• .NET Code (C#,
VB.NET), CGI,
Java, Perl, Ruby,
Node.js, …
UX Layer
• UX Technologies:
• HTML4/5,
ASP.NET, JSP, …
• Client Side Code:
JavaScript, jQuery,
AJAX, PHP, …
Anything!
Development Tools & Technologies
Traditional Tools New Tools
App Shapes
Full page
Implement complete app experiences
to satisfy business scenarios
App Parts (aka Client Web Part)
Create app parts that can interact
with the SharePoint experience
UI command extensions
Add new commands to the ribbon and item
menus
App Shapes
• Client WebPart
– Wizard creates XML & page
– Shine through parts of your app
– Create convenient launch points
– Content hosted in an iFrame
• UI Extensions
– Show on the ribbon
– Add to item menu (ECB)
– Wizard creates XML
Web to SharePoint Communication
• Use of OAuth for secure communications:
– SharePoint & web application trust
third party (ACS)
• Trusted communication process using a
ClientId & a ClientSecret:
– SharePoint & ACS know the ClientId
– Web application & ACS know the
ClientSecret
Debugging Apps – Just press F5
• No app registration required:
– ClientId & ClientSecret are generated by Visual Studio for you
• IIS Express is used to host Web project:
– ~remoteAppUrl token updated so it points to an IIS Express Url
• LocalDB is used for SQL database:
– Connection string updated in web.config from SQL project
• Local workflow service is started & configured
Deploying an App from the IDE
• Supported only for SharePoint-Hosted & Autohosted
• App is packaged (.app) and provisioned to:
– SharePoint 2013 OnPremise (Only SharePoint-Hosted)
– O365 (SharePoint Online) & Azure (both App types)
Publishing an App
• Use when App is ready for…
– Testing by another person or team
– Being uploaded to the Store or the App Catalog
• SharePoint-hosted & Autohosted Apps:
– No App registration required
– Everything is included in the .app package
• Provider-hosted Apps:
– Developer must acquire ClientId & ClientSecret
– SharePoint artifacts are included in .app package
– Web assets are included in the Web Deploy package - developer must deploy
» Developer must publish & deploy SQL assets in case they are not included in the Web Deploy
package
Remote Event Receivers & App Events
• Implemented as WCF services:
– Support for synchronous and asynchronous events
• App Events:
– App install, app upgrade, app uninstalling
• http://msdn.microsoft.com/en-
us/library/office/jj220048(v=office.15).aspx
• Some Remote Event Receiver events:
– Item added, item changed, item deleted …
BUILDING A SHAREPOINT APP
FROM SCRATCH
DEMO
Office Store or
App Catalog
Consumers &
Corporate Users
Developer
Web Server
(Internet or Intranet)
App manifest (.xml)
or .app package
Document
Sharing
Office Store
• App Packaging and Deployment
Web Page
Introducing the Office and SharePoint Store
OfficeandSharePointPlatforms
Data
Visualization
Content
Management
Vertical
specific…
Function
specific….
DataMigration Infrastructure Deployment Managed
Services
FREE/
TRIAL/
PURCHASE
OFFICE
APP
VALIDATION
Choice of distribution channel
Making money on the store
adspaid apps
in-app
purchases
Making money on the store
• Paid Apps:
– The user can download and use the app, in perpetuity, for a one-time charge
• In-App purchases: purchases are done through the App once it’s installed:
– You can include in-App purchases in your App as long as you follow the Office
Store validation guidelines published by Microsoft:
• http://msdn.microsoft.com/en-us/library/office/apps/jj220035.aspx
• Through Advertisements added to the App:
– You can include Adds in your App as long as you follow the Office Store
validation guidelines published by Microsoft:
• http://msdn.microsoft.com/en-us/library/office/apps/jj220035.aspx
Making money with paid apps
per seat price organization wide price
X
subscription
The store caters a wide variety of Apps
Data
VisualizationApps span enterprise and
consumer scenarios
All apps are tested by
Microsoft before publishing
on the store
Communication
Lifestyle
Content
Management
Project
Management
Social
Reference
Financial
Management
A QUICK LOOK TO THE OFFICE
(SHAREPOINT) STORE APPS
DEMO
SP Apps, New Model, New App Store: The Office Store

SP Apps, New Model, New App Store: The Office Store

  • 1.
    SP Apps, NewModel, New App Store: The Office Store Alberto Díaz Martín (@adiazcan) Juan Carlos González Martín (@jcgm1978)
  • 2.
    Session Agenda • Overviewof the SharePoint Apps model • SharePoint-Hosted Apps • Autohosted Apps • Provider-Hosted Apps • Development Tools & Technologies • Show me the money: The Office Store
  • 3.
    Microsoft Vision: Modernizingthe Platform Today’sMarket Today’sTrends Our Principles
  • 4.
    Evolution of SharePointDevelopment 2007 2010 2013
  • 5.
    So…What are SharePointApps? • Apps are self-contained pieces of functionality that extend the capabilities of a SharePoint site • Apps integrate the best of the web and SharePoint; they are targeted and easy-to-use, and do a great job at solving user needs App App ManifestWeb Page <XML>HTML/CSS/JS
  • 6.
    The Result: Anew Cloud Apps Model
  • 7.
    ServerClient BrowserHost Common Apps Architecture WebServerHost SharePoint &Exchange OtherDevices &Clients Office APP 3rdPartyServices ClientAPIs ServerAPIs
  • 8.
    App Permissions • Apppermissions are configured in the App manifest: – Developers specify the permissions the App needs to be able to run • Apps request permissions during installation: – Granting App permissions is all or nothing – It’s not possible to pick or choose what permissions are granted to the App • App permissions are granted by the user installing and executing the App: – Users can only grant the permissions they have
  • 9.
    CREATING A SHAREPOINTAPP WITH NAPA DEMO
  • 10.
    Apps Hosting Models “Bring your own server hosting infrastructure”  Your hosted site Any Web Server (Online or On-premises) SharePoint (Online) Windows Azure  Host your code in SharePoint  Client side technologies and declarative workflows SharePoint (Online or On-premises) Cloud-based Apps:  Get remote events from SharePoint  Use CSOM/REST + OAuth to work with SP  Reuse web elements (lists, files, out-of-box web parts)  No server code allowed; use client JavaScript for logic, UX
  • 11.
    App Hosting Models •Cloud-Hosted vs. SharePoint-Hosted? Cloud 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
  • 12.
    SharePoint-Hosted Apps • WhySharePoint-Hosted Apps? INHERENT MULTI-TENANCY & ISOLATION NO ADDITIONAL COST NO NEED FOR ADDITIONAL INFRASTRUCTURE AUTHENTICATION IS AUTOMATIC SYMMETRIC IN OFFICE 365 AND ON-PREM
  • 13.
    SharePoint component isolation •1 app installation = 1 “app web” • App webs are isolated in their own domain: • Leverages web browser same-origin policy for script isolation Host web App web https://contoso.sharepoint.com/site/ https://contoso-appUID.sharepoint.com/site/app/
  • 14.
    App Layers &Components Data Layer • Lists & Libraries: • Fields & Content Types • Data Stored in Content DB • WebProxy: Any data source • App scoped BDC models & ECTs Business Layer • JavaScript: • CSOM & REST API • Workflows • Custom Actions UX Layer • Declarative Pages & HTML Pages • Custom Actions • OOB Web Parts • App Parts • Other elements: • CSS files
  • 15.
    Business Layer –JS CSOM & REST API • JavaScript CSOM: • REST/OData: var ctx = new SP.ClientContext("http://mydomain-appUID.spo.com/site/app"); ctx.load(ctx.get_web().get_title()); ctx.executeQueryAsync(); http://contoso-appUID.spo.com/site/app/_api/web/Title
  • 16.
    UX Layer -User Experience • Get styling for free: – App Web Template: • Blank starting place • SharePoint provides OOB CSS to style contents and the whole App  Integrated & aligned with the core UX SharePoint experience • App Master page for chroming (app.master) • App lock down feature hides dangerous UI entry points inside appweb • Reusable UI components: – List view web part – Reusable UI controls like dialogs and callouts – Custom Actions let you extend menus, ribbon, and script
  • 17.
    UX Layer -App Web Custom Actions • Target to any location: Ribbon, ECB, ScriptLink • Web scoped • You can add your own business logic
  • 18.
    CREATING A SHAREPOINT-HOSTED APPIN VISUAL STUDIO DEMO
  • 19.
  • 20.
    App Layers &Components Data Layer • Lists & Libraries • Relational DBs: • Hosted in SQL Azure • App scoped BDC models & ECTs • Others: be careful with latency Business Layer • CSOM (.NET) & REST API • Workflows • Custom Actions UX Layer • Declarative Pages • Custom Actions • OOB Web Parts • App Parts • Other elements: • CSS files • JS for Chroming
  • 21.
    UX Layer -Optimizing UX • Leverage the chrome control: – Allows full-screen Apps to be framed in the chrome and styles similar to the host web: placeholders for icons, breadcrumbs, menus, … • Import styles from host web: – Add reference to: http://<host web domain>/_layouts/15/defaultcss.ashx in the head of app page • The chrome control automatically adds styles from the host web, so this approach is only required for pages displayed in app parts or modal windows
  • 22.
    App Permissions • AzureAccess Control Service (ACS) plays the role of the authorization server: – Azure ACS stores basic information about the app and provides apps access tokens for calling SharePoint APIs
  • 23.
    Usage Model andLicensing • Microsoft-owned Azure account: – All Autohosted Apps for SharePoint are provisioned into a Microsoft-owned Azure account that only Microsoft has access to • Licensing through the Office 365 tenant: – Azure hosting costs passed through to tenant…developers don’t pay for hosting • App Catalog: – Great for company-specific customizations – 1 App Catalogue per Office 365 tenant • SharePoint Store: – Great for ISVs or developers looking a way of monetizing SharePoint Apps – The bad news: Autohosted Apps are not supported in the SharePoint Store yet
  • 24.
    Autohosted Apps KeyTakeaways • Easy to Develop: – Familiar tools, simple deployment, and automatic DR • Simplified Upgrade: – Autohosted Apps provide a reliable upgrade path: just deploy a new version of your App, and the upgrade is automatically done • Cloud Ready: – Autohosted Apps are designed to provide an uncompromised cloud experience in Office 365 • Rich SharePoint Integration: – New APIs allow the Autohosted Apps to run on top of Azure but richly integrated with SharePoint • Low Cost of Entry for Developers: – No more bulky development environment: • A Surface Pro + Visual Studio + An Office 365 Tenant
  • 25.
    Provider-Hosted Apps • Whattechnologies can we use? Data Layer • Any Data Store: SQL, mySQL, Oracle, CSV, Access, FoxPro, DB2, SQLite, … • Lists & Libraries • App scoped BDC models & ECTs • Indeed any data source Business Layer • CSOM (.NET) + REST API • Use any server side code technology of your choice: • .NET Code (C#, VB.NET), CGI, Java, Perl, Ruby, Node.js, … UX Layer • UX Technologies: • HTML4/5, ASP.NET, JSP, … • Client Side Code: JavaScript, jQuery, AJAX, PHP, … Anything!
  • 26.
    Development Tools &Technologies Traditional Tools New Tools
  • 27.
    App Shapes Full page Implementcomplete app experiences to satisfy business scenarios App Parts (aka Client Web Part) Create app parts that can interact with the SharePoint experience UI command extensions Add new commands to the ribbon and item menus
  • 28.
    App Shapes • ClientWebPart – Wizard creates XML & page – Shine through parts of your app – Create convenient launch points – Content hosted in an iFrame • UI Extensions – Show on the ribbon – Add to item menu (ECB) – Wizard creates XML
  • 29.
    Web to SharePointCommunication • Use of OAuth for secure communications: – SharePoint & web application trust third party (ACS) • Trusted communication process using a ClientId & a ClientSecret: – SharePoint & ACS know the ClientId – Web application & ACS know the ClientSecret
  • 30.
    Debugging Apps –Just press F5 • No app registration required: – ClientId & ClientSecret are generated by Visual Studio for you • IIS Express is used to host Web project: – ~remoteAppUrl token updated so it points to an IIS Express Url • LocalDB is used for SQL database: – Connection string updated in web.config from SQL project • Local workflow service is started & configured
  • 31.
    Deploying an Appfrom the IDE • Supported only for SharePoint-Hosted & Autohosted • App is packaged (.app) and provisioned to: – SharePoint 2013 OnPremise (Only SharePoint-Hosted) – O365 (SharePoint Online) & Azure (both App types)
  • 32.
    Publishing an App •Use when App is ready for… – Testing by another person or team – Being uploaded to the Store or the App Catalog • SharePoint-hosted & Autohosted Apps: – No App registration required – Everything is included in the .app package • Provider-hosted Apps: – Developer must acquire ClientId & ClientSecret – SharePoint artifacts are included in .app package – Web assets are included in the Web Deploy package - developer must deploy » Developer must publish & deploy SQL assets in case they are not included in the Web Deploy package
  • 33.
    Remote Event Receivers& App Events • Implemented as WCF services: – Support for synchronous and asynchronous events • App Events: – App install, app upgrade, app uninstalling • http://msdn.microsoft.com/en- us/library/office/jj220048(v=office.15).aspx • Some Remote Event Receiver events: – Item added, item changed, item deleted …
  • 34.
    BUILDING A SHAREPOINTAPP FROM SCRATCH DEMO
  • 35.
    Office Store or AppCatalog Consumers & Corporate Users Developer Web Server (Internet or Intranet) App manifest (.xml) or .app package Document Sharing Office Store • App Packaging and Deployment Web Page
  • 36.
    Introducing the Officeand SharePoint Store OfficeandSharePointPlatforms Data Visualization Content Management Vertical specific… Function specific…. DataMigration Infrastructure Deployment Managed Services
  • 37.
  • 38.
    Making money onthe store adspaid apps in-app purchases
  • 39.
    Making money onthe store • Paid Apps: – The user can download and use the app, in perpetuity, for a one-time charge • In-App purchases: purchases are done through the App once it’s installed: – You can include in-App purchases in your App as long as you follow the Office Store validation guidelines published by Microsoft: • http://msdn.microsoft.com/en-us/library/office/apps/jj220035.aspx • Through Advertisements added to the App: – You can include Adds in your App as long as you follow the Office Store validation guidelines published by Microsoft: • http://msdn.microsoft.com/en-us/library/office/apps/jj220035.aspx
  • 40.
    Making money withpaid apps per seat price organization wide price X subscription
  • 41.
    The store catersa wide variety of Apps Data VisualizationApps span enterprise and consumer scenarios All apps are tested by Microsoft before publishing on the store Communication Lifestyle Content Management Project Management Social Reference Financial Management
  • 42.
    A QUICK LOOKTO THE OFFICE (SHAREPOINT) STORE APPS DEMO