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

APP.JS

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

Captura de Tela 2014-01-16 às 19.53.32

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

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

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:

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

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:

first

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

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.

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

O resultado será o seguinte:

Captura de Tela 2014-01-17 às 18.08.08

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

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:

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:

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:

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

matchesKeyInQuery & doesNotMatchKeyInQuery

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

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:

Captura de Tela 2014-01-17 às 20.01.44

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.

Captura de Tela 2014-01-17 às 20.29.05

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:

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.

Crie aplicações na nuvem com Parse

No ano passado tive oportunidade de conferir o Parse Developer Day em San Francisco, foi o primeiro e um dos melhores eventos que conferir lá na capital da tecnologia. O Parse para que não conhecer é um serviço de cloud para aplicações e games mobile. Ele tem suporte a IOS , Android, Windows Phone, Unity e JavaScript.

fotos-parse-developer-day-2

Dentre os serviços que o Parse oferece, temos:

  • Cloud Storage
  • Push Notification
  • Social Connection
  • Hosting
  • Analytics
  • Cloud Code

Neste tutorial vou dar uma introdução sobre o serviço de Cloud Storage com JavaScript esse recurso possibilita salvarmos informações em um server sem precisar de uma linguagem Back-end, também podemos utilizar o JavaScript SDK junto com Phonegap e exporta-ló para diversas plataformas. O JavaScript SDK é baseado no framework BackBone.js: Isso possibilita total compatibilidade com aplicações que usar tal framework. O JavaScript SDK não possui dependência por outras libs, você pode trabalhar com Parser + JS e mais nada, mas claro que você pode utilizar outras libs. Durante o tutorial eu vou falando sobre mais recursos. Agora vamos aos passos iniciais.

Primeiro passo é realizar o cadastro no site do Parse: https://parse.com/. Não se preocupe com questões de preço eles fornecem um pacote free bem “parrudo”. O plano free tem 1 milhão de requisições/mês e 1 milhão de Pushes Notifications/mês. Se sua aplicação realiza mais de um 1 milhão de requisições mês já está na hora de ganhar algo com seu app ou repensar no esquema de requisições que ele realiza.

Captura de Tela 2014-01-13 às 00.39.17

Você pode criar uma conta passando os dados convencionais ou vincular sua conta a uma conta do Facebook/GitHub . Com sua conta devidamente criada ele vai liberar para você um painel para você administrar suas aplicações.

Captura de Tela 2014-01-13 às 00.43.00

Crie sua aplicação clicando no botão “+ Create New App”, só adicionar o nome do seu app:

Captura de Tela 2014-01-13 às 00.50.37

E você já tem uma aplicação na nuvem!

Agora vamos fazer um pequeno exemplo para ler e gravar informações na nuvem. Precisamos realizar o download do JavaScript SDK:

https://parse.com/downloads/javascript/parse-js-blank/latest

Ou utilizar o link da CDN :

Com o Parse devidamente importado temos vamos ao código de nossa aplicação:

No código acima temos um markup simples em HTML, no final de nosso código temos a parte que interessa que é o nosso código JavaScript. após chamar o Parse via CDN no segundo bloco de código JavaScript inicializamos o Parse com a função “Parse.initialize(“APPLICATION_ID”,”JAVASCRIPT_KEY”)” esse dois parâmetros você deve substituir pelo application ID e o JavaScript Key de sua aplicação, você vai descobrir essa informação no settings de sua aplicação, na imagem abaixo temos marcados o application id e o JavaScript Key.

app-id

Copie as duas infos e substitua em sua inicialização. Na linha seguinte criamos um objeto da classe “MyObject” ela estende do Parse.Object, ele é responsável por toda regra de armazenamento de dados. Quando chamamos a função extend o Parse irá verificar em sua base se existe a classe MyObject, caso não exista ele irá criar uma nova base de dados com a classe. Também não é necessário definir o esquema padrão para armazenamento previamente, as propriedades do elemento podem mudar, não é uma ação recomendável, mas você pode adicionar uma propriedade nova em sua classe sem precisar criar uma nova classe.

Nesse ponto eles simplificaram ao máximo, você chega a não acreditar como isso funciona. Na linha 18 ele cria uma nova instancia(test) da Classe MyObject e por fim na linha 20 ele salva essa instancia passando um objeto com as informações que serão salvas nesse momento temos um códido “like jQuery” temos mais uma função atrelada a then ela será disparada caso os dados seja gravados com sucesso, essa função também recebe um objeto no callback se inspecionarmos esse objeto teremos os seguintes valores:

