8º Encontro FEMUG SP + 8º Encontro Mobile Dev Group São Paulo

Olá pessoal venho anunciar o nosso primeiro encontro do ano, esse encontro será uma parceria com o grupo FEMUG-SP. O grupo organizado pelo Daniel Filho, para quem não conhece o grupo vai uma breve descrição:

O “Front-End Meet-Up Group” é um projeto que nasceu da necessidade de unir os desenvolvedores Front-End de São Paulo, e então tornou-se uma idéia coletiva, para que o acesso à informação seja feito em qualquer lugar que haja interesse do aprendizado.

 

O FEMUG realiza encontros periódicos sem um local fixo cada mês uma empresa fica responsável por seder o espaço para o evento, neste mês o encontro será realizado na BlackBerry. O Tema ainda não foi definido, ele é fechado dias antes do evento, para acompanhar a discussão sobre o encontro acesse a lista no seguinte link: http://bit.ly/FEMUG-SP

As conversas sobre o encontro começaram no ano passado Demian Borba, conheceu Daniel Filho no FEEC Brasil em Recife, isso mesmo em Recife nós conhecemos o grupo de São Paulo. E nesse mês será um prazer receber o FEMUG nas instalações da BlackBerry Brasil, também convidamos os integrantes do Mobile Dev Group São Paulo participarem do encontro. Quem não acompanha o nosso Dev Group no Facebook vai perguntar “Que grupo é esse?”. No final do ano passado em uma reunião realizada entre os managers do Brasil decidimos mudar o nome dos grupos de “BlackBerry Dev Group” para “Mobile Dev Group”.

Essa mudança visa abrir os grupos para desenvolvedores de outras plataformas, com o foco no enriquecimento do conhecimento entre os desenvolvedores independente da plataforma, atualmente temos muitas tecnologias convergentes em várias plataformas, por exemplo, AIR, Unity e Phone Gap. O Apoio da BlackBerry aos grupos continua com o mesmo foco os desenvolvedores.

E agora chega de “Blá Blá Blá” vamos ao que interessa o encontro será nesta Quarta-feira, 15 de Janeiro de 2014 às 20:00h no Escritório da BlackBerry Brasil:

Centro Empresarial Nações Unidas, Torre norte – 35º andar
Av. das Nações Unidas, 12901 – Itaim Bibi
São Paulo

Interessado em participar do evento por favor se inscrever no seguinte link: http://www.eventick.com.br/femug-sp-8

E até lá pessoal.

 

 

 

Anúncios

Limites do LocalStorage

Sempre quando falo de localStorage as pessoas me perguntam: “Qual o limite do LocalStorage?” sempre respondia o valor padrão de 5MB, mas esse valor é apenas uma especificação da W3C. Segundo ela:

A mostly arbitrary limit of five megabytes per origin is suggested. Implementation feedback is welcome and will be used to update this suggestion in the future.

Ela sugere(não é obrigatório) que o espaço reservado por origem seja de 5MB e no futuro esse limite pode ser atualizado, a origem citada anteriormente no caso é por cada domínios. As variações a1.exemplo.com , a2.exemplo.com , a3.exemplo.com são considerada a mesma origem.

Em nosso caso o espaço disponível para o localStorage em aplicações em HTML5 na plataforma BlackBerry 10 é de 25MB, para armazenamento de texto 25MB é muita informação. Caso chegue ao limite do armazenamento será levantada uma exceção : QUOTA_EXCEEDED_ERR.

Caso queria saber o limite de armazenamento do seu browser, existe esse teste online: http://arty.name/localstorage.html

Segundo o site citado acima podemos modificar o limite de armazenamento no Opera, Firefox e no Chrome/Safari/IE

Utilizando localStorage para armazenar dados no Device

localstorage

No HTML5 uma features mais utilizada para aplicações móveis é o armazenamento local. Ou DOM Storage como é chamado, ele foi introduzido na especificação da Web Applications 1.0 depois também adicionada na especificação da W3C Web Storage. Com o DOM Storage podemos armazenar dados do usuário no device de forma fácil e segura, em comparação aos cookies, esse recurso era a única opção de armazenamento local sem o uso de plugin foi fortemente utilizado quando o HTML era somente para Desktop.

