Πώς να στείλετε email από την εφαρμογή Vue.js με το EmailJS

Πριν από λίγες ημέρες αποφάσισα να δουλέψω σε ένα απλό έργο Vue και έπρεπε να στείλω email μέσω μιας επαφής από την οποία μόλις είχα δημιουργήσει. Θα ήθελα να λαμβάνω ένα αυτοματοποιημένο email κάθε φορά που κάποιος συμπληρώνει τη φόρμα επικοινωνίας μου.

Έτσι έψαχνα και έπεσα στα EmailJs. Αποφάσισα να γράψω αυτό το άρθρο επειδή ένιωσα ότι η τεκμηρίωσή τους ήταν υπέροχη και ήταν πολύ εύκολο στη χρήση. Ελπίζω επίσης να βοηθήσει κάποιον εκεί έξω :)

Ας αρχίσουμε!

Σε αυτό το άρθρο, θα σας δείξω πώς να χρησιμοποιείτε το EmailJS για να στέλνετε μηνύματα ηλεκτρονικού ταχυδρομείου από την εφαρμογή Vuejs.

Πριν συνεχίσω, υποθέτω ότι έχετε εγκαταστήσει το Vue CLI στον υπολογιστή σας καθώς θα δημιουργήσω ένα mini demo project μαζί του. Εάν όχι, ίσως θέλετε να ελέγξετε πώς να το εγκαταστήσετε εδώ.

Θα δημιουργήσουμε το έργο χρησιμοποιώντας αυτήν την εντολή:

vue create vue-emailjs-demo

Στη συνέχεια, θα μας ζητηθεί να επιλέξουμε μια προεπιλεγμένη προεπιλογή ή να επιλέξουμε χειροκίνητα χαρακτηριστικά. Επιλέξτε default.

Θα δημιουργηθεί ένας νέος κατάλογος έργου και μπορείτε να πλοηγηθείτε σε αυτόν χρησιμοποιώντας αυτήν την εντολή:

cd vue-emailjs-demo

Πώς να εγκαταστήσετε το EmailJS

Το EmailJS σάς βοηθά να στέλνετε μηνύματα ηλεκτρονικού ταχυδρομείου χρησιμοποιώντας μόνο τεχνολογίες πελατών Δεν απαιτείται διακομιστής - απλώς συνδέστε το EmailJS σε μία από τις υποστηριζόμενες υπηρεσίες email, δημιουργήστε ένα πρότυπο email και χρησιμοποιήστε τη βιβλιοθήκη JavaScript για να ενεργοποιήσετε ένα email.

Προτού αρχίσουμε να γράφουμε τον κωδικό μας, θα θελήσετε να δημιουργήσετε έναν λογαριασμό EmailJS. Με τον λογαριασμό σας, θα μπορείτε να δημιουργήσετε πρότυπα email και να επιλέξετε το email στο οποίο θέλετε να μεταβούν τα αυτοματοποιημένα email σας.

Μόλις συνδεθείτε στον νέο λογαριασμό σας, θα μεταφερθείτε στον πίνακα ελέγχου.

Τρόπος δημιουργίας προτύπου email

Τα πρότυπα email μπορούν προαιρετικά να περιέχουν δυναμικές μεταβλητές σε σχεδόν οποιοδήποτε πεδίο (για παράδειγμα, θέμα, περιεχόμενο, TO email, FROM name κ.ο.κ.). Συμπληρώνονται από την κλήση JavaScript. Θα το συζητήσουμε σύντομα.

Αρχικά ας προσθέσουμε μια υπηρεσία email. Επέλεξα το Gmail, αλλά είστε ελεύθεροι να επιλέξετε όποια υπηρεσία ταιριάζει καλύτερα στις ανάγκες σας.

Επίσης, εάν δεν θέλετε να αρχίσετε να σκέφτεστε ένα όνομα για το δικό σας Service ID, πατήστε στο εικονίδιο αναζήτησης και θα δημιουργηθεί αυτόματα για εσάς.

Στη συνέχεια, θα δημιουργήσουμε το πρότυπο email μας. Μεταβείτε στη σελίδα προτύπων. Δημιουργήστε ένα νέο πρότυπο. Το πρότυπο email μας θα καθορίσει το θέμα του email μας, ποιο περιεχόμενο θα περιέχει, πού πρέπει να σταλεί και ούτω καθεξής.

Τα σύνολα διπλών σγουρών στηριγμάτων που φαίνονται παραπάνω {{from_name}}είναι μεταβλητές. Όταν ένας χρήστης συμπληρώνει τη φόρμα μας, θα μεταφέρουμε αυτές τις πληροφορίες στο EmailJS χρησιμοποιώντας αυτές τις μεταβλητές.

