Categorias
AMP Accelerated mobile pages

Ouvindo eventos com AMP e trabalhando com amp-sidebar

Para esse post iremos implementar um menu slider, com isso precisar aprender dois itens importantes o primeiro é interação com eventos e o segundo é o componente amp-sidebar, para nosso exercício iremos aplicar em nosso projeto the best caipirinha o menu atualmente se encontra sempre visível no modo desktop não temos problemas mas nas versões mobile temos os menu sempre cobrindo o nosso conteúdo, como podemos ver na imagem abaixo:

nosso menu se comporta na versão mobile

Como solução para o nosso problema iremos exibir o menu apenas quando o usuário clicar no botão menu. Para isso precisamos acompanhar o evento de click do usuário. Como fazemos isso com AMP? Com JavaScript ouvimos os eventos através do addEventListener mas com AMP iremos utilizar o atributo on.

atributo “on”

Com AMP para acompanhar eventos com tap, cliques de mouse interações com o teclado. Esses eventos nos componentes AMP são acompanhados pelo atributo on além de acompanhar os eventos podemos definir ações específicas chamadas de actions, por exemplo:

<button on="tap:menu.hide">

No código acima temos um botão que está acompanhando a ação de tap e quando realizado o elemento com id “menu” onde será realizada a ação de “hide” para esse código funcionar precisamos de elemento com o id menu exemplo:

<div id="menu">Meu menu</div>
<button on="tap:menu.hide">Fechar o menu</button>

Ações

No exemplo acima utilizamos a ação hide ele faz parte de um grupo de ações genéricas disponíveis para todos componentes AMP e elementos HTML que são elas:

  • hide
  • show
  • toggleVisibility
  • toggleClass
  • scrollTo
  • focus

Alguns componentes possuem ações e eventos específicos, por exemplo, o amp-carousel possui a ação goToSlide onde podemos exibir um slide específico e o evento slideChange que com ele podemos acompanhar esse evento e determinar alguma ação quando necessário.

amp-sidebar

Agora que temos uma introdução a eventos e ações com AMP vamos implementar esses novos recursos a nossa aplicação, primeiramente vamos adicionar o component amp-sidebar em nossa aplicação ele irá necessitar um script extra:

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

O componente amp-sidebar oculta o conteúdo destinado a uma acesso temporário exemplo, links de navegação, botões, menus. O componente pode ser controlado por botões.

amp-sidebar possui um comportamento bem específico:

  • O conteúdo irá aparecer sempre da direita ou esquerda da página dependendo de qual valor definido pela propriedade side.
  • amp-sidebar deve conter um componente HTML válido.
  • layout nodisplay é obrigatório
  • É recomendado que o componente amp-sidebar seja um filho direto da tag body para preservar a ordem lógica do DOM especialmente para leitores de tela.
  • A ação de zoom é desabilitada para preservar o seu funcionamento.
  • A largura da sidebar pode ser ajustado via CSS mas respeitando uma largura mínima de 45px.

Depois da introdução ao componente vamos a sua utilização:

  <button class="recipe__header__menuBtn" on='tap:sidebar-menu.toggle'>Menu</button>    
  <amp-sidebar id="sidebar-menu" side="left" layout="nodisplay">
          <nav class="recipe__navigation nav">
            <ul class="recipe__navigation__menu">
              <li class="recipe__navigation__item">
                <a href="#about">About</a>
              </li>
              <li class="recipe__navigation__item">
                <a href="#ingredients">Ingredients</a>
              </li>
              <li class="recipe__navigation__item">
                <a href="#steps">Steps to Make It</a>
              </li>
            </ul>
          </nav>
        </amp-sidebar>

No código acima temos um botão responsável por invocar a exibição da nossa sidebar, inicialmente ela estará no estado nodisplay, acompanhamos o evento de tap e quando pressionado ele irá realizar ação de toggle em nosso amp-sidebar com id sidebar-menu, todo o efeito de animação já será definido pelo componente e depois que o código é aplicado em nossa aplicação o resultado será o seguinte:

Assim temos a solução para o nosso menu tanto para desktop quanto mobile

No código acima é uma parte da nossa solução para ver a solução completa só acessa o repositório no github vamos fechando esse tutorial por aqui. Caso tenha alguma dúvida só deixar um comentário.

Categorias
AMP Accelerated mobile pages

Como trabalhar com imagens no AMP