LocalStorage é um dos recursos do DOM Storage que vamos abordar nesse post, com ele podemos armazenar dados apenas em formato de texto, mas claro podemos contornar essa limitação. Vamos a um exemplo básico de armazenamento.

localStorage.setItem("device","BlackBerry");

No código acima adicionamos uma variável com nome “device” que irá armazenar a String “BlackBerry”. Para visualizar se a informação foi realmente salva, vamos em developer tools em seu browser ou no “debug mode” caso esteja “buildando” em seu device, depois Resources > LocalStorage e procuramos a informação device no painel. Como podemos ver na imagem abaixo:

Captura de Tela 2013-12-22 às 13.36.22

Agora que sabemos que a informação foi salva vamos resgatar esse valor com o seguinte código:

var meuDevice = localStorage.getItem("device")
alert("Device:" + meuDevice)

No código acima passamos a função getItem e como parâmetro passamos a key do dado que queremos resgatar, na linha seguinte apenas damos um alert para exibir a informação.

Caso queria remover essa informação do localStorage utilizamos o seguinte código:

localStorage.removeItem("device")

Agora vamos para um exemplo prático aplicando essas três funções que virmos acima, no caso: salvar, ler e excluir os dados no localStorage.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		window.addEventListener("load",function(){
			
			if(localStorage.getItem("name")){
				sayMyName()
			}else{
				whatsYourName()
			}
		});
		
		function whatsYourName(){
			var campo = "<input type='text' id='nome' placeholder='Qual é o seu nome'/><button id='bt-save'>Salvar</button>";
			
			document.body.innerHTML = campo
			document.getElementById("bt-save").addEventListener("click",saveName)
		}
		
		
		function sayMyName(){
			var mensagem = "<h1> Olá " + localStorage.getItem("name") + "</h1><button id='bt-remove'>Remover</button>";
			
			document.body.innerHTML = mensagem;
			document.getElementById("bt-remove").addEventListener("click",removeName)
		}
		
		function removeName(){
			if(localStorage.getItem("name")){
				localStorage.removeItem("name");
				whatsYourName()
			}	
		}
		
		function saveName(){
			var nome = document.getElementById("nome").value;
			localStorage.setItem("name", nome) 
			sayMyName();
		}
	</script>
</head>
<body>
</body>
</html>

O Exemplo é bem simples ele verifica se tem o dado “name”, caso tenha, exibe o nome. Caso contrário adiciona um input para cadastrar o dado. Quando o nome é exibido também adicionamos um button para chamar a função de excluir os dados. Nos Exemplos anteriores apenas adicionamos e removemos algumas strings, para trabalhar com objetos no localStorage precisamos usar a Classe JSON, com ela é possível fazer a ponte entre texto e objetos.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>save and load object</title>
	<script>
		
		
		window.addEventListener("load",function(){
			if(localStorage.getItem("user")){
				var texto = localStorage.getItem("user");
				var objeto = JSON.parse(texto);
				document.body.innerHTML = "nome: <strong>" + objeto.name + "</strong>" + 
				" email: <strong>" + objeto.email + "<strong>"
			}else{
				var user = { 
					name:"Fellyph",
					email:"fellyph@blackberry.com"
				}
			
				var userString = JSON.stringify(user);
	
				localStorage.setItem("user",userString);
				document.body.innerHTML = "dados salvos"	
			}
		})
	</script>
</head>
<body>
	
</body>
</html>

No código acima verificamos se existe um dado com uma key “user”, caso exista ele resgata a informação na variável “texto” em seguida converte o texto em objeto com a classe JSON através da função parse que passamos como parâmetro o nosso texto armazenado no localStorage, na sequência adicionamos o conteúdo no body do nosso arquivo. Caso o usuário não tenha nenhuma informação salva, o código irá criar um objeto “user” e em seguida “stringificar” o nosso objeto assim salvado os dados em nosso localStorage. Esse exemplo não é muito funcional apenas exemplifica como é salvar um objeto em nosso localStorage.

