ios/ iPad/ Iphone/ Mobile/ Negócios/ Notícias/ Pessoal

92.6% do mercado de smartphone é Android ou iOS, só que nem tudo que reluz é ouro

smartphones
[quote style=”1″] De acordo com a Gartner, 92,6% dos smartphones vendidos no primeiro trimestre de 2013 eram Android ou iOS. Os outros sistemas têm participação ínfima: BlackBerry (3%), Windows Phone (2,9%) e Bada (0,7%). Os dados divulgados pela IDC não são muito diferentes, mas dão o terceiro lugar para o Windows Phone, que alcançou 3,2% de participação de mercado.
[/quote]

Porém, nem tudo que reluz é ouro, vender para smartphone só por que ele lidera a lista não quer dizer que aquela plataforma paga suas contas necessariamente. Existe um ponto flutuante entre a plataforma e o ecosistema que sustenta ela.

Sem dúvida, para minha realidade, eu ganho mais dinheiro na Apple Store do que vendendo Apps para o Android, eu costumo fazer mais Apps para Apple do que para Windows e costumo fazer mais Apps para Blackberry do que para a Nokia.

Dá para ganhar dinheiro principalmente com plataformas emergenciais, fomentando a classe C e D do mundo, o Firefox OS mesmo é minha aposta para ganhar dinheiro diretamente com o público final.

Como 99% do tempo fazendo Apps para terceiros lucracrem sobre usuários finais, você acaba não faturando tanto quanto seu cliente fatura, mas manter o cheque recebível mensalmente é outra história.

Desde que lançaram a moda de Smartphones em 2007 a quantidade de apps que criamos para clientes foram:

[table style=”1″]
Apple Android Blackberry
49 Apps 21 Apps 13 Apps
[/table]

Destas apps 80% são gratuitas e envolve campanhas publicitárias, mercado de publicação digital, 12% são games e 8% apps institucionais.

De todas elas, a mais lucrativa foi a Blackberry, Apple Store dá dinheiro, mas não tanto. O mercado de Android é saturado, ou você distribui a App de graça com propaganda ou nem dinheiro para um burger king você vai ter.

Fonte: http://www.gartner.com/newsroom/id/2482816

BB10/ HTML5 / CSS3/ Mobile

Criando seu primeiro App com BBUI.js e Webworks para BB10

bb10

Uffa! Quem acompanha no twitter, viu que passei uma maratona para criar um App do zero para a plataforma BB10 gastando aproximadamente 29 horas, por simples 2 motivos.

1 – Conhecer o workflow de desenvolvimento da plataforma

2 – Ganhar um device específico para desenvolvedor.

Ok, minha aventura começa na quinta-feira as 10 da manhã, primeiro passo foi conhecer bem o webworks um SDK específico para a plataforma Blackberry desde a versão 5.0 em diante. Por que não o Phonegap? Veja só; Basicamente o phonegap funciona com muita coisa do webworks, então ao invés de tercerizar a API eu partir direto para a plataforma específica, não é assim que tem que ser a cadeia de distribuição? Alô administradores!

Antes que você leia todo o post, esse video abaixo mostra o que vamos fazer até o final do post.

Documentação

Primeira coisa que notei e me senti em casa, documentação, como estava acostumado com as documentações da Adobe, elas não fogem, vasta e muito bem detalhada, inclusive tem suporte a tudo quanto é tipo de desenvolvimento não só para HTML. A documentação mais completa acima de todas, sem dúvida é a do Cascades, que se fosse comparar à outras plataformas, seria a plataforma oficial.

Porém, a blackberry deixa bem claro na página de desenvolvedores, ela ama todas as tecnologias de desenvolvimento e ela deixa bem claro em sua página para os desenvolvedores.

A documentação do webworks é basicamente o empacotador, já que 80% da API do webworks é puramente HTML5. Isso mesmo! Não tem formula mágica, adorei essa parte do desenvolvimento por que frisa justamente a singularidade de uma só API. Claro que é importante notar que há exceções como toda regra, por exemplo APIs que são identicas ao HTML5.

