Apps Android e Hibridas

Apps Android e Hibridas16 horas de explanação, diálogo e prática

Julho 2016

por Luiz Henrique Rauber Rodriguesluizrauber@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 19652 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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 3/105

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 ferramentasSoftware em funcionamento mais que documentação abrangenteColaboração com o cliente mais que negociação de contratosResponder 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/

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 4/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 5/105

O quê?

Onde?

Como?

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 6/105

Touchscreem Resistivo/ CapacitivoSensores 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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 7/105

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 8/105

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 9/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 10/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 12/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 13/105

https://developer.android.com

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 14/105

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 15/105

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 16/105

javac -version http://www.oracle.com/technetwork/java/javase/downloads/jdk8-

downloads-2133151.html

android-studio/bin/studio.shdependências lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6

Bora instalar? (Enquanto isso, mais teoria)

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 17/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 18/105

2008 – HTC Dream/ T-Mobile G/ G1 com Android

2010 – Linha Nexus (HTC, Samsung, LG, Asus, Motorola)

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 19/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 20/105

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 21/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 22/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 23/105

http://www.forbes.com/sites/eladnatanson/2016/06/06/breaking-the-android-ios-duopoly-will-android-and-ios-ever-get-a-serious-third-competitor/#e62c5104cad0

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 24/105

http://www.forbes.com/sites/eladnatanson/2016/06/06/breaking-the-android-ios-duopoly-will-android-and-ios-ever-get-a-serious-third-competitor/#e62c5104cad0

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 25/105

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 26/105https://github.com/googlesamples/

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 27/105

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 28/105

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 29/105

fonte: developer.android.com

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 30/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 31/105

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

(.apk).

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 32/105

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…).

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 33/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 34/105

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”.

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 35/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 36/105

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.

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 37/105

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.

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 38/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 39/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 40/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 41/105

4.2Service: 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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 42/105

4.3BroadcastReceiver: 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.

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 43/105

4.4ContentProvider: 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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 44/105

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...

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 45/105

… 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.

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 46/105

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…

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 47/105

… 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”.

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 48/105

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 é importantehttps://developer.android.com/training/basics/activity-

lifecycle/index.html (tá pt_br)

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 49/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 50/105

Tutorial Introdução

https://developer.android.com/training/basics/firstapp/index.html

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 51/105

Tutorial Fragmentos

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 52/105

http://www.cyanogenmod.org/

+400 modeloshttps://wiki.cyanogenmod.org/w/About

https://wiki.cyanogenmod.org/w/Main_Page

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 53/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 54/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 55/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 56/105

Fonte: Loiane Groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 57/105

Fonte: Loiane Groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 58/105

Fonte: Loiane Groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 59/105

Fonte: Loiane Groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 60/105

Fonte: Loiane Groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 61/105

Fonte: Loiane Groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 62/105

Fonte: Loiane Groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 63/105

https://cordova.apache.org/

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 64/105

https://cordova.apache.org/

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 65/105

https://cordova.apache.org/

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 66/105

https://cordova.apache.org/

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 67/105

https://cordova.apache.org/

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 68/105

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)

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 69/105

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] .

https://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 70/105

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.https://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 71/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 72/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 73/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 74/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 75/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 76/105

www/index.html

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 77/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 78/105

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

Fonte: Rodrigo Branas

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 79/105

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

Fonte: Rodrigo Branas

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 80/105

npm install -g cordovacordova create hello com.example.hello HelloWorld

cordova platform add ios --savecordova platform add android --save

cordova platform lscordova requirements

cordova buildcordova build ios

cordova build androidcordova emulate android

cordova run android

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 81/105

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

cordova plugin add cordova-plugin-camera

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 82/105

https://cordova.apache.org/docs/en/latest/plugin_ref/plugman.htmlnpm 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> ...]]

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 83/105

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

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 84/105

npm install -g ionic

ionic start appnome blank

http://tableless.com.br/tutorial-ionic-meu-primeiro-app/

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 85/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 86/105

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

Enviarhttps://play.google.com/apps/publish/ "Produção", "Beta" ou "Alfa"

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 87/105

Configurar testes Alfa/Beta na Google Play Developer ConsoleEnviar 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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 88/105

Fonte: Loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 89/105

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/

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 90/105

Mais links

http://appinventor.mit.edu/explore/

http://zeptojs.com/

http://handlebarsjs.com/

https://software.intel.com/pt-br/intel-xdk

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 91/105

Detalhes de divulgação da Google Play X Apple AppStore

Avaliações de todas as versões X Avaliações do app, atualizou zerouTítulo com 30 caracteres X Título com 255 | keywords ambos

8 screenshots atualizáveis aloca X 5 screenshots só em nova versãoMais 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 USMais downloads X Mais rentabilidade

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 92/105

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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 93/105

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 Elementssemantic 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>.

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 94/105

<!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

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 95/105

<!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>

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 96/105

Accelerationfunction 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);

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 97/105

Capturar Fotofunction capturePhoto() {navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,destinationType: destinationType.DATA_URL });}

Capturar Foto com Ediçãofunction capturePhotoEdit() {navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,allowEdit: true,destinationType: destinationType.DATA_URL });}

Busca Foto do Dispositivofunction 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>

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 98/105

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

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 99/105

Conexãofunction 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.CELL_3G] = 'Cell 3G connection';states[Connection.CELL_4G] = 'Cell 4G connection';states[Connection.NONE] = 'No network connection';!alert('Connection type: ' + states[networkState]);}!checkConnection();

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 100/105

Propriedades do Dispositivofunction 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 />';}

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 101/105

In App Browservar 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); });

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 102/105

Notification - Alertnavigator.notification.alert('Alerta!', // messagealertDismissed,// callback'Titulo',// title'Botão'// buttonName);

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 103/105

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

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 104/105

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

fonte: loiane groner

CC BY-SA luizrauber@gmail.com || fb.com/luizrauber 105/105

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

fonte: loiane groner