SlideShare a Scribd company logo
1 of 19
@electrobabe
Simple Mobile Development
With Ionic
27.4.2016 ViennaJS 4/16 @electrobabe
Background
27.4.2016 ViennaJS 4/16 @electrobabe
The Challenge
27.4.2016 ViennaJS 4/16 @electrobabe
Mobile Development
27.4.2016 ViennaJS 4/16 @electrobabe
Many different implementations
27.4.2016 ViennaJS 4/16 @electrobabe
Ionic FTW!
27.4.2016 ViennaJS 4/16 @electrobabe
AngularJS + mobile first
27.4.2016 ViennaJS 4/16 @electrobabe
...add some Cordova
27.4.2016 ViennaJS 4/16 @electrobabe
Cross-Platform
27.4.2016 ViennaJS 4/16 @electrobabe
Merge together
27.4.2016 ViennaJS 4/16 @electrobabe
Hands on Ionic
27.4.2016 ViennaJS 4/16 @electrobabe
CLI
$ npm install -g ionic
$ ionic start awesomeApp [tabs|blank|sidemenu]
$ ionic platform add [ios|android|wp8..]
$ ionic build [target]
$ ionic emulate [target]
$ ionic run [target]
27.4.2016 ViennaJS 4/16 @electrobabe
Tools
$ cordova plugin add
[cordova-plugin-device-motion|cordova-plugin-vibration|
cordova-plugin-nativeaudio|..]
$ ionic resources
$ ionic run [target] --livereload
$ ionic serve –lab
27.4.2016 ViennaJS 4/16 @electrobabe
Ionic Lab
27.4.2016 ViennaJS 4/16 @electrobabe
Results
27.4.2016 ViennaJS 4/16 @electrobabe
Best Practices
27.4.2016 ViennaJS 4/16 @electrobabe
Lessons Learned
27.4.2016 ViennaJS 4/16 @electrobabe
Any Questions?
27.4.2016 ViennaJS 4/16 @electrobabe
Links
Slides on Slideshare http://de.slideshare.net/barbarao
http://electrobabe.at
http://likeahipster.com

More Related Content

Viewers also liked

Java EE 6 and NoSQL Workshop DevFest Austria
Java EE 6 and NoSQL Workshop DevFest AustriaJava EE 6 and NoSQL Workshop DevFest Austria
Java EE 6 and NoSQL Workshop DevFest AustriaShekhar Gulati
 
Introduction to Browser DOM
Introduction to Browser DOMIntroduction to Browser DOM
Introduction to Browser DOMSiva Arunachalam
 
Developing modern java web applications with java ee 7 and angular js
Developing modern java web applications with java ee 7 and angular jsDeveloping modern java web applications with java ee 7 and angular js
Developing modern java web applications with java ee 7 and angular jsShekhar Gulati
 
AngularJS & Job
AngularJS & JobAngularJS & Job
AngularJS & Jobganesgo
 
Thinking beyond RDBMS - Building Polyglot Persistence Java Applications Devf...
Thinking beyond RDBMS  - Building Polyglot Persistence Java Applications Devf...Thinking beyond RDBMS  - Building Polyglot Persistence Java Applications Devf...
Thinking beyond RDBMS - Building Polyglot Persistence Java Applications Devf...Shekhar Gulati
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...OPITZ CONSULTING Deutschland
 
Bringing spatial love to your python application
Bringing spatial love to your python applicationBringing spatial love to your python application
Bringing spatial love to your python applicationShekhar Gulati
 
Surviving as a Professional Software Developer
Surviving as a Professional Software DeveloperSurviving as a Professional Software Developer
Surviving as a Professional Software DeveloperYakov Fain
 
Indic threads java10-spring-roo-and-the-cloud
Indic threads java10-spring-roo-and-the-cloudIndic threads java10-spring-roo-and-the-cloud
Indic threads java10-spring-roo-and-the-cloudShekhar Gulati
 
Building spatial back ends with Node.js and MongoDB
Building spatial back ends with Node.js and MongoDBBuilding spatial back ends with Node.js and MongoDB
Building spatial back ends with Node.js and MongoDBShekhar Gulati
 
