Apps Android e Hibridas

Apps Android e Hibridas
16 horas de explanação, diálogo e prática
Julho 2016
por Luiz Henrique Rauber Rodrigues
luizrauber@gmail.com - fb.com/luizrauber
Exceto onde tiver outra referência, este material é Creative Commons com Atribuição-CompartilhaIgual (CC
BY-SA). Pode copiar, alterar e redistribuir à vontade, mesmo para fins comerciais, mas desde que me cite e
licenciem as novas criações sob termos idênticos. Like Free Software :)

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 2/105
Mas primeiro….
Conselhos Richard Feynman (1918-1988), Nobel de Física em 1965
2 tipos de sabedoria: “Saber o nome de algo” e o “Saber algo”
1) Escolha um conceito; tema ou objetivo do que quer saber
2) Escreva-o como se estivesse ensinando uma criança; nada subentendido
3) Volte no tema e pesquise sobre ele; especifique o 1-2 da forma 2)
4) Revise e simplifique ainda mais; sem jargões e sabendo usar analogias
http://www.bbc.com/portuguese/geral-36750825

Manifesto para o desenvolvimento ágil de software
Estamos descobrindo maneiras melhores de desenvolver software fazendo-o
nós mesmos e ajudando outros a fazê-lo. Através deste trabalho, passamos a
valorizar:
Indivíduos e interação entre eles mais que processos e ferramentas
Software em funcionamento mais que documentação abrangente
Colaboração com o cliente mais que negociação de contratos
Responder a mudanças mais que seguir um plano
Ou seja, mesmo havendo valor nos itens à direita, valorizamos mais os itens à
esquerda.
http://www.manifestoagil.com.br/

Coding Dojo - Turma 2015-2016 – Tec Informática Senac

O quê?
Onde?
Como?

Touchscreem Resistivo/ Capacitivo
Sensores internos e acopláveis
SO parcialmente opensource
Versões por Google e por fabricantes
Intergração serviços Google
“Apps” via Google Play/ Lojas Terceiros/ .apk numa sandbox
SDK padrão e com o QEMU

Go https://www.android.com/intl/pt-BR_br/

Aprofundando
SILBERCHATZ, 2013
Android/Linux
Java - JVM
Multithread
Sai swap entra
application state
...

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 11/105http://source.android.com/source/index.html

Mais (ou menos) em https://www.android.com/intl/pt-BR_br/history/

https://developer.android.com

javac -version
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-
downloads-2133151.html
android-studio/bin/studio.sh
dependências lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6
Bora instalar? (Enquanto isso, mais teoria)

