How to Troubleshoot Apps for the Modern Connected Worker
ITCamp 2013 - Melania Danciu - HTML5 apps with LightSwitch
1. itcampro@ itcamp13# Premium conference on Microsoft technologies
HTML5 apps with LightSwitch
Melania Danciu, Solution Architect,
http://mela.ro
LightSwitch
2. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHuge thanks to our sponsors!
3. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileMela
Engineer - Polytechnic University of Timisora
Software developer
Solution Architect at Haufe-Lexware
Speaker
@melaniadanciu
http://mela.ro
5. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
“The easiest way to create modern line of
business applications for the enterprise.”
Jay Schmelzer
LightSwitch
6. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAgenda Today
1. Business
Application
• Desktop, Web
and Mobile
2. Tools we
need
• LightSwitch
3. Build
• Server
• Desktop/Web
• Mobile
4. Deployment
• Azure/IIS
7. itcampro@ itcamp13# Premium conference on Microsoft technologies
No code at all and have access from every were
commons.wikimedia.org
9. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileICT Facts and Figures
http://www.itu.int/en/ITU-D/Statistics/Documents/facts/ICTFactsFigures2013.pdf
10. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobilecomScore - EU SmartPhones
http://www.comscoredatamine.com/2013/03/smartphones-reach-majority-in-all-eu5-countries/
11. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileBusiness App on Mobile
Data base
• Tables, Queries
Server
• Define contracts
• Has custom logic
Administration
• User Interface
• Validations
• Data binding
• Export to other
platforms
Mobile App
• User interface
• Validation
• Data binding
• Roles and rights
Deployments -
Azure
• Data Base
• Server
• Administration
• Mobile App
13. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileLightSwitch
Has
important
tools
Does the
common
tasks for us
Makes us use
modern
technologies
Uses the
most used
architecture
patterns
Creates
Business
Applications
15. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileA little bit of wizardry…
16. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileLets Install it…
Visual Studio 2012 update 2
17. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileLight Switch
Desktop app
Office integration
Not so touch friendly
Get the data in
Mobile App
Made to be use on the go
Touch friendly
Consuming the date
18. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileWith LightSwitch HTML Client
http://msdn.microsoft.com/en-us/vstudio/htmlclient.aspx
19. itcampro@ itcamp13# Premium conference on Microsoft technologies
DECIDE WHAT YOU WANT TO
BUILD
After you have the tools…
20. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileConference App
Data Base
•Speakers
•Presentations
•Attendees
•User Management
Server
•Protect the app by
having roles and
rights and custom
filters based on
them
Desktop App
•Administer easy,
make reports, have
an overview
HTML Client
•Access every ware,
give access to
speakers and
attendees
Publish it to
Azure
•Make it available
22. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileLightSwitch
“LightSwitch applications use the modern .NET stack of technologies, and
wrap them in an abstraction layer optimized for data management and
maintenance. LightSwitch makes it possible to build data-centric applications
quickly, through visual means.”
“With LightSwitch, you won’t be writing the same code repeatedly to provide data
access 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 will
be high-value code, rather than mere ‘plumbing’. “
23. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileLanguages and tools
Languages
• C#
• VB
What we can use…
• Linq
• RIA Services
• Entity Framework
• Web API
• XAML
• HTML & Java Script
24. itcampro@ itcamp13# Premium conference on Microsoft technologies
What about HTML Client
A companion to Silverlight application
27. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
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 theme
HTML Client - Summary
28. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Simple self-service applications
– Paper on a clipboard
• Field operations
– Contoso apps – Moving Apps
• Interactive Content Catalog & Sales
– Exploratory UI
3 different types
30. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileOver All Architecture - msdn
http://msdn.microsoft.com/en-us/vstudio/gg491708
31. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
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 addressable
resources identified in the URI.
Conceptually, OData is a way of performing database-style CRUD using HTTP verbs
Create : POST
Read: GET
Update: PUT
Delete: DELETE
http://<your application url>/<Service name>.svc/<resource>
32. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileLightSwitch as a Data Source
http://msdn.microsoft.com/en-us/library/vstudio/hh973174.aspx
34. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileDeployment - msdn
http://msdn.microsoft.com/en-us/vstudio/gg491708
35. itcampro@ itcamp13# Premium conference on Microsoft technologies
LETS BUILD THE APP
We know what we want and we know with what tools
http://www.careerattraction.com
36. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileCreate a new Project
Having 2 choices
37. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileUpgrade your Project – If needed
42. itcampro@ itcamp13# Premium conference on Microsoft technologies
In the old style way
CREATE ADMINISTRATION
SCREENS
http://www.careerattraction.com
46. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileSet Client As Default
0 – 1 Silverlight Client
&
0 – 1 Mobile Client
47. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAdd Screens
http://msdn.microsoft.com/library/jj674623.aspx
49. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAccess it from every device
about-google-android.blogspot.com
50. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAccess it every were
www.forbes.com
51. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileCustomize screens
Data which
will be bound Screen Designer
DB
Screens
52. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileBuild navigation
Different modes to
display a list
Already created a detail view
of the presentation
Handle the tap event
on a item
53. itcampro@ itcamp13# Premium conference on Microsoft technologies
LETS SEE HOW IT WORKS
The Admin and the Client
54. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• The Client App/Admin App with the list and
the details
• Set starting page
• Computed properties
• Custom Controls
• Local Property to HTML Client
• The possibility to view, edit and delete data
out of the box
• Give roles and rights
What we’ve seen
55. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileRender new UI
myapp.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/
59. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileThemeRoller – jQuery Mobile
60. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Add Global.asax
Web API
protected 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. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
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. itcampro@ itcamp13# Premium conference on Microsoft technologies
AZURE DEPLOYMENT
DEMO - Windows Azure Portal
78. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
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 the
data from LightSwitch
• Many faces for your app
Options and possibilities
79. itcampro@ itcamp13# Premium conference on Microsoft technologies
MAKE THE PERFECT CHOICE FOR
YOUR APPLICATION
80. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
“The easiest way to create modern line of
business applications for the enterprise.”
Jay Schmelzer
LightSwitch
82. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileResources
http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/DEV347 Jay Schmelzer
http://blogs.msdn.com/b/lightswitch/archive/2012/06/12/early-look-at-
the-visual-studio-lightswitch-html-client-joe-binder-beth-massi.aspx
Beth Massi &
Joe Binder
http://msdn.microsoft.com/en-US/library/jj733571.aspx Local Property
http://msdn.microsoft.com/en-US/library/jj733569.aspx Custom Control
http://msdn.microsoft.com/en-US/library/jj733570.aspx Control navigation
http://blogs.msdn.com/b/lightswitch/archive/2012/06/21/the-lightswitch-
html-client-an-architectural-overview.aspx
HTML Client
Architecture
http://msdn.microsoft.com/en-us/library/vstudio/hh973174.aspx Data Source
http://blogs.msdn.com/b/lightswitch/archive/2012/03/22/lightswitch-
architecture-odata.aspx
OData