Cum se creează o pagină de destinație cu Laravel, Vue.js și Twilio SendGrid

Publicat: 2021-05-27

Acest tutorial a apărut inițial pe blogul Twilio.

Paginile de destinație sunt peste tot în afacerile moderne.

Companiile le folosesc pentru a oferi un cadou gratuit în schimbul cuiva care se alătură unei liste de corespondență, pentru a vinde un produs sau serviciu și ca CV-uri glorificate.

Paginile de destinație sunt o soluție excelentă pentru aceste tipuri de nevoi de afaceri, deoarece le puteți crea și implementa rapid. A ști cum să le creeze poate fi, de asemenea, o abilitate excelentă pentru dezvoltatori, fie că creează pagini de destinație pentru alții sau pentru proiecte personale.

În acest tutorial, vă voi arăta cum să creați o pagină de destinație folosind o combinație de Laravel 8, Vue.js și Twilio SendGrid. Este un tutorial destul de lung și, până la sfârșitul lui, sunt încrezător că veți învăța multe.

Cerințe preliminare

Pentru a finaliza tutorialul, veți avea nevoie de următoarele 4 lucruri în mediul dvs. de dezvoltare locală:

    • Experiență anterioară cu Laravel (ideal versiunea 8.0) și Vue.js (ideal seria 3.x)
    • Un cont Twilio SendGrid gratuit sau plătit
    • Composer instalat la nivel global
    • răsuci
    • Node.js și npm
    • PHP 7.4 (cu extensiile cURL , mbstring , intl și OpenSSL instalate și activate)
    • Programul de instalare Laravel

Prezentare generală a aplicației

Înainte de a ne aprofunda și de a începe construirea aplicației, vreau să vă ofer o privire de ansamblu asupra fluxului de utilizatori al aplicației, pe care o puteți vedea în imaginea de mai jos.

Pagina de destinație va permite utilizatorilor să se înscrie pentru notificări despre ofertele viitoare de la magazinul online fictiv pe care l-am creat - Micul PHP Shop - într- un tutorial recent Twilio SendGrid .

Aplicația va avea două rute, / și /signup , ambele gestionate de un singur controler numit LandingPageController .

Când utilizatorul solicită ruta implicită ( / ), va vedea un formular care îi cere să furnizeze adresa de e-mail pentru a se înscrie pentru notificări de la The Little PHP Shop .

După trimitere, partea de client și server va valida formularul. Dacă validarea la nivelul clientului are succes, serverul va primi o adresă de e-mail sub forma unui obiect JSON . Dacă validarea pe server trece, utilizatorul este înregistrat și va primi un e-mail de confirmare a înregistrării.

În acest moment, clientul va primi un răspuns JSON care confirmă succesul înregistrării. Când clientul primește acest lucru, va ascunde formularul și va afișa un mesaj care confirmă că totul a mers bine.

Dacă validarea pe server eșuează sau dacă utilizatorul nu se poate abona cu succes, utilizatorul va primi și un răspuns JSON. Acest răspuns JSON va indica atât faptul că procesul a eșuat, cât și de ce.

Creați aplicația back-end

Bootstrap aplicația Laravel

Primul lucru pe care trebuie să-l facem este să pornim o nouă aplicație Laravel. Pentru a face asta, executați comanda de mai jos. Simțiți-vă liber să utilizați oricare dintre celelalte metode de bootstrapping a aplicațiilor Laravel, dacă le preferați.

Aplicația bootstrap va fi creată într-un nou director numit landing-page. Treceți în director și porniți aplicația pentru a verifica dacă totul funcționează rulând comenzile de mai jos. Aplicația va fi disponibilă pe localhost pe portul 8000.

Dacă aplicația rulează, veți vedea o pagină similară cu captura de ecran de mai jos. Opriți rularea aplicației apăsând CTRL+C.

Instalați pachetele necesare

Cu aplicația bootstrap, acum trebuie să instalăm 2 pachete externe:

    • s-ichikawa/laravel-sendgrid-driver : Pentru a trimite e-mailuri prin Twilio SendGrid. Acest lucru se datorează faptului că Laravel nu oferă un transport de e-mail nativ pentru Twilio SendGrid. Am ales această bibliotecă deoarece este singurul pachet conceput special pentru Laravel.
    • sendgrid/sendgrid : pentru a adăuga un contact la lista noastră de contacte din Twilio SendGrid.

Pentru a le instala, executați comanda de mai jos în directorul rădăcină al proiectului.

Creați o cheie API

Apoi, trebuie să furnizați aplicației cheia dvs. API Twilio SendGrid. Pentru a face acest lucru, după ce vă conectați la Twilio SendGrid , navigați la „Setări -> Chei API . " Odata acolo:

    1. Faceți clic pe „ Creare cheie API ” pentru a crea o cheie API.
    2. Dați un nume noii chei API.
    3. Acceptați permisiunea implicită a cheii API de „ Acces complet . ”
    4. Faceți clic pe „ Creați și vizualizați ” . ”

După ce creați cheia API, copiați-o pentru a o putea folosi într-un pas ulterior.

Apoi, deschideți fișierul .env în directorul rădăcină al proiectului și adăugați perechea cheie/valoare de mai jos la sfârșitul fișierului. Înlocuiți YOUR-KEY-HERE cu cheia API pe care ați creat-o și ați copiat-o. În plus, actualizați 2 chei existente în fișier: MAIL_MAILER la sendgrid și MAIL_FROM_ADDRESS la o adresă de e-mail la alegerea dvs.

Notă: Creați un emailable

Acum trebuie să creăm o clasă care poate fi trimisă prin e-mail, care va stoca subiectul e-mailului, va seta vizualizarea pentru a reda corpul e-mailului și va specifica transportul de e-mail de utilizat. Pentru a face asta, executați comanda de mai jos în directorul rădăcină al proiectului.

Un fișier nou, denumit Subscribed.php, va fi creat în app/Mail . Copiați și inserați codul de mai jos în locul codului existent al fișierului.

Cea mai mare parte a acțiunii dintr-un mailable are loc în metoda build , care apelează o serie de alte metode pentru a seta:

    • Șablonul de randat pentru a crea corpul e-mailului ( view )
    • Subiectul e-mailului ( subject )

Metoda de compilare build termină prin apelarea sendgrid , care asigură că transportul Twilio SendGrid trimite e-mailul.

Creați controlerul paginii de destinație

Acum este timpul să creați un controler care să gestioneze cererile către cele 2 rute ale aplicației. Pentru a face asta, executați comanda de mai jos. Când comanda este completă, un fișier nou, numit LandingPageController.php, va fi creat în app/Http/Controllers .

Cu fișierul creat, deschideți app/Http/Controllers/LandingPageController.php și adăugați-i 2 metode. În primul rând, metoda de show din exemplul de mai jos, apoi metoda de înscriere . Am făcut link la metoda de signup , deoarece este puțin prea lungă pentru a o include direct în articol.

După aceea, adăugați următoarele instrucțiuni de utilizare pentru metoda de signup .

Voi trece peste metoda de show , deoarece ar trebui să se explice de la sine și voi aborda metoda de signup . Metoda începe folosind fațada validatorului Laravel pentru a valida datele trimise în cerere, preluate prin apelarea $request->all() , față de un set de reguli de validare cu rezultatul stocat în $validator .

Pentru a trece validarea , corpul cererii trebuie să conțină un element numit email a cărui valoare este o adresă de e-mail legitimă. În plus, am adăugat regulile de validare pentru Cererea de comentarii (RFC) și Sistemul de nume de domeniu (DNS) specifice pentru e-mail deoarece:

    • Validarea RFC asigură că e-mailul este valid în conformitate cu RFC de e-mail. Cu toate acestea, chiar dacă trece acea validare, e-mailul poate să nu fie rutabil la nivel universal, cum ar fi matthew sau matthew@lan .
    • Validarea DNS asigură că adresa de e-mail nu conține nume DNS de nivel superior rezervate sau mDNS și spații de nume DNS private, cum ar fi test , local , lan , intranet și internal .

Notă: Dacă rezultatul apelării metodei fails returnează false , se întoarce un obiect JSON care conține o listă de erori de validare a formularelor. Acestea pot fi recuperate apelând metoda errors $validator . În plus, codul de stare al răspunsului este setat la 422 pentru a arăta că cererea nu a fost procesabilă.

