Ad
More Related Content
What's hot (20)
Similar to Ionic and Azure (20)
Ad
Recently uploaded (20)
Ad
Ionic and Azure
- 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: [email protected] Twitter: @chixcancode Blog: http://chixcancode.com