Ακολουθεί μια μικρή εξήγηση των διαθέσιμων πεδίων στο πρότυπό μας:

  • Θέμα: Το θέμα του email.
  • Περιεχόμενο: Τοσώμα του email. Θα δώσουμε εδώ το μήνυμα χρήστη, το όνομά τους και τη διεύθυνση επιστροφής τους.
  • To Email: Περιέχει τον προορισμό αυτού του email.
  • Από Όνομα : Αυτό είναι προαιρετικό. Αλλά μπορείτε να γράψετε το όνομά σας εκεί.
  • Από Email: Η διεύθυνση email του αποστολέα όπως θα εμφανίζεται για τον παραλήπτη. Εάν είναι ενεργοποιημένο το πλαίσιο ελέγχου της προεπιλεγμένης διεύθυνσης email, τότε το EmailJS θα χρησιμοποιήσει τη διεύθυνση email που σχετίζεται με την υπηρεσία email που χρησιμοποιείται.
  • Απάντηση σε: Ορίζει τη διεύθυνση email στην οποία πρέπει να σταλούν οι απαντήσεις.
  • BCC και CC: Αυτά τα δύο πεδία χρησιμοποιούνται συνήθως για την αποστολή ενός αντιγράφου του μηνύματος σε όλους όσους έχετε καταχωρίσει. Reply To,BCC and CCδεν θα χρησιμοποιηθεί σε αυτόν τον οδηγό καθώς θέλουμε να το κρατήσουμε όσο το δυνατόν πιο απλό. Εάν χρειάζεστε περισσότερες πληροφορίες, μπορείτε να δείτε τα έγγραφα του EmailJS εδώ.

Σημείωση: Σε ένα σημείο αυτού του άρθρου, θα χρησιμοποιήσουμε το Service IDκαι Template ID. Χρειαζόμαστε επίσης ένα User ID. Μπορείτε να το βρείτε User IDστο τμήμα ενοποίησης του πίνακα ελέγχου. Μπορείτε να αντιγράψετε τις λεπτομέρειες στο πρόχειρο σας και να τις επικολλήσετε όταν είναι απαραίτητες.

Πώς να εγκαταστήσετε το EmailJS στην εφαρμογή σας

Τώρα πηγαίνετε στον κώδικα :) Για να εγκαταστήσετε το EmailJS στην εφαρμογή σας, χρησιμοποιήστε αυτήν την εντολή:

npm install emailjs-com --save

Θα στέλνουμε email από μια πολύ απλή φόρμα επικοινωνίας. Θα συλλέξει δεδομένα όπως: όνομα (του αποστολέα), email (του αποστολέα) και το περιεχόμενο του μηνύματος. Απλά πράγματα!

Μπορείτε να επεξεργαστείτε το HelloWorld.Vueστοιχείο που δημιουργήθηκε αυτόματα για εμάς όταν χρησιμοποιήσαμε το Vue CLI ή μπορείτε να δημιουργήσετε ένα νέο στοιχείο που ονομάζεται ContactForm.vue. Θα κάνω το τελευταίο.

Παρακάτω θα χτίσουμε το στοιχείο της φόρμας επικοινωνίας, ContactForm.vue.

Ας ξεκινήσουμε με template:

 Name  Email  Message 

Εξηγώντας τη σήμανση μας

Όπως ανέφερα νωρίτερα, θα στείλουμε email από μια πολύ απλή φόρμα επικοινωνίας. Δημιουργήστε λοιπόν ένα divστοιχείο που θα περιέχει το περιεχόμενο της φόρμας μας. Θα προσθέσουμε στυλ στη φόρμα μας, οπότε προσθέστε μια κλάση containerστο div στοιχείο.

 * {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; } 

Μπορείτε να ξεκινήσετε τον διακομιστή σας με την εντολή:

npm run serve

Now, open your browser to localhost:8080 and you should see your form:

We will also be creating a method called sendEmail which handles the submission of our data. But before we do that, we need to import emailjs in our file.

Add the following line just under script :

import emailjs from 'emailjs-com';

Below is the rest of the code needed in our 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 = '' }, } } 

What this code is doing

I used a try...catch above but you don't necessarily have to use it. Remember when I asked you tocopy your Service ID, Template ID and User ID details to your clipboard and paste them for when they're needed? Well you absolutely need them now! So replace that part of the snippet with your actual details.

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

Μπορείτε να βρείτε τον κωδικό για αυτό το άρθρο στον λογαριασμό μου στο GitHub.

Μη διστάσετε να μοιραστείτε αυτό το άρθρο εάν το θεωρήσατε χρήσιμο. Ευχαριστώ για την ανάγνωση!