Desenvolvimento Mobile Híbrido

1
Mobile Development
Juliano Marcos Martins – juliano.jmm@gmail.com
http://jmmwrite.wordpress.com

2
Intro
Native Mobile Development Overview
Hybrid Mobile Development
Angular Hands on
Playing with Ionic
Examples and Information in this slides has been created based on the official
documentation sites for each technology. Coincidences are not just coincidences :P

3
Must know
HTML
CSS
JavaScript
Json
Nice to Know
Git
Git Hub
Java Development Environment

4
Native Mobile Development
Apple IOs (X-Code / Swift)
Google Android

5
IOs
IPhone, Ipad
App Store
http://www.apple.com
Google Android
80% of the market
Google Play
https://www.android.com/
Windows Phone, Ubuntu, Tizen, BlackBerry, etc...

6
Hybrid Mobile App
Angular + Cordova + IONIC ← Our focus
Appcelerator + Titanium IDE
Xamarin
Python + Kivy

7
Hybrid Mobile App
Built with HTML, CSS and JavaScript and is contained in a
native wrapper so that it can be installed on a mobile device.
This allows web developers to build mobile apps without
having to learn the native programming languages (e.g.,
Objective-C, Swift, Java).
It also means that you can have one codebase for all the
different platforms.
Frameworks...
Attention Points:
Maybe you can loose some native functions that use
specific OS/Hardware resources.
Maybe the performance can be lower than the native
development.

8
Hybrid PROS
1- Easy to learn and Develop
2- Fast to create a prototype
3- Easy to find workforce
4- Easy to create a beautiful app
5- No need to learn native technology
6- Its faster to develop than Native (supposing that you are
good in both technologies)
7- Write once! (keep in mind that there are differences from
Platforms)

9
Hybrid CONS
1- Performance can be lower (supposing that you are expert in
Native and Hybrid)
2- You can loose native functions specific for a OS/Device

10
When go Native or Hybrid*
IF ( NEED HIGH PERFORMANCE or
NEED A LOT NATIVE RESOURCES or
NEED A NATIVE RESOURCE NOT SUPPORTED) {
goNative();
} ELSE {
goHibrid();
}
* this is what I THINK. Please, research before start your project. Many fail because
there are no planning, just code write.

11
Angular.js
A client-side JavaScript Framework
for adding interactivity to HTML.
https://angularjs.org/

12
Bootstrap
Is the most popular HTML, CSS,
and JS framework for developing
responsive, mobile first projects on
the web.
http://getbootstrap.com/

13
Angular Basics
Directives
Modules
Controller
Expression
Services
In order to implement our next examples locally, you must disable web security. In the
command line, start Google Chrome with the command:
Google-Chrome --args -disable-web-security (Linux / Windows)
sudo open /Applications/Google Chrome.app/ --args -disable-web-security (Mac)
This can change and be different for other Operational Systems and for other
browsers. Search the web for your case.
You can get the source code from this slides
here:
https://github.com/julianommartins/angular

14
Hands On
Get angular.min.js
Get bootstrap.css
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World!</title>
<script src= "js/angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="page-header">
Hello World
</div>
<p>1 + 2 = {{ 1 + 2 }}</p>
</body>
</html>

15
Hands On - Controller
Get angular.min.js
Get bootstrap.css
Create a controller
<!DOCTYPE html>
<html ng-app="carrosApp">
<head>

<script src="js/controller.js"></script>
</head>
<body ng-controller="carrosCtrl">
Listagem de Carros
</div>
<ul>
<li ng-repeat="carro in carros">
<span>{{carro.name}}</span>
<p>{{carro.historia}}</p>
</li>
</ul>
</body>
</html>
var carrosApp = angular.module('carrosApp', []);
carrosApp.controller('carrosCtrl', function ($scope) {
$scope.carros = [
{'name': 'Fusca',
'historia': 'Eterna Paixao do Brasileiro',
'ano':'66'},
{'name': 'Opala',
'historia': 'Bebe muito',
'ano':'72'},
{'name': 'Brasilia',
'historia': 'Carrao',
'ano':'70'}
];
});

17
Hands On - Filtering
Get angular.min.js
Get bootstrap.css
Create a controller
Filter results!
<!DOCTYPE html>
<head>
</head>
Busca de Carros
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">

