Categories
Capstone Project Tech Knowledge

How to use Nodemailer

One of my tasks for the project I am working on was to create a function that allows users to send an invitation link to their candidates. So, for this functionality, I had to implement “send email” on our web application. In order to achieve the task, I had researched. I found there are two packages: nodemailer and emailjs. Long story short, I decided to use nodemalier because it is free and there is no limit on sending emails (but emailjs, you have to pay to use it or if you are willing to use the free version, it is limited to 200 emails per month).

What is the nodemailer?

Nodemailer

Nodemailer is a module for Node.js applications to allow sending email.

How to implement sending email function with nodemailer?

You might be able to find many video lectures online, but most videos are dealing the function when if it is in the same server(or Port). However, if you working on react, as you already know, the front-end and back-end are running on the different server ports. In my case, the front-end is running on port:3000 and the server is running on port:7000.


So I have to pass JSON data from 3000 to 7000. So, without middleware, you cannot achieve that.


In this case, Axios can be a good solution since you can send the data to the server port with Axios. And, here is the code I implemented:
Write Axios code on your front-end function where you want to evoke sending email

 axios({                               //call axios   method: "POST",
   //set url with your server port
   url:"http://localhost:7000/send",              
   data: {                            //build a data form
    name: emailSubject,               //Send send           
    email: emailAddress,
    messageHtml: emailContext
   }
 }).then((response)=>{                    // Waiting response  
    if (response.data.msg === 'success'){    //display result     
        alert("Email sent, awesome!");            
    }else if(response.data.msg === 'fail'){
        alert(`Oops, something went wrong with`)
    }
})

Server side code:

const express = require('express');         //load packages
const nodemailer = require('nodemailer');

app.use(express.json());

app.post('/send', (req, res)=>{            //catch post send
    console.log(req.body)

    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth:{
            user: "from email address",
            pass: "password"
        }
    })

    const mailOptions = {
                 //build mail option
        from: "quizbanana467@gmail.com",
        to: req.body.email,       //use data from front-end
        subject: `${req.body.name}`,
        text: req.body.message

    }

    
    //send email
    transporter.sendMail(mailOptions, (error, info) =>{
         //send feedback to front-end        
         if(error){
            console.log(error);
            res.json({msg: 'fail'});     
        }else{
            console.log("good")
            res.json({msg: 'success'});

        }
    })
})

Based on the email service you are using, there would be some limitations so please refer to the official nodemailer site.

//references

mailtrap.io/blog/react-send-mail

Categories
Capstone Project Tech Knowledge

Software mockup tools

As our first task, I and other teammates created a web-application mockup that shows the general workflow and design. Wireframes are often considered an important task of the software development process since it provides a visual understanding and workflow. So, many developers never overlook the task and get help from mock-up tools such as Balsamiq and Figma.
Today, I would like to talk about the three most popular prototype mockup tools which are Balsamiq, NinjaMock, and Figma. I prefer Figma and you will find the reason later in this post.

  1. Balsmiq

I came to know the tool when I took CS361 class at Oregon State University because one of the tasks was creating a wireframe for a project. This tool was pretty powerful even it was free. You can create elements as much you want from various options(I believe there were limits for the free version, but I couldn’t find any disadvantages from the free version). And, you were able to link an element with a page so that you can create interaction between two or more elements. But, this time, we didn’t use Balsamiq this time. The reason because it is not free anymore, it gives you 30 days trial, but after the free trial, you can’t go back work on your work unless you sign up.

2. Figma

I often use Figma for personal projects. You can create prototypes for different platforms (Web, Phone, etc). You can also use it for free, but you can create only three projects with your free account. However, if you delete one of your works, then you can create another project. It means you can use the tool for free forever if you keep the number of projects.

or you can import preset from a library). However, once you are getting used to using Figma, it can be the most powerful tool to build your prototype. and even it looks so real. On the other hand, the other two tools provide a limited number of elements design and given elements looks cartoon-ish.

3. NinjaMock

I didn’t know about this mockup tool until this class. We were planning to work on Balsamiq, but we noticed Balsamiq is not free anymore so that we were looking for other tools including Figma. Our team didn’t want to spend extra time to learn figma, and didn’t want to spend money on Balsamiq. So, we came to this free version of NinjaMock. After created mock with this tool, I do not recommend to use NinjaMock unless your project is personal and small. Here are the couple of reasons. First, free version gives you very limited element capacity which is 200. It takes average of 25 elements to have a simple web page (it took 15 elements for the image below), it means you can make about 8 pages which is very small.

For free users, Figma is the best option since it has limit of projects you can create, but other sources are free. This is why I prefer Figma. Lastly, the contents above are very personal, you can find other tools better than I thought. And, every project has a different purpose so you can choose any tool that has the best fit for your project.