Criando uma mini loja virtual com PhoneGap - Partes 1 e 2

Quando se trata de desenvolver softwares de forma rápida, produtiva e com qualidade, independentemente da plataforma, linguagem ou tecnologias usadas, ambientes híbridos sempre chamaram atenção em vista de suas poucas e fáceis configurações e sua flexibilidade na hora de codificar, abstrair e publicar. Inúmeras são as plataformas que atendem a esse perfil atualmente, entretanto quando nos referimos ao universo mobile algumas dúvidas surgem à mente da equipe quanto à segurança e poder da plataforma a se escolher. Dentre os ambientes híbridos para desenvolvimento móvel, podemos citar o famoso Cordova, Ionic, Sencha, e o PhoneGap. Cada um tem seus prós e contras em relação aos outros, porém o PhoneGap foi ganhando um espaço maior no mercado, em vista de sua capacidade de abstração e acesso aos recursos nativos dos dispositivos.

O PhoneGap é um framework para aplicativos móveis que nos possibilita desenvolver aplicações das mais diversas formas usando o core das tecnologias front-end: JavaScript, HTML5 e CSS3. Além disso, ele também possibilita a eliminação do uso de outras plataformas embarcadas, compiladores, SDKs, em alusão ao que temos em plataformas nativas como iOS, Windows Phone e Android, por exemplo.

O framework teve como ponto inicial a empresa Nitobi Software, que foi adquirida pela Adobe em meados de 2011. Trata-se de um framework totalmente aberto, que provê suporte nativo aos principais recursos do hardware (os famosos serviços), tais como gadgets, widgets, diálogos, mensageria, etc.

Com o PhoneGap conseguimos efetuar praticamente todas as implementações que faríamos em um ambiente nativo. Isso porque ele trabalha com o conceito de plugins e pacotes, isto é, sempre que precisamos de uma nova funcionalidade nativa no aplicativo, basta instalar o plugin correspondente. Por exemplo, considere que queremos exibir mensagens de notificação na barra de notificações do dispositivo via app PhoneGap. Por se tratar de um recurso mais complexo, que envolve tanto código nativo quanto acesso à web e às APIs de Web Services da fabricante, precisamos instalar um plugin respectivo para essa tarefa e, assim, habilitar tal recurso. O mesmo vale para as demais funcionalidades não-padrão fornecidas pelo framework. Na seção Links, no site oficial da documentação do framework, você encontra uma relação das que existem por padrão e dos plugins que você pode importar. Além disso, as configurações são feitas por projeto, portanto, para cada novo projeto que criarmos, os mesmos plugins obrigatórios e/ou ferramentas auxiliares devem ser importados novamente.

Talvez você esteja se perguntando se o PhoneGap fornece tantos plugins suficientes para se equiparar ao desenvolvimento nativo. E a resposta é sim. A maioria das funcionalidades são abstraídas com simples JavaScript/HTML5/CSS3. E quando falamos nessas tecnologias, estamos incluindo literalmente todo o aparato de plugins, extensões, frameworks e bibliotecas que existem na web e que você pode incluir à vontade nos seus projetos PhoneGap.

Para entender tudo que essa plataforma nos permite fazer, trataremos de criar ao longo desse artigo um aplicativo de loja virtual completo usando somente PhoneGap e suas tecnologias correlatas. Você verá desde a configuração e instalação do ambiente, até a definição do layout do aplicativo, importação de dependências/plugins/bibliotecas importantes, dentre outros. Ao final deste você estará apto a criar seus próprios projetos de quaisquer tipos usando o PhoneGap e o poder das APIs web.

Também é importante que o leitor já tenha conhecimentos prévios em JavaScript e HTML5. Caso contrário, é aconselhado se aprofundar no assunto através dos artigos e vídeo-aulas que dispomos aqui na própria DevMedia.

Configurando o ambiente

A primeira coisa que precisamos fazer é selecionar a ...