Ruby on Rails 101

W. ukko.mxM. office@ukko.mxT. (81) 2315 4497

Av. del Estado 120Colonia Tecnológico,Monterrey, Nuevo León

Together we achieve.

P A R T E 3

Temario

1. No Sign Up con Devise.

2. Assets pipeline.

3. Bootstrap gem.

4. Landing page.

5. Heroku.

R E C A P I T U L A C I Ó N

● CRUD de Producto.

● CRUD de Usuarios (scaffold).

● RubyGems y Devise.

● Autenticación de usuarios con Devise.

● Active Storage.

Recapitulación

Deshabilitar sign up

En app/models/user.rb

Deshabilitar el módulo de registerable:

1. class User < ApplicationRecord2. # Include default devise modules. Others available are:3. # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable4. devise :database_authenticable, :registerable, :recoverable, :rememberable,5. :validatable6. end

S I G N U P

S I G N U P

Reiniciar el servidor de rails:

El link de ‘Sign up’ no estará visible y todo el módulo de

registro de usuarios estará deshabilitado.

rails s

S I G N U P

La consola de rails nos permite interactuar con la aplicación de rails a través de la línea de comandos:

1. Abrir la consola de rails

2. Crear un usuario para iniciar sesión en caso de que no hayamos registrado un usuario:

rails c

Running via Spring preloader in process 19046Loading development environment (Rails 5.2.3)irb(main):004:0> User.create(name: 'Admin', email: 'admin@test.com', password: '123456', password_confirmation: '123456') (0.0ms) begin transaction User Exists (0.3ms) SELECT 1 AS one FROM "users" WHERE "users"."email" = ? LIMIT ? [["email", "admin@test.com"], ["LIMIT", 1]] User Create (0.5ms) INSERT INTO "users" ("name", "created_at", "updated_at", "email", "encrypted_password") VALUES (?, ?, ?, ?, ?) [["name", "Admin"], ["created_at", "2019-07-31 16:58:13.310848"], ["updated_at", "2019-07-31 16:58:13.310848"], ["email", "admin@test.com"], ["encrypted_password", "$2a$11$BSJnFu//KxiTnwTb6Xe9geOOcSjaJh4FPGYzbOwz.5aFC8UGDUWIS"]] (4.5ms) commit transaction=> #<User id: 2, name: "Admin", created_at: "2019-07-31 16:58:13", updated_at: "2019-07-31 16:58:13", email: "admin@test.com">irb(main):005:0> exit

Rails Console

Assets pipeline de Rails1 . A S S E T S P I P E L I N E

A S S E T S P I P E L I N ETogether we achieve.

A S S E T S P I P E L I N E

● Concatenar y minificar o comprimir fuentes de Javascript y CSS.

● Permite utilizar otros lenguajes o preprocesadores para escribir JS y CSS:

○ SASS

○ Coffeescript

○ ERB

● Combina el código fuente de JS y CSS de la aplicación con el de otras gemas incluídas.

● Gema: sprockets-rails.

* FUENTE: https://guides.rubyonrails.org/asset_pipeline.html

¿Qué es el assets pipeline?

* FUENTE: https://guides.rubyonrails.org/asset_pipeline.html

A S S E T S P I P E L I N E

Organización del assets pipeline

● app/assets: Elementos específicos de la aplicación

● lib/assets: Elementos compartidos por aplicaciones o que no son específicos de la app

● vendor/assets: Elementos de terceros

Sprockets usa archivos manifiestos para determinar qué elementos incluir y servir en la aplicación:

En app/assets/javascripts/application.js En app/assets/stylesheets/application.css

// ...//= require rails-ujs//= require turbolinks//= require_tree .var myVariable = “something cool”

/* ...*= require_self*= require_tree .*/div { color: red }

Bootstrap2 . B O O T S T R A P

B O O T S T R A PTogether we achieve.

Instalando bootstrap en la aplicación

1. Agregamos las gema al Gemfile:

2. En Windows, es posible que se tenga que instalar NodeJS para compatibilidad con ES6 y solucionar problemas con

el runtime de javascript. Se puede descargar de https://nodejs.org/

a. Una vez finalizada la instalación se deberá abrir una ventana nueva de la terminal y continuar ahí.

b. Agregar al archivo config/boot.rb :

gem 'jquery-rails'gem 'bootstrap', '~> 4.3.1'

ENV['EXECJS_RUNTIME'] = 'Node'

B O O T S T R A P

1. Editar el archivo app/assets/stylesheets/application.css:

2. Renombrar el archivo app/assets/stylesheets/application.css a:

applications.scss

/* …- *= require_self- *= require_tree . */+ @import “bootstrap”;

B O O T S T R A P

Instalando bootstrap en la aplicación

Instalando bootstrap en la aplicación

5. En app/assets/javascripts/application.js agregar:

A S S E T S P I P E L I N E

//// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details// about supported directives.////= require rails-ujs//= require activestorage//= require turbolinks//= require jquery3//= require popper//= require bootstrap//= require_tree .

