OpenWest Ionic Presentation

My presentation at OpenWest 2014

Transcript

1. AN INTRODUCTION TO THE IONIC FRAMEWORK David Moulton @dmoulton dmoulton
2. ABOUT ME I grew up in Cody, Wyoming ! I currently live in Orem ! I graduated from this fine institution ! I think this building was grass at that time ! I’m a Ruby/AngularJS developer at EmpowerIT ! When not working, I’m either attached to motorcycle handlebars or a fly fishing rod.
3. QUESTIONS How many have used Cordova? How many have used AngularJS? How many have written a mobile app some other way? What has your experience been?
4. WHO IS IONIC FOR? I’ve been web programming for ~18 years. I have rubber to wear off my tires evenings & weekends I’d like to be able to create apps for iPhone and Android I’d like to save my company money and time
5. ABOUT IONIC ionicframework.com Very new - First Alpha release in November 2013 Combines Apache Cordova and AngularJS Lots of Framework-y additions to make life easier Sort of Bootstrap for Cordova, but not really Only works on Android 4.2+ (possibly 4.1+)
6. INSTALLING IONIC Install Node http://nodejs.org Install cordova http://cordova.apache.org/ Install ionic npm install -g cordova ionic
7. ANATOMY OF AN IONIC APP Its really just a Cordova app ! ! platforms directory This depends on what platforms you are building for ! scss directory Use this to modify Ionic’s default Look and Feel ! plugins directory http://plugins.cordova.io ! www directory Where the magic happens
8. WWW DIRECTORY Let’s create a demo app Create an ionic app ionic start myApp blank | tabs | sidemenu
9. RUNNING THE APP • Local Debug • iOS emulator • Android emulator python -m SimpleHTTPServer 8000 ! ionic platform add ios | android ! ionic build ios | android ! ionic emulate ios | android
10. CROSS DOMAIN SCRIPTING Necessary if you are going to do server calls ! Changes to client angular.module("moduleName", []).config(function($httpProvider) { delete $httpProvider.defaults.headers.common["X-Requested-With"]; $httpProvider.defaults.useXDomain = true; }) Changes to server (Sinatra) before do headers 'Access-Control-Allow-Origin' => '*', 'Access-Control-Allow-Methods' => ['OPTIONS', 'GET', 'POST'], 'Access-Control-Allow-Headers' => 'Content-Type' end
11. THANKS! https://github.com/dmoulton/openwest-ionic @dmoulton on Twitter