Design para Dispositivos Móveis apostila 4

Prévia do material em texto

E-book 4
Ariel da Silva Dias
DESIGN PARA 
DISPOSITIVOS 
MÓVEIS
Neste E-Book:
INTRODUÇÃO ����������������������������������������������������������� 3
DESENVOLVIMENTO MOBILE �����������������������������4
Android Studio ���������������������������������������������������������������������������4
Ionic ������������������������������������������������������������������������������������������16
Consumindo dados a partir de um serviço web �������������������23
Sensores com Android Studio ������������������������������������������������28
CONSIDERAÇÕES FINAIS ����������������������������������� 33
REFERÊNCIAS BIBLIOGRÁFICAS & 
CONSULTADAS �������������������������������������������������������34
2
INTRODUÇÃO
As principais plataformas móveis que existem são 
Android, iOS e HTML5� O Android é a plataforma mais 
popular no Brasil, disponível em 95,2% dos disposi-
tivos móveis� Em segundo lugar, temos o iOS, com 
3,8%, e os demais sistemas operacionais juntos so-
mam 1% (Android���, 2020)�
A partir desses dados, neste e-book, vamos trabalhar 
com duas plataformas: o desenvolvimento nativo 
para Android e o desenvolvimento web com Ionic� 
No decorrer do e-book também saberemos como 
trabalhar com sensores em dispositivos móveis e co-
nheceremos a comunicação com JavaScript Object 
Notation (JSON)�
3
DESENVOLVIMENTO 
MOBILE
Conforme apresentado na introdução, o sistema 
operacional mais popular no Brasil é o Android, com 
presença em mais de 95% dos dispositivos� Como 
comparativo, no mundo esse número não é muito 
diferente, o percentual de dispositivos móveis com 
Android são maiores na maioria dos países�
Desse modo, traremos o conhecimento inicial neces-
sário para que você possa desenvolver aplicativos 
nativos para Android e aplicativos web utilizando o 
Ionic�
Android Studio
O Android é o sistema operacional da Google e, 
como proprietária, ela criou o seu próprio ambiente 
de desenvolvimento integrado (IDE), que é o Android 
Studio� Trata-se de um IDE que utiliza linguagem de 
programação Java ou Kotlin e incorpora suas fer-
ramentas de edição e desenvolvimento de código�
FIQUE ATENTO
Este material tem como objetivo apresentar o 
processo de desenvolvimento de uma aplicação 
utilizando o Android Studio, desse modo, não será 
apresentada a instalação e configuração inicial 
desse IDE� Esse processo você pode obter direta-
4
mente na documentação do Android Studio, dis-
ponível em: Developer Android�
Assim que você criar o primeiro projeto em Android, 
uma nova janela será apresentada� Acompanhemos 
cada um dos componentes dessa janela e os com-
ponentes de um projeto Android�
Árvore do projeto
A Figura 1 apresenta a janela inicial que lhe será 
exibida assim que um novo projeto for iniciado� Do 
lado esquerdo, com um retângulo vermelho, temos 
a árvore ou a hierarquia do projeto�
A hierarquia apresentada é basicamente dividida 
em três componentes, essencialmente� O primeiro 
é o diretório manifests, o qual possui o arquivo de 
manifesto da aplicação� Logo mais estudaremos 
com detalhes esse arquivo� O segundo diretório é o 
java, onde ficarão nossas classes, ou seja, a lógica da 
programação. Por fim, temos o diretório res� Dentro 
desse diretório temos outros quatro, cada um com 
recursos diferentes como de string e imagens, entre 
outros� Desse diretório, o que mais nos interessa nes-
te momento é o layout, pois é onde desenharemos a 
interface da aplicação�
5
https://developer.android.com/studio/install?hl=pt-br
Figura 1: Janela inicial do Android Studio� Fonte: Elaboração 
própria, a partir de Print Screen do Android Studio�
Vamos, então, analisar cada um desses arquivos� 
Começaremos falando sobre o arquivo de manifesto 
AndroidManifest.xml�
Arquivo de manifesto
Cada aplicativo deve ter um arquivo AndroidManifest.
xml (necessariamente com esse mesmo nome) em 
seu diretório raiz� O manifesto apresenta informações 
essenciais sobre o aplicativo para o sistema Android, 
informações que o sistema deve ter antes de execu-
tar qualquer código do aplicativo� Entre outras coisas, 
o manifesto nomeia o pacote Java para o aplicativo, 
servindo como um identificador exclusivo para ele; 
descreve os componentes do aplicativo, as activities, 
serviços, receptores de transmissão e provedores de 
conteúdo dos quais o aplicativo é composto e nele 
declaramos quais permissões o aplicativo deve ter 
para acessar as partes protegidas do dispositivo e 
interagir com outros aplicativos, entre outras ações�
6
Activity
A Activity é uma classe Java que possui algumas 
funções predefinidas que são acionadas em diferen-
tes estados do aplicativo, sendo programadas para 
realizar qualquer coisa que quisermos�
Façamos uma comparação com o corpo humano: 
trata-se de um objeto físico que é controlado por 
nossa mente� Se nosso dedo pressiona um prego 
pontiagudo, nossa mente é responsável por sentir 
esse prego e, provavelmente, a mente fará com que 
sintamos dor� A mente é responsável por tudo o que 
sentimos�
No caso do Android, os componentes de interface 
(views e layouts) são usados para dar aparência 
física ao nosso aplicativo� Entretanto, o estado de 
consciência e de desempenhar ações cabe à Activity�
Sempre que criamos um novo projeto é criada uma 
nova activity com o nome de MainActivity� Essa clas-
se herda da classe AppCompatActivity (ou da classe 
Activity)�
Sempre que a aplicação se inicia, o primeiro método a 
ser executado é o onCreate� Logo, se você deseja que 
algo no seu aplicativo ocorra assim que ele for ini-
ciado, você deverá programar dentro desse método�
Interface
Sempre que você criar uma activity, a ela será relacio-
nada, no diretório res >> layout um arquivo Extensible 
Markup Language (XML)� Nesse arquivo você colo-
7
cará as views ou componentes da interface de seu 
aplicativo�
SAIBA MAIS
As views são blocos de construção da interface 
do usuário no Android� Pode ser uma imagem, um 
campo de texto, um botão ou qualquer coisa que 
você queira exibir na interface do seu aplicativo�
A sintaxe para a criação de uma view está apresenta-
da a seguir� Todas as views seguem a mesma sintaxe, 
por isso se torna menos complicado o desenvolvi-
mento no arquivo XML�
As principais views são: TextView, EditText, Button, 
ImageView, ImageButton, CheckBox, RadionButton, 
ListView e GridView, entre outras�
Exemplo de Aplicação no Android Studio
Agora que você conhece um pouco sobre o Android 
Studio, vamos criar uma aplicação simples, como a 
da Figura 2�
8
Figura 2: Interface com exemplo de uma aplicação� Fonte: 
Elaboração própria�
Nesse projeto, o usuário digitará algo (como o con-
teúdo vermelho escrito “Olá mundo”) e, ao clicar no 
botão, o valor será reproduzido no campo inferior 
(como o conteúdo verde)�
Criando a interface
Vamos começar criando a interface de nossa aplica-
ção� Conforme apresentado anteriormente, nossa in-
terface é composta por elementos chamados views, 
e ela será desenvolvida no arquivo XML chamado 
activity_main.xml�
9
Observe que trabalharemos no modo texto e não no 
modo design� Então, quando você cria o seu projeto, 
ele lhe traz um arquivo padrão� Você deixará seu ar-
quivo XML conforme o código da Figura 3�
Figura 3: Código fonte inicial� Fonte: Elaboração própria�
Observe que o layout está definido como 
LinearLayout, nesse caso, todas as views serão apre-
sentadas uma embaixo da outra ou uma ao lado da 
outra, tudo depende do atributo android:orientation, 
se ele está definido como vertical ou horizontal�
Observe também que temos a tag <LinearLayout> e 
seus atributos começando na linha 2, sendo fecha-
do na linha 11� As views colocaremos sempre entre 
essas duas tags�
Vamos adicionar agora o primeiro elemento, que é 
a caixa de entrada de texto, denominada EditText� 
Veja como fica na Figura 4:
10
Figura 4: Código fonte do EditText� Fonte: Elaboração 
própria�
Observe que a tag do EditText começou na linha 10� 
No total, foram inseridos oito atributos, entretanto 
é possível adicionar muito mais(ou muito menos), 
fica a critério da sua necessidade� Existem três 
atributos que são essenciais, são eles: android:id, 
android:layout_widht e android:layout_height�
O “id” representa a identificação da view em nos-
so projeto, é como um nome de variável� Cada view 
possui um id que é único� O atributo layout_height 
vai indicar qual a altura do nosso elemento na tela, 
enquanto o atributo layout_width indicará qual será 
a largura do elemento�
Outro elemento para a nossa interface é o botão� 
Vamos inserir o componente Button como na figura 
a seguir� Observe que só foi colocado o Button, o 
restante do código ficou oculto para facilitar a sua 
11
leitura, mas esse componente deve ser colocado 
logo abaixo do componente EditText:
Figura 5: Código fonte do Button� Fonte: Elaboração própria�
Observe que o botão possui um atributo chama-
do android:onClick. Isso significa que, quando o 
botão for clicado, executará o método chamado 
ApresentarMensagem� Note que embaixo do mé-
todo ApresentarMensagem temos uma marcação 
vermelha e no início da linha temos uma lâmpada 
vermelha com uma exclamação. Isso significa que 
o código está com erro e esse erro ocorre pois o 
método ApresentarMensagem ainda não foi criado 
na parte lógica, ou seja, em nossa classe do Java� 
Logo mais faremos isso�
Por fim, vamos adicionar o último elemento, que é um 
TextView, um rótulo que, quando o usuário pressionar 
o botão, apresentará a mensagem que foi digitada 
no elemento EditText�
12
Figura 6: Código fonte TextView� Fonte: Elaboração própria�
Observe no código da Figura 6 que os atributos pre-
sentes no TextView são muito semelhantes aos atri-
butos presentes no EditText�
Criando a lógica (classe Java)
Agora falaremos sobre a classe Java, que, nesse 
projeto, chama-se MainActivity�Java�
Figura 7: Exemplo de código fonte da classe Java� Fonte: 
Elaboração própria�
A classe MainActivity herda os métodos da classe 
AppCompatActivity� Um dos métodos herdados é o 
onCreate� Quando o aplicativo é iniciado, o método 
onCreate é o primeiro a ser executado, desse modo, 
se desejarmos realizar alguma instrução no carre-
gamento do aplicativo, a melhor opção é adicionar 
código dentro desse método�
13
Na linha 15 do código, estamos renderizando a inter-
face gráfica criada no arquivo XML anteriormente e 
apresentando-a na tela para o usuário� Com exceção 
da linha 15, que faz referência ao layout, não temos 
mais nenhum tipo de relação entre a classe java e 
o arquivo XML�
Desse modo, se desejamos obter o texto digitado 
no campo EditText, precisamos primeiramente criar 
um objeto do tipo EditText na classe Java e depois 
associá-lo ao objeto EditText do arquivo XML� O mes-
mo processo deve ser feito com a view TextView� O 
código da Figura 8 apresenta a declaração desses 
dois objetos no código Java�
Figura 8: Exemplo de código fonte com declaração das va-
riáveis� Fonte: Elaboração própria (2020)�
Na linha 12 e 13 criamos, respectivamente, um ob-
jeto chamado entrada do tipo EditText e um objeto 
chamado saída que é do tipo TextView� Porém, só o 
fato de declarar essas variáveis não garante a rela-
ção entre o arquivo Java e o XML� Então, precisamos 
14
realizar uma associação e isso é feito nas linhas 20 
e 21 pelo método findViewById.
Observe na linha 20, por exemplo, que o objeto en-
trada está recebendo o objeto de EditText do arquivo 
XML cujo id é textoEntrada, que nós criamos ante-
riormente� O mesmo acontece com o objeto saída�
A partir desse instante, o objeto entrada da classe 
Java está representando o EditText de nossa inter-
face e o objeto saída está representando o objeto 
TextView da interface�
O próximo passo, agora, é criarmos um método para 
o botão que, ao ser clicado, vai capturar o valor do 
nosso EditText e apresentá-lo na TextView� A Figura 
9 apresenta um exemplo de código fonte�
Figura 9: Exemplo de código fonte da classe Java� Fonte: 
Elaboração própria�
15
Na linha 24 do nosso código criamos o método 
ApresentarMensagem� Esse é o mesmo nome de 
método que colocamos no atributo onclick do botão 
lá no arquivo XML�
Na linha 25 criamos uma variável chamada texto que 
é do tipo String� Na linha 26, essa variável recebe o 
conteúdo de nossa EditText, aqui representada pelo 
objeto criado anteriormente chamado entrada�
Por fim, na linha 27 o objeto saída recebe o conte-
údo da variável texto e, assim, finaliza a execução 
do código�
Veja que, a partir desse exemplo, você pode fazer 
uma série de aplicações� Você pode colocar, por 
exemplo, dois EditText, um para o usuário digitar o 
nome e outro para digitar a senha e, assim, fazer uma 
tela de autenticação� Existem muitas possibilidades, 
aqui deixe a sua imaginação fluir.
Ionic
O Ionic é um framework mobile originalmente cons-
truído sobre Cordova e Angular� Ele permite que 
os desenvolvedores criem aplicativos mobile web 
com HTML, CSS, JavaScript e tecnologias web 
relacionadas�
Para que você consiga implementar os códigos que 
serão apresentados aqui, primeiramente você preci-
sa instalar o Node.Js e o npm em sua máquina de 
desenvolvimento� A maneira mais simples é você ir 
16
diretamente à página do Node�js e obter os instala-
dores para o seu sistema�
Instalando o Ionic
O Ionic possui um processo simples de instalação, 
via linha de comando� Para isso, abra o terminal 
(prompt de comandos do Windows ou terminal no 
Linux) e digite o seguinte comando: npm install -g 
@ionic/cli� Se você estiver utilizando um sistema 
baseado em Debian ou macOS, talvez seja necessário 
adicionar um comando sudo antes do comando para 
instalar o pacote�
O próximo passo é criarmos um projeto em Angular, 
executando o comando ionic start�
O ambiente lhe perguntará algumas informações 
necessárias para seu projeto, como o nome (veja a 
Figura 10) e o modelo inicial do seu aplicativo�
Figura 10: Ambiente solicitando o nome do aplicativo� 
Fonte: Elaboração própria�
Para o nome digite appdenoticias e para o modelo 
inicial escolha sidemenu, que lhe dará um aplicati-
vo inicial com um menu lateral para você navegar� 
Vários pacotes serão instalados na criação do seu 
aplicativo�
17
Iniciando o aplicativo pela primeira vez
Assim que concluída a instalação e a criação do 
aplicativo, é hora de iniciá-lo pela primeira vez� Para 
isso, pelo prompt de comandos, vá até a pasta raiz 
do seu projeto (no caso deste material, o projeto está 
em c:\temp\appdenoticias)� Estando na raiz, digite 
o comando ionic serve, isso fará com que seja car-
regado o serviço do Ionic em seu computador� Após 
isso, seu aplicativo estará disponível em http://loca-
lhost:8100 e você poderá acessá-lo pelo navegador, 
como mostra a Figura 11�
Figura 11: Tela inicial do aplicativo� Fonte: Elaboração 
própria�
18
http://localhost:8100
http://localhost:8100
Quando você carrega o seu aplicativo, ele apresenta 
uma página web padrão� Para que a visualização 
seja como a da Figura 11, você precisa pressionar a 
tecla F12 no seu teclado e, em seguida, pressionar 
as teclas CTRL + SHIFT + M�
Se você clicar no menu de hambúrguer no canto es-
querdo superior, verá que existem vários elementos 
que já vêm predefinidos no projeto, vamos remover 
todos de modo que tenhamos apenas dois itens no 
menu: uma página que será a principal, onde reali-
zaremos a importação de notícias a partir de um 
serviço web, e uma página que se chamará sobre e 
nela colocaremos informações sobre o aplicativo�
Criando as páginas e interfaces do aplicativo�
Primeiramente vamos configurar o arquivo src/app/
app-routing�module�ts, nesse você vai adicionar a 
rota para o diretório de home e para o diretório de 
sobre que iremos criar logo mais� O arquivo deverá 
ficar como a Figura 12.
Teremos duas rotas, uma para o caminho que redire-
ciona para a rota /home, que exibe a página inicial, e 
a rota /sobre, que exibe a página sobre o aplicativo� 
Você simplesmente precisa remover o último objeto�
19
Figura 12: Código fonte do app-routing�module�ts� Fonte: 
Elaboraçãoprópria�
Feito isso, você também precisa remover o link 
para a página de lista do menu lateral� Abra o ar-
quivo src/app/app.component.ts� Localize a matriz 
appPages e configure conforme a Figura 13�
Figura 13: Código fonte do app�component�ts� Fonte: 
Elaboração própria�
Importante que você compreenda que, até aqui, ape-
nas montamos a estrutura do nosso aplicativo, mas 
ainda não criamos nenhuma página� Se você for no 
20
diretório do seu projeto em src/app você verá que 
não existem os diretórios home e sobre, e também 
não existem as referidas páginas�
Agora nós vamos criar duas páginas para o nosso 
aplicativo� Abra uma nova janela de terminal, vá até 
o diretório de sua aplicação e lá execute o comando 
ionic generate page sobre para criar a página sobre e 
todos os arquivos a ela relacionados, bem como exe-
cute o comando ionic generate page home para criar 
a página home e todos os arquivos a ela relacionados�
Após executar os dois comandos, vá até o diretório 
do seu aplicativo em src/app e verifique que foram 
criados dois novos diretórios, um chamado sobre e 
outro chamado home�
Nesse momento você tem uma aplicação com dois 
itens no menu� Se você voltar para olhar como está 
ficando o seu aplicativo, verá que na barra de ferra-
mentas não existe um ícone de menu� Então, faremos 
isso agora atualizando a página que está no caminho 
src/app/sobre/sobre.page.html�
Veja na Figura 14 a configuração do arquivo sobre.
page.html. Trata-se de um arquivo com a configura-
ção da página web�
Figura 14: Código fonte do sobre�page�html� Fonte: 
Elaboração própria�
21
Feito isso, temos a nossa página sobre� Veja na 
Figura 14 a configuração do arquivo sobre.page.
html. Trata-se de um arquivo com a configuração 
do layout e do conteúdo da página web�
Agora faremos o mesmo para o arquivo /src/app/
home/home.page.html� Deixaremos layout e conte-
údo básicos por enquanto� Depois, quando formos 
consumir o serviço web, modificaremos esse arquivo. 
Veja como fica o código desse arquivo na Figura 15.
Figura 15: Código fonte do home�page�html� Fonte: 
Elaboração própria�
Ao testar o seu aplicativo, você poderá ver as duas 
páginas e acessá-las pelo menu lateral� Podemos 
modicar a aparência desta página alterando o seu 
CSS, então abra o arquivo /src/app/home/home.
page.scss� Nele adicione o seguinte conteúdo da 
Figura 16:
22
Figura 16: Código fonte do home�page�scss� Fonte: 
Elaboração própria�
Consumindo dados a partir 
de um serviço web
Com as páginas do aplicativo já prontas e devida-
mente configuradas, agora é a hora de consumirmos 
o serviço web� Nesse exemplo, vamos consumir a 
Application Programming Interface (API) de notícias 
disponível em Newsapi� Essa API oferece, gratuita-
mente, conteúdo para softwares livres e projetos de 
desenvolvimento�
O primeiro passo é você acessar o site da API e re-
gistrar-se, com o objetivo de obter a API KEY�
Após se cadastrar e ter a sua API KEY, vamos criar 
um serviço que se encarregará de obter os dados 
da API de notícias� No terminal, execute o comando 
ionic generate servisse api.
Feito isso, abra o arquivo src/app/app.module.ts e 
importe HttpClientModule, conforme ilustrado na 
Figura 17.
23
http://newsapi.org
Figura 17: Código fonte do app�module�ts� Fonte: 
Elaboração própria�
O próximo passo é injetar HttpClient por meio do 
construtor de serviços no arquivo src/app/api.ser-
vice.ts. Veja na Figura 18 como ficará este arquivo.
Figura 18: Código fonte do api�service�ts� Fonte: Elaboração 
própria�
No código da Figura 18 também definimos a variável 
API_KEY, que recebe a chave de API que você obteve 
anteriormente� Também foi adicionado um método 
24
que envia uma solicitação GET a um endpoint para 
notícias (linhas 13)�
Antes de modificarmos a nossa página home para 
exibir as notícias, precisamos de uma última confi-
guração que é adicionar o serviço e associá-lo com 
a página� Então, abra o arquivo src/app/home/home.
page.ts, importe e em seguida injete por meio do 
construtor do componente ApiService�
Também nesse arquivo vamos adicionar uma variá-
vel de artigos que conterá as notícias recuperadas e 
um método chamado ionViewDidEnter(), onde cha-
maremos o método getNews() de ApiService para 
recuperar as notícias� O nosso arquivo home.page.
ts ficará como na Figura 19.
Figura 19: Código fonte do api�service�ts� Fonte: Elaboração 
própria�
25
http://home.page.ts
http://home.page.ts
Por fim, vamos exibir as notícias em nossa página 
chamada home� Então, abra o arquivo src/app/home/
home.page.html e realize as modificações conforme 
a Figura 20�
Figura 20: Código fonte do home�page�html Fonte: 
Elaboração própria�
Na linha 13 utilizamos a diretiva ngFor para percor-
rer a lista de artigos e exibir as notícias em nossa 
página inicial� Agora você tem um aplicativo que 
consome dados a partir de um serviço web como 
este da Figura 21�
26
Figura 21: Aplicativo finalizado. Fonte: Elaboração própria�
27
O aplicativo tem ainda muitas outras melhorias as 
quais você pode criar� Você pode, por exemplo, além 
de adicionar essa fonte de notícia, consumir um ser-
viço web de meteorologia� Desse modo, o usuário 
pode escolher entre ver notícias ou saber informa-
ções sobre o clima�
Sensores com Android Studio
Agora que você conheceu como desenvolver uma 
aplicação no Android Studio e também utilizando o 
Ionic, desenvolveremos uma aplicação que capturará 
dados a partir dos sensores do seu dispositivo móvel�
Os dispositivos móveis vêm equipados com diver-
sos sensores como luminosidade, acelerômetro e 
giroscópio, entre outros� Aqui vamos capturar os 
valores do sensor de acelerômetro� Porém, saiba que 
o mesmo procedimento para capturar os dados do 
acelerômetro pode ser aplicado para capturar dados 
dos demais sensores�
Crie um novo projeto no Android Studio como empty 
activity. Após finalizar a criação, vamos para as confi-
gurações de interface e da lógica da nossa aplicação�
Configurando a interface do projeto
Nossa primeira ação será configurar a interface do 
nosso projeto, ou seja, o arquivo XML� Observe que 
teremos apenas 1 componente TextView em nossa 
tela, exatamente para apresentar os eixos X, Y e Z 
do acelerômetro. A Figura 22 apresenta como ficará 
o arquivo XML�
28
Figura 22: Arquivo de interface da nossa aplicação� Fonte: 
Elaboração própria�
Observe na Figura 22 que temos um LinearLayout 
com um componente TextView cujo id é eixosAce-
lerometro� O próximo passo agora é irmos para a 
lógica da aplicação�
Desenvolvendo a lógica da aplicação
Agora iremos para a classe Java chamada 
MainActivity.java� Nela colocaremos a lógica de 
nossa aplicação�
Vamos declarar duas variáveis globais, a primeira é 
chamada de valorSensor e é do tipo TextView� Ela 
receberá o objeto do tipo TextView do nosso arquivo 
XML de layout� Outra variável que declararemos é a 
mSensorManager� Essa variável é um objeto do tipo 
SensorManager, responsável por gerenciar os sen-
sores do nosso dispositivo móvel� O nosso código 
por enquanto ficará conforme a Figura 23.
29
Figura 23: Código da classe MainActivity�java� Fonte: 
Elaboração própria�
Observe que o objeto mSensorManager recebe o siste-
ma de serviço de sensores do Android, assim ele passa 
a possuir a informação de todos os sensores que temos 
no dispositivo móvel�
O próximo passo é criar uma classe AcelerometroSensor, 
implementando SensorEventListener, que é responsável 
por capturar qualquer evento do nosso sensor� Desse 
modo, a cada vez que o nosso sensor modificar o valor 
(o eixo X, Y ou Z do acelerômetro modificar o valor), uma 
nova informação será escrita na tela. Veja como fica o 
código na Figura 24�
30
Figura 24: Código fonte para leitura do sensor� Fonte: 
Elaboração própria�
Esse código da Figura 24 deve ser escrito logo após 
o final do método onCreate� O próximo passo é criar-
mos um método chamado Acelerometro()� Esse mé-
todo será responsável por invocar o nosso sensor e 
obtermos seus dados� Observe na Figura25 como 
fica o código.
Figura 25: Código fonte do método Acelerometro� Fonte: 
Elaboração própria�
31
Nesse exemplo, estamos utilizando o sensor de 
Acelerômetro, por isso, na terceira linha passamos 
como parâmetro para o método getDefaultSensor o 
valor Sensor.TYPE_ACCELEROMETER� Se você dese-
jar analisar outro sensor, como o de proximidade, por 
exemplo, passe o valor Sensor.TYPE_PROXIMITY�
Por fim, para ver o seu sensor funcionando, chame 
o método ACELEROMETRO() dentro do método on-
Create()� Os dados do sensor lhe serão apresentados 
na tela�
32
CONSIDERAÇÕES FINAIS
Neste e-book você conheceu duas das principais 
ferramentas para desenvolvimento de aplicações 
mobile: o Android Studio e o Ionic�
O Android Studio é voltado para o desenvolvimento 
de aplicações nativas para dispositivos móveis do 
Google, com sistema operacional Android� Você no-
tou que, ao desenvolver uma aplicação para Android, 
primeiro desenvolve a interface, que é feita no arqui-
vo XML chamado activity_main.xml� Nesse arquivo 
você irá inserir todos os componentes que serão 
apresentados na tela para o usuário�
Por outro lado, temos também o arquivo com a estru-
tura lógica da aplicação, que é a classe MainActivity.
java� Nela colocaremos a lógica do negócio e demais 
funcionalidades�
Se por um lado o Android Studio desenvolve apli-
cativos nativos, o Ionic desenvolve aplicações web, 
as quais podemos considerar como híbridas, pois 
podem ser executadas em qualquer dispositivo, inde-
pendentemente da plataforma (sistema operacional)�
Os modelos do Ionic são semelhantes aos temas de 
desenvolvimento de front-end e modelos que você 
pode encontrar usando outras plataformas, como 
temas do WordPress� Eles consistem em uma série 
de arquivos e recursos que ajudam a preencher a 
lacuna entre a própria estrutura e o produto acabado 
que você está procurando�
33
Por fim, desenvolvemos uma aplicação que monitora 
os sensores de nosso dispositivo móvel, especifi-
camente essa aplicação desenvolvida monitora os 
dados provindos do sensor acelerômetro� Porém, 
com poucas alterações é possível monitorar outros 
sensores a partir desse código apresentado�
Como mensagem final, recomendo que implemente 
os códigos apresentados nos diferentes ambientes 
de desenvolvimento� Somente com a prática cons-
tante você adquirirá fluência no desenvolvimento de 
aplicações para dispositivos móveis�
34
Referências Bibliográficas 
& Consultadas
Android vs iOS� Kantar World Panel� Disponível em: 
https://www.kantarworldpanel.com/global/smartpho-
ne-os-market-share/� Acesso em: 28 set� 2020
CHAK, A� Como criar sites persuasivos: clique 
aqui� São Paulo: Pearson Education do Brasil, 2004� 
[Biblioteca Virtual]�
CSS Tutorial� W3Schools� Disponível em: http://www.
w3schools.com/css/default.asp� Acesso em: 16 fev� 
2020�
FLANAGAN, D� JavaScript: o guia definitivo. 6. ed. 
Porto Alegre: Bookman, 2013� [Minha Biblioteca]�
JavaScript Tutorial� W3Schools� Disponível em: http://
w3schools.com/js/default.asp� Acesso em: 16 fev� 
2020�
MACDONALD, M.; DORIA, A. Criação de sites: o ma-
nual que faltava� São Paulo: Digerati Comunicação 
e Tecnologia, 2010�
SILVA, D� Desenvolvimento para dispositivos mó-
veis� São Paulo: Pearson Education do Brasil, 2016� 
[Biblioteca Virtual]�
SIMAS, V� L� et al� Desenvolvimento para dispositi-
vos móveis� v� 2� Porto Alegre: SAGAH, 2019� [Minha 
Biblioteca]�
TERUEL, E� C� HTML5: guia prático� 2� ed� São Paulo: 
Érica, 2014� [Minha Biblioteca]�
	Introdução
	Desenvolvimento mobile
	Android Studio
	Ionic
	Consumindo dados a partir de um serviço web
	Sensores com Android Studio
	Considerações finais
	Referências Bibliográficas & Consultadas