Dacă validarea a reușit, totuși, este timpul să adăugați adresa de e-mail la lista noastră de contacte. Pentru a face acest lucru, trebuie să inițiați un nou obiect SendGrid , care necesită cheia noastră API Twilio SendGrid pe care ați preluat-o din variabila de mediu 'SENDGRID_API_KEY' .

După aceea, o solicitare PUT este trimisă către punctul final Twilio SendGrid API /marketing/contacts/ . La această solicitare, trece o serie de contacte, deși cu o singură persoană de contact la care specificăm adresa de e-mail a noului contact.

Dacă codul de stare al răspunsului nu este 202, atunci știm că ceva a mers prost. Dacă se întâmplă acest lucru, un răspuns JSON se întoarce la client care conține 3 proprietăți:

    • status : Setat la false
    • message : Setați la „abonament eșuat”
    • reason : Inițializat cu erorile returnate de la apelul API Twilio SendGrid

Dacă utilizatorul a fost adăugat cu succes la lista noastră de contacte, este timpul să îi trimitem un e-mail de confirmare. Pentru a face acest lucru, codul folosește două metode de pe fațada de e- mail a lui Laravel to a seta destinatarul și a send pentru a trimite e-mailul.

Preluați destinatarul de la adresa de e-mail trimisă în corpul solicitării, preluată cu ușurință apelând metoda de input a lui $request . Restul proprietăților e-mailului se află în Subscribed, obiectul pe care l-am creat anterior și transmis la metoda de send a fațadei de e-mail.

Încercarea de a trimite e-mailul este încadrată într-un bloc try/catch, doar în cazul în care există o problemă la trimiterea e-mailului, cum ar fi încercarea de a trimite de la o adresă de e-mail care nu este listată ca „ Verificată ” în „ Verificarea unui singur expeditor ”. masa.

Dacă există o eroare, un răspuns JSON se întoarce la client care conține 3 proprietăți, similar cu cel de mai înainte:

    • status : Setat la false
    • message : Setați la „înregistrarea eșuată”
    • reason : Inițializat cu mesajul excepției

În acest moment, totul a reușit, așa că este timpul să anunțați utilizatorul. Codul face asta returnând din nou un răspuns JSON, dar de data aceasta cu doar 2 proprietăți: status setată la true și message setat la „ înregistrarea este finalizată ”.

Este mic, dar eficient !

Notă: Există Creați șabloanele necesare

Acum este timpul să creăm șabloanele pe care aplicația noastră le va folosi. Sub resurse/vizualizări , vom crea 2 directoare ( e- mail și machete ) și 3 fișiere ( landing.blade.php , email/subscribed.blade.php și layouts/app.blade.php ).

Iată o reprezentare vizuală rapidă a structurii de fișiere și directoare pe care o vom crea.

Am ales această structură în primul rând pentru că îmi place modelul de vizualizare în doi pași . Dacă nu sunteți familiarizat cu el, în esență împarte vederile în 2 părți. Există o parte pentru orice conținut care este consecvent pentru toate solicitările ( layouts/app.blade.php ) și o parte pentru conținutul care este specific cererii ( landing.blade.php ).

Ar putea părea exagerat pentru o aplicație atât de mică, dar am descoperit că această abordare face mai ușor să creeze șabloane mai ușor de întreținut.

Rulați comenzile de mai jos pentru a crea structura de fișiere și directoare.

Notă: Actualizați resurse/views/layouts/app.blade.php

Deschideți resurse/views/layouts/app.blade.php și inserați codul de mai jos în el. Cea mai mare parte este un cod de șablon Laravel destul de standard , pe care îl puteți găsi în resources/views/welcome.blade.php .

Ultimele 2 etichete din secțiunea head merită totuși remarcate. Aici, legăm foaia de stil CSS pe care o vom crea mai târziu în tutorial și stocăm un token CSRF , pe care Laravel îl va genera pentru noi (mai multe despre asta în curând) ca metaetichetă.