Quando trabalhamos com AMP temos restrição na utilização de algumas tag HTML e ia tag img se encontra nessa lista. A principal razão é que imagens são responsáveis pela maior parcela no tamanho total de uma aplicação. Por isso o framework tem um cuidado especial no carregamento de images para isso utilizamos o componente amp-img, responsável por série de melhorias em nossa aplicação, por exemplo, lazy-loading e compressão.

Os componentes AMP utilizam web components um conjunto de 4 apis web nativas que permitem a criação de blocos reutilizáveis. A plataforma possui uma série de componentes que agilizam o processo de criação de nossa aplicação. Os componentes priorizam accessibilidade e performance, caso queira conferir a lista completa só acessar a página de catálogo de components, mas para esse tutorial vamos especificamente iremos utilizar <amp-img>.

amp-img

Parece um componente simples mas tem uma série de melhorias de performance com lazy-load, resize e compressão de images. Mas para a redimensionamento de image acontecer precisamos sempre especificar a altura e a largura das imagens. O componente espera os seguintes parâmetros:

  • alt – texto alternativo assim como tag img precisa para produzir um conteúdo mais acessível.
  • width e height – necessário para definir as dimensões de nossa imagem
  • src – assim uma uma tag img define o endereço de nossa imagem
  • layout – estilo de layout que a image terá, AMP possui os seguintes formatos: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive

Assim que sabemos como utilizar amp-img nosso componente ficará da seguinte forma:

<amp-img src="./assets/images/caipirinha.webp" 
    alt="About Caipirinha"
    width="700" 
    height="526" 
    layout="responsive">
</amp-img>

Fallback

WebP formato 25% a 30% menor que os formatos tradicionais, mas surgiu recentemente e atualmente é suportado por 80% dos broswers(Ago 2019), como podemos ver na imagem abaixo:

Caso queiramos utilizar Webp sem penalizar os usuários dos browsers antigos podemos adicionar um fallback em nosso amp-img sinalizado pela propriedade fallback. e a utilização ficará da seguinte forma:

<amp-img src="./assets/images/caipirinha.webp" alt="Sobre Caipirinha"
          width="700" height="526" layout="responsive">
            <amp-img alt="Sobre Caipirinha"
            fallback
            width="700"
            height="526"
            layout="responsive"
            src="./assets/images/caipirinha.jpeg"></amp-img>
        </amp-img>

Como podemos ver acima isso mesmo o componente de fallback fica dentro do nosso componente principal assim o AMP ficará responsável de verificar se o browser do usuário possui suporte ou não para o formato webp e carregar apenas uma imagem.

Esse post faz parte do conteúdo auxiliar do curso de AMP. Mais posts sobre AMP você confere aqui. Exercícios e exemplos você irá encontrar no meu github. Próximo post iremos falar mais sobre AMP components, caso tenha alguma dúvida deixe um comentário.

Categorias
JavaScript Tutoriais

Introdução ao AMP

AMP ou Accelerated mobile pages surgiu para solucionar um problema antigo das aplicações web relacionado a performance, o fato que muitas das aplicações web são desenvolvidas nos grandes centro onde as empresas e usuários tem facilmente acesso a conexão rápida. Quando as aplicações são testadas nos grandes centros não levam em conta o tempo de carregamento da aplicação em uma conexão lenta, e um dos dos objetivos do AMP foi solucionar este problema e e entregar essa informação priorizando performance.

Sabemos conexões rápidas não se aplica ao resto do planeta muitas regiões ao redor do globo continuam tendo dificuldade de acessar conteúdo online. Como podemos promover a inclusão desses grupos preocupado com esse problema o time do Google criou o projeto open source chamado Accelerated Mobile Pages posteriormente chamado apenas de AMP.

Mas esse problema também afeta os grandes centros usuários mobile com conectividade limitada também tem sua experiência prejudicada, todos esses problemas aumentam o tempo de carregamento e na exibição de elementos na tela. Além do fato que aplicações de alta performance ajudam na taxa de conversão usuários, que tais usuários estão cada vez mais utilizando aplicações web através de dispositivos moveis.

AMP permite a criação de sua aplicação em um curto espaço de tempo, isso através de componentes criando um ambiente de fácil manutenção além promover melhores praticas como:

  • Performance
  • Acessibilidade
  • Confiabilidade
  • Design responsivo

Além disso AMP reduz a complexidade do seu código, mas sem perder o controle de sua aplicação você continua com a capacidade de adicionar código CSS para customizar sua aplicação. O set de componentes já existentes ajudam na agilidade na criação de novas aplicações presando a performance. AMP é um projeto open source a comunidade sem está criando novos componentes e novas versões da aplicação e a base do seu código sempre será atualizada

