Intro to Hybrid Mobile Development && Ionic
•Download as PPTX, PDF•
0 likes•242 views
ClaudioBisconti, senior developer of Commit, introducing the workshop of CommitUniversity with some practical code examples
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Intro to Hybrid Mobile Development && Ionic
Similar to Intro to Hybrid Mobile Development && Ionic (20)
More from Commit Software Sh.p.k.
More from Commit Software Sh.p.k. (18)
Recently uploaded
Recently uploaded (20)
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