Real World AngularJS recipes: beyond TodoMVC
Real World AngularJS recipes: beyond TodoMVCReal World AngularJS recipes: beyond TodoMVC
Real World AngularJS recipes: beyond TodoMVCCarlo Bonamico
 
Angularjs interview questions and answers
Angularjs interview questions and answersAngularjs interview questions and answers
Angularjs interview questions and answersAnil Singh
 
Introduction to Browser Internals
Introduction to Browser InternalsIntroduction to Browser Internals
Introduction to Browser InternalsSiva Arunachalam
 
Speed up your Web applications with HTML5 WebSockets
Speed up your Web applications with HTML5 WebSocketsSpeed up your Web applications with HTML5 WebSockets
Speed up your Web applications with HTML5 WebSocketsYakov Fain
 

Viewers also liked (16)

Java EE 6 and NoSQL Workshop DevFest Austria
Java EE 6 and NoSQL Workshop DevFest AustriaJava EE 6 and NoSQL Workshop DevFest Austria
Java EE 6 and NoSQL Workshop DevFest Austria
 
Introduction to Browser DOM
Introduction to Browser DOMIntroduction to Browser DOM
Introduction to Browser DOM
 
Developing modern java web applications with java ee 7 and angular js
Developing modern java web applications with java ee 7 and angular jsDeveloping modern java web applications with java ee 7 and angular js
Developing modern java web applications with java ee 7 and angular js
 
AngularJS & Job
AngularJS & JobAngularJS & Job
AngularJS & Job
 
Thinking beyond RDBMS - Building Polyglot Persistence Java Applications Devf...
Thinking beyond RDBMS  - Building Polyglot Persistence Java Applications Devf...Thinking beyond RDBMS  - Building Polyglot Persistence Java Applications Devf...
Thinking beyond RDBMS - Building Polyglot Persistence Java Applications Devf...
 
Hicss 42 Presentation
Hicss 42 PresentationHicss 42 Presentation
Hicss 42 Presentation
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
 
Bringing spatial love to your python application
Bringing spatial love to your python applicationBringing spatial love to your python application
Bringing spatial love to your python application
 
Surviving as a Professional Software Developer
Surviving as a Professional Software DeveloperSurviving as a Professional Software Developer
Surviving as a Professional Software Developer
 
Indic threads java10-spring-roo-and-the-cloud
Indic threads java10-spring-roo-and-the-cloudIndic threads java10-spring-roo-and-the-cloud
Indic threads java10-spring-roo-and-the-cloud
 
Building spatial back ends with Node.js and MongoDB
Building spatial back ends with Node.js and MongoDBBuilding spatial back ends with Node.js and MongoDB
Building spatial back ends with Node.js and MongoDB
 
Real World AngularJS recipes: beyond TodoMVC
Real World AngularJS recipes: beyond TodoMVCReal World AngularJS recipes: beyond TodoMVC
Real World AngularJS recipes: beyond TodoMVC
 
Angularjs interview questions and answers
Angularjs interview questions and answersAngularjs interview questions and answers
Angularjs interview questions and answers
 
AngularJS in large applications - AE NV
AngularJS in large applications - AE NVAngularJS in large applications - AE NV
AngularJS in large applications - AE NV
 
Introduction to Browser Internals
Introduction to Browser InternalsIntroduction to Browser Internals
Introduction to Browser Internals
 
Speed up your Web applications with HTML5 WebSockets
Speed up your Web applications with HTML5 WebSocketsSpeed up your Web applications with HTML5 WebSockets
Speed up your Web applications with HTML5 WebSockets
 

Similar to Simple Mobile Development With Ionic - Ondrisek

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
 
WordPress の現在とこれから
WordPress の現在とこれからWordPress の現在とこれから
WordPress の現在とこれからNaoko Takano
 
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
 
Wikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGapWikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGapTed Chien
 
JS awesomeness or how will ES6 help me build better apps ?
JS awesomeness or how will ES6 help me build better apps ?JS awesomeness or how will ES6 help me build better apps ?
JS awesomeness or how will ES6 help me build better apps ?Пламен Стоев
 
"Chatbots vs. Apps" Cospace ViennaValley Ondrisek
"Chatbots vs. Apps" Cospace ViennaValley Ondrisek"Chatbots vs. Apps" Cospace ViennaValley Ondrisek
"Chatbots vs. Apps" Cospace ViennaValley OndrisekBarbara Ondrisek
 
Lucio Grenzi - Use Ionic framework to develop mobile application
Lucio Grenzi - Use Ionic framework to develop mobile applicationLucio Grenzi - Use Ionic framework to develop mobile application
Lucio Grenzi - Use Ionic framework to develop mobile applicationCodemotion
 
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
 
Matteo Meucci OWASP Testing Guide v4
Matteo Meucci OWASP Testing Guide v4Matteo Meucci OWASP Testing Guide v4
Matteo Meucci OWASP Testing Guide v4Matteo Meucci
 
世界標準ウェブツール WordPress と そのコミュニティーの魅力
世界標準ウェブツール  WordPress と そのコミュニティーの魅力世界標準ウェブツール  WordPress と そのコミュニティーの魅力
世界標準ウェブツール WordPress と そのコミュニティーの魅力Naoko Takano
 
Web Developers are now Mobile Developers
Web Developers are now Mobile Developers Web Developers are now Mobile Developers
Web Developers are now Mobile Developers boyney123
 
Getting started with the Ionic Framework
Getting started with the Ionic FrameworkGetting started with the Ionic Framework
Getting started with the Ionic FrameworkAnuradha Weeraman
 
IONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentIONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentMalan Amarasinghe
 
App developer as a Web developer (ROROSyd - Jul 15)
App developer as a Web developer (ROROSyd - Jul 15)App developer as a Web developer (ROROSyd - Jul 15)
App developer as a Web developer (ROROSyd - Jul 15)Sameera Gayan
 
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 FrameworkAayush Shrestha
 
Rapid mobile app development using Ionic framework
Rapid mobile app development using Ionic frameworkRapid mobile app development using Ionic framework
Rapid mobile app development using Ionic frameworkSwaminathan Vetri
 
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
 

Similar to Simple Mobile Development With Ionic - Ondrisek (20)

Ionic
IonicIonic
Ionic
 
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
 
WordPress の現在とこれから
WordPress の現在とこれからWordPress の現在とこれから
WordPress の現在とこれから
 
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
 
Hybrid Mobile App Development Tools
Hybrid Mobile App Development ToolsHybrid Mobile App Development Tools
Hybrid Mobile App Development Tools
 
Wikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGapWikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGap
 
JS awesomeness or how will ES6 help me build better apps ?
JS awesomeness or how will ES6 help me build better apps ?JS awesomeness or how will ES6 help me build better apps ?
JS awesomeness or how will ES6 help me build better apps ?
 
"Chatbots vs. Apps" Cospace ViennaValley Ondrisek
"Chatbots vs. Apps" Cospace ViennaValley Ondrisek"Chatbots vs. Apps" Cospace ViennaValley Ondrisek
"Chatbots vs. Apps" Cospace ViennaValley Ondrisek
 
Lucio Grenzi - Use Ionic framework to develop mobile application
Lucio Grenzi - Use Ionic framework to develop mobile applicationLucio Grenzi - Use Ionic framework to develop mobile application
Lucio Grenzi - Use Ionic framework to develop mobile application
 
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
 
Matteo Meucci OWASP Testing Guide v4
Matteo Meucci OWASP Testing Guide v4Matteo Meucci OWASP Testing Guide v4
Matteo Meucci OWASP Testing Guide v4
 
世界標準ウェブツール WordPress と そのコミュニティーの魅力
世界標準ウェブツール  WordPress と そのコミュニティーの魅力世界標準ウェブツール  WordPress と そのコミュニティーの魅力
世界標準ウェブツール WordPress と そのコミュニティーの魅力
 
IONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentIONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App Development
 
Web Developers are now Mobile Developers
Web Developers are now Mobile Developers Web Developers are now Mobile Developers
Web Developers are now Mobile Developers
 
Getting started with the Ionic Framework
Getting started with the Ionic FrameworkGetting started with the Ionic Framework
Getting started with the Ionic Framework
 
IONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentIONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App Development
 
App developer as a Web developer (ROROSyd - Jul 15)
App developer as a Web developer (ROROSyd - Jul 15)App developer as a Web developer (ROROSyd - Jul 15)
App developer as a Web developer (ROROSyd - Jul 15)
 
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
 
