Share
Dans la première partie de cette série, vous avez appris à utiliser CarrierWave dans votre application Rails. Dans cette seconde partie, vous apprendrez comment activer le téléchargement d'images pour vos utilisateurs à l'aide de Devise. Devise est une solution d'authentification pour Rails. Vous apprendrez également à utiliser brouillard, une bibliothèque de services Ruby Cloud qui permettra à votre application de se connecter à Amazon Web Services..
Assez parlé, passons aux choses sérieuses.
Générez votre nouvelle application rails:
rails rails new myapp
Ouvrez votre Gemfile et ajoutez les gemmes suivantes:
"des rails Gemfile
gem carrierwave bijou devise bijou mini_magick bijou brouillard "
Courir installation groupée installer les gemmes.
Depuis votre terminal, créez un Contrôleur de pages:
rails rails g contrôleur index des pages
Aller vers config / routes.rb et ajoutez un chemin racine:
"des rails config / routes.rb
root to: 'pages # index "
La fonctionnalité de téléchargement sera intégrée à notre modèle d’utilisateur pour permettre aux utilisateurs de télécharger des avatars. Depuis votre terminal, installez le logiciel:
rails rails générer un montage: installer
Le générateur installera un initialiseur qui décrit tout des options de configuration de Devise. S'ouvrir app / views / layouts / application.html.erb dans votre éditeur de texte et ajoutez le code suivant au-dessus de la rendement bloc:
"des rails app / views / layouts / application.html.erb
<%= notice %>
<%= alert %>
"
À ce stade, vous pouvez générer votre modèle utilisateur:
rails rails générer un utilisateur
Ensuite, migrez votre base de données:
rails rake db: migrer
Vous aurez besoin de modifier les vues de conception, il est donc important de générer celles-ci:
rails rails générer des vues: vues
Et ça fera la magie.
À l'aide de votre éditeur de texte, ouvrez app / views / inventer / registrations / new.html.erb et le modifier pour ressembler à ceci:
"des rails app / views / inventer / 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” %>"
Faites la même chose pour app / views / inventer / registrations / edit.html.erb:
"des rails app / views / inventer / 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 %> (nous avons besoin de votre mot de passe actuel pour confirmer vos modifications)<% end %>
Malheureux? <%= button_to "Cancel my account", registration_path(resource_name), data: confirm: "Are you sure?" , method: :delete %>
<%= link_to “Back”, :back %>"
Ceci fait, vous devez ajouter à la liste blanche l'avatar et à son contenu, ajouter une colonne d'avatar au tableau des utilisateurs. Depuis votre terminal, lancez la migration pour ajouter une nouvelle colonne d'avatar..
"des rails
rails g migration add_avatar_to_users avatar: chaîne rake db: migrer "
Ajoutez l'avatar CarrierWave à votre modèle d'utilisateur. Votre modèle devrait alors ressembler à ceci:
"des rails models / user.rb
classe utilisateur < ActiveRecord::Base mount_uploader :avatar, AvatarUploader
devise: database_authenticatable,: enregistrable,: récupérable,: mémorisable,: traçable,: validable
# Validation de l'utilisateur avatar validates_integrity_of: avatar validates_processing_of: avatar
private def avatar_size_validation errors [: avatar] "" doit être inférieur à 500 Ko "si avatar.size> 0.5.megabytes end end"
Dans le code ci-dessus, vous avez ajouté un mount_uploader ligne en haut de la Utilisateur classe. Il existe également une validation pour vérifier l'intégrité et le traitement de l'avatar, ainsi qu'une méthode pour s'assurer qu'aucune image supérieure à 500 Ko n'est téléchargée..
Vous devez ajouter avatar, avatar_cache, et remove_avatar à la liste des attributs accessibles. Faire ceci est facile, ouvrez simplement votre application_controller.rb et le faire ressembler à ceci:
"des rails app / controllers / application_controller.rb
classe 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, si:: devise_controller?
protégé
def configure_permitted_parameters devise_parameter_sanitizer.for (: sign_up) | u | u.permit (: nom d'utilisateur,: email,: mot de passe,: password_confirmation,: Remember_me,: avatar,: avatar_cache) devise_parameter_sanitizer.for (: compte_update) | u | u.permit (: nom d'utilisateur,: mot de passe,: mot_passe_confirmation,: mot_passe_actuel,: avatar,: avatar_cache,: remove_avatar) end end "
Avec cela fait, vous êtes prêt à intégrer Onde porteuse.
À l'aide de votre éditeur de texte, naviguez jusqu'à config / initialiseurs et créez un fichier nommé carrier_wave.rb. Collez dans le code ci-dessous:
rails *** config / initializers / carrier_wave.rb ***
les rails nécessitent 'carrierwave / orm / activerecord'
C’est l’initialiseur nécessaire au chargement de CarrierWave après ActiveRecord..
Depuis votre terminal, générez un uploader:
rails rails générer uploader Avatar
Cela créera un nouveau répertoire appelé "uploaders" dans le dossier de l'application et un fichier à l'intérieur appelé avatar_uploader.rb. J'ai modifié le contenu du fichier pour qu'il ressemble à ce que j'ai ci-dessous:
"des rails
app / uploaders / avatar_uploader.rb
classe AvatarUploader < CarrierWave::Uploader::Base
inclut CarrierWave :: MiniMagick
# Choisissez le type de stockage à utiliser pour ce programme de téléchargement: stockage: brouillard
# Remplace le répertoire où les fichiers téléchargés seront stockés. # Ceci est une valeur par défaut raisonnable pour les uploaders qui doivent être montés: def store_dir “uploads / # model.class.to_s.underscore / # monté_as / # model.id” end
# Créez différentes versions de vos fichiers téléchargés: version: thumb do process: resize_to_fill => [100, 100] end
version: medium do processus: resize_to_fill => [300, 300] fin
version: petite procédure: resize_to_fill => [140, 140] fin
# Ajoutez une liste blanche des extensions qui peuvent être téléchargées. # Pour les images, vous pouvez utiliser quelque chose comme ceci: def extension_white_list% w (jpg jpeg gif png) end end "
Vous avez besoin du MiniMagick ligne pour générer différentes versions d’une image. J'ai inclus trois versions d'images. MiniMagick permet le redimensionnement dans cette version. Le dernier bloc de code garantit qu'aucune extension de fichier en dehors de celles répertoriées ici n'est téléchargée..
Pour ce didacticiel, nous allons télécharger nos images sur Amazon Web Services. Si vous n'avez pas encore de compte, sautez sur la page d'inscription et créez un compte gratuit.
Lorsque vous aurez terminé, vous devrez créer un compartiment pour stocker vos images. Quand là-bas, choisissez Créer un seau pour ouvrir la boîte de dialogue. Entrez un nom pour le compartiment et sélectionnez une région. Une fois terminé, sélectionnez Créer.
Ouvrez votre Gemfile et ajoutez cette gemme, et installation groupée lorsque vous avez terminé.
rails bijou 'figaro'
Depuis votre terminal, lancez bundle exec figaro installer. Cela va créer un nouveau fichier config / application.yml et l'ajouter à votre application .gitignore. Vous avez besoin de ce fichier pour protéger votre identifiant d'accès AWS et votre clé secrète..
Pour rechercher votre identifiant d'accès AWS et votre clé secrète, accédez à Amazon Web Services et cliquez sur le nom de votre compte, situé dans le coin droit de la console..
Dans le menu déroulant, sélectionnez Identifiants de sécurité, et cliquez sur le Continuer vers les informations d'identification de sécurité bouton. Dans la page qui s'affiche, sélectionnez Clés d'accès (ID de clé d'accès et clé d'accès secrète). Clique sur le Créer une nouvelle clé d'accès bouton pour générer une nouvelle clé et la copier dans un éditeur.
Dans votre éditeur de texte, accédez à config / application.yml et collez ce qui suit:
"des rails config / application.yml
aws_access_id: entrez access_id ici aws_access_secret_key: entrez access_key ici "
Remplacez les lignes comme indiqué ci-dessus.
Aller vers config / initialiseurs, créer un fichier nommé storage.rb, et collez ce qui suit:
"des rails config / initializers / storage.rb
CarrierWave.configure do | config | config.storage =: brouillard config.fog_credentials = fournisseur: 'AWS', aws_access_key_id: ENV ["aws_access_id"], aws_secret_access_key: ENV ["aws_access_secret_key"], région: 'us-west-2' confog. tutsplus-avatar "config.fog_public = false end"
Selon la configuration ci-dessus, la région pour mon seau est us-west-2, et le nom du seau est tutsplus-avatar. Remplacez cela par des informations sur votre seau.
Commencez votre serveur de rails et pointez votre navigateur sur http: // localhost: 3000 / users / sign_up.
Dans votre application, vous souhaiterez peut-être définir un avatar par défaut pour les utilisateurs qui choisissent de ne pas télécharger d'avatar. C'est facile.
Créer un dossier dans app / assets / images appelé se retirer et déposez-y votre image par défaut. À l'aide de votre éditeur de texte, naviguez jusqu'à app / uploaders / avatar_uploader.rb et coller dans le code ci-dessous:
"des rails app / uploaders / avatar_uploader.rb
def default_url (* args) ActionController :: Base.helpers.asset_path (“fallback /” + [version_name, “default-avatar.gif”]. compact.join ('_')) end "
Assurez-vous de changer default-avatar.gif au nom de votre image.
Vous savez maintenant comment activer le téléchargement d'images pour vos utilisateurs. Cela ajoute une fonctionnalité importante à votre application rails. J'espère que tu t'es amusé. Dans la prochaine partie, nous examinerons PaperClip. Vos commentaires sont les bienvenus.
Accentsconagua