SlideShare a Scribd company logo
AN OPEN SOURCE FRAMEWORK FOR DEVELOPING HYBRID APPS
WHAT IS IONIC ?
IONIC Is an HTML5 mobile app development
framework targeted at building hybrid mobile
apps. Hybrid apps are essentially small websites
running in a browser
HISTORY
• IONIC was founded by DRIFTY CO. , BEN SPERRY and MAX
LYNCH. in 2012.
• IONIC was created by drifty co. In 2013. Drifty's prior
products include codiqa and jetstrap.
• Today, IONIC is the world's most popular cross-platform
mobile development and 5 Million developers

Recommended for you

Use Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile applicationUse Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile application

Introduction to the Ionic and shows some simple demos how to use this framework in order to develop hybrid app

mobile appsionic frameworkmobile
Intro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsIntro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile Applications

Ionic is a free framework that allows users to easily build hybrid mobile applications for iOS and Android using Angular and Cordova. Ionic provides a command line interface, CSS classes, reusable components (directives) and various tools for testing and development. In this session, you'll get a birdseye view of what Ionic has to offer, as well as guidelines for building your first Ionic app, including the use of tools such as Yeoman, Bower and Grunt.

ioniciosandroid
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework

This document provides an overview of the Ionic Framework for developing hybrid mobile applications. It discusses the advantages of hybrid apps over native apps, including using a single codebase across platforms. It introduces Ionic as an HTML5 framework built on Angular and Cordova, containing CSS and JavaScript components for building mobile-optimized apps. It covers getting started with Ionic, the CLI, components, platform access tools, and includes examples. The goal of Ionic is to provide native-like performance for building beautiful, easy-to-maintain hybrid mobile apps.

ionicjavascriptmobileapp
WHY USING IONIC !
• Is open source framework.
• One source for all the supported platforms.
• Main development in html, css and js, which
almost all web developers.
IONIC STACK
• Powerful CSS
preprocessor
• Helps keep large
style sheets
• A streaming built
system.
• Automate common
tasks, minification,
compiling, etc.

Recommended for you

Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)

This document provides an introduction to creating hybrid mobile apps using Ionic and connecting them to IBM Domino. It discusses what hybrid apps and Ionic are, how Ionic uses AngularJS and Cordova to build cross-platform apps, and how to connect an Ionic app to Domino for data via REST. It also covers setting up an initial Ionic app, common UI components, testing and deploying Ionic apps, and additional services like push notifications. The document demonstrates building a basic Ionic app and extending it to retrieve and update real data from a Domino backend over REST.

dominoionicxpages
Ionic 2 intro
Ionic 2   introIonic 2   intro
Ionic 2 intro

Ionic is an open-source SDK that allows developers to build hybrid mobile apps using HTML, CSS and JavaScript. Ionic is based on AngularJS and uses Cordova to access native device features from a web view. Ionic 2 improves on Ionic 1 by being based on Angular 2 and aiming for the latest mobile platforms and performance. For new projects, Ionic 1 is no longer recommended over Ionic 2 which is currently in beta. The presentation provides an overview of the Ionic ecosystem and demonstrates building a sample app.

ionic
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS

- Ionic is an open source framework for developing hybrid mobile apps with HTML5, AngularJS, Sass and Cordova. It allows developing a single code base that can be deployed across iOS and Android platforms. - Ionic uses a web view to wrap web-based UI and links it to native device capabilities via Cordova plugins. This allows building native-like mobile apps with web technologies while reusing code across platforms. - Ionic provides UI components like lists, tabs, slides and pull to refresh that are modeled after native mobile SDKs. It also includes over 700 icons and supports hardware accelerated animations for high performance.

ionicangularjscordova
COMPONENTS OF IONIC
ADVANTAGES
• IONIC solves multiple device resolution issues.
• It has own icons (IONICONS).
• Less time building your app.
IONIC APP RUN ON MANY PLATFORMS
• Amazon Fire OS
• Android
• BlackBerry
• Firefox OS
• IOS
• Mac OS X
• UBUNTU
• Web OS
• Windows phone
7
• Windows phone
8
• Browser
LETS BUILD . .

Recommended for you

Ionic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application FrameworkIonic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application Framework