Pesquisar: <input ng-model="query">
</div>

<ul class="carros">
<li ng-repeat="carro in carros | filter:query">
{{carro.name}}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
$scope.carros = [
{'name': 'Fusca',
'ano':'66'},
{'name': 'Opala',
'ano':'72'},
'ano':'70'}
];
});

19
Hands On - Ordering
Get angular.min.js
Get bootstrap.css
Create a controller
Order results!
<!DOCTYPE html>
<head>
</head>
Busca de Carros
</div>
<div class="row">
Ordenar por:
<select ng-model="orderProp">
<option value="name">Nome</option>
<option value="ano">Ano</option>
</select>
</div>
<ul class="carros">
<li ng-repeat="carro in carros | filter:query | orderBy:orderProp">
{{carro.name}} - {{carro.ano}}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
$scope.carros = [
{'name': 'Fusca',
'ano':'66'},
{'name': 'Opala',
'ano':'72'},
'ano':'70'}
];
$scope.orderProp = 'ano';
});

20
Hands On - Json
Create a controller
Create the json file
<!DOCTYPE html>
<head>
</head>
Busca de Carros
</div>
<div class="row">
Ordenar por:
</select>
</div>
<ul class="carros">
<a href="https://www.google.com.br/?
gws_rd=ssl#q={{carro.name}}">{{carro.name}}</a> - {{carro.ano}}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
carrosApp.controller('carrosCtrl', function ($scope, $http) {
$http.get('carros.json').success(function(data) {
$scope.carros = data;
});
});
[
{"name": "Fusca",
"historia": "Eterna Paixao do Brasileiro",
"ano":66},
{"name": "Opala",
"historia": "Bebe nada...”,
"ano":72},
{"name": "Brasilia",
"historia": "Carrao",
"ano":70},
{"name": "Gol",
"historia": "Popular. SQN!",
"ano":84},
{"name": "i30",
"historia": "Carro de Nerd que paga uma de boy",
"ano":2014}
]

21
Hands On - Routing
Create the app.js
Get angular-route
<!DOCTYPE html>
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
var carrosCtrl = angular.module('carrosCtrl', []);
carrosCtrl.controller('carrosCtrl', function ($scope, $http) {
$http.get('carros.json').success(function(data) {
$scope.carros = data;
});
});
carrosCtrl.controller('carrosDetalheCtrl', ['$scope',
'$routeParams',
function($scope, $routeParams) {
$scope.name = $routeParams.name;
}]);
[
{"name": "Fusca",
"historia": "Eterna Paixao do Brasileiro",
"ano":66},
{"name": "Opala",
"historia": "Bebe nada...”,
"ano":72},
{"name": "Brasilia",
"historia": "Carrao",
"ano":70},
{"name": "Gol",
"historia": "Popular. SQN!",
"ano":84},
{"name": "i30",
"historia": "Carro de Nerd que paga uma de boy",
"ano":2014}
]
var carrosApp = angular.module('carrosApp', [
'ngRoute',
'carrosCtrl'
]);
carrosApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/carros', {
templateUrl: 'carros/carros.html',
controller: 'carrosCtrl'
}).
when('/carros/:name', {
templateUrl: 'carros/carrosdetalhe.html',
controller: 'carrosDetalheCtrl'
}).
otherwise({
redirectTo: '/carros'
});
}]);

22
Hands On – Routing - cont
Create folder and carros.html and carrosdetalhe.html
Busca de Carros
</div>
<div class="row">
Ordenar por:
</select>
</div>
<ul class="carros">
<a href="https://www.google.com.br/?
gws_rd=ssl#q={{carro.name}}">{{carro.name}}</a> - {{carro.ano}}
<p><a href="#/carros/{{carro.name}}">mais detalhes</a></p>
</li>
</ul>
</div>
</div>
</div>

23
Hands On – Routing - cont
Results

24
Exercises
Make the details page work, just showing any details that
you want to add to the Json file.

25
Node JS
Node.js® is a platform built on Chrome's JavaScript
runtime for easily building fast, scalable network
applications. Node.js uses an event-driven, non-blocking
I/O model that makes it lightweight and efficient, perfect
for data-intensive real-time applications that run across
distributed devices.
https://nodejs.org/

