Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)

SEMAC 2016
Desenvolvimento de
Aplicativos Híbridos
Prof. Dr. Henrique Dezani
http://www.dezani.com.br

Palestrante
Hello World
q Bacharel em Ciência da Computação
q Mestre em Engenharia Elétrica
q Doutor em Engenharia Elétrica
q Doutorado ”sanduíche” em Lisboa, Portugal
q Pós-doutorando em Engenharia da Computação (Jogos Digitais)

Palestrante
O
que
faço?
q Professor da FATEC Rio Preto, desde 2006
q Linguagens de Programação
q Programação para Internet
q Programação para Dispositivos Móveis

Cursos online
Código para
desconto de20%
SEMAC2016

1. Baixar
o
aplicativo
Ionic View
http://view.ionic.io/
2.
Criar
uma
conta,
pelo
aplicativo.
3.
Aguardar...
Voluntários

O mercado de dispositivos móveis
Visão Geral

Uso exclusivo de aparelhos móveis

Usuários móveis no Brasil
Crescimento de 7% em 6 meses

% do Tempo Gasto
Aplicativos Móveis Versus Navegadores

Tempo (minutos) no Facebook
Fonte:
comScore (2014)

Dispositivos Móveis
Desenvolvimento

Desenvolvendo Aplicativos Móveis

Uso de Sistemas Operacionais
para Aplicativos Móveis
0.00%
10.00%
20.00%
30.00%
40.00%
50.00%
60.00%
70.00%
80.00%
90.00%
Android iOS Windows
Phone Outros
2015 2014 2013 2012
Fonte:
IDC
(2016)

Desenvolvendo Aplicativos Móveis
Aplicativo
Final
Programação
Nativa
Web
Mobile Aplicação Híbrida

Aplicativos Nativos
q Melhor
desempenho
q Acesso
a
todas
as
funcões do
dispositivo
qCada plataforma possui sua própria linguagem

Web Mobile
q Multi Plataforma
q Linha
de
aprendizagem
fácil
q Baixo custo
q Sem acesso ao hardware (ou pelo menos,
alguns recursos).

q Multi Plataforma
q Linha
de
Aprendizagem
Fácil (única linguagem)
q Baixo custo de
desenvolvimento!
q Acesso às funções do
hardware (todas)
q Permite a
publicação nas lojas de
aplicativos
qApple
Store,
Google
Play,
Windows
Store,
Steam

q Microsoft
q C#
q Visual
Studio
q Xamarin Forms,
Android,
iOS
q Testes:
56MB
q Ionic
/
Cordova
q AngularJS
(TypeScript v2)
q Visual
Studio
qTestes:
3.2MB
De
U$
999,99/ano
para
U$
0

História…
q
PhoneGap
é
um
projeto
100%
open
source.
q
Foi
desenvolvido
pela
Nitobi.
q
Nitobi
foi
comprada
pela
Adobe.
q
PhoneGap
foi
doado
para
a
Apache
Software
Foundation
pela
Adobe
e
foi

chamado
de
Apache
Callback.

q
Apache
Callback
era
muito
genérico,
por
isso
foi
renomeado
para
Cordova.
• A
marca
PhoneGap
continua
propriedade
da
Adobe.

• PhoneGap
é
uma
distribuição
do
Cordova.

Apache Cordova
•
”Apache Cordova é um framework para desenvolvimento de aplicativos
móveis open-‐source, que permite que você utilize tecnologias web, tais como
HTML5, CSS e JavaScript, para o desenvolvimento de aplicativos nativos
multiplataformas com acesso às funções nativas do dispositivo, tais como
câmera e acelerômetro, por meio de JavaScript”.
Apache
Cordova
(2016)

IONIC
q Ionic
é um
framework focado na aparência e
interação de
aplicativos móveis
utilizandoHTML,
CSS
e
JavaScript
(AngularJS)
q Possui command
line
(CLI)
que
permite a
fácil criação,
depuração e

publicação de
aplicativos híbridos.
q A
versão 2.0
(beta)
trabalha com
AngularJS
2
(Typescript)

IONIC
ngCordova
+ de 70 plugins para acesso ao hardware em AngularJS

Armazenamento Persistente
NoSQL e Modelo Relacional
Você sabia que
a
obra completa de
William
Shakespare,
em
texto puro,
ocupa apenas 5.3MB?
Disponível em:

http://ocw.mit.edu/ans7870/6/6.006/s08/lecturenotes/files/t8.shakespeare.txt

Exemplos
https://play.google.com/store/apps/details?id=com.ionicframework.rendafixa997647&hl=en

Exemplos
https://play.google.com/store/apps/details?id=com.chefsteps.mobile
ChefSteps

Exemplos
https://play.google.com/store/apps/details?id=com.moodle.moodlemobile
MoodleMobile

Desenvolvimento de Jogos em HTML5

Jogos em HTML5
BKOM
ROBOT
GAME
ANGRY
BIRDS
CUTE
THE
ROPE

Voluntários,
prontos?
DEMONSTRAÇÃO

Criando um projeto
ionic start SemacApp blank
Visual
Code
(Working Files)
BLANK

TABS
SIDEMENU
MAPS

SALESFORCE

Criando um aplicativo
<html>
<head>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-‐-‐ cordova script (this will be a 404 during development) -‐-‐>
<script src="cordova.js"></script>
<!-‐-‐ your app's js -‐-‐>
<script src="js/app.js"></script>
index.html

<body ng-‐app="starter">
<ion-‐pane>
<ion-‐header-‐bar class="bar-‐positive">
<h1 class="title">SEMAC 2016</h1>
</ion-‐header-‐bar>
<ion-‐content>
</ion-‐content>
</ion-‐pane>
</body>
index.html

var app = angular.module('starter', ['ionic']);
app.controller('MainCtrl', function($scope, $http) {
$scope.mensagens = [];
$http.get('http://semac.azurewebsites.net/api/mensagem').then(
function(response)
{
$scope.mensagens = response.data;
}
);
});
app.js

...
<ion-‐content>
<ion-‐list>
<ion-‐item ng-‐repeat="m in mensagens">
{{m.texto}}
</ion-‐item>
</ion-‐list>
</ion-‐content>
...
index.html

app.controller('MainCtrl', function($scope, $http) {
...
$scope.mensagem = {
texto: ''
}
$scope.send = function() {
$http.post('http://semac.azurewebsites.net/api/mensagem', $scope.mensagem)
.then(function(response) {});
}
...
});
app.js

...
<ion-‐content>
<ion-‐list>
<div class="item item-‐input-‐inset">
<label class="item-‐input-‐wrapper">
<input type="text" ng-‐model="mensagem.texto">
</label>
<button class="button button-‐small" ng-‐click="send()">
Enviar
</button>
</div>
...
</ion-‐list>
</ion-‐content>
...
index.html

Aplicação Final
ionic upload
ionic share [email]
cordova build ios
cordova emulate ios

Muito obrigado!
Código para
desconto de
20%
SEMAC2016

Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)

Mais conteúdo relacionado

Mais procurados

Semelhante a Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)

Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)