Como AMP funciona

AMP possui três pilares:

  • AMP HTML extende HTML básico criando novas tags criando novas features, por trás das cortinas ele trabalha com web components
  • AMP JS controla a execução de javascript também adicionando melhorias de performance como tree shaking.
  • AMP Cache armazena o conteúdo da aplicação.

A performance dentro de projetos AMP é possível por conta de alguns pontos chaves que iremos listar a seguir.

JavaScript assíncrono

com javascript podemos modificar todos os aspectos de uma página, mas também bloquear o seu processamento caso não especificarmos que o seu carregamento não afete a renderização da página. Nesse caso todo o carregamento de JavaScript em AMP é feito de forma assíncrona para não afetar a entrega do conteúdo.

Por isso AMP restringe o carregamento de JavaScript escrita pelo autor nesse caso temos que utilizar tags especiais para incluir interação com o usuário.

Evita que extensões de terceiros bloqueiem a renderização

AMP não permite que extensões como, lightboxes, instagram, embers, tweets bloqueiem a renderização do seu conteúdo. Muitos desses items enquanto fazem requisições para suas respectivas APIs bloqueiam a renderização da sua aplicação, mas isso não significa que que você não poderá utilizar esses recursos AMP tem uma série de componentes para interagir com outras plataformas.

Tamanho de todos os recursos estaticamente

Recursos como imagens, iframes ou anúncios, precisam informar seu tamanho no HTML, de modo que AMP possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. AMP carrega o layout da página sem esperar o download de nenhum recurso.

AMP separa o layout HTML dos recursos externos, isso para priorizar a entregar com conteúdo mais rápido possível. Apenas uma solicitação HTTP é necessária para o todo o layout do documento (+ fontes). Como AMP é otimizado para evitar recálculos de estilo no seu navegador, não haverá nenhum novo layout após a ultima requisição.

Gerenciamento de Javascript de terceiros

AMP mantém todos os scripts de terceiros fora do caminho crítico da renderização das páginas. JS de terceiros gostam de usar carregamento síncrono para executar suas tarefas para garantir sua execução mas isso acaba aumentando o tempo de carregamento da aplicação.

Páginas AMP permitem o carregamento de scripts de terceiros mas apenas em iframes. Com isso o carregamento fica isolado e não afeta o processamento principal de nossas páginas. Mesmo que eles afetem o estilo da página o impacto será mínimo.

Atualizando o post enquanto estava escrevendo este post

CSS inline e com tamanho limitado

O CSS externo como sabemos bloqueia a renderização de nossa página, nas páginas AMP somente estilos inline são permitidos, com isso temos uma requisição a menos em nossa aplicação e uma renderização crítica de nossa aplicação web.

Além disso a folha de estilo in-line é limitada para um máximo de 50kb. Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas, ele ainda exige que o autor mantenha o CSS limpo.

Carregamento eficiente de fontes

As fontes web são uma parte visual importante das nossas aplicações web, portanto, a otimização de fontes é um ponto crucial de nossa aplicação algumas web fonts são bem pesadas aumentando o tamanho total da nossa aplicação. AMP realiza optimização no carregamento de fontes e realiza o preload nossas fontes.

Animações somente utilizando a GPU

O único modo de ter uma aplicação de alta performance é realizado o uso eficiente dos recursos e utilização da GPU é um recurso importante para isso. Todas as animações com AMP são executadas pela GPU assim liberando a thread principal para processamento crítico de nossa aplicação.

Priorização do carregamento dos recursos

AMP controla o carregamento de todos recursos: com isso os recursos serão carregados quando realmente necessários utilizando técnicas como lazy-load e prefetch.

Além disso AMP possui uma lista de prioridade exemplo, imagens estão no topo da lista enquanto ads estão no final dessa lista. Outro fator importante para priorização é quais os recursos estão sendo exibidos para o usuário.

Utilização de novas API para reduzir o tempo de carregamento

A nova API preconnet API é usada intensamente para garantir as solicitações HTTP sejam feitas o mais rápido possível. Com isso a página pode ser pre carregada em background, por isso algumas vezes quando clicamos nos primeiros resultados de uma busca no Google temos o carregamento instantâneo.

Embora o pré-processamento possa ser aplicado a todo o conteúdo da web, ele também ajuda na largura de banda e o uso de CPU.

Web Components

Com AMP HTML temos a possibilidade de utilizar uma variedade de componentes web, utilizando somente elementos nativos da plataforma o framework disponibiliza uma série de componentes reutilizáveis para entregarmos uma aplicação interativa.

