#100DaysOfWeb in Python Transcripts
Chapter: Days 85-88: Serverless Python with AWS Lambda
Lecture: Build a simple Bottle web app
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
An introduction to Bottle. Bottle is really a micro-framework it's very similar to Flask. And here you see how the work looks I'm pulling.
0:13
It only takes five lines of code. And it looks very similar to Flask. So we're going to see this in action. I learned Bottle myself when I was
0:23
writing this article on Real Python. If you want some additional reading it might be interesting to read through it
0:29
there I built this simple web app with a database backend using Bottle. So that starts building our PEP 8 checker frontend. And then to make an app.py.
0:41
And I already wrote up some boiler plate code to focus on the Bottle pieces. I import the modules we're going to use.
0:49
So we have Bottle, we have all the functions we're going to use requests to make a post request to AWS. I retrieve the API URL from the environment
0:59
variable we set in the last video, I define the title, and here's the meat of the web app which we're going to write next.
1:08
First you're going to set up a route, which is basically the end point at where we enter our app. And we just need one, which will be
1:18
the root of the web server. And we're going to give it methods. Get. And Post. And this basically means that at the root URL
1:33
we can read data but we can also post data by the form we're going to build. Then we're going to load in a template called index.
1:45
And actually let's create a template right now. Bottle has out of the box support for templating if you make a sub-directory called views.
1:59
There we're going to make a template called index.tpl as per Bottle convention. And I'm just going to paste in the template we have.
2:09
So we have basic HTML. And then to load in some MUI CSS to make it look nice. You're going to balance the title
2:18
and we will see in a bit how we pass in variables from our view into the template. I got some CSS. And I got a form where you can enter your code
2:32
and a button to submit it. And the field's name is code, and that's relevant when we retrieve the data from this field.
2:40
Then I have another section that will look if there's code passed into the template. And if so, it looks if it has PEP errors
2:50
and it will show a red bar and the errors. Or it shows a primary which is a blue bar and a message that everything is OK. So that's the template.
3:05
Going back to the app, the way to load in a template in Bottle is to use the add view decorator. And defining the name of the template.
3:16
And index matches the name we gave this file. And the second thing we need to do is upon submitting the form we need to retrieve the value.
3:26
And as we named the text area code with the name attribute we can get that data like this. Forms. Get. Code. And if that's not retrieving anything
3:44
let's set that as a default of empty. Because as we saw in the template there's logic in there to show one thing or the other based on
3:57
code being populated. Then we're going to keep a return list called pep_errors like this. And then I'm going to do a post request
4:14
to the AWS Gateway API we have yet to define. But that's only going to happen if there's valid code. So if code is true, so there's was something
4:23
submitted in a form. I'm going to define a payload dictionary of key code and value code. And then I'm going to use the requests library
4:41
which we probably all know, it's very well known and it's awesome, one of our favorite packages. And to post to the API URL, again we're going to
4:51
populate that in the environment variable once we get to the section of setting up our AWS Gateway API. And to pass in the payload we just defined.
5:04
So this posts to the API and as we discussed in a previous video, the Lambda will return a dictionary of status code and body.
5:15
So we can easily retrieve the response in the same line, calling the JSON method on this response object. Then we pull out the status code in the body
5:29
and we'll see that later in the Lambda where we actually return those values. So this will only work after we set up our Lambda
5:42
and all that but we have to write this code at some point. And if the status is not OK or 200 we're going to call abort bouncing the status
5:59
and giving an error message of Lambda function returned status and then the number. Then we bail out. Lastly, we need to return a dictionary
6:14
to the template. And as we've seen the template takes a couple of variables. So we have the title. The code, that's basically just bouncing
6:25
it back into the form. And the pep_errors result list. So Title. Code. pep_errors.
6:47
Now Title is defined at the top it's just a constant. Code is defined here. Or it's the submitted code or it's empty, but we always
7:01
provide something back to template. PEPerrors, as we will see when we implement the Lambda is a list of lines. So I will join that on new line.
7:12
And this will make more sense when we get to the Lambda section. This is quite long. And this is our complete web app. Just one route.
7:27
Retrieve the form values. Call the Lambda. Check the status. Retrieve the response body. And pass it into the template.
7:36
Lastly, we need to have the web app running. So we're going to call the run function. And we run it on local host port 8080 debug=True
7:55
I want my depth environment to be as verbose as possible. Of course in production you would turn it off. And reloader=true
8:03
So I can just run this app in a separate terminal and when I make changes it will reload automatically. I'm going to run the server.
8:19
I have to first activate my virtual environment. And then I can just Python run the app. And if I now navigate to localhost:8080 I have a working app.
8:35
Look at that. Looks pretty cool. Let's actually scale it down a little bit. But have our form. We have our submit button. And some nice styling.
8:48
And we have debug turned on which is nice because any errors in development is shown here. And of course this doesn't work because
8:55
we're making a post request to an empty API URL. But we will fix that later. And see that in action. And that concludes the creation
9:07
of the Bottle web app. I've not gone into too much detail because the focus was on AWS Lambda and in the next video we are going
9:15
to build our first Lambda on AWS.