Angular On Cuba

October 23rd - Ruby Conf Argentina 2014 @ The Ruby Fun Day.

This presentation shows how to create a dynamic web application using the ruby microframework called Cuba to create a REST API and AngularJS to build the frontend.

Check out the app and the expamples at this repo:
https://github.com/jgnatch/angular-on-cuba

Follow us at:
Esteban Pastorino
http://twitter.com/kitopastorino
http://github.com/kitop

Ignacio Gutierrez
http://twitter.com/jgnatch
http://github.com/jgnatch

Transcript

1. angular on Cuba Creando una app con una API REST en Cuba + Angular JS
2. Antes de empezar • git clone https://github.com/jgnatch/angular-on-cuba • cd angular-on-cuba • dep install / bundle install • http://www.getpostman.com/ => Download (Chrome) • redis-server • brew install redis / apt-get install redis-server
3. nacho Gutierrez @kitopastorino @kitop @jgnatch @jgnatch kito Pastorino
5. API
6. • cd ejemplos/cuba/api • shotgun • Abrir Postman • Importar ejemplos/cuba/api/postman.json INICIAR SERVER
7. REST ROUTES GET /articles Listar los miembros de la colección. POST /articles Crear una nueva entrada en la colección. GET /articles/:id Obtener un miembro de la colección. PUT /articles/:id Actualizar un miembro de la colección. DELETE /articles/:id Eliminar un miembro de la colección.
8. POST /articles Abrir postman collection en ejemplos/cuba/2-api/postman.json - Create
9. GET /articles Abrir postman collection en ejemplos/cuba/2-api/postman.json - Get collection
10. GET /articles/id Abrir postman collection en ejemplos/cuba/2-api/postman.json - Get item
11. Put /articles/id Abrir postman collection en ejemplos/cuba/2-api/postman.json - Update item
12. Delete /articles/id Abrir postman collection en ejemplos/cuba/2-api/postman.json - Delete item
13. JSON
14. JSON { "id": 1, "title": "Título", "created_at": "2014-10-24T13:45:06-03:00", "published": false, "published_at": null, "author": { "name": "Pepe" }, "comments": [ ... ] } JavaScript Object Notation
15. Escribir JSON require "json" JSON.dump({ foo: "bar" }) # => "{\"foo\":\"bar\"}" Correr este ejemplo en irb
16. Escribir JSON EN CUba class App < Cuba def json(object) res.headers.merge! "Content-Type" => "application/json" res.write JSON.dump(object) end define do on get do json({ foo: "bar" }) end end end
17. Parsear JSON require "json" JSON.parse("{\"foo\":\"bar\"}") #=> { foo: "bar" } Correr este ejemplo en irb
18. PARSEAR JSON EN CUBA Tenemos un atajo: rack-parser En app.rb: require 'rack/parser' Cuba.use Rack::Parser
19. rack/parseR POST /articles Content-Type: application/json { title: "Foo", content: "Lorem Ipsum" } HTTP Request on post, "articles" do req.params["title"] #=> Foo req["content"] #=> "Lorem Ipsum" end Cuba Ver https://github.com/achiu/rack-parser
20. Modelo • Title [String] • Body [String] • Tags [Array] • published [Boolean] • published_at [Timestamp] • created_at [Timestamp] • updated_at [Timestamp] Abrir este ejemplo en el repo en ejemplos/cuba/api/models/article.rb Article
21. Modelo a JSON require "ohm/json" class Article … def to_hash super.merge title: title, body: body, … end end Abrir este ejemplo en el repo en ejemplos/cuba/api/models/article.rb
22. RUTAS
23. Rutas API Cuba.define do on "api" do run Api end end ejemplos/cuba/api/app.rb
24. class Api < Cuba define do on 'articles' do … end end end Abrir este ejemplo en el repo en ejemplos/cuba/api/routes/api.rb Rutas API
25. on root do # GET /articles on get do json Article.all.sort_by(:created_at, order: "DESC") end end Abrir este ejemplo en el repo en ejemplos/cuba/api/routes/api.rb Rutas API
26. on root do # POST /articles on post do params = slice(req.params, :title, :body, :tags, :published) article = Article.create params json article, status: 201 end end Abrir este ejemplo en el repo en ejemplos/cuba/api/routes/api.rb Rutas API
27. on ":id" do |id| article = Article[id] # GET /articles/:id on get, root do json article end end Abrir este ejemplo en el repo en ejemplos/cuba/api/routes/api.rb Rutas API
28. on ":id" do |id| article = Article[id] # PUT /articles/:id on put, root do params = slice(req.params, :title, :body, :tags, :published) article.update params json article end end Abrir este ejemplo en el repo en ejemplos/cuba/api/routes/api.rb Rutas API
29. on ":id" do |id| article = Article[id] # DELETE /articles/:id on delete, root do article.delete res.status = 204 end end Abrir este ejemplo en el repo en ejemplos/cuba/api/routes/api.rb Rutas API
31. quienes usaron angular o algún otro framework?
32. Conceptos Basicos
33. Single page applications
34. sPA Single Page Applications Todo el HTML, JS, y CSS necesario es cargado en el primer page load JS HTML CSS
35. sPA Single Page Applications La página nunca se recarga completamente.
36. sPA Single Page Applications Todo es manejado via JavaScript haciendo pedidos por AJAX cuando es necesario. AJAX
37. MV* Model View Whatever
38. MVC Model View Controller X View Representación de la data Model Data de la aplicación Controller Mediador entre la vista y el modelo
39. MVVM Model View View-Model View ViewModel Model DataBinding Presentation and Presentation Logic Business Logic and Data
40. Two way data binding
41. Two way data binding <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/ angular.min.js"></script> </head> <body> <div> <label>Nombre:</label> <input type="text" ng-model="tuNombre" placeholder="Escribir un nombre aqui"> <hr> <h1>Hola {{tuNombre}}!</h1> <hr> <button ng-click="tuNombre = 'Robertito' ">Cambiar mi nombre a Robertito</ button> </div> </body> </html> Abrir este ejemplo en el repo en ejemplos/angular/1-data-binding/index.html
42. modulos
43. modulos • Las aplicaciones angular se dividen en módulos. • Un módulo puede contener el código principal de la aplicación o una librería (directives, factories, etc). • Un módulo puede tener dependencias
44. modulos angular.module("myApp", []) Definir un módulo: var app = angular.module("myApp") Getter: angular.module("myApp").controller("myController", function() { ... }) Para definir un componente en un módulo usar chaining:
45. dependency injection
46. dependency injection var app = angular.module('myBlog', []); Aplicación sin ninguna dependencia Aplicación con dependencia del módulo para el routing de URL Aplicación con varias dependencias var app = angular.module('myBlog', ['ngRoute']); var app = angular.module('myBlog', ['ngAnimate', 'ui.router', 'ngResource']);
47. dependency injection var app = angular.module('myBlog', []); Aplicación sin ninguna dependencia var app = angular.module('myBlog', ['ngRoute']); Aplicación con dependencia del módulo para el routing de URL var app = angular.module('myBlog', ['ngAnimate', 'ui.router', 'ngResource']); Aplicación con varias dependencias angular .module('myBlog') .controller('AdminArticlesEditController', ['$scope', '$state', '$stateParams', 'Article', function($scope, $state, $stateParams, Article) { ... }]); Controller con dependencias Las dependencias se declaran de la misma manera para controllers, directivas, servicios, etc.
48. Controllers
49. controller function MainCtrl ($scope) { $scope.myName = "Jorgelino"; } angular .module('app', []) .controller('MainCtrl', MainCtrl); Con un solo item <div ng-controller="MainCtrl"> <h1>{{myName}}</h1> </div> JS HTML Abrir este ejemplo en el repo en ejemplos/angular/2-controllers/ejemplo-1/index.html
50. nueva sintaxis ControllerAs
51. multiples controllers <div ng-controller="MainCtrl as main"> {{ main.title }} <div ng-controller="AnotherCtrl as another"> {{ another.title }} <div ng-controller="YetAnotherCtrl as yet"> {{ yet.title }} </div> </div> </div> ControllerAs
52. HTML nueva sintaxis function MainCtrl () { this.myName = "Jorgelino"; } angular .module('app', []) .controller('MainCtrl', MainCtrl); ControllerAs <div ng-controller="MainCtrl as main"> <h1>{{main.myName}}</h1> </div> JS
53. JS controller function MainCtrl(){ this.names = [ "juancho", "Pepe", "Cacho", "Josefo" ] var that = this; this.removeName = function (index) { that.names.splice(index, 1) } } Con un varios items y una función <div ng-controller="MainCtrl as main"> <ul> <li ng-repeat="name in main.names"> {{ name }} <a ng-click="main.removeName($index)">Borrar</a> </li> </ul> </div> HTML Abrir este ejemplo en el repo en ejemplos/angular/2-controllers/ejemplo-2/index.html
54. directives
55. built in directives Events • ng-click / ng-submit • ng-focus / ng-blur • ng-cut / ng-copy / ng-paste Control • ng-repeat • ng-if / ng-switch CSS • ng-class / ng-style • ng-show / ng-hide • ng-class-even / ng-class-odd Forms • form / input / select / textarea • ng-model • ng-selected / ng-checked • ng-required / ng-disabled
56. built in directives <div ng-controller="IndexCtrl as index"> <ul> <li ng-repeat="article in index.articles"> {{ article.title }} </li> </ul> </div> Abrir este ejemplo en el repo en ejemplos/angular/3-directives/ng-repeat/index.html ngRepeat
57. built in directives <div ng-controller="IndexCtrl as index"> <ul> <li ng-show="article.published" ng-repeat="article in index.articles" > {{ article.title }} </li> </ul> </div> Abrir este ejemplo en el repo en ejemplos/angular/3-directives/ng-show/index.html ngShow
58. built in directives <div ng-controller="IndexCtrl as index"> <h1>Published Articles</h1> <ul> <li ng-show="article.published" ng-repeat="article in index.articles"> {{ article.title }} <button href="" ng-click=" article.published = !article.published ">Undo Publish</button> </li> </ul> <h1>Draft Articles</h1> <ul> <li ng-hide="article.published" ng-repeat="article in index.articles"> {{ article.title }} <button ng-click=" article.published = !article.published ">Publish</button> </li> </ul> </div> Abrir este ejemplo en el repo en ejemplos/angular/3-directives/ng-click/index.html ngClick
59. Filters
60. built in filters <label>Search:</label> <input ng-model="search" placeholder="Search Articles" /> <h1>Published Articles</h1> <ul> <li ng-show="article.published" ng-repeat="article in index.articles | filter : search "> {{ article.title }} <button ng-click=" article.published = !article.published ">Undo Publish</button> </li> </ul> Abrir este ejemplo en el repo en ejemplos/angular/4-filters/date/index.html Filter
61. built in filters <ul> <li ng-show="article.published" ng-repeat="article in index.articles"> {{ article.title }} <br/> <strong>{{ article.published_at | date:'medium' }}</strong> ... </li> </ul> Abrir este ejemplo en el repo en ejemplos/angular/4-filters/date/index.html Date
62. built in filters <ul> <li ng-repeat="article in index.articles | limitTo: 3" ng-show="article.published"> {{ article.title }} <br/> <strong>{{ article.published_at | date:'medium' }}</strong> ... </li> </ul> Abrir este ejemplo en el repo en ejemplos/angular/4-filters/date/index.html limitTo
63. Blog Hands On
64. Antes de empezar • cd blog-app • ruby setup.rb • make server
65. Estructura models routes views helpers app.rb config.ru public
66. Estructura models routes views helpers app.rb public article.rb user.rb
67. Estructura routes models views admin.rb api.rb api blog.rb admin.rb
68. Estructura models routes helpers public views admin blog js_partials
69. routes views helpers public js stylesheets app blog.js admin.js Estructura controllers directives factories
70. Ejercicios
71. Agregar un filter en el admin
72. Agregar un filter en el admin
73. Hints : Filter Archivo: blog-app/views/admin/js_partials/articles/index.html.erb Ejemplo: ejemplos/angular/4-filters/filter/index.html
74. Agregar Delete de un articulo
75. Agregar Delete de un articulo
76. Hints : delete Archivos: blog-app/views/admin/js_partials/articles/index.html.erb blog-app/public/js/app/controllers/admin/AdminArticlesIndexController.js Ejemplo: ejemplos/angular/2-controllers/ejemplo-2/index.html Ver: blog-app/public/js/app/controllers/admin/AdminArticlesEditController.js
77. hacer vista index blog
78. hacer vista index blog
79. Hints : INDEX BLOG Archivo: blog-app/views/blog/js_partials/articles/index.html.erb Ejemplo: ejemplos/angular/3-directives/ng-repeat/index.html
80. hacer vista articulo
81. Hints : VistA Articulo Ver: blog-app/views/admin/js_partials/articles/edit.html.erb blog-app/public/js/app/controllers/admin/AdminArticlesEditController.js blog-app/public/js/app/admin.js ($stateProvider) Archivos: blog-app/views/blog/js_partials/articles/index.html.erb blog-app/public/js/app/blog.js
82. boton para publicar un articulo
83. boton para publicar un articulo
84. Hints : Boton Publicar Ver: blog-app/public/js/app/controllers/admin/AdminArticlesEditController.js Archivos: blog-app/views/admin/js_partials/articles/index.html.erb blog-app/routes/api/admin.rb
85. @jgnatch @kitop @jgnatch @kitopastorino