Rapid mobile app development using Ionic framework
Rapid mobile app development using Ionic frameworkRapid mobile app development using Ionic framework
Rapid mobile app development using 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)
 

More from Barbara Ondrisek

Lessons learned creating a virtual personality - Botscamp - Ondrisek
Lessons learned creating  a virtual personality - Botscamp - OndrisekLessons learned creating  a virtual personality - Botscamp - Ondrisek
Lessons learned creating a virtual personality - Botscamp - OndrisekBarbara Ondrisek
 
Privacy Week Ondrisek - Data Security And Privacy Of Chatbots
Privacy Week Ondrisek - Data Security And Privacy Of ChatbotsPrivacy Week Ondrisek - Data Security And Privacy Of Chatbots
Privacy Week Ondrisek - Data Security And Privacy Of ChatbotsBarbara Ondrisek
 
Ondrisek @ DevTernity "Insights into Chatbot Development - Implementing Cros...
Ondrisek @ DevTernity  "Insights into Chatbot Development - Implementing Cros...Ondrisek @ DevTernity  "Insights into Chatbot Development - Implementing Cros...
Ondrisek @ DevTernity "Insights into Chatbot Development - Implementing Cros...Barbara Ondrisek
 
Risiken von E-voting - CryptoParty - Ondrisek
Risiken von E-voting - CryptoParty - OndrisekRisiken von E-voting - CryptoParty - Ondrisek
Risiken von E-voting - CryptoParty - OndrisekBarbara Ondrisek
 
Insights into Chatbot Development - Implementing Cross-Platform Chatbots
Insights into Chatbot Development - Implementing Cross-Platform ChatbotsInsights into Chatbot Development - Implementing Cross-Platform Chatbots
Insights into Chatbot Development - Implementing Cross-Platform ChatbotsBarbara Ondrisek
 
The Austrian Chatbot Ecosystem - Startup Live Brussels - Ondrisek
The Austrian Chatbot Ecosystem - Startup Live Brussels - OndrisekThe Austrian Chatbot Ecosystem - Startup Live Brussels - Ondrisek
The Austrian Chatbot Ecosystem - Startup Live Brussels - OndrisekBarbara Ondrisek
 
Best Practices At Implementing A Cross Platform Chatbot - Webclerks Meetup - ...
Best Practices At Implementing A Cross Platform Chatbot - Webclerks Meetup - ...Best Practices At Implementing A Cross Platform Chatbot - Webclerks Meetup - ...
Best Practices At Implementing A Cross Platform Chatbot - Webclerks Meetup - ...Barbara Ondrisek
 
The Success Story of Mica, the Hipster Cat Bot
The Success Story of Mica, the Hipster Cat BotThe Success Story of Mica, the Hipster Cat Bot
The Success Story of Mica, the Hipster Cat BotBarbara Ondrisek
 
Ondrisek - Mica, the Hipster Cat Bot - Talkabot
Ondrisek - Mica, the Hipster Cat Bot - Talkabot Ondrisek - Mica, the Hipster Cat Bot - Talkabot
Ondrisek - Mica, the Hipster Cat Bot - Talkabot Barbara Ondrisek
 
JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)
JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)
JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)Barbara Ondrisek
 

More from Barbara Ondrisek (11)

Lessons learned creating a virtual personality - Botscamp - Ondrisek
Lessons learned creating  a virtual personality - Botscamp - OndrisekLessons learned creating  a virtual personality - Botscamp - Ondrisek
Lessons learned creating a virtual personality - Botscamp - Ondrisek
 
Privacy Week Ondrisek - Data Security And Privacy Of Chatbots
Privacy Week Ondrisek - Data Security And Privacy Of ChatbotsPrivacy Week Ondrisek - Data Security And Privacy Of Chatbots
Privacy Week Ondrisek - Data Security And Privacy Of Chatbots
 
Ondrisek @ DevTernity "Insights into Chatbot Development - Implementing Cros...
Ondrisek @ DevTernity  "Insights into Chatbot Development - Implementing Cros...Ondrisek @ DevTernity  "Insights into Chatbot Development - Implementing Cros...
Ondrisek @ DevTernity "Insights into Chatbot Development - Implementing Cros...
 
