Come creare una pagina di destinazione con Laravel, Vue.js e Twilio SendGrid

Pubblicato: 2021-05-27

Questo tutorial è apparso originariamente sul blog di Twilio.

Le pagine di destinazione sono ovunque negli affari moderni.

Le aziende li usano per offrire un omaggio in cambio di qualcuno che si unisce a una mailing list, per vendere un prodotto o servizio e come curriculum glorificato.

Le pagine di destinazione sono un'ottima soluzione per questo tipo di esigenze aziendali in quanto puoi crearle e distribuirle rapidamente. Sapere come crearli può anche essere una grande abilità per gli sviluppatori, sia che creino pagine di destinazione per altri o per progetti personali.

In questo tutorial, ti mostrerò come creare una landing page usando una combinazione di Laravel 8, Vue.js e Twilio SendGrid. È un tutorial abbastanza lungo e, alla fine, sono sicuro che avrai imparato molto.

Prerequisiti

Per completare il tutorial, avrai bisogno delle seguenti 4 cose nel tuo ambiente di sviluppo locale:

    • Esperienza precedente con Laravel (idealmente versione 8.0) e Vue.js (idealmente la serie 3.x)
    • Un account Twilio SendGrid gratuito o a pagamento
    • Compositore installato a livello globale
    • arricciare
    • Node.js e npm
    • PHP 7.4 (con le estensioni cURL , mbstring , intl e OpenSSL installate e abilitate)
    • L'installatore di Laravel

Panoramica dell'applicazione

Prima di immergerci e iniziare a creare l'applicazione, voglio darti un'ampia panoramica del flusso utente dell'applicazione, che puoi vedere nell'immagine qui sotto.

La pagina di destinazione consentirà agli utenti di registrarsi per ricevere notifiche sulle offerte imminenti dal negozio online fittizio che ho creato, The Little PHP Shop, in un recente tutorial di Twilio SendGrid .

L'applicazione avrà due percorsi, / e /signup , entrambi gestiti da un unico controller denominato LandingPageController .

Quando l'utente richiede il percorso predefinito ( / ), vedrà un modulo che chiede loro di fornire il proprio indirizzo e-mail per iscriversi alle notifiche da The Little PHP Shop .

Dopo l'invio, il lato client e server convaliderà il modulo. Se la convalida lato client ha esito positivo, il server riceverà un indirizzo e-mail sotto forma di oggetto JSON . Se la convalida lato server ha esito positivo, l'utente è registrato e riceverà un'e-mail di conferma della registrazione.

A questo punto, il client riceverà una risposta JSON a conferma del successo della registrazione. Quando il client riceve questo, nasconderà il modulo e visualizzerà un messaggio di conferma che tutto è andato bene.

Se la convalida lato server non riesce o se l'utente non riesce a sottoscrivere correttamente, l'utente riceverà anche una risposta JSON. Questa risposta JSON indicherà sia che il processo non è riuscito e perché.

Crea l'applicazione back-end

Bootstrap l'applicazione Laravel

La prima cosa che dobbiamo fare è avviare una nuova applicazione Laravel. Per farlo, esegui il comando seguente. Sentiti libero di utilizzare uno qualsiasi degli altri metodi per eseguire il bootstrap delle applicazioni Laravel, se lo preferisci.

L'applicazione avviata verrà creata in una nuova directory denominata landing-page. Passa alla directory e avvia l'applicazione per verificare che tutto funzioni eseguendo i comandi seguenti. L'app sarà disponibile su localhost sulla porta 8000.

Se l'applicazione è in esecuzione, vedrai una pagina simile allo screenshot qui sotto. Arrestare l'esecuzione dell'applicazione premendo CTRL+C.

Installa i pacchetti richiesti

Con l'applicazione avviata, ora dobbiamo installare 2 pacchetti esterni:

    • s-ichikawa/laravel-sendgrid-driver : per inviare e-mail tramite Twilio SendGrid. Questo perché Laravel non fornisce un trasporto e-mail nativo per Twilio SendGrid. Ho scelto questa libreria perché è l'unico pacchetto progettato specificamente per Laravel.
    • sendgrid/sendgrid : per aggiungere un contatto al nostro elenco di contatti in Twilio SendGrid.

