Embed Size (px)
Citation preview
Trunica Inc.500 East Kennedy Blvd #300Tampa, FL [email protected]
Cross Platform Mobile Apps With Cordova
and Visual Studio 2015
© Copyright 2015 by Trunica Inc.
Trunica
© Copyright 2015 by Trunica Inc. Contact [email protected]
What is Cordova?
Native Phone OS(iOS, Android, Windows,
Amazon, etc…)
Cord
ova F
ram
ew
ork
Web View
Your Application
HTML5, CSS, JavaScript• Hybrid applications
• Apache project
• Utilizes web standards
© Copyright 2015 by Trunica Inc. Contact [email protected]
What Can You Build With Cordova?
If you can make a great web page you can make a great
app!
© Copyright 2015 by Trunica Inc. Contact [email protected]
Cordova Advantages
• Fast time to market
• Extensible architecture / plugins
• HTML5, CSS, JavaScript
• 95% or higher code sharing
• Vibrant eco-system
© Copyright 2015 by Trunica Inc. Contact [email protected]
Visual Studio & Cordova
• First class project type in Visual Studio 2015 – All editions!
• Debug iOS, Android, and Windows
• Azure mobile services integration
• Emulators included in VS 2015
• Intellisense on JS and common libraries
© Copyright 2015 by Trunica Inc. Contact [email protected]
Environment Setup
What Do You Need?
• Visual Studio 2015, any edition
• Windows 8.1 or later
• 64 Bit Apple Mac or use cloud build services (only for iOS)
• To distribute: Developer account(s)
© Copyright 2015 by Trunica Inc. Contact [email protected]
Basic Cordova App Template
• Folder structure created:/ config.xml
www index.htmlscripts index.js, platformOverides.jscss index.css
resicons OS specific iconsnative OS specific configuration
filesscreens OS specific splash screens
• No plugins added by default
• You “add” platforms to a project / app
DEMO TIME!
© Copyright 2015 by Trunica Inc. Contact [email protected]
• Popular with lots of examples
• Theme builder & icons
• Custom library builder (beta)
• Easy page navigation
• Responsive controls
• Promises support
jQuery + jQuery Mobile
© Copyright 2015 by Trunica Inc. Contact [email protected]
Lets Make A Simple UI
• Single “page” application approach
• Add a couple logical pages (divs)
• Add a few widgets
• Change the theme on a page
• Navigate to a page and back
DEMO TIME!
© Copyright 2015 by Trunica Inc. Contact [email protected]
Other UI Toolkits / Frameworks
• Ionic
• Onsen UI
• Kendo UI
• Mobile Angular UI
• Intel XDK
© Copyright 2015 by Trunica Inc. Contact [email protected]
Debugging An App
• Seamless in Visual Studio for:Android 4.4 or lateriOS 6 or laterWindows Phone 8.0 or later
• Awesome DOM manipulation
• Use weinre for other targets or remote debugging
DEMO TIME!
© Copyright 2015 by Trunica Inc. Contact [email protected]
Backend Services
• Get to data like any other web app: XmlHttpRequest
• Use specific service plugins
• URLs to APIs that return blobs
DEMO TIME!
© Copyright 2015 by Trunica Inc. Contact [email protected]
Plugins
• Plugins for all phone features:LocationMedia capture / playbackIn-app purchaseNotificationsetc…
• Write your own
• Always come with source code
© Copyright 2015 by Trunica Inc. Contact [email protected]
Azure Mobile Services Plugin
• Data access – cloud and on-premises SQL Server, SharePoint, Office 365
• Notification hubs
• Create demo app right from Azure
• Authentication – AD & Social networks
• Easy to scale
© Copyright 2015 by Trunica Inc. Contact [email protected]
Connecting to Azure Mobile Services
• Quickly store table data to cloud in either mobile services storage or SQL server
• Hybrid connection to on premise SQL Server
• Sync data for offline operation
DEMO TIME!
© Copyright 2015 by Trunica Inc. Contact [email protected]
Azure Push Notifications
Image Source: https://azure.microsoft.com/en-us/documentation/articles/notification-hubs-overview/
Traditional PN• Complicates back end• Duplicate code• Multiple interfaces
Hub PN• Simplifies back end• One code base• One interface
© Copyright 2015 by Trunica Inc. Contact [email protected]
Azure Push Notifications
• Broadcast and targeted
• Notification hub benefits:Registration / De-registerTemplate based1 million / month, 500 devices
FREE10 million / month, unlimited
for $10
• Manage & test right from Visual Studio
DEMO TIME!
© Copyright 2015 by Trunica Inc. Contact [email protected]
More Materials & Training
VS Cordova Twitter@VSCordovaTools
Trunica Twitter@Trunica
Preparing your environmentProject layout & structure
User interfaceBackends & databases
DebuggingPlatform tips & quirks
Push notificationsGeo-location
Record & play mediaData storage
Testing your appDeployment to app stores
Training Modules
2 Day training class Nov 4th & 5th
http://training.trunica.net
