social photos - my presentation at microsoft tech day
DESCRIPTION
Author: Trinh Minh CuongNguyen Hoang HaTRANSCRIPT
![Page 1: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/1.jpg)
Social PhotosHow we make it
![Page 2: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/2.jpg)
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
![Page 3: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/3.jpg)
Location based feature
![Page 4: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/4.jpg)
Social Photos integrates Microsoft and non Microsoft technologies seamlesslyhttp://socialphotos.codeplex.com
![Page 5: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/5.jpg)
Step to do #1
• Design a social network–GUI prototyping–Architect design–Database modeling
• Web service: from client-server to client-cloud
![Page 6: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/6.jpg)
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
![Page 7: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/7.jpg)
Design “social photos”
GUI Prototype
Architect
Database
![Page 8: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/8.jpg)
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
![Page 9: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/9.jpg)
GUI mock up: work better
See demo
![Page 10: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/10.jpg)
• 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
![Page 11: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/11.jpg)
MS SQL Server, DB2, Oracle, MySQL, PostgreSQL, SQLite, SAP Sysbase, Informix…
![Page 12: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/12.jpg)
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 ?
![Page 13: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/13.jpg)
Architect: Open, Simple, Efficient
ServerCommunication
Protocol ?
![Page 14: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/14.jpg)
Architect: Open, Simple, Efficient
• Web serviced server• Work well with Entity Framework• Upgrade to Cloud without rewriting client
code
![Page 15: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/15.jpg)
Problems
• Uniform Data Access is hard– Standards exist• ODBC• JDBC• OLEDB• SOAP• WCF Service
• Need a multiplatform-supported web service
![Page 16: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/16.jpg)
HTTP - Websites (1992)
• Support Verbs: CRUD operations– GET: select– PUT: update– POST: insert– DELETE: remove
![Page 17: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/17.jpg)
SOAP web services (2000)
![Page 18: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/18.jpg)
Inside SOAP
• XML messages• HTTP Post only
![Page 19: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/19.jpg)
RESTful web services (2006)• REST: representational State transfer• Each unique URL is a representation of some
objects
![Page 20: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/20.jpg)
A RESTful web service
![Page 21: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/21.jpg)
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
![Page 24: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/24.jpg)
OData and WCF Data Service
![Page 25: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/25.jpg)
• Demo PhotoCloud.svc• Demo using LINQPad to build up query
string
![Page 26: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/26.jpg)
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 27: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/27.jpg)
//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
![Page 28: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/28.jpg)
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
![Page 29: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/29.jpg)
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)
![Page 30: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/30.jpg)
![Page 31: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/31.jpg)
![Page 32: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/32.jpg)
OData response formats
![Page 33: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/33.jpg)
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()
![Page 34: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/34.jpg)
[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"); } }}
![Page 35: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/35.jpg)
CLIENT SIDE DEVELOPMENTWindows Phone 7.1 – Android – iOS – Web Mobile
![Page 36: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/36.jpg)
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
![Page 37: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/37.jpg)
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)
![Page 38: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/38.jpg)
New features in Windows Phone 7.1
• Scheduler task• Encrypted credential store• Many and many more• ODATA Client !
![Page 39: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/39.jpg)
OData for Windows Phone 7.1
WCF Data ServiceEntity
Framework Provider
EDM
URI
HTTP
URI
URI OData feed
![Page 40: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/40.jpg)
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
![Page 41: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/41.jpg)
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
![Page 42: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/42.jpg)
OData for Android
![Page 43: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/43.jpg)
![Page 44: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/44.jpg)
OData for iOS
• http://odataobjc.codeplex.com/• See video demo
![Page 45: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/45.jpg)
WEB FOR MOBILEHTML5, CSS3, JavaScript
![Page 47: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/47.jpg)
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
![Page 48: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/48.jpg)
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.
![Page 49: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/49.jpg)
![Page 50: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/50.jpg)
Demo
• WebMobile on PC• WebMobile on WindowsPhone• WebMobile on Android
![Page 51: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/51.jpg)
VISUAL STUDIO LIGHT SWITCH
![Page 52: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/52.jpg)
![Page 53: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/53.jpg)
Deploying LightSwitch apps
![Page 54: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/54.jpg)
![Page 55: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/55.jpg)
Data sources in LightSwitch
SharePoint 2010
SQL Server
![Page 56: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/56.jpg)
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
![Page 57: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/57.jpg)
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
![Page 58: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/58.jpg)
Requirements
• Visual Studio Pro (or higher) + SP1• Visual Studio LightSwitch• Optional– Visual Studio SDK: For building VSIX
packages– LightSwitch Extension Development Kit
(coming soon)
![Page 59: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/59.jpg)
LESSON LEARNED IN DEVELOPINGMULTIPLATFORM APPLICATIONS
![Page 60: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/60.jpg)
• GUI – ARCHITECT- DB• Team Collaboration: Vision, Process, Attitude &
Tool• Development Environment• Transparent communication
![Page 61: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/61.jpg)
![Page 62: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/62.jpg)
QUESTION & ANSWER
![Page 63: Social Photos - My presentation at Microsoft Tech Day](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c6f45b4a79594e778b4576/html5/thumbnails/63.jpg)