SlideShare a Scribd company logo
1 of 13
An overview of
IONIC
BUILDING HYBRID APPS WITH ANGULARJS AND IONIC
Table of Content
 Native v/s Hybrid.
 What is ionic
 What is Cordova
 Prerequisites
 Setup
Native v/s Hybrid
The Downside of Native.
 Proficiency in each platform.
 Entirely separate code bases.
 Timely & expensive development.
"What is the alternate?"
The Alternate is hybrid Apps
 Write once, run everywhere!!!
 HTML5 that acts like native
 Web wrapped in native layer
 Direct access to native APIs through plugins.
 Familiar web dev environment.
What is Ionic?
Ionic features
 Created by Drifty, Co in 2013.
 HTML5 framework for cross platform app.
 If you know how to make website, you will be able to build real mobile app.
 Uses Cordova for creating running, building, deploying mobile app
Ionic is a hybrid concept that that uses the angular JS and apache Cordova to build
the applications. Ionic uses web technologies that enables web developers to switches
to mobile technologies.
Apache Cordova
Features
 Uses web technologies rather than relying on platform API's.
 It enable wrapping up of web technologies code depending upon the platform.
 All layout rendering is done through Web Views instead of platform native UI.
 Other than ionic Cordova is used by Onseen UI, GapDebug, Visual studio, etc.
Cordova formally known as phoneGap which was acquired by Adobe 2011.
Prerequisites
But before installing CLI and Cordova , we need to have Node.js
(https://nodejs.org/en/)
 $ npm install -g ionic cordova
Creating a project
 $ionic start <project_name> <set_starter_type> --type=<ionic-angular>
Set_starter_type = 1. tabs, 2. blank, 3. sidemenu
type = ionic-angular
Adding platform
 We need to add the platform for the specific mobile OS
 $ionic cordova platform add <define_type>
define_type = iOS / Android.
Adding a new page
 Whenever we need to have a new page , run this command.
 $ ionic g page <pageName>
Other Useful commands
 $ionic cordova build ios/android -> It is to compile the code
 $ionic cordova run ios/android -> Run on simulator
 $ionic serve –l -> Run on the browser
Contact for any assistance
www.cynoteck.com
Contact No: +1-612-800-9092,+918272014440,
+918430155522s
Website : www.cynoteck.com
Email : sales@Cynoteck.com
Thank You!

More Related Content

What's hot

Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkCihad Horuzoğlu
 
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 AngularJSZvika Epstein
 
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 jsHector Iribarne
 
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 ApplicationsSasha dos Santos
 
Ionic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application FrameworkIonic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application FrameworkSanjay Kumar
 
Cordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsCordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsEddie Lau
 
Hybrid Apps with Ionic Framework
Hybrid Apps with Ionic FrameworkHybrid Apps with Ionic Framework
Hybrid Apps with Ionic FrameworkBramus Van Damme
 
Hybrid app in ionic framework overview
Hybrid app in ionic framework overviewHybrid app in ionic framework overview
Hybrid app in ionic framework overviewSanket Devlekar
 
Ionic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SFIonic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SFLukas Ruebbelke
 
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
 
Getting started with the Ionic Framework
Getting started with the Ionic FrameworkGetting started with the Ionic Framework
Getting started with the Ionic FrameworkAnuradha Weeraman
 
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 FrameworkJulien Renaux
 
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 applicationLucio Grenzi
 
Hybrid Mobile Apps - Meetup
Hybrid Mobile Apps - MeetupHybrid Mobile Apps - Meetup
Hybrid Mobile Apps - MeetupSanjay Patel
 
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 FrameworkTroy Miles
 
Ionic 2: Mobile apps with the Web
Ionic 2: Mobile apps with the WebIonic 2: Mobile apps with the Web
Ionic 2: Mobile apps with the WebMike Hartington
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksJuarez Filho
 

What's hot (20)

Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
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
 
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
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
 
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 - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application FrameworkIonic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application Framework
 
Cordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsCordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ Codeaholics
 
Hybrid Apps with Ionic Framework
Hybrid Apps with Ionic FrameworkHybrid Apps with Ionic Framework
Hybrid Apps with Ionic Framework
 
Hybrid app in ionic framework overview
Hybrid app in ionic framework overviewHybrid app in ionic framework overview
Hybrid app in ionic framework overview
 
Intro Angular Ionic
Intro Angular Ionic Intro Angular Ionic
Intro Angular Ionic
 
Ionic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SFIonic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SF
 
Ionic Framework
Ionic FrameworkIonic Framework
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)
 
