This document discusses building mobile apps using Ionic and MeteorJS. It provides an overview of Ionic, which allows building native-looking apps through HTML5, CSS3 and JavaScript. Ionic uses Cordova to create apps that can be deployed across platforms like iOS, Android and Windows. The document then discusses how Ionic works with AngularJS and MeteorJS to create real-time mobile apps with a single code base that can be deployed across platforms. It provides sample code for common Ionic components like lists, tabs, side menus and navigation. Finally, it outlines the Meteor CLI commands needed to create an Ionic project and add features like the camera plugin.

1. Building Mobile Apps
Using
Ionic & MeteorJS
Ashish
@ashish_fagna

2. Agenda
• Ionic
• Demo : iOS app using Ionic & Meteor

3. Goal
Build Native looking apps, through HTML5,
CSS3 and JavaScript
Apple Android Windows

4. Downside of Native
• Knowledge of each platform
• Separate code bases
• Expensive

5. Cordova, PhoneGap, & Ionic
• Apache Cordova is community project, letting you build
mobile apps for various mobile platforms (HTML5, Javascript
and CSS3)
• Phonegap is a version of Cordova but it's Adobe's product.
• Ionic Framework is a set of css classes and a library of
Javascript directives and modules, built on top of Cordova,
with AngularJS.

6. Cordova v/s Native
• Apache Cordova
–Hybrid Apps
–Web wrapped in
native
–Native APIs
–One code base,
many platforms
• Native SDKs
–Views
–UI Components
–Navigation
–Transitions
–Animations
–Interactions

7. Ionic

8. Ionic
• A Front-end framework for mobile apps Contains a lot of
mobile-optimized HTML, CSS and JS components
• Uses AngularJS to power up your mobile apps
• Uses Cordova to create, build, run, deploy mobile apps

9. Ionic + Meteor
•Ionic : has become one of the most popular solutions to
develop hybrid mobile apps fast across different platform.
•Meteor has become the only open source JavaScript
platform that supply the complete set of solutions you need
to create a real time mobile connected apps.

10. AngularJS
• MVC framework for Dynamic web apps
• Developed by Google and the community
• Features:
• Live data binding
• Two-way binding
• Attaching code-behind to DOM element
• Directives, Services
• Repeating DOM elements
• Templates
• Dependencies Injection
• Animations and Transitions
• Much More…

11. Ionic for AngularJS
• Ionic has been optimized for AngularJS

12. Ionic is “Bootstrap for Native”
• Responsive
• UI Components
• Transitions
• Icons

13. Ionic Sample Code

14. Lists
Ionic Lists

15. Tabs
• Nested views
• Separate history
• Angular UI Router

16. Side Menu

17. Navigation
• Angular UI Router
• Back button
• Transitions

18. npm install -g cordova ionic
Ionic Framework
Installation:
1. Install Node.js
2. Install Cordova, Ionic:
For Android:
1. Install Android SDK
2. Install Brew and Ant
3. Install Genymotion for test
For iOS:
1. Install ios-sim
2. Need to run on Mac

19. ionic start <your-app-name>
Ionic Framework
Create new project
Test on web browser
ionic serve
Add mobile platform (Android or iOS)
ionic platform add [android/ios]
Run test on device/emulator
ionic [run/emulate] [ android/ios]

20. Meteor CLI commands For Ionic App
meteor create IonicMeteorApp
meteor remove ecmascript
meteor remove blaze-html-templates
meteor add angular

21. Meteor CLI commands For Ionic App
meteor add driftyco:ionic
meteor add mquandalle:bower
//create a folder ‘lib/bower’ in project’s root folder, add a file
bower.json there
{
"name": "ionicmeteorpost",
"version": "0.0.1",
"dependencies": {
"ngCordova": "latest"
},
"private": true
}

22. Meteor CLI commands For Ionic App
meteor add cordova:cordova-plugin-camera@1.2.0
meteor add-platform ios
meteor run ios

23. Demo

24. Thanks