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.
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.
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.
Crie sua aplicação clicando no botão “+ Create New App”, só adicionar o nome do seu app:
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 :
| <script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script> |
Com o Parse devidamente importado temos vamos ao código de nossa aplicação:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!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>Hello World Parse</title> </head> <body> <div class="app"> <h1>App com Parse</h1> </div> <script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script> <script type="text/javascript"> Parse.initialize("APPLICATION_ID","JAVASCRIPT_KEY") var MyObject = Parse.Object.extend("MyObject"); var test = new MyObject(); test.save({nome: "Blog Fellyph Cintra"}).then(function(object) { alert("Informação salva com sucesso!"); }); </script> </body> </html> |
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.
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:
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:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!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>Hello World Parse</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <div class="app"> <header> <h1>App com Parse - TODO LIST</h1> </header> <ul id="list-tasks"> Carregando... </ul> <br/> <button id="clear-btn">Limpar lista</button> <hr/> <form id="form-task"> <label>Tarefa:</label> <input type="text" name="tarefa" id="tarefa" required> <input type="submit" value="enviar"> </form> </div> <script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script> <script src="js/app.js"></script> </body> </html> |
Em seguida o nosso JavaScript, comentei algumas linhas mas também vou comentar a seguir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | Parse.initialize("APPLICATION_ID","JAVASCRIPT_KEY") var Tasks; var listOfTasks; var inputTask; //função para inicializar nosso app function initApp(){ Tasks = Parse.Object.extend("Tasks"); //showTasks busca tarefas já cadastradas em nosso app showTasks(); //Adicionamos um lister para o nosso form document.getElementById("form-task").addEventListener("submit",onSubmit); //Fazemos um cache dos itens que acessamos mais de uma vez em nosso app listOfTasks = document.getElementById("list-tasks"); inputTask = document.getElementById("tarefa") } //função resposável por consultar os dados na nuvem function showTasks(){ //chamamos a função Query do Parse parar varer a nossa base var query = new Parse.Query("Tasks"); //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 var markupList = ""; //os resultados vem em um array de objetos //varremos o nosso array e montamos um markup for(var id in results){ console.log("success",results[id].attributes.descricao); markupList += "<li class='item-task topcoat-list__item' data-id='"+results[id].id+"' data-done='"+ results[id].attributes.done +"'>"+ results[id].attributes.descricao +"</li>" } listOfTasks.innerHTML = markupList; }, error:function(error){ //tratamento para caso de erro console.log("error",error) } }) console.log(query); } //função para fazer o trantamento quando o usuário envia os dados do form function onSubmit(e){ var task = {}; //pegamos o valor cadastrado em nosso input task.descricao = inputTask.value; task.done = "false"; //passamos o nosso objeto para ser salvo na cloud saveTask(task); // utiliza o preventDefault para evitar do form realizar o reload da página e.preventDefault(); } //função específica para salvar as tasks na nuvem function saveTask(task){ var taskCloud = new Tasks(); taskCloud.save(task).then(function(object) { alert("Task salva com sucesso!"); showTasks(); inputTask.value = ""; }); } window.addEventListener("load", initApp) |
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:
| .list-tasks{ list-style:none; margin:0; padding:0; } .item-task{ padding: 10px; border-bottom: 1px solid #ccc; } .item-task[data-done="true"]{ text-decoration:line-through; } |
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:
| listOfTasks.addEventListener("click",clickList); |
Adicionamos o tratamento no click:
| function clickList(e) { if(e.target.localName == "li"){ e.target.dataset.done = (e.target.dataset.done === 'true')? false : true; editTask(e.target.dataset.id,e.target.dataset.done); } } |
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:
| function editTask(id,done){ var query = new Parse.Query(Tasks); query.get(id, { success: function(task) { task.set("done", done); task.save() }, error: function(object, error) { console.log("erro ao salvar o objeto", object, error) } }); } |
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:
| markupList += "<li class='item-task' data-id='"+results[id].id+"' data-done='"+ results[id].attributes.done +"'>"+ results[id].attributes.descricao +"<button class='btn-remove' data-id='"+results[id].id+"'>Remover</button></li>"; |
Agora vou adicionar na função clickList uma condicional para quando o usuário clicar no button:
| function clickList(e){ if(e.target.localName == "li"){ e.target.dataset.done = (e.target.dataset.done === 'true')? false : true; editTask(e.target.dataset.id,e.target.dataset.done); }else if(e.target.localName == "button"){ e.target.disabled = "disabled"; e.target.innerHTML = "Removendo..." removeTask(e.target.dataset.id); } } |
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:
| function removeTask(id){ var query = new Parse.Query(app.Tasks); query.get(id, { success: function(task) { task.destroy({ success:function(task){ app.showTasks(); } }) } }); } |
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/