Agora vamos partir para um exemplo mais funcional, vamos montar uma todo-list utilizando localStorage, desta vez vamos separar o código no arquivo todo-list.html, js/app.js e css/style.css. Caso queira baixar o exemplo ele e os anteriores estão disponíveis no gitHub no seguinte link: https://github.com/fellyph/Tutorial-bbUI/tree/master/localstorage

Inicialmente nosso HTML:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Todo List</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="js/app.js"></script>
</head>
<body>
	<h1>todo-list</h1>
	<div id="tasks-output"></div>
	<form id="form-task">
		<input type="text" name="descricao" placeholder="adicione uma nova task" required>
		<input type="submit" value="Salvar">
	</form>
</body>
</html>

Nosso CSS:

#tasks-output li {
	cursor: pointer;
}

#form-task {
	border-top: 1px solid #ddd;
	padding: 10px 0;
	margin: 10px 0;
}

#tasks-output li[data-done="true"] {
	text-decoration: line-through;
}

Detalhe para o ultimo seletor que trata quando o item da lista possui o atributo data-done igual a true, ele vai adicionar uma linha sobre o texto.

Agora o nosso JS:

var todoList;
		var todoOutput;
		
		window.addEventListener("load",function(){
			//guarda em uma variável o elemento tasks-output
			todoOutput = document.getElementById("tasks-output")
			if(localStorage.getItem("tasks")){
				todoList = JSON.parse(localStorage.getItem("tasks"));
				showList()
			}else{
				todoList = [];
			}
			
			if(todoList.length == 0){
				todoOutput.innerHTML = "Nenhuma tarefa cadastrada"
			}
			//adiciona o listener para o evento submit, utilizei form para usar o required do input HTML
			document.getElementById("form-task").addEventListener("submit",onSubmit);
			todoOutput.addEventListener("click",clickList)
		})
		
		function clickList(e){
			//somente fazer algo quando clicar em um item li
			if(e.target.localName == "li"){
				e.target.dataset.done = (e.target.dataset.done === 'true')? false : true;
				todoList[e.target.dataset.id].done = e.target.dataset.done;
				saveList();
			}else if(e.target.localName == "button"){
				clearList()
			}
		}
		
		function onSubmit(e){
			var task = {};
		
			//pego o valor cadastrado no primeiro input do meu form
			task.descricao = e.target[0].value;
			task.date = new Date();
			task.id = todoList.length;
			task.done = "false";
			
			//adicionando a task na lista
			todoList.push(task);
			saveList();
			showList();
			// utiliza o preventDefault para evitar do form realizar o reload da página
			e.preventDefault();
		}
		
		function saveList(){
			//converte os dados em string e salva no local storage 
			localStorage.setItem("tasks",JSON.stringify(todoList));
		}
		
		function clearList(){
			//varre a lista a procura de tarefas realizadas
			for(var i = 0; i < todoList.length; i++){
				if(todoList[i].done === 'true'){
					todoList.splice(i, 1);  //remove 1 elemento na posição i;
					i = 0;  //voltando o indice no array para validar novamente a lista
				}else{
					todoList[i].id = i;
				}
			}
			showList();
			saveList();
		}
		
		function showList(){
			//mostra a lista de todo
			var total = todoList.length;
			if(total > 0){
				var htmlTemp = "<ul>"; 
				for(var i = 0; i < total; i++){
					htmlTemp += "<li data-id='"+todoList[i].id+"' data-done='" + todoList[i].done + "'>"+ todoList[i].descricao + " - "+ formatDate(todoList[i].date)+"</li>"
				}
				htmlTemp += "</ul><button>Limpar tarefas realizadas</button>";
				todoOutput.innerHTML = htmlTemp;
			}else{
				todoOutput.innerHTML = "Nenhuma tarefa cadastrada"
			}
		}
		
		function formatDate(date){
			// formata a data para o formato DD/MM/YYYY
			var time = new Date(date);
			var saida = time.getDate() +"/"+ time.getMonth() + "/" + time.getFullYear();
			return saida;
		}

