Esse post dará início a uma série de artigos explanando a criação de aplicativos para dispositivos móveis fazendo uso de tecnologias híbridas existentes no mercado. As tecnologias aqui abordadas serão, mais especificamente, o Cordova e o Ionic Framework, bem como, a vasta gama de plugins que compõe o ecossistema de aplicativos.
Entendendo o conceito de nativo e híbrido
Para falarmos sobre aplicativos híbridos precisamos entender o conceito e as diferenças do desenvolvimento nativo e híbrido. Um aplicativo nativo é aquele criado com as linguagens padrões, ou não, específicas de cada plataforma ao qual se pretende criar o app. Nesse tipo de desenvolvimento utilizamos as linguagens ObjectiveC e Swift para criar aplicações para a plataforma iOS, bem como o Java, C++ ou até mesmo Python — através do SL4A — para codificar um aplicativo para dispositivos Android. Nesse tipo de abordagem é preciso ter em mente que é necessário possuir conhecimentos específicos para cada plataforma ao qual se deseja gerar o aplicativo, tornando o processo de desenvolvimento e implantação mais lento. Já o desenvolvimento híbrido como entendemos hoje, é composto por plataformas como o Cordova ou Phonegap (praticamente idênticas), que se utilizam de tecnologias web, amplamente difundidas, como HTML, CSS e JS. Além dessa tecnologias, tanto o Cordova quanto o Phonegap utilizam plugins para podermos fazer uso dos diversos recursos de hardware dos dispositivos móveis. Um exemplo seria criar um app que usa a câmera do dispositivo para capturar fotos e marcar sua localização através do GPS compartilhando na timeline do Facebook. Nesse exemplo utilizaríamos três plugins, da Camera, do GPS e do Facebook.
Vantagens das aplicações híbridas
Desenvolver aplicativos híbridos tem suas vantagens, dentro das quais podemos dizer que as principais são as listadas abaixo:
- Curva de aprendizado baixa, pois são usadas tecnologias web amplamente difundidas
- Distribuição para múltiplas plataformas utilizando-se um único código
- Baixo custo já que as ferramentas são, em sua maioria, gratuitas
- Desenvolvimento mais rápido já que utiliza-se um mesmo código
Desvantagens das aplicações híbridas
Nem tudo são flores no desenvolvimento híbrido, caso contrário, todos abandonariam o desenvolvimento nativo, devido à sua complexidade e tempo de desenvolvimento. As principais razões para a não adoção desse tipo de desenvolvimento são:
- Performance — são utilizadas webviews, que são browsers embutidos no aplicativo, perdendo a fluidez dos apps nativos
- Incompatibilidade entre plugins — alguns plugins mal escritos geram dores de cabeça para os desenvolvedores, pois possuem dependências que são incompatíveis umas coma as outras
Instalando o Cordova e o Ionic
Dando sequência em nosso artigo, vamos deixar a parte teórica de lado e passar para a prática. O processo de instalação do Cordova e do Ionic é muito simples, para tal, a melhor forma é através do NodeJs. Assim, abra o seu navegador, vá até o endereço https://nodejs.org e clique no botão Install, conforme a imagem abaixo:
Installe o NodeJs seguindo todos os passos necessários para o seu sistema operacional. Não vamos entrar em mais detalhes sobre a instalação do NodeJs, mas caso alguém sinta necessidade, basta entrar em contato através dos comentários.
Uma vez instalado o NodeJs vamos instalar o Cordova e o Ionic. Abra o Command Prompt caso esteja no Windows ou o Terminal do Linux ou Mac. Agora digite os seguintes comandos:
[code language=”js”]
npm install -g cordova ionic
[/code]
O NPM é o gerenciador de pacotes do NodeJs e o comando install -g diz ao npm que desejamos instalar um ou mais pacotes de forma global em nossa máquina.
Caso o comando NPM não tenha sido reconhecido pelo sistema operacional, provavelmente houve uma falha na instalação do NodeJs, dessa forma, é importante que verifiquemos se ele está instalado corretamente. No Windows isso pode ocorrer, pois talvez seja necessário a configuração do Path (variável de ambiente) para apontar para a pasta onde o NodeJs foi instalado.
Caso o comando acima tenha sido executado corretamente, vamos passar à criação de nossa primeira aplicação no Ionic. Para tal, devemos digitar no terminal o comando abaixo:
[code language=”js”]
ionic start MeuPrimeiroApp sidemenu
[/code]
O comando acima cria uma aplicação Cordova/Ionic com um menu lateral deslizante, em algumas plataformas esse menu é chamado de Navigation Drawer ou Slide Menu.
O comando ionic start criará uma pasta chamada MeuPrimeiroApp contendo o nosso projeto. É importante salientar que é necessário ter conexão com a internet, pois o ionic vai baixar e instalar os recursos necessários para a nossa aplicação. Agora vamos entrar na pasta que foi recém criada. Digite o comando cd MeuPrimeiroApp no terminal.
Agora que estamos dentro da pasta do projeto vamos executá-lo. Para isso digite o comando:
[code language=”js”]
ionic serve
[/code]
Sua tela ficará como a que segue:
Essa é a janela interativa do Ionic e tudo o que ocorrer no seu app poderá ser exibido nela. Veja também que ela possui alguns comandos como o restart, para restartar sua aplicação, consolelogs, para exibir as mensagens do comando console.log diretamente no terminal, e a opção q, para terminar a execução da sua aplicação.
Após executarmos o comando anterior, uma janela do browser se abrirá exibindo nossa aplicação:
Pronto, nossa primeira aplicação híbrida com Ionic está completa.
Devemos notar que esse app foi criado com um template de menu lateral, pois especificamos isso quando criamos nosso aplicativo com o comando ionic start MeuPrimeiroApp sidemenu. O Ionic nos fornece três tipos de template, blank, sidemenu e tabs. O primeiro cria uma aplicação Ionic vazia, ou seja, que não possui menu lateral nem abas, o sidemenu é justamente o exemplo que criamos e o último cria um aplicativo com abas.
Vamos agora encerrar nossa aplicação, para tal, será necessário ir até o prompt ou terminal e digitar a letra q (exit). Pronto, voltamos a ter acesso ao nosso terminal.
Estrutura de uma aplicação Ionic
Abaixo temos um exemplo de uma estrutura básica das pastas e arquivos de um projeto Ionic.
hooks — tasks do Gulp a serem executadas através do comando ionic prepare
platforms — contém as plataformas suportadas pela aplicação. Ex: android e ios
plugins — local onde ficam registrados todos os plugins utilizados pelo aplicativo
scss — pasta de arquivos sass
www — é a principal pasta do projeto, é nela que se encontra todo o código da aplicação, ou seja, os htmls, css, js
bower.json — arquivo responsável por gerenciar os pacotes do bower
config.xml — contém algumas configurações do projeto
gulpfile.js — arquivo que contém as tasks de automatização
ionic.project — contém algumas informações do projeto
package.json — contém as dependências do Gulp e de alguns plugins
Cases de aplicativos híbridos criados com Ionic Framework
Renda Fixa — Watermelon
Mãe Guru — Fluid27
99Folks — 99folks
Sworkit — Nexercise
ChefSteps — ChefSteps
Conclusão
Vamos agora a algumas considerações sobre a criação de aplicativos híbridos. Nesse post pudemos notar que o Ionic nos fornece uma maneira bem simples de criarmos aplicativos para dispositivos móveis, entretanto, não fizemos uso de nada além dos próprios templates que o Ionic nos fornece. Uma aplicação real, raramente será assim tão simples, pois muito provavelmente, ela precisará utilizar recursos como a camera, gps, acelerômetro, etc, o que aumentará o nível de complexidade. Nesse artigo não mostramos como configurar as plataformas que desejamos gerar o aplicativo (Android, iOS, FirefoxOS, etc). Em artigos futuros vamos mostrar como adicionar essas plataformas, bem como faremos uso de diversos plugins para que nosso aplicativo fique bem completo. Abordaremos push notifications, splashscreens, consumo de apis, armazenamento de dados no dispositivo, login com facebook, in app billing, etc.
[embed]https://www.youtube.com/watch?v=yoCvd-ksu6w[/embed]