26
Bower
Bower works by fetching and installing packages from all
over, taking care of hunting, finding, downloading, and
saving the stuff you’re looking for.
http://bower.io/

27
Adobe buy NitobeNitobe PhoneGap
Open Source
2009 2011
Adobe PhoneGap
Apache Cordova

28
Apache Cordova
Apache Cordova is a platform
for building native mobile
applications using HTML, CSS
and JavaScript.
http://cordova.apache.org/
●Amazon Fire OS
●Android
●BlackBerry 10
●Firefox OS
●iOS
●Ubuntu
●Windows Phone 8
●Windows
●Tizen

29
PhoneGap
PhoneGap is Adobe’s productized
version and ecosystem on top of
Cordova.
http://phonegap.com/

30
IONIC
Free and open source, Ionic offers a
library of mobile-optimized HTML,
CSS and JS components, gestures,
and tools for building highly
interactive apps. Built with Sass and
optimized for AngularJS.
http://ionicframework.com

31
Installation
● Install Git - https://git-scm.com/
● Install Node Package Manager (npm) - https://nodejs.org/
● Install Cordova/Ionic - npm install -g cordova ionic
● Install Android SDK - http://developer.android.com/sdk/index.html
Create Environment Variable ANDROID_HOME , Example:
ANDROID_HOME=/home/julianom/Android/Sdk
● Install Java JDK 7
Create Environment Variable JAVA_HOME , Example (Linux):
JAVA_HOME=/opt/java
● Its a good idea put at your Path:
$JAVA_HOME/bin and $ANDROID_HOME/tools, Example (Linux):
PATH=$JAVA_HOME/bin:$ANDROID_HOME/tools:$PATH
● Install Genymotion (to emulate Android) - https://www.genymotion.com/#!/
● Create a virtual device at Genymotion and test it. I recommend a not powerful
device, like a Galaxy S3.
● Install a good Editor, I recommend Brackets (Its free) - http://brackets.io/
●
Create a user at Git Hub - https://github.com/
Take note about the users that you will create, you will use along the course.

32
Hands on IONIC
●ionic start myApp tabs
●cd myApp
●ionic serve
●ionic serve --lab

33
Hands on IONIC
ionic platform list → list available platforms
Android
●ionic platform add android
●ionic emulate android
or
●ionic run android
IOs
●ionic platform add ios
●ionic emulate ios
or
●ionic run ios

34
More Ionic
● Config.xml
● Icons
● Create a resources folder
● Put your icon / splash screen
● ionic resources –icon
Be careful with platform ready
Ionic Creator - https://creator.ionic.io/

35
Testing
Android
● We recommend test with Genymotion, by running the command “ionic run android”. Also,
if you plug your Android phone at your computer, the run command should install it at your
device.
IOs
● You can test in the simulator running “ioinic emulate ios”.
● You can open your project in at XCode by going to the folder platforms/PLATFORM of
your project, and run this as a normal XCode project. Also, you can publish your app from
here.
● Any time that you change content inside www folder, run the command “cordova prepare
ios” in order to update the XCode project. Have in mind that this will overwrite any change
that you have done at XCode.
● More about XCode/Cordova:
http://cordova.apache.org/docs/en/3.3.0/guide_platforms_ios_index.md.html

36
Our APP
● Create a simple application to list cars from
https://tars.eigmercados.com.br/tamandare-friendly-web/rest/vehicle/get
** If URL are note working, you can use a static JSON file to play. In the following slides,
we will have an example that show how to get data from Wordpress and you can use it
also.
STEPS
● Create a blank project:
● ionic start leCarros blank
● Go to www and delete html, css and js files
● Create your own index.html and index.js files based on next slides
● Test in browser:
● ionic serve
● Add Platform:
● ionic platform add ios (or android)
● Run (at this point, for Android – Have genymotion running):
● ionic run ios (or android)