Risiken von E-voting - CryptoParty - Ondrisek
Risiken von E-voting - CryptoParty - OndrisekRisiken von E-voting - CryptoParty - Ondrisek
Risiken von E-voting - CryptoParty - Ondrisek
 
Insights into Chatbot Development - Implementing Cross-Platform Chatbots
Insights into Chatbot Development - Implementing Cross-Platform ChatbotsInsights into Chatbot Development - Implementing Cross-Platform Chatbots
Insights into Chatbot Development - Implementing Cross-Platform Chatbots
 
The Austrian Chatbot Ecosystem - Startup Live Brussels - Ondrisek
The Austrian Chatbot Ecosystem - Startup Live Brussels - OndrisekThe Austrian Chatbot Ecosystem - Startup Live Brussels - Ondrisek
The Austrian Chatbot Ecosystem - Startup Live Brussels - Ondrisek
 
Best Practices At Implementing A Cross Platform Chatbot - Webclerks Meetup - ...
Best Practices At Implementing A Cross Platform Chatbot - Webclerks Meetup - ...Best Practices At Implementing A Cross Platform Chatbot - Webclerks Meetup - ...
Best Practices At Implementing A Cross Platform Chatbot - Webclerks Meetup - ...
 
The Success Story of Mica, the Hipster Cat Bot
The Success Story of Mica, the Hipster Cat BotThe Success Story of Mica, the Hipster Cat Bot
The Success Story of Mica, the Hipster Cat Bot
 
Ondrisek - Mica, the Hipster Cat Bot - Talkabot
Ondrisek - Mica, the Hipster Cat Bot - Talkabot Ondrisek - Mica, the Hipster Cat Bot - Talkabot
Ondrisek - Mica, the Hipster Cat Bot - Talkabot
 
JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)
JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)
JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)
 
keyosk
keyoskkeyosk
keyosk
 

Recently uploaded

Breathing in New Life_ Part 3 05 22 2024.pptx
Breathing in New Life_ Part 3 05 22 2024.pptxBreathing in New Life_ Part 3 05 22 2024.pptx
Breathing in New Life_ Part 3 05 22 2024.pptxFamilyWorshipCenterD
 
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdfACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdfKinben Innovation Private Limited
 
Understanding Poverty: A Community Questionnaire
Understanding Poverty: A Community QuestionnaireUnderstanding Poverty: A Community Questionnaire
Understanding Poverty: A Community Questionnairebazilnaeem7
 
ServiceNow CIS-Discovery Exam Dumps 2024
ServiceNow CIS-Discovery Exam Dumps 2024ServiceNow CIS-Discovery Exam Dumps 2024
ServiceNow CIS-Discovery Exam Dumps 2024SkillCertProExams
 
Deciding The Topic of our Magazine.pptx.
Deciding The Topic of our Magazine.pptx.Deciding The Topic of our Magazine.pptx.
Deciding The Topic of our Magazine.pptx.bazilnaeem7
 
Databricks Machine Learning Associate Exam Dumps 2024.pdf
Databricks Machine Learning Associate Exam Dumps 2024.pdfDatabricks Machine Learning Associate Exam Dumps 2024.pdf
Databricks Machine Learning Associate Exam Dumps 2024.pdfSkillCertProExams
 
DAY 0 8 A Revelation 05-19-2024 PPT.pptx
DAY 0 8 A Revelation 05-19-2024 PPT.pptxDAY 0 8 A Revelation 05-19-2024 PPT.pptx
DAY 0 8 A Revelation 05-19-2024 PPT.pptxFamilyWorshipCenterD
 
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdfMicrosoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdfSkillCertProExams
 
2024-05-15-Surat Meetup-Hyperautomation.pptx
2024-05-15-Surat Meetup-Hyperautomation.pptx2024-05-15-Surat Meetup-Hyperautomation.pptx
2024-05-15-Surat Meetup-Hyperautomation.pptxnitishjain2015
 
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docxThe Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docxMogul Press
 

Recently uploaded (10)

Breathing in New Life_ Part 3 05 22 2024.pptx
Breathing in New Life_ Part 3 05 22 2024.pptxBreathing in New Life_ Part 3 05 22 2024.pptx
Breathing in New Life_ Part 3 05 22 2024.pptx
 
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdfACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
ACM CHT Best Inspection Practices Kinben Innovation MIC Slideshare.pdf
 
