Capítulo 3

1. Considerações Iniciais
Actualmente existem varias ferramentas disponiveis para o desenvolvimento de
aplicações web e não só, que visam facilitar o desenvolvidor de aplicativos. Nesta secção
será feita uma abordagem sobre as ferramentas utilizadas para o desenvolvimento do
aplicativo.

1.1. Estudo das Tecnologias

1.1.1. Google Maps

Google Maps é um serviço do Google que oferece uma poderosa tecnologia de mapas
amigáveis e informações de locais, incluindo a localização, informações de contatos e
direções de condução.

Segundo Erle e Gibson (2006), Google Maps foi desenvolvida inicialmente

por dois irmãos, Lars e Jens Rasmussen, co-fundadores de Where 2 Technologies
uma empresa dedicada a criação de soluções de mapeamento. A empresa foi
comprada pela Google em outubro de 2004, e logo depois os dois irmão criaram
Google Maps.

Antes de que tivesse uma API pública, alguns desenvolvedores descobriram

uma maneira de hackear Google Maps para incorporar os mapas ao seus próprios
sites, Isso levou a Google a conclusão que havia a necessidade de uma API pública,
e no início de 2005 nas principais localidades dos EUA e posteriormente se
expandiu e passou a servir de referência para a busca de endereços e pontos de
interesse nos demais centros urbanos de outras nações e continentes. Com o passar do
tempo adicionou novas funcionalidades aos usuários, gerando comodidade e facilidades
nunca antes oferecidas, que vão desde o cálculo de rotas, visualização 3D de ruas e
edificações, até informações sobre tráfego, sobre o transporte público, ATM´s, e lojas.

Para Purvis e Sambells (2006), o grande sucesso e aceitação dos usuários,

fez com que pouco depois do lançamento oficial do Maps, foi lançada a sua API
(Application Programming Interface), que permite aos usuários inserir mapas em suas
páginas web, contando com a possibilidade de personalização e customização dos mapas
como bem entenderem.
Para Erle e Gibson (2006), a funcionalidade principal do Google Maps é a
exibição de um mapa no website, partindo de uma coordenada que é exibida
centralizada na tela. Só isso já basta para usuários que buscam ajuda para
localização de ruas e regiões aos redores do endereço fornecido. Como meio de facilitar
o entendimento por parte do usuário a visualização do mapa pode ser feita tanto do modo
cartográfico (onde aparecem as ilustrações das ruas e quadras), como do modo
satélite (exibe uma imagem aérea da área selecionada).

Google Maps é o aplicativo de serviço livre e tecnologia para mapeamento

web fornecido pela empresa Google. Antes do Google Maps, era difícil de pesquisar
ou planejar uma viajem por meio de a pé, carro ou ônibus. Mas o Google Maps torna
mais fácil, oferecendo os mapas de ruas para viajar a pé, de carro ou transporte
público, fornece três visualizações diferentes. Existe uma visualização do mapa
normal, uma vista de imagem por satélite e uma vista terra (Google Earth) para
visualizar imagens e terrenos em 3D para poder obter uma vista panorâmica dessas
imagens e incliná-las, dependendo da necessidade do utilizador. Ela não só fornece
altamente receptivo, interface de mapeamento intuitiva com dados detalhados de rua
incorporados, mas além disso, oferece aos usuários mapas controles embutidos nos
produtos, para ter total controle sobre a exibição de rua e mapa de navegação.

1.1.2. Firebase

O Firebase é uma plataforma para a construção de aplicativos mobile e web através

de ferramentas e infra estruturas que visam ajudar desenvolvedores a construir aplicativos
de qualidade (FIREBASE DATABASE 2016) onde são agrupados diversos serviços
importantes tais como o sistema de análise (Firebase Analytics), sistema de autenticação
de usuário (Firebase Auth), armazenamento (Firebase Storage), banco de dados (Firebase
Realtime Database), hospedagem (Firebase Hosting) entre outros.

O Firebase Realtime Database que consistem em um banco de dados não-relacional

localizado na nuvem fornecido pela Firebase (FIREBASE DATABASE 2016). O termo
NoSQL (banco de dados não-relacional) foi primeiramente utilizado em 1998 como o
nome de um banco de dados relacional de código aberto que não possuía uma interface
SQL. Seu autor, Carlo Strozzi, alega que o movimento NoSQL "é completamente distinto
do modelo relacional e portanto deveria ser mais apropriadamente chamado "NoREL" ou
algo que produzisse o mesmo efeito".

