Cadeados

Desempacotando APK’s da Google Play Store

Olá pessoal, acredito que esse post poderá ser bastante polêmico tendo em vista que algumas pessoas não gostariam que esse conteúdo fosse disseminado. No entanto acredito que para a evolução do ecossistema de desenvolvimento híbrido isso se faz necessário. Particularmente aprendi muito ao inspecionar e realizar engenharia reversa em aplicativos de terceiros baixados da Play Store e espero que com esse artigo mais pessoas sejam capazes de otimizar seus aplicativos através das descobertas proporcionadas pela técnica aqui descrita.

Bom, como todos sabem existe uma categoria de aplicativos híbridos que rodam em um navegador no dispositivo e são códigos HTML, CSS e Javascript. Esses códigos são armazenados no dispositivo sem nenhum tipo de compilação. Portanto, se tivéssemos acesso a esses códigos conseguiríamos ler o mesmos. O fato é que muita gente sabe que esse processo é possível mas nunca o realizou, nem mesmo nos seus próprios aplicativos.

Os APK's são arquivos compactados com as instruções necessárias para que o Android leia e execute uma aplicação. No caso dos aplicativos Cordova/Ionic esses arquivos carregam em si códigos HTML, CSS e Javascript e no caso de aplicativos React Native eles carregam um bundle Javascript.

No React Native o próprio processo de build do framework já realizada a minificação do código, fato que não ocorre em aplicações Cordova/Ionic, ficando por conta do desenvolvedor realizá-lo. As vantagens de se ter um código minificado fica para um outro artigo, mas é importante notar que alguns dos aplicativos desempacotados possuírão o código minificado e outros não. Nos que não tiverem será possível ler todo o código do mesmo sem nenhum esforço de engenharia reversa.

Também é importante ressaltar que essa técnica também é aplicável para aplicativos não híbridos, porém ela irá necessitar de um conhecimento em engenharia reversa de códigos Java.

Desempacotando os Aplicativos

Para desempacotar um aplicativo a primeira coisa que se deve fazer é possuir o arquivo APK do mesmo. Para isso você pode utilizar o site apkpure.com ou alguma extensão para o Google Chrome, em meus experimentos eu utilizei a extensão APK Downloader for Google Play, porém ela não está mais disponível na Chrome Web Store.