Understanding Poverty: A Community Questionnaire
Understanding Poverty: A Community QuestionnaireUnderstanding Poverty: A Community Questionnaire
Understanding Poverty: A Community Questionnaire
 
ServiceNow CIS-Discovery Exam Dumps 2024
ServiceNow CIS-Discovery Exam Dumps 2024ServiceNow CIS-Discovery Exam Dumps 2024
ServiceNow CIS-Discovery Exam Dumps 2024
 
Deciding The Topic of our Magazine.pptx.
Deciding The Topic of our Magazine.pptx.Deciding The Topic of our Magazine.pptx.
Deciding The Topic of our Magazine.pptx.
 
Databricks Machine Learning Associate Exam Dumps 2024.pdf
Databricks Machine Learning Associate Exam Dumps 2024.pdfDatabricks Machine Learning Associate Exam Dumps 2024.pdf
Databricks Machine Learning Associate Exam Dumps 2024.pdf
 
DAY 0 8 A Revelation 05-19-2024 PPT.pptx
DAY 0 8 A Revelation 05-19-2024 PPT.pptxDAY 0 8 A Revelation 05-19-2024 PPT.pptx
DAY 0 8 A Revelation 05-19-2024 PPT.pptx
 
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdfMicrosoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
Microsoft Fabric Analytics Engineer (DP-600) Exam Dumps 2024.pdf
 
2024-05-15-Surat Meetup-Hyperautomation.pptx
2024-05-15-Surat Meetup-Hyperautomation.pptx2024-05-15-Surat Meetup-Hyperautomation.pptx
2024-05-15-Surat Meetup-Hyperautomation.pptx
 
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docxThe Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
The Influence and Evolution of Mogul Press in Contemporary Public Relations.docx
 

Simple Mobile Development With Ionic - Ondrisek

