Con questa piccola rubrica che inauguriamo con il presente articolo ci mettiamo in condizione di Realizzare una Chat con Laravel, React e Pusher a puntate
In questa serie di articoli ci occuperemo della creazione di una chat, molto rudimentale, ma con tutti i componenti necessari per avere un punto di partenza utile e vedere in azione alcuni componenti di Laravel che semplificano lo sviluppo di applicazioni web. Durante la realizzazione del progetto affronteremo i seguenti argomenti:
-Installazione e configurazione dell’ambiente Laravel
-Configurazione dell’autenticazione utente
-Utilizzo di un tool per effettuare reverse engineering su tabelle già definite nel database
-Utilizzo dei Middleware di Laravel per filtrare i messaggi inviati
-Utilizzo di Pusher e del Broadcasting di Laravel per lo scambio dei messaggi in tempo
reale
-Utilizzo dei Mutators e Accessors di Laravel per la codifica dei messaggi e la loro
decodifica
-Utilizzo del front-end scaffolding di Laravel per React
Requisiti:
Composer
Laravel >= 5.5
NPM
Node.js
PHP >= 7.1.3
MySql >= 5.6.0
Per prima cosa generiamo un nuovo progetto Laravel, che chiameremo chat laravel new chat oppure composer create-project –prefer-dist laravel/laravel chat
Useremo lo scaffolding per React, anche se Laravel fornisce di default quello per Vue.js. Cambiamo il preset come prima cosa per avere un’installazione iniziale pulita e corretta cd chat php artisan preset react.
Eseguiamo il package manager di Node.js, npm per installare tutti i moduli richiesti da React npm install. Per utilizzare il Broadcasting di Laravel lato client useremo Pusher e il modulo laravel- echo, installiamo quindi i due moduli utilizzando sempre il package manager di Node.js npm install –save laravel-echo pusher-js.
Compiliamo il bundle js dell’app React per averne disponibile una prima versione npm run dev. Torniamo ora all’app Laravel che abbiamo creato.
Andremo adesso ad utilizzare due componenti: il primo per la parte server di Pusher, il secondo per effettuare il reverse engineering su una tabella che avremo già creato nel nostro database.
composer require pusher/pusher-php-server "~4.0"
composer require krlove/eloquent-model-generator –dev
Passiamo ora alla configurazione del progetto. Apriamo il file config/app.php e abilitiamo la riga sottostante nell’array ‘providers’
App\Providers\BroadcastServiceProvider::class,
Apriamo il file .env, dove andremo a cambiare il nome dell’app in Chat, definiremo i parametri di connessione al database e il servizio di broadcasting che vogliamo utilizzare (Pusher).
APP_NAME=Chat
…
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT={PORTA}
DB_DATABASE={NOME_DB}
DB_USERNAME={USER}
DB_PASSWORD={PASS}
BROADCAST_DRIVER=pusher
Torniamo a terminale e generiamo il flusso di autenticazione fornito da Laravel.
php artisan make:auth
php artisan migrate
A questo punto il setup iniziale è completo e siamo pronti per implementare la chat.
Lanciamo il server di sviluppo php
php artisan serve
e navighiamo all’indirizzo che ci indica a terminale
Laravel development server started: <http://127.0.0.1:8000>
Possiamo già iscriverci al nostro servizio di chat, e nella prossima “puntata” inizieremo a lavorare al modello del progetto che vedremo nel proseguimento della nostra rubrica… stay tuned!
Sviluppare Chat con Laravel, React e Pusher, seconda parte
Chat con Laravel, React e Pusher: terza parte
Realizzare chat con Laravel, React e Pusher, quarto e ultimo appuntamento