Laravel e Vue.js: le funzionalità della Todo List

Fino ad ora abbiamo gettato le basi per la creazione della nostra applicazione Todo List utilizzando Laravel e Vue.js. Abbiamo iniziato esplorando come integrare Vue.js in un progetto Laravel con Vite, e abbiamo configurato il nostro ambiente di sviluppo. Installando e configurando Laravel, impostando un server locale e preparando il nostro database MySQL. Questi passaggi iniziali ci hanno permesso di comprendere meglio come i due framework possano lavorare insieme per creare un ambiente produttivo.

In questa lezione, porteremo il nostro progetto al livello successivo implementando le funzionalità principali della Todo List. Ci concentreremo su come creare e gestire le rotte API in Laravel, interagire con il database per salvare e recuperare le attività e costruire un'interfaccia utente con Vue.js che permetta di aggiungere, modificare ed eliminare attività in tempo reale. L'obiettivo è fornire una base solida per la gestione delle attività, rendendo l'applicazione funzionale e intuitiva per gli utilizzatori finali.

Seguendo questo approccio, rafforzeremo non solo la nostra comprensione dei concetti fondamentali di Laravel e Vue.js. Acquisiremo anche competenze pratiche su come sviluppare un'applicazione web completa. Lavorare su un progetto reale come la Todo List ci darà una visione concreta delle sfide e delle soluzioni nel contesto dello sviluppo web moderno, preparandoci per progetti più complessi.

Obiettivi della lezione

• creare e gestire le rotte API in Laravel: impareremo come definire le rotte per le operazioni CRUD (Create, Read, Update, Delete) necessarie per gestire le attività della Todo List.
• Interagire con il database: utilizzeremo Eloquent, l'ORM di Laravel, per interagire con il database e gestire le operazioni sulle attività.
• Costruire l'interfaccia utente con Vue.js: creeremo componenti Vue per visualizzare, aggiungere, modificare ed eliminare attività. Gestiremo inoltre lo stato dell'applicazione per garantire un'esperienza utente fluida e reattiva.

Creare e definire le rotte API con Laravel e Vue.js

Per iniziare, creeremo e configureremo le rotte API necessarie per la nostra Todo List. Questo ci permetterà di definire come l'applicazione deve rispondere alle richieste HTTP per creare, leggere, aggiornare ed eliminare le attività.

Laravel fornisce un sistema di routing flessibile e potente che consente di definire facilmente le rotte per le API. Inizieremo definendo le rotte per le operazioni CRUD nella nostra applicazione.

Se state utilizzando Laravel 11, come nel mio caso, sappiate che da questa versione in poi quando scaricate le dipendenze del framework il file api.php non verrà creato di default come nelle versioni precedenti. Quindi createlo da terminale con il seguente comando:

php artisan install:api

Ora aprite il file routes/api.php e aggiungete le seguenti rotte:

group(function () {
    Route::get('/tasks', [TaskController::class, 'index']);
    Route::post('/tasks', [TaskController::class, 'store']);
    Route::get('/tasks/{id}', [TaskController::class, 'show']);
    Route::put('/tasks/{id}', [TaskController::class, 'update']);
    Route::delete('/tasks/{id}', [TaskController::class, 'destroy']);
});

Esse coprono le operazioni necessarie per: ottenere tutte le attività, crearne di nuove, ottenere i dettagli di una specifica attività, aggiornare un'attività esistente ed eliminarne una.

Creare il Controller

Successivamente, creeremo un controller per gestire la logica delle operazioni CRUD. Utilizzeremo Artisan, lo strumento da riga di comando di Laravel, per generare il controller. Nel terminale, eseguiamo il seguente comando:

php artisan make:controller TaskController --api

Questo comando genererà un controller di base chiamato TaskController nella directory app/Http/Controllers. Apriamo il file TaskController.php e definiamo i metodi per gestire le operazioni CRUD.

Il Model e la Migration

Ora creeremo il modello Eloquent per le attività e definiremo la migrazione del database per la tabella delle attività. Eseguiamo il seguente comando per generare il modello e la migrazione:

php artisan make:model Task -m

Questo comando genererà il model Task e il file di migrazione corrispondente. Apriamo il file di migrazione in database/migrations e definiamo la struttura della tabella:

id();
            $table->string('title');
            $table->text('description')->nullable();
            $table->boolean('completed')->default(false);
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('tasks');
    }
}

Eseguiamo la migrazione per creare la tabella delle attività nel database:

php artisan migrate

Implementare le operazioni CRUD

Abbiamo già definito i metodi CRUD nel nostro controller TaskController. Ora possiamo testare le API utilizzando uno strumento come Postman.

Ora che il backend è pronto, possiamo passare alla costruzione dell'interfaccia utente con Vue.js. Creeremo componenti Vue per visualizzare, aggiungere, modificare ed eliminare le attività.

Per configurare Vue.js in Laravel, apriamo il file resources/js/app.js e modifichiamo il contenuto per includere Vue.js:

import { createApp } from 'vue';
import App from './components/App.vue';
createApp(App).mount('#app');

Creiamo un nuovo file resources/js/components/App.vue e definiamo il componente principale:

group(function () {
    Route::get('/tasks', [TaskController::class, 'index']);
    Route::post('/tasks', [TaskController::class, 'store']);
    Route::get('/tasks/{id}', [TaskController::class, 'show']);
    Route::put('/tasks/{id}', [TaskController::class, 'update']);
    Route::delete('/tasks/{id}', [TaskController::class, 'destroy']);
});

Quindi, creiamo il componente TaskList.vue che gestirà le operazioni sulle attività:

<div>
    <ul>
      <li>
        {{ task.title }}
      </li>
    </ul>
  </div>
export default {
  data() {
    return {
      tasks: [],
    };
  },
  mounted() {
    axios.get('/api/tasks').then(response => {
      this.tasks = response.data;
    });
  },
};

Assicuriamoci di installare Axios per gestire le richieste HTTP tramite npm:

npm install axios

Conclusione: una Todo List con Laravel e Vue.js

In questa lezione, abbiamo implementato le funzionalità principali della nostra Todo List, inclusa la creazione delle rotte API, l'interazione con il database e la costruzione dell'interfaccia utente con Vue.js. Ora abbiamo una solida base su cui costruire applicazioni web utilizzando Laravel e Vue.js. Nella prossima lezione, ci concentreremo su funzionalità più avanzate per rendere la nostra applicazione ancora più potente e versatile.

Approfondiremo la gestione dello stato globale con Vuex, che ci permetterà di mantenere sincronizzati i dati tra i vari componenti della nostra applicazione. Inoltre, esploreremo l'autenticazione degli utenti, implementando un sistema di login e registrazione per proteggere le informazioni e personalizzare l'esperienza utente.

Esamineremo anche come gestire i permessi e le autorizzazioni, assicurandoci che solo gli utenti autorizzati possano accedere a determinate funzionalità o dati. Infine, vedremo come ottimizzare le prestazioni della nostra applicazione e implementare best practices per garantire un'esperienza utente fluida e reattiva.

Continuate a seguirci per migliorare le vostre competenze di sviluppo web e scoprire come sfruttare al meglio Laravel e Vue.js per creare applicazioni web moderne e performanti.