2ª ParteJavier Cuevas - Diacode.com
Menú del día• Repaso a generadores y aclaraciones sobre  Scaffolding• AJAX con Rails• Autentificación de usuarios con Devis...
Repaso a generadores y  aclaraciones sobre      Scaffolding
Para tener un CRUD de un   modelo necesitamos:• Modelo• Controlador• Vistas• Tabla en la base de datos (migración)• Rutas ...
Para tener un CRUD de un   modelo necesitamos:• Modelo                    Todo esto nos                               lo o...
El Scaffold además...rails g scaffold Task   invoke   active_record                        create     db/migrate/201202241...
El Scaffold además...rails g scaffold Task   invoke   active_record                        create     db/migrate/201202241...
El Scaffold NO hace...• No incluye selects para relacionar modelos  en los formularios que crea.• Si hiciste scaffold, y p...
Montando un CRUD        SIN Scaffold•   Modelo y Tabla (migración)    rails g model User name:string    rake db:migrate•  ...
AJAXcon Rails
Algunas notas sobre      Rails y Javascript• Rails es Javascript framework agnostic, es  decir, que puede integrarse tanto...
Generar petición AJAX      con Rails<%= link_to Destroy, task, confirm: Are you sure?,method: :delete, :remote => true %> ...
Generar petición AJAX      con Rails<%= link_to Destroy, task, confirm: Are you sure?,method: :delete, :remote => true %> ...
¿Qué debe devolver la   petición AJAX?• Una petición AJAX puede devolver  diferentes tipos de datos:  • Código Javascript ...
¿Qué debe devolver la   petición AJAX?• Una petición AJAX puede devolver  diferentes tipos de datos:  • Código Javascript ...
Javascript VS JSON
Javascript VS JSON•   Devolver Javascript
Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de  contestamos con un   código Javascript, resultante...
Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de  contestamos con un    código Javascript, resultant...
Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de  contestamos con un   código Javascript, resultante...
Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de  contestamos con un   código Javascript, resultante...
Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de  contestamos con un    código Javascript, resultant...
Javascript VS JSON• Devolver Javascript                   •   Devolver JSON• A cada petición AJAXbloque de  contestamos co...
Javascript VS JSON• Devolver Javascript                   •   Devolver JSON• A cada petición AJAXbloque de  contestamos co...
Javascript VS JSON• Devolver Javascript                   •   Devolver JSON• A cada petición AJAXbloque de  contestamos co...
Javascript VS JSON• Devolver Javascript                   •   Devolver JSON• A cada petición AJAXbloque de  contestamos co...
Devolviendo Javascript         con RailsEn nuestro controlador:  def create    @task = Task.new(params[:task])    respond_...
Autentificación de Usuarios con          Devise     https://github.com/plataformatec/devise
Resolución delejercicio propuesto
Eso es todo :)   Gracias!
Upcoming SlideShare
Loading in …5
×

Taller de Introducción a Ruby on Rails (2ª parte)

1,629 views

Published on

Talle de Introducción a Ruby on Rails impartido en Diacode Talks!