2005 – comprou startup Android, Inc. (SO para câmeras)
2006 – Protótipo “Sooner” mirando em BlackBerry
2007 – Mirarão no IPhone*
2007 – Fundação Open Handset Alliance (Google, HTC, Dell,
Intel, Motorola, Qualcomm, Texas Instruments, Samsung, LG,
T-Mobile, Nvidia…
https://pt.wikipedia.org/wiki/Open_Handset_Alliance)
2007 – Primeira SDK para desenvolver Android
2007 – Google registrou várias patentes sobre smartphone

2008 – HTC Dream/ T-Mobile G/ G1
com Android
2010 – Linha Nexus (HTC, Samsung, LG,
Asus, Motorola)

http://www.androidpit.com.br/evolucao-dos-smartphones-a-linha-nexus

http://www.gadgetdetail.com/androi
d-version-market-share-
distribution/

http://www.for
bes.com/sites/
eladnatanson/
2016/06/06/br
eaking-the-
android-ios-
duopoly-will-
android-and-
ios-ever-get-
a-serious-
third-
competitor/#e
62c5104cad0

https://github.com/googlesamples/

fonte: developer.android.com

Resumo de
https://developer.android.com/guide/components/fundamentals.html

Os “aplicativos” são feitos na linguagem Java. Para desenvolver é
necessário o SDK Android que compila e gera um Android Package
(.apk).

Os “apps” são adaptáveis em “tempo de execução” a vários
tamanhos de telas, se tiver vários XML de layout de tela, e
configurações de hardware (como presença/ ausência giroscópio,
câmera, gps…).

Cada “apps” rodando tem um ID de processo diferente sobre o Linux
e um JVM própria, por isso isolando os componentes e evitando
conflito de apps (princípio do privilégio mínimo).

Os “apps” são baseados e desenvolvidos orientados à
“componentes”, definidos como subclasses, que podem trabalhar
individualmente ou em conjunto, e a conexão de componentes é por
“intenção”.

O sistema operacional e os padrões de desenvolvimento, idealizam
o reaproveitamento de componentes, evitando redundância.

Quando um aplicativo requer o uso de um recurso, e já existe um
componente que pode entregar este recurso, o aplicativo, via
componente, envia uma intenção de uso ao Android solicitando o
recurso de um outro componente, se havendo a possilibidade, o
recurso é entregue.

As intenções por padrão são implícitas, sem definir qual mas sim
quais tipos de componentes lhe são úteis. Assim se uma aplicação
pede um recurso, e se existente mais de um componente que pode
entregar tal recurso, o usuário seleciona qual “aplicação” que irá
usar pra entregar o recurso a aplicação inicial.

As “comunicações” entre componentes são em “tempo de
execução”, via processos individuais, e direcionadas a um
componente em específico ou só ao tipo dele via intenções.
+https://developer.android.com/guide/components/intents-filters.html

4 tipos de componentes, sendo os 3 primeiros ativados por object
intent, o outro pode ser 1 por aplicativo*

4.1
Activity: foca na interação com o usuário, logo a interface de cada de
ação. Um único app pode ter vários componentes de atividades, que
podem ser compartilhadas (entre sí ou outros apps).

4.2
Service: realiza a entrega para o usuário, sem a necessidade de
uma interface diretamente. Roda em background (segundo plano)
podendo manter-se ou não vinculada a uma atividade e/ou se ligar a
outras que sejam iniciadas posteriormente.
+https://developer.android.com/guide/components/services.html

4.3
BroadcastReceiver: Fazem as notificações internamente no Android,
enviando ou recebendo dados para uma mesma, ou outra aplicação,
de acordo com alguma condição. Podem ou não, gerar notificação
para o usuário. Sempre vinculado a outros componentes.

4.4
ContentProvider: Compartilham e gerenciam o conteúdo do
aplicativo, lendo e gravando dados no local de persistência indicado
(dado, SQLite, cartão, nuvem…)
+https://developer.android.com/guide/topics/providers/content-
providers.html

Todo aplicativo Android tem o AndroidManifest.xml, onde estão
informados as compatibilidades de dispositivos, recursos externos
necessários pra execução, definições e requisitos dos aplicativos
que também devem ser mencionados ao “publicar” algo em uma loja
de aplicativos...

… e lista todos os componentes necessários pra aplicação funcionar,
indexando tipos, intenções e portanto é lido a cada chamada ao
aplicativo ou a um componente para verificar se o mesmo é
necessário.

Também lista e identifica: os usuários e permissões, as API e seus
níveis (versões Android) com suas respectivas bibliotecas, os
recursos de hardware e software necessários, outras informações
pertinentes como versão, desenvolver, licença…

… e por fim
Escalonamento padrão é pilha, setado através das indentações nas
Activities, sendo uma destas a “principal” que substitui a ideia de um
procedimento “main”.

E ai do mundo
Atenção a API Level, tamanho de tela e recursos (hw, sw, língua)
Mesma aplicação pode dar suporte a estes tipos, reconhecendo em
run-time as especificações do app, mas tem que estar res/
Ciclo de vida da atividade é importante
https://developer.android.com/training/basics/activity-
lifecycle/index.html (tá pt_br)

Ciclo de vida da atividade é importante
https://developer.android.com/training/basics/activity-lifecycle/index.html (tá pt_br)

Tutorial Introdução
https://developer.android.com/training/basics/firstapp/index.html

Tutorial Fragmentos
https://developer.android.com/training/basics/fragments/index.html

http://www.cyanogenmod.org/
+400 modelos
https://wiki.cyanogenmod.org/w/About
https://wiki.cyanogenmod.org/w/Main_Page

http://www.replicant.us/
Nexus S (I902x) Galaxy S (I9000) Galaxy S 2 (I9100) Galaxy Note
(N7000) Galaxy Nexus (I9250) Galaxy S 3 (I9300) Galaxy Note
(N7000) Galaxy Note 2 (N7100) Galaxy Tab 2 10.1 (P51xx) Galaxy
Tab 2 7.0 (P31xx) Galaxy Tab 2 10.1 (P51xx) Galaxy Tab 2 10.1
(P51xx) Uncompleted devices GTA04 Unmaintained devices
Dream/Magic Nexus One

https://www.tizen.org/
Mobile + Wearable + TV + IVI
https://source.tizen.org/
https://www.tizen.org/about/about-linux-foundation
Android + HTLM5 +Jquery + Bada + Cordova + River Trail

https://cordova.apache.org/
Fonte: Loiane Groner

jQuery é uma biblioteca JavaScript cross-browser desenvolvida
para simplificar os scripts client side que interagem com o HTML.
[1] … Usada por cerca de 77% dos 10 mil sites mais visitados do
mundo, jQuery é a mais popular das bibliotecas JavaScript.[2]
[3] ... A sintaxe do jQuery foi desenvolvida para tornar mais
simples a navegação do documento HTML, a seleção de
elementos DOM, criar animações, manipular eventos e
desenvolver aplicações AJAX. A biblioteca também oferece a
possibilidade de criação de plugins sobre ela. Fazendo uso de tais
facilidades, os desenvolvedores podem criar camadas de
abstração para interações de mais baixo nível, simplificando o
desenvolvimento de aplicações web dinâmicas de grande
complexidade.
https://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)

Ajax (acrônimo em língua inglesa de Asynchronous Javascript and
XML[1] , em português "Javascript e XML Assíncrono") é o uso
metodológico de tecnologias como Javascript e XML, providas por
navegadores, para tornar páginas Web mais interativas com o
usuário, utilizando-se de solicitações assíncronas de informações.
Foi inicialmente desenvolvida pelo estudioso Jessé James Garret
e mais tarde por diversas associações. Apesar do nome, a
utilização de XML não é obrigatória (JSON é frequentemente
utilizado) e as solicitações também não necessitam ser
assíncronas[2] .

JSON (com a pronúncia ['d ejz n], J-son em inglês, (Jay-son)), umʒ ə
acrônimo para "JavaScript Object Notation", é um formato leve para
intercâmbio de dados computacionais. JSON é um subconjunto da
notação de objeto de JavaScript, mas seu uso não requer JavaScript
exclusivamente.[1] [2] O formato JSON foi originalmente criado por
Douglas Crockford e é descrito no RFC 4627. O media-type oficial do
JSON é application/json e a extensão é .json.
A simplicidade de JSON tem resultado em seu uso difundido,
especialmente como uma alternativa para XML em AJAX. Uma das
vantagens reivindicadas de JSON sobre XML como um formato para
intercâmbio de dados neste contexto, é o fato de ser muito mais fácil
escrever um analisador JSON. Em JavaScript mesmo, JSON pode ser
analisado trivialmente usando a função eval(). Isto foi importante para a
aceitação de JSON dentro da comunidade AJAX devido a presença
deste recurso de JavaScript em todos os navegadores web atuais.

PhoneGap é uma plataforma para desenvolvimento de aplicativos
móveis em código aberto. Ela se utiliza da tecnologia Apache Cordova
para acessar a funções dos aparelhos móveis como acelerômetro,
câmera e geolocalização, e permite por meio de alguns que os
desenvolvedores criem aplicações utilizando HTML5, CSS3 e JavaScript
sem a necessidade de depender de APIs específicas. Os aplicativos
criados são compatíveis com iOS, Windows Phone e Android.
https://pt.wikipedia.org/wiki/PhoneGap

PhoneGap is Adobe’s productized version and ecosystem on top of
Cordova. Like PhoneGap, many other tools and frameworks are also
built on top of Cordova, including Ionic,[8] Monaca, TACO, the Intel XDK,
[9] and the Telerik Platform.[10] These tools use Cordova, and not
PhoneGap for their core tools.
Contributors to the Apache Cordova project include Adobe, BlackBerry,
Google, IBM, Intel, Microsoft, Mozilla, and others.[11]
https://en.wikipedia.org/wiki/Apache_Cordova

https://pt.wikipedia.org/wiki/PhoneGap

Dá até pra transformar site html5 -> app html5 -> app nativo :D

https://cordova.apache.org/docs/en/latest/config_ref/index.html
app/www/config.xml

www/index.html

apt-get install npn :)
https://nodejs.org/en/download/

Fonte: Rodrigo Branas

npm install -g cordova
cordova create hello com.example.hello HelloWorld
cordova platform add ios --save
cordova platform add android --save
cordova platform ls
cordova requirements
cordova build
cordova build ios
cordova build android
cordova emulate android
cordova run android

https://cordova.apache.org/plugins/ (1382 result(s) found)
cordova plugin search camera
cordova plugin add cordova-plugin-camera

https://cordova.apache.org/docs/en/latest/plugin_ref/plugman.html
npm install -g plugman
plugman install --platform <ios|android|blackberry10|wp8> --project
<directory> --plugin <name|url|path> [--plugins_dir <directory>] [--www
<directory>] [--variable <name>=<value> [--variable
<name>=<value> ...]]

https://netbeans.org/kb/docs/webclient/html5-gettingstarted_pt_BR.html
https://netbeans.org/kb/docs/webclient/cordova-
gettingstarted_pt_BR.html

npm install -g ionic
ionic start appnome blank
http://tableless.com.br/tutorial-ionic-meu-primeiro-app/

http://www.cssreflex.com/2015/11/xamarin-vs-cordova-main-
counterpoints.html/

Publicando Google Play
Criar e validar uma conta de desenvolvedor
https://play.google.com/apps/publish/signup/
Login com tua conta Google
Concordar e estar disposto a associar o meu registo de conta ao
Contrato de Distribuição para Programadores do Google Play.
Pagar 25 dolares
Enviar
https://play.google.com/apps/publish/ "Produção", "Beta" ou "Alfa"

Configurar testes Alfa/Beta na Google Play Developer Console
Enviar APK como Teste e vai pra testadores (até 20 listas de 2 mil)
As versões Beta abertas e fechadas do seu app não terão avaliações
públicas.
Google recomenda um Alfa fechado e um Beta aberto.
Fechado vai link via Google (CSV ou manual), Aberto na Google Play
“O relatório de pré-lançamento no seu Google Play Developer Console
identifica falhas, problemas de exibição e vulnerabilidades de
segurança.”
Versões novas em teste não derrubam a de produção.
Ainda tem lançamento gradual, via porcentagem aleatória

Fonte: Loiane groner

Facilitando
http://fabricadeaplicativos.com.br/
http://www.appmachine.com/pt-pt/
http://www.apps-builder.com/pt/home
http://pt.goodbarber.com/
http://www.shoutem.com/
https://www.easyeasyapps.net/
http://webrobotapps.com/

Mais links
http://appinventor.mit.edu/explore/
http://zeptojs.com/
http://handlebarsjs.com/
https://software.intel.com/pt-br/intel-xdk

Detalhes de divulgação da Google Play X Apple AppStore
Avaliações de todas as versões X Avaliações do app, atualizou zerou
Título com 30 caracteres X Título com 255 | keywords ambos
8 screenshots atualizáveis aloca X 5 screenshots só em nova versão
Mais texto e vídeo de minutos X Menores e 100 palavras chave
Pagou entrou X Pagou, revisam e ai entram
~Maioria grátis X ~Maioria pago (90% entre US$ 0,99 e 1,99)
Maioria usuários BRICS X Maioria US
Mais downloads X Mais rentabilidade

http://corporate.canaltech.com.br/noticia/desenvolvedores/quanto-os-
desenvolvedores-ganham-por-cada-aplicativo-criado-9931/

http://www.w3schools.com/html/html5_intro.asp
HTML5 API's (Application Programming Interfaces)
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
HTML5 Elements
semantic elements like <header>, <footer>, <article>, and <section>.
form control attributes like number, date, time, calendar, and range.
graphic elements: <svg> and <canvas>.
multimedia elements: <audio> and <video>.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
fonte: loiane groner

<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<p>A paragraph.</p>
<myHero>My Hero Element</myHero>
</body>
</html>

Acceleration
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + 'n' +
'Acceleration Y: ' + acceleration.y + 'n' +
'Acceleration Z: ' + acceleration.z + 'n' +
'Timestamp: ' + acceleration.timestamp + 'n');
};
!
function onError() {
alert('onError!');
};
!
navigator.accelerometer.getCurrentAcceleration(onSuccess,
onError);