A principal vantagem dos bancos não relacionais é a escalabilidade, claro que o esquema
rigido dos bancos relacionais torna dificil, por exemplo, aumentar um nó em um cluster
de banco de dados, outra vantagem é a flexibilidade da estruturação que além de tornar a
escalabilidade mais fácil facilita a inserção e acesso aos dados. Outra caracterisca que
talvez possa ser vista como vantagem é a manipulação de dados por APIs orientadas a
objetos enquanto no modelo relacional somente via SQL. Pode-se citar ainda, como
desvantagem, a relativa imaturidade do Nosql.

Para este trabalho foi utilizado apenas o serviço de banco de dados não relacional, o
Firebase Realtime Database. Esse banco de dados nada mais é do que uma árvore JSON
gigante em quetodos seus dados estão armazenados nos nodos, o que facilita uma
modelagem simples de dados. O maior benefício do Firebase Database Realtime é que
ele já possui um sistema de sincronização instantânea implementado, fazendo com que,
caso ocorra uma modificação no banco, todos os aplicativos que tenham a referência
daquele item, o actualizem automaticamente, ao invés de trabalhar com requisição e
resposta normalmente utilizado em outros bancos.

As principais funcionalidades da plataforma Firebase:

 Autenticação - suporte para autenticação de usuários via e-mail, Facebook,

GitHub, Google Sign-In e Twitter;

 Database - um banco de dados NoSQL utilizado para armazenar dados JSON;

 Hosting - uma CDN (Content Delivery Network) distribuída globalmente para

servir aplicações web;

 Messaging - o antigo Google Cloud Messaging (GCM) é o novo Firebase Cloud

Messaging (FCM);

 Offline - possibilita a armazenagem de dados na memória cache local, permitindo

assim o funcionamento da aplicação em estado offline;

 Real time - os dados são armazenados em tempo real no banco de dados;

 Storage - armazena as mídias do usuário, como áudio, imagens e vídeos;

  Synchronization - quando os dados são alterados em um dispositivo eles são
enviados para o Firebase e então para todos os dispositivos conectados. Caso
existam dispositivos offline neste momento os mesmos serão atualizados com a
última versão dos dados logo após a conexão com a internet;

1.1.3. Angular 2

Angular é uma plataforma para construir aplicações de cliente em HTML e JavaScript ou

uma linguagem como TypeScript que compila JavaScript, por esse motivo hoje é uma
das ferramentas mais largamente utilizada para desenvolvimento web.

O Angular depende de recursos e funcionalidades fornecidos por uma variedade de

pacotes de terceiros. Esses pacotes são mantidos e instalados com o Node Package
Manager (npm). Node.js e npm são conhecidos como gerenciadores de pacotes do angular
e são essenciais para o desenvolvimento Angular.

O Angular possui, entre seus desenvolvedores, dois modos principais de organização de

projetos: Organização por componente ou Organização por funcionalidade. O primeiro
modo descreve que os diretórios do projeto devem ser estruturados para guardar todos os
componentes semelhantes na mesma pasta, deixando por exemplo todos os controladores
na pasta Controladores e todas as diretivas na pasta Diretivas. O segundo modo descreve
que funcionalidades semelhantes devem ser armazenadas na mesma pasta, nomeadas pelo
nome da funcionalidade (KUKIC, 2014).

O Angular 2 é uma plataforma que permite desenvolver aplicações web e mobile, mantido
pela Google. Apesar de ser a segunda versão da plataforma, Angular 2 não é a continuação
do Angular 1 com melhores e novas funcionalidades, foi reescrito.

A plataforma é constituida por:

 componentes,
 modulo,
 templates,
 diretivas,
 serviços,
 data-binding,
 validação de formulários,
 roteamento (single page application – SPA)
Algumas vantagens do Angular 2:

 Extremamente declarativo, sendo muito fácil entender o funcionamento das

aplicações lendo apenas o HTML.
 O Angular 2 foi criado para que o desenvolvedor possa escrever o mínimo de
código possível.
 Esta plataforma cria, actualiza e destrói componentes à medida que o usuário se
