intro to hybrid mobile development && ionic
TRANSCRIPT
![Page 1: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/1.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.IT
Introduction to hybrid mobile development && Ionic@claudiobisconti
![Page 2: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/2.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
1. Native VS Hybrid
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 3: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/3.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
1.1 When we use hybrid applications?
Introduction to hybrid mobile development && Ionic - @claudiobisconti
Generally when your application can’t have:
❏ 3D elements
❏ Fluid animations and smooth contents
(with embarrassing animations)
❏ Your application target contains Android <= 4.4.4
But it works...❏ for a DEMO :)
![Page 4: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/4.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
1.2 Why we use hybrid applications?
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 5: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/5.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
1.3 And...
Introduction to hybrid mobile development && Ionic - @claudiobisconti
Why write two software to develop only one functionality?
Hamlet, not Sherlock
![Page 6: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/6.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
2. IONIC
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 7: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/7.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
2.0 Apache Cordova
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 8: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/8.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
2.0 Apache Cordova
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 9: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/9.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
2.1 AngularJs
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 10: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/10.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
2.2 Acquire Angular skill in 5 minutes
Introduction to hybrid mobile development && Ionic - @claudiobisconti
RULE #1: TWO-WAY BINDING
<html>...<body><div> Say <b>{{ myName }}</b></div><input type="text" ng-model="myName" />
...</html>
'use strict';var app = angular.module('myApp',[]);
app.controller('MyController', ['$scope',
function($scope) { $scope.myName = 'Heisenberg'; }]);
HTML JAVASCRIPT
![Page 11: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/11.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
2.3 Acquire Angular skill in 5 minutes
Introduction to hybrid mobile development && Ionic - @claudiobisconti
RULE #2: ng, ng-everywhere
<html>...<body ng-app="MyApplication">...
<div ng-controller="MyController"><div class="people" ng-repeat="person in persons">
<div>{{ person.name }} - {{ person.surname }}</div></div>
</div>...</body></html>
![Page 12: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/12.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
2.4 Acquire Angular skill in 5 minutes
Introduction to hybrid mobile development && Ionic - @claudiobisconti
RULE #3: actions
<html>...<body ng-app="MyApplication">...
<div ng-controller="MyController">...
<button class="btn" ng-click="apply()"></button>...
</div>...</body></html>
![Page 13: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/13.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
2.5 Acquire Angular skill in 5 minutes
Introduction to hybrid mobile development && Ionic - @claudiobisconti
RULE #4: search on google
RULE #5: search on stackoverflow
RULE #6: Study Angular seriously :)
![Page 14: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/14.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
3. Our task!
Introduction to hybrid mobile development && Ionic - @claudiobisconti
Create a mobile application who have:
❏ Signup / Login / Logout❏ Not ugly❏ Works on iOS and Android and...
browser❏ Do something
![Page 15: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/15.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
4. Ionic creator
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 16: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/16.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
5. Show me the code!
~ npm install -g cordova ionic bower~ ionic start myApp blank......~ cd myApp~ ionic serve
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 17: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/17.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
5.1 Show me the code!
~ ionic platform add android~ ionic build android~ ionic run android
~ ionic login
~ ionic upload~ ionic share [email protected]
Build and running on mobile device
Build and running on mobile device (with Ionic View)
Noteis not possible to add native plugin to Ionic View :(
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 18: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/18.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
5.2 Adding modules
~ ionic plugin add **plugin_name**~ ionic plugin add https://myrepofrom.git/gitname/
Add modules
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 19: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/19.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
6. Live demo
Introduction to hybrid mobile development && Ionic - @claudiobisconti
![Page 20: Intro to Hybrid Mobile Development && Ionic](https://reader035.vdocuments.net/reader035/viewer/2022062503/58700ba81a28ab427f8b7319/html5/thumbnails/20.jpg)
CORPORATE PRESENTATION 2016
WWW.COMMITSOFTWARE.ITwww.commitsoftware.it
Thanks
Introduction to hybrid mobile development && Ionic - @claudiobisconti