Intro to Hybrid Mobile Development && Ionic
Download as PPTX, PDF0 likes242 views
The document is a corporate presentation about hybrid mobile development using Ionic, detailing the differences between native and hybrid applications. It discusses use cases for hybrid applications, the advantages of using Ionic and AngularJS, and provides a brief tutorial on necessary Angular skills. Additionally, it outlines a task for creating a mobile application and demonstrates the code for setting up and running a project with Ionic.
![CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT
www.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](https://image.slidesharecdn.com/workshopionic-eng-160927132814/85/Intro-to-Hybrid-Mobile-Development-Ionic-10-320.jpg)
Intro to Hybrid Mobile Development && Ionic
- 1. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT Introduction to hybrid mobile development && Ionic @claudiobisconti
- 2. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 1. Native VS Hybrid Introduction to hybrid mobile development && Ionic - @claudiobisconti
- 3. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.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 :)
- 4. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 1.2 Why we use hybrid applications? Introduction to hybrid mobile development && Ionic - @claudiobisconti
- 5. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 1.3 And... Introduction to hybrid mobile development && Ionic - @claudiobisconti Why write two software to develop only one functionality? Hamlet, not Sherlock
- 6. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 2. IONIC Introduction to hybrid mobile development && Ionic - @claudiobisconti
- 7. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 2.0 Apache Cordova Introduction to hybrid mobile development && Ionic - @claudiobisconti
- 8. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 2.0 Apache Cordova Introduction to hybrid mobile development && Ionic - @claudiobisconti
- 9. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 2.1 AngularJs Introduction to hybrid mobile development && Ionic - @claudiobisconti
- 10. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.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
- 11. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.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>
- 12. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.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>
- 13. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.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 :)
- 14. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.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
- 15. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 4. Ionic creator Introduction to hybrid mobile development && Ionic - @claudiobisconti
- 16. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.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
- 17. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 5.1 Show me the code! ~ ionic platform add android ~ ionic build android ~ ionic run android ~ ionic login ~ ionic upload ~ ionic share your_friend_email@gmail.com Build and running on mobile device Build and running on mobile device (with Ionic View) Note is not possible to add native plugin to Ionic View :( Introduction to hybrid mobile development && Ionic - @claudiobisconti
- 18. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.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
- 19. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it 6. Live demo Introduction to hybrid mobile development && Ionic - @claudiobisconti
- 20. CORPORATE PRESENTATION 2016 WWW.COMMITSOFTWARE.IT www.commitsoftware.it Thanks Introduction to hybrid mobile development && Ionic - @claudiobisconti