Social Photos - My presentation at Microsoft Tech Day

Social PhotosHow we make it

What is Social Photos?

• Online social network for photographers and photo lovers.

• Take a photo -> share• Like / dislike / commend • Follow other• List photo near current

location

Location based feature

Social Photos integrates Microsoft and non Microsoft technologies seamlesslyhttp://socialphotos.codeplex.com

Step to do #1

• Design a social network–GUI prototyping–Architect design–Database modeling

• Web service: from client-server to client-cloud

Step to do #2

• Different clients connects to social network–Windows Form / ASP.net–Windows Phone 7.1– Android / iOS

• Web for PC & Mobile: HTML5, CSS3, JavaScript • Visual Studio Light Switch• Q&A

Design “social photos”

GUI Prototype

Architect

Database

GUI mock up: simple but work

1. Hand sketch on white board2. Capture by phone camera3. Write script to explain4. Email or check-in to collaboration portal

GUI mock up: work better

See demo

• 1 photo is owned by 1 user

• 1 photo is classified by 0-n categories

• 1 user can make 0-n comments on photo.

Social Photos Database design

MS SQL Server, DB2, Oracle, MySQL, PostgreSQL, SQLite, SAP Sysbase, Informix…

Entity Framework: 3 ways to design

• Database First: reverse engineer from existing DB.

• Model First: visually model tables -> generate DB script

• Code First: define class then -> generate DB scriptQuestion :

Which method

is better ?

Architect: Open, Simple, Efficient

ServerCommunication

Protocol ?

Architect: Open, Simple, Efficient

• Web serviced server• Work well with Entity Framework• Upgrade to Cloud without rewriting client

code

Problems

• Uniform Data Access is hard– Standards exist• ODBC• JDBC• OLEDB• SOAP• WCF Service

• Need a multiplatform-supported web service

HTTP - Websites (1992)

• Support Verbs: CRUD operations– GET: select– PUT: update– POST: insert– DELETE: remove

SOAP web services (2000)

Inside SOAP

• XML messages• HTTP Post only

RESTful web services (2006)• REST: representational State transfer• Each unique URL is a representation of some

objects

A RESTful web service

OData – Open Data protocol• Open– Based on web standards: HTTP, AtomPub, JSON

• Data– For querying and updating data– Different data sources (db, cms, files, etc.)

• Protocol– Convention for representing data entities in AtomPub– Query string conventions for addressing and filtering

data– Constrained HTTP operations for submitting request

SDKs

JavaScript

Producers

SharePoint 2010

SQL Reporting ServicesSQL Azure

OData and WCF Data Service

• Demo PhotoCloud.svc• Demo using LINQPad to build up query

string

Demo PhotoClound.svc• Query: GET• Insert : POST

– Url: http://localhost/SocialPhotos/PhotoCloud.svc/Categories– Header:

User-Agent: FiddlerContent-Type: application/jsonContent-Type: application/jsonHost: localhost:88Content-Length: 17

– Body: {"Name": "New Category"}• Update: PUT

– Body: {"Name": "Black and White"}• Delete : DELETE

//page size = 2, get 3rd page of top rated(from p in Photoswhere p.Likes > 0orderby p.Likes descendingselect p).Skip(4).Take(2)

http://localhost:88/SocialPhotos/PhotoCloud.svc/Photos()?$filter=(cast(Likes,'Edm.Int32')) gt 0&$orderby=Likes desc&$skip=4&$top=2

LINQ

URI

REST OData

Essence Pattern, architecture style, or approach

Protocol enabling REST

Querying capability N/A Y

Order returned data

Have to create custom method

Y

Paging returned data

Have to create custom method

Y

SOAP REST

Verb POST POST, GET, DELETE, PUT

Resource Identification N/A Y

Transport protocol HTTP only HTTP, TCP, SMTP, JMS, MQ, BEEP, IIOP

Payload format SOAP format POX, JSON

Bandwidth Heavier Lighter

Use proxy in client side Y N

Toolkit required Y N

Authorization Depend on app developers Webserver can help (with verbs)

Advantages Easy to consume Human Readable ResultsEasy to build (no toolkit)

OData response formats

WCF Data Service - Interceptors

