Building mobile apps using meteorJS
Download as PPTX, PDF•0 likes•594 views
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.
![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]](https://image.slidesharecdn.com/buildingmobileappsusingmeteorjs-160323135205/85/Building-mobile-apps-using-meteorJS-19-320.jpg)
Building mobile apps using meteorJS
- 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
- 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:[email protected] meteor add-platform ios meteor run ios
- 23. Demo
- 24. Thanks