UI to mail NASA APOD image to inputted email [#2 NASA APOD Series]

I’ll be going through using Flask to create a 2-webpage website with a simple form on the first page that takes in your email, clicking the submit button sends an image of the latest NASA APOD image to the inputted email. For this, I’m using the script written and explained in the last post in this series, which can be found here. So in this post, I’ll be going through the flask templates i created, and my form functionality, which is pretty simple.

The first step is to create a .html page and a main.py file for our website. Here’s the code for the following.

<body> tag of .html file

So the image above shows the code I’ve written for the body tag, which is all that’s worth looking at. The form data returned in the main.py file is used to just show the form and a submit button, very simple functionality so I’m not going to go that much into detail for this part. We only have an email field and a submit button, clicking the submit button firstly checks whether or not the email field has a valid input. If it doesn’t, the field is cleared and a red outline is put on it. If it is, an email containing the latest NASA APOD image is mailed to the inputted email, and the user is redirected to another webpage.

This is the code in my main.py file. I’ve initialised my Flask app with the first line and given it a secret key (for forms). The send_email() function contains the code explained in the previous post. It’s called if and only if the submit button is clicked on the home page and a valid email address is filled out. If these conditions are satisfied, the send_email() function is called with the inputted email as the only argument. The code then redirects the user to the bye.html page, which is just a small html file displaying the words “bye.” I did it for the sake of seeing whether or not the send_email()function has been called inside home.

My functionality for setting up the email form is very simple. I use the wtforms module.. I’ve created emailButton class wherein the the email is set to a StringField object, and submit is set to a SubmitField object. The library provides validator methods. DataRequired() ensures that some data is inputted into the field, and Email() ensures that the given input is a properly formatted email.

This is what our webpage displays. After entering a valid email and clicking submit, here is what I’ve received in my inbox.

Next time I’ll have a more styled layout, and I’ll go through the countdown functionality that will send emails to inputted email addresses until the number of inputted days becomes zero. Project should ideally be complete when that’s done.

You can check out the full code here.


Posted in:

%d bloggers like this: