Nessa disciplina de desenvolvimento mobile iremos abordar a construção de aplicativos com tecnologia híbrida, nesse tipo de tecnologia usamos de ferramentas web como html, Javascript e Typescript para construção do aplicativo, e convertemos ele no final para cada dispositivo, de forma a termos apenas uma única base de código para IOS e Android.
Uma abordagem diferente poderia ser a construção nativa em cada plataforma, utilizando-se das linguagens e dos recursos diferentes de cada plataforma. Cada abordagem tem suas vantagens e desvantagens, por exemplo, a construção híbrida é mais produtiva pois mantém uma mesma equipe com tecnologias que são usadas em desenvolvimento web em todas as plataformas (IOS, Android), já a abordagem nativa consegue extrair maior performance e tem um visual mais consistente com o sistema operacional da plataforma utilizada. Hoje em dia existem abordagens híbridas que vão um pouco além, utilizando-se de tecnologias web ou linguagens comuns com C# para compilar o código em códigos nativos das plataformas, nesses casos a aparência e performance é similar a nativa. Exemplos de tecnologias que fazem isso são o Nativescript (que também pode utilizar o angular) e o Xamarin (que usa C#).
Na disciplina iremos utilizar os frameworks Angular e o Ionic para construção de telas, o Ionic nos permite criar componentes com aparência mobile, acessar recursos nativos dos aparelhos, e distribuir o aplicativo final para cada plataforma. Já o angular é a base do framework para construção tanto de aplicativos web, quanto mobile em conjunto com o Ionic.
Podemos então dividir a disciplina em duas fases:
Fundamentos de Angular – Nesses módulos iremos ter um bom fundamento do funcionamento e das funcionalidades principais do Angular, de forma a capacitar o aluno a construir aplicativos.
Adotando o Ionic do Aplicativo – Nesses módulos iremos converter o que foi feito em Angular, retendo todos os conhecimentos adquiridos, para usar componentes do Ionic e gerar um aplicativo que possamos simular a implantação em um dispositivo.
O Angular é um dos frameworks web mais consolidados no mercado, é construído em cima da linguagem de programação Typescript o que adiciona muito mais segurança e robustez em comparação com a linguagem Javascript, principalmente para projetos grandes, pois introduz conceitos como classes, interfaces, tipagem opcional, checagem de erros pelo compilador, intelisense na IDE, além de uma série de recursos que só irão estar presentes no Javascript daqui alguns anos.
Também é uma vantagem do typescript ser totalmente compatível com o Javascript, sendo que códigos válidos na linguagem Javascript também são válidos em typescript, as vezes não sendo a melhor maneira de se escrever por possuir a tipagem e outros recursos, mas é possível reaproveitar a syntaxe.
O angular introduz conceitos como: componentes, módulos, rotas, injeção de dependência, validação de formulários, chamadas http com interceptadores, inputs, outputs para comunicação entre componentes, entre outros que facilitam a arquitetura de um aplicativo frontend ou mobile.
Na minha experiência o Angular é o framework web com o maior número de recursos nativos sem precisar de extensões, que funcionam muito bem em conjunto. Também já traz consigo todo ferramental para fazer o build, minificando os itens e para trabalhar com SASS (compilação de CSS em uma linguagem inspirada nele mas com recursos mais voltados para reaproveitamento de funções e estilos). Porém tem a fama de ter uma curva de aprendizado maior que os outros concorrentes.
Setup do ambiente
Para o setup do ambiente pode-se utilizar qualquer sistema operacional principal, MacOs, Linux, Windows. As instruções específicas se encontram nos sites compartilhados, no entanto deixo aqui um overview com os passos necessários:
Instale o NodeJS, que trará consigo o NPM – O Angular não é um aplicativo node, mas assim como quase todos os outros frameworks web modernos, utiliza de ferramentas do node para fazer o build, servir os arquivos, baixar dependências, entre outras tarefas.
Instale o Angular CLI – Esse utilitário de linha de comando permite que você crie um projeto novo, adicione componentes, módulos, entre outras coisas. Particularmente, não utilizo muito além da criação do projeto inicial.
Instale um editor de código compatível – Recomendo o uso do Visual Studio Code (VSCode) por ser gratuito e ter um suporte a typescript com Angular muito robusto. Outra opção excelente é o Intellij, ou Webstorm (são a mesma ferramenta em versões diferentes). Não recomendo o uso de eclipse por dois motivos: O suporte a Typescript, Javascript, HTML e CSS é maçante, e é uma IDE muito pesada com diversos pontos que não funcionam corretamente na minha experiência.
Obs.: É interessante instalar o NodeJs como usuário sem permissões de administrador para que comandos que instalam módulos ou linhas de comando globais funcionem sem dores de cabeça, mas não é um requisito obrigatório. Por isso vou deixar links para instalações alternativas além das oficiais.
Após instalar o NodeJS instale o Angular CLI abrindo um prompt de comando e digitando:
npm install -g @angular/cli
Se estiver usando Windows, antes precisará habilitar a execução de scripts que é necessário para instalar binários globais do NPM. Rode o comando: