El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, ens centrarem en la implementació de les funcionalitats del projecte final. Aquest és un pas crucial, ja que és on convertim els nostres dissenys i plans en codi funcional. A continuació, desglossarem el procés en passos clars i proporcionarem exemples pràctics per ajudar-te a comprendre cada aspecte.

Planificació de les Funcionalitats

Abans de començar a codificar, és important tenir una idea clara de les funcionalitats que necessitem implementar. Això inclou:

Definir els Requisits: Quines funcionalitats ha de tenir l'aplicació?
Especificar les Funcionalitats: Desglossar cada funcionalitat en tasques més petites i manejables.
Prioritzar les Tasques: Decidir l'ordre en què s'implementaran les funcionalitats.

Exemple de Planificació

Suposem que estem creant una aplicació de gestió de tasques. Les funcionalitats principals podrien ser:

Crear una nova tasca.
Editar una tasca existent.
Marcar una tasca com a completada.
Eliminar una tasca.

Creació de Models

Els models són una part fonamental de qualsevol aplicació Ruby on Rails, ja que representen les dades i la lògica de negoci. Comencem per crear els models necessaris per a la nostra aplicació.

Exemple de Model

# app/models/task.rb
class Task < ApplicationRecord
  validates :title, presence: true
  validates :description, presence: true
end

Migració de la Base de Dades

Després de definir el model, necessitem crear una migració per a la base de dades.

# db/migrate/20231010123456_create_tasks.rb
class CreateTasks < ActiveRecord::Migration[6.1]
  def change
    create_table :tasks do |t|
      t.string :title
      t.text :description
      t.boolean :completed, default: false

      t.timestamps
    end
  end
end

Executem la migració:

rails db:migrate

Creació de Controladors

Els controladors gestionen les sol·licituds de l'usuari i interactuen amb els models per obtenir dades. Creem un controlador per a les tasques.

Exemple de Controlador

# app/controllers/tasks_controller.rb
class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def show
    @task = Task.find(params[:id])
  end

  def new
    @task = Task.new
  end

  def create
    @task = Task.new(task_params)
    if @task.save
      redirect_to @task
    else
      render :new
    end
  end

  def edit
    @task = Task.find(params[:id])
  end

  def update
    @task = Task.find(params[:id])
    if @task.update(task_params)
      redirect_to @task
    else
      render :edit
    end
  end

  def destroy
    @task = Task.find(params[:id])
    @task.destroy
    redirect_to tasks_path
  end

  private

  def task_params
    params.require(:task).permit(:title, :description, :completed)
  end
end

Creació de Vistes

Les vistes són responsables de la presentació de les dades. Creem les vistes necessàries per a les tasques.

Exemple de Vistes

Index View

<!-- app/views/tasks/index.html.erb -->
<h1>Tasques</h1>
<%= link_to 'Nova Tasca', new_task_path %>
<ul>
  <% @tasks.each do |task| %>
    <li>
      <%= link_to task.title, task_path(task) %>
      <%= link_to 'Editar', edit_task_path(task) %>
      <%= link_to 'Eliminar', task_path(task), method: :delete, data: { confirm: 'Estàs segur?' } %>
    </li>
  <% end %>
</ul>

Show View

<!-- app/views/tasks/show.html.erb -->
<h1><%= @task.title %></h1>
<p><%= @task.description %></p>
<p><%= @task.completed ? 'Completada' : 'No Completada' %></p>
<%= link_to 'Editar', edit_task_path(@task) %>
<%= link_to 'Tornar', tasks_path %>

New/Edit View

<!-- app/views/tasks/_form.html.erb -->
<%= form_with(model: @task, local: true) do |form| %>
  <% if @task.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@task.errors.count, "error") %> prohibits this task from being saved:</h2>
      <ul>
        <% @task.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div>

  <div class="field">
    <%= form.label :completed %>
    <%= form.check_box :completed %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

New View

<!-- app/views/tasks/new.html.erb -->
<h1>Nova Tasca</h1>
<%= render 'form', task: @task %>
<%= link_to 'Tornar', tasks_path %>

Edit View

<!-- app/views/tasks/edit.html.erb -->
<h1>Editar Tasca</h1>
<%= render 'form', task: @task %>
<%= link_to 'Tornar', tasks_path %>

Rutes

Finalment, configurem les rutes per a les nostres tasques.

Exemple de Rutes

# config/routes.rb
Rails.application.routes.draw do
  resources :tasks
  root 'tasks#index'
end

Exercici Pràctic

Implementa una funcionalitat addicional per a l'aplicació de gestió de tasques: afegir una data de venciment a cada tasca.

Passos:

Actualitza el Model: Afegeix un camp due_date al model Task.
Actualitza la Migració: Crea una nova migració per afegir el camp due_date a la taula tasks.
Actualitza el Formulari: Afegeix un camp per a la data de venciment al formulari de tasques.
Actualitza les Vistes: Mostra la data de venciment a les vistes show i index.

Solució:

Migració

# db/migrate/20231010123567_add_due_date_to_tasks.rb
class AddDueDateToTasks < ActiveRecord::Migration[6.1]
  def change
    add_column :tasks, :due_date, :date
  end
end

Executem la migració:

rails db:migrate

Actualització del Model

# app/models/task.rb
class Task < ApplicationRecord
  validates :title, :description, :due_date, presence: true
end

Actualització del Formulari

<!-- app/views/tasks/_form.html.erb -->
<%= form_with(model: @task, local: true) do |form| %>
  <!-- ... altres camps ... -->

  <div class="field">
    <%= form.label :due_date %>
    <%= form.date_select :due_date %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

Actualització de les Vistes

<!-- app/views/tasks/show.html.erb -->
<h1><%= @task.title %></h1>
<p><%= @task.description %></p>
<p>Data de Venciment: <%= @task.due_date %></p>
<p><%= @task.completed ? 'Completada' : 'No Completada' %></p>
<%= link_to 'Editar', edit_task_path(@task) %>
<%= link_to 'Tornar', tasks_path %>

<!-- app/views/tasks/index.html.erb -->
<h1>Tasques</h1>
<%= link_to 'Nova Tasca', new_task_path %>
<ul>
  <% @tasks.each do |task| %>
    <li>
      <%= link_to task.title, task_path(task) %>
      (Data de Venciment: <%= task.due_date %>)
      <%= link_to 'Editar', edit_task_path(task) %>
      <%= link_to 'Eliminar', task_path(task), method: :delete, data: { confirm: 'Estàs segur?' } %>
    </li>
  <% end %>
</ul>

Conclusió

En aquesta secció, hem après a implementar funcionalitats en una aplicació Ruby on Rails. Hem cobert la planificació de les funcionalitats, la creació de models, controladors i vistes, així com la configuració de rutes. També hem realitzat un exercici pràctic per reforçar els conceptes apresos. Amb aquests coneixements, estàs preparat per continuar amb la implementació de les funcionalitats del teu projecte final.

Implementació de Funcionalitats