mobile – Blog Fellyph Cintra

17 de Janeiro de 201422 de Janeiro de 2014

Realizando consultas na base de dados do Parse

Essa semana eu iniciei uma série de posts sobre o Parse, serviço de cloud do Facebook. Neste segundo post vou abordar como realizar consultas em nossa base. Caso não conheça o Parse veja o post de introdução: https://www.fellyph.com.br/blog/tutoriais/parse/.

No post anterior abordamos um pouco sobre consultas, primeiro resgatamos todos os valores de uma base com a função “find”, em seguida resgatamos um único item com a função “get”. Criei um cadastro de carros com as propriedades: modelo, ano e valor para cadastrar os dados utilizei os mesmo padrão do post anterior:

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>Todo List App Parse</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="app">
           <header>
           		<h1>CAR LIST</h1>
           </header> 
            <table id="list-cars" class="list-cars">
           		<tr>
           		<td data-done="false" class="item-car">Carregando...</td></tr>
           	</table>
            <hr/>
            <form id="form-car">
            	<label>Modelo:</label>
            	<input type="text" name="model-car" id="model-car" ><br/>
         		
            	<label>Valor:</label>
            	<input type="text" type="number" name="value-car" id="value-car" ><br/>
            	
            	<label>Ano:</label>
            	<input type="number" min="1950" max="2014" name="year-car" id="year-car" ><br/>
            	<input type="submit" value="Salvar">
            </form>
        </div>
        <script src="https://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Todo List App Parse</title>

</head>

<body>

</header>

<tr>

<td data-done="false" class="item-car">Carregando...</td></tr>

</table>

<hr/>

<label>Modelo:</label>

<label>Valor:</label>

</form>

</div>

</body>

</html>

APP.JS

Parse.initialize("YOUR_APP_ID", "YOUR_JS_KEY");

 var app = {
	 		Cars:null,
        	listOfCars:null,
        	inputModel:null,
			inputValue:null,
	 		inputYear:null,
	 
	 		//função para inicializar nosso app
        	initApp: function(){
        		app.Cars = Parse.Object.extend("Cars");
        		
				//showAllCars busca tarefas já cadastradas em nosso app
        		app.showAllCars();
        		
				//Adicionamos um lister para o nosso form
        		document.getElementById("form-car").addEventListener("submit",app.onSubmit);
        		
        		//Fazemos um cache dos itens que acessamos mais de uma vez em nosso app
        		app.listOfCars 	= document.getElementById("list-cars");
        		app.inputModel 	= document.getElementById("model-car");
				app.inputYear	= document.getElementById("year-car");
				app.inputValue	= document.getElementById("value-car")
        	},
	 
	 	//função responsável por consultar os dados na nuvem
        	showAllCars: function(){
				//chamamos a função Query do Parse parar varer a nossa base
        		var query = new Parse.Query("Cars");
        		
        		//a função trata a query para sucesso ou erro de nossa consulta
        		query.find({
					success:function(results){
						//esse bloco será executado se ocorrer tudo bem com nossa query
						app.updateOutputList(results)
					},
					error:function(error){
						//tratamento para caso de erro
						console.log("error",error)
					}
        		})
        	},
	 
	 		updateOutputList: function(results){
 				var markupList = "";
				if(results.length < 0){
 				 markupList = "<tr><th>Modelo</th><th>Ano</th><th>Valor</th></tr>";
						
						//os resultados vem em um array de objetos
						//varremos o nosso array e montamos um markup
						for(var id in results){
							markupList += "<tr class='item-car'>";
							markupList += "<td>"+ results[id].attributes.model +"</td>";
							markupList += "<td>"+ results[id].attributes.year +"</td>";
							markupList += "<td>"+ results[id].attributes.value +"</td>";
							markupList +=
							"</tr>";
						}
				}else{
					markupList = "<tr><th>Nenhum Resultado Encontrado</th></tr>";
				}
				app.listOfCars.innerHTML = markupList;
 			},

			//função para fazer o tratamento quando o usuário envia os dados do form
        onSubmit: function(e){
		var car = {};
				
		car.model = app.inputModel.value;
		//utilizamos parseInt para converter o nosso value que é uma string e inteiro
                car.year = parseInt(app.inputYear.value);
		car.value = parseInt(app.inputValue.value);
		//passamos o nosso objeto para ser salvo na cloud
		app.saveCar(car);
		// utiliza o preventDefault para evitar do form realizar o reload da página
		e.preventDefault();
	},

        	//função específica para salvar as cars na nuvem
        	saveCar: function (car){
        	 	var carCloud = new app.Cars();
        	 	carCloud.save(car).then(function(object) {
                	console.log("Carro salvo com sucesso!");
					//após a informação salva limpamos os dados dos inputs e atualizamos a lista
                	app.showAllCars();
                	app.inputModel.value =
					app.inputYear.value =
					app.inputValue.value = "";
            	});
        	}
 }
 			