Captura de Tela 2014-01-13 às 19.18.35

Como podemos ver na imagem acima recebemos um objeto com uma série de informações que foram gravadas em sua aplicação, algumas informações úteis como o ID do objeto esse atributo é um identificador único do objeto na aplicação, também podemos verificar os atributos do objeto salvo.

Se testarmos nossa aplicação e ela retornar um alert significa que as informações foram salvas. Para verificar isso basta acessar o painel database no dashboard de sua aplicação como na imagem a seguir:

Captura de Tela 2014-01-13 às 17.26.47

Como podemos ver a informação está salva na nuvem, agora vamos para algo mais prático no próximo exemplo eu vou montar um cadastro de TODO-LIST. O código vai ficar um pouco extenso por isso vou separar o código em dois(HTML/CSS), primeiro vamos ver o nosso HTML:

Em seguida o nosso JavaScript, comentei algumas linhas mas também vou comentar a seguir.

Nas primeiras linhas inicializamos o Parse, em seguida criamos algumas variáveis para armazenar alguns itens importantes em nosso app. A função initApp será disparada por um listener para quando nossa página for totalmente carregada. Continuando na função initApp inicializamos nossa Class Tasks. Na linha 11 chamamos a função showTasks ela será responsável por exibir nossas tasks. Nas últimas 3 linhas adicionamos um listener para nosso form, guardamos o container das tasks a ul com id list-tasks e o input que iremos digitar nossas tasks.

Na Função “showTasks” temos um item novo, para realizamos uma consulta em nossa base utilizamos a Classe Parse.Query(“Tasks”), armazenamos ela na variável “query” com a função find pedimos para resgatar a lista de valores cadastrados, também podemos atribuir callbacks para serem chamados em caso de sucesso ou erro. Em caso de sucesso recebemos um array de objetos, tratamos o array e o exibimos em nosso ul.

A função “onSubmit” é disparada quando o usuário tenta salvar alguma informação, utilizei o submit para utilizar o recurso de required de nosso input, nesta função pegamos o dado cadastrado no input e passamos para função saveTask.

A “saveTask” será responsável por salvar os dados na nuvem, não comentarei essa função porque já abordamos o assunto anteriormente sobre salvar objetos na nuvem.

Até o momento nosso app só salva os itens agora vamos implementar um função de editar os itens, mas antes vamos adicionar um CSS para sinalizar nossos itens editados. vamos adicionar o seguinte CSS:

Detalhe para o código acima a regra aplicada para quando o elemento com class .item-task tiver sua propriedade setada para true ele receberá uma linha sobre o texto.

Em nossa função initApp adicionamos o evento de click para lista com:

Adicionamos o tratamento no click:

Atribui o click no “ul” pelo fato de não implementar o click em cada filho, observo o item pai e valido se o meu target foi o “li” e pego as informações contidas no elemento e passa para a função editTask o id do elemento e o novo valor da variável done. Agora vamos ao código da função editTask:

Na função editTask instanciamos uma nova query e realizamos uma busca pelo id da task com a função get, caso a função ache o item, executamos a função success modificamos a propriedade com a função set e salvamos novamente a nossa task. Esse esquema não possui nenhum esquema de tratamento para controle de requisições e em todo o clique iremos executar um nova requisição.

Para finalizar vamos adicionar uma função para excluir a task, na função showTasks, em cada “li” vou adicionar um button com o id de cada item vou adicionar somente a linha modificada:

Agora vou adicionar na função clickList uma condicional para quando o usuário clicar no button:

No código acima quando o usuário clicar no button eu passo o id da task para função removeTask que possui o seguinte código:

Na função removeTask realizamos uma Query para resgatar o objeto pelo id, quando recebermos a task chamamos a função destroy como nome sugere ela é responsável por remover o dado.

O objetivo desse tutorial era mostrar as funções básicas do Parse e entender o seu funcionamento, os dados estão abertos para todos os usuários, ou seja todo mundo que usasse esse app compartilharia a mesma lista de task. Nos próximos posts pretendo abordar questões de usuários, vincular os dados por usuário e criar seções. Coloque o código completo no gitHub para baixar o código basta acessar o link:

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

Referência:
https://parse.com/docs/js_guide#javascript_guide

Segundo post da série:

https://www.fellyph.com.br/blog/tutoriais/realizando-consultas-na-base-de-dados-parse/

Observe a orientação do device com JavaScript

js-logo

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:

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:

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:

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:

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

Padrões de escrita de CSS

