DEVintersection Introduction to the Ionic Framework

1. DEVintersectionIntroduction to the Ionic Framework Joseph Guadagno jguadagno@hotmail.com @jguadagno http://www.josephguadagno.net

2. Joseph Guadagno Team Leader & Software Architect at Quicken Loans, Microsoft Visual C# MVP, Organizer of Desert Code Camp, Husband of one, Father of two.

3. Agenda • What is the Ionic Framework • Breakdown the pieces of the Ionic Framework • Build an Application

4. What is the Ionic Framework

5. Ionic Framework Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript. Ionic is focused mainly on the look and feel, and UI interaction of your app. That means it isn't a replacement for PhoneGap or your favorite Javascript framework. Instead, Ionic simply fits in well with these projects in order to simplify one big part of your app: the front end.

6. What do you need? • Node.js • Cordova • Text Editor • Developer Accounts (Android, iOS, UWA, etc) • Optionally • Gulp • Bower

7. What Can You Build For? • Native Applications • Android • Blackberry 10 • iOS • OS X • Ubuntu • Windows • Windows Phone 8 • Progressive Web Applications • Electron

8. Platform Guides • Android Platform Guide • http://jjg.me/ionic_apg • Blackberry 10 Platform Guide • http://jjg.me/ionic_bbpg • iOS Platform Guide • http://jjg.me/ionic_iOSpg • OSX Platform Guide • http://jjg.me/ionic_osxpg • Ubuntu Platform Guide • http://jjg.me/ionic_upg • Windows Platform Guide (Windows 8 has it’s own guide) • http://jjg.me/ionic_wpg

9. Integrated Development Environments (IDEs) • Visual Studio • Visual Studio Code • Atom • Web Storm • ALM

10. Breakdown of the pieces of the Ionic Framework

11. “Parts” of the Ionic Framework • Angular 2 • Cordova • CSS - Components • API - Javascript • (Device) Native Components (Plugins) • Ionicons

12. Cordova

13. CSS - Components http://ionicframework.com/docs/v2/components/#overview

14. API - Javascript http://ionicframework.com/docs/v2/api/

15. Native Device Plugins • List of Plugins • http://ionicframework.com/docs/v2/native/ • Platform Support • http://jjg.me/ionic_cps

16. Ionicons http://ionicons.com/

17. Building an Application

18. Required Libraries • Install NPM (Node Package Manager) • http://nodejs.org • Install Ionic npm install –g ionic • Install Cordova npm install –g cordova npm install –g ionic cordova

19. Create the Application Shell ionic start <projectName> <templateName> --v2

20. Ionic Templates • Blank • https://github.com/driftyco/ionic2-starter-blank • Tutorial • https://github.com/driftyco/ionic2-starter-tutorial • Tabs • https://github.com/driftyco/ionic2-starter-tabs • Sidemenu • https://github.com/driftyco/ionic2-starter-sidemenu

21. Ionic Templates - Blank https://github.com/driftyco/ionic2-starter-blank

22. Ionic Templates – Side Menu https://github.com/driftyco/ionic2-starter-sidemenu

23. Ionic Templates - Tabs https://github.com/driftyco/ionic2-starter-tabs

24. Ionic Templates - Tutorial https://github.com/driftyco/ionic2-starter-tutorial

25. Let’s Build an Application

26. Questions?

27. Joseph Guadagno Team Leader & Software Architect at Quicken Loans, Microsoft Visual C# MVP, Organizer of Desert Code Camp, Husband of one, Father of two.

28. References

29. Urls • http://ionicframework.com • http://play.ionic.io • http://lab.ionic.io/ • http://ionicframework.com/docs/v2/resources/ • http://market.ionic.io/ • https://github.com/microsoft/ionic-azure-conference-app

30. Don’t forget to enter your evaluation of this session using EventBoard! Thank you! Questions?