genymotion2

Emulando aplicativos Ionic/Cordova no Genymotion

Fala pessoal, beleza? Esse é um post rápido pra dar uma dica de algo que descobri hoje. Bom, todo mundo sabe, e não é de hoje, que o emulador android presente no Android Studio é uma porcaria maravilha. E é por isso que grande parte dos desenvolvedores android utilizam o Genymotion como alternativa.

O Genymotion é um emulador rápido e essa palavra “rápido” define ele. Enfim, se você ainda não o conhece e/ou não o utiliza cadastre-se no site www.genymotion.com, faça o download e seja feliz. A utilização dele é muito fácil. É só criar um novo “Virtual Device” e rodar.

E para rodar aplicativos feitos com o Cordova ou Ionic dentro do Genymotion basta rodar seu Virtual Device e executar o código:

ionic run android

Mas por que “run” e não “emulate”?

Isso ocorre pois o Genymotion não notifica o Android/ADB que ele é um emulador. Ele se “apresenta” como sendo um dispositivo e é por isso que nós temos que executar o comando do Cordova para rodar o aplicativo em um dispositivo real, pois assim ele encontrará o Genymotion.

Debugando

Como vocês já sabem, pois leram na documentação, o Ionic Framework é um framework feito para rodar em dispositivos recentes (Android 4+ e iOS 6+) não adiantará criar um virtual device do Galaxy S2 com Android 2.3.6. Particularmente, eu recomendo que criem o virtual device de qualquer dispositivo com Android Kit Kat, pois no Kit Kat o navegador padrão é o Chrome e não mais o Android Browser, logo, a WebView do dispositivo também roda o Chrome.

Faço essa recomendação pois no Chrome é possível debugar sites abertos no navegador remotamente. E isso também serve para aplicativos que usam a WebView. Para inspecionar o dispositivo basta você ir em Menu > Ferramentas > Dispositivos ou abrir uma nova aba no Chrome e digitar:

chrome://inspect

Então ele irá carregar uma página como a seguinte e então é só clicar em “inspect” para começar a trabalhar.

Aba de dispositivos

Ao clicar em “inspect” o Chrome irá abrir o Developer Tools e você terá todos os recursos dele para se divertir.

Inspetor Remoto

Qualquer dúvida quanto a inspeção de dispositivos remotos utilizando o Google Chrome é só acessar esse tutorial.

Captura de Tela 2014-09-23 às 11.38.51

Erro ‘The command “android” failed’ no Ionic Framework

Esse post é uma pequena retificação ao post anterior. E, primeiramente, eu gostaria de agradecer ao Márcio Vinícius por ter me atentado a esses pequenos detalhes que eu deixei passar. Enfim, o nosso problema aqui é que eu esqueci de mencionar que para desenvolver para o Android no Mac OS você precisará do Android SDK. Caso contrário, ao rodar o comando ionic platform add android será retornado um erro como na imagem a seguir:

ionic platform add android error

