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 :

%MINIFYHTMLc87c2d0d690a8b3dd6cbfc90b2112bf55%

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



    
        
        
        
        Hello World Parse
    
    
        

App com Parse

%MINIFYHTMLc87c2d0d690a8b3dd6cbfc90b2112bf56%%MINIFYHTMLc87c2d0d690a8b3dd6cbfc90b2112bf57%%MINIFYHTMLc87c2d0d690a8b3dd6cbfc90b2112bf58%

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:



    
        
        
        
        Hello World Parse
        
    
    
        

App com Parse - TODO LIST

    Carregando...


%MINIFYHTMLc87c2d0d690a8b3dd6cbfc90b2112bf59%%MINIFYHTMLc87c2d0d690a8b3dd6cbfc90b2112bf510%

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

  		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 += "
  • "+ results[id].attributes.descricao +"
  • " } 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 += "
  • "+ results[id].attributes.descricao +"
  • ";

    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/

    3 respostas para “Crie aplicações na nuvem com Parse”

    1. Pessoal, tudo bem? Como sabem o Parse finalizará suas operações em 2017 e todos os aplicativos devem ser migrados até a a data em questão. Uma ferramenta bem bacana que podem utilizar é o Back4App.

    Deixe uma resposta

    This site uses Akismet to reduce spam. Learn how your comment data is processed.