O que é igual a api do HTML5:

  • Geo Localização
  • Captura de Midia( camera apenas)
  • Camera
  • File ( estrutura de arquivos)
  • Persistência de arquivos
  • Cache
  • Aceleração (acelerometro)
  • SMS, Chamar telefone, E-mail
  • Alerta ( javascript:alert(‘mensagem’);
  • Esquemas de URI

O que é específico da plataforma e requer o webworks de fato:

  • BBM
  • Calendário
  • Sensores( Giroscópio, Gravidade, Magnetometro, aproxiamção)
  • Toast
  • Microfone
  • Identity (para identificação do dispositivo)
  • Agenda de contatos
  • Pagamento ( in-App purchase)
  • Systema como nível de bateria e etc.

 

Comunidade e colaboratividade

Ambas andam juntos é claro, e a decisão dela de usar o Github para expor suas APIs, SDK de forma aberta ao público, facilitou ainda mais o trajeto do desenvolvedor aos seus SDK. Tanto é que existem repositórios completos só para listar contribuições dos desenvolvedores espalhados pelo mundo.

O mais importante não é nem os SDKs da Blackberry e sim o Github, você facilmente faz amizade com quem está por trás do projeto e vira e mexe você até contribui para melhorias. Essa idéia de social + código, foi um casamento da raposa, muito bem bolada!

bbuijs

BBUI.js Toolkit para aparência das Apps

Você já ouviu falar do Twitter Bootstrap, JQuery Mobile, Sencha Touch, Enyo, certo? Então adicione a lista o BBUI.JS, ele funciona só para os dispositivos da Blackberry, já que todo seu sistema de eventos é voltado para eventos do próprio navegador, se você tiver tempo, pode mudar a aparência, mais isso ai é meio que matar o Chinês achando que é barata. Sacô?!

É basicamente Javascript e extensívo uso do atributo data-bb-* . É um ponto de partida para você começar a criar algo que respeite o guia de interface da plataforma, só que não fique na regra, você pode mudar e usar o que você quiser.

[pullquote align=”left”]Você pode continuar usando seu framework preferido, lembre-se só da experiência mobile![/pullquote]

A parte de transições de telas built-in é bem legal, com vários efeitos pré fabricados e o mais interessante notar é a parte de navegação entre as telas, lembra muito o navigator do Flex Mobile; Só que usa de fato um Array simples para fazer o cast das telas pelo atributo data-bb-type=”screen”.

Na página do projeto, você encontra mais detalhes da documentação, como inicializar as coisas. Eu quero focar mais na parte Hello World! Quando você terminar de ler o post já sair com um App na mão.

Criando um App de demonstração

[note color=”#FFCC00″]No próprio site do Webworks, você encontra um guia passo-a-passo em inglês mais completo que este, se você quiser saber mais sobre como iniciar com o pé direito, vá direto ao site. http://developer.blackberry.com/html5/[/note]

Primeiro passo

Registre-se como desenvolvedor, é 0800, grátis, oba-oba, FREE, Paga não, Passe-livre.

Segundo passo

Requisite o acesso as chaves para assinar sua App, sem elas a festa não acontece. Elas funcionam para qualquer SDK que você vier usar.

[pullquote align=”left”]Dica importante: Lembre-se do PIN que você fornecer, esse PIN é uma espécie de RG.[/pullquote]

As chaves são obrigatória, elas tem um propósito: Assinar suas obras de arte “Seus Apps” para distribuição e teste.

Terceiro passo

Baixe o WebWorks, SDK Aqui. http://developer.blackberry.com/html5/download/ Dica( use a versão Gold, que é o botãozinho cor de ouro na página).
Para testes e desenvolvimento, vamos usar o Ripple Emulator, que é uma ferramenta para testes e emulação do seu HTML5 para dispositivos móveis, ele foi criado pela Blackberry (a.k.a RIM), e é hoje bastante utilizado.

[pullquote align=”left”]Siga as instruções de instalar o Ripple Emulator no Google Chrome.[/pullquote] Supondo que deu tudo certo nas suas instalações, siga as seguintes instruções:
Baixe as seguintes bibliotecas, elas são necessárias para iniciar o toolkit e acessar tags do HTML de forma mais fácil, ZeptoJS sem dúvida é a melhor para isso no ambito mobile, já que ele é leve, bem leve.

E quanto a ferramenta de desenvolvimento? Bom, use a que você achar melhor para editar páginas em HTML5, CSS3, Javascript. Eu gosto do Sublime Text. Mas não se apegue a esse detalhe, vai de sua escolha e ele não influencia o work-flow para esse exemplo.
Estrutura de uma App

É bem simples, basta ter um arquivo config.xml que é a espinha do projeto e um arquivo html para você indexar.

Vamos fazer o seguinte, veja um exemplo pronto de um arquivo de configuração de um projeto para criá-lo do zero.

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="1.0.0"
        id="com.apps.suaApp">
 
  <name>To-do-List</name>
  <content src="index.html" />
  <author rim:copyright="2013"
            href="http://www.igorcosta.com/"
            email = "igorcosta@gmail.com">Igor Costa</author>
 
 
  <description>Simples App com lista de tarefas, crie listas e tarefas especificas</description>
 
  <license href="http://www.apache.org/licenses/LICENSE-2.0">
        Licença caso sua App se aplique
  </license>
 
  <access uri="*" subdomains="true" />
  <access subdomains="true" uri="file:///store/home" />
  <access subdomains="true" uri="file:///SDCard" />
  <access subdomains="true" uri="local:///" />
 
  <feature id="blackberry.app">
        <param name="orientation" value="portrait" />
  </feature>
  <feature id="blackberry.app.event"/>
  <feature id="blackberry.system.event" />
  <feature id="blackberry.connection" />
  <feature id="blackberry.ui.toast" />
  <feature id="blackberry.ui.dialog" />
  <feature id="blackberry.io" />
  <feature id="blackberry.io.file" required="true" version="1.0.0.0" />
  <feature id="blackberry.utils"   required="true" version="1.0.0.0" />
  <feature id="blackberry.io.dir"  required="true" version="1.0.0.0" />
 
    <rim:splash src="splash-portrait-768x1280.png" />
    <rim:splash src="splash-landscape-1280x768.png" />
 
 
    <!-- para mais permissões visite 
    http://developer.blackberry.com/html5/documentation/rim_permit_element.html
	-->
    <rim:permissions>
        <rim:permit>access_location_services</rim:permit>
        <rim:permit>use_camera</rim:permit>
        <rim:permit>access_shared</rim:permit>
    </rim:permissions>
 
 
 </widget>

Salve esse arquivo com o nome config.xml em um diretório seu local, por exemplo localhost/bbui_app_exemplo
No mesmo diretório crie um arquivo de html, index.html como eu configurei ali acima para chamar logo que iniciar o arquivo index.html na tag content.

O arquivo config é bem simples e quase auto explicatório o que cada tag faz. A única coisa que você precisa ter em mente é que se você quer acessar a internet em domínios diferentes, a tag access te ajuda nisso, lembre-se de incluir sub-dominios caso exista.

Quarto passo

Criar a app propriamente. Quando você instala o Ripple Emulator no Chrome você pode usar a biblioteca do webworks direto na sua App, sem precisar colocar no diretório, já que você vai utiliza-lo para empacotar a App, basta fazer uma referência ao script dessa forma aqui.

<script type="text/javascript" src="local:///chrome/webworks.js"></script>

A estrutura do App ficou dessa forma.
[pullquote align=”left”]bbuijs-estrutura[/pullquote]

Para economizar tempo, use esse template que eu fiz do arquivo index.html, assim fica mais fácil de você replicar em sua própria máquina.

<!doctype html>
<html>
	<head>
	  <meta charset="utf-8">
	  <meta name="format-detection" content="telephone=no" />
	  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />  
	<title>Sua App</title>
 
	<!-- Estilos -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/bbui.css" />
 
	<!-- Javascript -->
	<script type="text/javascript" src="js/lib/zepto.js"></script>
	<script type="text/javascript" src="js/lib/bbui.js"></script>
    <script type="text/javascript" src="local:///chrome/webworks.js"></script>
 
	</head>
 
	<body>
		<div>
 
		</div>
	</body>
</html>

Ok, estamos prontos para começar a criar o App, mais que App? Para o própsito desse post vamos fazer um App simples, uma TO-DO-LIST, carregamos de um banco de dados local usando Web Storage, editamos e adicionamos itens.

Antes de criar qualquer coisa, deixa eu explicar mais ou menos como funciona o BBUIjs.
bbuijs-estrutura2

Ok, o BBUI.js além do nome ser sugestivo ele já possui um esquema de navegação no próprio toolkit, como você pode ver ai na imagem acima, basicamente o que você precisar em termos de interface básica o próprio toolkit oferece, porém se você quer algo mais complexo, sugiro utilizar outro, ele atende a uma única e exclusiva vantagem de ter a aparência nativa de um App. Quando você termina ela fica tão bem polida que parece muito com um App nativo.

O navegador entre telas funciona muito bem, e já possui efeitos de transição entre elas como Fade,Slide Left/Right,Slide Up/Down. Se você quiser um efeito de carta (flip) por exemplo, ai você vai ter que implementar. Como ele não atende exclusivamente apenas ao BB10, é bom notar algumas particularidades. Esses detalhes você pode conferir no Wiki do projeto.

Para inicializar o toolkit, você precisa escutar o evento webworksready, quando estiver pronto você pode iniciar com esses parametros.

            var webworksreadyFired = false;
            document.addEventListener('webworksready', function(e) {
 
                if (webworksreadyFired) return;
                webworksreadyFired = true;
                app.initialize(); //phonegap
 
                bb.init({actionBarDark: true,
                        controlsDark: true, // controles são pretos ou brancos
                        listsDark: false, // usar uma lista escura
                        bb10ForPlayBook: false, // é para playbook ou não
                        highlightColor: '#00A8DF', // cor de alguns elementos
                        onscreenready : function(element,id,params){
                            // use essa função para criar algum argumento
                        },
                        ondomready : function(element,id,params){
                          // depois que o DOM da tela estiver pronto você pode disparar algum evento antes 
                         // da tela ficar pronta.
                        }
 
                        });
 
                 // Depois de iniciado, chame a tela principal do App.
                 bb.pushScreen('Main.html', 'MainScreen');
            }, false);

Quinto passo

bbuijs-app-estrutura

Vou adotar essa estrutura de navegação do App. Simples e direta.

Como é que se cria as telas? Basicamente por esquema de atributo, o toolkit basicamente usa o atributo data-bb-* para definir as coisas.

Crie os .html conforme mostra a imagem e defina o HTML de cada um deles da seguinte forma.

<div data-bb-type="screen" data-bb-indicator="true" data-bb-back-caption="Voltar">
 
</div>

Para navegar entre as telas basta eu usar o método pushScreen(‘pagina.html’,’idPagina’); Por dentro do toolkit ele faz um popScreen() da tela atual e retorna com a tela anterior.

Então aqui vai o código atual das páginas que tenho.

index.html

<!doctype html>
<html>
	<head>
	  <meta charset="utf-8">
	  <meta name="format-detection" content="telephone=no" />
	  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />  
	<title>Sua App</title>
 
	<!-- Estilos -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/bbui.css" />
 
	<!-- Javascript -->
	<script type="text/javascript" src="js/libs/zepto.js"></script>
	<script type="text/javascript" src="js/libs/bbui.js"></script>
    <script type="text/javascript" src="local:///chrome/webworks.js"></script>
    <script type="text/javascript">
            var webworksreadyFired = false;
            document.addEventListener('webworksready', function(e) {
 
                if (webworksreadyFired) return;
                webworksreadyFired = true;
                bb.init({actionBarDark: true,
                        controlsDark: true,
                        listsDark: false,
                        bb10ForPlayBook: false,
                        highlightColor: '#C82C29',
                        onscreenready : function(element,id,params){
                        },
                        ondomready : function(element,id,params){
                        }
 
                        });
                 bb.pushScreen('Main.html', 'MainScreen');
            }, false);
 
        </script>          
	</head>
 
	<body>
		<div>
 
		</div>
	</body>
</html>

Tela Main.html

<div data-bb-type="screen" data-bb-indicator="true">
	<div data-bb-type="title" data-bb-caption="Principal"></div>
 
	 <ul>
	     <li><a href="#" onClick="bb.pushScreen('Listas.html','ListaScreen')"  title=""> ir para Lista de Tarefas</a></li>
	     <li> <a href="#" onClick="bb.pushScreen('Sobre.html','SobreScreen')"  title=""> ir para Sobre Tela</a> </li>
	     <li><a href="#" onClick="bb.pushScreen('Tarefas.html','ListaScreen')"  title="">ir para Tarefa</a></li>
	 </ul> 
</div>

Telas Sobre.html

<div data-bb-type="screen" data-bb-indicator="true">
	<div data-bb-type="title" data-bb-caption="Tarefas" data-bb-back-caption="Voltar"></div>
</div>

Telas Listas e Tarefas possuem o mesmo código fonte

<div data-bb-type="screen" data-bb-indicator="true">
	<div data-bb-type="title" data-bb-caption="Tarefas" data-bb-back-caption="Voltar"></div>
 
	<div data-bb-type="image-list" data-bb-images="none" data-bb-style="arrowlist">
		 <div data-bb-type="header">Lista de tarefas para fazer</div>
		 <div data-bb-type="item"  data-bb-accent-text="Strength" data-bb-title="Item 01">Descrição</div>
	</div>
</div>

Ok, interface montada, veja o que você tem até agora.

Sexto passo

Já que você tem montado as telas, hora de começar a programa-las, para persistência de banco de dados eu fiz uma classe em Javascript de forma literal, igual como você faz na declaração de um objeto JSON.

/* Copyright 2013 Igor Costa
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this db except in compliance with the License.
 You may obtain a copy of the License at
 
   http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
 
Simple class for WebStorage persistence, not big deal. Just for to-do-list demo
*/
var Db = {
	currentList:'',
	db : window.openDatabase('geba','0.1','Banco de dados simples para um App de to-do-list',2*1024*1024),
	listaSQL : 'CREATE TABLE IF NOT EXISTS listas (id  INTEGER,lista_nome TEXT NOT NULL, cor_lista TEXT NOT NULL DEFAULT "#f2f2f2",data_criada TEXT NOT NULL, PRIMARY KEY (id))',
	tarefasSQL: 'CREATE TABLE IF NOT EXISTS tarefas(id INTEGER,tarefa_nome  TEXT,completa  REAL,data_criada  TEXT,lista_id  INTEGER NOT NULL,PRIMARY KEY (id),FOREIGN KEY (lista_id) REFERENCES listas (id))',
	open : function () {
			try{
				if (window.openDatabase) {
					if(this.db != null){
						this.db.transaction(
				        function (transaction) {
				        	var demoData = new Date();
				        	// preload de 1 lista e 1 tarefa
				        	transaction.executeSql(Db.listaSQL, [], this.onSucess, this.errorHandler);
				        	transaction.executeSql(Db.tarefasSQL, [], this.onSucess, this.errorHandler);
				        	//To insert new records in the first demo, uncomment this than comment again.
				        	//transaction.executeSql('INSERT INTO listas (id,lista_nome,cor_lista,data_criada) VALUES (1,"Lista Demo","#aa0000","'+demoData+'")',[],Db.onSucess, Db.errorHandler);
				        	//transaction.executeSql('INSERT INTO tarefas (tarefa_nome,completa,data_criada,lista_id) VALUES ("Primeira tarefa demo","true","'+demoData+'",1)',[],Db.onSucess, Db.errorHandler);
				        	//transaction.executeSql('INSERT INTO tarefas (tarefa_nome,completa,data_criada,lista_id) VALUES ("Segunda tarefa demo","true","'+demoData+'",1)',[],Db.onSucess, Db.errorHandler);
				        	//transaction.executeSql('INSERT INTO tarefas (tarefa_nome,completa,data_criada,lista_id) VALUES ("Terceira tarefa demo","true","'+demoData+'",1)',[],Db.onSucess, Db.errorHandler);
				        });
				    }	
				}else{
					var msgSupport = "Doesn't support WebStorage";
					alert(msgSupport);
					console.log(msgSupport);
				}
 
			}catch(e){
					printMsg();
			}
	},
	close : function (){
 
	},
	executeSQL : function (sql){
 
	},
	editRecord : function (object){
 
	},
	deleteTarefa : function (id){
		try{
 
			this.db.transaction(
				        function (transaction) {
 
				        	transaction.executeSql('DELETE FROM tarefas WHERE id=?',[id], Db.onDeleteTarefaSucess, Db.errorHandler);
				        });	
 
 
		}catch(e){
			printMsg();
		}
	},
	onDeleteTarefaSucess : function (e,result){
			document.getElementById('myTarefasList').refresh();
			Db.getTarefas(Db.currentList);
			Db.toast('Tarefa Apagada');
 
	},
	addNewLista : function (name){
		try{
 
			this.db.transaction(
				        function (transaction) {
				        var demoData = new Date();	
				        	transaction.executeSql('INSERT INTO listas (lista_nome,cor_lista,data_criada) VALUES (?,"#aa0000","'+demoData+'")',[name],Db.onSucess, Db.errorHandler);
				        });	
 
			bb.pushScreen('Listas.html','ListaScreen');
		}catch(e){
			printMsg();
		}			
	},
	getListas : function (){
		try{
			this.db.transaction(
				        function (transaction) {
				        	transaction.executeSql('SELECT * from listas',[],Db.onListaSucess, Db.errorHandler);
				        });	
 
		}catch(e){
			printMsg();
		}
	},
	onListaSucess : function (e,result){
				var response = [];
				var len = result.rows.length, i;
				var render;
				  for (i = 0; i < len; i++) {
				   var item = result.rows.item(i);
 
				         render =  document.createElement('div');
					     render.setAttribute('data-bb-type','item');
					     render.setAttribute('data-bb-title',item.lista_nome);
					     render.setAttribute('data-itemid',item.id);
					     render.innerHTML = "Total de tarefas " +item.total;
					     render.setAttribute('data-bb-img','imgs/tag.png');
					     render.addEventListener('click',function(){
					     	bb.pushScreen('Tarefas.html','TarefasScreen',{listaid:$(this).data('itemid')});
					     });
					     response.push(render);
 
				  }document.getElementById('myLists').refresh(response);// voodoo!
	}
	,
	addNewTarefa : function (name){
		try{
 
			this.db.transaction(
				        function (transaction) {
				        var demoData = new Date();	
				        	transaction.executeSql('INSERT INTO tarefas (tarefa_nome,data_criada,lista_id) VALUES (?,"'+demoData+'",'+Db.currentList+')',[name],Db.onSucess, Db.errorHandler);
				        });	
 
			bb.pushScreen('Tarefas.html','TarefasScreen',{listaid:Db.currentList});
		}catch(e){
			printMsg();
		}			
	},
	getTarefas : function (id){
		try{
			Db.currentList = id;
			this.db.transaction(
				        function (transaction) {	
				        	transaction.executeSql('SELECT * FROM tarefas WHERE lista_id = ?',[id],Db.onTarefaSucess, Db.errorHandler);
				        });	
 
 
		}catch(e){
			printMsg();
		}
	},
	onTarefaSucess : function (e,result){
		var response = [];
				var len = result.rows.length, i;
				var render;
				  for (i = 0; i < len; i++) {
				   var item = result.rows.item(i);
				         render =  document.createElement('div');
					     render.setAttribute('data-bb-type','item');
					     render.setAttribute('data-bb-title',item.tarefa_nome);
					     render.setAttribute('data-itemId',item.id);
					     render.innerHTML = "Total de tarefas " +item.data_criada;
					     render.setAttribute('data-bb-img','imgs/bookmark.png');
					     $(render).swipeRight(function (){Db.deleteTarefa(item.id);});
					     response.push(render);
 
				  }document.getElementById('myTarefasList').refresh(response);// voodoo!
	},
	errorHandler: function (transaction, error){
		console.log(error);
		 	if (error.code==1){
		 	} else {
			    console.log('Oops.  Error was  '+error.message+' (Code '+error.code+')');
		 	}
		    return false;
	},
	onSucess: function(e,result){
	 return result;
	},
	printMsg : function (){
			var msg = "Can't open Database" + ' Error: ' + e.error;
			alert(msg);
			console.log(msg);
	},
	toast : function (msg, timeout){
 
		  if(typeof timeout == 'undefined') {
		    timeout = 1000;
		  }
 
		  // toast options
		  options = {
		    timeout: timeout
		  };
 
		  // display the toast message
		  toastId = blackberry.ui.toast.show(msg, options);
	}
}

Como cada função é bem específica para o exemplo,à medida que eu for implementando os métodos eu vou colocando na classe.

O banco de dados é hiper simples, veja a estrutura.

db-todolist

E aqui está o script para você executar.

CREATE TABLE IF NOT EXISTS "listas" (
"id"  INTEGER,
"lista_nome"  TEXT NOT NULL,
"data_criada"  TEXT NOT NULL,
PRIMARY KEY ("id")
);
CREATE TABLE IF NOT EXISTS "tarefas" (
"id"  INTEGER,
"tarefa_nome"  TEXT,
"cor_tarefa" TEXT,
"completa"  REAL,
"data_criada"  TEXT,
"lista_id"  INTEGER,
PRIMARY KEY ("id"),
CONSTRAINT "lista_id_fk" FOREIGN KEY ("lista_id") REFERENCES "listas" ("id") ON DELETE RESTRICT ON UPDATE RESTRICT
);

Em fim, até ai já fizemos a persistência, falta agora só navegar, e para simplificar, eu criei uma classezinha em literal para fazer o trabalho.

var navigatorController =  {
	openMain : function (){
		 var webworksreadyFired = false;
            document.addEventListener('webworksready', function(e) { 
               if (webworksreadyFired) return;
                webworksreadyFired = true;
                bb.init({actionBarDark: true,
                        controlsDark: false,
                        listsDark: false,
                        bb10ForPlayBook: false,
                        highlightColor: '#C82C29',
                        onscreenready : function(element,id,params){
                        	if(id == "ListaScreen")
                        	{
                        		Db.getListas();
                        	}
                        	if(id == "TarefasScreen")
                        	{
                        		 Db.getTarefas(params.listaid);
                        	}
                        	if(id == 'NewTarefaScreen')
                        	{
 
                        	}
                        },
                        ondomready : function(element,id,params){
 
                        }
 
                        });
                bb.pushScreen('Main.html', 'MainScreen');
				Db.open();
            }, false);
	},
	openSobre : function (){
		bb.pushScreen('Sobre.html','SobreScreen');
	},
	openConfig : function (){
		bb.pushScreen('Config.html','ConfigScreen');
	},
	openListas : function (){
		bb.pushScreen('Listas.html','ListaScreen');
	},
	newLista : function (){
 
			bb.pushScreen('NovaLista.html','NewListScreen');
	},
	saveNewLista : function (){
			Db.addNewLista($('#listaInputName').val());
 
	},
	newTarefa : function (){
			bb.pushScreen('NovaTarefa.html','NewTarefaScreen',{mode:true});
	},
	saveNewTarefa : function (){
			Db.addNewTarefa($('#tarefaInputName').val());
	}
}

Pontos negativos

Coloque em prática seus conhecimentos em Javascript e CSS3, por que muita coisa você vai precisar criar do zero, alguns componentes como o datePicker por exemplo ou um Numeric Stepper, algo como um Slider horizontal de imagens, Item renders para itens da lista, nada que não seja possível, vai dar só mais um pouco de trabalho e não fica com aquela coisa de out-of-the-box (tudo pronto).

O próprio toolkit tem muito código da própria comunidade como por exemplo o iScroll que foi utilizado para navegar entre as telas e nas listas. O legal é você poder hacker o código.

A performance não é 100%, eu testei a geração de efeitos com o context do Canvas e realmente leva-se de 2 a 3 segundos para aplicar um efeito a uma imagem, coisa que em um desktop no Chrome por exemplo é instantaneo, provavelmente seja a versão do webkit que esteja sendo utilziada, acredito que isso só o tempo pode dizer se eles vão melhorar esse item específico ou não.

Condeirações finais

É um pouco trabalhoso usar o BBUIJS, mais o acabamento final do projeto, é fantástico, por que você tem a exata idéia de estar criando um App com aparência nativa do sistema OS e isso meu amigo leitor, é fantástico. Porém nada lhe impede de usar outros toolkits de inicalização.

Código fonte disponível no Github

O código fonte dessa App você pode fazer o Fork no Github, a licença do projeto é via licença Apache.

https://github.com/igorcosta/bbuijs-todolist-demo

Eventos/ Playbook

BlackBerry University Tour na Mackenzie e PUC

bbuniversitytour

Amanhã começa a rodada de palestras do BlackBerry University Tour, estarei palestrando na unidade da Mackenzie da Consolação e PUC unidade Perdizes.

Convido a todos os leitores que são estudantes universitários dessas duas instituições a participar do evento. É uma grande oportunidade de você conhecer as soluções de perto e o melhor? Eu vou lhe mostrar como ganhar dinheiro na plataforma Blackberry.

Local: Mackenzie Rua da Consolação, 930 – São Paulo
Dia: 9/Nov
Horário:9:30 AM

Local: PUC Rua Monte Alegre, 1104 – Perdizes
Dia: 10/Nov
Horário:12:30

Blackberry/ Playbook/ Tablets

BlackBerry Playbook lançado no Brasil

playbook
Wow, Adriano meu filho está me ouvindo?! É amigos, finalmente o Playbook da RIM, chegou ao mercado Brasileiro, como era previsto para seu lançamento ser hoje dia 19, de fato ocorreu.

A indústria Brasileira estava bem anciosa por esse lançamento, tanto é que o Tablet já vem preparado com conteúdo nacional, Apps Brasileiras e está bem vendido.

Vem com vários Apps Brasileiros, como da Revista Exame, Cinemark, Buscapé, TAM, UOL Notícias, Rádio CBN, Guia Mais, Documents to Go e uma infinidade de Apps bem bacanas, a loja conta com mais de 40 mil Apps prontos para seu tablet, isso mostra que a RIM possui uma séria posição no mercado para de fato concorrer de igual peso com o iPad; E se ela fizer com o tablet como fez com seus smartphones é garantia de sucesso no mundo corporativo quanto no público geral.

Existem 3 modelos do tablet, a diferença mesmo se dá por conta da capacidade, 16GB, 32GB e 64GB. Vem com camera de 3 Mega Pixel e filma em 1080p, coisa que só agora o Iphone 4S faz. Conta também com uma camera frontal, bateria bem duradoura.

Uma coisa que notei bastante no meu Playbook é a velocidade com que a bateria carrega usando seu carregador de tomada, via USB demora um pouco, porém via plug normal de tomada a coisa é ultra rápida.

Os preços do Playbook no modelo de 16GB sai por R$1.299,00 e vai até R$2.999,00.

Você vai encontrar nas Americanas.com, Lojas Saraiva,Submarino, FNAC e Claro Brasil. Dentre outras grandes lojas de varejo no mercado Brasileiro.

Algumas caracteristicas técnicas dele:

Tela de LCD de 7″, 1024×600 WSVGA, tela de touch-screen com suporte a multi-toque e gestos.
OS com suporte a multiprocessamento simétrico.
Processador de 1 GHz com núcleo duplo (dual core).
1 GB RAM.
Dual câmera HD (3MP frente e 5MP a de traz). Suporte a gravação de vídeo HD1080p.
Reprodução de vídeo: 1080p HD Video, H.264, MPEG, DivX e WMV.
Reproduz Audio: MP3, AAC, WMA.
Saída de vídeo HDMI.
Wi-Fi – 802.11 a/b/g/n.
Bluetooth 2.1 EDR.
Conectores: microHDMI, microUSB, carregador.
Abre, a plataforma de aplicação flexível, com suporte para WebKit/HTML-5, o Adobe Flash Player 10.1, Adobe AIR Mobile, o Adobe Reader, POSIX, OpenGL, Java.
Formato ultra fino e portátil, medindo: 5.1″ x 7.6″ x 0.4″ (130mm x 193mm x 10mm)

Pesa aproximadamente 425 gramas.

Eu tenho um em mãos e prometo fazer um review dele bem bacana, mostrando alguns recursos dele.

AIR Mobile/ Blackberry/ Flex Mobile Framework

Porte sua app para o tablet da BlackBerry e ganhe um (Playbook tablet) novinho em folha

É, você não ouviu errado, a BlackBerry está com uma ótima promoção para desenvolvedores adotarem sua plataforma de uma vez por todas.
Tanto é que agora no Blackberry DevCon Américas, todos os participantes da conferencia irão sair com um tablet novinho em folha.

A promoção é a seguinte:

Você se registra como membro de parceiros da Blackberry pela bagatela de US$699, usando o código DSTSH5. Ou seja 2 coelhos com 1 paulada só.
Registre-se para a conferência até o dia 17 deste mês de Outubro,2011. E sai com um Tablet novinho para portar sua App.

A Blackberry tem um excelente ecosistema que tem atraído muitos desenvolvedores para adotar a plataforma, tanto é que suporta Adobe AIR, Flex, Flash, Actionscript, Java,tecnologias Web em geral.

Acesse agora e registre-se para o Blackberry DevCon Américas.

Notícias

Prontos para o desafio global Blackberry?

desafio

Como dizem nossos leitores mineiros, é prêmio para mais de metro. Esse ano a Blackberry está realizando o MAIOR se não o MELHOR E MAIOR DO MUNDO, desafio para desenvolvedores de sua plataforma.

O desafio é muito simples, você não paga nada, crie um App muito bem bolada, submete o app para análise e a Blackberry pode te escolher para ser o Grand Top desenvolvedor da app para distribuir em seus dispositivos móveis.

São 3 categorias principais que você pode escolher:

Melhor App feito em Flash/Flex/AIR ( Esse era de maio a 12 desse mês, então nem adianta tentar)
Melhor inovação tecnologia usando o WebWorks que funcione no BlackBerry PlayBook e BlackBerry 6 ( Em aberto até dia 26 desse mês)
Melhor aplicativo social viciante usando a plataforma social BBM. (Até 23 de Setembro)

Participe, basta visitar essa página e aqui e saber como entrar no desafio.

Corre e não perde tempo. Eu vou participar!

Flex/ Flex 4.5/ Flex Mobile Framework

Problemas para atualizar Flash Builder 4.5 para 4.5.1 ?

Você já tinha suporte nativo para criar apps para Android no Flash Builder 4.5, porém com o recém lançado 4.5.1 você não faz apenas Android, mas para ios e BlackBerry Playbook.

E isso tem atraído muita gente na esperança de criar apps Flex para mobile, tanto é que alguns colocam defeito no Flex, achando que só serve para Android, o fato é que se você não atualiza, você vai passar batido.

O grande problema é que para atualizar, muita gente acostumada com o Eclipse vai em Help > Search Product Update. Vai ver que não é bem por ai.

Especialmente no Flash Builder a Adobe em conjunto com a suite CS 5.5 criaram um mecanismo que se atualiza. Basta usar o menu corretamente.

help_flex

Siga os passos corretamente e você terá atualizado o seu Flash Builder.

Existem casos especiais que nem assim funciona, nesse caso você baixa manualmente o update e instala, Lembre-se de fechar o Flash Builder antes de fazer isso.
Acesse esse link e baixa a versão que corresponde ao seu OS.