Getting started with the Ionic Framework
Getting started with the Ionic FrameworkGetting started with the Ionic Framework
Getting started with the Ionic Framework
 
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
 
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
 
Hybrid Mobile Apps - Meetup
Hybrid Mobile Apps - MeetupHybrid Mobile Apps - Meetup
Hybrid Mobile Apps - Meetup
 
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 2: Mobile apps with the Web
Ionic 2: Mobile apps with the WebIonic 2: Mobile apps with the Web
Ionic 2: Mobile apps with the Web
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
 

Similar to An overview of Ionic

Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGapJoseph Labrecque
 
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 SourceAll Things Open
 
Introduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App DevelopmentIntroduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App DevelopmentÖzcan Zafer AYAN
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application developmentKunjan Thakkar
 
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 FrameworkTroy Miles
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackChibuzor Obiora
 
The Best Alternatives To The Ionic Framework.pdf
The Best Alternatives To The Ionic Framework.pdfThe Best Alternatives To The Ionic Framework.pdf
The Best Alternatives To The Ionic Framework.pdfMoon Technolabs Pvt. Ltd.
 
Telerik app builder
Telerik app builderTelerik app builder
Telerik app buildermssaman
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioMizanur Sarker
 
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Hazem Saleh
 

Similar to An overview of Ionic (20)

Ionic2 First Lesson of Four
Ionic2 First Lesson of FourIonic2 First Lesson of Four
Ionic2 First Lesson of Four
 
iOS App Using cordova
iOS App Using cordovaiOS App Using cordova
iOS App Using cordova
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGap
 
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
 
Ionic
IonicIonic
Ionic
 
Introduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App DevelopmentIntroduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App Development
 
Ionic
IonicIonic
Ionic
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application development
 
Talk (2)
Talk (2)Talk (2)
Talk (2)
 
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
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJS
 
Building mobile apps using meteorJS
Building mobile apps using meteorJSBuilding mobile apps using meteorJS
Building mobile apps using meteorJS
 
Cordova 101
Cordova 101Cordova 101
Cordova 101
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & Loopback
 
The Best Alternatives To The Ionic Framework.pdf
The Best Alternatives To The Ionic Framework.pdfThe Best Alternatives To The Ionic Framework.pdf
The Best Alternatives To The Ionic Framework.pdf
 
Telerik app builder
Telerik app builderTelerik app builder
Telerik app builder
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual Studio
 
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
 

More from Cynoteck Technology Solutions Private Limited

More from Cynoteck Technology Solutions Private Limited (20)

Delivering powerful integrations without code using out-of-the-box Salesforce...
Delivering powerful integrations without code using out-of-the-box Salesforce...Delivering powerful integrations without code using out-of-the-box Salesforce...
Delivering powerful integrations without code using out-of-the-box Salesforce...
 
Test automation using selenium
Test automation using seleniumTest automation using selenium
Test automation using selenium
 
Business process flow enhancement
Business process flow enhancementBusiness process flow enhancement
Business process flow enhancement
 
Editable Grids
Editable GridsEditable Grids
Editable Grids
 
