•January 23rd 2020
This is the second installment of a tutorial series focusing on how to create a full-stack application using Flask and Stream. This week we’re going to start digging into the actual construction of our app. In this article, I am going to guide you through setting up the initial files and structure, as well as registering for Stream and getting you familiar with some of its core concepts to get more familiar with it. Check out the Github repo here to help you follow along!
The first thing we have to do is create a new directory to house our project in. I am going to name mine "offbrand-tutorial", but feel free to name yours whatever you’d like. After that, we are going to boot up a virtual environment(venv). Opening your command-line tool, navigate to the project directory you just created. If you haven’t already, install
Next, we are going to initialize the virtual environment in the project:
This will create a new virtual environment named venv within your project, which helps to keep all of your Python packages together and separated from your local computer to avoid conflicts between libraries. Before we continue, make sure you activate your environment.
Back to Basics
When dealing with a project of this scale, the organization is critical. With that in mind, I am going to be using the app factory design and trying my best to keep elements modular to make it easier to add and remove functionality. I am going to start by creating a basic structure that will include features that we will deal with right away, but also a few that will come in handy over the next few articles and tend to be used over and over in your Flask projects.
Pip Install Everything
I typically like to install a handful of Python packages when I start a new project that I know I’ll be using during development. I find this helps in allowing me to write instead of switching back and forth from the terminal to fetch a new library. So, in your command line console:
Stream-Python is going to be our workhorse; it will be acting as our data store for the majority of this project, communicating with the Stream API.
flask-sqlalchemy will be our tool to talk to our
sqlite database, and flask-moment will help convert user-facing timestamps in our application.
Testing the Waters (Pun Fully Intended)
As I mentioned earlier, Stream is going to make up the core of our application. Signing up is a quick process, which you can do either with email or your Github account. We will be creating our feeds as the series progresses and can integrate them one by one into our app. I wanted to take a little bit of time, however, to get you more acquainted with how feeds in Stream work, and how we’ll be integrating them into our app. The first thing to know is that there are three different types of feeds available.
Flat feeds are typically your bread and butter. They are activity-based feeds that can be combined with other feeds, through follows, to give you a “timeline”-like view. They work by adding “activities” for an object (like a user or a group/place) to the feed – through which all of the followers of that feed will be able to see in their own. We are going to be using this type extensively for organizing user/collection content.
Aggregated feeds work in a similar way to flat feeds, but with some critical differences. The first is that they aggregate (makes sense) activity in the feed, like “Johnny and two others watched this video”. The other important part is that Aggregated Feeds cannot be followed. Aggregated feeds provide a rather vital service, though, in that if one of your friends gets bored one day and decides to post 100 times in a row, your feed won’t get hijacked. We will be using this type of feed for our user home page.
Unless you’ve lived under a rock for the last ten years, the concept of notifications shouldn’t be entirely new to you (which if you have and still learned modern programming, respect). This particular feed group has some rather handy features, though. First, read counts. Typically, this functionality is pretty write heavy on your database when you implement it yourself, which, once you start hitting any scale is a non-starter if you are trying to keep expenses low. Also, it will give you a convenient count of those unseen/unread notifications.
Second, real-time. You can set up your applications to receive notifications in real-time using Webhooks or AWS SQS, which helps to make your applications more dynamic and user-friendly. The alternative would be to make your users refresh the page every time they want to see new notifications. Notifications also automatically aggregate events like an aggregated feed. We will be using Notifications in the second half of our tutorial when we get into React.
Now that we’ve covered the basics, we’ll launch into creating the main directories and files for our app. When we are finished, you will have an application structure that looks like this:
In the app directory, we’re going to create a few basic files and (yet another) directory. The first file we will be creating is an extensions.py file. This is going to gather together the third party libraries that rely on the app context to function.
After that, we will create an
__init__.py file to initialize (get it?) the app using Flask and register the different blueprints. Don’t stress about the config file or the original plan yet; we will get to those soon.
Finally to round out the
/app directory, create two empty files:
models.py, as well as a quick
exceptions.py file with a
We will talk more about the models and decorators next week, but these are used in almost every Flask application, so like the packages we installed earlier, I’ve found it’s better to get in the habit of creating them with every new project.
Next on our docket is to create
/main directory for actually returning something when a user visits your page. Create an
__init__.py file in
/main, followed by
__init__.py, we’ll make our blueprint.
And we will create a basic “hello world” endpoint as a sanity check for when we’re done.
In our last few steps, we are going to create an
config.py file in our main project directory. This will run the
create_app function that we made in the
app/__init__.py file, to operate as the entry point for the web app.
config.py file will organize all of the different project-wide settings as well as help differentiate between development, testing, and production settings for our database.
You now should have the basic structure in place to build a Flask Application. To run the sanity check I mentioned earlier to make sure everything is working the way it should, go to the
venv activated command line:
Now, if you navigate in your web browser to localhost (http://127.0.0.1:5000), you should see Hello World!
See you next week, where we’ll be starting to building out our web app with users and permissions levels, as well as some necessary forms for registration and login/logout.
Note: The next post in this series can be found here.