lab: developing mobile web apps - episerver geo-location fencing off-line support. developing mobile...
TRANSCRIPT
Lab: Developing
Mobile Web
Apps
Adage Technologies
adagetechnologies.com
Developing mobile web apps
Agenda
I. PhoneGap
II. Ionic
III. EPiServer REST Integration
IV. Review EPiServer
V. Review PhoneGap
VI. Q & A
Developing mobile web apps
About Adage Technologies
Web, eCommerce, and mobile solutions
helping you engage your customers and
community
Based in Chicago with customers
throughout the US and Europe
2014 EPiServer Partner of the Year
Developing mobile web apps
About the presenters
Mathieu AgeeDirector of Technology
Glenn LalasLead Developer
Developing mobile web apps
PhoneGap/Cordova
HTML 5 based apps
OpenSource project
Build the application in a browser
Debug in a browser
Deploy as an app
Custom apps
Push notifications
Cross-app calls (Facebook, In-app
payments, etc.)
Beacons
Geo-location fencing
Off-line support
Developing mobile web apps
Ionic Framework
Angular based toolkit for Cordova
Pre-built directives
Native speed CSS animations
Custom directives
Swipe support
Active community
Unit testing available via Angular
Developing mobile web apps
EPiServer integration
Consistent editor experience
Manage app content and the website from one location
Create new app content easily via the CMS
Add rich media content including images and videos
“Share” content from the website to the app
Batch and schedule content changes to the app
Use visitor groups to drive personalize content within
the app
Drive app navigation from EPiServer tree structure
Developing mobile web apps
EPiServer content creation
Page types for specific app features
Page type for beacon content
Page type for push notification content
Page type for configuration settings within the app
Page type for custom code features
Developing mobile web apps
Items to keep in mind
Content pre/post-processing
Internal website links should be re-routed to app page links
Internal image links should be updated before sending to the local device
Links to external sites must break out of the app browser context (in-app browser
support)
Invalid HTML will break the app
EPiServer Code
Review/Exercise
Developing mobile web apps
EPiServer code exercise
Instructions
1. Add an XhtmlString Property called “Content” to the Mobile Content Page type (MobilePageData.cs)
2. Finish the method Get(int id) method of the MobilePageDataController Web API controller
a. The id parameter of this method will be the EPiServer page ID for an instance of the MobilePageDatapage type
b. This method should return two parameters:
• “title” – The Title property from the MobilePageDataclass
• “content” – The Content property from the MobilePageDataclass, pre-processed to be valid within the app
3. In Edit Mode, create an instance of the MobilePageData page type and populate the “Content”
property
4. Preview the results using: http://localhost:64180/api/mobilepagedata/164
Developing mobile web apps
EPiServer code exercise
Hints
The API controller has been injected with an instance of IContentLoader
The API controller contains a helper function called PreProcess
Developing mobile web apps
PhoneGap in Visual Studio 2015
Integration features
Pre-built template using Ionic
Easily deploy applications to an Android device via USB
VS debugging on device or emulator
Add in plug-ins easily from Cordova or others via VS
Pre-built templates
Can build on a Mac over the network via TACO
Get code via the repository
Developing mobile web apps
PhoneGap gotchas
Everything runs in a local browser window
JS errors will stop the app and not give any default
message to a user
Use CSS animations, jQuery animations will be jittery
Use Google Analytics plug-ins to keep track of behavior
Cookies are not a valid storage mechanism
Test on as many devices as possible
Testing on an Apple device requires an Apple developer
account
PhoneGap Code
Review/Exercise
Developing mobile web apps
PhoneGap Exercise
Instructions
1. Create a new controller with the EPiServeras a duplicate of “about” controller using content ID “174”
(www/app/controllers.js)
2. Create a link to a new menu link named “Directions” (www/app/templates/view-menu.html) with the URL
“#/app/directions”
3. Setup the link in the ngRouterconfiguration (www/app/templates/app.js) to route to the new controller
4. Create a new template file named “view-directions” (www/app/templates/view-directions.html)
5. Verify the new page using the emulator
Bonus!
1. Create a local service to read the app navigation from to make it dynamic from EPiServer
2. Bind the navigation menu to the service
Questions?
Developing mobile web apps
Feel free to reach out with questions
Mathieu Agee
Director of Technology
Glenn Lalas
Lead Developer