Building mobile apps using meteorJS

Building Mobile Apps
Using
Ionic & MeteorJS
Ashish
@ashish_fagna

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

Goal
Build 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
• 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

Tabs
• Nested views
• Separate history
• Angular UI Router

Navigation
• Angular UI Router
• Back button
• Transitions

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

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]

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

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
}

meteor add cordova:cordova-plugin-camera@1.2.0
meteor add-platform ios
meteor run ios

Building mobile apps using meteorJS

More Related Content

What's hot

Similar to Building mobile apps using meteorJS

More from Entrepreneur / Startup

Recently uploaded

Building mobile apps using meteorJS