23
Ash Prasad Sr. Manager Engineering Development, DNN Corp.

Mobile App Development Using Appcelerator and DNN WebAPIs

  • Upload
    dnn

  • View
    646

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Mobile App Development Using Appcelerator and DNN WebAPIs

Ash PrasadSr. Manager Engineering Development, DNN Corp.

Page 2: Mobile App Development Using Appcelerator and DNN WebAPIs

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

UI – Look & Feel

Login List of Questions Ask a Question

Page 4: Mobile App Development Using Appcelerator and DNN WebAPIs

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

Mobile Frameworks

• Html5

› Apache Cordova› PhoneGap› Icenium (Telerik)

• Native

› Android› iOS

- Objective-C- Swift

• Hybrid

› Xamarin› Appcelerator

Page 6: Mobile App Development Using Appcelerator and DNN WebAPIs

Winner

…Appcelerator

Page 7: Mobile App Development Using Appcelerator and DNN WebAPIs

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

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

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

Architecture – Mobile / Site

JS Helper DLL Helper

Page 11: Mobile App Development Using Appcelerator and DNN WebAPIs

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

Appcelerator - View

Page 13: Mobile App Development Using Appcelerator and DNN WebAPIs

Appcelerator - Style

Page 14: Mobile App Development Using Appcelerator and DNN WebAPIs

Appcelerator - JS

Page 15: Mobile App Development Using Appcelerator and DNN WebAPIs

Appcelerator – TiApp.Xml

Page 16: Mobile App Development Using Appcelerator and DNN WebAPIs

Appcelerator – Library

• Login

• Get

• Post

• TabId

• ModuleId

• Antiforgery

• Logoff

• IsLoggedIn

Page 17: Mobile App Development Using Appcelerator and DNN WebAPIs

UI Flow – Login to Answers

Page 18: Mobile App Development Using Appcelerator and DNN WebAPIs

Data Flow – Login

• 2 Callbacks

› Success

- Open Main

› Failure

- Show error

• WebApiHelper

› Login

Page 19: Mobile App Development Using Appcelerator and DNN WebAPIs

Data Flow - Main

• TabGroup

• Add tabs

› Answers

› Messages

Page 20: Mobile App Development Using Appcelerator and DNN WebAPIs

Data Flow - Answers

• ListView

› Template

• WebApi

• Auto Load

• Databind

Page 21: Mobile App Development Using Appcelerator and DNN WebAPIs

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

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

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