Building the hot or not app… or how not to sell social to your boss

Joris Poelmans@jopxtwits#spsbe

Thanks to ourSponsors

Platinum

Gold

Silver

About me • Joris.Poelmans@gmail.com

• Principal consultant at RealDolmen

• SharePoint Server MVP since 2005

• http://jopx.blogspot.com

• Twitter: @jopxtwits

• Founding member of BIWUG

About this session • Not really about standard

social features in SharePoint

• Focus on building a (voting) app

• ... All with REST API

Mobile social voting

Mobile social voting app Polar raises $1.2M (Source: Techcrunch – Feb 2013)

Demo The hot or not app – what it looks like

Dissecting HotOrNot

• SharePoint Hosted app (Almost) completely build in Javascript

Uses JSRender, JQuery UI, Image-picker

Uses REST API to communicate with SharePoint

Remote Event Receivers (RER) for mobile notifications (work in progress)

Consumed by Windows Phone 8 application (work in progress)

About Apps • Apps are self-contained pieces of functionality that extend the capabilities of a SharePoint site which leverage web technologies New deployment method Low server footprint Cloud driven Using an app catalog

App Web

Parent Web

SharePoint-hosted AppProvision 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

Azure Auto-Provisioned AppWindows Azure + SQL Azure provisioned invisibly as apps are installed

Azure SharePoint Web

Get remote events from SharePoint Use CSOM/REST + OAuth to work with SPS

Cloud-based Apps

Developer-Hosted App“Bring your own server hosting infrastructure”Developers will need to isolate tenants

SharePoint

Web

Your Hosted

Site

Cloud hosted versusSharePoint 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

Background on REST API

HTTP-based web service architecture that uses nouns and verbs to define operationsNoun: “Items”Verbs: GET, POST, PUT, MERGE, DELETE

oData provides metadata, object typing and query semantics/items(0)

Client Object Model service (client.svc) processes queries, interacts with server OM and returns JSON/XML/items/GetByTitle(‘foo’)

Structure of REST URL

http://sp2013/_api/items/GetById(1)?select=Title,ID

Location Service Resource Path

Query Options

Things to watch out for

• oData Spec != SharePoint REST• No request batching• Must specify “odata=verbose” in header• Default response format is ATOM but JSON is

easier with Javascript• Some request may not return default values

(due to processing overhead)• Lots of different REST endpoints available

Demo Examing basic list Operations using REST API

Javascript and REST API

• Async GET/POST operations using AJAX library

• Alternative cross-domain library• SP.RequestExecutor

• Must specify “odata=verbose” in header• Change default response format is to JSON

• Accept: “application/json;odata=verbose”• Lots of different REST endpoints available

Form Digest • Updates using REST require Form Digest• Prevent replay attacks• SharePoint pages have a control holding

a Form Digest• Updates/Deletes will fail without digest

value• Local app pages

• Use $(“#__REQUESTDIGEST”).val()• Remote

• POST to /_api/contextinfo to obtain form digest

CRUD Operations(Create)

• Create List item

CRUD Operations(Read)

• Read List Item• Use jsRender library which provides

template based rendering• Use $.template to create a template• Use $.render to generate output from

JSON collection

CRUD Operations (Update)

• Update list item

<= * or eTag

CRUD Operations (Delete)

• Delete list item

Other REST Endpoints

• Sites• /_api/sites/features, /_api/sites/eventreceivers

• Search• /_api/search/query?queryText=‘value’,

/_api/search/suggest?querytext=‘value’

• Social & User Profiles• /_api/social.following,

/_api/sp.userprofiles.peoplemanager, /_api/social.feed

• Publishing • /_api/publishing

• What are we missing

Demo Examining search and social REST API

Search REST API

• Not a lot of documentation available• See - http://

blogs.msdn.com/b/nadeemis/archive/2012/08/24/sharepoint-2013-search-rest-api.aspx

• Search REST App - http://sharepointfieldnotes.blogspot.be/2013/01/sharepoint-2013-search-with-rest-app.html

• Use Codeplex Search Tool - http://sp2013searchtool.codeplex.com/

Must have tool

• Use SPFastDeploy to deploy individual items without having to do a full deploy

• Download link: http://visualstudiogallery.msdn.microsoft.com/9e03d0f5-f931-4125-a5d1-7c1529554fbd

Mobile Push Notifications

• Use SharePoint Remote Event Receivers

Remote Event Receivers (1/2)

• Provides a way to notify external systems• Support synchronous and asynchronous

events• Similar to “normal” event receivers but

containers pointer to WCF service

Remote Event Receivers (2/2)

• WCF Service implements IRemoteEventService interface

• Support for write back through ProcessEvent

Mobile Push NotificationsWalkthrough

• See How to: Create a companion mobile app for an app for SharePoint - http://msdn.microsoft.com/en-us/library/jj923094.aspx• Step 1: Create a list-based autohosted

app in SharePoint 2013• Step 2: Configure push notifications in

autohosted app• Step 3: Create a mobile app and register

for push notifications

Windows Phone 8 Client

• New SharePoint SDK for WP8 available http://www.microsoft.com/en-us/download/details.aspx?id=36818• 2 new templates (only C#):

• WP Empty SharePoint Application template• WP SharePoint List Application template

• Specific references for interacting with SharePoint

• Microsoft.SharePoint.Client.Phone• Microsoft.SharePoint.Client.Phone.Auth.UI• Microsoft.SharePoint.Client.Phone.Runtime

• WP8 List Application template uses a wizard to generate most of the code files

Demo Examining WP8 SharePoint List Application template

Conclusion • REST != CSOM, CSOM preferred option for development in most use cases

• Probably use REST for• Prototyping• CRUD operations from LAMP

/IOS/Android platforms• Possible option for WP8 or W8 apps

• Mobile companions to SharePoint apps make sense

Call to Action

• Help improve the Hot Or Not App – contact @jopxtwits

• Improvements• Allow to specify a challenge in the app

part• Include image when adding to the social

feed• Build a Windows 8 app, iOS and/or

Android app• Add business logic• Provide statistics and graphs

References• Manipulating list items in SharePoint Hosted Apps using

the REST API - http://blogs.msdn.com/b/uksharepoint/archive/2013/02/22/manipulating-list-items-in-sharepoint-hosted-apps-using-the-rest-api.aspx

• How to: Learn to read and write to the social feed by using the REST service in SharePoint 2013 - http://msdn.microsoft.com/en-us/library/jj822974.aspx

• Debugging Remote Event Receivers with VS and Windows Azure Service Bus - http://blogs.msdn.com/b/officeapps/archive/2013/01/03/debugging-remote-event-receivers-with-visual-studio.aspx

Big thanks to

• @ludwigvangysel for solving bugs and troubleshooting

• @spsteve (Steve Curran) for creating SPFastDeploy 2.2

THANK YOU

Joris Poelmansjoris.Poelmans@gmail.comhttp://jopx.blogspot.com@jopxtwits