Tentei comentar os pontos mais importantes do código, no exemplo acima o usuário pode cadastrar as tasks que serão vinculadas uma data, quando o usuário clica no item da lista a propriedade “data-done” muda entre true ou false. caso o usuário queira limpar sua listas de task clica no botão “Limpar tarefas…” o código irá varrer da lista os itens com valor da propriedade data-done igual a true e retirar da lista.

Além do LocalStorage temos o SessionStorage, a diferença entre os dois é que o sessionStorage como o nome sugere ele guarda as informações apenas na seção ou seja no caso de um app mobile, quando o app é finalizado a informação é removida.

Use o Input type apropriado para cada tipo de dado

Com o HTML5 foram introduzidos os novos inputs types isso representou um ganho enorme para os usuários mobile que utilizam formulários em seu app e site, utilizar o input type correto é muito importante para experiência do usuário. Nesse tutorial vou listar os principais inputs type para você utilizar em sua aplicação.

date

Este campo é preparado para receber uma data, será exibido para o usuário um calendário para cadastrar a informação. O resultado da utilização do input é o seguinte:

IMG_00000575

<input type=”date” id=”data”>

time

Este campo campo é utilizado para realizar cadastro de hora. Da mesma forma do date ele irá habilitar um interface adaptada para cadastro da informação.

IMG_00000576

<input type=”time” id=”hora”>

month

Campo é similar ao date mas resgata apenas a entrada de mês e ano sem o time zone.

IMG_00000572

<input type="month" name="mes" id="mes">

number

Input para cadastro específico de números, para o usuário mobile ele exibe apenas o teclado numérico como a imagem a seguir:
input_number

<input type="number" name="num" id="num">

range

Cria um elemento slide para receber um valor dentro de um intervalo especificado pelas propriedades min e max.

range

<input type=”range” name=”media” id=”media” min="0" max="100">

color

Permite ao usuário selecionar uma cor específica retornando um valor hexadecimal.

IMG_00000571

<input name="cor" id="cor" type="color" >

url

Este elemento cria uma validação para url em invoca um teclado específico para o cadastro da info.

<input name="mail" id="mail" type="email">

email

Assim como o type url esse item realiza uma validação esperando uma info com @. Caso o usuário tente cadastrar uma informação inválida teremos o seguinte alerta:

IMG_00000582

<input name="mail" id="mail" type="email">

tel

Input Similar ao number com apenas números, mas com o teclado semelhante ao discador:

IMG_00000581

<input name="phone" id="phone" type="tel">

search

Neste campo é adicionado um “x” no canto esquerdo quando é adicionado algum conteúdo, o “x” tem a função de limpar o conteúdo. Como o nome sugere este Input é utilizado em campos de busca.

search

<input type="search" id="busca">

Esse itens além de ter o suporte no Blackberry 10 também tem suporte nas maiorias dos browsers e muito coisa nova esta vindo por ai. Além de novos inputs temos novas propriedades que será o tema do próximo post sobre input.

O código dos exemplos confere aqui :

https://github.com/fellyph/Tutorial-bbUI/tree/master/tutorial-input/www

O último encontro do ano – Dev Group São Paulo

E lá se foi mais um ano e nós do dev group São Paulo vamos comemorar mais um que se passa, muito cliche essa frase mas sempre bom confraternizar. E vamos fechar o ano com um Happy Hour especial no dia 19 de dezembro as 19h e todos estão convidados.

E o local do nosso encontro será no Ibotirama 2004:
Rua Augusta, 1236
Consolação
São Paulo

Mapa:

http://www.ibotiramabar.com.br/mapa_acesso3.html?f=q&source=s_q&hl=pt-BR&geocode=&q=rua+augusta,+1236,+consola%E7%E3o,+s%E3o+paulo&sll=-14.179186,-50.449219&sspn=104.33955,228.339844&ie=UTF8&z=17&iwloc=A