Author: Trinh Minh Cuong Nguyen Hoang Ha

1. Social Photos
How we make it

2. 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

3. Location based feature

4. Social Photos integrates
Microsoft and non Microsoft
technologies seamlessly
http://socialphotos.codeplex.com

5. Step to do #1
• Design a social network
– GUI prototyping
– Architect design
– Database modeling
• Web service: from client-server to client-
cloud

6. 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

7. Design “social photos”
GUI Prototype
Architect
Database

8. GUI mock up: simple but work
1. Hand sketch on white board
2. Capture by phone camera
3. Write script to explain
4. Email or check-in to collaboration portal

9. GUI mock up: work better
See demo

10. Social Photos Database design
• 1 photo is owned by 1 user
• 1 photo is classified by 0-n categories
• 1 user can make 0-n comments on
photo.

11. MS SQL
Server, DB2, Oracle, MySQL, PostgreSQL, SQ
Lite, SAP Sysbase, Informix…

12. 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 script

13. Architect: Open, Simple, Efficient
Communication
Server
Protocol ?

14. Architect: Open, Simple, Efficient
• Web serviced server
• Work well with Entity Framework
• Upgrade to Cloud without rewriting client
code

15. Problems
• Uniform Data Access is hard
– Standards exist
• ODBC
• JDBC
• OLEDB
• SOAP
• WCF Service
• Need a multiplatform-supported web service

16. HTTP - Websites (1992)
• Support Verbs: CRUD operations
– GET: select
– PUT: update
– POST: insert
– DELETE: remove

17. SOAP web services (2000)

18. Inside SOAP
• XML messages
• HTTP Post only

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

20. A RESTful web service

21. 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

22. SDKs
JavaScript

23. Producers
SQL Azure SQL Reporting Services
SharePoint 2010

24. OData and WCF Data Service

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

26. Demo PhotoClound.svc
• Query: GET
• Insert : POST
– Url: http://localhost/SocialPhotos/PhotoCloud.svc/Categories
– Header:
User-Agent: Fiddler
Content-Type: application/json
Content-Type: application/json
Host: localhost:88
Content-Length: 17
– Body: {"Name": "New Category"}
• Update: PUT
– Body: {"Name": "Black and White"}
• Delete : DELETE

27. //page size = 2, get 3rd page of top rated
(from p in Photos
LINQ
where p.Likes > 0
orderby p.Likes descending
select p).Skip(4).Take(2)
http://localhost:88/SocialPhotos/PhotoCloud
URI
.svc/Photos()?$filter=(cast(Likes,'Edm.Int32'))
gt 0&$orderby=Likes desc&$skip=4&$top=2

28. REST OData
Essence Pattern, architecture style, Protocol enabling REST
or approach
Querying capability N/A Y
Order returned Have to create custom Y
data method
Paging returned Have to create custom Y
data method

29. 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 Results
Easy to build (no toolkit)

32. OData response formats

33. WCF Data Service - Interceptors
// Define a query interceptor for the Orders entity set.
[QueryInterceptor("Orders")] public
Expression<Func<Order, bool>> OnQueryOrders()
Add custom logic to operation or to entity query
– Validation
– Restriction
– Authorization
– Logging

34. [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");
}
}
}

35. CLIENT SIDE DEVELOPMENT
Windows Phone 7.1 – Android – iOS – Web Mobile

36. 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

37. 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)

38. New features in Windows Phone 7.1
• Scheduler task
• Encrypted credential store
• Many and many more
• ODATA Client !

39. OData for Windows Phone 7.1
URI
WCF Data Service HTTP
Entity
EDM
URI OData feed
Framework
Provider
URI

40. 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

41. 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

42. OData for Android

44. OData for iOS
• http://odataobjc.codeplex.com/
• See video demo

45. WEB FOR MOBILE
HTML5, CSS3, JavaScript

47. 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

48. 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.

50. Demo
• WebMobile on PC
• WebMobile on WindowsPhone
• WebMobile on Android

51. VISUAL STUDIO LIGHT SWITCH

53. Deploying LightSwitch apps

55. Data sources in LightSwitch
SQL Server
SharePoint 2010

56. LightSwitch Architecture
Data Access
Middle Tier
Client Tier
Submit
Screens Methods Controls Queries
Pipeline
Data Workspace Data Workspace

57. The LightSwitch Development Experience
Describe your data Author business logic Define custom queries
Create screens for Customize screen Create custom
common tasks layouts Silverlight controls
Integrate with custom
Define custom queries
data sources

58. Requirements
• Visual Studio Pro (or higher) + SP1
• Visual Studio LightSwitch
• Optional
– Visual Studio SDK: For building VSIX packages
– LightSwitch Extension Development Kit (coming
soon)

59. LESSON LEARNED IN DEVELOPING
MULTIPLATFORM APPLICATIONS

60. • GUI – ARCHITECT- DB
• Team Collaboration: Vision, Process, Attitude &
Tool
• Development Environment
• Transparent communication

62. QUESTION & ANSWER