itcamp 2013 - melania danciu - html5 apps with lightswitch
DESCRIPTION
TRANSCRIPT
itcampro@ itcamp13# Premium conference on Microsoft technologies
HTML5 apps with LightSwitch
Melania Danciu, Solution Architect,
http://mela.ro
LightSwitch
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHuge thanks to our sponsors!
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobilehttp://mela.ro
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
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
No code at all and have access from every were
commons.wikimedia.org
itcampro@ itcamp13# Premium conference on Microsoft technologies
MOBILE APPS FACTS
Global and Europe
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileICT Facts and Figures
http://www.itu.int/en/ITU-D/Statistics/Documents/facts/ICTFactsFigures2013.pdf
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobilecomScore - EU SmartPhones
http://www.comscoredatamine.com/2013/03/smartphones-reach-majority-in-all-eu5-countries/
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
LIGHTSWITCH
Tools we need…
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
WITH NO CODE…
And all of this
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileA little bit of wizardry…
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileLets Install it…
Visual Studio 2012 update 2
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileWith LightSwitch HTML Client
http://msdn.microsoft.com/en-us/vstudio/htmlclient.aspx
itcampro@ itcamp13# Premium conference on Microsoft technologies
DECIDE WHAT YOU WANT TO BUILD
After you have the tools…
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
A LITTLE BIT MORE ABOUT IT
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’. “
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
What about HTML Client
A companion to Silverlight application
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHTML Client - msdn
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileContoso Moving in C#
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
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
ARCHITECTURE
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileOver All Architecture - msdn
http://msdn.microsoft.com/en-us/vstudio/gg491708
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>
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileLightSwitch as a Data Source
http://msdn.microsoft.com/en-us/library/vstudio/hh973174.aspx
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileOdata - msdn
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileDeployment - msdn
http://msdn.microsoft.com/en-us/vstudio/gg491708
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileCreate a new Project
Having 2 choices
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileUpgrade your Project – If needed
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileA new structure
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileCreate Data Base
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileCreate Custom DB
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileCreate Custom DB
itcampro@ itcamp13# Premium conference on Microsoft technologies
In the old style way
CREATE ADMINISTRATION SCREENS
http://www.careerattraction.com
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAdministration
itcampro@ itcamp13# Premium conference on Microsoft technologies
CREATE HTML CLIENT
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAdd a new client
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileSet Client As Default
0 – 1 Silverlight Client&
0 – 1 Mobile Client
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAdd Screens
http://msdn.microsoft.com/library/jj674623.aspx
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAccess it every were
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAccess it from every device
about-google-android.blogspot.com
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAccess it every were
www.forbes.com
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileCustomize screens
Data which will be bound Screen Designer
DB
Screens
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
LETS SEE HOW IT WORKS
The Admin and the Client
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
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/
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileGive access
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAccess Control Methods
itcampro@ itcamp13# Premium conference on Microsoft technologies
CUSTOMIZE UI
Theme Roller
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileThemeRoller – jQuery Mobile
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}
);}
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
AZURE DEPLOYMENT
DEMO - Windows Azure Portal
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileCreate new website
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileConfigure Data Base
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileManage DB
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAdd IP
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobilePublish
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileComplete Application
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileChoose your subscription
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileService type
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileApplication URL
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAuth
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHTTPS
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileData connections
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobilePublish
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileSilverlight
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHTML
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
MAKE THE PERFECT CHOICE FOR YOUR APPLICATION
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Q & A
What’s your opinion about it?
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