relatÓrio final - fatecsorocaba.edu.br · para fins de elaboração do aplicativo, inicialmente...
TRANSCRIPT
FACULDADE DE TECNOLOGIA DE SOROCABA
ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
RELATÓRIO FINAL
Felipe Luiz Soares
PetAppy – Aplicativo para proteção dos animais
Sorocaba
Julho/2017
PetAppy – Aplicativo para proteção dos animais
Felipe Luiz Soares
Orientador: Prof. Dr. Paulo Edson Alves Filho
Sorocaba
Julho/2017
SUMÁRIO
RESUMO ........................................................................................................................... 3
LISTA DE ABREVIATURAS E SIGLAS ..................................................................................... 4
LISTA DE FIGURAS.............................................................................................................. 5
1 INTRODUÇÃO E JUSTIFICATIVA ................................................................................... 6
2 OBJETIVOS ................................................................................................................ 10
3 MATERIAIS E MÉTODOS ............................................................................................ 11 3.1 Etapas ......................................................................................................................... 14 3.2 Ferramentas ................................................................................................................ 14
3.2.1 Ferramentas instaladas no computador do autor(aluno) ............................................. 14 3.2.2 Ferramentas instaladas no servidor .............................................................................. 15
4 RESULTADOS E DISCUSSÕES ...................................................................................... 16 4.1 Elaboração de um protótipo do sistema ....................................................................... 16
4.1.1 Entendimento do problema ............................................................................................. 16 4.1.2 Divergência de soluções ................................................................................................. 16 4.1.3 Prototipagem ..................................................................................................................... 17 4.1.4 Validação ........................................................................................................................... 17
4.2 Telas finais da aplicação ............................................................................................... 18 4.3 Problemas encontrados ............................................................................................... 23
CONCLUSÃO .................................................................................................................... 24
REFERÊNCIAS ................................................................................................................... 25
GLOSSÁRIO...................................................................................................................... 26
3
RESUMO
Esta pesquisa é resultado de uma aplicação de fácil acesso e alta disponibilidade
que una a comunidade de pessoas interessadas na causa de animais abandonados
e que tem como propósito principal ajudar a encontrar animais perdidos e
disponibilizar uma plataforma capaz de unificar os anúncios e o resgate de animais
que estão sem um lar definitivo. O protótipos e telas em questão usam
ensinamentos e boas práticas consequentes de pesquisas baseadas em Jabok
Nielsen, Hoa Loranger e Don Norman, métodos que serão abordados ao decorrer do
texto. Com esta aplicação buscamos aumentar o número de animais achados
através dos anúncios de achado ou perdido dentro do aplicativo, contando com o
uso da geolocalização para otimizar o resgate de animais em áreas determinadas,
mostrando os anúncios próximos conforme a localização do usuário. Os protótipos
iniciais do sistema foram desenhados e polidos até a versão que se encontra
finalizada e capaz de solucionar o problema tratado pela iniciação através de um
produto. A versão desenvolvida apresenta consigo aspectos de usabilidade,
preocupação em atender o público pesquisado de forma prática e direta, focando na
experiência do usuário para prover a maior aderência possível pelo público alvo da
aplicação.
Palavras-Chave: Android, React Native, usabilidade, front-end, Design Sprint.
4
LISTA DE ABREVIATURAS E SIGLAS
API – Application Programming Interface (Interface de Programação de Aplicativo).
BD - Banco de Dados.
GNU – GNU’s not Unix (GNU não é Unix).
5
LISTA DE FIGURAS
Figura 1 Modelo do aplicativo desenho no papel. ........ Erro! Indicador não
definido.
Figura 2 Modelagem da prototipação do aplicativo no Photoshop CS6.
................................................................. Erro! Indicador não definido.
Figura 3 Modelo do protótipo navegável no Marvel. .... Erro! Indicador não
definido.
Figura 4 Modelagem do aplicativo no Experience Design. .. Erro! Indicador
não definido.
Figura 5 Modelo do protótipo navegável feito no Experience Design. . Erro!
Indicador não definido.
Figura 6 Tela inicial do aplicativo. ......................................................... 18
Figura 7 Tela para entrar com a conta do aplicativo. .............................. 19
Figura 8 Tela inicial quando o usuário entrou com sua conta no aplicativo.
........................................................................................................... 19
Figura 9 Menu lateral aberto exibindo as opções anteriormente ocultas. . 20
Figura 10 Primeira tela do cadastro de um anúncio: Tipo do anúncio. ..... 20
Figura 11 Segunda tela do cadastro de um anúncio: Informações do
animal. ................................................................................................ 21
Figura 12 Terceira tela do cadastro de um anúncio: Localização do animal.
........................................................................................................... 21
Figura 13 Quarta tela do cadastro de um anúncio: Informações do contato.
................................................................. Erro! Indicador não definido.
Figura 14 Tela de conclusão de cadastro de anúncio. . Erro! Indicador não
definido.
6
1 INTRODUÇÃO E JUSTIFICATIVA
Nas ruas de Sorocaba é alto o índice de animais que são perdidos e seus
donos não conseguem achá-los pelos mecanismos de busca e anúncios existentes,
como, procurar pelas proximidades de onde moram, divulgar anúncios pelas ruas ou
redes sociais, não obtendo sucesso.
Para suprir essa demanda desenvolvemos uma aplicação para dispositivos
móveis que aborda anúncios de animais perdidos e anúncios de animais
encontrados.
Há uma grande comoção social com a causa animal constada através de
várias comunidades engajadas com o movimento. Existem milhares de protetores
espalhados pela nossa região e nenhum local onde se possa encontrar essas
pessoas de forma organizada ou bem estruturada, normalmente um caminho para
interação e localização entre elas são as redes sociais, utilizando algum grupo no
Facebook como constado durantes pesquisas feitas durante esta iniciação científica.
Após conversar com protetores de animais de nossa região detectamos
várias necessidades ainda não solucionadas. Entre elas, o desencontro de
informação que ocorre no anúncio de animais perdidos e avisos de animais
encontrados. Existem muitas páginas nas redes sociais que tem como foco este
assunto, entretanto muitas vezes as informações se desencontram, como o caso
comum de animais que já foram encontrados e páginas que continuam replicando o
anúncio como se eles ainda estivessem perdidos.
Outro problema é a grande quantidade de animais abandonados ou de rua
que precisam de cuidados e nem sempre encontram ajuda. Há pessoas dispostas a
cuidar deles e, por vezes, nunca viram uma oportunidade de adotar um animal.
Apesar de não ser tratado nesta versão do aplicativo, uma funcionalidade como a
descrita seria de grande potencial para uma versão futura.
Para fins de elaboração do aplicativo, inicialmente foram levantadas várias
situações possíveis e relevantes a serem testadas, tais como os casos de pessoas
querendo adotar animais, pessoas que perderam algum animal ou pessoas que
encontraram um animal e estão à procura de seu devido dono.
7
A partir desses possíveis cenários, foi modelado e criado o aplicativo PetAppy
que, além de conter a funcionalidade principal de anunciar um animal perdido ou
achado, também é uma plataforma para unificar as informações e usuários, podendo
suportar funcionalidades futuras e por fim trazer informações de forma unificada,
facilitando os processos que a comunidade de protetores de nossa região efetuam.
8
2 REVISÃO BIBLIOGRÁFICA
Para a realização desta pesquisa, tomamos como referencial para a
elaboração dos protótipos de telas e revisão e design do fluxo de informação o artigo
Usability Heuristics for User Interface Design (NIELSEN: 1995), no qual o autor
afirma itens essenciais que toda aplicação deveria conter em sua interface, assim
como “A visibilidade do estado do sistema, que sempre deve manter o usuário
informado sobre o que está acontecendo, além de retornar o feedback apropriado
em um tempo razoável” (NIELSEN: 1995) 1. Sendo assim, o aplicativo informa o
usuário quando enviou algum anúncio, concluiu alguma etapa do processo de
cadastro ou possui anúncios similares que podem se referir ao anúncio que foi
cadastrado pelo usuário.
Outro item essencial destacado por Nielsen no mesmo artigo trata sobre a
equivalência de informações sendo “A Equivalência entre o sistema e o mundo real,
sendo assim o sistema deve falar a linguagem do usuário”, utilizando frases,
conceitos que são familiares, fazer a informação ser apresentada de uma forma
natural e lógica” aderindo a esses conceitos procuramos usar uma linguagem fácil
para descrever as ações do sistema de forma clara e objetiva. O artigo também diz
sobre consistência e padrões que devem ser usados dentro do sistema nos
seguintes termos, “evitar palavras diferentes para indicar as mesmas ações”
(NIELSEN: 1995) ³, com base nisso definimos que botões que possuem uma ação
equivalente devem ter o mesmo nome, cor, ajudando o usuário a se lembrar da
funcionalidade a partir de um uso anterior, ou tela anterior.
Entre outras heurísticas descritas no mesmo artigo, que focam em
simplicidade, design minimalista, documentação flexibilidade e eficiência de uso.
Para atender melhor e continuar a informar o usuário sobre os passos de
cadastros que são grande parte de uso do sistema, nos atentamos ao que é dito por
Nielsen no livro Usabilidade na Web, “Caso o site tenha uma arquitetura hierárquica
de informações, a melhor maneira de fazer a orientação é normalmente uma trilha
de migalhas de pão” (NIELSEN: 2000) ², ou seja, links que indicam a localização
atual do usuário no contexto da hierarquia do site e permitem que os usuários
subam ou desçam pela hierarquia. Adaptamos isso para a aplicação mobile,
9
mantendo o usuário informado a cada etapa do processo de cadastro de um
anúncio.
Foi utilizado como referência bibliográfica o livro The Design of Everyday
Things (NORMAN: 2013) para estender os conceitos de usabilidade e experiência
do usuário, e para isso temos os sete estágios de uma ação, sendo os sete
fundamentais princípios de design descritos no livro da seguinte forma “O que eu
quero realizar; quais as maneiras de realizar; qual ação eu posso fazer agora; como
eu posso fazer isso; o que aconteceu; o que isso significa; isso está certo, eu
completei meu objetivo? ” (NORMAN: 2013) que foi essencial para a finalização do
trabalho aqui descrito.
1
1 The system should always keep users informed about what is going on, through appropriate
feedback within reasonable time.
² Users should not have to wonder whether different words, situations, or actions mean the same
thing. Follow platform conventions.
³ The system should speak the users' language, with words, phrases and concepts familiar to the user,
rather than system-oriented terms. Follow real-world conventions, making information appear in a
natural and logical order.
10
2 OBJETIVOS
Com o objetivo de prover uma união entre os diversos grupos, entidades e
apoiadores à proteção de animais, assim como possibilitar uma forma mais eficiente
de encontrar seu animal a partir da base de informações do aplicativo proposto, foi
feito um aplicativo desenvolvido tanto para aparelhos iPhone quanto para aparelhos
Android que possuem maior adesão no mercado nacional.
Como parte do processo da iniciação, foram desenvolvidos protótipos que se
iniciaram no papel e se finalizaram com uma versão navegável. A partir de ideias
debatidas com o grupo da iniciação, foram desenhados os possíveis fluxos que o
sistema atualmente possui. Após o acabamento e o encaminhamento dado a partir
da metodologia de desenvolvimento de produtos Design Sprint o produto foi
finalizado em sua versão idealizada.
O processo de criação do aplicativo possui arquitetura front-end, pensada e
utilizada para comportar as telas que estão sendo feitas na plataforma React Native,
que possibilita o desenvolvimento tanto para iPhone quanto para Android a partir do
mesmo código fonte, escrito em React, framework JavaScript e para a estilização
das telas e construção do estilo foi utilizado CSS Modules que resumidamente se
entende por escrever o código CSS dentro do JavaScript através de objetos.
11
3 MATERIAIS E MÉTODOS
Para iniciar esse projeto foram utilizados protótipos para o desenvolvimento
de design inicial de simulação da aplicação final.
Levantamos as necessidades da comunidade que motivam o projeto através
de entrevistas e diálogos, assim como problemas enfrentados pelas pessoas
envolvidas na causa animal para termos uma avaliação inicial de como a aplicação
proposta pode atendê-los.
Para a criação dos primeiros desenhos, e primeiras ideias de fluxos do
sistema, tendo como base toda informação coletada e problemas e processos
definidos, foram utilizados caneta e papel conforme pode ser visto na figura 1,
simplesmente expondo as ideias e procurando entender a visão de cada membro da
equipe sobre como o fluxo de informações deveria ocorrer.
Figura 1 Modelo do aplicativo desenho no papel.
A figura 2 exibe o protótipo criado que se deu a partir dos desenhos iniciais
feitos com a intenção de definir o fluxo, conforme a figura 1. Ainda neste protótipo
não temos como foco o visual em si ou a versão final que será entregue, mas sim
uma ideia palpável do que será a aplicação, o mesmo foi desenho no Photoshop.
12
Figura 2 Modelagem da prototipação do aplicativo no Photoshop CS6.
Após todo o desenho feito inicialmente no Photoshop a proposta foi refinada e
logo a seguir se tem a sua versão navegável utilizando o Marvel que pode ser vista
na figura 3.
Figura 3 Modelo do protótipo navegável no Marvel.
13
A partir da primeira versão finalizada e prototipada de forma navegável foram
testados outros fluxos, formas de design, paleta de cores e outros softwares para
alcançar o design mais próximo do desejável, sendo a versão seguinte feita no
Experience Design, conforme figura 4.
Figura 4 Modelagem do aplicativo no Experience Design.
No Experience Design além da versão desenhada como pode ser visto na
figura 4, também foi construído a versão navegável de forma mais otimizada que a
versão anterior feita no Marvel abrangendo todos os fluxos e botões da aplicação
como pode ser visto na figura 5.
Figura 5 Modelo do protótipo navegável feito no Experience Design.
14
3.1 Etapas
Conforme ajustado entre a equipe de desenvolvimento do projeto, as etapas
da pesquisa são as seguintes:
1. Primeira etapa: revisão bibliográfica, concluída;
2. Segunda etapa: pesquisa para entender a situação atual, suas principais
falhas e como resolve-las, concluída;
3. Terceira etapa: instalação de todos os sistemas (Ruby, Rails, React Native e
React) para estudo e melhor entendimento de cada um, concluída.
4. Quarta etapa: criação do primeiro design do aplicativo logo em sua primeira
versão, gerando assim uma nova versão de cada modificação realizada,
concluída.
5. Arquitetura do front end da aplicação que consumirá a API desenvolvida em
Rails.
6. Desenvolvimento da API desenvolvida em Rails, que conterá o sistema em si
e armazenará os dados da aplicação.
3.2 Ferramentas
3.2.1 Ferramentas instaladas no computador do autor(aluno)
GNU/Linux Ubuntu 14.04 x86
MacOS Sierra 10.12.6
Ruby – Versão 2.2.1p85
Rails – Versão 4.2.5
Postgresql – Versão 9.3
React Native - Versão 0.47
HTML 5
CSS 3
React – Versão 15.6.1
15
ECMAScript 6
PhotoShop CS6
Experience Design CC Beta
Marvel App Free Version
3.2.2 Ferramentas instaladas no servidor
GNU/Linux Ubuntu 14.04 x86
Ruby – Versão 2.2.1p85
Rails – Versão 4.2.5
Postgresql – Versão 9.3
4.2.2.3 Ruby
Ruby é a linguagem de programação utilizada no Web Service. Dinâmica,
open source com foco na simplicidade e na produtividade. Tem uma sintaxe
elegante de leitura natural e fácil escrita. (RUBY, 2015). Ela foi utilizada na parte de
back-end da aplicação, provendo todo o sistema que conversa com o banco de
dados e fornece os dados para o front-end.
4.2.2.4 Ruby On Rails
Framework de desenvolvimento web na linguagem Ruby. É um framework
livre focado na velocidade e facilidade no desenvolvimento de sites orientados a
banco de dados (database-driven web sites), uma vez que é possível criar
aplicações com base em estruturas pré-definidas. (RAILS, 2015). O framework foi
utilizado em conjunto com o Ruby já citado, para facilitar a conversa com o banco de
dados e manipulação dos dados trazidos do banco para a distribuição ao front-end.
4.2.2.5 Postgresql
Banco de dados relacional open-source. Indicado para o desenvolvimento de
aplicações em Ruby On Rails. "O Postgresql é um SGBD (Sistema Gerenciador de
Banco de Dados) objeto-relacional de código aberto, com mais de 15 anos de
desenvolvimento. É extremamente robusto e confiável, além de ser extremamente
flexível e rico em recursos. Ele é considerado objeto-relacional por implementar,
além das características de um SGBD relacional, algumas características de
orientação a objetos, como herança e tipos personalizados. ” (OLIVEIRA, 2003).
16
Banco de dados utilizado no back-end para armazenas os dados dos anúncios e
usuários sendo conectado com o Ruby.
4 RESULTADOS E DISCUSSÕES
4.1 Elaboração de um protótipo do sistema
Para conhecer melhor o problema que foi tratado nesta iniciação, para realizar
ajustes durante o processo de desenvolvimento do produto, design da solução
através de um aplicativo, além de guia para desenvolver a aplicação juntamente com
a equipe da iniciação científica, adotamos a metodologia utilizada pelo Google para
desenvolver seus produtos, chamada Design Sprint, que é uma metodologia ágil
focada na experiência do usuário e nos processos de design do produto, colocando
também em si a lógica de negócio, mantendo especialmente o usuário como foco e
centro de toda a operação de desenvolvimento.
O processo utilizado para a elaboração do protótipo possui cinco fases com
focos diversificados que se complementam para a conclusão do produto que é
proposto:
4.1.1 Entendimento do problema
Os objetivos dessa etapa foram buscar um melhor entendimento do problema
proposto pela equipe como um todo e alinhar o conhecimento sobre o problema.
Levantamos questionamentos sobre o que ocorre na realidade das pessoas
que são protetoras de animais e nos processos de adoção, localização de animais
perdidos entre outras questões que fazem parte do dia a dia desse ecossistema.
Após pesquisas realizadas, entendemos melhor os principais problemas que
precisavam ser solucionados.
4.1.2 Divergência de soluções
Trabalhamos individualmente colocando as soluções para aquele problema
ou ideia no papel. O fluxo se tornou mais palpável conforme as informações que
17
foram reconhecidas tomaram forma no papel. Cada pessoa desenhou sua própria
visão do fluxo e da aplicação, sem contato com os desenhos dos demais.
4.1.3 Prototipagem
Uma vez definido o protótipo navegável ideal, desenhamos as telas com a
ferramenta Photoshop e utilizamos a ferramenta Marvel para navegação, após essa
validação concluímos outro protótipo feito no Experience Design, mais fiel e mais
elaborado.
4.1.4 Validação
Nessa última etapa na qual a validação do produto foi feita analisamos todo
conjunto de diretrizes levantados durante as pesquisas realizadas de acordo com a
revisão bibliográfica descrita nesta iniciação, testamos o fluxo de informação do
sistema, mensagens para o usuário, disposição de componentes na tela, hierarquia
de informações e noção de localização durante fluxos de cadastro. Foi devidamente
testado amostras do público irá utilizar o produto. Foi validado o funcionamento da
aplicação, cadastro de um anúncio de um animal perdido, cadastrado de um anúncio
de um animal achado, criar conta e visualizar anúncios cadastrados. A partir da
validação nesses pontos com os usuários, obteve-se a resposta sobre o produto,
com o feedback positivo da ideia, logo, levamos em frente o desenvolvimento do
produto.
18
4.2 Telas finais da aplicação
Como resultado em termos de produto, temos as telas finais da aplicação que são
frutos de todo o processo de prototipagem, revisão de fluxo que foi feito durante a
iniciação cientifica. Essas telas consomem a API feita na linguagem Ruby, utilizando
o framework Ruby On Rails e utilizando o DB Postgresql, detalhados mais afundo
em outras pesquisas.
A primeira tela exibida ao iniciar a aplicação é a que pode ser visualizada na
figura 6, nela o usuário tem somente dois caminhos possíveis: entrar na aplicação
com sua conta já existente clicando no botão “Login” ou criar uma nova conta ao
clicar no botão “Criar Conta”.
Figura 6 Tela inicial do aplicativo.
Caso o usuário efetue o clique no botão “Login” visualizado na figura 6, será
encaminhado para a próxima tela na qual deve preencher os dois campos
obrigatórios: e-mail e senha e em seguida clicar no botão entrar na figura 7.
Caso desejar voltar para a tela anterior deve clicar no botão cancelar.
19
Figura 7 Tela para entrar com a conta do aplicativo.
Assim que o usuário entrar com sua conta será encaminhado para a tela
principal na qual são exibidos os anúncios mais próximos do mesmo definidos
pela localização fornecida pela API do dispositivo utilizado conforme a figura 8.
Nessa mesma tela existem outros elementos como: a barra superior na qual a
opção de pesquisar já se encontra exposta pelo ícone de busca e o ícone de
“hambúrguer”. O botão vermelho exposto na parte inferior da tela com um
símbolo de “+” é um atalho rápido para a ação principal do aplicativo que é
cadastrar um novo anúncio, podendo ser tanto de um animal que foi perdido ou
achado, sendo definido também na figura 8. Cada anuncio exibido tem uma
apresentação simples nesta tela, contendo o nome do animal, localização de
onde foi perdido ou achado e um botão “Achei” ou “Perdi” o qual o usuário pode
clicar para interagir com o anúncio.
Figura 8 Tela inicial quando o usuário entrou com sua conta no aplicativo.
20
Clicando no ícone de “hambúrguer” o usuário tem acesso a um menu lateral
contendo as opções de adicionar um novo anúncio sendo visto na figura 9,
configurações sobre o aplicativo, mais informações sobre o aplicativo e seu
mantenedores ou sair da aplicação. Para esconder o menu basta clicar
novamente no ícone que antes era o “hambúrguer” e agora é uma seta
apontando para baixo.
Figura 9 Menu lateral aberto exibindo as opções anteriormente ocultas.
Ao clicar no botão vermelho com o ícone de “+” na tela principal ou na opção
“Adicionar um anúncio” o usuário é encaminhado para a primeira tela do
cadastro de uma anúncio representado na figura 10, na qual o mesmo deve
selecionar o tipo de anuncio que deseja cadastrar podendo ser o de “Perdi um
animal” ou “Encontrei um animal”.
Figura 10 Primeira tela do cadastro de um anúncio: Tipo do anúncio.
Ao escolher um tipo de anúncio a próxima tela é dedicada as informações do animal
que devem ser preenchidas como a figura 11, sendo campos obrigatórios apenas o
21
nome do animal e data da última vez quando foi visto. Para continuar o fluxo de
cadastro é necessário clicar no botão “Selecionar Localização”.
Figura 11 Segunda tela do cadastro de um anúncio: Informações do animal.
Após clicar em “Selecionar Localização” a tela mostrada a seguir, figura 12,
possui um mapa onde deve ser colocado a ultima localização conhecida do animal.
Nesta tela o usuário deve selecionar no mapa a ultima localização do animal que foi
perdido ou achado e clicar no botão “Cadastrar Contato” para continuar com o
processo de cadastro do anúncio.
Figura 12 Terceira tela do cadastro de um anúncio: Localização do animal.
Para finalizar o processo de cadastro a ultima tela de preenchimento é exibida
como pode ser observado na figura 13, nesta etapa o usuário deve colocar o nome,
22
telefone ou e-mail, sendo pelo menos um deles obrigatório juntamente com o nome
e por fim clicar no botão “Concluir Cadastro”.
Figura 13 Quarta tela do cadastro de um anúncio: Informações do contato.
Após a conclusão a partir da tela apresentada na figura 13, para mostrar ao
usuário que o cadastro foi feito é exibida uma tela encaminhando como a figura 14
demonstra e a seguir para a tela inicial novamente onde o usuário pode visualizar o
seu novo anúncio cadastro e os mais próximos cadastrados por outros usuários.
Figura 14 Tela de conclusão de cadastro de anúncio.
23
4.3 Problemas encontrados
Na parte inicial do projeto, efetuamos diversas pesquisas para levantar dados
referentes ao nicho que pretendíamos implementar uma solução, enviamos e-mails
e formulários para preenchimento para perguntar sobre quais eram os principais
problemas que essas pessoas encontravam no dia a dia.
Com a pesquisa descobrimos que existe uma grande comunidade de pessoas
interessadas na causa de animais abandonados e que possuem diversos problemas
sobre divulgação de anúncios, devolução de animais adotados, encontrar animais
feridos que foram atropelados entre outros problemas destacados pelas respostas
dadas.
Conversamos com Mirna Modolo e Estela Casagrande, protetoras da cidade
de Sorocaba. Ambas contribuíram para a pesquisa compartilhando experiências de
vida e demonstrando os problemas reais que protetores encontram ao tentar ajudar
os animais. Muitas pessoas que se movem pela causa, se relacionam ou trocam
informações em grupos pequenos o que dificulta a troca de informações entre
grupos de membros diferentes.
24
CONCLUSÃO
No desenvolvimento do trabalho, principalmente na parte de prospecção da
informação e também na formulação de como iríamos abordar as questões
relacionadas a fluxos de informação, à arquitetura da informação dentro do sistema,
ao posicionamento de elementos e às formas de dialogar com o usuário (que
deveriam ser discutidas com mais afinco), foi utilizada a metodologia Design Sprint
para guiar os processos relacionados a definição do produto, desenvolvimento da
solução, desenvolvimento do fluxo ideal, ajuste de telas da aplicação e validação da
aplicação desde o conhecimento inicial da situação dos animais e como os
protetores lidam com as dificuldades nos momentos de anunciar um animal perdido
ou achado, resultando no protótipo final que foi desenvolvido em seguida.
Todo o foco que se deu durante o desenvolvimento da ideia de tratar algum
problema existente relacionado a causa animal e da aplicação da mesma resultando
em uma plataforma que possibilita os anúncios de animais perdidos ou achados
baseou-se nas boas práticas e metodologias descritas por Nielsen e Norman para
compreensão da importância da experiência do usuário e como aplicá-la tanto em
aplicações web como mobile.
Ao final, construímos um sistema para dispositivos móveis chamado PetAppy que
foi desenvolvido para as plataformas Android e iPhone, com a funcionalidade de
anunciar um animal que foi perdido ou achado juntamente com as informações do
animal e dados para contato do dono, exibir os anúncios mais próximos do usuário
de acordo com a localização na página inicial da aplicação e prover uma plataforma
unificada para protetores de animais de nossa região que possa atender esta
demanda e possibilitar a integração e funcionalidades futuras por outras equipes ou
a mesma de desenvolvimento.
25
REFERÊNCIAS
CSS, Mozilla Developer. Disponível em: <https://developer.mozilla.org/pt-BR/docs/Web/CSS>. Acesso em: 16.Set.2016. DUCKETT, Jon. HTML & CSS: Design and Build Web Sites, Wiley, Edição 1, 2011 HTML, Mozilla Developer. Disponível em: <https://developer.mozilla.org/pt-BR/docs/Web/JavaScript>. Acesso em: 14.Set.2016. Javascript, Mozilla Developer. Disponível em: <https://developer.mozilla.org/pt-BR/docs/Web/HTML>. Acesso em: 14.Set.2016. 10 Usability Heuristics for User Interface Design. Disponivel em <https://www.nngroup.com/articles/ten-usability-heuristics/>. Acesso em 18.Out.2016 Native, React, Disponível em: <https://tableless.com.br/react-native-construa-aplicacoes-moveis-nativas-com-javascript/> Acesso em: 14.Set.2016. NIELSEN, JAKOB; LORANGER, HOA. Web Usability. 1a ed.: Elsevier, 2006.
NORMAN, DONALD. The Design of Everyday Things. 1a ed.: Basic Books; Rev Exp edition, 2013. Ruby. Disponível em https://www.ruby-lang.org/pt/ - Acesso em: 14.Set.2016. Ruby On Rails - Disponível em http://rubyonrails.org/ - Acesso em: 14.Set.2016. SAUDATE, Alexandre. REST: Construa APIs inteligentes de maneira simples. São Paulo: Casa do Código, 2014. TEIXEIRA, F. Introdução e Boas Práticas em UX Design. 1a ed. São Paulo: Casa do Código, 2014.
26
GLOSSÁRIO
AUXILIAR DE DOCENTE – Técnico contratado pelo Centro Paula Souza (Fatec)
para auxiliar professores e cuidar das redes e computadores no laboratório de
informática.
API - API é um conjunto de rotinas e padrões de programação para acesso a um
aplicativo de software ou plataforma baseado na Web. A sigla API refere-se ao
termo em inglês "Application Programming Interface" que significa em tradução para
o português "Interface de Programação de Aplicativos".
REACT - Originalmente desenvolvido e, posteriormente, de código aberto pelo
Facebook, React é um framework JavaScript do lado do cliente para construir
interfaces de usuário. O React usa uma sintaxe declarativa e uma extensão
JavaScript chamada JSX para descrever os layouts HTML. Cada componente React
é suportado e configurado por propriedades e estado, as alterações desencadeiam
atualizações por meio de um fluxo de dados unidirecional. Estas atualizações são
otimizadas através de um DOM virtual, que compara os componentes para
assegurar que somente aqueles alterados pela mudança de estado são atualizados.
REACT NATIVE - O React Native é um projeto desenvolvido pelos engenheiros do
Facebook e que consiste em uma série de ferramentas que viabilizam a criação de
aplicações móveis nativas para a plataforma iOS e Android, utilizando o que há de
mais moderno no desenvolvimento Front-end – mirando no futuro. É o estado da
arte no que se refere ao desenvolvimento mobile baseado em JavaScript. O stack do
React Native é poderoso, pois nos permite utilizar ECMAScript 6, CSS Flexbox, JSX,
diversos pacotes do NPM e muito mais. Sem contar que nos permite fazer debug na
mesma IDE utilizada para o desenvolvimento nativo com essas plataformas (além de
tornar o processo extremamente divertido).
ECMA SCRIPT 6 - é uma linguagem de programação interpretada. Foi originalmente
implementada como parte dos navegadores web para que scripts pudessem ser
executados do lado do cliente e interagissem com o usuário sem a necessidade
deste script passar pelo servidor, controlando o navegador, realizando comunicação
assíncrona e alterando o conteúdo do documento exibido.
27
PHOTOSHOP CS6 - Utilizado para desenhar as telas do protótipo inicial do
aplicativo, Adobe Photoshop é um software caracterizado como editor de imagens
bidimensionais do tipo raster (possuindo ainda algumas capacidades de edição
típicas dos editores vectoriais) desenvolvido pela Adobe Systems. É considerado o
líder no mercado dos editores de imagem profissionais, assim como o programa de
facto para edição profissional de imagens digitais e trabalhos de pré-impressão.
EXPERIENCE DESIGN - Experience Design CC é o primeiro programa da Adobe
voltado para designers de interface UI e user experience designers UX, sendo
utilizado para o desenho de telas para diversos dispositivos facilitando a visualização
de todas as formas e prototipação navegável entre as telas já criadas no mesmo
aplicativo.