Per installarli, esegui il comando seguente nella directory principale del progetto.

Crea una chiave API

Successivamente, devi fornire all'applicazione la tua chiave API Twilio SendGrid. Per farlo, dopo aver effettuato l'accesso a Twilio SendGrid , vai su "Impostazioni -> Chiavi API ". " Una volta lì:

    1. Fare clic su " Crea chiave API " per creare una chiave API.
    2. Assegna un nome alla nuova chiave API.
    3. Accetta l'autorizzazione chiave API predefinita di " Accesso completo . "
    4. Fare clic su “ Crea e visualizza . "

Dopo aver creato la chiave API, copiala in modo da poterla utilizzare in un passaggio successivo.

Quindi, apri il file .env nella directory principale del progetto e aggiungi la coppia chiave/valore di seguito alla fine del file. Sostituisci YOUR-KEY-HERE con la chiave API che hai creato e copiato. Inoltre, aggiorna 2 chiavi esistenti nel file: MAIL_MAILER a sendgrid e MAIL_FROM_ADDRESS a un indirizzo email a tua scelta.

Nota: Crea un messaggio di posta

Ora è necessario creare una classe inviabile tramite posta che memorizzi l'oggetto dell'e-mail, imposti la visualizzazione per il rendering del corpo dell'e-mail e specifichi il trasporto della posta da utilizzare. Per fare ciò, esegui il comando seguente nella directory principale del progetto.

Un nuovo file, denominato Subscribed.php, verrà creato in app/Mail . Copia e incolla il codice qui sotto al posto del codice esistente del file.

La maggior parte dell'azione in un mailable avviene nel metodo build , che chiama una serie di altri metodi da impostare:

    • Il template da renderizzare per creare il corpo dell'email ( view )
    • L'oggetto dell'email ( subject )

Il metodo build termina chiamando sendgrid , che assicura che il trasporto Twilio SendGrid invii l'e-mail.

Crea il controller della pagina di destinazione

Ora è il momento di creare un controller per gestire le richieste ai 2 percorsi dell'applicazione. Per farlo, esegui il comando seguente. Al termine del comando, verrà creato un nuovo file, denominato LandingPageController.php, in app/Http/Controllers .

Con il file creato, apri app/Http/Controllers/LandingPageController.php e aggiungi 2 metodi ad esso. Innanzitutto, il metodo show dall'esempio seguente, quindi il metodo di iscrizione . Ho collegato il metodo di signup in quanto è un po' troppo lungo per includerlo direttamente nell'articolo.

Successivamente, aggiungi le seguenti istruzioni di utilizzo per il metodo di signup .

Salterò il metodo di show , poiché dovrebbe essere autoesplicativo, e mi immergerò nel metodo di signup . Il metodo inizia utilizzando la facciata del validatore di Laravel per convalidare i dati inviati nella richiesta, recuperati chiamando $request->all() , rispetto a un set di regole di convalida con il risultato archiviato in $validator .

Per superare la convalida , il corpo della richiesta deve contenere un elemento denominato email il cui valore è un indirizzo email legittimo. Inoltre, ho aggiunto le regole di convalida Request For Comment (RFC) e Domain Name System (DNS) specifiche dell'e-mail perché:

    • La convalida RFC garantisce che l'e-mail sia valida in base alla RFC e-mail. Tuttavia, anche se supera tale convalida, l'e-mail potrebbe non essere universalmente instradabile, come matthew o matthew@lan .
    • La convalida DNS garantisce che l'indirizzo e-mail non contenga nomi DNS di primo livello riservati o mDNS e spazi dei nomi DNS privati, come test , local , lan , intranet e internal .

Nota: Se il risultato della chiamata al metodo fails restituisce false , viene restituito un oggetto JSON che contiene un elenco di errori di convalida del modulo. Questi sono recuperabili chiamando il metodo degli errors di $validator . Inoltre, il codice di stato della risposta è impostato su 422 per mostrare che la richiesta non era elaborabile.