This document provides an overview of the Ionic Framework, including its history, features, benefits, supported platforms and performance. Ionic is an open source framework for building hybrid mobile apps with web technologies like HTML, CSS and JavaScript. It uses AngularJS and Apache Cordova to provide native app functionality and allows developers to build apps for iOS, Android and other platforms from a single codebase. Some advantages include one codebase for multiple platforms, use of web development skills and Angular framework, while disadvantages include lower performance compared to truly native apps.

mobile application frameworkionic mobile app frameworkionic framework
Ionic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile appsIonic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile apps

Overview over frameworks for hybrid app development. Cordova, Supersonic, Ionic. Architecture, differences, setup and scaffolding for development. Angular based development for Apps with a web view.

ionicframeworkcordovaionic
Intro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular jsIntro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular js

This document provides an introduction to building mobile apps with the Ionic framework and AngularJS. It discusses Ionic basics, including what Ionic is and its building blocks. It also covers AngularJS and Cordova, including AngularJS directives, scopes, and dependency injection. The document demonstrates how to install Ionic, create an app, and build apps for iOS and Android. It concludes with references and links for further information on Ionic and AngularJS.

mobile appsjavascriptangularjs
• First Install JDK
• Next install Node.Js
• Then install Apache cordova and ionic.
• Add ionic templates.
• Start a project.
• Install Visual Studio code (for edit your app)
DOWNLOAD AND INSTALL JDK
Following Link :
http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-
138363.html
DOWNLOAD AND INSTALL NODE.JS
Following Link :
https://nodejs.org/en/download/
install Apache cordova and ionic.
• Open Terminal window
npm install -g cordova ionic
• Windows • MAC OS
sudo npm install -g cordova ionic
• If you have already installed Apche cordova and ionic
npm update -g cordova ionic sudo npm update -g cordova ionic

Recommended for you

Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic

This document discusses building mobile apps using Cordova, AngularJS, and Ionic. It introduces the speaker and agenda. It then explains that hybrid mobile apps allow building apps that run on multiple platforms using HTML, CSS, and JavaScript instead of native languages. Cordova is introduced as a way to access native device features from web technologies. AngularJS is described as a single page application framework. Ionic is presented as a framework that builds on Cordova and AngularJS to provide mobile-optimized UI components and enable creating, building, and deploying hybrid mobile apps.

angularjsjavascriptionic
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework

What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps. Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions. In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device. Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.

rockncoderangularjsionic framework
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework

The document discusses Ionic, an open source HTML5 hybrid app development framework that uses AngularJS, Cordova, and Sass components to build mobile apps with a sexy CLI and hardware acceleration. It mentions the author works at Ivorypenguin and built a Minecraft nether portal calculator app using Ionic to demonstrate how to start a new Ionic project and provides links to the author's GitHub and email for further contact.

tddionicangular
IONIC - Hybrid Mobile App Development
START A PROJECT
Ionic serve Ionic serve --lab
• Install and download Visual Studio Code
• Then you can open a project using Visual
Studio code.
• After you can edit your App.
Following Link :
https://code.visualstudio.com/download
REFERENCES
• HTTPS://IONICFRAMEWORK.COM/DOCS/
• HTTPS://GITHUB.COM/DRIFTYCO/IONIC
• HTTPS://EN.WIKIPEDIA.ORG/WIKI/IONIC_(MOBILE_APP_FRAMEWORK)

Recommended for you

Ionic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application DevelopmentIonic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application Development

Here I give a presentation for Suncoast.js on the Ionic Framework and how to develop hybrid mobile applications.

appionicangular
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic

Hybrid mobile app development slide with Ionic Framework. This is a subset of slides presented during my Ionic Mobile Development course. In addition to the items in this slide, the course will cover Ionic application Architecture, Important AngularJS principles for Ionic development, Native vs Hybrid and code signing to Google Play and AppStore. It is a hands-on based approach training where 80% of the course (normally from 10 am to 5 pm) will be guided lab activity or mini project activity.

mobile developmentionichttp
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework

2015 Open Talk on Ionic Framework v1. Hybrid mobile best practices. Ionic market, share and publishing

javascriptionicmobile
IONIC - Hybrid Mobile App Development

More Related Content

What's hot

Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic Framework
Julien Renaux
 
Introduction to the Ionic Framework
Introduction to the Ionic FrameworkIntroduction to the Ionic Framework
Introduction to the Ionic Framework
rrjohnson85
 
Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3
Oleksandr Tryshchenko
 
