[RUBY] Résumé du travail initial lors de la création d'une application avec Rails

introduction

Puisqu'il peut être défini comme à chaque fois lors de la création d'une application avec des rails, je vais résumer les paramètres initiaux. Le travail est le suivant.

・ Création d'applications ・ Création de base de données ・ Introduction de gemme ・ Présentation de Haml ・ Créer une table ・ Création de contrôleur et de vue ・ Introduction de jquery

Création d'applications

Tout d'abord, créez une application en entrant des commandes depuis le terminal.

Je pense que c'est une bonne idée de spécifier la version des rails que vous connaissez. (Cette fois, la version 5.2.3, la base de données utilise myspl) Dans le répertoire dans lequel vous souhaitez enregistrer votre application, procédez comme suit: (Cette fois, le nom de l'application est un exemple)

`Terminal`


$ rails _5.2.3_ new sample -d mysql

Accédez au répertoire de l'application créée.

`Terminal`


$ ｃｄ sample

Création de base de données

Créez une base de données.

`Terminal`


$ rails db:create

Une base de données pour le développement et les tests doit être créée. (Vérifiez avec une application telle que Sequel Pro)

introduction de gemme

Mettez d'abord la gemme que vous pensez utiliser pour le développement. Je pense que les quatre suivants peuvent être inclus pour le moment. Ajoutez ce qui suit à votre Gemfile.

`Gemfile`


group :development, :test do
  gem 'pry-rails'
end

gem 'haml-rails'
gem 'font-awesome-sass'
gem 'jquery-rails'

Je vais expliquer chacun pry-rails: pour arrêter le traitement sur le contrôleur et vérifier le contenu des paramètres haml: Parce que haml est utilisé (plus facile à écrire que erb) font-awesome-sass: pour utiliser l'icône font-awesome jquery-rails: pour utiliser jquery

Installer après avoir ajouté

`Terminal`


$ bundle install

Introduction de Haml

J'ai ajouté haml à gem, mais je vais changer le fichier erb qui a été créé à l'origine lors de la création de l'application en haml. Exécutez simplement la commande suivante:

`Terminal`


$ rails haml:erb2haml

L'exécution de la commande convertira le fichier erb existant en fichier haml. Après avoir exécuté la commande, il vous sera demandé Voulez-vous supprimer les fichiers .erb d'origine?, Alors entrez y. (La question est, est-ce que je peux supprimer le fichier erb d'origine? Répondons par bon → y, non → n)

Créer une table

Créez une table dans la base de données. Cette fois, je vais créer une table de messages. (Je pense que ce sera après la conception de la base de données lors de la création d'une application, mais veuillez penser que c'est pour une confirmation facile du flux)

■ Commencez par créer un modèle.

`Terminal`


$ rails g model post

Un fichier de migration et un fichier de modèle doivent être créés comme indiqué dans l'image ci-dessous.

■ Modifiez ensuite le fichier de migration. Décrit les informations de la colonne à créer. Cette fois, le nom de la colonne est content, le type de données est string et il existe une restriction nulle. Ajoutons-le au fichier de migration! (Le fichier de migration est dans db / migrate)

`xxxxxxxxxxxxxx_create_posts.rb`


class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|
      t.string :content, null: false
      t.timestamps
    end
  end
end

■ Effectuons la migration Migrez après avoir écrit le fichier de migration.

`Terminal`


$ rails db:migrate

C'est OK si la table est créée comme indiqué dans l'image ci-dessous.

Contrôleur, création de vues

■ Commencez par créer un contrôleur. (Sans cela, cela ne deviendra pas une application ...) Cette fois, nous allons créer un contrôleur de messages.

`Terminal`


$ rails g controller posts

Je pense que divers fichiers seront créés lorsque vous exécuterez la commande, mais pour le moment, c'est OK si vous ne faites attention qu'à posts_controller.rb. (Un dossier de vue pour le contrôleur de messages est également créé ici)

■ Édition du contrôleur Écrivez l'action sur le contrôleur. (Le fichier est dans l'application / les contrôleurs)

`posts_controller.rb`


class PostsController < ApplicationController
  def index
  end
end

Pour le moment, seule l'action d'index est décrite. Cette fois, je vais omettre la description du contenu comme les variables d'instance.

■ Paramètres de routage Ensuite, définissons le routage pour utiliser le contrôleur. (Le fichier est en configuration)

`routes.rb`


Rails.application.routes.draw do
  root "posts#index"
  resources :posts, only: :index
end

L'action d'index du contrôleur de postes peut être utilisée. Modifiez également le chemin racine. (Sans cela, la page par défaut préparée par les rails sera affichée lors de l'accès au chemin racine.)

■ Confirmation d'acheminement Vérifions si le routage est correctement défini

`Terminal`


$ rails routes

C'est OK si l'action d'index du contrôleur de postes est définie comme indiqué dans l'image ci-dessous.

■ Afficher la création de fichiers Après avoir défini le routage, préparez le fichier de vue. (Sans cela, même si vous ignorez la demande, vous obtiendrez une erreur car il n'y a pas de fichier)

Créez index.html.haml dans app / views / posts. Écrivons quelque chose pour que le contenu soit facile à comprendre.

`haml:index.html.haml`


%page d'index h1

■ Vérifiez avec un navigateur Après avoir créé le fichier de vue, vérifions réellement avec le navigateur s'il fonctionne. Démarrez un serveur local.

`Terminal`


$ rails s

Entrez localhost: 3000 / dans l'URL avec un navigateur tel que Chrome pour y accéder. C'est OK s'il est affiché selon le fichier de vue préparé comme indiqué dans l'image ci-dessous.

Introduction de jquery

Nous allons introduire jquery. Ajoutons require jquery à application.js.

`application.js`


//= require jquery
//= require rails-ujs
//= require activestorage
//= require_tree .

Une erreur se produira à moins que la position à ajouter require jquery soit supérieure à require_tree.

--- De côté --- À propos, lors de l'ajout manuel d'Ajax à l'aide de jquery, cela peut interférer avec les turbolinks, donc dans mon cas, j'ai supprimé les turbolinks. Commentez la description des turbolinks dans Gemfile Suppression de la description des turbolinks dans le fichier application.html Suppression de la description des turbolinks dans le fichier application.js

Enfin, vérifions si jquery fonctionne correctement dans le navigateur. Tout va bien, alors écrivez ce qui suit dans le fichier js et jetez un œil à la console du navigateur! Vous pouvez vérifier l'écran de la console à l'aide de l'outil de vérification Chrome. (Cette fois, c'est pour confirmation, alors écrivez-le dans application.js)

`application.js`


$(function(){
  console.log("OK")
})

Si OK est affiché comme indiqué dans l'image ci-dessous, cela fonctionne correctement.

C'est la fin de tout le travail lors de la création d'une application. Je vous serais reconnaissant si vous pouviez signaler des erreurs.