Se la convalida è riuscita, tuttavia, è il momento di aggiungere l'indirizzo e-mail alla nostra lista di contatti. Per farlo, devi avviare un nuovo oggetto SendGrid , che richiede la nostra chiave API Twilio SendGrid che hai recuperato dalla variabile di ambiente 'SENDGRID_API_KEY' .

Successivamente, viene inviata una richiesta PUT all'endpoint /marketing/contacts/ dell'API Twilio SendGrid . A tale richiesta passa un array di contatti, anche se con un solo contatto in cui specifichiamo l'indirizzo email del nuovo contatto.

Se il codice di stato della risposta non è 202, allora sappiamo che qualcosa è andato storto. Se ciò accade, una risposta JSON ritorna al client contenente 3 proprietà:

    • status : impostato su false
    • message : impostato su "abbonamento non riuscito"
    • reason : inizializzato con gli errori restituiti dalla chiamata dell'API Twilio SendGrid

Se l'utente è stato aggiunto con successo al nostro elenco di contatti, è il momento di inviargli un'e-mail di conferma. Per fare ciò, il codice utilizza due metodi sulla facciata della posta di Laravel to impostare il destinatario e send per inviare l'e-mail.

Recupera il destinatario dall'indirizzo email inviato nel corpo della richiesta, recuperato facilmente chiamando il metodo di input di $request . Il resto delle proprietà dell'e-mail si trova in Sottoscritto, l'oggetto inviabile tramite posta che abbiamo creato in precedenza e passato al metodo di send della facciata della posta.

Il tentativo di inviare l'e-mail è racchiuso in un blocco try/catch, nel caso in cui si verificasse un problema nell'invio dell'e-mail, come il tentativo di inviare da un indirizzo e-mail che non è elencato come " Verificato " nella " Verifica mittente singolo " tavolo.

Se si verifica un errore, viene restituita una risposta JSON al client contenente 3 proprietà, simili a prima:

    • status : impostato su false
    • message : Imposta su "registrazione fallita"
    • reason : Inizializzato con il messaggio dell'eccezione

A questo punto tutto è riuscito, quindi è il momento di farlo sapere all'utente. Il codice lo fa restituendo nuovamente una risposta JSON, ma questa volta con solo 2 proprietà: status impostato su true e message impostato su " registrazione completata ".

È piccolo ma efficace !

Nota: Crea i modelli richiesti

Ora è il momento di creare i modelli che utilizzerà la nostra app. In risorse/viste creeremo 2 directory ( e -mail e layout ) e 3 file ( landing.blade.php , email/subscribed.blade.php e layouts/app.blade.php ).

Ecco una rapida rappresentazione visiva della struttura di file e directory che creeremo.

Ho scelto questa struttura principalmente perché amo il modello Two-Step View . Se non hai familiarità con esso, divide essenzialmente le viste in 2 parti. C'è una parte per qualsiasi contenuto coerente in tutte le richieste ( layouts/app.blade.php ) e una parte per il contenuto specifico della richiesta ( landing.blade.php ).

Potrebbe sembrare eccessivo su un'applicazione così piccola, ma ho scoperto che questo approccio semplifica la creazione di modelli più gestibili.

Eseguire i comandi seguenti per creare la struttura di file e directory.

Nota: Aggiorna risorse/viste/layout/app.blade.php

Apri resources/views/layouts/app.blade.php e incolla il codice qui sotto. La maggior parte è un codice modello Laravel piuttosto standard , che puoi trovare in resources/views/welcome.blade.php .

Tuttavia, vale la pena notare gli ultimi 2 tag nella sezione head. Qui colleghiamo il foglio di stile CSS che creeremo più avanti nel tutorial e memorizziamo un token CSRF , che Laravel genererà per noi (ne parleremo più avanti) come meta tag.

Non toccheremo ora resources/views/landing.blade.php e resources/views/email/subscribed.blade.php , poiché le tratteremo più avanti nel tutorial.