Nu vom atinge acum resurse/views/landing.blade.php și resources/views/email/subscribed.blade.php , deoarece le vom acoperi mai târziu în tutorial.

Actualizați tabelul de rutare

Trebuie doar să facem 2 modificări în tabelul de rutare: să schimbăm gestionarea rutei implicite și să adăugăm o nouă rută pentru a gestiona înscrierile. Pentru a face asta, înlocuiți ruta existentă în routes/web.php cu codul de mai jos.

De asemenea, adăugați declarația de utilizare și pentru LandingPageController:

Actualizați configurația lui Laravel

Cu rutele definite, acum trebuie să actualizăm 3 dintre fișierele de configurare de bază ale Laravel: config/cors.php , config/mail.php și config/services.php .

Actualizați config/cors.php

Primul fișier pe care trebuie să îl actualizăm este config/cors.php . Acest lucru este pentru ca solicitările XHR pe care le facem în front-end-ul Vue.js să poată face cu succes cereri către aplicația Laravel back-end.

Pentru a activa acest lucru, actualizați matricea elementului paths din matricea returnată în config/cors.php , astfel încât să se potrivească cu exemplul de cod de mai jos.

Actualizați config/mail.php

Apoi, trebuie să actualizăm config/mail.php pentru a înregistra sendgrid ca transport de e-mail valid. Pentru a face acest lucru, adăugați configurația de mai jos la matricea elementului mailers la sfârșitul listei existente de transporturi.

Actualizați config/services.php

Ultima modificare pe care trebuie să o facem este config/services.php , pentru a înregistra sendgrid ca serviciu cu Containerul Dependency Injection (DI) al Laravel. Pentru a face asta, adăugați configurația de mai jos la sfârșitul matricei returnate în fișier.

Creați aplicația Vue.js

Acum că am creat back end-ul aplicației, este timpul să creăm aplicația front-end Vue.js. Înainte de a putea face asta, trebuie să instalăm mai multe dependențe.

Din fericire, nu sunt atât de multe, doar Vue.js și Laravel Mix , cu suport pentru Tailwind CSS , PostCSS și Lodash , pentru a simplifica construirea front-end-ului.

Pentru a le instala, executați comenzile de mai jos în directorul rădăcină al proiectului.

Actualizați resurse/views/landing.blade.php

Nu am inclus conținutul complet al resurselor/views/email/landing.blade.php , deoarece este destul de lung și ar ocupa prea mult spațiu aici în articol. Îl puteți găsi în depozitul GitHub pentru acest proiect. Copiați și inserați conținutul în șablon.

Voi trece prin cele mai relevante părți ale fișierului. În primul rând, vom vizualiza ce se întâmplă în fișier, astfel încât să fie mai ușor să apreciem ce se întâmplă.

Creăm o mică aplicație Vue.js, numită app , compusă din 2 părți:

    1. Formularul paginii de destinație pe care îl vede utilizatorul când aterizează inițial pe pagină
    2. O confirmare ulterioară trimiterii care apare în locul formularului după trimiterea cu succes a formularului

Să începem cu formularul paginii de destinație. Contine 2 parti:

    1. Un antet și o descriere de marketing pentru a convinge cititorul să-și furnizeze adresa de e-mail
    2. Un formular pe care utilizatorul îl poate completa și trimite, care poate genera erori atunci când trimiterea formularului nu reușește validarea sau cererea de pe server eșuează

Secțiunea de mai jos este prima parte. Nu este mare lucru, cu excepția directivei V-show , care afișează condiționat elementul dacă submitted este true .

Următoarea secțiune folosește o componentă personalizată Vue.js, error-item , pentru a reduce cantitatea de cod necesară în șablon și pentru a face redarea erorii mai ușor de întreținut. Vom discuta despre această componentă în curând.

Această secțiune folosește o directivă V-if pentru a reda în mod condiționat elementul în funcție de faptul că există sau nu erori. Utilizează atributul @submit.prevent din Vue.js pentru a transmite controlul procesului normal de trimitere a formularelor către metoda processForm . Utilizează directiva Blade CSRF a lui Laravel pentru a reda un token CSRF într-un câmp de formular ascuns.

