Best Practices in Mobile Development: Building Your First jQuery Mobile App
Building a Mobile Application for · PDF file · 2017-01-28• The theme of...
Transcript of Building a Mobile Application for · PDF file · 2017-01-28• The theme of...
![Page 1: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/1.jpg)
DotNetNuke Corp. Confidential © 2012 All rights reserved.
BUILDING A MOBILE APPLICATION FOR DOTNETNUKE Bruce Chapman Director, iFinity Software 7th November 2012
![Page 2: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/2.jpg)
2 DotNetNuke Corp. Confidential © 2011 All rights reserved. 2 DotNetNuke Corp. Confidential © 2012 All rights reserved.
PRESENTATION AGENDA • Brief Introduction to Mobile Applications + DotNetNuke • Demonstrate how to build a Mobile Application that uses Service
Layer of DotNetNuke to interact » Understanding the Service Layer » Building Service Endpoints
• Example Application : “Dnn Dash” – allows access to the Dashboard of a DotNetNuke site
» Building Mobile Application
![Page 3: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/3.jpg)
3 DotNetNuke Corp. Confidential © 2011 All rights reserved. 3 DotNetNuke Corp. Confidential © 2012 All rights reserved.
MOBILE APPLICATIONS • Purpose built (device specific) Mobile Applications are a superior
way to deliver a mobile experience • Html 5 can provide a rich experience, but cannot match purpose
built at this point • The theme of Mobile App vs Mobile Site is currently a hot topic
of debate
![Page 4: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/4.jpg)
4 DotNetNuke Corp. Confidential © 2011 All rights reserved.
HTML 5 VS NATIVE APPS
• Write once – run anywhere
• Server-side code easily changed
• Sandboxed, no access to features
• No App Store Presence
• Speed dependent on connection
• Direct monetization more difficult
Html 5
• App per platform
• May require lengthy release process
• Full access to device features – camera, GPS
• In-device discovery + purchase
• Faster + more stable
• Monetization by app or in-app purchase easy
Native App
Conclusion •Choose according to requirements
•Services layer may be largely the same in either case
![Page 5: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/5.jpg)
5 DotNetNuke Corp. Confidential © 2011 All rights reserved. 5 DotNetNuke Corp. Confidential © 2012 All rights reserved.
MOBILE APPLICATIONS AND DOTNETNUKE
• DotNetNuke 6.2 introduced the Services Layer, which exposes key DNN API features
• DotNetNuke 7.0 redefines the Services Layer, which is built on top of the WebAPI services
• DNN Services layer is easily extended for module specific purposes
• An entire new field of DotNetNuke application development has been created
![Page 6: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/6.jpg)
6 DotNetNuke Corp. Confidential © 2011 All rights reserved. 6 DotNetNuke Corp. Confidential © 2012 All rights reserved.
MOBILE APPLICATION TYPES
• Corporate development : customising apps for in-house use on mobile + tablet platforms
• Commercial development : new applications that provider web + mobile experience
• Open Source development : providing applications + back end processes
![Page 7: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/7.jpg)
7 DotNetNuke Corp. Confidential © 2011 All rights reserved. 7 DotNetNuke Corp. Confidential © 2012 All rights reserved.
A NATURAL FIT : MOBILE + CLOUD
![Page 8: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/8.jpg)
8 DotNetNuke Corp. Confidential © 2011 All rights reserved. 8 DotNetNuke Corp. Confidential © 2012 All rights reserved.
BUILDING A DOTNETNUKE MOBILE APPLICATION
![Page 9: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/9.jpg)
9 DotNetNuke Corp. Confidential © 2011 All rights reserved. 9 DotNetNuke Corp. Confidential © 2012 All rights reserved.
UNDERSTANDING THE SERVICE LAYER • 6.2 – Used the MVC Service Layer • 7.0 – Uses the Web API for the Services Layer • Two aspects to layer:
» Built-in DNN API » Extension for Third-party modules
• Provides authentication based on DotNetNuke user accounts and profiles
• Provides simple pattern to design service endpoints • Flexibility in format (Json/Xml/others)
![Page 10: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/10.jpg)
10 DotNetNuke Corp. Confidential © 2011 All rights reserved. 10 DotNetNuke Corp. Confidential © 2012 All rights reserved.
EXTENDING THE SERVICE LAYER • 2 Basic Components to API Extensions
1. Controller • Definition of Methods and layer on top of business logic • Inherits from DnnController
2. RouteMapper • Defines what Urls map to which Controller methods • Inherits from IServiceRouteMapper
![Page 11: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/11.jpg)
11 DotNetNuke Corp. Confidential © 2011 All rights reserved.
EXAMPLE SERVICE LAYER CALL
• Url to call: http://example.com/DesktopModules/DnnDash/API/Dash/Ping
![Page 12: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/12.jpg)
12 DotNetNuke Corp. Confidential © 2011 All rights reserved. 12 DotNetNuke Corp. Confidential © 2012 All rights reserved.
DECONSTRUCTING SERVICES LAYER URL
http://example.com/DesktopModules/DnnDash/API/Dash/Ping • http://example.com => domain name • /DesktopModules => fixed part of Url, denotes module Url • /DnnDash => specifies module • /API => fixed, denotes services layer • /Dash => specifies controller [ DashController ] • /Ping => method name [ Public string Ping() ]
• NOTE: /DesktopModules/DnnDash doesn’t
necessarily have to exist
![Page 13: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/13.jpg)
13 DotNetNuke Corp. Confidential © 2011 All rights reserved.
ROUTEMAPPER REGISTERS URL ROUTES
• MapRoute configures what Urls will work: “DnnDash” /DesktopModules/DnnDash “{controller}/{action}” Class/Method
• /API/Dash/Ping DashController.Ping()
• No other configuration required
![Page 14: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/14.jpg)
14 DotNetNuke Corp. Confidential © 2011 All rights reserved.
SERVICES LAYER DEMONSTRATION
![Page 15: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/15.jpg)
15 DotNetNuke Corp. Confidential © 2011 All rights reserved. 15 DotNetNuke Corp. Confidential © 2012 All rights reserved.
SERVICES AUTHENTICATION • Authentication:
» Identifying & Authorising User accounts » Preventing Unauthorised Access » Avoiding opening exploitable holes » Providing ‘context’ for current user within service calls
• Web-browser based services call use cookie-based authentication (ie AJAX calls)
• Mobile devices use digest authentication to provide authentication
» Username/password pair provided with each call
![Page 16: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/16.jpg)
16 DotNetNuke Corp. Confidential © 2011 All rights reserved. 16 DotNetNuke Corp. Confidential © 2012 All rights reserved.
SERVICES AUTHENTICATION CONT. • Services methods access level can be marked with:
» AllowAnonymous – no authentication » RequiresHost – if true, must be SuperUser » StaticRoles – named DotNetNuke roles
• All ‘regular’ DNN objects are available in context for service calls: » Portal Settings (current portal, alias, settings) » UserInfo (authenticated user)
![Page 17: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/17.jpg)
17 DotNetNuke Corp. Confidential © 2011 All rights reserved. 17 DotNetNuke Corp. Confidential © 2012 All rights reserved.
TIPS FOR WRITING SERVICES • Use RESTful method / parameter naming principles • Stick to common return format in project (Json/Xml/String –
whatever) • Plan for infrequent service calls in Application Design • Be frugal with data going backwards and forwards – this may
require custom serializing of objects
![Page 18: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/18.jpg)
18 DotNetNuke Corp. Confidential © 2011 All rights reserved.
• A service-only module only has an Assembly • Install with ordinary Module install package • DotNetNuke manifest file used to specify
configuration and safe uninstall
INSTALLING SERVICES WITH YOUR MODULE
![Page 19: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/19.jpg)
19 DotNetNuke Corp. Confidential © 2011 All rights reserved. 19 DotNetNuke Corp. Confidential © 2012 All rights reserved.
WRITING A MOBILE APPLICATION - EXAMPLE • ‘DnnDash’ application on Windows Phone • Reads installed DotNetNuke dashboard components for display
on mobile devices • Uses DnnDash services layer to send back Xml of dashboard
information • Host-level access required to run • DnnDash module/phone app available from dnndash.com • http://dnndashservice.codeplex.com/ for source code
![Page 20: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/20.jpg)
20 DotNetNuke Corp. Confidential © 2011 All rights reserved. 20 DotNetNuke Corp. Confidential © 2012 All rights reserved.
ACCESSING SERVICES FROM WINDOWS PHONE • Uses System.Net.HttpWebRequest
» Asynchronous method » Check Http status code to monitor correct authentication (401 returned
when not authenticated)
• Each call from the device provides user authentication username/password pair
• Uses Xml from Service call to create UI
![Page 21: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/21.jpg)
21 DotNetNuke Corp. Confidential © 2011 All rights reserved. 21 DotNetNuke Corp. Confidential © 2012 All rights reserved.
DNN DASH PHONE APP DEMO • https://play.google.com/store/apps/details?id=com.rm.dnndash
&feature=search_result • Search ‘DnnDash’ on the Google store
• Windows Phone 7 version still in Approval, but should be on the
Windows Store soon
• Connect to dnndash.com • U : mobiledemo / P : dnn2012
![Page 22: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/22.jpg)
22 DotNetNuke Corp. Confidential © 2011 All rights reserved. 22 DotNetNuke Corp. Confidential © 2012 All rights reserved.
DNN DASH PHONE APP DEMO
![Page 23: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/23.jpg)
23 DotNetNuke Corp. Confidential © 2011 All rights reserved.
ANDROID VERSION SCREENSHOTS
![Page 24: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/24.jpg)
24 DotNetNuke Corp. Confidential © 2011 All rights reserved.
AUTHENTICATING PHONE USER
• Username/Password supplied with each call
• Defaults to Digest Authentication – Username/password not plaintext
![Page 25: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/25.jpg)
25 DotNetNuke Corp. Confidential © 2011 All rights reserved. 25 DotNetNuke Corp. Confidential © 2012 All rights reserved.
• Mobile requests data using Asynchronous Web Request. • Response body is read from Response.GetResponseStream() • Once response is received, conversion to the response format • Example uses both Xml and Json responses
REQUESTING DATA FROM SERVICE
![Page 26: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/26.jpg)
26 DotNetNuke Corp. Confidential © 2011 All rights reserved. 26 DotNetNuke Corp. Confidential © 2012 All rights reserved.
POSTING DATA TO A SERVICE • Posting is much the same as retrieving data • Post generally means changing server state • Posts should be idempotent • Failure should allow for re-submit without losing client state
![Page 27: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/27.jpg)
27 DotNetNuke Corp. Confidential © 2011 All rights reserved. 27 DotNetNuke Corp. Confidential © 2012 All rights reserved.
CONSIDERATIONS FOR MOBILE APP DESIGN • Store-posted apps can have lead-times for changes in design • DotNetNuke modules can be changed + patched immediately • Therefore, introduce flexibility into design that is data-driven,
side-stepping requirements to re-release mobile clients
![Page 28: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/28.jpg)
28 DotNetNuke Corp. Confidential © 2011 All rights reserved. 28 DotNetNuke Corp. Confidential © 2012 All rights reserved.
CONCLUSIONS • Mobile Internet usage will soon overtake fixed line internet, if it
hasn’t already • Hardware sales growth in mobile devices outstrips desktop
computing • DotNetNuke provides a perfect bridge between mobile devices
and your data, especially if you want to put it in the cloud • Building modules for the services layer is simple and fast • Mobile Apps are the next big thing in DotNetNuke
![Page 29: Building a Mobile Application for · PDF file · 2017-01-28• The theme of Mobile App vs Mobile Site is currently a hot topic ... DNN DASH PHONE APP DEMO ... Building a Mobile Application](https://reader031.fdocuments.in/reader031/viewer/2022030505/5ab258ea7f8b9a7e1d8d48df/html5/thumbnails/29.jpg)
29 DotNetNuke Corp. Confidential © 2011 All rights reserved. 29 DotNetNuke Corp. Confidential © 2012 All rights reserved.
QUESTIONS • Dnn Dash application source code available from
http://dnndashservice.codeplex.com/ » Dnn Service Layer » Dnn Dash Desktop App » Dnn Dash Windows Phone App » Android Phone App
• Slides available at http://www.slideshare.net/brchapman
• Follow me on twitter : @brucerchapman