J'ai fait un portfolio avec Ruby On Rails

■ Présentation

J'ai créé une application simple avec Ruby on Rails, donc j'ai eu du mal J'ai écrit un article parce que je voulais prendre note des points que j'ai élaborés comme mémorandum dans le futur.

■ Construction de l'environnement

· Mac ・ Git installé ・ Rubis 2.6.5 ・ Rails 6.0.3.4 ・ Code Visual Studio

■ Vue d'ensemble de l'application

C'est une application qui permet aux utilisateurs de partager des vêtements. Quand j'achète habituellement des vêtements, je me réfère souvent aux vêtements portés par d'autres, il serait donc pratique d'avoir une application qui me permette de partager des photos des vêtements que j'ai, des impressions de venir et des prix. J'ai pensé, je l'ai créé.

■ Conception de bases de données

Les trois tableaux suivants sont utilisés cette fois. Un utilisateur peut publier plusieurs vêtements (fuku). De plus, le tableau intermédiaire permet aux utilisateurs d'aimer les vêtements affichés.

table des utilisateurs

table de fukus

table des likes (table intermédiaire)

concevoir la mise en œuvre

Lors de la création de la fonction d'authentification de connexion, il faut du temps pour tout créer à partir de zéro, j'ai donc utilisé le dispositif, qui est facile à implémenter.

$rails generate devise :install

La méthode de configuration requise pour la fonction de connexion apparaîtra, alors ajoutez le code. De plus, créez un modèle utilisateur basé sur le modèle.

$rails g devise User

Pour le moment, le modèle utilisateur basé sur l'appareil ne comporte que des colonnes d'e-mail et de mot de passe par défaut, ajoutez donc name et profile_image_id au fichier de migration.

$rails g migration add_name_to_users name:string profile_image_id:string
$rails db:migrate

Ajoutez également les champs profile_image et name à la nouvelle vue d'inscription.

ruby:new.html.erb

<div class="field">
  <%= f.label :image de profil%>
  <%= f.attachment_field :profile_image %>  
</div>

<div class="field">
  <%= f.text_field :name, autofocus: true, placeholder:"Nom", autocomplete: "name"%>
</div>

Je pensais que la nouvelle fonction d'enregistrement de l'utilisateur pouvait être implémentée avec cela, mais même si je définissais le nom et l'image de profil sur le nouvel écran d'enregistrement Cela ne figurait pas dans la base de données. Après enquête, il a été constaté que le dispositif n'accepte que les adresses e-mail et les mots de passe lors de son enregistrement par défaut. En décrivant le paramètre strong dans application.controller comme indiqué ci-dessous, la colonne ajoutée peut également être reçue.

ruby:application.controller.rb

def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :profile_image])
end

Renouveler la mise en œuvre

Je souhaite implémenter la fonction de publication d'images sur chacun des modèles utilisateur et Fuku, j'ai donc décidé d'utiliser le refile. Il y a un carrierwave dans un autre bijou similaire, mais le refile est relativement nouveau créé par le créateur de carrierwave en tant que successeur, j'ai donc utilisé refile cette fois. J'ai fait référence à cet article de Qiita. https://qiita.com/salvage0707/items/2614c97a1f256027ef71

Table intermédiaire

Nous mettrons en place une fonction qui vous permettra d'aimer les vêtements affichés.

Traitement requis

(1) "Like user id: user_id" et "Like Clothes id: fuku_id" sont enregistrés dans "Intermediate table: likes table". ② Le bouton J'aime change en fonction de «J'aime» et «Aimé»

Comme modèle

Tout d'abord, créez une table (table des likes) qui stocke les «utilisateurs aimés» et les «vêtements aimés».

$rails g model like user_id:integer fuku_id:integer
$rails db:migrate

Association

Nous décrirons l'association pour le modèle. L'utilisateur et Fuku sont un-à-plusieurs, User et Like sont un-à-plusieurs, Fuku et Like sont également un-à-plusieurs, donc