Un alt lucru care merită remarcat este directiva V-model din câmpul de introducere a e-mailului, v-model="form.email" . Acest lucru creează o legătură bidirecțională între elementul formular și proprietatea form.email din codul JavaScript. Vom reveni la asta în curând.

Notă: Secțiunea finală conține mesajul de confirmare care va fi afișat la trimiterea cu succes a formularului. O putem menține simplă specificând un antet și un text de corp.

Creați codul JavaScript

În continuare, vom lucra prin JavaScript care va alimenta front-end-ul. Este puțin lung, așa că copiați codul din depozitul GitHub și inserați-l în locul codului existent în resources/js/app.js . Apoi, vom trece prin asta.

Codul începe prin definirea sendGridApp , care formează baza aplicației noastre Vue.js și conține 3 proprietăți de date:

    • errors : Aceasta este o listă de erori de validare a formularelor
    • form.email : Aceasta stochează adresa de e-mail pe care o furnizează utilizatorul
    • submitted : Aceasta determină dacă formularul a fost trimis cu succes sau nu. Dacă este false , se va afișa formularul. Dacă este true , atunci mesajul de confirmare se va afișa în locul formularului

În continuare, definim metodele sendGridApp . Începând cu processForm , declanșat de la trimiterea formularului, putem verifica dacă e-mailul este setat. Dacă nu a făcut-o, setează un mesaj de eroare și returnează false, astfel încât trimiterea formularului se oprește. Dacă da, atunci apelează subscribeUser pentru a abona utilizatorul la listă.

subscribeUser face o solicitare POST către /signup , cu un corp JSON, care conține o copie codificată în JSON a formularului trimis.

Este important de reținut anteturile cererii. Acest lucru se datorează faptului că se asigură că Laravel interpretează cererea ca o solicitare XHR, nu o trimitere normală a formularului ( Content-Type and Accept ) și că cererea este validă deoarece are un token CSRF ( X-CSRF-TOKEN ).

Dacă am construi o aplicație pur pe partea de server folosind doar șabloane Blade, atunci ar trebui să includem doar directiva CSRF a Blade , iar Blade s-ar ocupa de restul. Cu toate acestea, nu este chiar atât de simplu cu JavaScript.

Codul folosește metoda Promise pentru then prelua JSON din răspuns (dacă cererea a avut succes) sau afișează o eroare (dacă nu a avut succes). Dacă cererea are succes then următoarea metodă este apelată.

Aici, se setează submitted la adevărat, ceea ce face mai multe lucruri:

    • Ascunde formularul
    • Afișează mesajul de confirmare
    • Șterge adresa de e-mail introdusă în formular

În cele din urmă, dacă ceva nu merge bine, prinde eroarea și o înregistrează în Consolă.

În cele din urmă, este creată o nouă aplicație Vue.js, numită app , cu const pe care tocmai am definit-o. Codul de creare a aplicației definește o componentă mică pentru redarea erorilor de formular și montează aplicația.

Creați foaia de stil

Apoi, în resources/css/app.css , adăugați codul de mai jos. Include stilurile de base , components și utilities ale lui Tailwind și creează mai multe stiluri de bază suplimentare pentru unele elemente care sunt comune în șabloanele de vizualizare.

Actualizați resurse/views/email/subscribed.blade.php

Nu am inclus întregul conținut al resurselor/views/email/subscribed.blade.php , deoarece este destul de lung și ar ocupa prea mult spațiu aici în articol. Îl puteți găsi în depozitul GitHub pentru acest proiect. Copiați-l și inserați conținutul în șablon.

Acum, vom trece prin cele mai relevante părți ale fișierului.

Șablonul extinde resurse/views/layouts/app.blade.php , prin setarea conținutului pentru secțiunea de content atunci când este redat. Conținutul în sine este relativ simplu, doar mulțumind utilizatorului pentru abonare și se încheie prin a oferi utilizatorului un link pentru a se dezabona.

Creați aplicația front-end

În acest moment, suntem aproape pregătiți să testăm aplicația. Cu toate acestea, trebuie să construim front-end-ul și fișierele sale de suport înainte de a putea face asta. Cu bucurie, Laravel Mix face acest lucru destul de banal. Pentru a începe, trebuie să actualizăm un fișier de configurare și să creăm un al doilea fișier de configurare.

