social photos - my presentation at microsoft tech day
DESCRIPTION
Author: Trinh Minh CuongNguyen Hoang HaTRANSCRIPT
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
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
