Lab: Developing Mobile Web Apps Adage Technologies adagetechnologies.com
Agenda I. PhoneGap II. Ionic III. EPiServer REST Integration IV. Review EPiServer V. Review PhoneGap VI. Q & A
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
About the presenters Mathieu Agee Director of Technology Glenn Lalas Lead Developer
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
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
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
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
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
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
EPiServer code exercise Hints The API controller has been injected with an instance of IContentLoader The API controller contains a helper function called PreProcess
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
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
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 ngrouter configuration (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?
Feel free to reach out with questions Mathieu Agee Director of Technology magee@adagetechnologies.com Glenn Lalas Lead Developer glalas@adagetechnologies.com