window.addEventListener("load", app.initApp)

Parse.initialize("YOUR_APP_ID", "YOUR_JS_KEY");

var app = {

Cars:null,

listOfCars:null,

inputModel:null,

inputValue:null,

inputYear:null,

//função para inicializar nosso app

initApp: function(){

app.Cars = Parse.Object.extend("Cars");

//showAllCars busca tarefas já cadastradas em nosso app

app.showAllCars();

//Adicionamos um lister para o nosso form

document.getElementById("form-car").addEventListener("submit",app.onSubmit);

//Fazemos um cache dos itens que acessamos mais de uma vez em nosso app

app.listOfCars = document.getElementById("list-cars");

app.inputModel = document.getElementById("model-car");

app.inputYear = document.getElementById("year-car");

app.inputValue = document.getElementById("value-car")

//função responsável por consultar os dados na nuvem

showAllCars: function(){

//chamamos a função Query do Parse parar varer a nossa base

var query = new Parse.Query("Cars");

//a função trata a query para sucesso ou erro de nossa consulta

query.find({

success:function(results){

//esse bloco será executado se ocorrer tudo bem com nossa query

app.updateOutputList(results)

error:function(error){

//tratamento para caso de erro

console.log("error",error)

}

})

updateOutputList: function(results){

var markupList = "";

if(results.length < 0){

markupList = "<tr><th>Modelo</th><th>Ano</th><th>Valor</th></tr>";

//os resultados vem em um array de objetos

//varremos o nosso array e montamos um markup

for(var id in results){

markupList += "<tr class='item-car'>";

markupList += "<td>"+ results[id].attributes.model +"</td>";

markupList += "<td>"+ results[id].attributes.year +"</td>";

markupList += "<td>"+ results[id].attributes.value +"</td>";

markupList +=

"</tr>";

}

}else{

markupList = "<tr><th>Nenhum Resultado Encontrado</th></tr>";

}

app.listOfCars.innerHTML = markupList;

//função para fazer o tratamento quando o usuário envia os dados do form

onSubmit: function(e){

var car = {};

car.model = app.inputModel.value;

//utilizamos parseInt para converter o nosso value que é uma string e inteiro

car.year = parseInt(app.inputYear.value);

car.value = parseInt(app.inputValue.value);

//passamos o nosso objeto para ser salvo na cloud

app.saveCar(car);

// utiliza o preventDefault para evitar do form realizar o reload da página

e.preventDefault();

//função específica para salvar as cars na nuvem

saveCar: function (car){

var carCloud = new app.Cars();

carCloud.save(car).then(function(object) {

console.log("Carro salvo com sucesso!");

//após a informação salva limpamos os dados dos inputs e atualizamos a lista

app.showAllCars();

app.inputModel.value =

app.inputYear.value =

app.inputValue.value = "";

});

}

window.addEventListener("load", app.initApp)

Cadastrei algumas informações na minha base para realizar a consulta:

Agora vamos dar uma olhada em algumas funções que podemos trabalhar com a classe Query. A primeira delas será a função equalTo:

equalTo

        searchByModel: function (modelCar) {
		/*
			Meu App Já instaciou a Class Cars
			caso contrario teria que instancia-la:
			var Cars = Parse.Object.extend("Cars");
		*/
		var query = new Parse.Query(app.Cars);

		query.equalTo("model", modelCar);
		query.find({
			success: function (results) {
				app.updateOutputList(results)
			},
			error: function (error) {
				alert("Error: " + error.code + " " + error.message);
			}
		});
	}

searchByModel: function (modelCar) {

Meu App Já instaciou a Class Cars

caso contrario teria que instancia-la:

var Cars = Parse.Object.extend("Cars");

var query = new Parse.Query(app.Cars);

query.equalTo("model", modelCar);

query.find({

success: function (results) {

app.updateOutputList(results)

error: function (error) {

alert("Error: " + error.code + " " + error.message);

}

});

}

Na função equealTo passamos dois parâmetros, o primeiro o nome da propriedade e a segunda o valor que você deseja comparar, detalhe sobre a função que sua consulta é case sensitive.

notEqualTo

query.notEqualTo("modelo", "Uno");

1	query.notEqualTo("modelo", "Uno");

A função notEqualTo é o inverso da função equalsTo ela retorna todos os valores diferentes do valor repassado. Também é possível realizar queries compostas:

query.notEqualTo("model",  "Uno");
query.equalTo("year",2000);
<pre>

Na consulta acima o modelo do carro tem que ser diferente de "Uno" E o ano tem que ser igual a 2000, pensando em SQL seria um operador AND as duas condições tem que ser verdadeiras.

<h3>greaterThan & lessThan</h3>

Com essa consulta podemos receber valores maiores do que o valor informado para a função, por exemplo caso queira receber os carros com o ano superior a 2000 utilizamos a seguinte função:

<pre lang="javaScript">query.greaterThan("year",2000);

query.notEqualTo("model", "Uno");

query.equalTo("year",2000);

<pre>

Na consulta acima o modelo do carro tem que ser diferente de "Uno" E o ano tem que ser igual a 2000, pensando em SQL seria um operador AND as duas condições tem que ser verdadeiras.

<h3>greaterThan & lessThan</h3>

Com essa consulta podemos receber valores maiores do que o valor informado para a função, por exemplo caso queira receber os carros com o ano superior a 2000 utilizamos a seguinte função:

<pre lang="javaScript">query.greaterThan("year",2000);

O função oposta seria lessThan ela retorna apenas os valores menores:

query.lessThan("year",2000);

1	query.lessThan("year",2000);

limit

Por padrão as consultas tem um limite 100 resultados por query, podemos modificar esse resultado de 1 até 1000. Para aplicar esse limite utilizamos a seguinte função:

query.limit(10);

1	query.limit(10);

first

Em nossa query podemos resgatar apenas o primeiro resultado isso é possível com a função first:

query.greaterThan("year",2000);
query.first({
  success: function(object) {
    // caso sucesso retorna o primeiro resultado
  },
  error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
});

query.greaterThan("year",2000);

query.first({

success: function(object) {

// caso sucesso retorna o primeiro resultado

error: function(error) {

alert("Error: " + error.code + " " + error.message);

}

});

skip

Podemos definir o limite de resultados e também podemos definir o índice inicial do resultado com a função skip, com essas duas funções podemos criar um esquema de paginação.

query.skip(10);

1	query.skip(10);

ascending & descending

Além de criar filtros, busca por valores, limitar a busca… criar paginação… Pensa que acabou? Não ainda podemos ordenar nossa consulta(por ascendente ou descendente):

//Instanciamos a query sobre "Cars"
var query = new Parse.Query(app.Cars);

//resgatamos os valores maiores que 2000
query.greaterThan("year",2000);
//definimos a ordenação
query.ascending("year");
		
query.find({
	success: function (results) {
		app.updateOutputList(results)
	},
	error: function (error) {
		alert("Error: " + error.code + " " + error.message);
	}
});

//Instanciamos a query sobre "Cars"

var query = new Parse.Query(app.Cars);

//resgatamos os valores maiores que 2000

query.greaterThan("year",2000);

//definimos a ordenação

query.ascending("year");

query.find({

success: function (results) {

app.updateOutputList(results)

error: function (error) {

alert("Error: " + error.code + " " + error.message);

}

});

O resultado será o seguinte:

Outra opção com listagem de valores maiores para menores:

query.descending("year");

1	query.descending("year");

containedIn & notContainedIn

Caso queiramos realizar a consulta com mais de um modelo de carro, por exemplo, podemos utilizar a função containedIn ela espera um Array como parâmetro:

query.containedIn("model",["Uno", "Civic", "Gol"]);

1	query.containedIn("model",["Uno", "Civic", "Gol"]);

O inverso da função containedIn seguindo o padrão é a função notContainedIn, ela retorna o resultado das palavras diferente das que constam no Array:

query.notContainedIn("model",["Uno", "Civic", "Gol"]);

1	query.notContainedIn("model",["Uno", "Civic", "Gol"]);

exists & doesNotExist

O Parse permite criar objetos com propriedades vazias ou modificar os objetos depois de criados adicionando novos atributos, assim os objetos antigos ficam sem a informação gravada, para isso podemos utilizar a função exists para verificar se o objeto possui informação gravada na propriedade requisitada.

Vamos a um exemplo:

query.exists("year");

1	query.exists("year");

No código acima verificamos os itens que tem a propriedade year cadastrada, o inverso seria:

query.doesNotexists("year");

1	query.doesNotexists("year");

matchesKeyInQuery & doesNotMatchKeyInQuery

A matchKeyInQuery serve para comparar dois objetos de classes diferentes que possuem duas propriedades iguais, por exemplo:

var Team = Parse.Object.extend("Team");
var teamQuery = new Parse.Query(Team);
var userQuery = new Parse.Query(Parse.User);
userQuery.matchesKeyInQuery("hometown", "city", teamQuery);
userQuery.find({ 
  success: function(results) {
    // results has the list of users with a hometown team with a winning record
  }
});

var Team = Parse.Object.extend("Team");

var teamQuery = new Parse.Query(Team);

var userQuery = new Parse.Query(Parse.User);

userQuery.matchesKeyInQuery("hometown", "city", teamQuery);

userQuery.find({

success: function(results) {

// results has the list of users with a hometown team with a winning record

}

});

No código acima temos duas class Team e Users esta classe deriva do Parse Porque é uma classe especial, vamos falar dela em um próximo post. Mas voltando a query, comparamos duas propriedades “hometown” e “city” presentes na classe User e Team quando eles forem idênticos apareceram em nossa consulta.

select

Caso queira consultar propriedades específicas com a função select passamos as keys das propriedades que queremos:

query.greaterThan("year",2000);
query.select("model", "year");

1 2	query.greaterThan("year",2000); query.select("model", "year");

No caso da imagem acima utilizei a mesma função de exibir os resultados, por conta de utilizar o select a coluna valor veio “undefined” porque eu só escolhi duas propriedades “model” e “year”.

startsWith

Na função equalsTo ele retorna valores estritamente idênticos, com a função podemos resgatar valores que iniciam com a String repassada, ela tem um funcionamento parecido com o operador LIKE do MySQL. Esta consulta também é case sensitive.

query.startsWith("model","F")

1	query.startsWith("model","F")

count

A função count conta “Dan”, isso mesmo ela serve para contar o número de itens do resultado ela funciona da seguinte forma:

query.startsWith("model","F")
query.count({
		  success: function(count) {
			// The count request succeeded. Show the count
			alert("Carros que começam com F: " + count);
		  },
		  error: function(error) {
			// The request failed
		  }
		});

query.startsWith("model","F")

query.count({

success: function(count) {

// The count request succeeded. Show the count

alert("Carros que começam com F: " + count);

error: function(error) {

// The request failed

}

});

No exemplo anterior eu realizei um filtro sobre a query e a função count tem o tratamento similar a função find, falando nela podemos aplicar as duas em conjunto sem problemas. Temos outras queries aplicadas em objetos relacionais mas isso vamos abordar em um futuro. Até o próximo post Pessoal.

12 de Janeiro de 201419 de Janeiro de 2018

Observe a orientação do device com JavaScript

Com Javascript podemos observar a orientação do device, também é possível realizar este tratamento com CSS, mas isso fica restrito a questões visuais, caso queria realizar algum tratamento lógico em nossa aplicação podemos utilizar JavaScript. Temos “N” possibilidades de acompanhar a orientação do device, nesse post vou mostrar duas maneiras bem simples, a primeira observando o evento ‘orientationchange’, para isso adicionamos um listener em em nossa janela com o seguinte código:

 window.addEventListener('orientationchange', function(){
   	// faça alguma coisa
   });

window.addEventListener('orientationchange', function(){

// faça alguma coisa

});

O código acima acompanha quando a orientação do device muda, mas como sabemos que o usuário está em landscape ou portrait, para isso pegamos a orientação do device, com window.orientation essa propriedade retorna a rotação do device:

window.addEventListener('orientationchange', function(){
   	switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
   });

window.addEventListener('orientationchange', function(){

switch(window.orientation)

{

case -90:

case 90:

alert('landscape');

break;

default:

alert('portrait');

break;

}

});

Com as informações sobre a rotação do device sabemos que 90 ou -90 o device está em landscape e diferente disso portrait. No código acima foi disparado somente um alert, mas poderíamos chamar alguma outra função, editar uma classe de um elemento ou adicionar uma conteúdo específico para o usuário.

A segunda opção seria com matchMedia ela faz parte da Web API Interface com ela podemos validar media queries por exemplo:

if (window.matchMedia("(min-width: 360px)").matches) {
  /* O view port tem pelo menos 360px de largura */
} else {
  /* o view port tem menos de 360px de largura */
}

if (window.matchMedia("(min-width: 360px)").matches) {

/* O view port tem pelo menos 360px de largura */

} else {

/* o view port tem menos de 360px de largura */

}

Podemos validar qualquer media query no CSS3 temos uma regra para verificar a orientação vamos utilizar ela para pegar o orientação do nosso device:

function handleOrientationChange(mediaQuerie) {
  	if (mediaQuerie.matches) {
    		alert("portrait")
  	} else {
    		alert("landscape")
  	}
}

/* Criamos uma variável para armazenar a media querie */
var mediaQuerie = window.matchMedia("(orientation: portrait)");

/* Adicionamos um listenr para acompanhar a mudança de orientação */
mediaQuerie.addListener(handleOrientationChange);

function handleOrientationChange(mediaQuerie) {

if (mediaQuerie.matches) {

alert("portrait")

} else {

alert("landscape")

}

/* Criamos uma variável para armazenar a media querie */

var mediaQuerie = window.matchMedia("(orientation: portrait)");

/* Adicionamos um listenr para acompanhar a mudança de orientação */

mediaQuerie.addListener(handleOrientationChange);

Temos ai duas opções para verificar a orientação do device.

12 de Janeiro de 2014

Os últimos Talks de 2013

2013 foi um ano incrível, e no fechar das cortinas tive a chance de palestrar em dois grandes eventos. O WEBBR 2013 e EATI 2013 duas experiência incríveis, o primeiro eventos é um dos maiores eventos de Web do Brasil e o segundo um super evento no extremo sul do Brasil.

Na segunda feira dia 18 de abril tive a oportunidade de falar sobre performance em apps HTML5, a palestra inicialmente seria apresentada por Demian Borba que generosamente emprestou o conteúdo de sua palestra. Nela listei 20 dicas sobre performance. Tive sorte de abrir a rodada de palestras, abrir evento é sempre bom que você fica com tempo livre para conferir todas as outras palestras. No WEBBR 2013 possuía 4 trilhas e eu fui escalado na trilha canvas, após minha palestra tirando a palestra da Talita Pagani eu fiquei mais tempo na trilha section.

Após a minha palestra foi a vez de Talita Pagani subir no auditório. Com a palestra sobre games com HTML5, apresentação que abordou os principais assuntos sobre desenvolvimento de jogos em HTML5, na palestra a Talita falou de algumas questões que ela enfrenta no dia-a-dia. Após a palestra da Talita conferi ótimas palestras com Bruno Azevedo, Caio Gondim e Almir Filho. No WEBBR tive a oportunidade de conhecer o trabalho do Bruno e por sorte encontrar novamente no EATI e conhecer mais sobre esse grande profissional.

O EATI evento organizado pelo o Joel da Silva, aconteceu na unidade da Universidade Federal de Santa Maria de Frederico Westphalen, posso falar que foi um dos eventos que fui mais bem acolhido em 2013. A cidade de Frederico Westphalen está situada entra Santa Cataria, Rio Grande do Sul e Argentina. Para chegar lá tive que enfrentar uma verdadeira Odseia, sai na noite do dia 19 de novembro de Guarulhos para Chapecó, fazendo escala em Florianópolis, chegando em Floripa por questões climáticas tive que ir de ônibus até Frederico Westphalen uma viagem que durou 11 horas. Chegando lá fui direto para a UFSM onde tinha um workshop no período da tarde e a noite uma palestra.

As fotos acima são do Workshop sobre desenvolvimento de Jogos em HTML5, logo após o workshop foi a vez da palestra para os Estudantes da UFSM

Posso falar que foi sofrido mas valeu a pena a recepção dos professores e alunos foi incrível. No dia seguinte a minha palestra foi a vez do momento BrazilJS, Jaydson e companhia durante todo o dia deram uma série de palestras sobre Front End. Devidamente recuperado eu acompanhei todas as palestras no segundo dia. Algumas das palestras eu tinha visto dias antes no Webbr Conf mas valeu a pena ver de novo.

2013 foi um ano incrível, aprendi bastante e conheci pessoas incríveis nas cidades onde passei, a batalha inicia novamente e que venha 2014! Um 2014 de muito sucesso para todos os leitores.

8 de Janeiro de 20149 de Janeiro de 2014

Jornada Adobe 2014

Olá Pessoal, no mês de janeiro estarei em Maceió e João Pessoal para ministrar 3 treinamentos na Jornada Adobe 2014, para mim é uma honra participar desse evento que já contou com grandes nomes em suas edições anteriores. Volto a cidade de Maceió após o Adobe Camp para mim é um prazer voltar a cidade onde sou tão bem recebido. Em Maceió vou ministrar dois Cursos Mobile Impact(20/01, 21/01 e 22/01) e WordPress Impact(23/01, 24/01 e 25/01). Em João Pessoal será a minha primeira vez como “MC”, lá estive presente a muito tempo atrás para um evento da SBC, lá eu vou ministrar o treinamento Mobile Impact(27/01, 28/01 e 29/01). Estou bastante ansioso para voltar para “Jampa”.

O Curso WordPress Impact tem a seguinte grade:

Primeiro dia

Preparando seu ambiente local de desenvolvimento
Estrutura de pastas e organização de arquivos
Requisitando informações do blog
Entendendo o loop
Filtrando o conteúdo do loop com query_posts, WP_Query
Integrando o tema com framework front-end

Segundo dia

Controla a Paginação
Menus dinâmicos(wp_nav_menu)
Filtros(Hooks)
Administrando sidebars(dynamic_sidebar)
Template Page
Post Thumbnail

Terceiro dia

Campos personalizados
Criando formulário para cadastro de campos personalizados
Post_types
Criando nova taxinomia
Integrando WordPress com libs javascript(jQuery ou Zepto)

Este treinamento acontecerá somente na cidade de Maceió, o treinamento Mobile Impact acontece em Maceió e João Pessoa tem a seguinte grade:

Primeiro Dia

Input Types
- Numeric
- Tel
- Date
- Hour
- Email
Input Attributes
- Validate elements
- Required elements
CSS tips
<liAnimation
- Media queries

Segundo Dia

Trabalhando com áudio
Trabalhando com vídeo
Canvas
Geolocation
API Drag and Drop API
Custom Data Attribute
LocalStorage
Microdata
WebSQL
Websockets

Terceiro Dia

Hammer.js
Cloud Service with Parse
Projeto Final
- Colocando tudo em prática
- Preparando ambiente Instalando o PhoneGap
- Publicando seu app

Ficou Interessado só se inscrever no link: http://www.jornadaadobe.com/inscricoes

3 de Janeiro de 201419 de Janeiro de 2018

Trabalhando gestos com Hammer.js

Hammer é uma biblioteca JavaScript que dispara eventos para os gestos realizados em suas aplicações com HTML+JS. O Hammer.js é simples de usar, como muitas bibliotecas ele usa o esquema “jQuery-like”.

Para utilizar a biblioteca de gestos precisamos dos seguintes passos, carregar a biblioteca do Hammer disponível no link: http://eightmedia.github.io/hammer.js/, além de encontrar o fonte lá você vai encontrar exemplos de como usar a biblioteca. Com os arquivos importados agora vamos ao código, inicialmente selecionamos o elemento o qual vamos “ouvir” os gestos e depois especificamos o gesto que vamos acompanhar.

Exemplo:

var element = document.getElementById('box');
var hammertime = Hammer(element).on("swipe", function(event) {
        	alert('swipe!');
    	});

var element = document.getElementById('box');

var hammertime = Hammer(element).on("swipe", function(event) {

alert('swipe!');

});

No código acima temos um exemplo que acompanha o movimento de swipe, quando realizado ele dispara um alert. E o que podemos fazer com isso? Slide de fotos, invocar menus, ações em jogos, mudança de conteúdo. Podemos notar que no código acima recebemos um evento na função chamada pelo Hammer, vamos usar o “console.log” para inspecionar esse item e o resultado será o seguinte:

Ele retorna um objeto com uma sério de propriedades, no final da lista temos algumas propriedades importantes, type(tipo do evento), timeStamp, target(onde foi realizado o evento), srcElement(O elemento responsável por chamar o evento) e gesture um objeto que capta as infos sobre o “toque” realizado pelo usuário, esse item vamos detalhar a seguir:

No objeto gesture temos como pegar a angulação que foi realizado o toque, a velocidade x e y, escala, distância, rotação e direção do toque. É muito informação que pode ser trabalhada

Agora vamos a um evento mais prático:

<!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" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hammer Tutorial</title>
    </head>
    <body>
        <div id="box">
        	<nav id="menu" class="hide">
        		<ul>
        			<li><a href="#">item 1</a></li>
        			<li><a href="#">item 2</a></li>
        			<li><a href="#">item 3</a></li>
        			<li><a href="#">item 4</a></li>
        		</ul>
        	</nav>
        </div>

        <script type="text/javascript" src="js/hammer.min.js"></script>
        <script type="text/javascript">
        	var element = document.getElementById('box');
			var menu = document.getElementById("menu");

        	Hammer(element).on("swipe", function(event) {
        		//verificamos qual o valor da propriedade direction caso "right"
        		// ele adiciona o class ao menu active
        		// caso o valor do direction for "left" ele adiciona o class "left"
        		if(event.gesture.direction == "right"){
        			menu.className = "active";	
        		}else if(event.gesture.direction == "left"){
        			menu.className = "hide";
        		}
    		});
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hammer Tutorial</title>

</head>

<body>

<ul>

</ul>

</nav>

</div>

var element = document.getElementById('box');

var menu = document.getElementById("menu");

Hammer(element).on("swipe", function(event) {

//verificamos qual o valor da propriedade direction caso "right"

// ele adiciona o class ao menu active

// caso o valor do direction for "left" ele adiciona o class "left"

if(event.gesture.direction == "right"){

menu.className = "active";

}else if(event.gesture.direction == "left"){

menu.className = "hide";

}

});

</script>

</body>

</html>

No exemplo acima em nosso elemento com id box, adicionamos uma tag nav com id menu esse item que vamos exibir e esconder. No código JavaScript no final do nosso arquivo verificamos no objeto gesture qual o valor do direction, caso “right” adicionamos o class active, caso contrario adicionamos o class “hide” a transição nos fazemos com CSS3 o código eu mostro a seguir:

#box {
	padding: 0;
	margin: 10%;
	width: 80%;
	height: 300px;
	background-color: green;
	display: block;
	position: relative;
	overflow: hidden;
}

#menu {
	width: 200px;
	height: 100%;
	background-color: yellow;
	margin: 0;
	position:absolute;
	transition:  left 300ms linear;
}

#menu.hide{
	left: -250px;
}

#menu.active{
	left:0;
}

#box {

padding: 0;

margin: 10%;

width: 80%;

height: 300px;

background-color: green;

display: block;

position: relative;

overflow: hidden;

}

#menu {

width: 200px;

height: 100%;

background-color: yellow;

margin: 0;

position:absolute;

transition: left 300ms linear;

}

#menu.hide{

left: -250px;

}

#menu.active{

left:0;

}

Um exemplo simples mas muito usado em muitas aplicações. O exemplo completo desse tutorial você pode conferir no GitHub: https://github.com/fellyph/Tutorial-bbUI/tree/master/hammer/www