Editor's Notes

  1. Hello! My name is Barbara Ondrisek and today I'm going to give a talk about my experience and best practices with Ionic. I’ve been working as a freelancer for more than 15 years for different companies mostly on Java web projects, but I also like mobile development a lot – especially Android.
  2. Although I’m a Java developer I was working lately for the Erste Bank on the new version of their netbanking system George and my group there was developing a sub-project in AngularJS. I have a strong Java background – I love Java, but I always wanted to keep in touch with the frontend, respectively the frondendS, since apps are also “frontends” of a service. My first “commercial” job was 2001 for Siemens, working on a prototype for a chat client running with J2ME. Since this job in 2001 I fell in love mobile development and I was even more happy after Android came to market 2008 because Android apps are developed in Java.
  3. Over time I developed a couple of Android apps, some commercial as a freelancer, others just for fun and suddenly one of my own apps gained more attention than I expected: The LIKE A HIPSTER app. LIKE A HIPSTER is a fun project I started with a friend and my cat and it became more popular over the first month, more than we expected. Due to severe group pressure and the success of the Android app I had to think about developing an iOS app too. I love to play around with new technologies so I thought – how hard can that possibly be to write an iOS version? So, what about all the other mobile operating systems?
  4. Mobile development is always a fight because there are many different operating systems and devices. And as you might know there is not only the war between the companies themselfes but also one between the customers which phone is better, especially between Android and iOS. When you want to implement the mobile version of your service you have to consider to implement a super-responsive, mobile optimized website too or – what most companies choose - a couple of different native apps for the various OSs...
  5. ...but in the end you might end up with many, many different implementations of the same stuff, which is pretty hard to maintain. So you might develop the same feature in three different teams: the web-team, the Android-team and the iOS-team. Maybe additionally also a Windows-team or a Blackberry-team etc. with a bunch of different code-bases. The cause for this “island-building” is that most developers specialize on a certain language and not many are truly "multilingual", let alone multi-OS. So the solution is...
  6. Ionic is the “beautiful”, free and open source front-end SDK for developing hybrid mobile apps with web technologies for the latest mobile devices. It utilizes the “mobile first” approach and offers a library of mobile-optimized HTML5, CSS and JS components, gestures, and tools for building highly interactive native apps. It uses one code base that is written in...
  7. AngularJS is the self-called "Superheroic JavaScript MVW Framework" - a state of the art JavaScript tool for rich and robust single page web applications that offers a lot that JS alone does not - namely structure. In jQuery-apps the DOM often represents the model, but with Angular the business logic is decoupled from DOM manipulation, which leads to minimal DOM manipulation. Angular calls its principle "Model-View-Whatever": You have a single page app divided into modules such as the login-component, a main screen, sub-screens, the admin-component. Simply speaking: An Angular app is a collection of modules. Angular also offers basic stuff such as: Data binding, scope separation, dependency injection, validators, filters and also Angular-specific stuff like providers, directives, controllers, modules, factories, services.
  8. To make things a little bit more interesting we now can add some native stuff; and this is accomplished with Cordova. Apache Cordova is a tool to access native device APIs and functions, that also supports offline scenarios. More commonly known is Adobe PhoneGap as distribution of Cordova. Core Plugin APIs are: Accelerometer, BatteryStatus, Camera, Capture, Compass, Connection, Contacts, Device-Functions, Events, File-handling and File Transfer, Geolocation, Globalization, InAppBrowser, Media, Notification, Splashscreen, StatusBar, Storage, Vibration. ...so all an app-developer needs and that ...
  9. ...cross-platform focused. By building only one single AngularJS web app with Cordova extensions you now can deliver up to 8 different native mobile apps, namely: Android, iOS, wp8 and windows (8.1, 10, phone 8.1) / blackberry10, Ubuntu (Cordova), firefoxOS, LG webOS, amazon-fireOS and last but not least the browser app itself!
  10. Despite HTML5-functions and the frameworks AngularJS and Cordova, which merge perfectly together, Ionic also offers a platform for integrating services like push notifications and analytics, out of the box SASS-support and great build tools. It is actively developed and continued and there is a huge community around it. It also has a View App to quickly check implementations, live-reload (even on your device) and logging integrated during development. With Ionic you can really fast prototype! And the motto is: Develop once, deploy everywhere.
  11. Ionic comes with a powerful command line interface including build tool: You can use just one command to create, build, test, and deploy your Ionic apps onto any platform. I’ll show you a simple example:
  12. 1. The first command is to install ionic via NPM. From there on you only use the ionic-CLI 2. 2nd command generates a project: You can create an Ionic project using one of ready-made app templates. If generates you an Angular webproject and you can just simply start expanding and altering it! 3. next you just add the platforms you want 4. now you can use Ionic to build your app 5. ..also to emulate the target environment 6. ..or even to run it on your device in debug mode
  13. Native implementations only make sense with use of device features. You can access these with adding Cordova plugins! Then there are other useful commands: 1. ionic resources: generates all the various (iOS) icons and splashscreens out of two png-files in all the needed resolutions – which is really pretty handy 2. livereload on your device is really awesome 3. ionic serve opens a web-browser with the two variants Android and iOS, which is super helpful to develop and looks like this:
  14. This is a screenshot of the chrome browser I use when developing the LIKE A HIPSTER app. Instantly you see the differences between the iOS version and the Android version, since Ionic offers adapted CSS files per native implementation. And once you deploy a release it might look like...
  15. Here you see the two variants: iOS and web As you see the iOS version has an adapted status bar color. And the web version looks a little bit different. Here you see the responsive website. Obviously in the web-version all the cordova plugins such as vibration, acceleration etc. are not working.
  16. My personal best practices are: - use WebStorm as IDE instead of text editors for Mobile Development. It includes build tools, highlighting, “debugging” etc - livereload in browser is awesome - release early, release often! - embrace your Beta-testers, they do help a lot
  17. First of all: -iOS developent sucks! It sucks really hard! See my rant “12 things I hate about iOS development” on electrobabe.at https://electrobabe.at/2016/03/29/12-things-i-hate-about-ios-development/ IOS development feels like being squeezed into something super unintuitive and complicated - not very surprising: not everything is working perfectly on native apps, ios different from android or web etc - windows development sucks as well
  18. Slides on Slideshare http://de.slideshare.net/barbarao/we-are-developers-conference-1342016-vienna http://electrobabe.at https://play.google.com/store/apps/details?id=at.chefbabe.hungry https://play.google.com/store/apps/details?id=com.likeahipster.app