Your SlideShare is downloading. ×
Social Photos - My presentation at Microsoft Tech Day
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Social Photos - My presentation at Microsoft Tech Day


Published on

Author: Trinh Minh Cuong …

Author: Trinh Minh Cuong
Nguyen Hoang Ha

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Tạisaochúngtôiluônnhấnmạnhviệcthiếtkếgiaodiệnngườidùngcàng chi tiếtcànggiốngthậtcàngtốt. Trảinghiệmgiaodiệnsẽquyếtđịnhkiếntrúc – côngnghệdựán. Vídụ: khibìnhchúbứcảnhvàcậpnhậttrựctiếptrêntrangthìdẫnđếnphảidùng AJAX. Khimuốnsửaảnhmàkhôngdùng Applet, Flash hay SilverLightnhúngthìchúng ta phảinghĩđến HTML5.Do đó, GUI prototype + simulation càngthậtbaonhiêu, chúng ta sẽgiúpđộipháttriểntránhđilạchướnglan man ở nhữnggiaiđoạncuối.
  • The Web Application Description Language (WADL) is an XML-based file format that provides a machine-readable description of HTTP-based web applications. These applications are typically REST web services
  • MộturlliênquanđếnmộttàinguyênNếu verb khácnhausẽchocáckếtquảtươngtáckhácnhau
  • REST: communication patternOdata: protocol
  • GET, PUTPOST:User-Agent: FiddlerContent-Type: application/jsonHost: localhost:88Content-Length:41---{“Name”: “Brandnames”, “Description”: “Famous brandsname such as Windows, iPhone, Ferrari….”}
  • SOAP use wrapper so it is heavier
  • Like
  • Demo by Fiddler 2http://localhost/socialphotos/photocloud.svc/CategoriesUser-Agent: FiddlerHost: localhostAccept: application/jsonhttp://localhost/socialphotos/photocloud.svc/CategoriesUser-Agent: FiddlerHost: localhostAccept: application/atom+xml
  • The two main classes of the client library are the DataServiceContext class and the DataServiceCollection(Of T) class: DataServiceCollection(Of T) +The DataServiceCollection(Of T) class,which inherits from the ObservableCollection class +The DataServiceCollection(Of T) classrepresents a dynamic data collection that provides notifications when items get added to or removed from the collection. These notifications enable the DataServiceContext to track changes automatically without your having to explicitly call the change tracking methods. DataServiceContext + The DataServiceContext class encapsulates operations that are executed against a specific data service. + However, the DataServiceContext maintains the state of entities on the client between interactions with the data service and in different execution phases of the application. This enables the client to support features such as change tracking and identity management
  • Transcript

    • 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 integratesMicrosoft and non Microsofttechnologies seamlessly
    • 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 / – 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 work1. Hand sketch on white board2. Capture by phone camera3. Write script to explain4. Email or check-in to collaboration portal
    • 9. GUI mock up: work betterSee 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 SQLServer, 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. SDKsJavaScript
    • 23. ProducersSQL 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 PhotosLINQ where p.Likes > 0 orderby p.Likes descending select p).Skip(4).Take(2) http://localhost:88/SocialPhotos/PhotoCloudURI .svc/Photos()?$filter=(cast(Likes,Edm.Int32)) gt 0&$orderby=Likes desc&$skip=4&$top=2
    • 28. REST ODataEssence Pattern, architecture style, Protocol enabling REST or approachQuerying capability N/A YOrder returned Have to create custom Ydata methodPaging returned Have to create custom Ydata method
    • 29. SOAP RESTVerb POST POST, GET, DELETE, PUTResource Identification N/A YTransport protocol HTTP only HTTP, TCP, SMTP, JMS, MQ, BEEP, IIOPPayload format SOAP format POX, JSONBandwidth Heavier LighterUse proxy in client side Y NToolkit required Y NAuthorization Depend on app developers Webserver can help (with verbs)Advantages Easy to consume Human Readable Results Easy to build (no toolkit)
    • 30. OData response formats
    • 31. WCF Data Service - Interceptors// Define a query interceptor for the Orders entity set.[QueryInterceptor("Orders")] publicExpression<Func<Order, bool>> OnQueryOrders()Add custom logic to operation or to entity query – Validation – Restriction – Authorization – Logging
    • 32. [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"); } }}
    • 33. CLIENT SIDE DEVELOPMENTWindows Phone 7.1 – Android – iOS – Web Mobile
    • 34. 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
    • 35. 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)
    • 36. New features in Windows Phone 7.1• Scheduler task• Encrypted credential store• Many and many more• ODATA Client !
    • 37. OData for Windows Phone 7.1 URI WCF Data Service HTTP Entity EDM URI OData feed Framework Provider URI
    • 38. 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
    • 39. 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
    • 40. OData for Android
    • 41. OData for iOS•• See video demo
    • 42. WEB FOR MOBILEHTML5, CSS3, JavaScript
    • 43. 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
    • 44. 1. HTML 5- CSS3-JavaScript: PhoneGap, jQueryMobile, jQTouch, Sencha Touch,….2. Appcelerator’s Titanium Mobile: converts JavaScript to symbolic files then compile to native apps3. Porting apps: reuse code/ resource , modify code to adapt to each platform.
    • 45. Demo• WebMobile on PC• WebMobile on WindowsPhone• WebMobile on Android
    • 47. Deploying LightSwitch apps
    • 48. Data sources in LightSwitch SQL ServerSharePoint 2010
    • 49. LightSwitch Architecture Data Access Middle TierClient Tier Submit Screens Methods Controls Queries Pipeline Data Workspace Data Workspace
    • 50. 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
    • 51. Requirements• Visual Studio Pro (or higher) + SP1• Visual Studio LightSwitch• Optional – Visual Studio SDK: For building VSIX packages – LightSwitch Extension Development Kit (coming soon)
    • 53. • GUI – ARCHITECT- DB• Team Collaboration: Vision, Process, Attitude & Tool• Development Environment• Transparent communication