Multi Select Option set in Microsoft Dynamics 365
Multi Select Option set in Microsoft Dynamics 365Multi Select Option set in Microsoft Dynamics 365
Multi Select Option set in Microsoft Dynamics 365
 
Microsoft Dynamics 365 for customer services
Microsoft Dynamics 365 for customer servicesMicrosoft Dynamics 365 for customer services
Microsoft Dynamics 365 for customer services
 
Configuring AWS with IoT
Configuring AWS with IoTConfiguring AWS with IoT
Configuring AWS with IoT
 
An Overview of Google Assistant
An Overview of Google Assistant An Overview of Google Assistant
An Overview of Google Assistant
 
What's new in Xcode 9?
What's new in Xcode 9? What's new in Xcode 9?
What's new in Xcode 9?
 
An overview of Beacons
An overview of BeaconsAn overview of Beacons
An overview of Beacons
 
An Overview of Angular 4
An Overview of Angular 4 An Overview of Angular 4
An Overview of Angular 4
 
Microsoft Dynamics NAV
Microsoft Dynamics NAV Microsoft Dynamics NAV
Microsoft Dynamics NAV
 
Dynamics 365 for financials
Dynamics 365 for financials Dynamics 365 for financials
Dynamics 365 for financials
 
Microsoft Dynamics 365 for Marketing
Microsoft Dynamics 365 for MarketingMicrosoft Dynamics 365 for Marketing
Microsoft Dynamics 365 for Marketing
 
What is power apps
What is power appsWhat is power apps
What is power apps
 
Microsoft Dynamics 365 for sales
Microsoft Dynamics  365 for sales Microsoft Dynamics  365 for sales
Microsoft Dynamics 365 for sales
 
Microsoft Dynamics 365- field services
Microsoft Dynamics  365- field servicesMicrosoft Dynamics  365- field services
Microsoft Dynamics 365- field services
 
What is project service automation in dynamics 365
What is project service automation in dynamics 365What is project service automation in dynamics 365
What is project service automation in dynamics 365
 
An overview of what is dynamics 365
An overview of what is dynamics 365An overview of what is dynamics 365
An overview of what is dynamics 365
 
Here’s, how microsoft social engagement boost lead
Here’s, how microsoft social engagement boost leadHere’s, how microsoft social engagement boost lead
Here’s, how microsoft social engagement boost lead
 

Recently uploaded

WSO2Con2024 - Low-Code Integration Tooling
WSO2Con2024 - Low-Code Integration ToolingWSO2Con2024 - Low-Code Integration Tooling
WSO2Con2024 - Low-Code Integration ToolingWSO2
 
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...WSO2
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...SelfMade bd
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastPapp Krisztián
 
WSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go PlatformlessWSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go PlatformlessWSO2
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...Shane Coughlan
 
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2
 
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Bert Jan Schrijver
 
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2
 
WSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security ProgramWSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security ProgramWSO2
 
WSO2Con2024 - Hello Choreo Presentation - Kanchana
WSO2Con2024 - Hello Choreo Presentation - KanchanaWSO2Con2024 - Hello Choreo Presentation - Kanchana
WSO2Con2024 - Hello Choreo Presentation - KanchanaWSO2
 
WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...
WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...
WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...WSO2
 
WSO2CON 2024 - Building a Digital Government in Uganda
WSO2CON 2024 - Building a Digital Government in UgandaWSO2CON 2024 - Building a Digital Government in Uganda
WSO2CON 2024 - Building a Digital Government in UgandaWSO2
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension AidPhilip Schwarz
 
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...WSO2
 
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public Administration
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public AdministrationWSO2CON 2024 - How CSI Piemonte Is Apifying the Public Administration
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public AdministrationWSO2
 
WSO2CON 2024 Slides - Open Source to SaaS
WSO2CON 2024 Slides - Open Source to SaaSWSO2CON 2024 Slides - Open Source to SaaS
WSO2CON 2024 Slides - Open Source to SaaSWSO2
 
AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdf
AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdfAzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdf
AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdfryanfarris8
 
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of TransformationWSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of TransformationWSO2
 

Recently uploaded (20)

WSO2Con2024 - Low-Code Integration Tooling
WSO2Con2024 - Low-Code Integration ToolingWSO2Con2024 - Low-Code Integration Tooling
WSO2Con2024 - Low-Code Integration Tooling
 
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
WSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go PlatformlessWSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go Platformless
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
 
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
 
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
 
WSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security ProgramWSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security Program
 
WSO2Con2024 - Hello Choreo Presentation - Kanchana
WSO2Con2024 - Hello Choreo Presentation - KanchanaWSO2Con2024 - Hello Choreo Presentation - Kanchana
WSO2Con2024 - Hello Choreo Presentation - Kanchana
 
WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...
WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...
WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...
 
WSO2CON 2024 - Building a Digital Government in Uganda
WSO2CON 2024 - Building a Digital Government in UgandaWSO2CON 2024 - Building a Digital Government in Uganda
WSO2CON 2024 - Building a Digital Government in Uganda
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
 
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public Administration
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public AdministrationWSO2CON 2024 - How CSI Piemonte Is Apifying the Public Administration
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public Administration
 
WSO2CON 2024 Slides - Open Source to SaaS
WSO2CON 2024 Slides - Open Source to SaaSWSO2CON 2024 Slides - Open Source to SaaS
WSO2CON 2024 Slides - Open Source to SaaS
 
AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdf
AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdfAzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdf
AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdf
 
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of TransformationWSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation
 

An overview of Ionic

  • 1. An overview of IONIC BUILDING HYBRID APPS WITH ANGULARJS AND IONIC
  • 2. Table of Content  Native v/s Hybrid.  What is ionic  What is Cordova  Prerequisites  Setup
  • 3. Native v/s Hybrid The Downside of Native.  Proficiency in each platform.  Entirely separate code bases.  Timely & expensive development. "What is the alternate?"
  • 4. The Alternate is hybrid Apps  Write once, run everywhere!!!  HTML5 that acts like native  Web wrapped in native layer  Direct access to native APIs through plugins.  Familiar web dev environment.
  • 5. What is Ionic? Ionic features  Created by Drifty, Co in 2013.  HTML5 framework for cross platform app.  If you know how to make website, you will be able to build real mobile app.  Uses Cordova for creating running, building, deploying mobile app Ionic is a hybrid concept that that uses the angular JS and apache Cordova to build the applications. Ionic uses web technologies that enables web developers to switches to mobile technologies.
  • 6. Apache Cordova Features  Uses web technologies rather than relying on platform API's.  It enable wrapping up of web technologies code depending upon the platform.  All layout rendering is done through Web Views instead of platform native UI.  Other than ionic Cordova is used by Onseen UI, GapDebug, Visual studio, etc. Cordova formally known as phoneGap which was acquired by Adobe 2011.
  • 7. Prerequisites But before installing CLI and Cordova , we need to have Node.js (https://nodejs.org/en/)  $ npm install -g ionic cordova
  • 8. Creating a project  $ionic start <project_name> <set_starter_type> --type=<ionic-angular> Set_starter_type = 1. tabs, 2. blank, 3. sidemenu type = ionic-angular
  • 9. Adding platform  We need to add the platform for the specific mobile OS  $ionic cordova platform add <define_type> define_type = iOS / Android.
  • 10. Adding a new page  Whenever we need to have a new page , run this command.  $ ionic g page <pageName>
  • 11. Other Useful commands  $ionic cordova build ios/android -> It is to compile the code  $ionic cordova run ios/android -> Run on simulator  $ionic serve –l -> Run on the browser
  • 12. Contact for any assistance www.cynoteck.com Contact No: +1-612-800-9092,+918272014440, +918430155522s Website : www.cynoteck.com Email : sales@Cynoteck.com