Desenvolvimento Mobile Multiplataforma

Prévia do material em texto

W
BA
01
77
_V
2.
0
APLICATIVOS MOBILE 
MULTIPLATAFORMA
2
Ariel da Silva Dias
São Paulo
Platos Soluções Educacionais S.A 
2021
APLICATIVOS MOBILE MULTIPLATAFORMA
1ª edição
3
2021
Platos Soluções Educacionais S.A
Alameda Santos, n° 960 – Cerqueira César
CEP: 01418-002— São Paulo — SP
Homepage: https://www.platosedu.com.br/
Diretor Presidente Platos Soluções Educacionais S.A
Paulo de Tarso Pires de Moraes
Conselho Acadêmico
Carlos Roberto Pagani Junior
Camila Braga de Oliveira Higa
Camila Turchetti Bacan Gabiatti
Giani Vendramel de Oliveira
Gislaine Denisale Ferreira
Henrique Salustiano Silva
Mariana Gerardi Mello
Nirse Ruscheinsky Breternitz
Priscila Pereira Silva
Tayra Carolina Nascimento Aleixo
Coordenador
Henrique Salustiano Silva
Revisor
Eduardo Eiji Ono
Editorial
Alessandra Cristina Fahl
Beatriz Meloni Montefusco
Carolina Yaly
Mariana de Campos Barroso
Paola Andressa Machado Leal
Dados Internacionais de Catalogação na Publicação (CIP)________________________________________________________________________________________ 
Dias, Ariel da Silva
D541a Aplicativos mobile multiplataforma / Ariel da Silva Dias, – 
 São Paulo: Platos Soluções Educacionais S.A., 2021.
 44 p.
 ISBN 978-65-89881-55-1
 1. Mobile. 2. Tecnologias de desenvolvimento. 3. Flutter. 
 I. Título.
 