Esse são alguns dos items relevantes na plataforma a lista completa você pode encontrar na documentação em amp.dev. Em meu canal do youtube estarei rodando um curso sobre o framework onde você pode conferir a playlist do curso aqui: https://www.youtube.com/playlist?list=PLmIA3VZysEqQxsVcZ7u2ZHOnh78eIOKON

Também confira mais posts na página da categoria AMP.

Categorias
Geral

11 Mitos sobre AMP

AMP se tornou um framework bastante popular nos últimos anos por renderizar e entregar conteúdo em alta perfomance, atualmente 10 milhões de domínios na internet entregam conteúdo utilizando a tecnologia, mas também surgiu alguns mitos sobre a plataforma e nesse post traduzir um post do blog do AMP: “Debuking Common AMP Myths” e vamos conferir abaixo.

MITO #01: AMP é um projeto exclusivo do Google.
FATO #01: AMP é um projeto open source liderado pelo Google em conjunto de outras empresas e membros da comunidade.

Os desenvolvedores AMP, empresas e colaboradores individuais participam no desenvolvimento deste projeto: Nos últimos três anos, o AMP recebeu contribuições de 850 colaboradores, 78% desses colaboradores são funcionários de outras empresas como Twitter, Pinterest, Yahoo, Bing e eBay. O AMP mudou-se para um novo modelo de governança, uma preocupação atual de vários projetos open source.

O modelo adotado dá voz a todos os membros da comunidade decentralizando as tomadas de decisões. Também incluindo usuários finais não ficando restrito apenas nos desenvolvedores.

MITO #02: AMP somente funciona para Google.com
FATO #02: Páginas AMP são acessíveis em toda a web, incluindo qualquer plataforma de distribuição e dispositivo.

Os usuários podem acessar páginas AMP por meio de qualquer plataforma de distribuição, por exemplo, mecanismos de pesquisa ou sites, como Linkedin ou Twitter que sempre distribuem páginas AMP como modelo padrão para celulares.

Plataformas como Google e Bing dão um passo além, elas armazenam o seu conteúdo para proporcionar um carregamento instantâneo.

MITO #03: AMP é apenas para mobile
FATO #03: O AMP é projetado com “responsividade” em mente, para funcionar em todos os tamanhos de tela.

AMP agora é somente AMP, inicialmente era um padrão Accelerated Mobile Pages agora por se uma tecnologia cross device o acrônimo perdeu seu significado agora ele se chama apenas AMP. Inicialmente AMP foi projetado para ser mobile friendly, para devices com hardware lento e conexões com alta taxa de latência. O impacto da tecnologia visto em um smartphone será ainda maior em um desktop. Mas também devemos entender que alguns recursos são projetados para uma experiência mobile, por exemplo , carrossel do Google Stories.

MITO #04: Toda página AMP também precisa ter uma versão não AMP.
FATO #04: Uma página AMP pode ser associada a uma não AMP, mas isso não é um requisito obrigatório.

Em alguns casos, convém ter uma versão não AMP e uma versão AMP da mesma página, especialmente é fases de migração de sua aplicação. Mas não é um requisito mantém ambas versões do mesmo conteúdo, se você achar que AMP atende todos os requisitos de sua aplicação você pode manter apenas a versão AMP.

MITO #05: AMP landing pages usualmente são mais difíceis de construir.
FATO #05: Geralmente isso irá custar menos de uma semana para construir uma landing page na maioria dos casos.

80% dos desenvolvedores contactados em pesquisa, reportaram que precisaram menos de uma semana para construir uma Landing page utilizando AMP. Dito isso, esforço para construir uma página dependerá do tipo de página que será construída, alguns modelos custarão mais tempo que outras, confira o a lista de templates gratuitos eles podem reduzir ainda mais o tempo de desenvolvimento de sua aplicação.

MITO #06: AMP é apenas para editores ou site estáticos
FATO #06: Mais de 60% dos cliques na consultas do Google são páginas sem ser páginas de notícias.

AMP foi construído graças a intensa colaboração com milhares de desenvolvedores, editores e plataformas de distribuição de conteúdo e empresas de tecnologia. Quando AMP foi lançado a primeira vez, ele foi adotado inicialmente por editores e portais de notícias. mas agora os anunciantes e as empresas de comércio eletrônico também estão aproveitando os benefícios da plataforma AMP.

MITO #07: AMP não suporta experiências interativas.
FATO #07: Os componentes AMP agora permitem personalização de design e experiências interativas.

