Embed Size (px)
Citation preview
Cross Platform Mobile Apps with the Ionic FrameworkMobile+Web DevCon 3 February 2015 - San Francisco CA
Troy Miles
Over 35 years of programming experience
Blog: http://therockncoder.blogspot.com/
Twitter: @therockncoder
Email: [email protected]
GitHub: https://github.com/Rockncoder
AgendaAngularJS
Cordova
The Ionic Framework
Build a simple app
Resources
Summary
–the rockncoder
“If you want bring a WiFi systems to its knees, bring a bunch of techies and all of their toys together in
one spot.”
Conference Limitations
Internet access at most conferences is limited
The app uses internal data stored in JSON files
Google Maps is also turned off
We will work in the browser only
https://github.com/Rockncoder/ionic-coffee
AngularJSCreated by Miško Hevery and Adam Abrons in 2009
JavaScript MVC
106 kb production version (minimized, not gzipped)
Declarative programming for UI
Imperative programming for business logic
AngularJS Key FeaturesModel View Controller (MVC)
Data Binding
HTML Templates
Dependency Injection
Deep Linking
Directives
Model View Controller
Uses MVC
The goal is clear separation of concerns
The model is only concerned with data
The view presents the data to the user
The controller applies the business logic
Data Binding
In Angular, data binding is built into the framework
Replaces text content of HTML element with the value of the expression
{{ expression }}
<ANY ng-bind=“expression”>…</ANY>
<ANY class=“ng-bind: expression;”>…</ANY>
HTML Templates
No client side templating engine
Angular uses HTML as its templating engine
No extra markup, no extra libraries
Designers & developers rejoice
Dependency Injection
A software design pattern deals with how components resolve their dependencies
Pervasive throughout Angular
Allows for easier testing
Allows for easier swapping of components
Deep Linking
Deep Linking enables a website to restore state from a URL
URL and bookmarks are key part of the web
Early Single Page Apps lacked deep linking, they broke SEO and user expectation
Directives
“The coolest feature of AngularJS” - Misko Hervey
Attach behavior to DOM elements
Cleaner way to do DOM manipulations
Can nearly turn HTML into a DSL
Cordova2009: 1st developed at an iPhoneDevCamp event
2009: Developers form a company, Nitobi
2011: Adobe acquires Nitobi
2011: Adobe open sources PhoneGap project to Apache
2012: Apache gives the project the name Cordova
Cordova platforms
Adobe PhoneGap
IBM Worklight
Telerik Platform
The Ionic Framework
and still others
Cordova CLI
Global commands
help - display help text or help for a specific command
create - creates a project
Project commands
Project Commands
info
platform
plugin
prepare
compile
run
serve
build
emulate
Why not just Cordova?
No native look or feel - only HTML
No programming framework - only JS
Cordova is generalized not optimized
The Ionic Framework?Combines Apache Cordova
with Google's AngularJS
along with lots custom JavaScript, HTML, and CSS3
to create purpose built mobile apps
which perform like native ones
and look beautiful
The Ionic Framework
Ionic is both a CSS framework and a Javascript UI library
Many components need JavaScript
But often components can be used without coding
Use a View Controller pattern like Cocoa Touch
Supported Devices
iOS 6+
Android 4+
Why is Ionic fast?
No jQuery
Minimal DOM manipulation
Hardware accelerated transitions
Mallzee
Replaced their hand built PhoneGap app with Ionic in May
Excellent UI
Songhop
The fastest way to find new music
5 star rated
iPhone only
Keychain
Like Uber for trucks
iOS and Android version
Scrapped prior version built with PhoneGap
SworkitCreated by Ryan Hanna alone
Featured in the Health and Fitness section of the App Store
Downloaded over 3 million times
in the App Store, Google Play and Amazon Store
Ionic starter templates
blank
tabs
sidemenu
The side menu
Used by lots of apps since it uses minimal screen real estate
The “hamburger”, menu toggle can be position on the left or right of the screen
This is the base UI our app will use
Hello Ionic World
1. ionic start coffee sidemenu
2. cd coffee
3. ionic serve
Project directory
hooks - a place to customize the cordova build
platforms - project directories for native code
plugins - your apps cordova plugins
scss - customizable SASS files
www - your application
PluginsAs of version 3.0 Cordova is implemented mainly as a collection of plugins surrounding a small core
Plugins are implemented in native code and/or JavaScript
Without plugins your application can’t communicate with the device’s hardware
Over 600 plugins currently available
Installing/Removing Plugins
Find plugins at: http://plugins.cordova.io/
ionic plugin add org.apache.cordova.device
ionic plugin remove org.apache.cordova.device
Ionic includes 3 essential plugins: console, device, & keyboard
Plugins not available until after $ionicPlatform.ready
Plugin Anatomy
Documentation: doc/index.md
Native code in src directory
JavaScript in www directory
Using a Plugin
Remember: You must wait for the ready event
Read the plugin’s documentation
Implement the functionality according to docs
Best practice: Sniff for the property before use
ngCordova
Cordova has a lot of available plugins
Plugins give access to the machine functions
ngCordova "Angularizes" plugins for ready use
You are always free to write your own wrapper code
config.xml
the configuration file for your app
contains the app names, for computers and humans
version number
settings
resources
A few commandsstart - creates a new project
help - detailed help information
resources - create native device splash/icons
emulate - runs project on emulator after build
platform - adds support for a native platform
serve - runs project on default web browser
Debugging First Look
We will use the debugger in Chrome
For Android devices, Chrome is your best friend
menu -> More tools -> Inspect Devices
For iOS devices, Safari is your best friend
Preferences -> Advanced -> Show develop
Controllers
most of your code will be in controllers, services, or directives
controllers act as the glue between the model and the view
controllers can use a context call $scope is use to pass data to and from the view
Controller sample(function () { 'use strict'; angular.module('HelloApp') .controller('SearchController', ['$scope', '$cordovaGeolocation', function ($scope, $cordovaGeolocation) { console.log("SearchController launching"); $scope.showingListings = false; $scope.showingMap = true; $scope.showingSearch = false; var activeDisplay = "showingMap"; $scope.setDisplay = function (nextState) { $scope.showingListings = false; $scope.showingMap = false; $scope.showingSearch = false; $scope[nextState] = true; if (nextState !== "showingSearch") { activeDisplay = nextState; } }; }]); }());
View
ion-view is the root of a page
it contains headers, footers, and content tags
headers and footers are optional
HeadersIonic supports two kinds of header bars: ion-header-bar & ion-nav-bar
Outwardly they look identical, but their markup is different, as is the function
ion-header-bar is only markup
ion-nav-bar ties into ui-router and updates itself based on the router state
ui-router
the native router for AngularJS is ngRoute
Ionic instead uses the open source ui-router
ui-router is more flexible and capable than ngRoute
Content
ion-content is used to hold the pages content
it can scroll its content to reveal more that a screen’s worth at a time
pull to refresh and infinite scroll objects go here
Services
Substitutable objects that are wired together using DI
Used to organize and share code across app
Only instantiated when an app component depends on it
Singletons
Built-in services always start with “$”
Time to write code…
Housekeeping
At some point in the app lifecycle, you may wish to update Ionic or one of the plugins
Update Ionic: sudo npm update -g ionic
Update a plugin: remove it and add it back
BE CAREFUL - Newer versions may break your app
Ionicons
http://ionicons.com/
Can search from website
Can easily change size
free & open source
Resourceshttps://angularjs.org/
http://cordova.apache.org/
http://ionicframework.com/
http://plugins.cordova.io/
http://ngcordova.com/
http://learn.ionicframework.com/
http://www.ng-newsletter.com/posts/angular-ui-router.html
Code and Slides
https://github.com/Rockncoder/coffee-ni
https://github.com/Rockncoder/ionic-coffee
http://www.slideshare.net/rockncoder/cross-44135208
Summary
Cordova is a platform which allows for the building of mobile apps using web technologies
Ionic builds on top of that by providing a good looking performance driven UI and better developer tools
Ionic uses AngularJS as its MVC framework
