Baixe o app para aproveitar ainda mais
Prévia do material em texto
DESENVOLVIMENTO DE APLICATIVO ANDROID PARA O PORTAL DO ALUNO DA UFRJ Rafael Cardoso Ferreira Projeto de Graduação apresentado ao Curso de Computação e Informação da Escola Politécnica da Universidade Federal do Rio de Janeiro como parte dos requisitos necessários para a obtenção do grau de Engenheiro de Computação e Informação. Orientador: José Ferreira de Rezende Rio de Janeiro Janeiro de 2017 DESENVOLVIMENTO DE APLICATIVO ANDROID PARA O PORTAL DO ALUNO DA UFRJ Rafael Cardoso Ferreira PROJETO SUBMETIDO AO CORPO DOCENTE DO CURSO DE COMPUTAÇÃO E INFORMAÇÃO DA ESCOLA POLITÉCNICA DA UNIVERSIDADE FEDERAL DO RIO DE JANEIRO COMO PARTE DOS REQUISITOS NECESSÁRIOS PARA A OBTENÇÃO DO GRAU DE ENGENHEIRO DE COMPUTAÇÃO E INFORMAÇÃO. Examinadores: Prof. José Ferreira de Rezende, Dr. Prof. Aloysio de Castro Pinto Pedroza, Dr. Prof. Flávio Luis de Mello, D.Sc. RIO DE JANEIRO, RJ – BRASIL JANEIRO DE 2017 Ferreira, Rafael Cardoso Desenvolvimento de Aplicativo Android para o Portal do Aluno da UFRJ/Rafael Cardoso Ferreira. – Rio de Janeiro: UFRJ/POLI – COPPE, 2017. XI, 49 p.: il.; 29, 7cm. Orientador: José Ferreira de Rezende Projeto (graduação) – UFRJ/ Escola Politécnica/ Curso de Computação e Informação, 2017. Referências Bibliográficas: p. 46 – 49. 1. Dispositivos móveis. 2. Android. 3. REST. 4. Hibrido. 5. Nativo. 6. Portal do Aluno. I. de Rezende, José Ferreira. II. Universidade Federal do Rio de Janeiro, Escola Politécnica/ Curso de Computação e Informação. III. T́ıtulo. iii Agradecimentos Primeiramente, agradeço aos meus pais por serem meu exemplo de vida e maiores companheiros. À minha famı́lia, pelo sempre presente carinho e amor por toda minha vida. À minha namorada, por sempre ter sido uma grande companheira nos momentos bons e ruins. Aos meus amigos de ECI, pelos incŕıveis anos que passamos juntos; em especial, agradeço ao Rezende e Sab pelas incontáveis vezes que me ajudaram por toda tra- jetória. Aos meus amigos do BQF por mostrarem que tempo e distância são apenas detalhes quando se trata de amizade. Aos meus amigos do SIGA, e especialmente ao Ricardo Storino, por terem me dado a oportunidade de contribuir com a univer- sidade de alguma forma, e pela paciência em me ensinar conceitos que eu jamais havia conhecido. Agradeço imensamente à Universidade Federal do Rio de Janeiro pela oportuni- dade de me tornar engenheiro, e à todos os professores do curso de Engenharia. Em especial, ao professor Sérgio Barbosa Villas-Boas, que foi além de professor um bom amigo; e professor José Rezende, por aceitar a orientação deste trabalho. Agradeço também ao professor Paulo Oliva, por toda orientação e contribuição durante meu termo de intercâmbio acadêmico, e aos professores Flávio Mello e Aloysio Pedroza, por participarem desta banca examinadora. Por fim, agradeço a todas as pessoas que me ajudaram a ser uma pessoa melhor neste tempo de universidade. iv Resumo do Projeto de Graduação apresentado à Escola Politécnica/COPPE/UFRJ como parte dos requisitos necessários para a obtenção do grau de Engenheiro de Computação e Informação. DESENVOLVIMENTO DE APLICATIVO ANDROID PARA O PORTAL DO ALUNO DA UFRJ Rafael Cardoso Ferreira Janeiro/2017 Orientador: José Ferreira de Rezende Curso: Engenharia de Computação e Informação Com a grande popularização dos smartphones e seu crescente uso na sociedade, paralelo ao decrescente uso dos desktops para tarefas cotidianas, instituições que ofereciam soluções online tiveram que se adaptar para que essas soluções também fossem viáveis em dispositivos móveis. O contexto da Universidade Federal do Rio de Janeiro não é diferente, e portanto oferecer as soluções do Sistema Integrado de Gestão Acadêmica (SIGA) para dispositivos móveis fez-se necessário. Este trabalho tem como objetivo oferecer uma revisão sobre diferentes abordagens de desenvolvi- mento móvel e descrever a implementação de uma solução para dispositivos Android que possibilita o acesso ao SIGA. Palavras-Chave: Dispositivos móveis, Android, REST, Hibrido, Nativo, Portal do Aluno. v Abstract of the Undergraduate Project presented to Poli/COPPE/UFRJ as a partial fulfillment of the requirements for the degree of Computer and Information Engineer. DEVELOPMENT OF UFRJ’S PORTAL DO ALUNO ANDROID APPLICATION Rafael Cardoso Ferreira January/2017 Advisor: José Ferreira de Rezende Course: Computer and Information Engineering As smartphones become increasingly popular in our society, and desktop become decreasingly used, instituitons that offered online solutions were forced to adapt in a way so that these solutions became available for mobile devices. Universidade Federal do Rio de Janeiro’s context is not different, and therefore, it made neces- sary to offer a mobile solution for the university’s academic system, named Sistema Integrado de Gestão Acadêmica (SIGA). This document offers a review of different mobile development approaches, as well as a description of the implementation of a mobile solution for Android devices that enables access to SIGA. Keywords: Mobile, Android, REST, Hybrid development, Native development. vi Sumário Lista de Figuras ix Lista de Tabelas x Lista de Abreviaturas xi 1 Introdução 1 1.1 Antecedentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.2 Motivação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3 Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.3.1 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2 Conceitos Básicos 5 2.1 Desenvolvimento Nativo . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.2 Desenvolvimento Hı́brido . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.3 APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2.3.1 REST vs SOAP . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3 Desenvolvimento Hı́brido e Nativo 13 3.1 Interface Gráfica (UI ) . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.2 Experiência do Usuário (UX) . . . . . . . . . . . . . . . . . . . . . . 16 3.3 Desempenho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 3.4 Segurança . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 3.5 Comunicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 3.6 Testes Automatizados . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.6.1 Testes unitários . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.6.2 Testes de aceitação . . . . . . . . . . . . . . . . . . . . . . . . 21 4 Implementação 23 4.1 Visão geral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.2 Interface Gráfica (UI ) . . . . . . . . . . . . . . . . . . . . . . . . . . 24 4.2.1 Página Inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 vii 4.2.2 Menu Principal & Explorador de Arquivos . . . . . . . . . . . 26 4.2.3 Salas de Aula . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.2.4 Inscrição em Disciplinas . . . . . . . . . . . . . . . . . . . . . 30 4.3 Experiência do Usuário (UX) . . . . . . . . . . . . . . . . . . . . . . 30 4.3.1 Norman’s Design Principles . . . . . . . . . . . . . . . . . . . 32 4.4 Desempenho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 4.5 Segurança . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 4.6 Comunicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 4.7 Testes Automatizados . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 4.7.1 Testes Unitários . . . . . . . . . . . . . . . . . . . . . . . . . . 39 4.7.2 Testes de Aceitação . . . . . . . . . . . . . . . . . . . . . . . . 39 5 Resultados 41 5.1 Estat́ısticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 6 Conclusões e Trabalhos Futuros 44 6.1 Conclusões . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . 44 6.2 Trabalhos Futuros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Referências Bibliográficas 46 viii Lista de Figuras 1.1 Consumo em minutos por dia: mobile vs desktop . . . . . . . . . . . . 2 1.2 Página inicial do SIGA. Retirado de [1]. . . . . . . . . . . . . . . . . 3 2.1 Market share por sistema operacional . . . . . . . . . . . . . . . . . . 6 2.2 Diferença de performance entre SOAP e REST [2]. . . . . . . . . . . 11 2.3 Aumento de APIs REST entre 2006 e 2011 [3]. . . . . . . . . . . . . 11 3.1 Sugestão do Material Design para listas. [4] . . . . . . . . . . . . . . 14 3.2 Diferença de sub-menus . . . . . . . . . . . . . . . . . . . . . . . . . . 15 3.3 Exemplos de menus laterais em frameworks h́ıbridos . . . . . . . . . . 17 4.1 Diagrama geral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 4.2 Aplicação do Material Design na prática . . . . . . . . . . . . . . . . 25 4.3 Detalhamento de menus dispońıveis no app . . . . . . . . . . . . . . . 27 4.4 Páginas iniciais do app . . . . . . . . . . . . . . . . . . . . . . . . . . 28 4.5 Tela de turmas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.6 Páginas de inscrição do app . . . . . . . . . . . . . . . . . . . . . . . 31 4.7 Feedback sobre o status dispońıveis . . . . . . . . . . . . . . . . . . . 33 4.8 Dialogs sobre o status das requests. . . . . . . . . . . . . . . . . . . . 34 4.9 Opções para o peŕıodo de trancamento. . . . . . . . . . . . . . . . . . 35 5.1 Avaliação dos usuários. . . . . . . . . . . . . . . . . . . . . . . . . . . 41 5.2 Total de instalações por usuário. . . . . . . . . . . . . . . . . . . . . . 42 5.3 Instalações do app por páıs. . . . . . . . . . . . . . . . . . . . . . . . 43 ix Lista de Tabelas 2.1 Linguagens de programação para desenvolvimento nativo por S.O. . . 6 x Lista de Abreviaturas API Application Programming Interfaces, p. 9 BOA Boletim de Orientação Acadêmica, p. 26 CRID Confirmação de Registro de Inscrição em Disciplinas, p. 26 CRPID Confirmação de Registro de Pedido de Inscrição em Disciplinas, p. 26 HTTP Hypertext Transfer Protocol, p. 9 REST Representational state transfer, p. 9 SDK Software Delopment Kit, p. 5 SIGA Sistema Integrado de Gestão Acadêmica, p. 1 SOAP Simple Object Access Protocol, p. 10 UI User Interface, p. 13 UX User Experience, p. 16 XML Extensible Markup Language, p. 10 xi Caṕıtulo 1 Introdução O uso de smartphones e tablets faz parte do cotidiano da maioria dos brasileiros atu- almente. Segundo estat́ısticas [5], 76.1 milhões de brasileiros utilizam smartphones, o que corresponde a aproximadamente 40% do total de brasileiros. Entretanto, esse número sobe para 61% se considerarmos somente a população brasileira que utiliza celulares. Paralelamente ao crescimento do uso de dispositivos móveis, vê-se o grande decĺınio do uso de computadores pessoais (desktops). O Gráfico 1.1 ilustra este evento comparando a proporção do uso de dispositivos moveis e computadores desde 2014, além da projeção até 2018. Como consequência, cada vez mais passa a ser menos cômodo para os usuários utilizar desktops para tarefas cotidianas. Isso reflete o significativo amadurecimento do mercado de aplicativos para smartphones, que passou de 100.000 aplicativos dispońıveis em outubro de 2010 para incŕıveis 2.400.000 em outubro de 2016.[6]. Estes números são referentes somente ao sistema operacional Android. Para iOS, os números variam de 100.000 para 2.000.000 no mesmo aproximado peŕıodo de tempo [7]. Atualmente, a plataforma Android tem o maior market share do mercado, com 87.6%, enquanto o iOS tem 11.7% [8]. Os dois juntos dominam 99.3% do mercado. O restante é dividido entre Windows Phone, BlackBerry e outros sistemas operacionais menores, como webOS, Symbian OS e Ubuntu OS. Com base nesses dados, não há razões, portanto, para universidades não seguirem essa crescente tendência e se adaptarem para fornecer soluções móveis. 1.1 Antecedentes A UFRJ implantou nos anos 90 o Sistema Integrado de Gestão Acadêmica (SIGA), visando melhorar e agilizar os processos acadêmicos em geral. Antes da imple- mentação do sistema, todos os processos acadêmicos eram feitos presencialmente, 1 Figura 1.1: Consumo em minutos por dia: mobile vs desktop ou seja, para tarefas como inscrição em disciplinas ou recuperação de documentos, os alunos tinham que estar na faculdade em horários e dias preestabelecidos. Com o SIGA, foi oferecida a possibilidade de fazer tais tarefas de qualquer lugar do mundo com acesso à Internet. O SIGA engloba inúmeras funcionalidades de diversos escopos, fazendo com que não somente estudantes mas também professores, coordenadores de curso e técnicos- administrativos, entre outras ocupações, utilizem o sistema. 1.2 Motivação A principal motivação para este projeto começou ainda no ano de 2013. Na época, o acesso ao SIGA era feito exclusivamente pela intranet da UFRJ, e o website do sistema em si era totalmente orientado a mouse, isto é, a usabilidade do sistema dependia de aspectos não suportados por outras formas de navegação, como o toque. Por exemplo, para abrir o menu superior do sistema, era necessário posicionar o mouse por alguns segundos em cima do mesmo, até que abrisse. A Figura 1.2 ilustra a página inicial do sistema. Por ser um sistema desen- 2 Figura 1.2: Página inicial do SIGA. Retirado de [1]. volvidos em tecnologias antigas em um tempo em que a utilização de internet nos celulares era nula, ele não oferecia suporte para celulares ou um layout responsivo. Consequentemente, não era posśıvel utilizar o sistema em vários celulares. A ideia de desenvolver um aplicativo (app) começou a partir desta dificuldade. O primeiro protótipo ficou pronto no dia primeiro de agosto de 2013, e foi lançado de forma extraoficial, sendo disponibilizado na Google Play de forma gratuita. Com a grande aceitação do aplicativo por parte dos usuários, o projeto viria a se tornar o aplicativo oficial da UFRJ para Android no ano de 2014. 1.3 Objetivo O objetivo da construção do aplicativo foi não somente colocar a UFRJ dentro do mapa de inovação de dispositivos móveis, atendendo os alunos via dispositivos móveis, mas também garantir à grande maioria dos alunos um acesso rápido, seguro e eficaz ao Sistema Integrado de Gestão Acadêmica. O objetivo deste trabalho é sumarizar como foi feito o desenvolvimento do aplica- tivo para smartphones com sistema operacional Android, explicitando fatores como interface gráfica, experiência do usuário, performance, usabilidade, comunicação ex- terna com o servidor e segurança, além de demonstrar a importância da qualidade 3 de código e os meios utilizados para atingi-la. Em adição, o trabalho se propõe a expor eventuais dificuldades encontradas na evolução do projeto, assim como ressaltar prós e contras de diferentes abordagens de desenvolvimento, para que sirva como referência e legado para iniciativas seme- lhantes. 1.3.1 Metodologia Inicialmente, foi realizada uma revisão bibliográfica acerca de desenvolvimento de aplicativos móveis, incluindo pesquisas quantitativas referentes a diversos elementos do desenvolvimento, como performance, segurança, interface gráfica, usabilidade e comunicação com servidores. Com base nesta revisão, foi implementado um software para o sistema operacio- nal Android de forma nativa para atender os alunos da UFRJ com acesso móvel ao Portal Aluno, possibilitando acesso rápido ao SIGA e seus serviços. Este trabalho foi dividido em 5 caṕıtulos, além desta introdução. O Caṕıtulo 2 refere-se à alguns conceitos básicos para auxiliar no entendimento deste trabalho, enquanto o Caṕıtulo 3 oferece uma revisão bibliográfica sobre a polaridade de desen- volvimento nativo de aplicativos versus desenvolvimento h́ıbrido de aplicativos. No Caṕıtulo4 está descrita a implementação em si, explicitando cada componente do projeto e justificativas para cada decisão tomada. Os resultados da implementação do projeto, incluindo dados sobre a aceitação do produto por parte do público e estat́ısticas de uso, estão dispostas no Caṕıtulo 5. O último caṕıtulo refere-se às conclusões tomadas e trabalhos futuros. 4 Caṕıtulo 2 Conceitos Básicos Com a grande popularização de smartphones como visto na seção anterior, os prove- dores de serviço tiveram que se adaptar e fornecer soluções que também atendessem a esse mercado. O crescente número de apps nas lojas online é um grande indicativo desse fenômeno. No entanto, um outro indicativo é também a popularização dos web- sites baseados no chamado design responsivo. Com diferentes tamanhos, resoluções de telas e velocidade de conexão, é dif́ıcil prever o contexto no qual um usuário acessa a Internet. Dessa forma, cria-se uma necessidade de uso de novas técnicas para prover a melhor experiência de usuário posśıvel a qualquer um que possa vir a utilizar um serviço [9]. Aplicações que são acessadas através de um navegador web são comumente cha- madas de web applications [10]. Ao utilizar as técnicas de design responsivo, essas aplicações ficam com a interface gráfica muito parecida com a de um app comum de smartphones. Essa é a ideia base de aplicativos h́ıbridos, como veremos nas seções subsequen- tes. Em termos de desenvolvimento de aplicações que rodam no smartphones em si, e não na nuvem, existem duas vertentes principais: desenvolvimento h́ıbrido e desenvolvimento nativo. 2.1 Desenvolvimento Nativo O desenvolvimento nativo consiste na escrita de código em linguagem nativa, uti- lizando um Software Development Kit (SDK) próprio para um certo sistema ope- racional. Consequentemente, a linguagem de programação usada depende de cada sistema operacional. Na Tabela 2.1, podemos ver a variação da linguagem adotada por cada sistema. Os sistemas operacionais são listados também com sua represen- tatividade em market share. 5 Tabela 2.1: Linguagens por Sistema Operacional Sistema Operacional Linguagem Market Share Android Java 87.5% iOS Swift 12.1% Windows Phone .NET < 1% Blackberry Java ME < 1% UbuntuOS QML & Javascript < 1% Figura 2.1: Market share por sistema operacional [11] Na Figura 2.1, vemos também que Android e Apple iOS lideram o mercado de smartphones há anos. Portanto, seus respectivos SDK s são os mais utilizados para desenvolvimento nativo. 2.2 Desenvolvimento Hı́brido O desenvolvimento h́ıbrido consiste na utilização de algum framework que possibilita transformar um código - escrito em uma única linguagem - em apps nativos de diferentes plataformas. Existem vários frameworks que atendem o desenvolvimento de aplicativos para diferentes plataformas. Dentre tais frameworks, podemos citar os que utilizam abor- dagens web ou abordagens proprietárias, como veremos a seguir. Este trabalho focará mais na metodologia web, visto que é a mais utilizada como alternativa ao desenvolvimento nativo. Abordagem web O que esses frameworks costumeiramente fazem é envolver uma estrutura combinada de HTML, CSS e Javascript em uma estrutura nativa semelhantes a um web browser 6 (como o Google Chrome ou o Internet Explorer) que roda em tela cheia [12]. Pode-se citar como exemplo os frameworks PhoneGap, Cordova e Ionic. Dessa forma, o app h́ıbrido se assemelha muito a um nativo: ele é baixado de alguma store online, como a Apple AppStore ou o Google Play, instalado no smartphone normalmente e utilizado como se fosse um aplicativo comum. Portanto, a grande vantagem do desenvolvimento h́ıbrido é que um código único é implantado em vários sistemas operacionais diferentes, não sendo necessário escrever um código diferente para cada sistema operacional utilizando cada SDK. Essa é uma estratégia muito utilizada para empresas e startups que querem cortar ao máximo o custo de desenvolvimento. Em teoria, a manutenibilidade se dá de forma mais fácil por conta do baixo volume de código, e a velocidade de lançamento de atualizações também. Com senso, a probabilidade de bugs também é drasticamente reduzida, visto que não é necessário replicar os algoritmos e mudanças em diversos código-fontes diferentes. Abordagem proprietárias No entanto, existem outras técnicas de desenvolvimento h́ıbrido que utilizam tecno- logias diferentes das tecnologias padrão web. O Xamarin, por exemplo, é um framework que permite o desenvolvedor progra- mar na linguagem C# e fazer o deploy de apps nativos em Android e iOS. Apesar de entregar apps nativos para cada plataforma, não se utiliza o SDK espećıfico regido por cada S.O, e sim um framework próprio feito com base nesses SDKs. Os exemplos de código dispostos nos Quadros 2.1 e 2.2 mostram a similaridade do código nativo do SDK do Android e o código do framework Xamarin. O ponto positivo é que a performance final do app é consideravelmente superior à performance conseguida ao utilizar as tecnologias web, porque ele traduz o código escrito em C# para código nativo usando técnicas de compilação espećıficas de cada plataforma, em vez de simplesmente simular um website dentro de um aplicativo, como é feito na abordagem web. O ponto negativo é que para se obter a melhor experiência de usuário posśıvel, o desenvolvedor acaba com vários códigos em vez de um só: haverá um código para a interface gráfica para Android, um para a interface gráfica para iOS etc, apesar de toda lógica de negócio poder ser compartilhada. 7 Arquivo 2.1: Código SDK do Xamarin pub l i c c l a s s M a i n A c t i v i t y : A c t i v i t y { protected o v e r r i d e void OnCreate ( Bundle s a v e d I n s t a n c e S t a t e ) { base . OnCreate ( s a v e d I n s t a n c e S t a t e ) ; SetContentView ( Resource . Layout . Main ) ; Button button = FindViewById<Button>(Resource . I d . myButton ) ; } } Arquivo 2.2: Código SDK do Android pub l i c c l a s s M a i n A c t i v i t y extends A c t i v i t y { @Over r ide protected void onCreate ( Bundle s a v e d I n s t a n c e S t a t e ) { super . onCreate ( s a v e d I n s t a n c e S t a t e ) ; s e tContentV iew (R . l a y o u t . main ) ; Button t o o l b a r = ( Button ) f i ndV i ewBy Id (R . i d . myButton ) ; } } Um outro exemplo é o RAD Studio. Este é um framework desenvolvido pela Embarcadero Technologies que permite o desenvolvimento de apps multi-plataforma utilizando Delphi e C++. Ao contrário do framework Xamarin, o RAD Studio per- mite o desenvolvimento de um único código para a interface gráfica que é traduzido em designs que seguem o padrão de cada plataforma suportada: Android, iOS e Windows Phone. Estruturas de Projeto & IDEs Integrated development environment (IDE) é um software que facilita o desenvol- vimento de programas de várias maneiras, das quais pode-se destacar a inclusão automática de um compilador e processo de build, utilização de debugger e visua- lização da interface gráfica em tempo real. Além disso, eles podem oferecer uma interface simples de integração com repositórios de bibliotecas de terceiros como o maven, NuGet entre outros. Para desenvolvimento nativo Android, utiliza-se duas IDEs principais: Eclipse e Android Studio, sendo a última a IDE oficial da Google e consequentemente reco- mendada pela empresa. Para iOS, a IDE oficial é fornecida pela Apple e se chama 8 Xcode. Para Windows Phone, a IDE fornecida pela Microsoft é o Visual Studio. Para desenvolvimento h́ıbrido, não há regra. Entretanto, vários frameworks dis- ponibilizam uma IDE própria que atende facilidades espećıficas de cada uma. A estrutura dos projetos varia de acordo com cada framework. 2.3 APIs Para comunicação entre softwares, costuma-se utilizar Application Programming In- terfaces (API s). API s são interfaces definidas por padrões de comunicação prees- tabelecidos,tal que seja posśıvel sistemas se comunicarem de forma automatizada. No caso de serviços web, as chamadas web API s são muito usadas. Web API s podem ser acessadas por qualquer sistema que consiga fazer requisições Hypertext Transfer Protocol (HTTP), o que abrange uma gigantesca gama de sistemas in- cluindo todos os smartphones atuais. Os padrões mais utilizados para comunicação desse tipo são os REST e SOAP. 2.3.1 REST vs SOAP Representational state transfer (REST ) é um padrão definido por uma série de restrições e caracteŕısticas que tem como objetivo abstrair a comunicação entre sis- temas. Pode-se citar, dentre estas restrições e caracteŕısticas, três principais[13]: • Identificação global • Interfaces uniformes • Stateless O primeiro item destaca que os recursos são identificados via uma URL; o se- gundo item ressalta que só deve haver um meio de acessar os serviços, e este é por meio de requests (requisições) HTTP para a URL que os identificam; e por último, todas as requisições são stateless, isto é, eles não devem guardar estado. Basica- mente, para cada requisição (request) que recebe certos parâmetros predefinidos, há um processamento que gera uma resposta (response). Não há informações de sessões de clientes ou similares guardadas no processo. Consequentemente, espera-se que aplicações e serviços baseados nesse modelo sejam idempotentes. Denomina-se RESTful o sistema que segue os prinćıpios REST. Web APIs cos- tumam ser RESTful, o que consequentemente sugere a utilização de XML ou JSON para transferência de dados, visto que tais formatos são amplamente utilizados por conta de sua simplicidade e facilidade no tratamento de informações. São destacadas mensagems XML e JSON nos exemplos abaixo. 9 <aluno> <nome>Rafae l </nome> <i dade >22</idade> <u n i v e r s i d a d e >U n i v e r s i d a d e F e d e r a l do Rio de Jane i r o </u n i v e r s i d a d e > </aluno> { ” a luno ” : { ”nome” : ” R a f a e l ” , ” i dade ” : ”22” , ” u n i v e r s i d a d e ” : ” U n i v e r s i d a d e F e d e r a l do Rio de J a n e i r o ” } } Simple Object Access Protocol (SOAP) é um protocolo que permite troca de informações de forma semelhante ao padrão REST, mas de forma mais robusta. O protocolo SOAP, originalmente desenvolvido pela Microsoft, não restringe o acesso somente a HTTP. Cada vertente tem seus prós e contras, porém vê-se uma incŕıvel preferência por parte de desenvolvedores por APIs REST ful. O principal motivo é a grande rapidez e simplicidade no envio e tratamento de dados em Javasript Object Notation (JSON), que faz muita diferença para aplicativos móveis, principalmente por conta da possibilidade de conexão instável por conta de redes 3G. Uma outra alternativa seria o notável Extensible Markup Language (XML), porém o tráfego de dados é muito maior por conta de como o XML é estruturado: para cada tag aberta, outra exatamente igual é escrita para indicar o fim da mesma. O JSON evita este problema utilizando o caractere de chave e colchete para indicar abertura e fechamento de objetos. APIs SOAP, por sua vez, tem um set-up mais rápido, tendo as vezes aux́ılio de wizards que já automatizam a estruturação de toda conexão com o servidor. Além disso, suportam outros protocolos além do HTTP, como o SMTP e SSH. No entanto, costumam pecar em performance. A Figura 2.2 indica a grande diferença no tempo de cada chamada a um web- service sobre vários celulares. O estudo foi feito pelo A-team da Oracle e visava estudar a diferença de performance entre os dois modos de comunicação [2]. Como já explicitado, performance é um fator muito importante para a aceitação de aplicativos móveis, e portanto, é natural que a escolha de desenvolvedores seja enviesada para o paradigma mais performático - nesse caso, evidentemente o REST. 10 Figura 2.2: Diferença de performance entre SOAP e REST [2]. Figura 2.3: Aumento de APIs REST entre 2006 e 2011 [3]. 11 Esse fenômeno também leva aos provedores de informação (nesse caso, os web services e suas APIs) a utilizar protocolos mais amplamente performáticos, isto é, protocolos que satisfazem também o consumo mobile além dos tradicionais desktops. O Gráfico 2.3 mostra o expressivo aumento do uso da tecnologia REST em APIs, e paralelamente, a diminuição de sua maior contraparte, o SOAP. 12 Caṕıtulo 3 Desenvolvimento Hı́brido e Nativo No caṕıtulo anterior, foi apresentada uma visão geral do panorama de desenvolvi- mento para dispositivos móveis. Esse caṕıtulo tem como objetivo melhor descrever as técnicas e implementações para esse desenvolvimento, assim como explicitar as principais diferenças entre as duas diferentes abordagens. 3.1 Interface Gráfica (UI ) A construção da interface gráfica (em inglês, User Interface, comumente referido como UI ) é sem dúvida vital para o produto final, e impacta significativamente a experiência do usuário (comumente referida como UX) [14]. Para se ter uma ideia não somente da importância da UI mas também de seu custo, a maior alocação de esforço no processo de construção de um software está localizado exatamente no design e implementação da interface gráfica [15]. Conse- quentemente, os SDKs tentam prover o desenvolvedor de muitas ferramentas para facilitar e amenizar o custo desse processo. A Google, por exemplo, tem sua própria design language, chamada Google Ma- terial Design. Diz-se que uma design language - ou visual language - é um conjunto de padrões, configurações e esquemas gráficos que norteia os produtos de uma linha e, consequentemente, guia usuários e desenvolvedores. Microsoft, IBM, Apple entre outras empresas também tem uma design language própria. Veremos na próxima seção o porquê de a design language ser tão importante para a experiência do usuário, e como o desenvolvimento h́ıbrido de aplicativos peca criticamente neste quesito. Nativo No desenvolvimento nativo, a utilização da interface gráfica é muito simples e já vem de fácil acesso nos SDKs. Consequentemente, a construção das telas em acordo 13 (a) Lista de e-mails (b) Lista de pastas Figura 3.1: Sugestão do Material Design para listas. [4] com a design language em questão é imediata. Por exemplo, o Material Design da Google fornece padrões de cores, margens e disposição de elementos no aplicativo. As Figuras 3.1a e 3.1b mostram alguns dos padrões. Percebe-se que as margens à direita e à esquerda são iguais, e o padrão do topo também, apesar dos apps de exemplo serem totalmente diferentes: o primeiro, simula um app de e-mail, enquanto o último simula um explorador de arquivos. Um outro exemplo está no site oficial da Apple para desenvolvedores. Na Figura 3.2, há a sugestão de que qualquer menu com opções de ação se abra na parte inferior. Analogamente, o Android sugere que um menu com ações se abra na parte superior ao final da toolbar localizada no topo da tela. Estas configurações são muito importantes para a experiência do usuário, como será relatado posteriormente neste trabalho. Um app com uma UX ruim tem pouqúıssimas chances de ser bem sucedido, uma vez que a experiência do usuário é a melhor métrica posśıvel de satisfação de um aplicativo. 14 (a) iOS [16] (b) Android [4] Figura 3.2: Diferença de sub-menus 15 Hı́brido O desenvolvimento hibrido, em contrapartida, não tem um padrão definido. Como as principais tecnologias envolvidas para a maioria dos frameworks são HTML, CSS e Javascript, cabe ao usuário a total criação da interface gráfica. Na verdade, vê-se que é muito comum a utilização de frameworks dentro do próprio framework, ou seja, utilizar algum segundo framework para lidar com a UI. Por exemplo, o Mobile Angular UI baseado no framework bootstrap. Na Figura 3.3 vê-se a diferença entre diferentes menus laterais de dois frameworks diferentes: o primeiro que já vem como parte doIonic; e o segundo, da biblioteca para UI Mobile Angular. Claramente, não se assemelha às design languages nativas, porém ainda são intuitivas aos usuários por conta de outros elementos: o śımbolo localizado no canto esquerdo ao topo é comumente utilizado para indicar menu; as setas ao lado de cada item do menu indicam que, se selecionado, o item levará o usuário a outra página; e a diferente coloração de um dos itens do menu sugere seleção. Esses aspectos acima citados fazem parte de uma design language universal, a qual todas as outras espećıficas de cada SDK são baseadas. No entanto, alguns outros frameworks encontraram meios de parecer o mais nativo posśıvel. Entre outros, um exemplo é o Onsen UI [17], que oferece uma compilação visual diferente para Android e iOS com o mesmo código. 3.2 Experiência do Usuário (UX) A chamada UX (do inglês User eXperience) é estudada com o objetivo de aprimorar ao longo do tempo a usabilidade e intuitividade da interação homem-máquina [20] . Indubitavelmente, o design de interfaces é um desafio para qualquer desenvolve- dor. A intenção na criação de interfaces é que elas sejam intuitivas o suficiente tal que o usuário nem perceba que está lidando com uma máquina, isto é, o processo de utilização de qualquer device deve ser o mais natural posśıvel. As já citadas design languages tem como objetivo exatamente criar padrões bem definidos para que os aplicativos se assemelhem em estrutura. A ideia é o usuário, ao aprender a utilizar um aplicativo de um sistema, aprender a utilizar automatica- mente todos. Consequentemente, a experiência de usuário varia muito de sistema operacional para sistema operacional. É esperado que usuários que já estão acostumados com o iOS sintam muita diferença ao migrar para Android, por exemplo. Por outro lado, é muito mais provável que usuários já acostumados com o Mate- rial Design da Google tenham uma boa experiência com um novo aplicativo baixado 16 (a) Ionic [18] (b) Mobile Angular UI [19] Figura 3.3: Exemplos de menus laterais em frameworks h́ıbridos 17 seguindo o padrão dessa design language, do que com um aplicativo que não siga esse padrão. Isso implica uma das maiores desvantagens do desenvolvimento h́ıbrido: a UX de um app h́ıbrido será significativamente inferior à UX de um app nativo. Por mais que se tente utilizar HTML, CSS e Javascript para criar apps muito semelhantes a nativos, seria muito custoso e dif́ıcil conseguir um resultado exatamente igual. E, mesmo se este resultado fosse conseguido, ele se assemelharia somente a um tipo de visual language espećıfico. Por exemplo, se um app é disponibilizado na Apple AppStore, Microsoft Store e Google Play mas seu design language é similar ao Material Design da Google, a experiência de usuários da Apple e da Microsoft seria muito ruim. Isso se dá porque eles não estão acostumados ao padrão de design da Google, e sim ao de seus respectivos sistemas operacionais. 3.3 Desempenho Outro item muito importante que impacta no sucesso de um produto é seu desem- penho. Duas formas comumente usadas para medir desempenho são a latência e o tempo de execução [21]. Basicamente, a latência diz respeito sobre o tempo relaci- onado à comunicação do app com fontes externas (e.g. servidor na web). O tempo de execução, por sua vez, está relacionado ao processamento local do código. Apps nativos terão a melhor performance geral. Seu código já é, por definição, compilado de forma ótima para o correspondente sistema operacional. Apps h́ıbridos são interpretados: seu código é rodado por uma espécie de web browser. O web browser, por sua vez, é rodado pelo sistema. Portanto, há uma camada adicional no produto final do desenvolvimento h́ıbrido. Essa camada adicional reflete um tempo de execução maior e consequentemente, menor desempenho para h́ıbridos. Ademais, a latência de h́ıbridos também tem maior probabilidade de ser maior, já que é pratica comum de apps h́ıbridos baixarem pela rede partes de sua view, isto é, de elementos que serão mostrados na tela. Isso acarreta maior tempo de comunicação (latência) e pode piorar a experiência do usuário. Um estudo [22] mostra o quão importante é a performance para usuários finais. 84% dos usuários avaliados julgam performance um fator importante. Além disso, 48% dos usuários responderam que estariam menos dispostos a utilizar um app com UX ruim, 34% trocariam para o app do competidor e 31% recomendariam negativamente para outros usuários. Finalmente, 24% dos participantes disseram que olhariam para outros produtos da empresa sob uma perspectiva negativa e menos dispostos a tentar outros produtos. 18 Consequentemente, o desempenho impacta diretamente a experiência do usuário e pode ser fator decisivo para o sucesso de um aplicativo em relação ao seus compe- tidores. 3.4 Segurança Segurança é um fator que vem chamando bastante atenção no desenvolvimento mo- bile. Apesar do crescimento considerável de aplicativos h́ıbridos devido ao baixo custo de desenvolvimento, aplicativos nativos são mais seguros [23]. Esse fato ocorre pela maior integração que apps nativos tem com as features do sistema - inclusive as relacionadas à segurança. Google, Apple e outras grandes empresas de tecnologia vem adicionando mais e mais funcionalidades para diminuir vulnerabilidades dos apps em seu sistema. Por exemplo, apps Android são postos naturalmente nas chamadas sandboxes [24], que isolam os dados de um app e sua execução do código de dados e execuções de outros apps. Além disso, Android oferece um file system encriptado que pode ser habilitado visando proteção em caso de perdas ou furtos. Também, ao lançar aplicativos na loja oficial da Google, o usuário tem que explicitamente listar no código-fonte da aplicação todas as permissões que o aplicativo tem que ter para seu uso, e o usuário tem que aceitar uma a uma. Essas permissões incluem acesso ao microfone, câmera, disco ŕıgido, internet etc. Um outro exemplo são metodologias implementadas pela Apple para garantir a autenticidade dos apps em sua loja. Uma delas é a chamada bootchain [25], em que cada etapa do processo de load de um app no iOS contém componentes criptografa- dos assinados somente pela Apple para garantir integridade. Outras técnicas estão descritas na documentação oficial da empresa, e podem ser ressaltadas o Secure enclave, Touch ID e Data Encrypting [25]. Mesmo com todos os avanços em segurança, hackers ainda exploram vulnerabi- lidades em aplicações móveis. 3.5 Comunicação A comunicação do app com fatores externos (como disco, banco de dados ou servi- dores) se dá de forma similar nos paradigmas hibrido e nativo. Disco Aplicações nativas tem funcionalidades já embarcadas no SDK para acesso ao file system. No entanto, a gigantesca maioria dos frameworks h́ıbridos também já fazem 19 o intermédio entre o sistema e o código interpretado. Banco de Dados O uso de banco de dados varia bastante de SDK para SDK. A plataforma Android, por exemplo, oferece total suporte à bases de dados SQLite [26]. O sistema iOS também oferece suporte ao SQLite. O uso de bancos é recomendado para armazenamento de dados em quantidade mais significativa. Para rápidos armazenamentos de objetivos primitivos, como in- teiros, strings e booleans, costuma-se utilizar soluções mais performáticas como as Shared Preferences (Android) e User Defaults (iOS). Como o nome sugere, é uma forma de armazenamento muito utilizada para guardar dados de configurações do usuário. Em contrapartida, no caso de frameworks h́ıbridos, costuma-se utilizar as tec- nologias IndexedDB, WebSQL e localstorage. Essas tecnologias são otimizadas para web browsers, e como os apps são desenvolvidos para executar em uma espécie de browser, essas opções acabam sendo boas soluções. O IndexedDB é um banco de dados baseado em Javascript e orientadoa objetos. Essa implementação substitui a antiga WebSQL, que teve seu suporte descontinuado pela W3C. O localstorage por sua vez é uma API leve para armazenamento de pequenas quantidades de dados, mas seu acesso se dá de forma śıncrona, o que pode ser bem problemático visto que isso causa o travamento da interface gráfica até que a comunicação seja finalizada. Servidores Como visto no Caṕıtulo 2, a comunicação com os servidores se dá majoritariamente por dois paradigmas: Simple Object Access Protocol (SOAP) ou Representational state transfer (REST). Não há diferença na comunicação com APIs externas no caso de desenvolvimento nativo contra h́ıbrido, uma vez que ambos são capazes de se comunicar normalmente sem consideráveis diferença no processo. 3.6 Testes Automatizados Um fator extremamente importante no processo de desenvolvimento são os testes automatizados. Na verdade, testes automatizados não agregam valor para o usuário diretamente, mas sim indiretamente. Testar o aplicativo de forma efetiva impede que bugs sejam embarcados com novas atualizações e assegura que o aplicativo sempre funcione como preestabelecido. Isso 20 inclui monitoramento de consumo de energia, monitoramento de desempenho do app, segurança de que a UI se comporta de maneira correta, certeza que lógicas de negócio ainda são cumpridas entre outros. [27] Há diversos tipos de testes automatizados, dos quais podemos citar testes unitários, testes funcionários e testes de interface gráfica. Neste trabalho, cobri- remos somente o escopo de testes unitários e de interface gráfica. 3.6.1 Testes unitários Testes unitários têm como objetivo testar unidades lógicas de negócio de um pro- grama, isto é, testar as menores partes de um programa e assegurar que elas funcio- nam corretamente. A ńıveis práticos, essas pequenas partes podem ser um conjunto de classes ou uma única classe somente [28], tal que seus métodos sejam assegurados de funcionalidade. Em termos de desenvolvimento para dispositivos móveis, existem vários fra- meworks para testes unitários. Frameworks nativos Para Android, o JUnit já é disponibilizado como framework padrão para testes unitários. Além disso, a documentação oficial da Google sugere a utilização do framework Mockito para satisfazer eventuais dependências que os testes possam vir a ter. O sistema operacional da Apple também já disponibiliza ferramentas para testes unitários junto com o SDK pelo framework XCTest, assim como o Windows Phone comporta ferramentas no conjunto de bibliotecas padrão do Visual Studio (Microsoft.VisualStudio.TestPlatform.UnitTestFramework). Frameworks h́ıbridos No desenvolvimento h́ıbrido, é muito comum utilizar ferramentas de teste unitário voltadas para Javascript, especialmente à Angular - framework vastamente utilizado para desenvolvimento h́ıbrido. Um exemplo é o QUnit, que funciona muito bem com Apache Cordova e Phone- Gap. 3.6.2 Testes de aceitação Os testes de aceitação têm como objetivo testar a interface gráfica do aplicativo, simulando o operacional de um usuário. Consequentemente, o teste assegura que a interface gráfica funcione de forma esperada e exiba informações de forma devida. 21 No entanto, não é papel dos testes de interface gráfica testar a lógica de negócios que acontece por trás no código. Este é um erro muito comum quando se trata de testes automatizados, visto que eles abordam a aplicação de forma end-to-end, isto é, simula totalmente a operação de um usuário do ińıcio ao fim [29]. O ideal é se testar toda lógica de negócios unitariamente, e fazer poucos testes de tela, visto a grande demora na execução dos testes de tela e baixa manutenibilidade. Frameworks nativos Para testes de tela nativo em Android, existem algumas opções, das quais a Google recomenda o framework chamado Espresso [30]. Esse framework tem um código muito simples e intuitivo, sendo fácil escrever códigos de tela utilizando ele. Em contrapartida, uma outra opção é o Robotium, em que é posśıvel gravar os passos a partir utilizando o Robotium Recorder. Portanto, utilizando esta abordagem, fica mais rápido de se criar testes, mas mais dif́ıcil de mantê-los. Os testes automatizados para iOS e Windows Phone seguem uma linha parecida com o Robotium. O framework para o sistema operacional da Apple é o mesmo utilizado para testes unitários (XCTest) e permite gravar passo a passo a simulação do usuário. Para o sistema da Microsoft, utiliza-se o CodedUI, que é disponibilizado por padrão em edições Enterprise e superiores do Visual Studio. Frameworks h́ıbridos Para testes de tela de apps h́ıbridos, pode-se citar os frameworks Appium, Calabash, Frank e MoneyTalk, dentre outros. Esses frameworks também funcionam para testes de apps nativos, mas como as empresas mantenedores oferecem soluções próprias, elas acabam sendo preferidas em relação a estes. 22 Caṕıtulo 4 Implementação Visto todos os conceitos básicos descritos no caṕıtulo 2 e as visões mais aprofundadas sobre os aspectos de desenvolvimento h́ıbrido e nativo no capitulo 3, a intenção agora é detalhar cada item da implementação do app deste trabalho. Com base no que foi visto sobre o produto final resultante do desenvolvimento h́ıbrido comparado ao do desenvolvimento nativo, a decisão tomada foi seguir o paradigma nativo. Foi considerado que a melhor combinação de UX, desempenho e segurança só seria atingida com poder total sobre as funcionalidades do smartphone e acesso direto à visual language do sistema. Como o intuito é ser o aplicativo oficial da Universidade Federal do Rio de Ja- neiro - uma das maiores universidades do páıs - julga-se necessária a busca pelo melhor produto para o usuário final posśıvel. O ponto negativo deste tipo de desen- volvimento é o custo envolvido, que não é tão significativo tomada a proporção da UFRJ no cenário nacional. Com a decisão de criação do aplicativo nativo, um sistema operacional de ińıcio deve também ser escolhido. Com base na análise de market share disposta na Figura 2.1, o sistema operacional Android impactaria o maior número absoluto de pessoas. Portanto, justifica-se assim a escolha da utilização do Android SDK para o de- senvolvimento do software referenciado neste trabalho. 4.1 Visão geral O funcionamento geral do aplicativo pode ser visto na Figura 4.1. O aplicativo faz requisições HTTP para uma API RESTful. Essa API foi feita exclusivamente para consumo de dados desse aplicativo móvel. É importante ressaltar que essa API não foi, até o momento de escrita deste trabalho, disponibilizada ao público. O aplicativo faz requisições GET e POST para a API, e esta por sua vez recupera os dados do SIGA. Todo o framework web em que o SIGA e a API são desenvolvidos 23 Figura 4.1: Diagrama geral utilizam a linguagem de programação Java, e portanto, toda a informação no lado do servidor é abstráıda como objetos Java. A API é uma extensão dos módulos do sistema, de forma que consiga traduzir objetos Java internos ao sistema para informações serializadas em JSON. O aplicativo - ou qualquer outro consumidor de uma API - espera dados repre- sentados em alguma notação universal - como o XML ou o já citado JSON. Nesse esquema, fica claro que a API serve como uma interface de comunicação entre dois sistemas, transformando as requisições HTTP em chamadas espećıficas à compo- nentes do sistema acadêmico, e traduzindo o resultado dessas chamadas em uma notação abstrata universal - nesse caso, o JSON. O desenvolvimento total do aplicativo durou 7 meses. Nas próximas seções, serão detalhadas com profundidade os componentes do aplicativo e o que influenciou cada decisão tomada. No total, o aplicativo tem 8 telas: tela de login, menu principal, explorador de arquivos, salas de aula, adicionar pedidos de inscrição, visualizar/alterar pedidos e trancar inscrições, buscardisciplinas e confirmação de envio de pedidos de inscrição. O publico-alvo do aplicativo são estudantes da UFRJ. As funcionalidades inclusas são referentes a documentos, salas de aula e inscrição. Os documentos dispońıveis para download são dispostos na Lista 4.1. 4.2 Interface Gráfica (UI ) A interface gráfica do aplicativo foi feita seguindo a design language da Google. Toda disposição de itens no aplicativo segue os padrões do Material Design, como será demonstrado nesta seção. 4.2.1 Página Inicial A página inicial do app é exposta na Figura 4.2a 24 (a) Página inicial do app. (b) Padrões do Material Design [4] Figura 4.2: Aplicação do Material Design na prática 25 • Boletim • Boletim de Orientação Acadêmica(BOA) • Histórico • Confirmação de Registro de Inscrição em Disciplinas (CRID) • Confirmação de Registro de Pedido de Inscrição em Disciplinas (CRPID) • Declaração de Bolsista • Declaração de Cotista • Declaração de Nome Social Lista 4.1: Documentos dispońıveis para download O botão disposto na parte inferior com o simbolo de + é chamado de Floating Action Button (FAB). Seguindo a visual language em questão, este botão é recomen- dado para a ação mais utilizada na tela. Na tela em questão, é a ação de realizar um novo login, podendo adicionar contas à lista de contas salva no processo.. Ao topo, há uma barra (denominada toolbar) com um śımbolo lateral de três barras. Este śımbolo indica que há um menu lateral dispońıvel, como explicitado pela Figura 4.3a. À esquerda da toolbar também existe um śımbolo de três pontos na vertical, que indica que há um sub-menu com ações dispońıveis, como disposto pela Figura 4.3b Vê-se também que as dimensões do FAB são idênticas, assim como as dimensões da toolbar ao topo. Além disso, as margens à direita do botão também são idênticas. Como citado na seção 3.1, todos esses fatores são dispostos de forma funcional e prática para o desenvolvedor através do próprio SDK. Evidentemente, o programa- dor pode customizar à seu modo. No entanto, é extremamente simples a criação de telas em conformidade com a design language em questão. Um ponto interessante a se notar é o śımbolo de engrenagem à direita do item da lista. A engrenagem é um śımbolo universal utilizado para indicar que há opções dispońıveis de configurações ou ações adicionais que podem ser executadas. No caso, são opções de remoção ou edição de algum item da lista (mudar os dados salvos). 4.2.2 Menu Principal & Explorador de Arquivos O app tem em seu interior, um explorador de arquivos próprio, tal que facilite o acesso do usuário a qualquer arquivo baixado por dentro do aplicativo. No caso do Sistema Integrado de Gestão Acadêmica, esses arquivos são costumeiramente documentos acadêmicos como boletins, histórico escolar e comprovante de inscrição 26 (a) Menu lateral (b) Sub-menu com ações Figura 4.3: Detalhamento de menus dispońıveis no app 27 (a) Tab 1 : menu principal (b) Tab 2 : explorador de arquivos Figura 4.4: Páginas iniciais do app em disciplinas; documentos oficiais como comprovante de matŕıcula; e declarações da universidade como certificado de bolsista. O explorador de arquivos é uma lista de itens. Entretanto, preferiu-se por cus- tomizar o ı́cone: em vez de seguir o padrão do Material Design de uniformizar os ı́cones no formato circular, como na Figura 3.1, foi seguido o padrão de ı́cones no formato quadrado. Ícones quadrados são um grande legado do inicio da adoção de computadores pessoais, principalmente no sistema operacional Windows. Portanto, apesar de fugir da linguagem visual da Google, ainda se faz intuitivo ao usuário. No canto inferior direito da tela do explorador de arquivos, está localizado um FAB com a opção de deletar os arquivos salvos. O FAB some ao mover a tela para a aba Sistemas. O menu principal, demostrado na Figura 4.4a, mostra as opções dispońıveis para o usuário logado. As opções variam de acordo com o usuário. Por exemplo, se o usuário for bolsista, terá a opção de download de comprovação de bolsista. 28 Figura 4.5: Tela de turmas Além disso, foi adicionado para as opções Salas de Aula e Inscrição uma seta à direita para demonstrar que o usuário sairá da tela atual e irá para outra. Para cada item do menu, uma ação correspondente é executada: ao clicar em algum documento, o mesmo é baixado; ao clicar na opção de Salas de Aula, o usuário é direcionado para a tela com as informações de sala; e ao clicar em Inscrição, o usuário irá para a tela de inscrição em disciplinas. 4.2.3 Salas de Aula Uma das funcionalidades do app é mostrar ao usuário suas salas de aula. A página é simples e segue os padrões da Google, principalmente por conta do uso dos cardviews. Os cardviews são recomendados quando o tamanho do conteúdo é variável, além de fazer parte da linguagem visual geral da Google [31]. Cardviews têm sido tão utilizado pela Google que até websites responsivos para desktop o utilizam. Na Figura 4.5, vê-se um exemplo real do uso da página. O primeiro cardview 29 foi ampliado - através de um toque - e os demais permaneceram colapsados. O estado padrão dos cardviews é colapsado, tal que a tela não fique polúıda assim que iniciada. O tamanho de cada cardview pode variar muito visto que existem matérias com muitos horários diferentes. Há matérias registradas no SIGA com mais de 30 horários diferentes, tal que o carview expanda consideravelmente. Portanto, ao iniciar colap- sado, a identidade visual da página é preservada. O detalhe ao topo também faz parte do Material Design: a seta à esquerda se contrapõe à seta à direita do item Salas de Aula do menu principal (Figura 4.4a), tal que se torna intuitivo ao usuário como a navegação se dá. 4.2.4 Inscrição em Disciplinas O aplicativo também oferece os serviços de Inscrição, Alteração e Trancamento de Disciplinas. Esse serviço, através do website do Portal Aluno, é extremamente ori- entado a mouse. A intenção era fazer no app um serviço totalmente orientado a toque. Por um lado, peca-se na visualização da grade horária. Por outro, ganha-se em UX no processo do uso do serviço. A tela também faz uso de cardviews pelo mesmo motivo citado na seção da tela de salas de aula: as informações são expanśıveis e variáveis. Ao final de cada item, temos o śımbolo de relógio com uma seta na parte de baixo. Intuitivamente, passa-se a informação de que o carview expande com informações sobre horários da disciplina em questão. Na segunda tab, há informações sobre o status de cada pedido de inscrição. O esquema seguido é muito similar ao da primeira tab. É importante mencionar que a disposição de elementos, apesar de diferentes, seguem a mesma estrutura do menu inicial (Figura 4.4a): toolbar ao topo com opções correspondentes da página; duas tabs sobre informações relacionadas dividindo o layout; e itens dispostos verticalmente. 4.3 Experiência do Usuário (UX) Nesta seção, será disposto elementos-chave que visam a melhor experiência do usuário. O aplicativo, por sua natureza nativa, já tem uma performance muito boa tal que não haja travamentos de tela nem delays nas transações de uma atividade para outra. No entanto, isso não garante que o usuário terá uma boa experiência. 30 (a) Tab 1 : adicionar pedidos (b) Tab 2 : visualizar ou alterar pedidos Figura 4.6: Páginas de inscrição do app 31 4.3.1 Norman’s Design Principles Com isso em mente, a arquitetura da UI foi feita seguindo os prinćıpios de design de Norman [32]. Os prinćıpios estão listados abaixo. Prinćıpios de Design de Norman • Visibilidade • Feedback • Restrições • Mapeamento • Consistência • Affordance Cada item refere-se a um aspecto que interfaces homem-máquina devem ter paraatingir melhor usabilidade. Visibilidade Como o nome sugere, as funções as quais o usuário pode usufruir devem estar tão viśıveis quanto posśıvel. Quando muito escondidas (como exemplo, dentro de sub- menus dentro de menus), torna-se muito trabalhoso para o usuário encontrar alguma funcionalidade que deseja usar. No aplicativo, foi tentado colocar todas as funcionalidades que o usuário tem a disposição na tela em si, e não dentro de menus. Todas as ações são acessadas através da toolbar do app, localizada ao topo. Como exemplo, a Figura 4.9 mostra diferentes toolbars em telas do aplicativo, mostrando ao usuário o que é posśıvel fazer de acordo com aquele contexto. Outro ponto importante é a página inicial, onde o usuário informa as credenciais para autenticação. Nesta página, é disposto o status do sistema com um sinal indi- cando disponibilidade, instabilidade ou indisponibilidade. Dessa forma, assim que o usuário abre o aplicativo, ele já tem noção se será posśıvel conectar aos servidores. Caso apareça status instável, o usuário já espera que certas tarefas demorem mais que o normal para ser completadas, ou talvez não estejam acesśıveis no momento. Caso seja status indispońıvel, o usuário já terá noção que deve tentar mais tarde. Os status e suas representações estão expostos na Figura 4.7 Por conta da API ser modularizada no servidor, ou seja, os diferentes compo- nentes utilizados para constituir o SIGA não dependerem entre si, é posśıvel que o módulo de Documentos esteja funcionando corretamente mas o módulo de Inscrição 32 (a) Online (b) Instável (c) Indispońıvel (d) Carregando Figura 4.7: Feedback sobre o status dispońıveis não. O status do sistema é então conseguido tratando a response obtida a partir de requests para cada módulo utilizado. Feedback O prinćıpio de feedback sugere que para toda ação que o usuário executar, deve haver algum retorno de informação indicando o efeito dessa ação. Por exemplo, ao se discar um número no telefone fixo, há um som indicando que a tecla foi pressionada. Analogamente, em smartphones, costuma haver uma suave vibração na ponta do dedo do usuário. O app provê feedback de várias formas. Destaca-se que, enquanto qualquer re- quest ao servidor estiver sido feito e aguardando uma response, um śımbolo de loading é posto na tela, como nas Figuras 4.7d e 4.8. Assim que uma response é recuperada com sucesso, o usuário é notificado com um śımbolo verde comumente usado como status OK. Em adição, o Android por default já muda a cor de itens de listas quando tocados ou pressionados, tal que os desenvolvedores não precisem implementar os feedbacks mais imediatos como este. Restrições Para que uma interface seja a mais intuitiva posśıvel para o usuário, é bom que haja um - e somente um - modo de executar cada tarefa. Dessa forma, restringir o usuário pode leva-lo rapidamente e intuitivamente a tentar de outra maneira. Por exemplo, construir um espaço para o cartão de memória em uma máquina fotográfica 33 (a) Autenticando usuário (b) Carregando página de inscrição Figura 4.8: Dialogs sobre o status das requests. que trave quando o cartão é posto do lado errado faz o usuário intuitivamente não tentar forçar o cartão nesta posição, e procurar alternativas. O app restringe usuários de opções que não seriam posśıveis por conta de algum motivo espećıfico. Por exemplo, se o usuário tem uma matéria trancada, a única opção posśıvel para ele é destranca-la (desde que dentro do peŕıodo de datas em que isto é posśıvel). O mesmo vale para uma matéria não trancada. A Figura 4.9 expõe esse prinćıpio. Dessa forma, é evitado que o usuário tente realizar alguma ação que não é viável naquele momento. Mapeamento O mapeamento refere-se à uma conexão entre itens da interface gráfica e o mundo real. Por exemplo, no teclado de um notebook existe uma tecla com um śımbolo de mega-fone com várias ondas saindo dele; e outra com poucas ondas. Há dois mapeamentos com o mundo real nesse caso: o mega-fone indica sáıda de áudio, portanto, as teclas devem estar relacionadas com a sáıda de áudio do aparelho; e a quantidade de ondas sugere maior quantidade ou menor quantidade de algo, no caso, de ”barulho”. Portanto, é fácil chegar à conclusão de que as teclas se referem ao volume do dispositivo. Uma aplicação do mapeamento na implementação do aplicativo foi a escolha das cores para o status do sistema, como demostrado nas Figuras 4.7a, 4.7b e 4.7c. As cores são intuitivas principalmente por conta das cores do semáforo: verde para livre, amarelo para atenção e vermelho para parar, não continuar. 34 (a) Restrição à opção de trancamento (b) Restrição à opção de destrancamento Figura 4.9: Opções para o peŕıodo de trancamento. 35 Consistência O prinćıpio da consistência sugere que o método para atingir algum resultado seja o mesmo por toda a aplicação. Por exemplo, se em determinada tela o usuário precisar tocar rapidamente sobre um item para selecionar esse item em uma lista, seria inconsistente se em outa tela ele devesse tocar e segurar. Cada tela do app se comporta de maneira semelhante. A Figura 4.4a por exem- plo, exemplifica este caso. Para os itens sem seta, a ação mais esperada (download do documento) é iniciada imediatamente. Os itens com seta indicam que outra página irá se abrir. Affordance O termo affordance não tem uma tradução literal para o português mas está rela- cionado com a capacidade de um objeto de transmitir a maneira em que se deve interagir com ele. Um exemplo simples são teclas em um teclado, que sugerem ser pressionadas por conta de seu ligeiro alto relevo. Itens dispostos em lista e ações na toolbar são em de acordo com a visual language da Google e se tornam intuitivas para o usuário. No caso de um usuário novo, a ambientação com o sistema Android é necessária, mas por ser algo viśıvel e com feedbacks presentes, ela se torna rápida. 4.4 Desempenho O desempenho do app é consideravelmente alto por conta de dois fatores: sua natu- reza nativa, que maximiza todas as otimizações feitas pelo SDK do Android, e sua simplicidade. O aplicativo não utiliza nenhum banco de dados local, visto sua natureza sta- teless. A única informação guardada pelo aplicativo são tokens de autenticação, e todo resto do processamento é feito no server-side, isto é, no servidor. Somado a esse fato, o app não acessa servidores internacionais ou faz chamadas de longa duração. Os servidores são dispostos próximos de onde a maioria dos usuários utilizam e todas as chamadas têm tráfego baix́ıssimo de dados, visto a natureza de comunicação REST ful utilizando JSON. A comunicação do aplicativo será mais aprofundada na seção sobre este assunto mais a frente. Portanto, a latência - como visto na seção 3.3 - é mı́nima. Ademais, o tempo de execução é baix́ıssimo, visto que não há código interpretado em runtime momento algum. 36 4.5 Segurança O aplicativo utiliza técnicas para evitar a utilização de engenharia reversa. A Go- ogle oferece ferramentas built-in com esta finalidade, além de existir frameworks proprietários também com este fim. Um bom exemplo são os ofuscadores de código, que geram um código totalmente ileǵıvel por humanos mas funcional da mesma maneira. Além disso, o app usufrui de todas as medidas de segurança providas pelo sis- tema operacional (como as sandboxes citadas na seção 3.4). Todas as informações salvas pelo aplicativo, que são as informações de login e senha do usuário, são crip- tografadas. É importante frisar que essas informações só são guardadas se for de escolha do usuário. 4.6 Comunicação Para o aplicativo funcionar, foi estruturada uma API REST ful privada nos servi- dores da UFRJ. Por ser REST ful, a API não guarda dados sobre os usuários que a acessam, com exceçãode dados que sejam necessários como parâmetro de algumas requests, como matŕıcula e eventuais tokens de autenticação. Toda comunicação é feita em JSON, por conta da simplicidade de uso e menor overhead (resultando em maior performance). Para o parsing de dados, foi criado um JSON parser que trata os dados vindos do servidor. Toda lógica é testada via testes unitários para assegurar a qualidade do comportamento das regras de negócio. Um exemplo de response da API do servidor está disposto abaixo, além de como se extrai informação dessa response. O exemplo de JSON de turma é tratado e disposto em um objeto do tipo org.json.JSONObject. O pacote org.json já é incluso por padrão no SDK do Android. Para recuperar informações como o código da turma, é utilizado o método getString, como exemplificado no Arquivo 4.2. Para re- cuperar os demais elementos do JSON, métodos semelhantes são utilizados: sempre recuperando o valor pela chave correspondente. 37 Arquivo 4.1: JSON retornado ao recuperar uma sala de aula { ” cod igo ” : ”EEL874” , ” i n f o ” : { ” loca lD iaSemana ” : [ { ” andar ” : ”02” , ” b l o co ” : ”H” , ” ho ra r i oF im ” : ” 12 :00 ” , ” diaSemana ” : ”Seg” , ” h o r a r i o I n i c i o ” : ” 10 :00 ” , ” l o c a l i z a c a o ” : ” E s co l a P o l i t e c n i c a ” , ”numero” : ” 0213 ” } , { ” andar ” : ”02” , ” b l o co ” : ”H” , ” ho ra r i oF im ” : ” 12 :00 ” , ” diaSemana ” : ” Sex ” , ” h o r a r i o I n i c i o ” : ” 10 :00 ” , ” l o c a l i z a c a o ” : ” E s co l a P o l i t e c n i c a ” , ”numero” : ” 0213 ” } ] , ” nomeCursoOferec ido ” : ” Engenhar i a de Computacao e In fo rmacao ” , ” n o m e D i s c i p l i n a ” : ” I n t e l i g e n c i a A r t i f i c a l ” } } Arquivo 4.2: Exemplo de parsing do JSON JSONObject j s o n = new JSONObject ( . . . ) ; S t r i n g cod igo = j s o n . g e t S t r i n g ( ” cod igo ” ) ; 4.7 Testes Automatizados Para manter a lógica dos testes com qualidade, melhorar a manutenibilidade e au- xiliar novos programadores sobre as funcionalidades do app, foram feitos testes au- tomatizados extensivos por toda aplicação. Para a lógica de negócios, foi utilizado o framework JUnit para testes unitários. Para testes de UI, optou-se pelo Espresso, que é um framework desenvolvido espe- cialmente para testes em Android. 38 4.7.1 Testes Unitários Os testes unitários foram realizados com o aux́ılio da biblioteca Mockito. Essa biblioteca permite criar objetos manipuláveis que seriam muito trabalhosos de criar ”na mão”, e com isso, testar lógicas internas do software. Um exemplo de teste envolvendo Mockito está disposto abaixo, fornecido pelo website do framework [33]. L i n k e d L i s t mockedL i s t = mock ( L i n k e d L i s t . c l a s s ) ; // s t ubb i ng appea r s b e f o r e the a c t u a l e x e c u t i o n when ( mockedL i s t . ge t (0 ) ) . thenReturn ( ” f i r s t ” ) ; // the f o l l o w i n g p r i n t s ” f i r s t ” System . out . p r i n t l n ( mockedL i s t . ge t (0 ) ) ; // the f o l l o w i n g p r i n t s ” n u l l ” because ge t (999) was not s tubbed System . out . p r i n t l n ( mockedL i s t . ge t (999) ) ; Como pode ser visto, uma LinkedList jamais foi realmente criada. Não há uti- lização do operador new em lugar algum, nem a adição do item ”first” à lista. Entretanto, o objeto criado ainda funciona de acordo com o esperado. Esta técnica pode ser muito útil ao testar lógicas internas que dependem de objetos mais complexos. 4.7.2 Testes de Aceitação Os testes de UI, comumente referidos como testes de aceitação, têm como objetivo garantir que a interface gráfica se comporta da maneira esperada e monitorar se há mudança de performance das telas do aplicativo ao longo do tempo. Isso significa que se algum teste falha, provavelmente alguma funcionalidade da tela deveria ter acontecido mas não aconteceu. Por exemplo, se ao se clicar em certo botão, um dialog de confirmação deveria aparecer - mas não apareceu - o teste reportará falha. Ao passo que, se não há adição de novo testes ou mudança no emulador do Android e o tempo de execução dos testes começa a aumentar muito, provavelmente adicionou-se algum algoritmo novo ou código que está prejudicando a performance geral do app em certa tela. Para criação dos testes automatizados, utilizou-se a biblioteca Espresso. Essa biblioteca tem uma maneira de escrita incrivelmente fácil e intuitiva, assim como o Mockito. Um exemplo de teste feito com Espresso está disposto abaixo. O exemplo foi retirado da documentação oficial da biblioteca [30]. 39 @Test pub l i c void g r e e t e r S a y s H e l l o ( ) { onView ( w i t h I d (R . i d . n a m e f i e l d ) ) . pe r fo rm ( typeText ( ” Steve ” ) ) ; onView ( w i t h I d (R . i d . g r e e t b u t t o n ) ) . pe r fo rm ( c l i c k ( ) ) ; onView ( wi thText ( ” H e l l o Steve ! ” ) ) . check ( matches ( i s D i s p l a y e d ( ) ) ) ; } Analisando o código, vê-se que inicialmente, o Espresso performa escrita do texto Steve na View com id name field; depois, performa um clique na View com id greet - button; e finalmente, checa se alguma view com o texto Hello Steve! foi mostrada na tela. O código é simples e parece uma frase normal escrita em inglês. Essa biblioteca foi escolhida para os testes de tela por conta da simplicidade de escrita, ótima funcionalidade, recomendação do Google e performance. O aplicativo tem 141 testes automatizados utilizando o Espresso. O tempo médio de execução de todos os testes é de 3 minutos e 30 segundos, o que traduz uma média de 1.4 segundo por teste. Em contexto de testes de aceitação, é uma performance muito boa. 40 Caṕıtulo 5 Resultados O app final está em produção desde fevereiro de 2016. A avaliação geral do app no dia 9 de janeiro de 2017 é de 4, 715 em uma escala de 1, 0 até 5, 0. 5.1 Estat́ısticas O aplicativo conta com mais de 15 mil instalações totais. Todas as estat́ısticas apresentadas neste trabalho são fornecidas pelo Google Developer Console, que é a plataforma por onde se publica apps na Google Play Store. Há um fenômeno interessante ao analisar as estat́ısticas providas. Usuários cos- tumam desinstalar o aplicativo durante os meses durante o peŕıodo, mas há súbitos picos de downloads nas datas de final e ińıcio de peŕıodos. A explicação é que o acesso ao sistema acadêmico é muito reduzido durante o peŕıodo, porém com a ne- cessidade de visualizar notas, aprovações e reprovações, além de inscrição, alteração e trancamento de disciplinas, os acessos aos finais dos termos acadêmicos aumentam significativamente. A avaliação dos usuários, como citado, foi excelente. A Figura 5.1 foi retirada do Google Developer Console e confere estat́ısticas sobre a avaliação dos usuários, como quantidade de avaliações e o rating de cada uma. Como pode ser visto aproximadamente 83% das avaliações foi a nota máxima Figura 5.1: Avaliação dos usuários. 41 Figura 5.2: Total de instalações por usuário. posśıvel (exposta como 5), e 93% das avaliações totais foi de 4 ou 5. A Figura 5.2 mostra o número total de usuários únicos que já instalaram o app em algum dispositivo. Vê-se um crescimento constante no número de usuários que fazem o download do aplicativo, com exceção de um ponto em abril/2016. Neste mês, mais especificamente no dia 12 de abril, foi enviado um e-mail através do SIGA informando sobre o aplicativo. Até então, ele não tinha sido divulgado de forma oficial, e esta é a razão do pico de downloads no peŕıodo. A Figura 5.3, também disponibilizado pelo console da Google, mostra a quanti- dade de downloads de acordo com a localidade. Vê-se que, como esperado, o Brasil é o principal local de onde o app é baixado, com uma porcentagem de 98.02% do total de downloads. No entanto, outros páıses, como os Estados Unidos, França e Portugal, também tem participação no gráfico.Isso sugere que alunos da UFRJ em intercâmbio acadêmico também utilizam o aplicativo no peŕıodo em que estão no exterior, indicando que o produto final agrega valor para os estudantes em seu tempo fora. 42 Figura 5.3: Instalações do app por páıs. 43 Caṕıtulo 6 Conclusões e Trabalhos Futuros 6.1 Conclusões Como analisado nos Caṕıtulos 2 e 3, o desenvolvimento utilizando a abordagem nativa garante o melhor desempenho e experiência do usuário posśıvel. Esses dois fatores contribuem com um peso muito grande para a aceitação do produto final, como explicitado na Seção 3.3. O grande ponto negativo da abordagem nativa é o custo da operação. É ne- cessário desenvolver o mesmo produto várias vezes: uma para cada plataforma esco- lhida. Outro problema é a manutenibilidade, visto que será necessária uma equipe especializada em cada SDK de cada sistema operacional para que o produto con- tinue a receber atualizações e eventuais correções de bugs. Todo este processo é custoso não somente com relação a dinheiro mas também a tempo. Em contrapartida, a abordagem h́ıbrida web oferece soluções mais baratas: re- quer equipes menores e espaços de tempo menores para lançamento e atualização dos produtos, visto que se trabalha somente com um código base. No entanto a experiência do usuário é significativamente inferior quando comparada à abordagem nativa. Um outro ponto negativo da abordagem h́ıbrida web é que não existe um fra- mework oficial para este tipo de desenvolvimento, e considerando a possibilidade de surgimento de vários novos frameworks ao longo do tempo, a decisão de qual framework utilizar para desenvolver um produto, pensando no longo prazo, é uma decisão grande a se tomar. Portanto, o desenvolvimento nativo leva a maior vantagem na maioria dos que- sitos analisados, como interface gráfica, experiência do usuário, segurança e per- formance, levando ao melhor produto final posśıvel, apesar do considerável maior custo. 44 6.2 Trabalhos Futuros O próximo passo depois da release da versão Android foi o desenvolvimento do app para iOS, o segundo maior market share como conferido pela Figura 2.1. Dessa forma, a grande maioria dos alunos é atendida com aplicativos com a maior perfor- mance e satisfação de experiência de usuário posśıvel. Além disso, com as tecnologias utilizadas e o aplicativo já em produção e devi- damente testados, há a abertura para expansão do conceito para escopos diferentes do SIGA. Um exemplo é estender as funcionalidades para utilização de professores e coordenadores de curso da UFRJ, assim como algumas funcionalidades de técnicos- administrativos. 45 Referências Bibliográficas [1] MARCIO, F. “Blog Licenciados em Graduação UFRJ”. . https:// licenciadosemgraduacaoufrj.wordpress.com/, 2005. [2] A-TEAM ORACLE. “Performance Study – REST vs SOAP for Mobile Applications”. . http://www.ateam-oracle.com/ performance-study-rest-vs-soap-for-mobile-applications/, feb. 2015. Acessado em Janeiro de 2017. [3] INFOQ. “Is REST Successful in the Enterprise?” . https://www.infoq.com/ news/2011/06/Is-REST-Successful, jun 2011. Acessado em Janeiro de 2017. [4] GOOGLE. “Google Material Design website”. . https:// material.io/guidelines/layout/metrics-keylines.html# metrics-keylines-keylines-spacing, . Acessado em Janeiro de 2017. [5] VALOR. “Número de usuários de smartphones no Brasil cresce 483o trimestre”. . http://www.valor.com.br/empresas/4327844/ numero-de-usuarios-de-smartphones-no-brasil-cresce-48-no-3-trimestre, nov. 2015. [6] STATISTA. “Number of available applications in the Go- ogle Play Store from December 2009 to December 2016”. . https://www.statista.com/statistics/266210/ number-of-available-applications-in-the-google-play-store/. Acessado em Janeiro de 2017. [7] “Number of available apps in the Apple App Store from July 2008 to January 2017”. . https://www.statista.com/statistics/263795/ number-of-available-apps-in-the-apple-app-store/. [8] IDC. “Smartphone OS Market Share, 2016 Q3”. . http://www.idc.com/ prodserv/smartphone-os-market-share.jsp, nov. 2016. Acessado em Janeiro de 2017. 46 https://licenciadosemgraduacaoufrj.wordpress.com/ https://licenciadosemgraduacaoufrj.wordpress.com/ http://www.ateam-oracle.com/performance-study-rest-vs-soap-for-mobile-applications/ http://www.ateam-oracle.com/performance-study-rest-vs-soap-for-mobile-applications/ https://www.infoq.com/news/2011/06/Is-REST-Successful https://www.infoq.com/news/2011/06/Is-REST-Successful https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing http://www.valor.com.br/empresas/4327844/numero-de-usuarios-de-smartphones-no-brasil-cresce-48-no-3-trimestre http://www.valor.com.br/empresas/4327844/numero-de-usuarios-de-smartphones-no-brasil-cresce-48-no-3-trimestre https://www.statista.com/statistics/266210/number-of-available-applications-in-the-google-play-store/ https://www.statista.com/statistics/266210/number-of-available-applications-in-the-google-play-store/ https://www.statista.com/statistics/263795/number-of-available-apps-in-the-apple-app-store/ https://www.statista.com/statistics/263795/number-of-available-apps-in-the-apple-app-store/ http://www.idc.com/prodserv/smartphone-os-market-share.jsp http://www.idc.com/prodserv/smartphone-os-market-share.jsp [9] BADER, W. I., HAMMOURI, A. I. “Responsive Web Design Techni- ques”, International Journal of Computer Applications, v. 150, n. 2, pp. 18–27, Sep 2016. ISSN: 0975-8887. doi: 10.5120/ijca2016911463. Dispońıvel em: ¡http://www.ijcaonline.org/archives/volume150/ number2/26066-2016911463¿. [10] DANIEL NATIONS. “Improve Your Understanding of Web Applications”. . https://www.lifewire.com/what-is-a-web-application-3486637, out. 2016. Acessado em Janeiro de 2017. [11] ANANYA BHATTACHARYA. “Android just hit a re- cord 88smartphones”. . https://qz.com/826672/ android-goog-just-hit-a-record-88-market-share-of-all-smartphones, nov. 2016. [12] JOHN BRISTOWE. “What is hybrid mobile app”. . http://developer. telerik.com/featured/what-is-a-hybrid-mobile-app/, mar. 2015. [13] NUNES, S., DAVID, G. “Uma Arquitectura Web para Serviços Web”. . http: //hdl.handle.net/10216/281, 2005. [14] HASSENZAHL, M. “User Experience (UX): Towards an Experiential Pers- pective on Product Quality”. In: Proceedings of the 20th Conference on L’Interaction Homme-Machine, IHM ’08, pp. 11–15, New York, NY, USA, 2008. ACM. ISBN: 978-1-60558-285-6. doi: 10.1145/1512714.1512717. Dispońıvel em: ¡http://doi.acm.org/10.1145/1512714.1512717¿. [15] TSAI, M.-J., CHEN, D.-J. “Generating user interface for mobile phone de- vices using template-based approach and generic software framework”, WOS:000248237300016, 2007. Dispońıvel em: ¡https://ir.nctu.edu. tw/handle/11536/10634¿. [16] APPLE. “Apple design website”. . https://developer.apple.com/ios/ human-interface-guidelines/ui-views/action-sheets/. Acessado em Janeiro de 2017. [17] ONSEN UI. “Onsen UI website”. . https://onsen.io. Acessado em Janeiro de 2017. [18] IONIC. “Ionic website”. . https://developer.apple.com/ios/ human-interface-guidelines/ui-views/action-sheets/. Aces- sado em Janeiro de 2017. 47 http://www.ijcaonline.org/archives/volume150/number2/26066-2016911463 http://www.ijcaonline.org/archives/volume150/number2/26066-2016911463 https://www.lifewire.com/what-is-a-web-application-3486637 https://qz.com/826672/android-goog-just-hit-a-record-88-market-share-of-all-smartphones https://qz.com/826672/android-goog-just-hit-a-record-88-market-share-of-all-smartphones http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/ http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/ http://hdl.handle.net/10216/281 http://hdl.handle.net/10216/281 http://doi.acm.org/10.1145/1512714.1512717 https://ir.nctu.edu.tw/handle/11536/10634
Compartilhar