Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 [email protected] Cross Platform Mobile Apps...
-
Upload
justin-black -
Category
Documents
-
view
215 -
download
1
Transcript of Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 [email protected] Cross Platform Mobile Apps...
![Page 1: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/1.jpg)
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
![Page 2: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/2.jpg)
© 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
![Page 3: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/3.jpg)
© 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!
![Page 4: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/4.jpg)
© 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
![Page 5: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/5.jpg)
© 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
![Page 6: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/6.jpg)
© 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)
![Page 7: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/7.jpg)
© 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!
![Page 8: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/8.jpg)
© 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
![Page 9: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/9.jpg)
© 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!
![Page 10: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/10.jpg)
© Copyright 2015 by Trunica Inc. Contact [email protected]
Other UI Toolkits / Frameworks
• Ionic
• Onsen UI
• Kendo UI
• Mobile Angular UI
• Intel XDK
![Page 11: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/11.jpg)
© 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!
![Page 12: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/12.jpg)
© 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!
![Page 13: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/13.jpg)
© 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
![Page 14: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/14.jpg)
© 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
![Page 15: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/15.jpg)
© 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!
![Page 16: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/16.jpg)
© 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
![Page 17: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/17.jpg)
© 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!
![Page 18: Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL 33602 info@trunica.com Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bf8f1a28abf838c8d350/html5/thumbnails/18.jpg)
© 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