Como podemos notar pela mensagem de erro retornada, o comando `android” falhou, pois não temos o Android SDK instalado, logo, para instalar e configurar corretamente siga os seguintes passos:

  1. Baixe o Android SDK no link abaixo.

    http://developer.android.com/sdk/index.html

  2. Execute o arquivo sdk/tools/android.

  3. Faça o download da plataforma para o qual você irá desenvolver. Como no exemplo abaixo onde eu faço o donwload da SDK do Android 4.4.2 (API19).
    Android Tools

  4. Abra o terminal e execute o seguinte comando no terminal:

    open ~/.bash_profile

  5. Edite o arquivo com adicionando a linha abaixo, onde DIRETÓRIO_DO_SDK representa o caminho para o SDK.

    export PATH=$PATH:/DIRETÓRIO_DO_SDK/platform-tools/:/DIRETÓRIO_DO_SDK/tools/


    Exemplo:

    export PATH=$PATH:/Users/marciovinicius/Documents/Componentes\ de\ Desenvolvimento/adt-bundle-mac-x86_64-20140702/sdk/platform-tools/:/Users/marciovinicius/Documents/Componentes\ de\ Desenvolvimento/adt-bundle-mac-x86_64-20140702/sdk/tools/

  6. Após salvar o arquivo, rode o seguinte comando no terminal:

    source ~/.bash_profile

  7. Agora, ao executar no terminal o comando ionic platform add android pode ser que você não tenha o ant instalado, então aparecerá o seguinte erro:

    ERROR : executing command 'ant'

    Para solucioná-lo da forma fácil, basta instalar o homebrew e depois o ant rodando os seguintes comandos no terminal:

    ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
    brew install ant

E é isso, agora tudo funcionará como deveria. Até mais.

ps.: Ainda não verifiquei no Windows e no Linux, mas provavelmente você precisará efetuar procedimento parecido. Voltarei em breve com a solução para esses sistemas operacionais.

Ionic Framework

Aplicativos mobile com o AngularJS e Ionic

Introdução

Os desenvolvedores web vem a cada dia mais se tornando desenvolvedores mobile. Isso vem acontecendo graças ao surgimento de tecnologias de desenvolvimento de aplicativos mobile hí­bridos, onde o desenvolvedor consegue utilizar as mesmas tecnologias já conhecidas por ele na web para criar aplicativos que rodem em múltiplas plataformas. Não necessitando aprender as linguagens nativas das plataformas mobile.

Atualmente existem várias tecnologias para desenvolvimento mobile onde o aplicativo é portado para diversas plataformas, como o Titanium, o PhoneGap, o Xamarin, o Delphi XE7, etc.

O Ionic Framework é uma dessas tecnologias e vem ganhando destaque nos últimos meses. O Ionic é um framework front-end open source que utiliza o poder do HTML5 e do AngularJS para entregar uma experiência de usuário fluí­da e um rápido desenvolvimento.

Os aplicativos Ionic são baseados no Cordova, logo, os utilitários do Cordova podem ser usados para build, deploy e testes dos aplicativos.

Por que o Ionic?

"Mas por que usar o Ionic se eu posso utilizar o Onsen UI ou o fazer tudo do zero em cima do Cordova?". Existem algumas caracteríticas do Ionic que vão ajudar a responder essa questão:

  1. O Ionic trabalha muito bem com o AngularJS. Os componentes de interface do Ionic são diretivas do AngularJS. Além disso o Ionic utiliza o UI-Router para gerenciar as rotas e estados das views. Ao utilizar o Ionic você pode manter múltiplos históricos de navegação dentro de seu aplicativo, permitindo que você crie aplicativos com navegação não linear.
  2. Todo o CSS é gerado a partir do SASS e foi projetado para ser sobrescrito, tornando-o mais fácil para desenvolvedores personalizarem seus aplicativos. O CSS do Ionic é independente da camada de JavaScript, permitindo uma maior liberdade no desenvolvimento. Ele utiliza um sistema de grids baseado no Flexbox do CSS3, onde é possível criar layouts com qualquer quantidade de colunas e, inclusive, alinhar o conteúdo verticalmente dentro das colunas.
  3. Ele utiliza o Gulp para automatização de tarefas, como compilar o código SASS em CSS.
  4. O framework é obcecado por performance, com uma interface rápida e consistente. Ele utiliza recursos de aceleração de hardware e busca manipular minimamente o DOM.
  5. Não possui depedência do jQuery, embora você possa adicioná-lo caso queira.
  6. Por ser um framework front-end, é possí­vel utilizar os navegadores para o desenvolvimento. Fazendo bom uso das ferramentas de debug presentes nos navegadores é possí­vel desenvolver boa parte dos aplicativos (tudo o que não façaa uso das APIs nativas dos dispositivos móveis).
  7. Comunidade forte e ativa. Como o AngularJS é, atualmente, o framework javascript mais popular entre os desenvolvedores front-end, grande parte desses desenvolvedores optam por utilizar o Ionic e isso acaba fortalecendo cada dia mais a sua comunidade.

Instalação

Para utilizar o Ionic é necessário que você tenha o Node.js instalado.

Após instalar o Node.js é necessário instalar o Cordova e o Ionic através da seguinte linha de comando:

npm install -g cordova ionic

Assim que a instalação estiver completa você pode iniciar um novo projeto utilizando um template. Os templates disponí­veis são: blank, tabs e sidemenu. O primeiro é um template vazio, com o mí­nimo necessário para se ter um aplicativo Ionic, o segundo é um template que possui abas de navegação e o terceiro possui um menu lateral.

Para inicar um projeto utilizando um desses templates é só executar um dos comandos a seguir:

ionic start myApp blank
ionic start myApp tabs
ionic start myApp sidemenu

Onde myApp é o nome do aplicativo que você irá criar, ou seja, você pode substituí­-lo por qualquer outro nome. Poderia ser tableless ou tablelessApp por exemplo.

ionic start tablelessApp sidemenu

Após iniciar o aplicativo você deve adicionar as plataformas para o qual ele será publicado. Lembre-se que para desenvolver para iOS você precisa estar desenvolvendo em um Mac OS.

cd tablelessApp
ionic platform add ios
ionic platform add android

Agora você já pode fazer o build de seu aplicativo e executar ele no emulador da plataforma desejada.

ionic build ios
ionic emulate ios

É assim que seu aplicativo deve estar parecendo agora:

Ionic Side Menu - Home

Conclusão

Neste artigo nós vimos por que utilizar o Ionic Framework e como começar o desenvolvimento com o mesmo. Para que o artigo não fique muito extenso termino o mesmo por aqui, mas voltarei, em breve, com um tutorial onde explicarei como criar um aplicativo utilizando o Ionic.

Entretanto, fique a vontade para explorar as possibilidades do framework através dos links abaixo.

Site: http://ionicframework.com
Tutoriais: http://learn.ionicframework.com
Fórum: http://forum.ionicframework.com
GitHub: http://github.com/driftyco/ionic