intro to hybrid mobile development && ionic

CORPORATE PRESENTATION 2016

WWW.COMMITSOFTWARE.IT

Introduction to hybrid mobile development && Ionic@claudiobisconti


WWW.COMMITSOFTWARE.ITwww.commitsoftware.it

1. Native VS Hybrid

Introduction to hybrid mobile development && Ionic - @claudiobisconti



1.1 When we use hybrid applications?


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 :)



1.2 Why we use hybrid applications?




1.3 And...


Why write two software to develop only one functionality?

Hamlet, not Sherlock



2. IONIC




2.0 Apache Cordova




2.1 AngularJs




2.2 Acquire Angular skill in 5 minutes


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





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>





RULE #3: actions

<html>...<body ng-app="MyApplication">...

<div ng-controller="MyController">...

<button class="btn" ng-click="apply()"></button>...

</div>...</body></html>





RULE #4: search on google

RULE #5: search on stackoverflow

RULE #6: Study Angular seriously :)



3. Our task!


Create a mobile application who have:

❏ Signup / Login / Logout❏ Not ugly❏ Works on iOS and Android and...

browser❏ Do something



4. Ionic creator




5. Show me the code!

~ npm install -g cordova ionic bower~ ionic start myApp blank......~ cd myApp~ ionic serve




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 :(




5.2 Adding modules

~ ionic plugin add **plugin_name**~ ionic plugin add https://myrepofrom.git/gitname/

Add modules




6. Live demo




Thanks


intro to hybrid mobile development && ionic

Engineering