This slide will provide an overview of building mobile-first apps with Ionic Framework leveraging Azure App Services as Mobile Back-End

1. Building Mobile-First
Apps w/ Ionic
Framework and Azure
Mobile(App) Services
LaBrina Loving
April 30, 2016
@chixcancode

2. Thanks to our
sponsors
Platinum
Gold
Bronze
Northern VA CodeCamp Spring 2016

3. Thanks to host
sponsor
Northern VA CodeCamp Spring 2016

4. Agenda
 Web App vs Hybrid App vs Native App
 Ionic(Who, What, When, Where, Why)
 Azure Mobile Services(Who, What, When Where, Why)
 Getting Your Environment Ready
 Ionic Components & Navigation
 Demo
 Wrap-up & Q/A
 Resources

5. My Life in Pictures
I was Born Here …And Now I Live Here
…And I Love These Things

6. Web App vs Hybrid App vs Native
The Great Conundrum
•Native apps are specific to a given mobile platform (iOS or
Android) using the development tools and language that the
respective platform supports (e.g., Xcode and Objective-C
with iOS, Eclipse and Java with Android). Native apps look
and perform the best.
•Web apps use standard web technologies—typically
HTML5, JavaScript and CSS. This write-once-run-anywhere
approach to mobile development creates cross-platform
mobile applications that work on multiple devices. While
developers can create sophisticated apps with HTML5 and
JavaScript alone, some vital limitations remain at the time of
this writing, specifically session management, secure offline
storage, and access to native device functionality (camera,
calendar, geolocation, etc.)
•Hybrid apps make it possible to embed HTML5 apps inside
a thin native container, combining the best (and worst)
elements of native and HTML5 apps.

7. Ionic
• Open source, mobile optimized library for HTML/JS/CSS
• Built on top of AngularJS
• Built for native Cordova apps
• “Bootstrap for mobile”
• Extends angularjs with directives such as tabs, lists, cards to
provide a “mobile” feel
• Has its own css(not to be confused with Twitter Bootstrap)
• Uses AngularJS Routing Engine

8. Cordova
• Open source, mobile development framework
• Allows you to use standard web technologies - HTML5,
CSS3, and JavaScript for cross-platform development
• Javascript that wraps native apis
• No need to learn new languages(Xcode, Android, etc.)
• Build once, deploy for many devices

9. Azure Mobile/App Services
• Azures Backend-as-a-Service(BaaS) that provides
turnkey services to support your mobile application
• Data Storage
• Offline Sync
• Authentication
• Push Notifications
• User Administration
• Dashboard/UI
• Mobile Services is currently being re-branded to App
Services to encompass more services(mobile apps is a
blade within App Services)
• There are many other BaaS platforms(Firebase, Telerik,
Amazon, etc.)

10. Getting Started
IONIC FRAMEWORK
• Install Visual Studio Ionic Template here
• Install Visual Studio Angularjs Intellisense here
Azure Mobile Services
• Sign up for Azure
• Create a new App Service(demo)
• Azure Service Tutorials support many flavors
• Cordova
• Android
• iOS
• Xamarin
• HTML/CSS
• Install AzureMobileClient sdk here

11. Running Your App
Local Browser
Emulator
Actual Device

12. Angular UI Router
• Routing Framework for Angularjs
• Organized into State Machines
• Template/TemplateURL
• Controller(optional)
$stateProvider
.state('home', {
url: "/home",
templateUrl: "app/home/home.html"
})

13. Navigation in Ionic
• Routing Framework for Angularjs
• Organized into State Machines
• Template/TemplateURL
• Controller(optional)
$stateProvider
.state('home', {
url: "/home",
templateUrl: "app/home/home.html"
})

14. Creating Easy Tables
 Create DB
 Create Database
 Establish Connection
 Create Table schema
 Only string, date, number, and Boolean types supported

15. CRUD Operations with Easy Tables
Create instance of Mobile Client
var client = new WindowsAzure.MobileServiceClient(YOURURL);
Create instance of Mobile Client
var table = client.getTable(TABLENAME);
CRUD Operations
table.read()
.insert({data})
.update({data})
.del(id: idtoDelete)

16. Authentication with Azure App Service
No-code authentication for the following identity providers:
 Azure Active Directory
 Facebook
 Twitter
 Google
 Microsoft Account

17. Demo

18. Resources
App Services
• Mobile Apps - https://azure.microsoft.com/en-
us/documentation/learning-paths/appservice-
mobileapps/
• Client Library - https://azure.microsoft.com/en-
us/documentation/articles/mobile-services-html-how-
to-use-client-library/
Ionic Framework
Getting started - http://ionicframework.com/
Pluralsight course from Steve Michelotti -
https://www.pluralsight.com/courses/building-mobile-
apps-ionic-framework-angularjs

19. Let’s be friends
Email: labrina.loving@gmail.com
Twitter: @chixcancode
Blog: http://chixcancode.com