Use Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile applicationUse Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile application
Lucio Grenzi
 
Intro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsIntro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile Applications
Sasha dos Santos
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
Shyjal Raazi
 
Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)
Mark Leusink
 
Ionic 2 intro
Ionic 2   introIonic 2   intro
Ionic 2 intro
Wojciech Langiewicz
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS
Zvika Epstein
 
Ionic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application FrameworkIonic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application Framework
Sanjay Kumar
 
Ionic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile appsIonic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile apps
Andreas Sahle
 
Intro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular jsIntro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular js
Hector Iribarne
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
Kadhem Soltani
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
Troy Miles
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
Dylan Swartz
 
Ionic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application DevelopmentIonic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application Development
Max Kaplan
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
Wan Muzaffar Wan Hashim
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
Cristián Cortéz
 
Developing Hybrid Applications with IONIC
Developing Hybrid Applications with IONICDeveloping Hybrid Applications with IONIC
Developing Hybrid Applications with IONIC
Fuat Buğra AYDIN
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Jacob Friesen
 

What's hot (20)

Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic Framework
 
Introduction to the Ionic Framework
Introduction to the Ionic FrameworkIntroduction to the Ionic Framework
Introduction to the Ionic Framework
 
Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3
 
Use Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile applicationUse Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile application
 
Intro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsIntro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile Applications
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
 
Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)
 
Ionic 2 intro
Ionic 2   introIonic 2   intro
Ionic 2 intro
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS
 
Ionic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application FrameworkIonic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application Framework
 
Ionic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile appsIonic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile apps
 
Intro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular jsIntro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular js
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Ionic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application DevelopmentIonic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application Development
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Developing Hybrid Applications with IONIC
Developing Hybrid Applications with IONICDeveloping Hybrid Applications with IONIC
Developing Hybrid Applications with IONIC
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
 

Similar to IONIC - Hybrid Mobile App Development

Building mobile apps using meteorJS
Building mobile apps using meteorJSBuilding mobile apps using meteorJS
Building mobile apps using meteorJS
Entrepreneur / Startup
 
Cross-Platform Development
Cross-Platform DevelopmentCross-Platform Development
Cross-Platform Development
Syed Owais Ali Chishti
 
Ionic
IonicIonic
Headlessdrupalcordovaapp
HeadlessdrupalcordovaappHeadlessdrupalcordovaapp
Headlessdrupalcordovaapp
UniMity Solutions
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
Software Infrastructure
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile Apps
John M. Wargo
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & Loopback
Chibuzor Obiora
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​
FDConf
 
I knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsI knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile apps
Alius Petraška
 
Ionic Framework: Key Features
Ionic Framework: Key FeaturesIonic Framework: Key Features
Ionic Framework: Key Features
adityakumar2080
 
Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016
Jad Salhani
 
HTML5 App Skills for Android Developers
HTML5 App Skills for Android DevelopersHTML5 App Skills for Android Developers
HTML5 App Skills for Android Developers
DroidConTLV
 
Introduction to Ionic (SB AngularJS Meetup)
Introduction to Ionic (SB AngularJS Meetup)Introduction to Ionic (SB AngularJS Meetup)
Introduction to Ionic (SB AngularJS Meetup)
Sol Tran
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
Manesh Lad
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic Framework
Aayush Shrestha
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
Nirav Patel
 
Cross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceCross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open Source
All Things Open
 
Mobile apps with Umbraco and Phonegap
Mobile apps with Umbraco and PhonegapMobile apps with Umbraco and Phonegap
Mobile apps with Umbraco and Phonegap
Theo Paraskevopoulos
 
Developing a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&CordovaDeveloping a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&Cordova
Damir Beylkhanov
 
Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with Ionic
Maulik Bamania
 

Similar to IONIC - Hybrid Mobile App Development (20)

Building mobile apps using meteorJS
Building mobile apps using meteorJSBuilding mobile apps using meteorJS
Building mobile apps using meteorJS
 
Cross-Platform Development
Cross-Platform DevelopmentCross-Platform Development
Cross-Platform Development
 
Ionic
IonicIonic
Ionic
 
