Prototipando aplicações com Parse.com e AngularJS

Formado em Design de Multimídia pelo Senac/SP. Trabalha com desenvolvimento frontend a aproximadamente 10 anos, atuando principalmente no desenvolvimento de aplicações web. Atualmente trabalha como Open Standard Developer pela R/GA São Paulo.

Transcript

1. Criando protótipos utilizando Parse e AngularJS
2. William Lepinski ! Formado em Design pelo Senac/SP Senior Open Standards Developer na R/GA 12 anos no mercado.
3. Front-end?
4. Front-end? Back-end?
5. Front-end? Back-end? ! Ou simplesmente Desenvolvedor?
6. Você tem uma ideia !
7. Você tem uma ideia Você (provavelmente) não tem tempo !
8. Você tem uma ideia Você (provavelmente) não tem tempo ! PHP? Java? Ruby? Node? !
9. Você tem uma ideia Você (provavelmente) não tem tempo ! MySQL? NoSQL? Postgre? !
10. Na real, o fato é que não queremos nos preocupar com essas questões nesse momento…
11. Na real, o fato é que não queremos nos preocupar com essas questões nesse momento… ! se não acabamos desistindo…
12. Backend-as-a-service + suas idéias = ❤ (BaaS)
13. Parse Porque você deveria usar?
14. É um back-end que você pode chamar diretamente do front-end.
15. É um back-end que você pode chamar diretamente do front-end. ! Cross-Origin Resource Sharing (CORS) Representational State Transfer (REST) Javascript Object Notation (JSON)
16. Simplifica o armazenamento, consulta e acesso aos dados.
17. Simplifica o armazenamento, consulta e acesso aos dados. ! Gerenciamento de usuário Hosting Push Notifications Analytics Cloud Code (NodeJS, Express) Cloud Modules (Mandrill, Stripe, …) Social Plugins
18. curl -X POST -H “X-Parse-Application-Id: APPID" -H “X-Parse-REST-API-Key: APPKEY" -H "Content-Type: application/json" -d ‘{ “title” : “Todo”, “done” : false }’ https://api.parse.com/1/classes/Todo
19. Status: 201 Created Location: https://api.parse.com/1/classes/ GameScore/Ed1nuqPvcm ! { "createdAt": "2011-08-20T02:06:57.931Z", "objectId": "Ed1nuqPvcm" }
20. Nenhuma linha de código no server-side…
21. Nenhuma linha de código no server-side… ! As entidades são criadas automaticamente e modificadas conforme novos requests são enviados.
22. Nenhuma linha de código no server-side… ! Mais tempo para você pensar em coisas que realmente importam nesse momento.
23. E o AngularJS? Porque você (ainda) não usa?
24. Março 2012
25. Novembro 2013
26. O que realmente faz a diferença? ! Data-binding (Two-way) Templates (View) Dependency Injection Directives Testing (Unit/E2E)
27. “Talk is cheap. Show me the code.” - Linus Torvalds
28. Interceptors para autenticação e respostas ! Application-ID e REST-API-Key devem ser enviados em todos os requests ! $resource().query() precisa que a resposta seja um array
29. Factories para criação dos recursos ! var todo = new Todo({ title: ‘Task’ });
30. Resource.$save() não retorna o objeto criado… ! angular.copy(todo).$save() .then(function(created){ angular.extend(todo, created); })
31. Resource.$save() envia um POST ao invés de um PUT ! $resource(url, { id: ‘@objectId' }, { update: { method: 'PUT' }} );
32. ACL ! todo.ACL[loggedUser.objectId] = { read: true, write: true }; todo.ACL[‘*’] = { read: true, write: false };
33. Integrações Javascript SDK integrado com o AngularJS ! https://github.com/brandid/parse-angular-demo https://github.com/jimrhoskins/angular-parse
34. Kinetoscope http://kinetoscope.herokuapp.com ! RottenTomatoes API + Express Proxy + Parse + AngularJS
35. ?
36. Links ! Source-code https://github.com/wlepinski/devfest-todolist ! Slides https://speakerdeck.com/wlepinski
37. Obrigado. ! twitter.com/lepinski plus.google.com/+WilliamLepinski github.com/wlepinski