ITCamp 2013 - Melania Danciu - HTML5 apps with LightSwitch

852 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
852
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

ITCamp 2013 - Melania Danciu - HTML5 apps with LightSwitch

  1. 1. itcampro@ itcamp13# Premium conference on Microsoft technologiesHTML5 apps with LightSwitchMelania Danciu, Solution Architect,http://mela.roLightSwitch
  2. 2. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileHuge thanks to our sponsors!
  3. 3. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileMelaEngineer  - Polytechnic University of TimisoraSoftware developerSolution Architect at Haufe-LexwareSpeaker@melaniadanciuhttp://mela.ro
  4. 4. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobilehttp://mela.ro
  5. 5. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile“The easiest way to create modern line ofbusiness applications for the enterprise.”Jay SchmelzerLightSwitch
  6. 6. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAgenda Today1. BusinessApplication• Desktop, Weband Mobile2. Tools weneed• LightSwitch3. Build• Server• Desktop/Web• Mobile4. Deployment• Azure/IIS
  7. 7. itcampro@ itcamp13# Premium conference on Microsoft technologiesNo code at all and have access from every werecommons.wikimedia.org
  8. 8. itcampro@ itcamp13# Premium conference on Microsoft technologiesMOBILE APPS FACTSGlobal and Europe
  9. 9. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileICT Facts and Figureshttp://www.itu.int/en/ITU-D/Statistics/Documents/facts/ICTFactsFigures2013.pdf
  10. 10. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobilecomScore - EU SmartPhoneshttp://www.comscoredatamine.com/2013/03/smartphones-reach-majority-in-all-eu5-countries/
  11. 11. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileBusiness App on MobileData base• Tables, QueriesServer• Define contracts• Has custom logicAdministration• User Interface• Validations• Data binding• Export to otherplatformsMobile App• User interface• Validation• Data binding• Roles and rightsDeployments -Azure• Data Base• Server• Administration• Mobile App
  12. 12. itcampro@ itcamp13# Premium conference on Microsoft technologiesLIGHTSWITCHTools we need…
  13. 13. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileLightSwitchHasimportanttoolsDoes thecommontasks for usMakes us usemoderntechnologiesUses themost usedarchitecturepatternsCreatesBusinessApplications
  14. 14. itcampro@ itcamp13# Premium conference on Microsoft technologiesWITH NO CODE…And all of this
  15. 15. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileA little bit of wizardry…
  16. 16. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileLets Install it…Visual Studio 2012 update 2
  17. 17. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileLight SwitchDesktop appOffice integrationNot so touch friendlyGet the data inMobile AppMade to be use on the goTouch friendlyConsuming the date
  18. 18. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileWith LightSwitch HTML Clienthttp://msdn.microsoft.com/en-us/vstudio/htmlclient.aspx
  19. 19. itcampro@ itcamp13# Premium conference on Microsoft technologiesDECIDE WHAT YOU WANT TOBUILDAfter you have the tools…
  20. 20. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileConference AppData Base•Speakers•Presentations•Attendees•User ManagementServer•Protect the app byhaving roles andrights and customfilters based onthemDesktop App•Administer easy,make reports, havean overviewHTML Client•Access every ware,give access tospeakers andattendeesPublish it toAzure•Make it available
  21. 21. itcampro@ itcamp13# Premium conference on Microsoft technologiesA LITTLE BIT MORE ABOUT IT
  22. 22. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileLightSwitch“LightSwitch applications use the modern .NET stack of technologies, andwrap them in an abstraction layer optimized for data management andmaintenance. LightSwitch makes it possible to build data-centric applicationsquickly, through visual means.”“With LightSwitch, you won’t be writing the same code repeatedly to provide dataaccess functionality or the user interface needed around it. You can write no code,a little code, or a significant amount – and you can rest assured that it willbe high-value code, rather than mere ‘plumbing’. “
  23. 23. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileLanguages and toolsLanguages• C#• VBWhat we can use…• Linq• RIA Services• Entity Framework• Web API• XAML• HTML & Java Script
  24. 24. itcampro@ itcamp13# Premium conference on Microsoft technologiesWhat about HTML ClientA companion to Silverlight application
  25. 25. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileHTML Client - msdn
  26. 26. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileContoso Moving in C#
  27. 27. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Touch oriented• Complementary to Silverlight App• Consistent design experience• Standards Based• Predefined screens• Custom UI with Js and CSS• Debug with DOM Explorer• Share Point Integration• Have it in Office 365• Running on Smart Phones and Tablets• Have a Light and a Dark themeHTML Client - Summary
  28. 28. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Simple self-service applications– Paper on a clipboard• Field operations– Contoso apps – Moving Apps• Interactive Content Catalog & Sales– Exploratory UI3 different types
  29. 29. itcampro@ itcamp13# Premium conference on Microsoft technologiesARCHITECTURE
  30. 30. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileOver All Architecture - msdnhttp://msdn.microsoft.com/en-us/vstudio/gg491708
  31. 31. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileOdata - http://www.odata.org/OData is a a REST protocol based on existing internet standards including HTTP,AtomPub, JSON, and hyper-media design patterns.A main feature of REST APIs is the use of existing HTTP verbs against addressableresources identified in the URI.Conceptually, OData is a way of performing database-style CRUD using HTTP verbsCreate : POSTRead: GETUpdate: PUTDelete: DELETEhttp://<your application url>/<Service name>.svc/<resource>
  32. 32. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileLightSwitch as a Data Sourcehttp://msdn.microsoft.com/en-us/library/vstudio/hh973174.aspx
  33. 33. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileOdata - msdn
  34. 34. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileDeployment - msdnhttp://msdn.microsoft.com/en-us/vstudio/gg491708
  35. 35. itcampro@ itcamp13# Premium conference on Microsoft technologiesLETS BUILD THE APPWe know what we want and we know with what toolshttp://www.careerattraction.com
  36. 36. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileCreate a new ProjectHaving 2 choices
  37. 37. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileUpgrade your Project – If needed
  38. 38. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileA new structure
  39. 39. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileCreate Data Base
  40. 40. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileCreate Custom DB
  41. 41. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileCreate Custom DB
  42. 42. itcampro@ itcamp13# Premium conference on Microsoft technologiesIn the old style way CREATE ADMINISTRATIONSCREENShttp://www.careerattraction.com
  43. 43. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAdministration
  44. 44. itcampro@ itcamp13# Premium conference on Microsoft technologiesCREATE HTML CLIENT
  45. 45. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAdd a new client
  46. 46. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileSet Client As Default0 – 1 Silverlight Client&0 – 1 Mobile Client
  47. 47. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAdd Screenshttp://msdn.microsoft.com/library/jj674623.aspx
  48. 48. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAccess it every were
  49. 49. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAccess it from every deviceabout-google-android.blogspot.com
  50. 50. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAccess it every werewww.forbes.com
  51. 51. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileCustomize screensData whichwill be bound Screen DesignerDBScreens
  52. 52. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileBuild navigationDifferent modes todisplay a listAlready created a detail viewof the presentationHandle the tap eventon a item
  53. 53. itcampro@ itcamp13# Premium conference on Microsoft technologiesLETS SEE HOW IT WORKSThe Admin and the Client
  54. 54. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• The Client App/Admin App with the list andthe details• Set starting page• Computed properties• Custom Controls• Local Property to HTML Client• The possibility to view, edit and delete dataout of the box• Give roles and rightsWhat we’ve seen
  55. 55. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileRender new UImyapp.BrowsePresentations.RowTemplate_render = function (element, contentItem) {// Write code here.var itemTemplate = $(<div></div>);var title = $(<h3> + contentItem.value.Title + <h3>);var day = $(<h3> + contentItem.value.Day.toFormat(W) + </h3>);var Time = $(<span> + contentItem.value.StartTime.toFormat(H) + :+ contentItem.value.StartTime.toFormat(I)+ "-" ++ contentItem.value.EndTime.toFormat(H) + :+ contentItem.value.EndTime.toFormat(I) + </span>);title.appendTo($(itemTemplate));day.appendTo($(itemTemplate));Time.appendTo($(itemTemplate));itemTemplate.appendTo($(element));};http://livingmachines.net/2009/04/even-more-javascript-extensions-dates/
  56. 56. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileGive access
  57. 57. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAccess Control Methods
  58. 58. itcampro@ itcamp13# Premium conference on Microsoft technologiesCUSTOMIZE UITheme Roller
  59. 59. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileThemeRoller – jQuery Mobile
  60. 60. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Add Global.asaxWeb APIprotected void Application_Start(object sender, EventArgs e){RouteTable.Routes.MapHttpRoute(name: "DefaultApi",routeTemplate:"api/presentations/{controller}/{id}",defaults: new{id = System.Web.Http.RouteParameter.Optional});}
  61. 61. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileWEB API// GET api/<controller>public IEnumerable<Presentation> Get(){using (ServerApplicationContext context =ServerApplicationContext.CreateContext()){var reportResult =context.DataWorkspace.ApplicationData.Presentations.GetQuery();return reportResult.Execute();}}• Add an WEB API Controller
  62. 62. itcampro@ itcamp13# Premium conference on Microsoft technologiesAZURE DEPLOYMENTDEMO - Windows Azure Portal
  63. 63. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileCreate new website
  64. 64. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileConfigure Data Base
  65. 65. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileManage DB
  66. 66. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAdd IP
  67. 67. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobilePublish
  68. 68. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileComplete Application
  69. 69. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileChoose your subscription
  70. 70. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileService type
  71. 71. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileApplication URL
  72. 72. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileAuth
  73. 73. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileHTTPS
  74. 74. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileData connections
  75. 75. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobilePublish
  76. 76. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileSilverlight
  77. 77. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileHTML
  78. 78. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Business Apps with all components with LightSwitch• Service endpoints/OData/WEB API• HTML Client in LightSwitch/Native Client• Azure deployment• A custom App made with other technology which gets thedata from LightSwitch• Many faces for your appOptions and possibilities
  79. 79. itcampro@ itcamp13# Premium conference on Microsoft technologiesMAKE THE PERFECT CHOICE FORYOUR APPLICATION
  80. 80. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile“The easiest way to create modern line ofbusiness applications for the enterprise.”Jay SchmelzerLightSwitch
  81. 81. itcampro@ itcamp13# Premium conference on Microsoft technologiesQ & AWhat’s your opinion about it?
  82. 82. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileResourceshttp://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/DEV347 Jay Schmelzerhttp://blogs.msdn.com/b/lightswitch/archive/2012/06/12/early-look-at-the-visual-studio-lightswitch-html-client-joe-binder-beth-massi.aspxBeth Massi &Joe Binderhttp://msdn.microsoft.com/en-US/library/jj733571.aspx Local Propertyhttp://msdn.microsoft.com/en-US/library/jj733569.aspx Custom Controlhttp://msdn.microsoft.com/en-US/library/jj733570.aspx Control navigationhttp://blogs.msdn.com/b/lightswitch/archive/2012/06/21/the-lightswitch-html-client-an-architectural-overview.aspxHTML ClientArchitecturehttp://msdn.microsoft.com/en-us/library/vstudio/hh973174.aspx Data Sourcehttp://blogs.msdn.com/b/lightswitch/archive/2012/03/22/lightswitch-architecture-odata.aspxOData

×