Headlessdrupalcordovaapp
HeadlessdrupalcordovaappHeadlessdrupalcordovaapp
Headlessdrupalcordovaapp
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile Apps
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & Loopback
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​
 
I knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsI knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile apps
 
Ionic Framework: Key Features
Ionic Framework: Key FeaturesIonic Framework: Key Features
Ionic Framework: Key Features
 
Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016
 
HTML5 App Skills for Android Developers
HTML5 App Skills for Android DevelopersHTML5 App Skills for Android Developers
HTML5 App Skills for Android Developers
 
Introduction to Ionic (SB AngularJS Meetup)
Introduction to Ionic (SB AngularJS Meetup)Introduction to Ionic (SB AngularJS Meetup)
Introduction to Ionic (SB AngularJS Meetup)
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic Framework
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Cross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceCross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open Source
 
Mobile apps with Umbraco and Phonegap
Mobile apps with Umbraco and PhonegapMobile apps with Umbraco and Phonegap
Mobile apps with Umbraco and Phonegap
 
Developing a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&CordovaDeveloping a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&Cordova
 
Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with Ionic
 

Recently uploaded

Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
taskroupseo
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
sachin chaurasia
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
VishrutGoyani1
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
MaisnamLuwangPibarel
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
Roshan Dwivedi
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
AUGNYC
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
Semiosis Software Private Limited
 
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdfWhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
onemonitarsoftware
 
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Asher Sterkin
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
908dutch
 
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Softwares
 
WEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service ProvidersWEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service Providers
Severalnines
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
Ortus Solutions, Corp
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
SimonedeGijt
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
avufu
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
Mitchell Marsh
 
Break data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud ConnectorsBreak data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud Connectors
confluent
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
Ortus Solutions, Corp
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
karim wahed
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
onemonitarsoftware
 

Recently uploaded (20)

Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
 
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdfWhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
 
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
 
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
 
WEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service ProvidersWEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service Providers
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
 
Break data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud ConnectorsBreak data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud Connectors
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
 

IONIC - Hybrid Mobile App Development

  • 1. AN OPEN SOURCE FRAMEWORK FOR DEVELOPING HYBRID APPS
  • 3. IONIC Is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser
  • 4. HISTORY • IONIC was founded by DRIFTY CO. , BEN SPERRY and MAX LYNCH. in 2012. • IONIC was created by drifty co. In 2013. Drifty's prior products include codiqa and jetstrap. • Today, IONIC is the world's most popular cross-platform mobile development and 5 Million developers
  • 6. • Is open source framework. • One source for all the supported platforms. • Main development in html, css and js, which almost all web developers.
  • 8. • Powerful CSS preprocessor • Helps keep large style sheets • A streaming built system. • Automate common tasks, minification, compiling, etc.
  • 10. ADVANTAGES • IONIC solves multiple device resolution issues. • It has own icons (IONICONS). • Less time building your app.
  • 11. IONIC APP RUN ON MANY PLATFORMS • Amazon Fire OS • Android • BlackBerry • Firefox OS • IOS • Mac OS X • UBUNTU • Web OS • Windows phone 7 • Windows phone 8 • Browser
  • 13. • First Install JDK • Next install Node.Js • Then install Apache cordova and ionic. • Add ionic templates. • Start a project. • Install Visual Studio code (for edit your app)
  • 14. DOWNLOAD AND INSTALL JDK Following Link : http://www.oracle.com/technetwork/java/javase/downloads/index-jsp- 138363.html
  • 15. DOWNLOAD AND INSTALL NODE.JS Following Link : https://nodejs.org/en/download/
  • 16. install Apache cordova and ionic. • Open Terminal window npm install -g cordova ionic • Windows • MAC OS sudo npm install -g cordova ionic • If you have already installed Apche cordova and ionic npm update -g cordova ionic sudo npm update -g cordova ionic
  • 18. START A PROJECT Ionic serve Ionic serve --lab
  • 19. • Install and download Visual Studio Code • Then you can open a project using Visual Studio code. • After you can edit your App. Following Link : https://code.visualstudio.com/download
  • 20. REFERENCES • HTTPS://IONICFRAMEWORK.COM/DOCS/ • HTTPS://GITHUB.COM/DRIFTYCO/IONIC • HTTPS://EN.WIKIPEDIA.ORG/WIKI/IONIC_(MOBILE_APP_FRAMEWORK)