No último sábado dia 23 tivemos o WordCamp São Paulo evento oficial organizado pela comunidade WordPress. Uma das palestras que me chamou atenção foi a do Claudio Sanches, falou sobre padrões de codificação e dicas sobre desenvolvimento com WordPress, sua palestra teve o nome “Não é porque funcionou que significa que esta certo!”.

Uma das dicas do Claudio Sanches em sua palestra,  foi sobre o HandBook do WordPress documentação gerada pela equipe do Core do WordPress, nela contém dicas sobre codificação de CSS, HTML, JavaScript e PHP. Fiquei muito interessado no assunto e neste post vou traduzir os principais pontos do Handbook sobre CSS. Lembrando que esses padrões são especificados pela equipe do core do WordPress existem outros padrões definidos por outros times, mas muitas regras dessa guideline também podemos aplicar em projetos sem ser WordPress.

Estrutura

Uma estrutura limpa e legível é muito importante em um projeto com grandes equipes:

  • Para indentar use tabs, não use espaços.
  • Adicione duas linhas em branco para separar seções e uma linha para separar blocos da mesma seção.
  • Caso aplique uma mais de uma regra para um seletor colocar um em cada linha

exemplo:

Seletores

São muito importantes para eficiência do seu CSS, mas pode ter resultado inverso no projeto quando mau executado.

  • Semelhante ao padrão de codificação do WordPress para nomes dos arquivos use letras minúsculas e palavras separadas por hífens ao nomear seletores.
  • Evite camelCase ou sublinhados.
  • Use seletores legíveis quem descrevam qual é elemento e qual é o sua aparência.
  • Seletores por atributo devem usar aspas duplas amarrando o seu valor.
  • Evite seletores sobre-qualificados, por exemplo, “div.container” podemos utilizar apenas “.container”.

Exemplo:

Propriedades

Menos é mais, verifique se você não está repetindo o estilo ou introduzindo dimensões fixas(quando a solução fluida é mais aceitável).

  • Propriedades devem ser seguidas de uma coluna e um espaço
  • Todas propriedades devem estar em caixa-baixa, exceto para nomes de Font específicas.
  • Usar código hexadecimal para cores, ou utilizar rgba() somente quando necessitar de utilizar opacidade.
  • Evitar de utilizar a propriedade rga em letras maiúsculas
  • Quando possível encurtar os valores hexadecimais: #fff ao invés de #FFFFFF
  • Use shorthand(exceto para overriding styles) para background, border, font, list-style, margin e padding.

Ordenação de Propriedades

Ordenação aleatório de propriedades é um caos, isso não é poesia. No Core do WordPress, utiliza dois padrões de ordenação: a lógica ou ordenada por categoria. As propriedades dentro de uma categoria são também estrategicamente ordenadas para criar uma transição entre seções, por exemplo, a propriedade “background” escrita antes do “color”.

A ordenação por categorias tem a seguinte base:

  • Display
  • Posicionamento
  • Box model
  • Cores e tipografias
  • Outros

Exemplo:

Vendor Prefixes

São os prefixos para engine de cada browser, por exemplo,“-webkit”. Devem ser ordenados dos prefixos mais longos para os mais curtos. Valores devem ser alinhados a esquerda após os dois pontos os valores alinhas com tab com se fosse uma única coluna

Exemplo:

Caso especial CSS gradients:

Valores

Seguindo as guidelines abaixo podemos manter um alto grau de consistência em nosso arquivo CSS.

  • Espaço antes do valor e depois dos dois pontos
  • Sempre terminar com ponto e vírgula(claro)
  • Usar aspas duplas ao invés de aspas simples
  • Valor 0 não deve ter unidade(exemplo: 0%, 0px, 0em…)
  • Use o zero a esquerda para valores decimais, exemplo, evite usar valores como .5 o ideal é 0.5.
  • Em Múltiplos valores separados por vírgula, cada valor deve ser separado por vírgula ou uma nova linha.

Exemplo:

Media Queries

Media queries permitem adaptar o nosso DOM a diferentes tamanhos de tela. Não se esqueça de testar todas as regras para ter certeza que este será o esperado. Em geral, é aconselhável manter as media queries agrupadas na parte inferior de seu arquivo css. Uma exceção é feita para p arquivo wp-admin.css no core.

A regras para o media queries devem ser indentadas em um nível:

Exemplo:

Comentários

Caso tenha preocupações sobre o tamanho do arquivo, utilize arquivos minificados e constante SCRIPT_DEBUG. Comentários longos devem ser quebrados a partir de 80 caracteres.