6. Correr bundler:

bundle install

7. Iniciar el servidor:

bundle install

Landing page4 . L A N D I N G P A G E

Together we achieve. L A N D I N G P A G E

Ruta para Landing page

1. Editar el archivo config/routes.rb:

Rails.application.routes.draw do devise_for :users

authenticated :user do root 'products#index', as: :authenticated_root end

root "application#landing"

resources :products resources :usersend

class ApplicationController < ActionController::Base before_action :authenticate_user!, except: :landing

def landing endend

2. Agregar acción en controlador app/controllers/application_controller.rb

L A N D I N G P A G E

Vista para Landing page

1 . Crear el archivo app/views/application/landing.html.erb

<div class="jumbotron"> <h1 class="display-4">Mi tienda en línea</h1> <hr class="my-4"> <p class="lead"> <%= link_to 'Iniciar Sesión', new_user_session_path, class: 'btn btn-primary btn-lg' %> </p></div>

L A N D I N G P A G E

Productos en Landing page

class ApplicationController < ActionController::Base before_action :authenticate_user!, except: :landing

def landing @products = Product.all endend

1. Cargar productos en el controlador:

L A N D I N G P A G E

<div class='container'>

<div class='row'>

<div class='col-sm-12'>

<h2>Productos</h2>

</div>

<% @products.each do |product| %>

<div class='col-sm-12 col-lg-3 col-md-4'>

<div class="card w-100">

<% if product.picture.attached? %>

<%= image_tag product.picture, class: 'card-img-top', alt: product.name %>

<% end %>

<div class="card-body">

<h5 class="card-title"><%= product.name %></h5>

<p class="card-text"><%= product.description %>

<p class='badge badge-primary float-right'><%= number_to_currency(product.price) %></p>

</div>

</div>

</div>

<% end %>

</div>

</div>

2. Mostrar productos en vista de landing page, en

app/views/application/landing.html.erb:

L A N D I N G P A G E

L A N D I N G P A G E

Productos en landing page

Reto Ukko #2

El cliente desea tener varios vendedores en su tienda. Cada vendedor administra su propio catálogo de

productos y no puede ver los productos de otros vendedores.

Reto:

● Agregar al modelo de producto una asociación con el modelo de Usuario.

● En la creación de un producto, asociar el producto al usuario con la sesión activa.

● En el listado de productos, mostrar sólo los productos asociados al usuario con la sesión activa

HINT: USAR BELONGS_TO & HAS_MANY EN LOS MODELOS DE PRODUCT Y USER

R E T O U K K O

Solución del Reto Ukko #2

1. Agregar campo de usuario a producto

2. Correr migración:

rails g migration AddUserIdToProducts user:references

rails db:migrate

# app/models/user.rbclass User < ApplicationRecord … has_many :productsend

3. Agregar referencias en modelos:

# app/models/product.rbclass Product < ApplicationRecord … belongs_to :userend

R E T O U K K O

Solución del Reto Ukko #2

4. Agregar el usuario a la forma de producto

# app/views/products/new.html.erb# app/views/products/edit.html.erb<%= form_for @product do |f|%> Descripción: <%= f.text_field :description %> Cantidad: <%= f.number_field :quantity %> Precio: <%= f.number_field :price %> <%= f.hidden_field :user_id, value: current_user.id %> <%= f.submit 'Guardar' %><% end %>

# app/controllers/products_controller.rbclass ProductsController < ApplicationController … def object_params params.require(:product).permit(:name, :description, :quantity, :price, :user_id) endend

5. Permitir el parámetro en el controlador de producto

6. En el index de productos, mostrar sólo los productos del usuario actual: # app/controllers/products_controller.rbclass ProductsController < ApplicationController def index @products = Product.where(user: current_user) endend

R E T O U K K O

Conclusiones

1. Rails es un framework para desarrollo web que nos permite desarrollar MVP´s y

prototipos de manera rápida y ágil enfocándose en al eficiencia y productividad.

2. Rails se basa en los principios de DRY y Convention over Configuration para hacer

el desarrollo más productivo.

3. Rails está escrito en Ruby, lenguaje de programación interpretado con una sintaxis

muy simple y fácil de extender.

4. Rails cuenta con un amplio ecosistema de librerías (gemas) libres para implementar

en cualquier aplicación.

5. Rails es ideal para pequeñas y medianas empresas.

C O N C L U S I O N E S

Deployment con Heroku

Plataforma para entregar aplicaciones de manera simple y rápida.

PAAS (Platform as a service) para construir, correr y administrar aplicaciones.

Requisitos:

● Cuenta en heroku.com

● Ruby 2.3.5 instalado localmente

● Bundler instalado localmente

● Setup: https://devcenter.heroku.com/articles/getting-started-with-ruby#set-up

R E T O U K K O

¡Gracias por su atención!

W. ukko.mxM. office@ukko.mxT. (81) 2315 4497

Av. del Estado 120Colonia Tecnológico,Monterrey, Nuevo León

Together we achieve.