Quando AMP foi lançado a pela primeira vez, ele tinha limitações de design. Á medida que o projeto AMP cresceu graças à colaboração da comunidade open source, foram criados novos componentes que permitem que as empresas façam personalização do design e criem experiências interativas. Empresas como BMW, AliExpress possuem bons exemplos de como utilizar a plataforma. Hoje a maioria das experiências interativas suportam:

Rich Media: O número de componentes AMP é cada vez maior e qualquer contribuidor pode contribuir na inclusão de novos componentes caso necessite.

Integração de terceiros: Existem uma vasta quantidade de integração com outras plataformas e você pode conferir aqui.

MITO #08: AMP não suporta sites de comercio eletrônico.
FATO #08: AMP é uma opção natural de comercio eletrônico, pois AMP torna as páginas Web mais rápidas e performance é um ponto importante para conversão de compras.

Quando AMP foi lançado, inicialmente editores e portais de noticias foram a principal adoção da plataforma. A medida que o projeto AMP cresceu, novos componentes foram criados para permitir que as marcas criassem suas experiências interativas. Agora AMP pode ser utilizado para construir experiência de comércio eletrônico de alta performance e atrativa. Para mais informações veja os posts “Getting started with AMP for e-commerce” e “E-commerce At The Speed of AMP” .

MITO #09: Não é possível atualizar conteúdo de páginas AMP.
FATO #09: Existem muitas opções de manter o conteúdo das páginas AMP atualizado.

Você pode veicular conteúdo novo em AMP usando o mecanismo de cache AMP padrão(stale-while-revalidate), usando a funcionalidade de atualização de cache ou usando componentes dinâmicos (como lista de AMP). Muitas das grandes empresas de e-commerce obtém bons resultados quando a implementação é planejada adequadamente.

MITO #10: AMP não é seguro/privado o suficiente.
FATO #10: O framework AMP foi criado para preservar a privacidade e garantir a segurança dos dados.

Ás páginas AMP são geralmente veiculadas Google AMP Cache, que simplesmente armazena em cache uma versão da sua página para fins de validação de documentos AMP e fornecer a entrega confiável e rápida do conteúdo. Google AMP Cache, assim como JavaScript AMP, são veiculados em domínios sem cookies que não rastreiam os usuários de forma alguma. Além disso, AMP tem um processo de análise de segurança que é usado rotineiramente ao lançar novos componentes AMP. Para ler mais, confira o post “Privacy and user choice in AMP’s software architecture”.

MITO #11: Páginas AMP não convertem tão bem quanto páginas não-AMP.
FATO #11: As páginas AMP otimizadas com frequência costumam ter um desempenho melhor do que as páginas não-AMP.

Muitos anunciantes e editores tiveram sucesso com o AMP, muito dos depoimentos você pode encontrar no portal amp.dev. Um estudo da Forrester descobriu que um site que implementa AMP pode esperar um aumento de 20% na taxa de conversão de vendas nas páginas AMP, um aumento de 10% no tráfego anual do site AMP e um aumento de 60% páginas por visitante.

Existem alguns motivos pelos quais uma página AMP pode apresentar um desempenho inferior a uma página não AMP.

*Caso não tenha um desempenho satisfatório, estas são algumas áreas para explorar:

Problemas de medição e monitoramento: certifique que as configurações do analytics na sua página AMP está seguindo os guias de configurações.

Inconsistências na sua página: se a Página AMP esteja sendo exibida diferente de uma página não-AMP, isto pode estar influenciando suas taxas de conversão. As páginas AMP devem ser identicas a páginas não-AMP em funcionalidades e aparência.

Categorias
Mobile Tutoriais Web

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




    
        
        
        
        Todo List App Parse
        
    
    
        

CAR LIST

Carregando...




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 ModeloAnoValor";
						
						//os resultados vem em um array de objetos
						//varremos o nosso array e montamos um markup
						for(var id in results){
							markupList += "";
							markupList += ""+ results[id].attributes.model +"";
							markupList += ""+ results[id].attributes.year +"";
							markupList += ""+ results[id].attributes.value +"";
							markupList +=
							"";
						}
				}else{
					markupList = "Nenhum Resultado Encontrado";
				}
				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);
			}
		});
	}

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");

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);

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.

greaterThan & lessThan

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:
query.greaterThan("year",2000);

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

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);

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);
  }
});

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);

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);
	}
}); 

O resultado será o seguinte:

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

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"]);

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"]);

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");

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

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
  }
});

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");

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")

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
		  }
		});

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.