Mobile App Development Using Appcelerator and DNN WebAPIs
-
Upload
dnn -
Category
Technology
-
view
646 -
download
0
Transcript of Mobile App Development Using Appcelerator and DNN WebAPIs
![Page 1: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/1.jpg)
Ash PrasadSr. Manager Engineering Development, DNN Corp.
![Page 2: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/2.jpg)
About Me – Ash Prasad
DNN Corp
Sr. Manager, Development
Look after Evoq products
Creator of DNN 7.1 Search
Microsoft Asp.Net / IIS MVP
Author: Professional DNN7: Open Source .NET CMS Platform
DnnMobi Creator
CISSP
![Page 3: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/3.jpg)
UI – Look & Feel
Login List of Questions Ask a Question
![Page 4: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/4.jpg)
Mobile Technology Paradigm
• Server Side› Existing DNN Web APIs
- DNN Platform- Evoq Content- Evoq Engage
•Mobile Side› Devices
- iOS, Android, Windows Phone
› Platform- Native, Hybrid, Html5, Responsive
![Page 5: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/5.jpg)
Mobile Frameworks
• Html5
› Apache Cordova› PhoneGap› Icenium (Telerik)
• Native
› Android› iOS
- Objective-C- Swift
• Hybrid
› Xamarin› Appcelerator
![Page 7: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/7.jpg)
Why Appcelerator
• Cross Platform
› iOS, Android, Blackberry, Tizen› Windows Phone (coming)
• MVC Architecture (Alloy)
• JS / Html / CSS (tss)
• No need to learn Native
• All open source - Free
![Page 8: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/8.jpg)
Development Environment
• Mac (Android and iOS)
› 8 GB RAM, SSD
• PC (Android only)
• Titanium Studio
› FREE, Open Source› Alloy MVC framework› Eclipse based
• Genymotion
› FREE - very fast Android emulator
• TiShadow
![Page 9: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/9.jpg)
Development Environment (contd.)
• SublimeText3 (Optional)
› There are plugins for Titanium
• Developer certificates
› Apple and Google- $$$
• DNN Site
› DnnMobiHelper installed
• Android phone – set in Developer mode
• iOS Device (iPad, iPhone)
• TestFlight (optional)
![Page 10: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/10.jpg)
Architecture – Mobile / Site
JS Helper DLL Helper
![Page 11: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/11.jpg)
Appcelerator MVC
• View
› XML markup
• Style
› TSS (css)
• Controller –
› JS code behind
Controllers
Styles
Views
![Page 12: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/12.jpg)
Appcelerator - View
![Page 13: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/13.jpg)
Appcelerator - Style
![Page 14: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/14.jpg)
Appcelerator - JS
![Page 15: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/15.jpg)
Appcelerator – TiApp.Xml
![Page 16: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/16.jpg)
Appcelerator – Library
• Login
• Get
• Post
• TabId
• ModuleId
• Antiforgery
• Logoff
• IsLoggedIn
![Page 17: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/17.jpg)
UI Flow – Login to Answers
![Page 18: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/18.jpg)
Data Flow – Login
• 2 Callbacks
› Success
- Open Main
› Failure
- Show error
• WebApiHelper
› Login
![Page 19: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/19.jpg)
Data Flow - Main
• TabGroup
• Add tabs
› Answers
› Messages
![Page 20: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/20.jpg)
Data Flow - Answers
• ListView
› Template
• WebApi
• Auto Load
• Databind
![Page 21: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/21.jpg)
Tips
• Use Genymotion for Android
› Google’s Emulator – Very Slow
• Xcode emulators - pretty good
• Use TiShadow for faster dev
• Test on physical devices often
• Android and iOS are DIFFERENT
› Accept it!!
![Page 22: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/22.jpg)
Tips (cond…)
• Understand Layout
› horizontal vs. vertical
• Brush up on Javascript
• Understand DNN Security
› Use WebApi attributes
› Cookies
![Page 23: Mobile App Development Using Appcelerator and DNN WebAPIs](https://reader034.fdocuments.us/reader034/viewer/2022042716/55c56737bb61ebd4058b483d/html5/thumbnails/23.jpg)
For Further Viewing
If you found this presentation interesting, view our on-demand
webinar featuring Jack Kurtz from Fortuitas (a DNN Partner):
Building a Mobile App via the DNN API
Jack Kurtz
CEO, Fortuitas