Aggiorna la tabella di instradamento

Abbiamo solo bisogno di apportare 2 modifiche alla tabella di instradamento: per cambiare il gestore del percorso predefinito e aggiungere un nuovo percorso per gestire le iscrizioni. Per fare ciò, sostituisci il percorso esistente in rotte/web.php con il codice seguente.

Inoltre, aggiungi anche l'istruzione use per LandingPageController:

Aggiorna la configurazione di Laravel

Con i percorsi definiti, ora dobbiamo aggiornare 3 dei file di configurazione principali di Laravel: config/cors.php , config/mail.php e config/services.php .

Aggiorna config/cors.php

Il primo file che dobbiamo aggiornare è config/cors.php . Questo è così che le richieste XHR che facciamo nel front-end Vue.js possono inviare richieste con successo all'app Laravel back-end.

Per abilitarlo, aggiorna l'array dell'elemento paths nell'array restituito in config/cors.php in modo che corrisponda al codice di esempio seguente.

Aggiorna config/mail.php

Successivamente, dobbiamo aggiornare config/mail.php per registrare sendgrid come trasporto di posta valido. Per fare ciò, aggiungi la configurazione seguente all'array dell'elemento mailers alla fine dell'elenco di trasporti esistente.

Aggiorna config/services.php

L'ultima modifica che dobbiamo apportare è config/services.php , per registrare sendgrid come servizio con il contenitore Dependency Injection (DI) di Laravel. Per fare ciò, aggiungi la configurazione seguente alla fine dell'array restituito nel file.

Crea l'applicazione Vue.js

Ora che abbiamo creato il back-end dell'applicazione, è il momento di creare l'applicazione Vue.js front-end. Prima di poterlo fare, dobbiamo installare diverse dipendenze.

Fortunatamente, non ce ne sono molti, solo Vue.js e Laravel Mix , con supporto per Tailwind CSS , PostCSS e Lodash , per semplificare la costruzione del front-end.

Per installarli, esegui i comandi seguenti nella directory principale del progetto.

Aggiorna risorse/viste/landing.blade.php

Non ho incluso il contenuto completo di resources/views/email/landing.blade.php poiché è piuttosto lungo e occuperebbe troppo spazio qui nell'articolo. Puoi trovarlo nel repository GitHub per questo progetto. Copia e incolla il contenuto nel modello.

Passerò in rassegna le parti più rilevanti del file. Per prima cosa, visualizzeremo cosa sta succedendo nel file in modo che sia più facile apprezzare cosa sta succedendo.

Stiamo creando una piccola applicazione Vue.js, chiamata app , composta da 2 parti:

    1. Il modulo della pagina di destinazione che l'utente vede quando atterra inizialmente sulla pagina
    2. Una conferma successiva all'invio che appare al posto del modulo dopo un invio corretto del modulo

Iniziamo con il modulo della pagina di destinazione. Contiene 2 parti:

    1. Un'intestazione e una descrizione di marketing per convincere il lettore a fornire il proprio indirizzo email
    2. Un modulo che l'utente può compilare e inviare, che può generare errori quando l'invio del modulo non riesce a convalidare o la richiesta lato server non riesce

La sezione direttamente sotto è la prima parte. Non c'è molto da fare, ad eccezione della direttiva V-show , che mostra condizionatamente l'elemento se submitted è true .

La sezione successiva utilizza un componente Vue.js personalizzato, error-item , per ridurre la quantità di codice richiesta nel modello e rendere più gestibile il rendering dell'errore. Discuteremo di questo componente a breve.

Questa sezione utilizza una direttiva V-if per eseguire il rendering condizionale dell'elemento in base alla presenza di errori o meno. Utilizza l'attributo @submit.prevent di Vue.js per passare il controllo del normale processo di invio dei moduli al metodo processForm . Utilizza la direttiva Blade CSRF di Laravel per eseguire il rendering di un token CSRF in un campo modulo nascosto.