http://talks.diacode.com
http://diacode.com
http://twitter.com/diacode

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,629
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Taller de Introducción a Ruby on Rails (2ª parte)

    1. 1. 2ª ParteJavier Cuevas - Diacode.com
    2. 2. Menú del día• Repaso a generadores y aclaraciones sobre Scaffolding• AJAX con Rails• Autentificación de usuarios con Devise• Resolución del ejercicio propuesto
    3. 3. Repaso a generadores y aclaraciones sobre Scaffolding
    4. 4. Para tener un CRUD de un modelo necesitamos:• Modelo• Controlador• Vistas• Tabla en la base de datos (migración)• Rutas configuradas (routes.rb)
    5. 5. Para tener un CRUD de un modelo necesitamos:• Modelo Todo esto nos lo ofrece• Controlador el scaffold• Vistas• Tabla en la base de datos (migración)• Rutas configuradas (routes.rb)
    6. 6. El Scaffold además...rails g scaffold Task invoke active_record create db/migrate/20120224135839_create_tasks.rbname:string create app/models/task.rbdescription:text invoke test_unitpriority:integer create test/unit/task_test.rb create test/fixtures/tasks.ymldue_to:date route resources :tasksdone:boolean invoke scaffold_controller create app/controllers/tasks_controller.rbcategory:references invoke erb create app/views/tasks create app/views/tasks/index.html.erb create app/views/tasks/edit.html.erb create app/views/tasks/show.html.erb create app/views/tasks/new.html.erb create app/views/tasks/_form.html.erb invoke test_unit create test/functional/tasks_controller_test.rb invoke helper create app/helpers/tasks_helper.rb invoke test_unit create test/unit/helpers/tasks_helper_test.rb invoke assets invoke coffee create app/assets/javascripts/tasks.js.coffee invoke scss create app/assets/stylesheets/tasks.css.scss invoke scss create app/assets/stylesheets/scaffolds.css.scss
    7. 7. El Scaffold además...rails g scaffold Task invoke active_record create db/migrate/20120224135839_create_tasks.rbname:string create app/models/task.rbdescription:text invoke test_unitpriority:integer create test/unit/task_test.rb create test/fixtures/tasks.ymldue_to:date route resources :tasksdone:boolean invoke scaffold_controller create app/controllers/tasks_controller.rbcategory:references invoke erb create app/views/tasks create app/views/tasks/index.html.erb Genera create create create app/views/tasks/edit.html.erb app/views/tasks/show.html.erb app/views/tasks/new.html.erb CSS (SCSS), create invoke create app/views/tasks/_form.html.erb test_unit test/functional/tasks_controller_test.rb Javascript invoke create invoke helper app/helpers/tasks_helper.rb test_unit (Coffee), create invoke invoke assets test/unit/helpers/tasks_helper_test.rb coffee Helpers, y create invoke create app/assets/javascripts/tasks.js.coffee scss app/assets/stylesheets/tasks.css.scss Tests invoke create scss app/assets/stylesheets/scaffolds.css.scss
    8. 8. El Scaffold NO hace...• No incluye selects para relacionar modelos en los formularios que crea.• Si hiciste scaffold, y posteriormente incluyes un campo nuevo a la tabla de tu modelo, las vistas no se actualizan solas: tendrás que actualizarlas tú.• Si añades nuevas acciones a tu controlador, tendrás que incluirlas en el routes.rb. El scaffold solo define rutas para el CRUD.
    9. 9. Montando un CRUD SIN Scaffold• Modelo y Tabla (migración) rails g model User name:string rake db:migrate• Modelo sin Tabla (migración) rails g model User name:string --migrations false• Controlador rails g controller User tip: rails g controller --help• Tendremos que añadir las acciones CRUD (index, show, edit, create, update, destroy) al controlador a mano• Las vistas las creamos a mano desde nuestro editor• Tendremos que editar el routes.rb y añadir rutas CRUD (resources :users) o rutas propias
    10. 10. AJAXcon Rails
    11. 11. Algunas notas sobre Rails y Javascript• Rails es Javascript framework agnostic, es decir, que puede integrarse tanto con jQuery como con Prototype, etc.• Para integrar Rails con cada framework se usan “adaptadores”.• Por defecto Rails añade al Gemfile el adaptador jquery-rails. Es decir: sin hacer nada, podemos empezar a usar jQuery.
    12. 12. Generar petición AJAX con Rails<%= link_to Destroy, task, confirm: Are you sure?,method: :delete, :remote => true %> <%= form_for(@task, :remote => true) do |f| %>
    13. 13. Generar petición AJAX con Rails<%= link_to Destroy, task, confirm: Are you sure?,method: :delete, :remote => true %> <%= form_for(@task, :remote => true) do |f| %> Por defecto estas peticiones esperan recibir código Javascript
    14. 14. ¿Qué debe devolver la petición AJAX?• Una petición AJAX puede devolver diferentes tipos de datos: • Código Javascript • JSON • JSONP (llamada a función JS + datos JSON) • Texto • HTML
    15. 15. ¿Qué debe devolver la petición AJAX?• Una petición AJAX puede devolver diferentes tipos de datos: • Código Javascript Normalmente usaremos • JSON estos dos • JSONP (llamada a función JS + datos JSON) • Texto • HTML
    16. 16. Javascript VS JSON
    17. 17. Javascript VS JSON• Devolver Javascript
    18. 18. Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb
    19. 19. Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb• Los archivos .js.erb mezclan JS y Ruby.
    20. 20. Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb• Los archivos .js.erb mezclan JS y Ruby.• Se almacenan en la carpeta app/views
    21. 21. Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb• Los archivos .js.erb mezclan JS y Ruby.• Se almacenan en la carpeta app/views• Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc.
    22. 22. Javascript VS JSON• Devolver Javascript• A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb• Los archivos .js.erb mezclan JS y Ruby.• Se almacenan en la carpeta app/views• Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc.• Tardan un poco más en ser ejecutados por el navegador.
    23. 23. Javascript VS JSON• Devolver Javascript • Devolver JSON• A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb• Los archivos .js.erb mezclan JS y Ruby.• Se almacenan en la carpeta app/views• Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc.• Tardan un poco más en ser ejecutados por el navegador.
    24. 24. Javascript VS JSON• Devolver Javascript • Devolver JSON• A cada petición AJAXbloque de contestamos con un • En un archivo .js normal, con jQuery escucharemos los código Javascript, resultante de eventos Ajax (success, error, interpretar un archivo .js.erb etc).• Los archivos .js.erb mezclan JS y Ruby.• Se almacenan en la carpeta app/views• Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc.• Tardan un poco más en ser ejecutados por el navegador.
    25. 25. Javascript VS JSON• Devolver Javascript • Devolver JSON• A cada petición AJAXbloque de contestamos con un • En un archivo .js normal, con jQuery escucharemos los código Javascript, resultante de eventos Ajax (success, error, interpretar un archivo .js.erb etc).• Los archivos .js.erb mezclan JS y Ruby. • El controlador Rails codificará los datos en• Se almacenan en la carpeta app/views JSON render json: @task• Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc.• Tardan un poco más en ser ejecutados por el navegador.
    26. 26. Javascript VS JSON• Devolver Javascript • Devolver JSON• A cada petición AJAXbloque de contestamos con un • En un archivo .js normal, con jQuery escucharemos los código Javascript, resultante de eventos Ajax (success, error, interpretar un archivo .js.erb etc).• Los archivos .js.erb mezclan JS y Ruby. • El controlador Rails codificará los datos en• Se almacenan en la carpeta app/views JSON render json: @task• Insertandorenderizar vistas, podemos: código ERB: • La función de archivo .js callback definida en el usar helpers, iterar con Ruby, normal recibirá los datos etc. JSON y hará algo con ellos.• Tardan un poco más en ser ejecutados por el navegador.
    27. 27. Devolviendo Javascript con RailsEn nuestro controlador: def create @task = Task.new(params[:task]) respond_to do |format| if @task.save format.html { redirect_to @task, notice: Task was successfully created. } format.js # Por defecto buscará create.js.erb else format.html { render action: "new" } format.js # Por defecto buscará create.js.erb end end endVista$(ul[data-category_id=+<%= @task.category_id %>+]).append(<li><%= escape_javascriptrender("header_task", :task => @task) %></li>);
    28. 28. Autentificación de Usuarios con Devise https://github.com/plataformatec/devise
    29. 29. Resolución delejercicio propuesto
    30. 30. Eso es todo :) Gracias!

    ×