BeanyOverTech

Développe la tech de demain

Créez votre 1ère application web avec Ruby on Rails (Ror)

Publié · Mis à jour

Bienvenue dans le monde merveilleux de Ruby et son framework Rails, qui vous promets de pouvoir développer des applications web très facilement et très efficacement ! C’est ce que nous allons aborder dans cet article en vous montrant à quel point il est facile de

Pré-requis :

✅ Avoir installé Ruby -> Si ce n’est pas déjà fait vous pouvez toujours lire cet article qui permet d’installer Ruby via asdf ou celui-ci pour choisir votre installation préférée.

Ce que nous allons faire :

☑ Générez une nouvelle application Rails.

☑ Générez un contrôleur et ajoutez une action .

☑ Créez une route qui mappe une URL à l’action du contrôleur.

☑ Créez une vue avec HTML et CSS.

☑ Exécutez le serveur Web local et prévisualisez l’application dans le navigateur.

Installer le Framework Rails

gem install bundler -N
gem install rails -N
rails --version
>>>> Rails 7.0.3

Lancez votre 1ère application 

$ rails new MySite 
$ cd MySite
$ bundle install 
$ gem update
$ bundle
$ rails server

avec pour sortie de la dernière commande : 

$ rails server 
=> Booting Puma
=> Rails 7.0.3 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.4 (ruby 3.1.2-p20) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 36126
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop

Vous devriez avoir sur l’adresse http://127.0.0.1:3000/ :

En trois commandes, nous venons donc de créer une application Rails fonctionnelle qui affiche la page par défaut de Rails.

  • La rails new commande a créé une nouvelle application Rails nommée MySite. Il a généré un certain nombre de fichiers et de dossiers que nous utiliserons pour créer l’application. 
  • La bundle install commande a installé tous les packages logiciels nécessaires à la nouvelle application Rails. Ces progiciels sont appelés gems et ils sont répertoriés dans le fichier Gemfile .
  • La rails server commande a démarré le serveur de développement Rails afin que nous puissions prévisualiser l’application dans le navigateur. Ce serveur de développement s’appelle WEBrick.

💻 Ce qu’il s’est ensuite passé lorsque vous êtes allées sur l’adresse locale :

  • Votre navigateur fait une requête à l’url locale
  • La requête atteint le routeur Rails qui se situe dans config/routes.rb. Le routeur renvoie la requête au controlleur
  • le responsable du traitement reçoit la demande, et la traite puis la transmet à la Vue.
  • La Vue affiche la page au format Html.
  • Le controleur renvoie le code html au navigateur.

C’est ce qu’on appelle le cycle demande/réponse ! Et nous aurons donc besoin pour développer notre application de :

  • un contrôleur
  • une route
  • une vue. 

Créez un Contrôleur 

$ rails generate controller Pages

La commande rails generate controller Pages a généré un nouveau contrôleur nommé Pages. 

Cela a créé un fichier nommé app/controllers/pages_controller.rb 

Créez une Route

Ouvrez config/routes.rb et sous la ligne 1, tapez :

get 'welcome' => 'pages#home'

Votre fichier devrait donc ressembler à cela : 

Rails.application.routes.draw do
  get 'welcome' => 'pages#home'
end

Nous pourrons donc intéréagir maintenant avec l’url http://127.0.0.1:3000/welcome

Si vous voulez que cette page soit accessible directement à l’url http://127.0.0.1:3000/ sans ajouter le ‘/welcome’

Changez votre root comme ceci : 

Rails.application.routes.draw do
 root 'pages#home'
end

Créez la Vue

Créez un fichier dans app/views/pages qui portera le nom de home.html.erb et saisissez le code HTML suivant : 

<div class="main">
  <div class="container">
    <h1>Hello World</h1>
    <p>I make Rails apps.</p>
  </div>
</div>

Si vous allez désormais sur l’url http://127.0.0.1:3000/welcome soit votre_adresse_locale/welcome qui est la route que nous avons configuré, vous devriez avoir :

Ajout du CSS

Créez un fichier pages.css.scss en le plaçant ici : app/assets/stylesheets/pages.css.scss


/* General */
html, body {
    height: 100%;
    margin: 0;
  }
  
  body {
    background-image: url('https://media.istockphoto.com/photos/abstract-futuristic-background-with-a-pedestal-picture-id1311473275?b=1&k=20&m=1311473275&s=170667a&w=0&h=TQrpH65THptzwZHrMLx6Z5ItaG3aG2rCIYNt8l59NQk=');
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Source Sans Pro', sans-serif;
  }
  
  .container {
    margin: 0 auto;
    width: 960px;
  }
  
  /* Main */
  .main {
    color: white;
    position: relative;
    top: 200px;
    text-align: center;
  }
  
  .main h1 {
    font-size: 80px;
    font-weight: 300;
  }
  
  .main p {
    font-size: 30px;
  }
  
  @media screen and (max-width: 800px) {
      body {
          background-size: auto 100%;
      }
      .container {
          width: 100%;
      }
  }

⚠ si vous avez une erreur de type :  LoadError: cannot load such file — sassc, ajoutez gem 'sass-rails'à votre fichier GemFile.

Cela vous donnera :

Félicitations !! Vous avez créé votre première application Rails !!

Vous aimerez aussi...