Un'altra cosa degna di nota è la direttiva V-model nel campo di input dell'e-mail, v-model="form.email" . Questo crea un collegamento a 2 vie tra l'elemento form e la proprietà form.email nel codice JavaScript. Torneremo su questo a breve.

Nota: L'ultima sezione contiene il messaggio di conferma che verrà visualizzato al termine dell'invio del modulo. Possiamo mantenerlo semplice semplicemente specificando un'intestazione e un corpo del testo.

Crea il codice JavaScript

Successivamente, lavoreremo tramite JavaScript che alimenterà il front-end. È un po' lungo, quindi copia il codice dal repository GitHub e incollalo al posto del codice esistente in resources/js/app.js . Quindi, lo analizzeremo.

Il codice inizia definendo sendGridApp , che costituisce la base della nostra applicazione Vue.js e contiene 3 proprietà di dati:

    • errors : questo è un elenco di errori di convalida del modulo
    • form.email : memorizza l'indirizzo e-mail fornito dall'utente
    • submitted : determina se il modulo è stato inviato con successo o meno. Se è false , verrà visualizzato il modulo. Se è true , al posto del modulo verrà visualizzato il messaggio di conferma

Successivamente, definiamo i metodi di sendGridApp . A partire da processForm , attivato dall'invio del modulo, possiamo verificare se l'e-mail è impostata. In caso contrario, imposta un messaggio di errore e restituisce false in modo che l'invio del modulo venga interrotto. In tal caso, chiama subscribeUser per iscrivere l'utente all'elenco.

subscribeUser effettua una richiesta POST a /signup , con un corpo JSON, contenente una copia con codifica JSON del modulo inviato.

Le intestazioni delle richieste sono importanti da notare. Questo perché garantiscono che Laravel interpreti la richiesta come una richiesta XHR, non un normale invio di un modulo ( Content-Type e Accept ) e che la richiesta sia valida perché ha un token CSRF ( X-CSRF-TOKEN ).

Se dovessimo creare un'applicazione puramente lato server utilizzando solo modelli Blade, avremmo solo bisogno di includere la direttiva CSRF di Blade e Blade farebbe il resto. Tuttavia, non è così semplice con JavaScript.

Il codice usa il metodo then di Promise per recuperare il JSON nella risposta (se la richiesta ha avuto esito positivo) o genera un errore (se non ha avuto successo). Se la richiesta ha esito positivo, viene chiamato il metodo then .

Qui, viene impostato su submitted , che fa diverse cose:

    • Nasconde il modulo
    • Visualizza il messaggio di conferma
    • Cancella l'indirizzo email inserito nel modulo

Infine, se qualcosa va storto, rileva l'errore e lo registra nella Console.

Infine, viene creata una nuova app Vue.js, denominata app , con il const che abbiamo appena definito. Il codice di creazione dell'app definisce un piccolo componente per il rendering degli errori di modulo e monta l'app.

Crea il foglio di stile

Successivamente, in resources/css/app.css , aggiungi il codice seguente. Include gli stili di base , components e utilities di Tailwind e crea diversi stili di base aggiuntivi per alcuni elementi comuni nei modelli di vista.

Aggiorna risorse/viste/email/subscribed.blade.php

Non ho incluso il contenuto completo di resources/views/email/subscribed.blade.php , poiché è piuttosto lungo e occuperebbe troppo spazio qui nell'articolo. Puoi trovarlo nel repository GitHub per questo progetto. Copialo e incolla il contenuto nel modello.

Ora esamineremo le parti più rilevanti del file.

Il modello estende resources/views/layouts/app.blade.php , impostando il contenuto per la sezione del content durante il rendering. Il contenuto stesso è relativamente semplice, basta ringraziare l'utente per l'iscrizione e terminare fornendo all'utente un collegamento per annullare l'iscrizione.

Crea l'applicazione front-end

A questo punto, siamo quasi pronti per testare l'app. Tuttavia, prima di poterlo fare, dobbiamo creare il front-end e i suoi file di supporto. Fortunatamente, Laravel Mix lo rende piuttosto banale. Per iniziare, dobbiamo aggiornare un file di configurazione e creare un secondo file di configurazione.