Actualizați webpack.mix.js

Deoarece Laravel Mix vine la pachet cu Laravel, fișierul său de configurare, webpack.mix.js, este deja disponibil și conține o configurație de bază.

Cu toate acestea, trebuie să facem 2 completări. Prima adăugare acceptă componentele cu un singur fișier Laravel Mix pentru Vue.js. A doua adăugare acceptă Tailwind CSS . Adăugați modificările evidențiate mai jos la webpack.mix.js .

Creați tailwind.config.js

Deoarece folosim Tailwind CSS pentru a stila front-end-ul și pentru că tocmai am adăugat suport pentru acesta în fișierul de configurare al lui Laravel Mix, trebuie să furnizăm fișierul de configurare tailwind.config.js pentru al construi corect.

Creați un fișier nou numit tailwind.config.js în directorul rădăcină al proiectului, apoi copiați și inserați codul de mai jos în el.

Acest lucru indică PostCSS să analizeze toate fișierele PHP, Blade, JavaScript și Vue.js din directoarele de mai sus și să construiască o listă cu toate stilurile CSS Tailwind descoperite acolo. Folosind acea listă, elimină orice stil neutilizat din foaia de stil CSS implicită Tailwind, generând o foaie de stil de aproximativ 20,5 KB.

Acest lucru este util deoarece fișierul implicit necomprimat are o dimensiune de 3566.2KB . Acesta este mult prea mare pentru un site web care trebuie să fie performant.

Cu fișierele la locul lor și configurate, în terminalul din directorul rădăcină al proiectului, rulați comanda de mai jos.

Această comandă rulează Laravel Mix spunându-i să:

    1. Generați public/js/app.js din resurse/js/app.js
    2. Generați public/css/app.css din resurse/css/app.css

Acest lucru ar trebui să dureze doar câteva secunde pentru a finaliza și a reda următoarele către terminal.

Testați aplicația

Cu codul la locul lui și totul conectat, este timpul să testați dacă funcționează corect. Pentru a face acest lucru, porniți aplicația rulând comanda de mai jos.

Apoi, deschideți http://localhost:8000 în browserul dorit. Înainte de a completa formularul, deschideți Instrumentele pentru dezvoltatori și treceți la fila Consolă . Cu totul gata, completați formularul cu o adresă de e-mail validă.

Ar trebui să vedeți formularul ascuns și înlocuit cu mesajul de confirmare. Verificați-vă căsuța de e-mail pentru e-mailul de confirmare. Apoi, vizualizați lista cu toate persoanele de contact , pentru a confirma că utilizatorul a fost abonat cu succes. Dacă aveți succes, ar trebui să le vedeți listate, similar cu captura de ecran de mai jos.

Acum, încercați din nou făcând clic pe linkul „Începeți de la capăt” și trimițând formularul fără a introduce o adresă de e-mail sau după ce ați introdus o adresă de e-mail nevalidă. Ar trebui să vedeți afișat un mesaj de eroare aplicabil.

Așa se creează o pagină de destinație folosind Laravel 8, Vue.js și Twilio SendGrid

Am explicat cum să transformăm un site standard de stoc Laravel 8 într-o pagină de destinație de bază, una care poate înscrie un utilizator la o listă de corespondență atunci când își trimit adresa de e-mail.

Deși nu am pus foarte mult accent pe aceasta, am folosit și Laravel Mix și Tailwind CSS pentru a simplifica procesul de creare a unui front end personalizat și performant pentru aplicația noastră.

Dacă doriți să aflați mai multe despre ceea ce face o pagină de destinație grozavă, consultați acest articol de la Copyblogger . În caz contrar, puteți găsi tot codul pentru aplicația pe care o construim în această serie pe GitHub .

Matthew Setter este editor PHP în echipa Twilio Voices și (în mod firesc) dezvoltator PHP. De asemenea, este autorul cărții Mezzio Essentials . Când nu scrie cod PHP, editează articole excelente PHP aici, la Twilio. Îl puteți găsi la [email protected] și este settermjd pe Twitter și GitHub .