user.rb

has_many :fukus
has_many :likes

fuku.rb

belongs_to :user
has_many :fukus

like.rb

belongs_to :user
belongs_to :fuku

Ce sera.

routage

Les likes sont imbriqués dans les fukus pour aimer les vêtements affichés. J'ai trouvé cette ressource très pratique car le routage est automatiquement formé en écrivant simplement une ligne.

 resources :fukus do
      resources :likes, only:[:create, :destroy]
 end

manette

Créez un contrôleur de likes.

$rails g controller likes

Ensuite, sur la page des détails des vêtements, modifiez la vue pour que l'utilisateur connecté puisse l'aimer. Assurez-vous que l'utilisateur connecté se comporte différemment quand il l'aime déjà et quand il ne l'aime pas.

ruby:app/views/fukus/show.html.erb

<% if Like.find_by(user_id:current_user.id, fuku_id:@fuku.id) %>
 <p><%= link_to 'Aimé', fuku_likes_path(@fuku), method: :delete %></p>
<%else%>
 <p><%= link_to 'Comme c'est gentil', fuku_likes_path(@fuku), method: :post %></p>
<%end%>

Décrivez le contrôleur des likes comme suit et stockez l'ID de l'utilisateur qui a aimé et le message dans le tableau des likes de l'utilisateur qui est connecté par l'action de création. J'annule un similaire avec l'action de destruction.

likes_controller.rb

def create
 @like=Like.new(user_id:current_user.id, fuku_id:params[:fuku_id])
 @lika 
 redirect_back(fallback_location: root_path)
end

def destroy
 @like =Like.find_by(user_id:current_user.id, fuku_id:params[:fuku_id])
 @like.destroy
 redirect_back(fallback_location: root_path)
end

Ensuite, modifiez le contrôleur et affichez-le afin de voir les messages que vous avez aimés sur la page de détails de l'utilisateur.

@ fukus → Obtenez user_id des vêtements postés par chaque utilisateur @ likes → Obtenez l'ID utilisateur des likes pressés par chaque utilisateur

users_controller.rb

def show
    @user=User.find_by(id:params[:id])
    @fukus=Fuku.where(user_id:@user.id)
    @likes=Like.where(user_id:@user.id)
end

ruby:app/users/show.html.erb

  <% @likes.each do |like| %>
         <% fuku=Fuku.find_by(id:like.fuku_id)%>
         <%= link_to(fuku_path(fuku)) do %>
          <%=attachment_image_tag fuku,:image,class:"thumbnail150" %>
         <%end%>
  <%end%>

Ceci termine la mise en œuvre de la fonction similaire.

Supplément

before_action :authenticate_user! En écrivant au début du contrôleur, le traitement qui y est effectué ne peut être exécuté que par l'utilisateur connecté. De plus, par exemple, si vous souhaitez autoriser les utilisateurs qui ne sont pas connectés à effectuer uniquement l'action d'indexation, décrivez comme suit.

class FukusController < ApplicationController
  before_action :authenticate_user!, except: [:index]
  
　def index
    ＠fukus=Fuku.all
  end

  def show
    @fuku=Fuku.find_by(id:params[:id])
  end
end

Ce que je veux apprendre dans le futur

En créant une application à partir de zéro, je pense avoir acquis une connaissance minimale du traitement CRUD. Je reçois encore fréquemment des erreurs, mais je pense qu'en me référant à des articles similaires, j'ai acquis la capacité de les enquêter et de les résoudre moi-même. J'aimerais continuer à en apprendre davantage et ajouter, par exemple, une fonction qui permet aux utilisateurs de s'envoyer des messages, et une fonction qui permet aux utilisateurs de rechercher par marque de vêtements, type et fourchette de prix. De plus, je ne suis pas doué pour implémenter le front-end, alors j'aimerais également étudier ce domaine.