Aggiorna webpack.mix.js

Poiché Laravel Mix viene fornito in bundle con Laravel, il suo file di configurazione, webpack.mix.js, è già disponibile e contiene una configurazione di base.

Tuttavia, dobbiamo fare 2 aggiunte. La prima aggiunta supporta Laravel Mix per i componenti a file singolo di Vue.js. La seconda aggiunta supporta Tailwind CSS . Aggiungi le modifiche evidenziate di seguito a webpack.mix.js .

Crea tailwind.config.js

Poiché stiamo usando Tailwind CSS per lo stile del front-end e poiché abbiamo appena aggiunto il supporto per esso al file di configurazione di Laravel Mix, dobbiamo fornire il file di configurazione tailwind.config.js per compilarlo correttamente.

Crea un nuovo file denominato tailwind.config.js nella directory principale del progetto, quindi copia e incolla il codice seguente al suo interno.

Questo indica a PostCSS di analizzare tutti i file PHP, Blade, JavaScript e Vue.js nelle directory precedenti e di creare un elenco di tutti gli stili CSS di Tailwind ivi scoperti. Usando quell'elenco, elimina tutti gli stili inutilizzati dal foglio di stile CSS di Tailwind predefinito, generando un foglio di stile di circa 20,5 KB di dimensione.

Questo è utile perché il file predefinito non compresso ha una dimensione di 3566,2 KB . Questo è troppo grande per un sito Web che deve essere performante.

Con i file in posizione e configurati, nel terminale nella directory principale del progetto, eseguire il comando seguente.

Questo comando esegue Laravel Mix dicendogli di:

    1. Genera public/js/app.js da resources/js/app.js
    2. Genera public/css/app.css da resources/css/app.css

Questo dovrebbe richiedere solo pochi secondi per completare e rendere quanto segue sul terminale.

Testare l'applicazione

Con il codice in atto e tutto cablato, è tempo di testare che funzioni correttamente. Per farlo, avvia l'applicazione eseguendo il comando seguente.

Quindi, apri http://localhost:8000 nel tuo browser preferito. Prima di compilare il modulo, apri gli Strumenti per sviluppatori e passa alla scheda Console . Con tutto pronto, compila il modulo con un indirizzo email valido.

Dovresti vedere il modulo nascosto e sostituito dal messaggio di conferma. Controlla la tua casella di posta per l'e-mail di conferma. Quindi, visualizza l' elenco Tutti i contatti per confermare che l'utente è stato iscritto correttamente. In caso di successo, dovresti vederli elencati, in modo simile allo screenshot qui sotto.

Ora riprova facendo clic sul collegamento "Ricomincia" e inviando il modulo senza inserire un indirizzo e-mail o dopo aver inserito un indirizzo e-mail non valido. Dovrebbe essere visualizzato un messaggio di errore applicabile.

Ecco come creare una landing page usando Laravel 8, Vue.js e Twilio SendGrid

Abbiamo spiegato come trasformare un sito Laravel 8 standard in una pagina di destinazione di base, che può iscrivere un utente a una mailing list quando invia il proprio indirizzo e-mail.

Pur non ponendo molta enfasi su di esso, abbiamo anche utilizzato Laravel Mix e Tailwind CSS per semplificare il processo di creazione di un front-end personalizzato e performante per la nostra applicazione.

Se desideri saperne di più su ciò che rende un'ottima pagina di destinazione, dai un'occhiata a questo articolo di Copyblogger . Altrimenti, puoi trovare tutto il codice per l'applicazione che costruiamo in questa serie su GitHub .

Matthew Setter è un editor PHP nel team di Twilio Voices e (naturalmente) uno sviluppatore PHP. È anche autore di Mezzio Essentials . Quando non scrive codice PHP, pubblica ottimi articoli PHP qui su Twilio. Puoi trovarlo all'indirizzo msetter@twilio.com ed è settermjd su Twitter e GitHub .