Kako slati e-poštu iz svoje Vue.js aplikacije s EmailJS

Prije nekoliko dana odlučio sam raditi na jednostavnom Vue projektu i trebao sam slati e-poštu putem kontakta od upravo stvorenog. Želio sam dobiti automatiziranu e-poštu svaki put kad bi netko ispunio moj obrazac za kontakt.

Tako sam došao do pretraživanja i naletio na EmailJs. Odlučio sam napisati ovaj članak jer sam smatrao da je njihova dokumentacija izvrsna i da je zaista jednostavna za upotrebu. Nadam se i da će nekome pomoći tamo :)

Započnimo!

U ovom članku pokazat ću vam kako koristiti EmailJS za slanje e-pošte iz vaše aplikacije Vuejs.

Prije nego što nastavim, pretpostavljam da imate Vue CLI instaliran na računalu jer ću s njim stvarati mini demo projekt. Ako nije, možda biste htjeli ovdje provjeriti kako ga instalirati.

Projekt ćemo stvoriti pomoću ove naredbe:

vue create vue-emailjs-demo

Tada će se od nas zatražiti mogućnost odabira zadane tvorničke postavke ili ručnog odabira značajki. Odaberite default.

Stvorit će se novi direktorij projekta i u njega se možete kretati pomoću ove naredbe:

cd vue-emailjs-demo

Kako instalirati EmailJS

EmailJS vam pomaže slati e-poštu koristeći samo tehnologije na strani klijenta. Nije potreban nijedan poslužitelj - samo povežite EmailJS s jednom od podržanih usluga e-pošte, izradite predložak e-pošte i upotrijebite njihovu JavaScript knjižnicu za pokretanje e-pošte.

Prije nego što započnemo s pisanjem koda, morat ćete stvoriti račun EmailJS. Pomoću svog računa moći ćete stvoriti predloške e-pošte i odabrati e-poštu na koju želite da idu vaše automatizirane e-adrese.

Nakon što se prijavite na svoj novi račun, bit ćete preusmjereni na nadzornu ploču.

Kako stvoriti predložak e-pošte

Predlošci e-pošte po želji mogu sadržavati dinamičke varijable u gotovo bilo kojem polju (na primjer, predmet, sadržaj, TO e-pošta, IZ imena i tako dalje). Oni su popunjeni iz JavaScript poziva. Uskoro ćemo ući u ovo.

Prvo dodajmo uslugu e-pošte. Odabrao sam Gmail, ali vi možete odabrati onu uslugu koja najbolje odgovara vašim potrebama.

Također, ako ne želite početi razmišljati o imenu za svoj Service ID, dodirnite ikonu pretraživanja i ono će se automatski generirati za vas.

Dalje ćemo stvoriti naš predložak e-pošte. Idite na stranicu predložaka. Stvorite novi predložak. Naš predložak e-pošte definirat će predmet naše e-pošte, sadržaj koji će sadržavati, gdje ga treba poslati itd.

Gore prikazani skupovi dvostrukih kovrčavih zagrada poput {{from_name}}su varijable. Kad korisnik ispuni naš obrazac, proslijedit ćemo te podatke EmailJS-u koristeći ove varijable.

Ispod je malo objašnjenje dostupnih polja u našem predlošku:

  • Predmet: Predmet e-pošte.
  • Sadržaj:tijelo e-pošte. Ovdje ćemo proslijediti korisničku poruku, njihovo ime i povratnu adresu.
  • Za slanje e- poštom: Sadrži odredište ove e-pošte.
  • From Name : Ovo nije obavezno. Ali tamo možete napisati svoje ime.
  • Iz e-pošte: e-adresa pošiljatelja onakva kakva će se pojaviti primatelju. Ako je omogućen potvrdni okvir zadane adrese e-pošte, tada će EmailJS koristiti adresu e-pošte povezanu s uslugom e-pošte koja se koristi.
  • Odgovor na: Postavlja e-adresu na koju bi se trebali slati odgovori.
  • BCC i CC: Ova se dva polja obično koriste za slanje kopije poruke svima koje ste naveli. Reply To,BCC and CCneće se koristiti u ovom vodiču jer ga želimo učiniti što jednostavnijim. Ako su vam potrebne dodatne informacije, ovdje možete provjeriti dokumente EmailJS.

