Share
En la primera parte de esta serie, aprendió a usar CarrierWave en su aplicación Rails. En esta segunda parte, aprenderá cómo habilitar la carga de imágenes para sus usuarios utilizando Devise. Devise es una solución de autenticación para Rails. También aprenderá a usar fog, una biblioteca de servicios en la nube de Ruby que permitirá que su aplicación se conecte a los servicios web de Amazon..
Basta de hablar, pongámonos a trabajar.
Genera tu nueva aplicación de rieles:
rieles rieles nuevo myapp
Abre tu Gemfile y añade las siguientes gemas:
"carriles Gemfile
gema portadora gema joya gema mini_magick gema niebla "
correr instalación de paquete instalar las gemas.
Desde su terminal, cree un Controlador de paginas:
carriles carriles g controlador Páginas índice
Navegar a config / route.rb y agregar una ruta de raíz:
"carriles config / route.rb
raíz a: 'páginas # índice "
La función de carga se integrará en nuestro modelo de usuario para que los usuarios carguen avatares. Desde su terminal, instale el dispositivo:
rieles rieles generan dispositivo: instalar
El generador instalará un inicializador que describe todos de las opciones de configuración de Devise. Abrir app / views / layouts / application.html.erb en su editor de texto y agregue el siguiente código sobre el rendimiento bloquear:
"carriles app / views / layouts / application.html.erb
<%= notice %>
<%= alert %>
"
En este punto puedes generar tu modelo de Usuario:
rieles rieles generan dispositivo usuario
A continuación, migre su base de datos:
carriles rastrillo db: migrar
Tendrá que editar las vistas de dispositivos, por lo que es importante que las genere:
rieles rieles generan dispositivo: vistas
Y eso hará la magia..
Usando su editor de texto, abra app / views / devise / registrations / new.html.erb y edítalo para que se vea así:
"carriles app / views / devise / registrations / new.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), :html => multipart:: true) do | f | %> <%= devise_error_messages! %>
<%= f.label :email %><% end %>
<%= render “devise/shared/links” %>"
Hacer lo mismo para app / views / devise / registrations / edit.html.erb:
"carriles app / views / devise / registrations / edit.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: method: :put, multipart: :true ) do |f| %> <%= devise_error_messages! %>
<%= f.label :email %><% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<% if current_user.avatar.url.present? %> <%= image_tag(current_user.avatar.url) %> <%= f.label :remove_avatar do %> <%= f.check_box :remove_avatar %> <% end %> <% end %> <%= f.file_field :avatar %> <%= f.hidden_field :avatar_cache %>
<%= f.label :current_password %> (Necesitamos su contraseña actual para confirmar sus cambios)<% end %>
Infeliz? <%= button_to "Cancel my account", registration_path(resource_name), data: confirm: "Are you sure?" , method: :delete %>
<%= link_to “Back”, :back %>"
Una vez hecho esto, deberás incluir en la lista blanca el avatar para diseñar y agregar una columna de avatar a la tabla de usuarios. Desde su terminal, ejecute la migración para agregar una nueva columna de avatar.
"carriles
rails g migration add_avatar_to_users avatar: string rake db: migrate "
Agregue el avatar de CarrierWave a su modelo de usuario; su modelo debería tener este aspecto:
"carriles modelos / usuario.rb
Usuario de clase < ActiveRecord::Base mount_uploader :avatar, AvatarUploader
dispositivo: database_authenticatable,: registerable,: recupable,: rememberable,: trackable,: validatable
# User Avatar Validation validates_integrity_of: avatar validates_processing_of: avatar
errores de definición privada de avatar_size_validation [: avatar] "" debería ser inferior a 500 KB "si avatar.size> 0.5.megabytes end end"
En el código anterior, agregaste un mount_uploader línea en la parte superior de la Usuario clase. También hay una validación para verificar la integridad y el procesamiento del avatar, junto con un método para garantizar que no se cargue ninguna imagen superior a 500 KB..
Necesitas agregar avatar, avatar_cache, y remove_avatar A la lista de atributos accesibles. Hacer esto es fácil, solo abre tu application_controller.rb y hacer que se vea así:
"carriles app / controllers / application_controller.rb
clase ApplicationController < ActionController::Base # Prevent CSRF attacks by raising an exception. # For APIs, you may want to use :null_session instead. protect_from_forgery with: :exception
before_action: configure_permitted_parameters, if:: devise_controller?
protegido
def configure_permitted_parameters devise_parameter_sanitizer.for (: sign_up) | u | u.permit (: username,: email,: password,: password_confirmation, remember_me,: avatar,: avatar_cache) devise_parameter_sanitizer.for (: account_update) | u | u.permit (: username,: password,: password_confirmation,: current_password,: avatar,: avatar_cache,: remove_avatar) end end "
Con eso hecho, estás listo para integrarte. Onda portadora.
Usando su editor de texto, navegue hasta config / inicializadores y crea un archivo llamado carrier_wave.rb. Pega el siguiente código:
rieles *** config / initializers / carrier_wave.rb ***
los rieles requieren 'carrierwave / orm / activerecord'
Este es el inicializador que se necesita para cargar CarrierWave después de ActiveRecord.
Desde su terminal, genere un cargador:
rieles rieles generar cargador avatar
Esto creará un nuevo directorio llamado cargadores en la carpeta de la aplicación y un archivo dentro llamado avatar_uploader.rb. He editado el contenido del archivo para parecerme a lo que tengo a continuación:
"carriles
app / uploaders / avatar_uploader.rb
clase AvatarUploader < CarrierWave::Uploader::Base
incluye CarrierWave :: MiniMagick
# Elija qué tipo de almacenamiento utilizar para este cargador: almacenamiento: niebla
# Anular el directorio donde se almacenarán los archivos cargados. # Este es un valor predeterminado razonable para los cargadores que deben montarse: def store_dir "uploads / # model.class.to_s.underscore / # ounted_as / # model.id" end
# Cree diferentes versiones de sus archivos cargados: version: thumb do process: resize_to_fill => [100, 100] end
versión: proceso mediano: resize_to_fill => [300, 300] end
versión: pequeño proceso: resize_to_fill => [140, 140] end
# Agregar una lista blanca de extensiones que se pueden cargar. # Para imágenes puedes usar algo como esto: def extension_white_list% w (jpg jpeg gif png) end end "
Necesitas el MiniMagick Línea para generar diferentes versiones de una imagen. Incluí tres versiones de imágenes. MiniMagick hace posible el cambio de tamaño en esta versión. El último bloque de código garantiza que no se carguen extensiones de archivo aparte de las que se enumeran aquí.
Para este tutorial, estaremos subiendo nuestras imágenes a los servicios web de Amazon. Si aún no tiene una cuenta, vaya a la página de registro y cree una cuenta gratuita.
Cuando hayas terminado con eso, deberás crear un cubo para almacenar tus imágenes. Cuando estes, elige Crear cubo para abrir el cuadro de diálogo. Ingrese un nombre para el grupo y seleccione una región. Cuando haya terminado, seleccione Crear.
Abra su Gemfile y agregue esta gema, y instalación de paquete cuando termine.
rieles gema 'figaro'
Desde tu terminal, corre paquete exec figaro instalar. Esto creará un nuevo archivo. config / application.yml y adjúntalo a tu aplicación .gitignore. Necesitará este archivo para mantener seguros su ID de acceso AWS y su clave secreta.
Para encontrar su ID de acceso de AWS y su clave secreta, vaya a Servicios web de Amazon y haga clic en el nombre de su cuenta, que se encuentra en la esquina derecha de la consola.
Desde el menú desplegable, seleccione Credenciales de seguridad, y haga clic en el Continuar con credenciales de seguridad botón. En la página que se muestra, seleccione Claves de acceso (ID de clave de acceso y clave de acceso secreta). Haga clic en el Crear nueva clave de acceso botón para generar una nueva clave, y copiarlo en un editor.
En su editor de texto, navegue hasta config / application.yml y pegar en el siguiente:
"carriles config / application.yml
aws_access_id: ingrese access_id aquí aws_access_secret_key: ingrese access_key aquí "
Reemplace las líneas como se indica arriba.
Navegar a config / inicializadores, crear un archivo llamado almacenamiento.rb, y pegar en el siguiente:
"carriles config / initializers / storage.rb
CarrierWave.configure do | config | config.storage =: fog config.fog_credentials = provider: 'AWS', aws_access_key_id: ENV ["aws_access_id"], aws_secret_access_key: ENV ["aws_access_secret_key"], región: 'us-west-2' tutsplus-avatar "config.fog_public = false end"
De acuerdo con la configuración anterior, la región para mi cubo es us-west-2, y el nombre del cubo es tutsplus-avatar. Reemplace eso con información sobre su cubo.
Pon en marcha tu servidor de rieles y apunta tu navegador a http: // localhost: 3000 / users / sign_up.
En su aplicación, es posible que desee establecer un avatar predeterminado para los usuarios que eligen no cargar un avatar. Hacer esto es fácil.
Crear una carpeta en aplicación / activos / imágenes llamado retroceder y suelta tu imagen por defecto en ella. Usando su editor de texto, navegue hasta app / uploaders / avatar_uploader.rb y pega el siguiente código:
"carriles app / uploaders / avatar_uploader.rb
def default_url (* args) ActionController :: Base.helpers.asset_path ("fallback /" + [version_name, "default-avatar.gif"]. compact.join ('_')) end "
Asegúrate de cambiar default-avatar.gif al nombre de tu imagen.
Ahora sabes cómo habilitar la carga de imágenes para tus usuarios. Esto agrega una característica importante a su aplicación de rieles. Espero que te hayas divertido. En la siguiente parte, echaremos un vistazo a PaperClip. Sus comentarios son bienvenidos..
Accentsconagua