move através do aplicativo.
 Permite a e interação de forma dinâmica com vários componentes da aplicação.

1.1.4. HTML (Hyper Text Markup Language)

Para Fernandes (2008), através da World Wide Web é possível acessar
informações armazenadas em documentos escritos usando-se uma linguagem
chamada Hyper Text Markup Language (HTML). Esta linguagem, inventada por Tim
Berners-Lee no Laboratório CERN na Suíça, é composta por comandos através dos quais
é possível definir a aparência e a estrutura de documentos.

O HTML 5 (Hypertext Markup Language) é a quinta versão da linguagem HTML. Esta

nova versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da
web, trazendo novas funcionalidades como semântica e acessibilidade, com novos
recursos antes só possíveis por meio de outras tecnologias, e trazendo uma importante
disseminação dentre todos os novos navegadores de internet, tornando-o dessa forma
mais universal.

De acordo com Martins (2010), após dez anos sem atualizações, a forma como se escreve
páginas na Internet passa por uma significativa transformação. O HTML5 oferece uma
experiência web totalmente diferente para usuários tornando a navegação mais rápida,
simples e melhorando a performance de uma página web, embora exista um longo
caminho para ser finalizado, muitos navegadores importantes já implementaram grandes
partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.

É importante mencionar que o HTML5 ainda está em desenvolvimento e aos poucos

passará por mudanças. Devido a suas capacidades tão impressionantes e alto padrão,
podemos dizer com alguma segurança que qualquer coisa envolvendo HTML5 terá um
grande impacto na internet.
1.1.5. Typescript

O Typescript foi desenvolvido pela Microsoft e é uma versão de Javascript que suporta
funcionalidades como classes no estilo da Orientação a Objetos, bem parecido com o que
temos em Java e C#. é sonsiderada uma linguagem de programação livre e open-source,
ou seja, qualquer pessoa é livre para usar, copiar, estudar e mudar o software de qualquer
forma, e o código-fonte é compartilhado abertamente para que as pessoas sejam
encorajadas a voluntariamente melhorar a concepção do software.

1.1.6. Visual Studio Code

O Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft para

Windows, Linux e macOS. Ele inclui suporte para depuração, controle Git incorporado,
realce de sintaxe, complementação inteligente de código, snippets e refatoração de
código. Ele também é customizável, fazendo com que os usuários possam mudar o tema
do editor, teclas de atalho e preferências.

O Visual Studio Code foi anunciado, com uma versão de previsão lançada, em 29 de abril
de 2015 pela Microsoft na conferência Build de 2015. Em 18 de novembro de 2015, o
Visual Studio Code foi lançado sob a Licença MIT e o seu código-fonte foi postado no
GitHub. Suporte para extensões também foi anunciada. Em 14 de abril de 2016, o Visual
Studio Code concluiu o estágio de previsão pública e foi lançado para a web.

Tabela 3.1 Diferença entre visual studio code e visual studio.

Principais características do Visual Studio code:

 Multi-Platforma;
 Git integrado;
 Meet IntelliSense, com highlighting da sintaxe e autocomplete;
 Funcionalidades para debugging;
 Suporte para várias linguagens de programação;
 Suporte para extensões.

A principal vantagem do visual studio code é a grande capacidade de otimização de

linhas, fazendo com que os softwares sejam mais leves, eficientes e compatíveis com
diferentes plataformas.

1.1.7. Bootstrap

Bootstrap é um framework de desenvolvimento web Front-End criado no Twitter em

2010 que oferece uma série de componentes e comportamentos desenvolvidos com
JQuery (BOOTSTRAP, 2015). O framework oferece diversas classes CSS para manipular
o conteúdo estático da página de modo que esta se adapte a qualquer dispositivo de
navegação, seja o celular, tablet ou desktop. Este framework contribuiu para o
desenvolvimento da aplicação por oferecer uma série de novas directivas HTML.

1.2. Considerações Finais

Neste capitulo foram abordados os conceitos, vantagens e características das principais
ferramentas usadas no desenvolvimento do aplicativo Kudissanga Multicaixa. Foram
escolhidas ferramentas actualizadas e com um grande desenvolvimento tecnológico afim
de obter da melhor maneira possível os resultados esperados.