Uma tabela de conteúdo deve ser utilizada para stylesheet extensos, especialmente os que são altamente seccionados para isso usamos um índice numérico(1.0,1.1,2.0, ect) que auxilia a busca, nesse caso repetimos o número do índice na seção, assim quando o usuário realizar a busca o apontador irá pular para o local correto.

Comentários devem ser formatados tanto quanto PHPDoc é. Cabeçalho de Seções e subseções devem ter novas linhas antes e depois. Comentários inline não devem ter linhas vazias separando o conteúdo de um item para cada relacionado.

Exemplo de seções e subseções:

Exemplos inline:

Considerações finais

  • Manter o código bem escrito desde o início, nos ajuda a manter a visão geral, deixando nosso código flexível a mudanças.
  • Se você está tentando resolver um problema, esforce para resolver o problema antes de adicionar mais.
  • Saiba quando usar a propriedade height. Isto deve ser usado para incluir elementos outside(como images). Caso contrário, use line-height para ter mais flexibilidade.
  • Não redefina propriedades default, por exemplo, display:block em elementos blocados.

Referências:

http://make.wordpress.org/core/handbook/coding-standards/css/
https://speakerdeck.com/claudiosmweb/nao-e-porque-funcionou-que-significa-que-esta-certo

FEEC Brasil 2012

No dia 01 de dezembro em Recife acontece o FEEC Brasil 2012, um evento especial com grandes nomes relacionados a TI como: Stoyan Stefanov, engenheiro de software do Facebook e o autor de livros Javascript Patterns(faz parte da minha biblioteca) e Object-Oriented JavaScript. Além disso, é o criador do smush.it ferramenta de otimização de imagens. Resumindo o cara é fod* de verdade.

Outro nome forte no evento (que também vem de fora) é Caridy Patino: front end engineer da Yahoo! e especialista em SSJS / NodeJS e plataforma Cocktails Yahoo!. Caridy fará uma palestra sobre os desafios para se construir aplicações HTML5 para dispositivos móveis.

Além dos “pratas da casa” : Fabio Akita (Codeminer 42), Paulo Melo (C.E.S.A.R – SP), Nelson Glauber (C.E.S.A.R | Unibratec), Virgínia Chalegre (C.E.S.A.R Recife), Gustavo Guanabara(Tuiuiú Comunicação – RJ), Pedro Rogério (Ambulance-SP), Felipe Furtado(C.E.S.A.R Recife), Fred Vasconcelos(Joy Street – PE). Os palestrantes que acabei de citar, fazem parte das palestras do salão principal.

Mas as palestras não acabam por ai, entre uma palestra e outra no salão principal, acontecem light talks que eu vou ter o prazer de fazer parte! Vou falar sobre underscores o starter theme criado pela a equipe da Automattic.

Além da minha mini palestra irão participar: Gustavo Costa(EASY – Soluções Integradas), Lucas Cavalcanti(MGR Tecnologia), Nicholas Fazio(NicholasFF.Com), Socorro Macedo(Lefil), Danilo Torres(Mobiclub), Wilker Lúcio(Kajabi – EUA), Bartho Bernsmann(Microsoft Innovation Center – PE), Guilherme Farias(MGR Tecnologia)… Acho que não esqueci de ninguém. A programação completa você confere aqui : http://www.feecbr.com.br/pt/programacao.php?local=Recife

Estou ansioso pelo evento, primeira palestra em Recife cidade onde me formei. Reencontrar os amigos vai ser bem legal e conversar com os participantes do evento sempre é um estimulo para novas idéias. Um evento com 19 palestras um dia de overdose de TI. As inscrições ainda estão abertas então se você está pensando, não pense duas vezes o evento é daqui a uma semana.

Inscrições aqui!

O FEEC Brasil acontece no Hotel Golden Tulip Recife Palace que fica na Av. Boa Viagem número 4070. No dia 01 de Dezembro de 2012, mais informações sobre o evento aqui: http://www.feecbr.com.br/

Wallaby

Dia 8 de março a Adobe liberou a versão teste do wallby é o codinome para o recurso que converte conteúdo Flash e HTML, ele funciona da seguinte forma, vc passa o arquivo .fla e ele converte em três arquivos(.html, .js,.css), uma pasta com os assets(as imagens que vão ser trabalhadas) e ainda no mesmo local do arquivo html joga o arquivo jquery.js.

A cara provisória do Wallaby é essa, uma interface simples :

Fiz dois testes um com animação timeline e outro com animação em code, só a animação com timeLine funcionou.

Quer fazer seus testes então acesse o link e baixe o Wallaby : http://labs.adobe.com/downloads/wallaby.html