tappx

Promova seu aplicativo de graça

Eu sei, o título desse post até parece sensacionalista e com o objetivo de conseguir cliques, mas, pelo menos dessa vez, não é. Nesse ano de 2016 eu me propus um desafio: viver só com a grana proveniente de meus aplicativos para dispositivos móveis e pra isso eu estabeleci que faria um aplicativo por mês até o fim do ano.

Daí você pergunta: "Ok, mas o que isso tem a ver com promoção de aplicativos gratuita?". Bom, a princípio nada, exceto que para conseguir viver disso eu preciso que os aplicativos tenham muitos downloads, porém com o grande número de aplicativos nas lojas hoje a concorrência é muito grande e provavelmente meus aplicativos não vão ganhar usuários se eu não encontrar formas de chegar até eles.

E aí que entram técnicas como ASO, que é o equivalente ao SEO para aplicativos, e os Ads, afinal, eu posso anunciar meus aplicativos. Mas aí entra um outro porém, o custo de aquisição do usuário. Enquanto o ASO é um conjunto de técnicas para melhorar o rankeamento nas lojas, na maioria das vezes não é necessário gastar dinheiro com ele. Já com os Ads a conversa muda.

O custo médio de aquisição de usuários varia bastante de acordo com inúmeros fatores, como: país, tema do aplicativo, idade do público alvo, etc.. E, infelizmente, eu não tenho muita grana pra investir, por exemplo, R$ 1,00 para cada nova instalação do aplicativo, e olha que esse é um valor relativamente baixo.

E foi aí que eu conheci o Tappx.

Tappx

O Tappx é um Ad Network para promoção de anúncios diferente das outras. Nela, a cada cliques em anúncios veiculados por ela em seu aplicativo você ganha 500 tappix, que é a moeda de troca da plataforma, com eles você pode criar suas próprias campanhas onde a cada clique que seu anúncio receber você paga 500 tappix, ou seja, para cada vez que alguém clicar em um anúncio no seu aplicativo você ganha o direito de exibir anúncios nos aplicativos de outras pessoas até que alguém clique no seu anúncio.

O interessante é que a comunidade Tappx hoje é muito forte e existem alguns aplicativos bem populares que a utilizam. Ontem, em meu primeiro teste com a plataforma, eu consegui milhares de impressões do meu anúncio em poucas horas. Infelizmente eu não tinha tappix o sufuciente para conseguir muitos cliques, mas aí entra outro fator interessante sobre a plataforma: a cada pessoa indicada por você que passar a usar a plataforma você ganha 50.000 tappix.

Ionic

O Tappx possui integração tanto para Android quanto para iOS, então se você desenvolve nativo é só baixar a SDK deles e ser feliz. No entanto, também é possível integrar com outras plataformas como Unity, Firefox OS e Cordova.

O meu novo aplicativo (Mini Receitas) foi desenvolvido em Cordova/Ionic e eu realizei a integração através do plugin Cordova Admob que inclusive já possui um módulo AngularJS para integração com aplicativos Ionic. Nesse plugin você pode configurar tanto o AdMob quanto o Tappx e ainda dividir os anúncios exibidos em seu aplicativo entre as duas plataformas.

  1. Para instalar o plugin no Ionic basta rodar o comando:
ionic plugin add cordova-admob
  1. Adicionar o seguinte código em seu index.html (note que você não precisa copiar nenhum arquivo, o plugin copiará os arquivos automaticamente na fase prepare do Cordova):
<script src="lib/angular-admob/angular-admob.js"></script>
  1. Injetar o módulo na definição do seu aplicativo:
var app = angular.module('myApp', ['admobModule']);
  1. Configurar o plugin com as suas informações do AdMob e do Tappx:
app.config(['admobSvcProvider', function (admobSvcProvider) {
    admobSvcProvider.setOptions({
        publisherId:          "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",  // Obrigatório
        interstitialAdId:     "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",  // Opcional
        tappxIdiOs:           "/XXXXXXXXX/Pub-XXXX-iOS-IIII",            // Opcional
        tappxIdAndroid:       "/XXXXXXXXX/Pub-XXXX-Android-AAAA",        // Opcional
        tappxShare:           0.5                                        // Opcional
    });
}]);
  1. Exibir os anúncios (você pode fazer isso em um controller específico também):
app.run(['admobSvc', function (admobSvc) {
    admobSvc.createBannerView();
}]);

E é isso. Em um próximo post espero poder falar mais sobre ASO (App Store Optimization), ainda estou estudando e aplicando aos poucos os conhecimentos adquiridos. O meu novo aplicativo (Mini Receitas) ainda não tem muitos downloads, mas com uma plataforma de promoção gratuita as chances de eu atingir meus objetivos ao final do ano aumentam e espero que vocês também possam vir a se beneficiar da plataforma.

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.