37
<!DOCTYPE html>
<html lang="en" ng-app="CarrosApp">
<head>
<meta charset="UTF-8">
<title>Carros</title>
<script src="cordova.js"></script>
<meta http-equiv="Content-Security-Policy" content="default-src *;">
<link rel="stylesheet" href="lib/ionic/css/ionic.css">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body ng-controller="CarrosCtrl">
<ion-pane>
<ion-header-bar class="bar.dark">
<h1 class="title">Listagem de Carros</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="c in carros">
<h2>ID: {{c.ide}}</h2>
<h3>Nome: {{c.name}}</h3>
<p>Modelo: {{c.brand}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
index.html

38
var CarrosApp = angular.module("CarrosApp", ["ionic"]);
CarrosApp.service("CarrosService",["$http","$rootScope",CarrosService]);
CarrosApp.controller("CarrosCtrl", ["$scope", "$ionicLoading",
"$ionicListDelegate", "CarrosService", CarrosCtrl]);
function CarrosCtrl($scope, $ionicLoading, $ionicListDelegate,
CarrosService) {
$ionicLoading.show({
template: 'Carregando carros...'
});
$scope.carros = [];
$scope.$on("CarrosApp.carros", function(_, result){
result.data.forEach(function(c) {
$scope.carros.push({
ide: c.id,
name: c.name,
brand: c.brand
});
});
$ionicLoading.hide();
});
CarrosService.loadCarros();
}
function CarrosService($http, $rootScope){
this.loadCarros = function() {
$http.get("https://tars.eigmercados.com.br/tamandare-friendly-
web/rest/vehicle/get").success(function(result){
$rootScope.$broadcast("CarrosApp.carros", result);
});
}
}
index.js

39
{"data":
[
{"id":2,"name":" FUSCA","brand":" VW"},
{"id":3,"name":" BRASILIA","brand":" VW"},
{"id":4,"name":" GOLF","brand":" VW"},
{"id":1,"name":"GOL 1.6V","brand":"VW"},
{"id":5,"name":" UNO","brand":" FIAT"}
],
"returnCode":0,
"returnType":0,
"returnMessage":"Operation ocurred successful",
"date":1439989279411,
"processTag":null}
This is the json the URL return to us. If you are not able to reach it, use the json instead
like we did for Angular Example.

40
Our APP Next Steps
● Create a share button
http://ionicframework.com/docs/api/directive/ionOptionButton/
https://github.com/leecrossley/cordova-plugin-social-message
● Create a click function when user select a car, and open a pop-up with the same info with
the plug in:
https://github.com/apache/cordova-plugin-inappbrowser
● Create an infinite scroll
http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

41
Exercises
1
● Create a new project at Ionic Creator site (https://creator.ionic.io/)
● The project must have a side menu with 3 options (Noticias, Cotacoes, Sobre)
● We must have 3 pages (noticias, Cotacoes, sobre)
● Noticias must be the default
● For now, you can use a static Json files for this or you can use real services
● For router doubts:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
2
● Create a simple application that show Google maps in the screen and when user click in
some point, it show a new window (pop-up, browser, page, etc) with the coordinates (see
codepen example at links slide)
3
● Create a application that ask the user name in the first execution, then, when user submit
username, it goes to a second page showing Hello “Username”. In the second execution it
should go to a second page that show Hello “Username”.
● Search for local storage in order to implement this.
● Test both projects in Android and IPhone devices if possible(emulator or real)
● Submit all the projects to your github and send me the url

42
Links
● Ionic JavaScript functionalities
http://ionicframework.com/docs/api/
● Ionic CSS
http://ionicframework.com/docs/components/
● Ionic Creator
http://creator.ionic.io/app/login
● Extensions for Cordova API
http://ngcordova.com/
● Example with Google Maps
http://codepen.io/ionic/pen/uzngt
● Interesting Article about IOs native dev migration to Ionic
https://www.airpair.com/javascript/posts/switching-from-ios-to-ionic
● How to deploy to App Store
https://medium.com/@_qzapaia/deploy-an-ionic-app-to-the-ios-app-store-702c79a2dd97
● SQLite example
● https://blog.nraboy.com/2014/11/use-sqlite-instead-local-storage-ionic-framework/

43
All text and image content in this document is licensed under the Creative Commons Attribution-Share Alike 3.0 License
(unless otherwise specified). Adobe, Google, Apple, Apache, and other are registered trademarks. Their respective logos and
icons are subject to international copyright laws.
Thank you …
… for your dedication and patience!

Desenvolvimento Mobile Híbrido

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Desenvolvimento Mobile Híbrido

Similar to Desenvolvimento Mobile Híbrido (20)

Recently uploaded

Recently uploaded (20)

Desenvolvimento Mobile Híbrido