Add custom logic to operation or to entity query– Validation– Restriction– Authorization– Logging

// Define a query interceptor for the Orders entity set.[QueryInterceptor("Orders")] public Expression<Func<Order, bool>> OnQueryOrders()

[QueryInterceptor("Branches")]public Expression<Func<Branch, bool>> OnQueryBranches(){

return (o) => o.Address != "Obsolete location";}

[ChangeInterceptor("Customers")]public void OnCustomerAdd(Customer c, UpdateOperations ops){

if (ops == UpdateOperations.Add)        {         if (c.Name.Trim().Equals(String.Empty))               {                  throw new DataServiceException(403,

"Customer names must not be empty");              }        }}

CLIENT SIDE DEVELOPMENTWindows Phone 7.1 – Android – iOS – Web Mobile

New features in Windows Phone 7.1

• Multi tasking• Back ground agent (back ground audio – transfer)• Access sensors: accelerometer, gyroscope, compass• Silverlight 4 built in• Support socket programming TCP – UDP• Get information of network• Push notification• Live titles

New features in Windows Phone 7.1

• Visual Basic support• Advertising SDK• Web Browser control == IE9. Speed & HTML5• Local database == SQL CE• Isolated storage explorer• Add new launchers and choosers• Allow read only access user’s contacts & calendar• Program camera (raw frame, adjust focus)

New features in Windows Phone 7.1

• Scheduler task• Encrypted credential store• Many and many more• ODATA Client !

OData for Windows Phone 7.1

WCF Data ServiceEntity

Framework Provider

EDM

URI

HTTP

URI

URI OData feed

OData for Windows Phone 7.1

• DataServiceCollection<T> Extends ObservableCollection<T> Automatic change tracking

• DataServiceContext Data querying & updating Client side change tracking DataServiceQuery<TEntity> properties

OData for Windows Phone 7.1• DataServiceCollection<T>

LoadAsync(IQueryable<T>) 1. LINQ to DataServiceQuery<T>2. URI

LoadCompleted event• Optional Handler• Handle errors, perform additional work

OData for Android

OData for iOS

• http://odataobjc.codeplex.com/• See video demo

WEB FOR MOBILEHTML5, CSS3, JavaScript

Native app development pros -cons• Pros:– Performance– Features rich: camera, GPS, accelerometer, compass,

calendar, contacts, SMS, …– GUI & usability fine tune

• Cons:– Different programming languages: Windows Phone

(C#, Visual Basic), Android (Java), iOS (Objective C)– Learning curve & maintaining cost is high

1. HTML 5- CSS3-JavaScript: PhoneGap, jQueryMobile, jQTouch, Sencha Touch,….

2. Appcelerator’s Titanium Mobile: converts JavaScript to symbolic files then compile to native apps

3. Porting apps: reuse code/ resource , modify code to adapt to each platform.

Demo

• WebMobile on PC• WebMobile on WindowsPhone• WebMobile on Android

VISUAL STUDIO LIGHT SWITCH

Deploying LightSwitch apps

Data sources in LightSwitch

SharePoint 2010

SQL Server

LightSwitch ArchitectureCl

ient

Tie

r

Mid

dle

Tier

Dat

a Ac

cess

SQL

Serv

erAz

ure

Shar

ePoi

nt

Oth

er …

Silverlight 4.0Desktop

HostBrowser

Host

Methods ControlsScreens

Data WorkspaceWCF RIA Services

ASP.NET 4.0

IIS 7.0

Submit Pipeline Queries

Data WorkspaceWCF RIA Services

The LightSwitch Development Experience

StartDescribe your data

Create screens for common tasks

RefineAuthor business logic

Customize screen layouts

Define custom queries

ExtendDefine custom queries

Create custom Silverlight controls

Integrate with custom data sources

Requirements

• Visual Studio Pro (or higher) + SP1• Visual Studio LightSwitch• Optional– Visual Studio SDK: For building VSIX

packages– LightSwitch Extension Development Kit

(coming soon)

LESSON LEARNED IN DEVELOPINGMULTIPLATFORM APPLICATIONS

• GUI – ARCHITECT- DB• Team Collaboration: Vision, Process, Attitude &

Tool• Development Environment• Transparent communication

QUESTION & ANSWER