Baixe o app para aproveitar ainda mais
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á configurada
Compartilhar