Além do APK, nós precisaremos de uma ferramenta chamada Apktool (http://ibotpeaches.github.io/Apktool/) que é quem efetivamente irá desempacotar o aplicativo.

Após instalar o Apktool e possuir o APK do aplicativo basta ir no terminal, navegar até a pasta onde o arquivo está localizado e rodar o comando:

apktool d NOME_DO_ARQUIVO.apk

Logo, para desempacotar o meu aplicativo Mini Receitas eu rodaria o comando:

apktool d Mini\ Receitas_v1.1.0_apkpure.com.apk 

Apktool terminal

O Apktool irá criar uma pasta com o mesmo nome do seu APK, para visualizar o código é só entrar nessa pasta.

Mini Receitas estrutura de pastas

A estrutura de cada aplicação poderá variar, mas aplicações Cordova sempre possuirão as pastas www e dentro dela a pasta plugins. Na pasta www vocês poderão encontrar os códigos do aplicativo e na pasta plugins os plugins Cordova utilizados. Foi através da inspeção da pasta plugins que eu descobri ferramentas como o Branch e o Flurry. Do código do meu aplicativo pode ser interessante que vocês procurem saber um pouco mais sobre o CodePush.

Enfim…

É isso. Na realidade o procedimento é muito fácil, mas acredito que por falta de interesse ou curiosidade muitas pessoas nunca tinham procurado saber como se é feito. A verdade é que esses simples passos podem ajudar, e muito, no seu processo de aprendizado. Saber como outras pessoas fazem em produção pode te ajudar a fazer melhores escolhas e a cada dia criar aplicativos melhores.

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

emmet

Emmet e a automatização no desenvolvimento

Olá, diante da promessa realizada pelo Jean no último post, venho antes de tudo me apresentar:

Bom, recentemente graduei na primeira turma de Sistemas de Informação da UFG, atualmente trabalho no LabTIME/UFG como desenvolvedor frontend e sou um dos sócios e desenvolvedores da Pequi Sistemas. Desenvolvo aplicações com Joomla há mais de 3 anos, entretanto, tenho me dedicado ultimamente em desenvolvimento frontend sem o framework, visto os requisitos dos últimos projetos da Pequi Sistemas e LabTIME/UFG.

O blog é um desafio grande, que me possibilitará compartilhar um poucos das soluções encontradas no decorrer dos trabalhos, mas também influenciará novos estudos que até então não ocorriam com certa periodicidade, é isso!

Automatização no desenvolvimento

Produtividade e automatização são palavras que caminham juntas no processo de desenvolvimento, entretanto, automatizar é um trabalho dispendioso, que exige estudos e experiência. Tratando-se de frontend, muitas vezes, criamos blocos/fragmentos que serão reutilizados e/ou importados no decorrer da aplicação. O artigo a seguir trata de um "kit de ferramentas" que foi criado para auxiliar no desenvolvimento, principalmente para os desenvolvedores que utilizam de HTML / XML e CSS.

O Emmet foi criado como Zen Coding, a princípio, um projeto proposto por Vadim Makeev em abril de 2009 e posteriormente desenvolvido por Sergey Chikuyonok, no mesmo ano. Após três anos de desenvolvimento o nome do projeto alterou-se para Emmet, não perdendendo nenhuma de suas características. 

Por que usar o Emmet?

  1. Sintáxe simples e intuitiva – http://docs.emmet.io/cheat-sheet/

  2. Documentação clara – http://docs.emmet.io/
  3. Plugin compatível com inúmeros editores: (ex: Eclipse, Netbeans, Brackets, Espresso, Coda, Sublime Text e outros)

Como usá-lo?

Atualmente eu tenho utilizado o Espresso (apenas para Mac) como editor, apesar de ser pago é uma ferramenta que cumpre com o que promete, logo é perceptível a leveza e simplicidade da ferramenta, atrelado a funcionalidades importantes como conexão SSH e FTP, mas editores para mac é assunto para outro post!

Visto que o Espresso não é multiplataforma, a seguir algumas instruções para instalação do plugin utilizando o editor Sublime Text 2 (download aqui).

Como instalar o Emmet no Sublime Text 2

  1. Abra Sublime Text 2;

  2. Acesse: Preferences > Browse Packages;

  3. Coloque dentro da pasta Installed Packages o arquivo de instalação do Sublime Package Control (download aqui) que servirá para instalar outros plugins que poderão ser necessários;

  4. Reinicie o Sublime Text 2;
  5. Acesse: Preferences > Package Control > Install Package;

  6. Busque por Emmet e reinicie, se for solicitado.

Comandos básicos

Em um arquivo html:

  • Digite: h1 (e pressione tab)
  • Resultado: 

    <h1><h1>
  • Digite: nav>ul>li*5 (e pressione tab)
  • Resultado:

    <nav>
    	<ul>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </nav>
  • Digite: ! (e pressione tab)
  • Resultado:

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	
    </body>
    </html>

Em um arquivo css

  • Digite: ml:10 (e pressione tab)
  • Resultado:

    margin-left: 10px;
  • Digite: bdrs:10 (e pressione tab)
  • Resultado: 

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    

Caracteres importantes e seus significados

  • # – Id ex: a#teste

  • . – class ex: a.teste

  • > – Filho ex: ul>li

  • + – Irmão ex: ul>li+li#segundo

  • ^ – Pai ex: p>span^span.destaque

  • {texto} – conteúdo da tag ex: a{texto}

Através destes pequenos exemplos podemos perceber o quanto o Emmet pode ser útil e simples no desenvolvimento de uma aplicação. Entretanto, por mais que tenhamos várias opções, dois aspectos devem ser destacados:

  • Todos os atalhos rementem a CSS, HTML e XML, logo outras tecnologias, previamente não podem ser atendidas;
  • A sua aplicação exigirá alguns trechos específicos/exclusivos

(Nestes casos, entra mais uma funcionalidade do Emmet).

Criando os próprios atalhos

No Sublime Text 2:

  • Acesse: Preferences  >  Browse Packages?;
  • Acesse o arquivo: Packages > Emmet > Emmet.sublime-settings.

No arquivo existirá o seguinte exemplo:

"snippets": {
		// "html": {
		 //	"abbreviations": {
		 //		"example": "<div class='example' title='Custom element example'>"
		 //	}
		 //}
	},

Este é um exemplo que ao ser descomentado, poderá ser testado:

  • Digite: example
  • Resultado: <div class='example' title='Custom element example'>

Para criar fragmentos próprios replique todo o trecho e edite, a seguir um exemplo de condicional JSP:

"snippets": {
		 "html": {
		 	"abbreviations": {
		 		"cursor": "<core:if test='${teste = teste}'></core:if>"
		 	}
		 }
	},

Conclusão

Atender os prazos estipulados pelos clientes é quase sempre uma tarefa árdua. Visto isso, as técnicas de modularização somadas as ferramentas que automatizam o desenvolvimento tornam-se imprescindíveis para um desenvolvimento ágil, a fim de atender as demandas.