CDD 005
____________________________________________________________________________________________
Evelyn Moraes – CRB 010289/O
© 2021 por Platos Soluções Educacionais S.A.
Todos os direitos reservados. Nenhuma parte desta publicação poderá ser 
reproduzida ou transmitida de qualquer modo ou por qualquer outro meio, 
eletrônico ou mecânico, incluindo fotocópia, gravação ou qualquer outro tipo de 
sistema de armazenamento e transmissão de informação, sem prévia autorização, 
por escrito, da Platos Soluções Educacionais S.A.
4
SUMÁRIO
Introdução ao desenvolvimento mobile multiplataforma ____ 05
Usabilidade no desenvolvimento de aplicativo multiplataforma 
_______________________________________________________________ 22
Desenvolvimento mobile com Flutter ________________________ 38
Desenvolvimento mobile com Xamarin ______________________ 53
APLICATIVOS MOBILE MULTIPLATAFORMA
5
Introdução ao desenvolvimento 
mobile multiplataforma
Autoria: Ariel da Silva Dias
Leitura crítica: Eduardo Eiji Ono
Objetivos
• Conhecer os conceitos de aplicativos mobile nativos, 
web e híbridos.
• Compreender as ferramentas e as técnicas para 
o desenvolvimento de protótipos para aplicativos 
mobile.
• Conhecer as diferentes plataformas de 
desenvolvimento mobile.
6
1. Desenvolvimento mobile multiplataforma
O volume de dispositivos móveis tem aumentado abundantemente nos 
últimos anos e a tendência é que continue a aumentar. De acordo com 
a Anatel (2020), são mais de 225 milhões de aparelhos móveis, dos quais 
198 milhões estão conectados à rede de banda larga. Em uma análise 
rápida, o Brasil, segundo o IBGE (2021), possui mais de 212 milhões de 
pessoas; logo, o número de dispositivos móveis é maior que a população 
nacional.
Ao nos referirmos ao mundo como um todo, os dados são mais 
interessantes. Em um relatório apresentado pela GSM Association 
(2020), no mundo existem mais de 8,8 bilhões de dispositivos móveis 
e mais de 5 bilhões de usuários únicos. Se considerarmos a população 
mundial como de 7,8 bilhões de habitantes (WORLDOMETER, [s.d.]), 
então a quantidade de dispositivos móveis é maior.
Se pararmos para observar, no dia a dia quase tudo o que fazemos é 
por meio de um dispositivo móvel: acesso ao e-mail, leitura de livros, 
leitura de notícias, assistir a um vídeo, interação com amigos, reunião de 
trabalho, entre outros. Logo, é inimaginável retirá-lo de nossas vidas.
Sendo assim, torna-se necessário estudarmos o processo de 
desenvolvimento de aplicações mobile. Acrescenta-se ainda a 
necessidade de estudarmos o desenvolvimento multiplataforma, ou 
seja, atender aos diferentes tipos de usuários com diferentes tipos de 
dispositivos móveis.
1.1 Aplicativos nativos e multiplataforma
No mercado existem diversas plataformas de dispositivos móveis, como 
BlackBerry, Windows Phone, Android, iOS, entre outras. Porém, três 
delas merecem uma atenção especial devido à marcante presença: 
7
Android, iOS e HTML5 (entenderemos o motivo de HTML5 entrar aqui 
como plataforma logo mais). No entanto, elas são muito diferentes em 
sua entrega.
Agora que sabemos da existência dessas plataformas, precisamos, antes 
de desenvolver nosso aplicativo, compreender se vamos desenvolver 
para uma plataforma específica (aplicativos nativos) ou simultaneamente 
para todas as plataformas (também chamados de aplicativo 
multiplataforma, aplicativos de plataformas cruzadas ou híbridos).
Os aplicativos nativos são desenvolvidos para serem utilizados em 
uma única família de sistema, plataforma ou dispositivo específico, como 
Android, iOS ou Windows. São feitos e codificados especialmente para 
uma plataforma móvel específica em sua linguagem de programação 
nativa, sendo:
• iOS (Objective-C ou Swift).
• Android (Java ou Kotlin).
• Windows Phone (C#).
Existem diferentes diretrizes para cada uma dessas plataformas e os 
desenvolvedores precisam segui-las, pois diferem em sintaxe, semântica, 
estilos gráficos, efeitos visuais, entrada de dados e muito mais.
Os aplicativos web são acessados por meio do navegador da internet e 
se adaptam a qualquer dispositivo em que você os esteja visualizando. 
Eles não são nativos de um sistema específico nem precisam ser 
baixados ou instalados. Devido à sua natureza responsiva, realmente se 
parecem e são executados como aplicativos móveis.
Os aplicativos web precisam de uma conexão ativa com a internet para 
serem executados, enquanto os aplicativos móveis, em sua maioria, 
podem funcionar off-line. Os aplicativos móveis têm a vantagem de 
8
serem mais rápidos e eficientes, mas exigem que o usuário baixe 
atualizações regularmente. Já os aplicativos da web são atualizados 
no servidor (trata-se de um computador ou programa que fornece um 
determinado serviço a outro programa ou computador. Esse receptor é 
chamado de cliente).
Por fim, os aplicativos multiplataforma, ou de plataforma cruzada, 
correspondem aos aplicativos que podem ser executados em vários 
sistemas operacionais. Uma ferramenta de plataforma cruzada gera 
automaticamente um código para o sistema operacional de destino e os 
desenvolvedores podem criar uma única base de código a partir disso.
Com o desenvolvimento móvel de aplicativos multiplataforma, os 
programadores podem desenvolver aplicativos para uma ou mais 
plataformas ou sistemas operacionais móveis simultaneamente. Isso 
também pode permitir que usem essencialmente a mesma base de 
código para plataformas diferentes. Desse modo, pode-se desenvolver 
um aplicativo que será publicado e poderá ser utilizado tanto em um 
smartphone com Sistema Operacional Android quanto em um iPhone 
com Sistema Operacional iOS.
A principal vantagem do desenvolvimento multiplataforma é o fato 
de reduzir o tempo e os custos necessários para criar um aplicativo. 
Entretanto, se não forem corretamente desenvolvidos, os aplicativos 
multiplataforma podem apresentar pontos negativos, afinal, como eles 
compartilham a mesma base de código, tendem a ter mais problemas 
específicos da plataforma e uma qualidade inferior (relacionada à 
interface do usuário e ao desempenho) quando comparados a um 
aplicativo nativo.
9
1.1.1 Vantagens e desvantagens dos aplicativos móveis 
nativos e multiplataforma
Agora que sabemos as diferenças fundamentais entre aplicativos 
nativos, multiplataformas e web, podemos analisar as vantagens e 
desvantagens de cada um. O Quadro 1 apresenta as vantagens e 
desvantagens dos aplicativos móveis nativos.
Quadro 1 – Vantagens e desvantagens dos aplicativos móveis 
nativos
Vantagens Desvantagens
Mais rápido do que os 
aplicativos web.
Mais caro de construirdo 
que aplicativos da web
Maior funcionalidade, pois 
possui acesso aos recursos 
do Sistema.
Compatibilidade com 
plataformas diferentes 
requer o projeto e o 
desenvolvimento do zero.
Possibilidade de trabalhar 
off-line.
Caro para manter e atualizar.
Seguro e protegido, 
pois, antes de ser 
disponibilizado, deve ser 
aprovado pela APP Store 
(uma loja virtual em que 
são disponibilizados os 
aplicativos mobile).
O processo de aprovação 
para disponibilizar na APP 
Store pode ser demorado e 
difícil.
Mais fácil de desenvolver 
devido ao maior número 
de ferramentas de 
desenvolvimento e 
bibliotecas
Fonte: elaborado pelo autor.
10
O Quadro 2 apresenta as vantagens e as desvantagens do 
desenvolvimento de aplicativos mobile multiplataformas.
Quadro 2 – Vantagens e desvantagens dos aplicativos móveis 
multiplataformas
Vantagens Desvantagens
Componentes de código 
reutilizáveis; logo, o programa 
desenvolvido para um aplicativo 
é aproveitado várias vezes.
Aplicativos de plataforma 
cruzada têm desafios de 
integração com seus sistemas 
operacionais de destino, 
o que acaba afetando seu 
desempenho.
Velocidade no desenvolvimento, 
uma vez que o uso de um 
único código-fonte em várias 
plataformas ajuda a reduzir os 
esforços de desenvolvimento em 
projetos.
Os aplicativos de 
multiplataforma não são 
capazes de tirar total vantagem 
dos recursos nativos.
O uso de uma única base de 
código entre plataformas resulta 
em redução significativa de 
custos.
Quanto mais plataformas seu 
aplicativo atender, mais pessoas 
você poderá alcançar. 
Fonte: elaborado pelo autor.
Se o objetivo em um aplicativo é conquistar o maior número de clientes 
e esse público pode usar iPhone, Android ou outro Sistema, deve-se 
projetar para multiplataformas. Logo, é necessário analisar as vantagens 
e as desvantagens apresentadas e outras que possam surgir no 
processo de desenvolvimento.
11
Outra característica fundamental no desenvolvimento multiplataforma 
é a possibilidade de desenvolver aplicativos mobile web. Isso ocorre 
porque é muito difícil encontrar ótimos desenvolvedores para 
dispositivos móveis, enquanto é relativamente mais fácil encontrar bons 
desenvolvedores HTML, CSS e JavaScript. Logo, uma escolha certeira 
seria HTML5, pensando no cenário apresentado.
1.2 Ferramentas para o desenvolvimento de aplicativos 
nativos
A seguir estudaremos duas das principais ferramentas para 
desenvolvimento de aplicativos nativos, o Xcode, que é um ambiente de 
desenvolvimento da Apple para iOS, e o Android Studio, uma ferramenta 
da Google para desenvolvimento de aplicativos para dispositivos 
Android.
1.2.1 Xcode
A primeira ferramenta de desenvolvimento de aplicativos nativa que 
veremos é a Xcode da Apple, que vem crescendo em utilização. A 
linguagem de programação utilizada é a Swift, considerada por muitos 
como inovadora devido às funcionalidades disponíveis.
O Xcode inclui tudo o que os desenvolvedores precisam para criar 
aplicativos para macOS, iPhone, iPad, Apple TV e Apple Watch. Ele 
fornece aos desenvolvedores um fluxo de trabalho unificado para 
design, codificação, teste e depuração da interface do usuário.
Outra ferramenta para desenvolvimento de aplicativos nativos é o 
AppCode, para desenvolvimento iOS/macOS. Além de trabalhar com 
as linguagens de programação Objective-C, Swift e C/C++, ele suporta 
tecnologias da web, como JavaScript, HTML (HyperText Markup Language 
– Linguagem de marcação de hipertexto); XML (Extensible Markup 
12
Language – Linguagem de marcação extensiva); CSS (Cascading Style 
Sheets–Folha de estilo em cascata); e muito mais. Ela fornece uma 
variedade de integrações valiosas, incluindo, entre outros, o gerenciador 
de dependências (módulo de software responsável por coordenar a 
integração de bibliotecas externas) CocoaPods e o suporte interno do 
Reveal (responsável por depurar as visualizações em tempo real para o 
desenvolvedor).
Além dos benefícios que o AppCode oferece aos desenvolvedores 
(como economizar tempo na automação de tarefas de rotina; localizar 
e corrigir erros; aproveitar o suporte inteligente do IDE; e aumentar a 
produtividade geral), pode ser um recurso igualmente valioso para o seu 
o negócio.
1.2.2 Android Studio
Na mesma linha de ambientes de desenvolvimento com recursos 
poderosos e de grande utilização no mercado, temos o Android Studio, 
que é uma ferramenta de desenvolvimento Android criada pela Google. 
Seu editor de implementação é muito útil para desenvolvedores 
Android. Ele fornece atalhos para codificação e design, e seu designer de 
layout o torna muito fácil de usar, o que ajuda a reduzir o tempo gasto 
na codificação. Além disso, oferece recursos de arrastar e soltar para 
projetar o layout de seus projetos.
Trata-se de um ambiente de desenvolvimento completo, com uma 
máquina virtual (AVD – Android Virtual Device) que simula um dispositivo 
móvel real. A linguagem de programação utilizada pode ser Java ou 
Kotlin.
13
1.2.3 Categorias de aplicativos multiplataforma
Os aplicativos multiplataforma podem ser divididos em três plataformas 
de desenvolvimento:
• Plataformas de codificação: fornecem controle total sobre todo o 
seu processo de desenvolvimento. A desvantagem é que requerem 
conhecimento sobre a linguagem de codificação escolhida. Porém, 
essa compensação sem dúvida vale a pena se você puder otimizar 
seu aplicativo com perfeição e ter controle perfeito sobre ele.
• Plataformas de pouco código: se o objetivo do negócio é tornar 
o processo de desenvolvimento menos demorado, então essas 
plataformas de pouco código podem ser o que se está procurando. 
Elas são capazes de simplificar com eficiência o processo 
de desenvolvimento, limitando a quantidade de codificação 
necessária. Em vez disso, a própria plataforma o ajudará com 
programas de construção especializados, permitindo ainda a 
personalização com codificação.
• Plataformas sem codificação: mesmo que não se tenha nenhum 
conhecimento prévio de codificação, hoje em dia ainda se pode 
criar um aplicativo perfeitamente adequado para sua empresa. 
Isso é possível por meio do uso de plataformas sem codificação, 
que fornecem serviços, como uma interface de arrastar e soltar, 
permitindo a criação de um aplicativo sem digitar uma linha de 
código. A desvantagem é que, por ser simples e eficiente, remove 
uma grande quantidade de personalização e flexibilidade que vem 
com a codificação.
Agora que conhecemos a diferença entre aplicativos nativos e aplicativos 
multiplataforma, vamos conhecer os ambientes de desenvolvimento.
14
1.2.4 Xamarin
Entre os diversos ambientes de desenvolvimento, temos um destaque 
especial para o Xamarin, afinal é o ambiente mais popular de 
desenvolvimento de aplicações multiplataformas.
Figura 1 – Xamarin
Fonte: https://docs.microsoft.com/pt-br/media/logos/logo_xamarin.svg. Acesso em: 5 maio 
2021.
Com o Xamarin, é possível desenvolvermos aplicativos móveis para iOS, 
Android e Windows, utilizando uma única base de código compartilhada 
.NET.
Seu ambiente de desenvolvimento é o Visual Studio, que oferece uma 
série de recursos, incluindo edição de código (escrita do código-fonte); 
refatoração (melhora do código internamente sem comprometer a parte 
de interação do usuário, ou seja, preserva o comportamento externo); 
depuração (executa a aplicação em ambiente/condições controlado, 
rastreando as operações que estão em andamento); teste (processo de 
15
depurar o código-fonte ou o aplicativo antes de ele ser distribuído); e 
publicação na nuvem (disponibiliza o aplicativo para o usuário).
1.2.5 Flutter
O Flutter é um kit de ferramentas da Google para o desenvolvimento de 
aplicativo multiplataforma. Com ele, é possível o desenvolvimento na 
linguagem Dart (linguagem baseada no Java) para dispositivos móveis, 
desktop e web.
Figura 2 – Flutter
Fonte: https://flutter.dev/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552
b2f42108ec5bc68dc63bae2df75.png. Acesso em: 5 maio 2021.
Oconceito central do Flutter são os widgets. Toda a interface do usuário 
é composta por widgets e cada um deles define: um elemento da 
estrutura, como botão, menu, caixa de entrada, entre outros; e um 
elemento de estilo, como uma fonte ou layout; entre outros.
Entre suas principais características, podemos destacar:
• Aumento da produtividade: por ser multiplataforma, assim como 
no Xamarin, é possível usar a mesma base de código para iOS ou 
Android, economizando tempo e recursos.
• Desenvolvimento rápido: o recurso hot reload permite que 
o desenvolvedor visualize em um emulador em tempo real as 
16
alterações feitas no código. Então, o código alterado é rapidamente 
recarregado enquanto o aplicativo está em execução, sem a 
necessidade de reinicialização.
• Compatibilidade: os widgets fazem parte do aplicativo, e não da 
plataforma; logo, haverá poucos ou nenhum problema com as 
diferentes versões e tipos de sistemas operacionais.
• Código aberto: o Flutter e a linguagem Dart são de código aberto e 
de uso gratuito, além de possuírem uma ampla documentação.
No tópico anterior, vimos o Xamarin, ferramenta que construiu uma 
base de usuários muito extensa desde seu lançamento em 2011. Ao 
mesmo tempo, o Flutter é uma das plataformas de desenvolvimento que 
diariamente ganha popularidade devido à facilidade de uso e à vasta 
documentação.
1.2.6 Ionic
Ainda sobre as ferramentas de desenvolvimento híbrido, podemos 
destacar o Ionic, um framework fácil de usar e aprender que permite 
a prototipagem rápida. A integração com o Angular cria um ambiente 
agradável para codificar.
Figura 3 – Ionic
Fonte: https://ionicframework.com/blog/wp-content/uploads/2020/10/white-on-color.png. 
Acesso em: 5 maio 2021.
17
O Ionic Framework é um kit de ferramentas de UI (User Interface) 
voltado para o desenvolvimento mobile com código-fonte aberto. Ele 
é desenvolvido com base em tecnologia web e permite às equipes o 
desenvolvimento de aplicativos multiplataforma de alta qualidade para 
iOS, Android e web, utilizando um único código-fonte base.
Para criar um aplicativo com ele, é preciso conhecer tecnologias web, 
como Angular, HTML e CSS. Ele transforma um único código escrito em 
Angular, HTML e Saas em um aplicativo móvel.
Um aplicativo criado com o Ionic Framework é de plataforma cruzada. 
Ele é construído como um aplicativo web simples, mas nos permite gerar 
um aplicativo nativo, além de ter acesso a todas as funcionalidades 
específicas do telefone.
Como resultado, os aplicativos de plataforma cruzada não são 
puramente nativos nem inteiramente baseados na web. O layout é feito 
por meio de visualizações da web, mas o aplicativo tem acesso às APIs 
nativas do dispositivo.
1.2.7 React Native
O React Native é um framework multiplataforma, desenvolvido pela 
comunidade do Facebook e baseada na tecnologia JavaScript.
18
Figura 4 – React Native
Fonte: https://reactnative.dev/img/header_logo.svg. Acesso em: 5 maio 2021.
O React Native permite que os desenvolvedores criem aplicativos 
multiplataforma usando uma única base de código Java Script. Seu 
objetivo é construir experiências de aplicativos nativos usando 
componentes nativos, como Imagens, Texto e Visualização. Com os 
blocos de construção, os desenvolvedores podem criar blocos de 
desenvolvimento.
Todas essas ferramentas que vimos até aqui exigem muito 
conhecimento de codificação por parte do programador e, por isso, 
são consideradas plataformas de codificação. A seguir, veremos alguns 
exemplos de ferramentas de pouca programação e de nenhuma 
programação.
1.2.8 OutSystem
A OutSystem é uma plataforma de desenvolvimento de aplicativos de 
pouco código que permite aos usuários construir, implantar, gerenciar 
e alterar aplicativos móveis e web de nível empresarial com mais 
rapidez. Ela inclui mais de 140 padrões e modelos de interface de 
usuário prontos para usar, a fim de acelerar o desenvolvimento da UI. 
Além disso, oferece vários tipos de opções de suporte para ajudar seus 
19
usuários a maximizar o uso do software, o que inclui suporte ilimitado 
por e-mail, recursos de base de conhecimento, treinamento e tutoriais 
on-line, webinars (reunião on-line em tempo real) exclusivos e um 
programa de integração do cliente.
1.2.9 AppSheet
O AppSheet permite que qualquer pessoa crie aplicativos móveis 
poderosos para sistemas operacionais iOS e Android diretamente de 
suas próprias fontes de dados, os quais podem ser extraídos de várias 
fontes, incluindo Dropbox, OneDrive, Google Drive e Smartsheet.
Figura 5 – Captura de tela da interface do AppSheet
Fonte: captura de tela da aplicação AppSheet.
A Figura 5 apresenta o processo de desenvolvimento de um aplicativo no 
AppSheet. Nesse momento, o desenvolvedor está criando um botão e 
adicionando um comportamento (ação) para ele. É importante observar 
que não há código de programação, apenas componentes para serem 
selecionados. No canto direito da figura, temos uma visualização de 
como está ficando o aplicativo em tempo real.
20
Depois que um aplicativo é criado, os usuários podem personalizar a 
marca e os recursos oferecidos, com um emulador totalmente interativo 
para visualizar o aplicativo. O AppSheet oferece um editor básico e um 
editor avançado para personalizar aplicativos. O editor básico cobre os 
recursos e as funções mais importantes do aplicativo, como logotipo, 
controles de visualização, nome, nível de segurança e requisitos de log 
in e funcionalidade off-line, além de permitir que os usuários editem 
diretamente os dados da planilha e reorganizem a estrutura da planilha. 
Já com o editor avançado, tem-se acesso aos demais recursos.
Os desenvolvedores que conhecem a programação por código podem 
usar o ambiente de pouco código ou de zero código (sem codificação) 
para desenvolverem aplicativos complexos, integrar dados com sistemas 
existentes de registro e fluxos de trabalho e adicionar requisitos 
adicionais de segurança ou autenticação para proteger seus dados.
Durante a leitura deste Tema, vimos que os aplicativos nativos são 
especializados para executarem apenas em uma única plataforma. 
Desse modo, se desenvolvermos um aplicativo nativo para o Android, 
ele só será executado no Android. Por outro lado, os aplicativos 
multiplataforma ou de plataformas cruzadas têm aumentado durante 
os anos, uma vez que o desenvolvedor pode criar um aplicativo para 
uma ou mais plataformas simultaneamente. Desse modo, são criados 
aplicativos que podem ser executados tanto em Android quanto em iOS 
ou outra plataforma.
Referências
ANATEL. Agência Nacional de Comunicações. Telefonia móvel. 2020. Disponível 
em: https://www.anatel.gov.br/paineis/acessos/telefonia-movel. Acesso em: 16 fev. 
2021.
FLUTTER. [s.d.]. Disponível em: https://flutter.dev/. Acesso em: 12 fev. 2021.
21
GSM ASSOCIATION. The Mobile Economy Latin America. 2020. Disponível em: 
https://www.gsma.com/mobileeconomy/latam/. Acesso em: 16 fev. 2021.
IBGE. Instituto Brasileiro de Geografia e Estatística. Números do Censo 2021. 
2021. Disponível em: https://censo2021.ibge.gov.br/sobre/numeros-do-censo.html. 
Acesso em: 16 fev. 2021.
RAFAEL, F.; SILVA, E. Arquitetura para computação móvel. 2. ed. São Paulo: 
Pearson, 2016.
REACT NATIVE. React Native: Learn once, write anywhere. [s.d.]. Disponível em: 
https://reactnative.dev/. Acesso em: 16 fev. 2021.
WORLDOMETER. População Mundial. [s.d.]. Disponível em: https://www.
worldometers.info/br/. Acesso em: 16 fev. 2021.
XAMARIN. Documentação do Xamarin. [s.d.]. Disponível em: https://docs.
microsoft.com/pt-br/xamarin/. Acesso em: 12 fev. 2021.
22
Usabilidade no desenvolvimento 
de aplicativo multiplataforma
Autoria: Ariel da Silva Dias
Leitura crítica: Eduardo Eiji Ono
Objetivos
• Compreender o conceito de aplicativo 
multiplataforma web.
• Compreender o conceito de usabilidade e seu papel 
no desenvolvimento de aplicativos mobile.
• Estabelecer critérios para o desenvolvimento de um 
aplicativo que possua usabilidade.
23
1. Usabilidadeno desenvolvimento 
multiplataforma web
Um aplicativo móvel pode ser nativo, ou seja, desenvolvido para uma 
plataforma específica, como iOS ou Android, e multiplataforma, ou seja, 
basta apenas desenvolver um único aplicativo e ele poderá ser instalado 
e executado em qualquer sistema operacional, independentemente da 
plataforma.
Dentro dos aplicativos multiplataformas, temos uma ramificação, que 
são os aplicativos web, os quais são instalados no smartphone, porém 
toda a sua lógica foi desenvolvida com características web. Eles ficam 
armazenados em um servidor e toda a comunicação ocorre como se o 
aplicativo estivesse localizado localmente.
Neste Tema, estudaremos o conceito de aplicativos multiplataforma 
web, bem como algumas técnicas de usabilidade que podem ser 
utilizadas no processo de desenvolvimento desse tipo de aplicativo. 
Veremos também que, para que possamos implementar aplicativos 
multiplataforma, sejam eles web ou não, devemos seguir algumas 
regras, as chamadas heurísticas de usabilidade.
Bons estudos!
1.1 Aplicativos multiplataforma web
Vamos tratar primeiramente sobre o conceito de página web ou site. 
Quando dizemos que vamos acessar uma página web (ou site web), 
significa que acessaremos um grupo de páginas da web que estão 
interligadas globalmente e acessíveis por meio de um nome único 
(domínio). Um site é hospedado em um servidor (ou vários servidores) 
web e pode ser acessado utilizando um cliente, que no caso é o 
navegador web, de modo a atender a uma infinidade de propósitos.
24
Já um aplicativo web é um programa de software que pode ser 
executado em um navegador web, permitindo assim a troca 
de mensagens e de dados entre cliente e servidor; logo, ele é 
multiplataforma. Tecnicamente, um aplicativo web pode existir apenas 
do lado cliente, mas geralmente não é esse o caso.
Para os lados cliente e servidor, temos dois conceitos muito importantes 
e que devem receber uma atenção especial: trata-se do front-end e do 
back-end, respectivamente, lado do cliente e lado do servidor. O front-
end pode ser considerado como o volante de um carro: o motorista 
interage com o volante direcionando-o para a direita ou para a esquerda 
e o carro responde indo para a direita ou para a esquerda. Trata-se 
então da interface com o usuário, em que ele irá inserir dados, executar 
comandos e visualizar dados.
A outra parte é o back-end, ou lado do servidor. O servidor é um 
computador que é acessado remotamente, podendo estar dentro do 
datacenter da empresa ou em um provedor de serviço em nuvem. Então, 
utilizando a analogia do carro, ele pode ser entendido como as rodas, o 
motor, o tanque ou qualquer outro elemento com o qual o usuário não 
interage diretamente (ex.: o motorista não consegue guiar as rodas com 
o carro em movimento sem interagir com o volante).
Quando o usuário interage com o front-end realizando um cadastro de 
dados, por exemplo, o armazenamento desses dados ocorre no back-
end. Dessa forma, é importante observar que tanto as páginas web 
quanto os aplicativos web precisam de um cliente e um servidor. Uma 
página web está armazenada em um servidor e o cliente que permite ao 
usuário ter acesso a ele é o navegador web, assim como uma aplicação 
web.
Sendo assim, uma página web e uma aplicação web se referem ao 
mesmo conceito? A resposta é não. Você precisa de uma página web 
para mostrar seus produtos, seus serviços, promover a marca de sua 
25
empresa, entre outros recursos. Por outro lado, em uma aplicação web, 
o usuário não apenas consome o conteúdo (como em uma página web), 
mas também é capaz de interagir manipulando dados (inserir conteúdo, 
fazer uma pesquisa específica, entre outros). Logo, a aplicação web é 
qualquer componente de um site (página web) que execute uma função 
(como carrinho de compras, mecanismos de pesquisa, validação do 
pagamento do usuário, entre outros).
Desse modo, diferentemente de uma página web que apresenta 
um conteúdo, um aplicativo web é desenvolvido para que o usuário 
interaja ativamente com esse conteúdo. Por exemplo, o Facebook é um 
aplicativo em que o usuário pode postar fotos, compartilhar mensagens 
e interagir com seus amigos. Por outro lado, páginas web de notícias, 
como G1 ou UOL, entregam um conteúdo, porém o usuário não 
manipula conteúdos como no Facebook.
1.2 Usabilidade no desenvolvimento de aplicativos web
De acordo com Barbosa (2010, p. 28), o conceito de usabilidade é 
definido como “a facilidade com que um usuário pode aprender a 
operar, preparar entradas e interpretar saídas de um sistema ou 
componente”. De modo complementar, a ISO 9241 apresenta, de acordo 
com o mesmo autor, a seguinte definição de usabilidade: “grau em que 
um produto é usado por usuários específicos para atingir objetivos 
específicos com eficácia, eficiência e satisfação em um contexto de uso”.
Vejamos então o significado dos conceitos que compõem a definição de 
usabilidade:
• Eficácia: a precisão e a integridade com que os usuários podem 
atingir objetivos específicos em ambientes específicos; logo, 
consiste em fazer a coisa certa. Por exemplo: vamos considerar 
um aplicativo X que monitora a temperatura de uma caldeira. 
Quando a temperatura ultrapassar 80º C, o sistema deverá enviar 
26
um e-mail para o encarregado para que ele a regule para a faixa 
normal, que é de 70º C a 79º C.
• Eficiência: são os recursos gastos com a precisão e a integridade 
dos objetivos alcançados. Consiste em fazer as coisas de um jeito 
certo. Uma aplicação eficiente, mas sem eficácia, passa a ser 
desnecessária, pois não agregará nada ao usuário, por melhor 
que seja sua execução. A partir do exemplo do aplicativo citado 
anteriormente, que monitora a temperatura da caldeira, vamos 
considerar um aplicativo Y que, em vez de enviar um e-mail ao 
encarregado, consegue por si só verificar a temperatura acima de 
80º C e regulá-la (automaticamente) para a faixa normal entre 70º 
C e 79º C.
• Satisfação: trata-se do conforto e da aceitabilidade do sistema 
de trabalho para seus usuários e outras pessoas afetadas por 
seu uso. No exemplo anterior, ter um aplicativo que monitora a 
temperatura e gerencia a caldeira trará uma alta satisfação (desde 
que seja eficiente e eficaz).
Usabilidade é um termo abrangente que engloba facilidade de uso, 
capacidade de aprendizado, recuperação rápida de erros e suporte 
a vários usuários definidos, de iniciantes a especialistas, de modo a 
contribuir com a experiência do usuário (UX), que se refere a qualquer 
interação que um usuário tenha com um produto ou serviço.
No design UX, são considerados todos os elementos que fazem 
parte dessa experiência, como o que faz com que o usuário se sinta 
confortável utilizando a interface, bem como o quão fácil é para ele 
realizar as tarefas desejadas. Pode ser qualquer coisa, desde a sensação 
de um produto físico em sua mão até a simplicidade e a satisfação 
do processo de comprar algo on-line. Com o design UX, a experiência 
do usuário será mais agradável, fácil e eficiente, contribuindo com a 
usabilidade.
27
1.2.1 Degradação Elegante
Degradação Elegante (Graceful Degradation) e Aprimoramento 
Progressivo (Progressive Enhancement) são alguns dos principais 
conceitos que podem fornecer muitos insights sobre a noção de design 
de aplicativos para web.
O conceito de degradação elegante surgiu da necessidade de se ter 
um design funcional no maior número possível de navegadores e 
plataformas. Designers e desenvolvedores queriam tirar proveito das 
novas tecnologias sem excluir usuários com configurações que não 
tinham suporte; em outras palavras, é um modo de satisfazermos a 
todos (ou ao menos tentar).
Nesse conceito, o objetivo foi criar e oferecer a melhor experiência 
possível, levando em conta cada degradação e garantindo que, apesar 
de quaisquer deficiências, a página web permanecerá funcional.
1.2.2 Aprimoramento progressivo e o conceito de mobile 
first
Do conceito da degradação elegante surgiu uma nova ideia poderosa:o aprimoramento progressivo. Nesse novo conceito, o desenvolvedor 
e o design dão o melhor de si na plataforma móvel, utilizando todos os 
espaços possíveis da tela e o maior poder de processamento. Com isso, 
era fornecida aos usuários uma experiência incrível, que parece ótima 
e funciona perfeitamente. Conforme a necessidade, o site pode ser 
gradualmente “aprimorado” e até mesmo completamente repensado 
para plataformas maiores com menos restrições. Em termos de design 
móvel, isso significava que um site completo e padrão seria reduzido e 
gradualmente removeria conteúdos e recursos à medida que a janela de 
visualização se tornasse menor e o sistema mais simples (sem suporte 
Flash, por exemplo).
28
Ao analisarmos superficialmente, podemos concluir que tanto a 
degradação elegante quanto o aprimoramento progressivo parecem 
equivalentes. Em outras palavras, para ambos, pouco importa por onde 
se começa o desenvolvimento, o importante é que se desenvolva.
Porém, ao nos aprofundarmos na análise, descobrimos que a realidade 
da situação é um pouco mais complexa. Quando começamos com 
a plataforma de desktop (degradação elegante), tendemos a querer 
aproveitar tudo o que ela tem a oferecer. Construímos um produto 
incrível que aproveita a tecnologia disponível da plataforma. Por outro 
lado, percebemos que o produto desenvolvido não se adapta bem aos 
dispositivos móveis. Dessa forma, a ação é “corrigir” aquilo que não está 
apresentado corretamente ou que possui baixo desempenho em um 
dispositivo móvel.
Essa ação pode levar a aplicativos móveis bastante diluídos, o que 
parece mais uma reflexão tardia do que um produto acabado e 
devidamente polido. Isso não acontece com a maioria dos projetos, 
mas a história é provavelmente muito mais comum do que podemos 
acreditar.
Agora, vamos analisar o fluxo de trabalho do aprimoramento 
progressivo, no qual o resultado tende a ser uma história diferente. 
Nele, começaremos com um projeto muito enxuto e apenas com 
aquilo que é essencial. Então, pegamos toda essa energia inicial e a 
colocamos na criação de um produto com uma boa aparência e uma boa 
funcionalidade, apesar das muitas restrições enfrentadas.
Desse modo, já passamos pelo problema de reduzir o conteúdo aos 
seus elementos mais vitais, e agora é hora de trazer esse design para o 
computador (desktop). Assim, em vez de enfrentarmos a decisão do que 
cortar e como diluir o produto, podemos decidir como torná-lo ainda 
mais robusto (inverso do conceito anterior). Aqui então está o princípio 
por trás do conceito de mobile first.
29
Com um ponto de vista mobile first, começamos carregando o essencial 
absoluto nas plataformas mobile. Isso leva a uma experiência mais 
rápida, que evita atrasos desnecessários. Os recursos adicionais são 
carregados estritamente conforme a necessidade para plataformas que 
podem lidar bem com eles.
No conceito mobile first, três atributos são essenciais: o conteúdo, a 
facilidade na navegação e a simplicidade (estes dois últimos estão 
fortemente relacionados à usabilidade). Vejamos cada um deles.
O atributo primeiro o conteúdo é a palavra-chave quando utilizamos o 
conceito de mobile first. Precisamos fornecer aos usuários somente todo 
o conteúdo que procuram – apenas isso –, pois qualquer outra coisa 
pode atrapalhar e distrair sua experiência. Isso significa que precisamos 
dar uma olhada em todo o conteúdo e apresentá-lo em uma hierarquia 
visual, dependendo do quão importante é para o usuário.
A facilidade na navegação pode ser resumida em condensar os 
elementos secundários em botões de navegação fáceis de alcançar. 
Um método testado e comprovado de fazer isso é usar um menu de 
hambúrguer, que é uma maneira reconhecível de o usuário obter acesso 
a elementos secundários. Se ele não encontrar informações diretamente 
na página, é provável que vá ao menu de hambúrguer para encontrar 
o que procura. Porém, existe um ponto negativo: o baixo engajamento, 
pois esse menu diminui a descoberta de conteúdo da página. Por outro 
lado, é inviável oferecer todos os links da página de uma vez.
Por fim, um bom design móvel é simples. Nunca queremos 
sobrecarregar os usuários com elementos estranhos, como anúncios, 
pop-ups e outros conteúdos que não querem ver – ainda mais em 
dispositivos móveis, nos quais existe um limite de espaço visual. 
Desse modo, devemos utilizar esse limite para incluir apenas as coisas 
necessárias na página.
30
A abordagem mobile first leva a um design mais focado no conteúdo e, 
portanto, no usuário. O coração do site é o conteúdo, e é para isso que 
os usuários existem.
1.2.3 Design Responsivo
O conceito de web é usado para descrever uma técnica na qual o design 
de um site é ajustado automaticamente com base no tamanho das 
telas dos usuários. Graças ao design responsivo, eles podem navegar 
facilmente em um site, independentemente do dispositivo que usam. 
A execução é simples e aparentemente funcional: o layout do site é 
modificado com base na largura da tela do dispositivo.
No design responsivo, o design, o conteúdo e a interface do usuário 
do seu site são adaptados para que os visitantes possam visitá-lo 
perfeitamente em qualquer dispositivo e navegador. A palavra-chave 
aqui é flexibilidade.
Sendo assim, podemos utilizar o design responsivo quando estamos 
desenvolvendo com o conceito de mobile first, mas não nos limitaremos 
somente a isso. O conceito de mobile first, além de considerar o design 
responsivo (ou talvez também o adaptativo, que veremos no tópico 
a seguir), levará em consideração também o tipo de conteúdo que 
fornecerá ao usuário.
1.2.4 Design Adaptativo
Quando um site apresenta um design responsivo, significa que ele 
se adaptará à largura das telas dos usuários, permitindo a máxima 
versatilidade. Se um site for adaptável, ele se adaptará às larguras das 
telas de acordo com a especificação de computadores desktop, tablets 
ou smartphones.
31
Todos os dispositivos têm larguras de navegador definidas e 
amplamente conhecidas, permitindo que os desenvolvedores criem 
sites que irão aderir a essas especificações. Em outras palavras, o design 
adaptável, diferentemente do design responsivo, utiliza alguns layouts 
fixos para determinados tamanhos de telas. Em geral, são conhecidas 
seis larguras de telas: 320, 480, 760, 960, 1.200 e 1.600 pixels. Logo, ao 
desenvolver uma aplicação web, o profissional se preocupa com esses 
seis tamanhos, criando especificações para cada um.
Por exemplo, se um navegador tiver 380 pixels de largura:
• No design responsivo, o conteúdo apresentado ocupará os 380 
pixels de largura. O layout e o conteúdo ocuparão todo o espaço 
da tela dinamicamente ao detectar a largura.
• No design adaptativo, o conteúdo apresentado ocupará 320 
pixels de largura, pois não existe uma especificação de como 
organizar o conteúdo e o layout na tela para a largura de 380 
pixels, somente para larguras de 320 ou 480.
Então, no design adaptativo, o layout é fixo, ou seja, o exemplo citado 
das seis larguras de telas possíveis requer que o designer crie até seis 
interfaces individuais. Em outras palavras, é necessário o equivalente 
a seis versões de uma única página da web, enquanto no design 
responsivo o design é flexível, pois se move dinamicamente.
1.3 Heurísticas de Usabilidade
Vimos no início do tópico anterior que a usabilidade é a soma da 
eficácia, da eficiência e da satisfação. Agora veremos as heurísticas que 
permitem, segundo Nielsen (1993), alcançarmos a usabilidade em nosso 
aplicativo.
32
1.3.1 Análise Heurística
A Análise Heurística de usabilidade é uma técnica de avaliação de 
UX para garantir que os produtos sejam utilizáveis e intuitivos. Um 
exemplo muito prático pode ser obtido do processo de eleição no 
Brasil. A cada dois anos, os brasileiros vão até as urnas para eleger seus 
representantes, e nisso existe uma série de questões de usabilidade. 
Vejamos os casos a seguir:
Caso 1: André chegou em sua sessão de votação e está em frente a 
urna.Ele pretende votar no candidato de número 10. Como ele deve 
proceder? Os passos são: digitar o número do candidato (o 1 e o 0) e, em 
seguida, pressionar o botão confirmar, de modo a concluir sua votação.
Caso 2: Bernardo é o próximo da fila, vota logo após André. Ele é 
deficiente visual e votará também no candidato de número 10. Como ele 
poderá votar, se não enxerga as teclas? Aqui houve uma preocupação 
no desenvolvimento das urnas, e os desenvolvedores colocaram relevos 
nos botões para a leitura em braile. Desse modo, se Bernardo souber 
realizar esse tipo de leitura, localizará facilmente as teclas 1 e 0, bem 
como o botão confirmar para concluir o voto.
Caso 3: Após Bernardo sair da sala de votação, chega a vez de Cícero, 
que não é letrado e possui apenas a compreensão de números, e não 
de letras, e consequentemente não reconhece palavras. Como ele deve 
proceder para votar em branco, por exemplo? A urna já possui um botão 
para esse tipo de voto e ele está na cor branca. Ou seja, Cícero pode se 
guiar pelas cores dos botões.
Nesses três casos, as diferenças nas características humanas dos 
eleitores foram consideradas pelo design da interface da urna. Caso 
os desenvolvedores não levassem em consideração a existência de 
eleitores com deficiência visual e sem leitura, Bernardo e Cícero não 
poderiam exercer o direito ao voto.
33
Agora, vamos considerar no Caso 1 a inexistência de rótulos nos botões. 
Não haveria problema, pois, no que diz respeito aos números, André 
iria relacionar o posicionamento destes no teclado da urna com o 
posicionamento dos números em um teclado de telefone. Quanto ao 
processo de concluir a votação, mesmo sem o rótulo ele pressionaria o 
botão verde, pois já sabe, por experiência (não somente pela urna, mas 
por causa de outros sistemas), que o verde é uma cor de confirmação e 
o vermelho uma cor de negação. Essas cores são análogas às cores do 
semáforo, em que vermelho significa “pare” e verde significa siga “em 
frente”.
Vamos pensar então em um caso em que todos os botões fossem na cor 
azul. Exceto no Caso 2, nos demais casos os eleitores teriam dificuldades 
de efetuarem seus votos. Dessa forma, aqui entra um conceito muito 
importante da usabilidade, o affordance.
O affordance são dicas sobre como um objeto deve ser usado, 
normalmente fornecido pelo próprio objeto ou por seu contexto. Por 
exemplo, mesmo que alguém nunca tenha visto uma caneca de café 
antes, seu uso é bastante natural. A alça é modelada para facilitar a 
apreensão e o recipiente tem uma grande abertura na parte superior 
com um espaço vazio dentro.
Uma caneca de café também pode permitir guardar utensílios de escrita 
ou ser usada como um vaso para o cultivo de pequenas plantas, uma 
pá para a construção de castelos de areia ou talvez um recipiente para 
servir suco. Objetos bem projetados, como canecas de café, resistiram 
ao teste do tempo, porque oferecem uma ampla variedade de usos, 
muitos dos quais o designer original nunca pretendeu. Entretanto, uma 
caneca não pode ser utilizada com a mesma finalidade de um prato ou 
um garfo, e isso é elementar.
O mesmo deve ocorrer com a interface do usuário, ou seja, suas 
características indicam o que ele pode fazer com ela. Voltando aos 
34
exemplos da urna eletrônica e do telefone, dissemos que a urna possui 
um teclado igual ao do telefone. Entretanto, devido às características 
de interface do telefone, o usuário sabe que não pode efetuar o seu 
voto com esse dispositivo (uma vez que não há o botão confirmar, por 
exemplo). Do mesmo modo, ele não pode utilizar a urna eletrônica para 
realizar um telefonema, pois ela não possui um fone. Ao mesmo tempo, 
o usuário da urna sabe que, para finalizar ou confirmar seu voto, precisa 
apertar o botão verde, e isso ele sabe devido à experiência de uso de 
outras interfaces.
Desse modo, para garantir que os produtos de software sejam utilizáveis 
e intuitivos, foi estabelecido por Nielsen (1993) o conceito de Avaliação 
Heurística, que são dez diretrizes, popularmente conhecidas como 
Heurísticas de Nielsen, para ajudar indivíduos e equipes a conduzirem a 
avaliação de seu produto. O autor traz um conjunto inicial de heurísticas 
a serem utilizadas em seu método de avaliação, são elas (NIELSEN, 1993, 
2020):
1. Visibilidade do status do sistema: o usuário não pode se sentir 
“perdido”, sem saber o que está acontecendo ou o que fazer. 
Logo, o sistema sempre deve mantê-lo informado sobre o que 
está acontecendo, por meio de feedback apropriado dentro de um 
prazo razoável.
2. Correspondência entre o sistema e o mundo real: vamos supor 
que o usuário tentou acessar um aplicativo e recebeu a seguinte 
resposta: “Bad Gateway – The server encountered a temporary error”. 
Para começar, está em outro idioma, o que já é um problema, e, 
além disso, ele pode não entender o que são os termos gateway 
e server. Com isso temos a segunda heurística, que diz que o 
design da aplicação deve falar a língua do usuário. Desse modo, 
ao desenvolver o layout, o designer deve utilizar palavras, frases e 
conceitos que pareçam familiares ao usuário.
3. Controle e liberdade do usuário: este é muito comum. Quantas 
vezes tivemos que desfazer alguma ação ao digitar um texto no 
35
Word, ou pular anúncios em um vídeo do YouTube? Por outro 
lado, quantas vezes já nos irritamos por causa de anúncios que 
não conseguimos fechar ou pular? Somos criaturas que aprendem 
cometendo erros, logo precisamos de uma “saída de emergência”, 
um gatilho que nos permita desfazer ou refazer uma determinada 
ação realizada erroneamente.
4. Consistência e padrões: todo mundo já deve ter visto algum 
ícone de polegar para cima em algum lugar. Esse ícone é sinônimo 
de like ou “curtir” em algumas redes sociais. Por padrão, toda vez 
que o vemos, saberemos nossa ação. Os usuários não devem 
ter dúvidas sobre palavras, ícones, situações ou ações que, em 
páginas diferentes, significam coisas diferentes. Assim, devemos 
seguir as convenções da plataforma. Por exemplo, se pela 
experiência de navegação em aplicativos mobile um botão verde 
significa algo positivo e um botão vermelho significa algo negativo, 
não faz sentido ao usuário encontrar um botão amarelo ou laranja 
para substituir suas funções, pois isso poderia confundi-lo durante 
a navegação. É importante lembrar que os usuários já viram 
muitos outros dispositivos antes.
5. Prevenção de erros: anteriormente apresentamos uma 
mensagem de erro que não era de tão fácil entendimento. No 
caso de erros, o melhor é evitá-los ou indicar ao usuário como 
evitar. Por exemplo, alguns sistemas de e-mail avisam quando 
se esquece de anexar um arquivo; bem como alguns editores de 
texto, quando fechados, questionam se se deseja salvar o trabalho 
(se ele ainda não foi salvo). Com isso o sistema permite que o 
usuário não cometa um erro.
6. Reconhecimento em vez de recordação: esta heurística se 
relaciona a muitas outras, como a de manter a consistência e 
o padrão. O usuário não deve memorizar o que cada botão faz 
ou o que deve fazer em determinado momento no sistema, ou 
seja, ele precisa ser intuitivo, de modo que, se o usuário olhar 
para a interface, compreenderá o que deve fazer com o mínimo 
36
de dúvidas possível. As instruções de como utilizar os recursos 
do sistema devem estar visíveis, de forma clara e com o menor 
número de texto possível.
7. Flexibilidade e eficiência de uso: todo sistema será utilizado 
por usuários iniciantes e experientes; logo, deve ser criado 
para os dois. Alguns atalhos podem agilizar o trabalho, sendo 
importante também que o usuário possa personalizar o sistema, 
principalmente escolhendo para que, na interface inicial, estejam 
os principais recursos utilizados.
8. Design estético e minimalista: todo mundo já acessou o Google 
pelo menos uma vez na vida. Tente recordar como é a página 
inicial: o logo da empresa e uma caixa de texto, nada mais! Esse é 
um exemplo de design minimalista com ótima tecnologia, cabendo 
aquio conceito de que menos é mais.
9. Ajudar o usuário a reconhecer, diagnosticar e se recuperar de 
erros: as mensagens de erro devem ser escritas em linguagem 
simples, que seja entendível pelo usuário. Além disso, deve 
indicar onde está o problema, de modo que ele possa solicitar 
um suporte. Vejamos um caso: o usuário está tentando cadastrar 
o número de telefone em um aplicativo e o campo apresenta 
apenas oito espaços. Entretanto, ele só tem celular, cujo número, 
em sua região, contém nove dígitos. Como proceder? O aplicativo 
deve informar que, infelizmente, não aceita números de telefone 
com nove dígitos e que, nesse caso, pode-se colocar apenas os 
oito dígitos, excluindo o prefixo 9. Esse tipo de informação precisa 
ser claro, afinal o usuário não pode ficar preso em um erro por 
tempo indeterminado.
10. Documentação: mesmo que o sistema seja autoexplicativo e 
atenda a todas as 9 heurísticas citadas anteriormente, tudo o 
que ele faz, seus recursos e sua funcionalidades necessitam ser 
documentados. Com isso, sempre que o usuário precisar de uma 
ajuda ou tiver dúvidas sobre o comportamento do sistema, saberá 
a quem recorrer.
37
Começamos os estudos deste Tema vendo o conceito sobre aplicativos 
web. Em seguida, estudamos o conceito de usabilidade, que nada mais 
é do que o resultado da soma entre eficiência, eficácia e satisfação. Por 
fim, vimos que, para que o aplicativo seja utilizável e tenha usabilidade, 
devemos seguir as heurísticas propostas por Nielsen, as quais são 
um excelente guia para desenvolver nosso aplicativo e atender às 
necessidades dos usuários.
Referências
BARBOSA, S.; SILVA, B. Interação humano-computador. Rio de Janeiro: Elsevier, 
2010.
NIELSEN, J. The definition of User Experience (UX). 2020. Disponível em: https://
www.nngroup.com/articles/ten-usability-heuristics/. Acesso em: 5 mar. 2021.
NIELSEN, J. Usability Engineering. New York, NY: Academic Press, 1993.
NORMAN, D.; NIELSEN, J. The definition of User Experience (UX). [s.d.]. Disponível 
em: https://www.nngroup.com/articles/definition-user-experience/. Acesso em: 5 
mar. 2021.
38
Desenvolvimento mobile com 
Flutter
Autoria: Ariel da Silva Dias
Leitura crítica: Eduardo Eiji Ono
Objetivos
• Compreender o conceito de Flutter e sua utilização 
no desenvolvimento de aplicativos multiplataforma.
• Conhecer o conceito de widgets e como estes são 
utilizados no desenvolvimento de aplicativos com 
Flutter.
• Aplicar o conhecimento adquirido no 
desenvolvimento de aplicações mobile 
multiplataforma.
39
1. Flutter
O Flutter é um SDK (Software Development Kit) ou simplesmente um kit 
de ferramentas de desenvolvimento de aplicativos multiplataforma (iOS 
e Android), além de aplicativos web e desktop, tudo utilizando apenas 
um código-fonte escrito em linguagem de programação Dart (FLUTTER, 
[s.d.]). Ele oferece aos desenvolvedores um modo prático de construir 
os aplicativos utilizando widgets. Além da facilidade no desenvolvimento, 
também temos a facilidade de implantação, que pode ser executada em 
um navegador web em tempo real (FLUTTER, [s.d.]).
A primeira coisa para que os desenvolvedores olham (ou deveriam 
olhar) ao aprender uma nova tecnologia é a sua documentação, ou seja, 
ela desempenha um grande papel na produtividade do desenvolvedor. 
Até mesmo os usuários mais experientes precisam usá-la quando 
estiverem trabalhando com uma nova API. Assim, durante nossos 
estudos, ela será referenciada várias vezes, a fim de entendermos os 
principais conceitos e técnicas corretas de desenvolvimento.
Quando se trata de documentação, a do Flutter é muito fácil de usar, 
pois todos os conceitos e recursos importantes estão visíveis na barra 
lateral. Se quisermos nos aprofundar, eles também têm a documentação 
da API. Por exemplo, todas as classes disponíveis para a construção de 
widgets com a biblioteca de materiais estão bem documentadas, com 
informações sobre o que o construtor espera e as propriedades que 
se pode transmitir. O melhor de tudo é que a pesquisa tem sugestão 
automática, o que é muito útil se não temos certeza do que estamos 
procurando.
A documentação não serve apenas para descrever as diferentes 
APIs, funcionalidades, componentes e outros recursos disponíveis 
no framework (nesse caso, framework é uma estrutura com classes e 
funções predefinidas para o desenvolvimento do aplicativo mobile). 
Ela também está disponível para tornar mais fácil o aprendizado de 
40
iniciantes e o entendimento de algumas novas classes por parte dos 
usuários mais avançados.
1.1 Instalando e configurando o Flutter
O Flutter é uma ferramenta simples de instalar e configurar. Podemos 
acessar seu site oficial e realizar o download para os sistemas 
operacionais Windows, macOS, Linux ou Chrome OS.
O usuário deve realizar o download de um arquivo compactado e, em 
seguida, deve extrair esse arquivo preferencialmente na raiz do seu 
sistema operacional (C:\ no Windows, por exemplo) ou em um local que 
não exija credenciais de administrador (por exemplo, em “Arquivos de 
Programas”, é necessário ser usuário administrador). Então deve extrair 
o Flutter em C:\src.
Caso o usuário seja novo no desenvolvimento de aplicações, é 
recomendado que, após instalar o Flutter, também realize a instalação 
de algum ambiente de desenvolvimento. Para essa leitura, dois 
ambientes serão utilizados: o Android Studio e o Visual Studio Code.
A vantagem de utilizar um ambiente de desenvolvimento é que temos 
toda a organização do código, bem como o auxílio de ferramentas, como 
o autocompletar. Porém, caso isso não seja a prioridade, é possível 
desenvolver a aplicação em qualquer editor de texto e combinar o 
processo de compilação por linha de comando.
1.1.1 Configurando o Android Studio
O Android Studio é um ambiente de desenvolvimento integrado 
(IDE) completo, repleto de recursos que podem facilitar a vida do 
desenvolvedor. É possível fazer o download dele diretamente no site 
oficial da Google e realizar a instalação. Em seguida, deve-se realizar 
41
a instalação do plugin do Flutter no Android Studio, e, para isso, são 
necessários os seguintes passos:
1. Abrir o Android Studio.
2. Ir em configurações e, em seguida, clicar em plugins (Figura 1a).
3. O marketplace abrirá para a instalação do plugin; pesquisar por 
Flutter e, em seguida, clicar em instalar (Figura 1b).
Figura 1 – Instalando plugin no Android Studio
Fonte: captura de tela do Android Studio.
Com esses passos, é possível instalar o plugin do Flutter no Android 
Studio e já utilizá-lo no desenvolvimento dos aplicativos.
42
1.1.2 Configurando o Visual Studio Code
O Visual Studio Code é outra ferramenta muito poderosa e, ao contrário 
do Android Studio, trata-se de um ambiente de desenvolvimento mais 
leve e simples de utilizar.
Antes de tudo, é necessário realizar o download da ferramenta no site 
oficial da Microsoft e, em seguida, a instalação. Após instalado, vamos 
configurá-la para utilizar o Flutter (Figura 2).
Figura 2 – Instalando o plugin no Visual Studio Code
Fonte: captura de tela do Visual Studio Code.
Pela figura, devemos inicialmente clicar no ícone de extensão e, em 
seguida, pesquisar o plugin Flutter. Por fim, para efetivar a instalação, é 
só clicar em install. É um processo bem mais simples e logo já é possível 
realizar a primeira aplicação.
1.2 Desenvolvendo aplicações com Flutter
O Flutter usa a linguagem de programação Dart, uma tecnologia que 
não é tão popular quanto outras linguagens, como Java ou C#. Desse 
modo, a curva de aprendizado (a taxa com a qual os desenvolvedores 
43
podem aprender uma nova tecnologia) é baixa. Quem já trabalhou com 
JavaScript antes, verá que a sintaxe do Dart é bastante familiar.
1.2.1 Widgets
De modo a garantir que a curva de aprendizado do Flutter não fosse 
íngreme, a Google desenvolveu o principal conceito e a característica 
do Flutter, que são os Widgets. De acordo com o site oficial e a sua 
documentação: “tudo no Flutter é Widgets” (FLUTTER, [s.d.]).Os widgets são componentes da interface do usuário e descrevem como 
será a aparência de sua aplicação. Trata-se de elementos de layout 
pré-construídos para que os desenvolvedores não necessitem perder 
horas pensando em qual base de código utilizar para desenvolver um 
componente de interface.
Entre os tipos básicos temos: Row, Column e Grade, que são widgets de 
layout responsáveis por criar, respectivamente, linhas, colunas e grades. 
Não é possível vê-los na tela, mas eles ajudam a organizar outros que 
são visíveis, como Text, Checkbox, Radio, entre outros que podemos 
encontrar na documentação (FLUTTER, [s.d.]).
Cabe mencionar aqui que no Flutter existem dois tipos de widgets com 
os quais podemos trabalhar: sem estado e com estado.
• Widgets sem estado: não gerenciam seu próprio estado interno. 
Por exemplo, um widget de botão não precisa rastrear nada 
internamente;
• Widgets com estado: gerenciam seu próprio estado interno. Por 
exemplo, um widget de contador precisa rastrear sua contagem 
atual, porque precisa dela para a exibição.
44
1.2.2 Primeiro Código
Para criarmos nosso primeiro aplicativo, é necessário executar o 
comando a seguir na linha de comandos (no Windows, prompt de 
comandos ou CMD):
c:\> Flutter create primeiroprojeto
Assim que o projeto for criado, devemos abri-lo no Visual Studio Code. 
Podemos notar que existem vários arquivos, mas nosso foco é o arquivo 
main.dart, que está localizado dentro da pasta lib. Ao abri-lo, veremos 
que já há um código criado pelo próprio Flutter, o qual é complicado e 
pode acabar assustando o usuário. Então, devemos apagar todo esse 
código e usar o código a seguir, que foi adaptado da documentação do 
Flutter (FLUTTER, [s.d.]):
import ‘package:flutter/material.dart’;
void main() => runApp(PrimeiroProjeto());
class PrimeiroProjeto extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Meu Primeiro Aplicativo’,
home: Scaffold(
appBar: AppBar(
title: Text(‘Meu Primeiro Aplicativo’),
45
),
body: Center(
child: Text(‘Olá Flutter!!!’),
),
),
);
}
}
Vamos entender melhor esse código. Primeiramente, importamos as 
bibliotecas de materiais do Flutter, o que nos permitirá usar widgets 
que implementam o material design (conjunto de diretrizes criadas 
pela Google para o desenvolvimento de interfaces de usuário), como 
o MaterialApp, Scaffold e AppBar (todos os que estamos utilizando 
anteriormente).
A seguir no código, implementamos o método main, o qual tem o 
mesmo comportamento de outras linguagens, como C, Java ou C#; trata-
se do ponto de entrada de todo programa. Logo, se queremos que uma 
classe seja o ponto inicial ou que o conteúdo seja renderizado na tela, 
precisamos invocá-la:
void main() => runApp(PrimeiroProjeto());
Estamos definindo aqui a função utilizando o sinal =>. Trata-se de uma 
técnica concisa de definir métodos quando eles possuem apenas uma 
linha de código dentro deles; é como se estivéssemos implementado o 
método main a seguir:
46
void main(){
runApp(PrimeiroProjeto());
}
Mais adiante no código, criamos um widget sem estado, pois estamos 
apenas renderizando algo na tela. O que o caracteriza é a herança 
(extends) da classe StatelessWidget. Ao herdarmos dessa classe, estamos 
reescrevendo o método build (por isso o @override antes do método), o 
que retornará o conteúdo real do widget.
Internamente na função build, estamos utilizando o widget MaterialApp, 
que aqui é utilizado como um pacote ou embrulho que será retornado 
para quem o invocou. Ele nos permite implementar o material design 
para os widgets que apresentaremos na tela, bem como os filhos desses 
widgets.
O atributo home permite definir o widget que será renderizado na home. 
Para que isso ocorra, usamos no código o widget Scaffold, que nos 
fornece a estrutura para nosso layout, como o AppBar (cabeçalho do 
nosso aplicativo) e o body (conteúdo principal do nosso aplicativo).
Agora que conhecemos o código, vamos executar e ver o resultado. O 
grande ponto positivo do Flutter é podermos editar o código e ver o 
resultado acontecer em tempo real. Para executá-lo, primeiramente é 
necessário escolher em qual dispositivo vamos implementá-lo. Vejamos 
a Figura 3.
Figura 3 – Escolhendo o dispositivo para executar o aplicativo
Fonte: captura de tela do Visual Studio Code.
47
Na Figura 3, temos a imagem da barra azul do Visual Studio Code, a 
qual está localizada na parte inferior e traz algumas informações, como 
a linha atual de edição, o espaçamento, a linguagem de programação 
utilizada e o dispositivo em que será executado. Na figura, o dispositivo 
selecionado é o Chrome, ou seja, quando executado, nosso aplicativo 
será apresentado no navegador Chrome.
Então, devemos dar um clique sobre esse item (aqui temos o Chrome, 
mas, caso esteja com outro nome, não tem problema, é só clicar sobre 
ele). Caso o Visual Studio Code esteja configurado para aceitar outros 
dispositivos, todos eles serão listados. Então, é só escolher um deles 
(recomendamos usar algum navegador web, pois eles são mais rápidos).
Após escolher, devemos clicar, na barra de menus, em RUN e, em 
seguida, escolher a opção START DEBUGGING, ou pressionar F5 no 
teclado. O servidor entrará em execução e o conteúdo do aplicativo será 
apresentado no navegador (Figura 4).
Ao executar o aplicativo, um servidor virtual cria automaticamente uma 
porta para acessarmos. Na figura, a URL na barra de endereços aponta 
para localhost ou 127.0.0.1, que é a máquina local, bem como para a 
porta em que está executando a nossa aplicação, que é, nesse caso, a de 
número 65503.
Com esse endereço em mãos, é possível abrir o aplicativo em qualquer 
navegador no computador. No entanto, não temos o acesso externo, 
pois o servidor está sendo executado localmente.
48
Figura 4 – O aplicativo em execução
Fonte: elaborada pelo autor.
O conteúdo apresentado na Figura 4 não se parece muito com um 
aplicativo mobile, apesar de ser. Então podemos modificar a visualização 
no navegador, e, para isso, devemos pressionar a tecla F12 no teclado 
(Figura 5).
Figura 5 – Modificando a exibição do aplicativo no navegador
Fonte: elaborada pelo autor.
49
Na figura, temos quatro setas que indicam os campos em que devemos 
clicar após pressionar o F12 no teclado:
1. Ao clicar neste ícone, mudamos a visualização e podemos escolher 
outros tamanhos de tela para serem apresentados.
2. Clicando neste menu, serão apresentadas algumas sugestões de 
tamanho de tela, com base em dispositivos mobile reais.
3. Aqui, devemos escolher um dos dispositivos.
4. Este elemento é opcional. Ao clicar nele, redefinimos a 
visualização, saindo de retrato e passando para o modo paisagem.
5. Ao configurar a visualização, o aplicativo terá uma aparência mais 
atraente do que anteriormente.
Agora vamos experimentar retornar ao Visual Studio Code e modificar 
o texto “Olá Flutter!” com o nosso nome. Em seguida, devemos salvar o 
projeto e retornar para o navegador web. É importante observar aqui 
que a alteração do texto no aplicativo ocorre automaticamente.
Vamos realizar então mais uma alteração, adicionando uma cor para 
nossa fonte e alterando seu tamanho. O trecho de código a seguir é 
somente do widget text do código apresentado anteriormente.
Text(
“Hello, Flutter!”,
style: TextStyle(
fontSize: 30.0, color: Colors.blue,
),
),
50
Depois de realizar essa alteração, é só ver como ficou o nosso aplicativo 
agora!
1.2.3 Criando nosso próprio widget
Podemos também construir nosso próprio widget. Antes, no mesmo 
projeto criado anteriormente, devemos substituir o código atual por este 
a seguir:
import ‘package:flutter/material.dart’;
void main() {
runApp(MeuAPP());
}
class MeuAPP extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(“Chamando widgets”),
),
body: minhaWidgetA(),
),
51
);
}
}
Temos nesse segundo código muitas semelhançascom o primeiro. 
Entretanto, na linha do body (em negrito e vermelho), não estamos mais 
declarando os widgets diretamente, mas estamos criando nosso próprio 
widget e chamando-o. Isso torna o código mais limpo e fácil de dar 
manutenção.
Porém, onde está minhaWidgetA()? Ainda não implementamos; vejamos o 
trecho de código dele a seguir. Este trecho de código deve ser colocado 
ao final do código apresentado anteriormente.
Widget minhaWidgetA() {
return Text(
“Dizendo olá novamente...”,
style: TextStyle(
fontSize: 30.0
),
);
}
É possível notar que o código ficará mais simples. Podemos criar outro 
widget e chamá-lo de minhaWidgetB. Vejamos o código dele a seguir para 
colocar no projeto. Em seguida, é só substituir a chamada em body.
52
Widget minhaWidgetB() {
return TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: ‘Entre com um texto...’
),
);}
Esse segundo widget cria um campo para a entrada de texto por parte do 
usuário.
Com isso encerramos o desenvolvimento dos nossos primeiros 
aplicativos. Neste Tema pudemos compreender o conceito de Flutter e o 
que são widgets, os componentes essenciais de toda aplicação. Também 
criamos a nossa primeira aplicação, bem como realizamos sua execução, 
realizando alterações em tempo real. Para sermos fluentes no processo 
de desenvolvimento de aplicativos, é muito importante conhecermos a 
documentação e praticarmos os códigos regularmente.
Referências
FLUTTER. Docs – Development. [s.d.]. Disponível em: https://Flutter.io/docs/
development/. Acesso em: 10 mar. 2021.
53
Desenvolvimento mobile com 
Xamarin
Autoria: Ariel da Silva Dias
Leitura crítica: Eduardo Eiji Ono
Objetivos
• Compreender os conceitos do Xamarin e sua 
utilização no desenvolvimento de aplicativos 
multiplataforma.
• Compreender o conceito de desenvolvimento 
de layout e de lógica de negócios utilizados no 
desenvolvimento de aplicações utilizando Xamarin.
• Aplicar o conhecimento adquirido no 
desenvolvimento de aplicações mobile 
multiplataforma.
54
1. Xamarin
Entre as ferramentas de aplicativos multiplataformas, uma das 
mais populares é o Xamarin. Com ele, é possível criar aplicativos 
multiplataforma baseados em .NET (lê-se dot net) e C#. Desse modo, 
não é necessário desenvolver uma aplicação para Android utilizando o 
Java e outra aplicação para iOS utilizando Objective-C ou Swift. Tudo o 
que podemos fazer com essas linguagens e plataformas pode ser feito 
com o Xamarin em C#.
Todo os recursos e métodos que o Xamarin oferece são baseadas em 
bibliotecas de ligação que projetam as APIs nativas em seus equivalentes 
.NET. O desenvolvimento de aplicativos Xamarin pode ser feito usando 
Visual Studio para Windows, Xamarin Studio ou Visual Studio para 
macOS para projetar, desenvolver e depurar aplicativos móveis nativos 
usando suas ferramentas e código C# existentes.
A Figura 1 apresenta duas abordagens possíveis para o desenvolvimento 
de aplicativos utilizando o Xamarin. Na Figura 1(a), temos a abordagem 
de interface do usuário separada e, na Figura 1(b), é possível observar a 
abordagem de interface do usuário compartilhada.
55
Figura 1 – Arquiteturas de desenvolvimento mobile multiplataforma 
com Xamarin
Fonte: elaborada pelo autor.
Em uma abordagem de interface do usuário (UI – User Interface) 
separada, como em 1(a), a lógica de negócios do aplicativo é 
compartilhada enquanto criamos uma UI separada para todas 
as plataformas de destino. Com esse tipo de desenvolvimento, 
considerando Xamarin.iOS e Xamarin.Android, podemos compartilhar 
a base de código fonte em C#. Desde modo, a lógica de negócios é 
compartilhada entre plataformas e a UI é separada para todas as 
plataformas.
Para Android, isso significa arquivos AXML (Extensible Application 
Markup Language), que contêm algum tipo de dialeto XML; já para iOS é 
necessário usar storyboards, que também são arquivos XML subjacentes. 
Nesse caso, tecnologias nativas são usadas para criar as UI. Por exemplo, 
o código a seguir representa um arquivo de layout Android que pode ser 
aplicado em um projeto Xamarin tradicional ou em um projeto Android 
nativo, sem nenhuma alteração.
56
<?xml version=”1.0” encoding=”utf-8”?>
<RelativeLayout xmlns:android=http://schemas.android.
com/apk/res/android
xmlns:app=http://schemas.android.com/apk/res-auto
xmlns:tools=http://schemas.android.com/tools
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
tools:showIn=”@layout/activity_main”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Olá Mundo!” />
</RelativeLayout>
O código apresentado é o layout para aplicativo da plataforma Android. 
Para que o mesmo aplicativo tenha aparência ou conteúdo semelhante 
em iOS, será necessário desenvolver o layout para a plataforma iOS. 
Entretanto, a lógica de negócio, ou seja, a programação em C#, será a 
mesma tanto para iOS quanto para Android.
Para superar esse último obstáculo no verdadeiro desenvolvimento 
de plataforma cruzada, o Xamarin.Forms foi criado e é representado 
em 1(b). Na abordagem de UI compartilhada apresentada em 1(b), 
57
toda a sua interface de usuário e lógica de negócios é compartilhada 
em todas as plataformas. No entanto, o conjunto de controle da UI é 
completamente diferente, porque, se formos analisar os bastidores 
dessa arquitetura, será possível ver que temos apenas uma camada 
de abstração no topo da abordagem tradicional Xamarin. Isso significa 
que os controles individuais são renderizados de maneira diferente em 
plataformas diferentes: cada controle Xamarin.Forms mapeia para um 
controle nativo específico em cada plataforma.
A seguir é apresentado um código de layout de UI muito semelhante ao 
código anterior, mas, dessa vez, ele é baseado em Xamarin.Forms.
<?xml version=”1.0” encoding=”utf-8” ?>
<ContentPage xmlns=”http://xamarin.com/schemas/2014/
forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
x:Class=”App1.MainPage”>
<StackLayout>
<Label Text=”Olá Mundo”/>
</StackLayout>
</ContentPage>
A diferença entre o primeiro código e o segundo é que, com o Xamarin.
Forms, é possível definir a UI utilizando código C# ou XAML de 
maneira abstrata. Por exemplo, podemos definir um objeto Button e as 
bibliotecas Xamarin.Forms serão responsáveis por traduzir isso para 
seu equivalente nativo em Android ou iOS. Desse modo, é possível 
desenvolver as interfaces entre plataformas diferentes, mas essa mesma 
58
interface ainda parecerá nativa em cada plataforma (diferentemente do 
que pode ocorrer na arquitetura representada pela Figura 1a).
1.1 Instalando o Visual Studio e o Xamarin
Agora que compreendemos o que é o Xamarin e suas diferentes 
arquiteturas de desenvolvimento, chegou a hora de instalá-lo e 
configurá-lo. A primeira ação é acessar o site oficial do Microsoft Visual 
Studio e realizar o download do Visual Studio com o Xamarin, conforme 
apresentado na Figura 2.
Figura 2 – Processo de download do Visual Studio e Xamarin
Fonte: captura de tela de https://visualstudio.microsoft.com/pt-br/downloads/. Acesso em: 
25 mar. 2021.
Pela Figura 2 que é possível definir o tipo de download, a partir da 
indicação da finalidade do desenvolvimento (em nosso caso, será 
dispositivo móvel), da linguagem (aqui foi selecionado .NET) e do 
sistema operacional em que será instalado o Visual Studio (nesse caso, o 
Windows).
Com isso, o site nos retorna três possibilidades de download. Para 
nossas atividades que concentram unicamente o estudo da ferramenta, 
podemos fazer download da versão Community, uma versão gratuita 
59
para estudantes. As versões Professional e Enterprise são voltadas para 
equipes de tamanho pequeno e grande, além de ser paga.
Após efetuar o download, é só executar o aplicativo. Ele trará diversas 
ferramentas da Microsoft para serem instaladas, então devemos 
selecionar as duas opções conforme a Figura 3. A primeira é um 
conjunto de ferramentaspara o desenvolvimento desktop com .NET, e 
a segunda é a mais importante para nós, pois trata-se de ferramentas 
para o desenvolvimento mobile com .NET.
Do lado direito, devemos selecionar as duas caixas, conforme a figura.
Figura 3 – Instalação do Xamarin
Fonte: captura de tela do processo de instalação do Visual Studio.
Após terminar a instalação, o ambiente já estará pronto desenvolver 
utilizando o Visual Studio com o Xamarin.
Aqui cabe uma importante observação, caso o usuário já tenha o Visual 
Studio instalado, é possível fazer o download do instalador conforme 
orientado anteriormente e proceder com o mesmo passo de instalação, 
indicando apenas que deseja instalar o Xamarin. Isso atualizará a sua 
versão do Visual Studio adicionando o Xamarin.
60
1.2 Construindo a primeira aplicação com o Visual Studio 
e o Xamarin
Agora é possível criar uma primeira aplicação com o Visual Studio. Para 
isso, devemos seguir os passos:
1. Abrir o Visual Studio.
2. Escolher a opção: Criar um projeto.
3. O Visual Studio dará várias possibilidades. Na caixa de pesquisa, 
pesquisar por: Xamarin.
4. Entre as opções, temos o desenvolvimento para Android e o 
desenvolvimento utilizando o Xamarin.forms. Escolher a opção 
Mobile App (Xamarin.Forms).
5. Dar um nome para o aplicativo.
6. O Visual Studio dará algumas opções de aplicativos:
a. Flyout: modelo de aplicativo com menu lateral.
b. Tabbed: modelo de aplicativo com navegação por abas.
c. Blank: aplicativo em branco, com um código básico para 
desenvolvimento.
7. Optar por Blank, por ser um modelo mais prático para 
trabalharmos, uma vez que vem com um código básico, com o 
mínimo necessário para o desenvolvimento.
8. Haverá duas caixas, marcar Android e iOS, se se desejar 
desenvolver para ambas as plataformas.
9. Clicar em Create.
O primeiro aplicativo será criado com uma árvore de arquivos iniciais, 
conforme Figura 4. A partir desses arquivos, podemos trabalhar no 
desenvolvimento de nosso aplicativo.
61
Figura 4 – Estrutura inicial de arquivos do aplicativo
Fonte: captura de tela do Visual Studio.
Nessa árvore de arquivos, temos três pacotes principais:
• PrimeroAPP: este é o pacote da aplicação multiplataforma. Por 
exemplo, se um componente de botão do Xamarin.Forms for 
desenvolvido nele, será mapeado para um Button no Android, um 
UIButton no iOS e um Button no Windows Phone.
• PrimeiroAPP.Android: este é um pacote para desenvolver 
uma UI separada por plataforma. Nesse caso, se um botão for 
desenvolvido nele, será mapeado apenas para um Button no 
Android.
• PrimeiroAPP.iOS: este é um pacote semelhante ao anterior. Porém, 
se um botão for desenvolvido nele, será mapeado apenas para um 
UIButton no iOS.
Aqui cabe uma consideração importante. Para desenvolver aplicativos 
nativos para iOS, Android e Windows, é preciso ter o Windows e o 
Mac. Usando o Visual Studio em uma máquina com Windows, é preciso 
fazer uma conexão com a máquina Mac para criar um aplicativo para 
iOS. Em caso de dúvidas de como isso deve ser feito, é só consultar a 
documentação oficial em Microsoft (2018).
62
1.2.1 Arquivo XAML e CS
Vamos utilizar como referência para este estudo o arquivo MainPage.
xaml (Figura 5). Este é um arquivo no padrão XML em que criaremos o 
layout da aplicação e colocaremos todos os componentes, como botões, 
caixas de texto, textos, entre outros que compõem a interface do 
usuário.
Figura 5 – Código do arquivo de interface do usuário
Fonte: captura de tela do Visual Studio.
Na Figura 5, temos um componente chamado Frame, que ficará na 
parte superior da tela, cujo background (elemento em segundo plano) 
será uma cor próxima ao azul. Nele, teremos uma mensagem de texto 
dando boas-vindas e, abaixo dele, será apresentada uma mensagem 
de texto com um determinado tipo de fonte predefinido, chamado Title. 
Nas linhas desse código, temos então o desenvolvimento de um layout 
inicial.
Existe uma característica muito marcante no desenvolvimento mobile 
que é a separação do layout e da lógica da aplicação. Tudo o que é 
interface do usuário será descrito no arquivo com extensão xaml. 
Porém, os componentes da interface por si só não possuem ação, ou 
seja, não são capazes de fazer nada.
63
Em outras palavras, um botão na interface do usuário não faz nada 
se não tiver uma lógica de programação por trás. Para adicionarmos 
uma ação a um botão, por exemplo, ou para propor a interatividade na 
aplicação, utilizaremos a classe com extensão xaml.cs (Figura 6). Trata-se 
de uma classe padrão do C#, em que podemos colocar toda a lógica de 
negócio.
Figura 6 – Código do arquivo lógica da aplicação
Fonte: captura de tela do Visual Studio.
Na Figura 6, temos uma classe principal chamada MainPage, que herda 
da classe ContentPage. A classe ContentPage, por sua vez, possui toda 
a implementação necessária para desenvolvimento de uma aplicação e 
por isso a necessidade de MainPage herdar de ContentPage.
No método construtor Public MainPage, temos o método necessário 
para inicializar todos os componentes da interface do usuário, ou seja, 
inicializar os componentes que foram definidos no arquivo XAML da 
Figura 5. Mas como essa classe MainPage sabe qual arquivo XAML deve 
64
carregar? Simples, na Figura 5, na linha 4, estamos dizendo que esse 
arquivo XAML será processado pela classe MainPage.
Em um aplicativo mobile, não existe apenas uma interface. Em um 
aplicativo de banco, por exemplo, há a tela inicial, a tela de saldo, a tela 
de extrato, a tela de pagamentos, entre outras, e cada uma delas é um 
arquivo XAML diferente. Cada layout diferente, ou seja, cada arquivo 
XAML, precisa (na maioria das vezes) ter uma classe associada a ele.
1.2.2 Controles utilizados no XAML para definir a UI
O Xamarin.Forms possui quatro grupos principais de controles que são 
utilizados para criar a interface do usuário:
• Pages: as páginas são as telas do aplicativo e podem assumir 
diferentes aparências.
• Layouts: são como formatações para as páginas, indicando como 
os componentes (Views) serão apresentados em casa uma delas.
• Views: são os componentes visuais de uma aplicação, também 
chamados de blocos de construção de interface de usuário.
• Cells: são elementos utilizados somente nos componentes ListView 
e TableView, responsáveis, respectivamente, por apresentar uma 
lista e uma tabela na tela. Logo, o elemento Cell representa um 
valor na lista ou um valor na tabela.
Resumidamente, uma página é composta por um ou mais layouts, 
e cada um deles terá um ou mais Views. Por exemplo, na Figura 5 
do arquivo de interface XAML, temos uma página definida, que é 
a ContentPage, na linha 2. A ContentPage é o tipo mais simples de 
uma página, servindo como um contêiner ou local para inserir os 
componentes.
65
Ainda na interface da Figura 5, temos na linha 6 a definição do layout 
chamado StackLayout. Esse é um exemplo de layout que divide a página 
em elementos filhos, podendo cada um deles ser disposto na vertical 
ou horizontal (nunca as duas orientações ao mesmo tempo). Para quem 
desenvolve com AndroidStudio, esse tipo de layout é semelhante ao 
LinearLayout.
Desse modo, quando o conteúdo do aplicativo for apresentado na tela, 
veremos um componente em cima do outro, pois a orientação é vertical 
e todas as Views (texto e outros elementos) ficarão umas sobre as outras.
1.2.3 Executando a primeira aplicação
Com o Xamarin, podemos executar a aplicação de duas maneiras 
diferentes:
• Utilizando um dispositivo real: esta é a melhor opção, pois é 
possível testar o aplicativo diretamente em um dispositivo real. 
Por exemplo, podemos conectar um smartphone Android por 
cabo no computador e realizar a integração. Assim, toda vez que 
executarmos nosso aplicativo, ele será instalado no smartphone 
para teste.
• Utilizando um dispositivo virtual: esta é uma opção não tão 
boa, pois exige muito do desempenho computacional. Aqui 
realizaremos a instalação e a configuração de uma máquina virtual. 
No caso do Android, será configuradaum Android Virtual Device 
(AVD), que é como se fosse um smartphone Android mesmo, mas 
utilizando a memória e o processador do computador. Por isso é 
uma opção não tão boa, pois pode prejudicar o desempenho tanto 
da aplicação quanto do dispositivo hospedeiro.
Neste exemplo, vamos executar o Xamarin diretamente em um 
dispositivo real. Para isso, vamos conectar o dispositivo Android ou, 
66
caso um iOS, de acordo com as orientações da Microsoft (2018). Após 
conectar o dispositivo, o nome dele aparecerá na barra de ferramentas 
do Visual Studio (Figura 7).
Figura 7 – Selecionando o dispositivo real para execução
Fonte: captura de tela do Visual Studio.
Na Figura 7, é apresentado o nome do aplicativo real. Nesse exemplo, 
foi utilizado um dispositivo Xiaomi Redmi Note 8. Assim, se o dispositivo 
usado for outro, nesse local será apresentado o nome ou a marca dele. 
Para executar, é só pressionar o botão verde de play que está antes do 
nome do dispositivo (Figura 8).
Figura 8 – Primeiro aplicativo em execução
Fonte: captura de tela do Visual Studio.
67
Na Figura 8, o layout apresentado é o mesmo definido no arquivo XAML. 
Desse modo, toda alteração realizada no arquivo XAML será processada 
e apresentada na interface do usuário. Além disso, o layout segue o 
que foi dito anteriormente, uma estrutura em que um componente 
ou elemento fica sobre o outro, em forma de um empilhamento de 
componentes, isso graças ao layout escolhido, que foi o StackLayout, na 
linha 6 do código da Figura 5.
Neste Tema, pudemos compreender os conceitos relacionados ao 
Xamarin a partir do estudo dos dois modos diferentes de desenvolver 
com ele: um com layout dedicado e lógica compartilhada, e outro com 
layout e lógica compartilhada (chamado de Xamarin.Forms). Em seguida, 
vimos o processo de instalação, configuração e desenvolvimento de um 
aplicativo no Xamarin e, por fim, fizemos a execução desse primeiro 
aplicativo em um dispositivo real.
Referências
MICROSOFT. Emparelhar com o Mac para desenvolvimento no Xamarin.iOS. 
2018. Disponível em: https://docs.microsoft.com/pt-br/xamarin/ios/get-started/
installation/windows/connecting-to-mac/. Acesso em: 25 mar. 2021.
68
BONS ESTUDOS!
	Sumário
	Introdução ao desenvolvimento mobile multiplataforma
	Objetivos
	1. Desenvolvimento mobile multiplataforma
	Referências
	Usabilidade no desenvolvimento de aplicativo multiplataforma
	Objetivos
	1. Usabilidade no desenvolvimento multiplataforma web
	Referências
	Desenvolvimento mobile com Flutter
	Objetivos
	1. Flutter
	Referências
	Desenvolvimento mobile com Xamarin
	Objetivos
	1. Xamarin
	Referências