Part of My Talk and Presentaion for Intro and Explanations of Hybrid application Development Using Ionic and Ionic Apache Cordova

1. Building Hybrid Mobile Apps with
Apache cordova,AngularJS and Ionic

2. Ermias Bayu – 1007-14-504-010
Osmania University Computer Science III
Semester
@girayegebaw
github.com/hackarada

3. Overview
• Mobile Apps Introduction
• Development Options
• Cordova
• Angular Js
• Ionic Framework
• Demo

4. Mobile Apps ?

5. Development Options

6. Things to Consider
• Which mobile platforms do you wish to target?
• Do you want to distribute your application via app stores?
• Are you looking to utilize the capabilities of the mobile
device?
• What are the technical abilities of your development team?
• Does the one-size-fit-all approach of hybrid really live up to its
promise?

7. Built using the device’s native programming language,
native apps only run on their designated platform.
A native application (native app) is an application
program that has been developed for use on a
particular platform or device.
Native apps

8. Downside
More Platforms. More Problems.

9. •Proficiency in each platform required
•Timely & expensive
•Maintenance Cost
•Platform Instability

10. Mobile web applications run in the device’s browser
and operate across all platforms
Mobile web apps

11. Downside
• Only few device APIs can be accessed(i.e
Partial integration: (GPS, gyroscope,
accelerometer, file upload)
• Performance is based on browser and network
connection
• Entirely separate code bases
• Monetization and security issues for
Developers
• Limited Graphics

12. What is The Solution ?

13. Hybrid apps

14. Hybrid apps are a cross between native apps and
mobile web apps

17. • Ionic is a bunch of UI elements made in HTML5 &
• CSS3 that covers a lot of the mobile interactions
• The big advantage of Ionic is all the UI components are AngularJS
Directives
• HTML5 framework for hybrid mobile apps.
• Build on angular, sass.
• Uses cordova/phonegap for creating running building deploying mobile
apps.
• Contains lots of mobile optimised css and javascript components.
• Native like performance and beautifully designed

18. • Native Focused
• Performance Obsessed
• Hardware accelerated animations
• Minimal DOM Manipulation
• Remove 300ms tap delay
• Plain old CSS
• Sass
• 80+ reusable mixins
• Boilerplate app structure ready for customization
• Preconfigured tools: Gulp, Sass, Bower, etc.

19.  Platform independent (iOS, Android etc.)
HTML5, CSS3 & JS
Limited performance
Quick development
Direct access to native APIs with Cordova
Current technologies provide frame works like ionic and cross
walk

20. Set of device APIs that allow a mobile app developer to
access native device function such as the camera or
accelerometer from JavaScript

21. • HTML5 that acts like native
• Phonegap renamed to Cordova
• Web wrapped in native layer
• Direct access to native APIs
• Familiar web dev environment
• Develop a single code base (web platform)

22. Platforms
● Android
● Blackberry
● FirefoxOS
● iOS
● Tizen
● WebOS
● Windows Phone 7
● Windows Phone
Battery Status
Camera
Contacts
Device Orientation
Dialogs
File Transfer
Geolocation
Globalization
In-App Browser
Media
CaptureSplashscreen
Statusbar
Vibration
Plugins

24. Proven for large-scale app development
Extends the HTML vocabulary
UI Components using Directives and Services

25. A structural MVC framework for dynamic web
Apps.It lets you use HTML as your template language
and lets you extend HTML's syntax to express your
application's components clearly and succinctly

26. Demo and Sample Apps
https://github.com/hackarada/ioconf
showcase.ionicframework.com

27. Thank You
2015