Napomena: U trenutku u ovom članku koristit ćemo Service IDi Template ID. Trebat će nam i User ID. Svoje možete pronaći User IDu integracijskom dijelu nadzorne ploče. Pojedinosti možete kopirati u međuspremnik i lijepiti ih kada su potrebni.

Kako instalirati EmailJS u vašu aplikaciju

Sada prelazimo na kôd :) Da biste instalirali EmailJS u svoju aplikaciju, upotrijebite ovu naredbu:

npm install emailjs-com --save

Poslat ćemo e-poštu s vrlo jednostavnog obrasca za kontakt. Prikupljat će podatke uključujući: ime (pošiljatelja), e-poštu (pošiljatelja) i sadržaj poruke. Jednostavne stvari!

Možete urediti HelloWorld.Vuekomponentu koja je automatski stvorena za nas kada smo koristili Vue CLI ili možete stvoriti novu komponentu koja se zove ContactForm.vue. Radit ću ovo drugo.

U nastavku ćemo graditi kontakt obrasca komponentu, ContactForm.vue.

Počnimo sa template:

 Name  Email  Message 

Objašnjavanje naše oznake

Kao što sam već spomenuo, e-poštu ćemo slati s vrlo jednostavnog obrasca za kontakt. Dakle, stvorite divelement koji će sadržavati sadržaj našeg obrasca. Mi ćemo biti dodajući stil našem obliku, pa dodati klasa containerna div elementu.

 * {box-sizing: border-box;} .container { display: block; margin:auto; text-align: center; border-radius: 5px; background-color: #f2f2f2; padding: 20px; width: 50%; } label { float: left; } input[type=text], [type=email], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } 

Svoj poslužitelj možete pokrenuti naredbom:

npm run serve

Sada otvorite svoj preglednik na localhost: 8080 i trebali biste vidjeti svoj obrazac:

Također ćemo stvoriti metodu koja se naziva sendEmailpredajom naših podataka. No, prije nego što to učinimo, moramo uvesti emailjsdatoteku.

Dodajte sljedeći redak odmah ispod script:

import emailjs from 'emailjs-com';

Ispod je ostatak koda potreban u našem script:

 export default { name: 'ContactUs', data() { return { name: '', email: '', message: '' } }, methods: { sendEmail(e) { try { emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID', { name: this.name, email: this.email, message: this.message }) } catch(error) { console.log({error}) } // Reset form field this.name = '' this.email = '' this.message = '' }, } } 

Što ovaj kod radi

Koristio sam try...catchgore navedeno, ali ne morate ga nužno koristiti. Sjeti se kad sam te zamoliokopirati ID usluge, ID predloška i User ID detalje u međuspremnik i zalijepiti ih kada su potrebni? Pa oni vam apsolutno trebaju sada! Zamijenite taj dio isječka svojim stvarnim detaljima.

emailjs.sendForm() is how we send data to EmailJS after passing the Service ID, Template ID, User ID and form data that were passed into sendEmail(). We console.log() any error encountered with the catch() block.

It is important to note that sendForm() sends an email based on the specified email template and the passed form data. So make sure that your form input name is the same as the variable in your EmailJS template.

Below is my modified EmailJS template with the name (of the sender), email (of the sender), and the message content.

That's it!

Check the To Email address included in your template and you should have your email sent there already. You could also play around with the Test it or playground feature on the top-right corner of the template if you want.

GitHub Repo

You can find the code for this article in my GitHub account.

Feel free to share this article if you found it helpful. Thanks for reading!