Capturar Foto
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
Capturar Foto com Edição
function capturePhotoEdit() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,
allowEdit: true,
destinationType: destinationType.DATA_URL });
}
Busca Foto do Dispositivo
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Biblioteca</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Album de Fotos</button>

Compass/Bússula
function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
!
function onError(error) {
alert('CompassError: ' + error.code);
};
!
navigator.compass.getCurrentHeading(onSuccess, onError);

Conexão
function checkConnection() {
var networkState = navigator.connection.type;
!
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.NONE] = 'No network connection';
!
alert('Connection type: ' + states[networkState]);
}
!
checkConnection();

Propriedades do Dispositivo
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
!
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Model: ' + device.model + '<br />' +
'Device Version: ' + device.version + '<br />';
}

In App Browser
var ref = window.open('http://loiane.com', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); });
ref.addEventListener('exit', function() { alert(event.type); });

Notification - Alert
navigator.notification.alert(
'Alerta!', // message
alertDismissed,
// callback
'Titulo',
// title
'Botão'
// buttonName
);

Notification - Confirm
function showConfirm() {
navigator.notification.confirm(
'Confirmar?', // message
onConfirm,
// callback to invoke with index of button pressed
'Titulo',
// title
'OK,Cancel'
// buttonLabels
);
}

Notification - Beep
// Beepa 3 vezes
function playBeep() {
navigator.notification.beep(3);
}
Não funciona no iOS

Notification - Vibrar
// Vibra por 2 segundos
function vibrate() {
navigator.notification.vibrate(2000);
}

Apps Android e Hibridas

Mais conteúdo relacionado

Destaque (8)

Semelhante a Apps Android e Hibridas (20)

Mais de Luiz Henrique Rauber Rodrigues (20)

Último (19)

Apps Android e Hibridas