Building Mobile AppsUsing

Ionic & MeteorJSAshish

@ashish_fagna

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

GoalBuild Native looking apps, through HTML5, CSS3 and JavaScript

Apple Android Windows

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

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.

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

Ionic

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

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.

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…

Ionic for AngularJS• Ionic has been optimized for AngularJS

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

Ionic Sample Code

Lists

Ionic Lists

Tabs• Nested views• Separate history• Angular UI Router

Side Menu

Navigation• Angular UI Router• Back button• Transitions

npm install -g cordova ionic

Ionic FrameworkInstallation:1. Install Node.js2. Install Cordova, Ionic:

For Android:1. Install Android SDK2. Install Brew and Ant3. Install Genymotion for test

For iOS:1. Install ios-sim2. Need to run on Mac

ionic start <your-app-name>

Ionic FrameworkCreate 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]

Meteor CLI commands For Ionic App

meteor create IonicMeteorApp

meteor remove ecmascriptmeteor remove blaze-html-templates

meteor add angular

Meteor CLI commands For Ionic Appmeteor add driftyco:ionicmeteor 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}

Meteor CLI commands For Ionic App

meteor add cordova:cordova-plugin-camera@1.2.0

meteor add-platform iosmeteor run ios

Demo

Thanks