Building a web app with Flask

When we signed up for projects for this Capstone course, I was selected to work on a new interface for a database for a Crop and Soil department climate science project at OSU. This was originally the only information we had to go on for this project, and after our initial meeting with the project sponsor we thought we would be building a web application. In a prior course, CS290 Web Development, I ended up choosing to use Node.js with Handlebars, so for this round, I was going to learn how to use Flask.

My usual method for learning would be to use LinkedIn Learning like I described in this post from last week. But, I was short on time over the weekend and needed to just go direct to development and went in search of a step-by-step walkthrough instead. Doing some quick searching, I found one from a Python Beginners course which can be found here.

Flask Step by Step Instructions

Pretty quickly after getting started on this walk through I noticed that if you have any experience in Python and building a web app with Node in the past, then using Flask will be very straightforward of an experience. A key commonality between using Handlebars and Flask is the use of templates, and they look extremely similar between the two. It was familiar and nice to see that you can populate a web page using variables and quickly limit the amount of HTML you need to write.

Example Template

In the screenshot above you can see the {% for pair in pairs %} where it is just looping through a variable and populating the list with very minimal code. As with any language, the important thing is to keep track of your syntax and keywords, and remember that you need the {%block content %} and {% end block %} for the template, and to end the for-loop by using {% endfor %}.

Another nice feature of Flask that puts it ahead of Node is that you can simply install Flask-Bootstrap 4 and then you have access to quickly make very attractive apps and forms using Bootstrap. You then just need to add a few lines to your main .py file to import Bootstrap (second bullet below) and enable it for your app. Then in your template you just grab the bootstrap/base.html and voila, your entire app looks great. They provide an example app, Books Hopper, that was built using these same few tools.

Using Bootstrap with Flask
Demo app using Flask, Bootstrap and WTForms

The last part of the tutorial was where we get connected to a database so that we can let a user query a database, for this use case it is clicking a link, and delivering up the results. This was the part of the tutorial I was looking forward to, and is the area where I learned something completely new!

Within Mac computers, there is a lightweight database engine already built in and ready for use. All you need to do is go to the Command Line and enter “sqlite3” and you will be taken to an in-memory database where you can import or manually create tables and immediately use them for queries. I found this rather useful since there are times where you may have a large file in a csv format that would be impossible to use in Excel, but you know it is formatted appropriately to quickly query and get summary statistics. You can skip all the overhead of other database options, and just open up sqlite3, import your data, and get to your queries. If you are like me and find this exciting and useful, then you can find more information here.

Using SQLite

I ended up using SQLite to load a csv file I downloaded from a site, and then used SQLAlchemy within Flask to connect and execute the queries based on user clicks. The nice thing about SQLAlchemy is that it includes support for all your standard databases (SQLite, Postgres, MySQL, MS-SQL) so it is very quick to get connected. Once I had everything up and running, I was able to finish up the tutorial and have a simple proof of concept for a user selecting a specific attribute, then receiving results for that one attribute from a connected database.

Select a Plant from the List
Query output from database

The greatest thing about this app, is that through the use of Flask, SQLAlchemy, and Bootstrap, the entire app itself is only a few lines of code across 3 files. The Python script handles the routing and connection to the database. Then there are two html files, one for each page. Both use templating and Bootstrap and take fewer than 50 lines for each file. Overall, I really enjoyed using Flask and would highly recommend it for building a quick and simple app that looks attractive.

My experience with LinkedIn Learning

Now that I am nearly finished with my degree my family and my work are bringing to me projects that they need help with. This is great because it indicates that they find me to be a trusted resource, but they are asking me to work with things that I have never used. This is where LinkedIn Learning has stepped in to help me out.

It was a few months ago that I noticed that Oregon State made available to all current students and staff the use of LinkedIn Learning. I had also heard about it at my work, so I knew that it was being promoted to us there, and when I noticed OSU had it as well, I jumped at the chance and signed onto my account. In order to sign on, you just need to have an existing LinkedIn account, which I highly suggest if you don’t already have one, and then you can login to Learning with your OSU login. It then asks you some questions about your interests, that way it can fill your homepage with suggestions.

I noticed right away that for some topics, such as learning the Python programming language, there are an incredible array of learning options. There are over 5,000 courses, videos, audio only posts, and learning paths. The learning paths are curated groups of courses, with quizzes for skills assessment within the courses, and a certificate of completion received at the end. When you receive the certificate it will be added to your LinkedIn profile, as a nice way to advertise that you took the time to learn something new.

Learning Path to Advance Your Skills in Python

For other languages, such as C++, there are however only 21 results, and for some of the software we use at my workplace, Single Store and Snowflake, there are zero options for courses. So, the options are not covering everything in existence in the technology space at this point, and it may take some time as certain technologies become more popular they may be added to the catalog. Knowing this, I consider it a resource, not my only resource for learning.

From my personal experience, I had a family member ask me to help them with updating/building a new website for their business. They already had a version built with SquareSpace, and wanted to continue using it since it was easy for them to manage. I agreed, and immediately searched for SquareSpace courses on LinkedIn Learning. This is an area with fewer videos, but still a couple of courses that provided enough of a walk through for me to get comfortable using SquareSpace.

SquareSpace courses on LinkedIn Learning

Once I had finished with the videos in the Essential Training course, I was ready to start building. The course itself, which was only a couple of hours, was definitely enough for me to feel comfortable with using SquareSpace and knowing where to go for something. I also used it as a guide while I started my building, with rewatching videos as I built the new website. Within a few hours over a couple of weekends, we had gone from something acceptable and functional, to something that is attractive and inviting to users.

Updated SquareSpace Website

Most recently, my workplace needs help on a web app project for one of the teams we support, and since they know I am interested in flexing my new Computer Science skills, they asked me to step in. This project is in front-end UI/UX development, and though we do get some experience with Javascript and interacting with SQL in the OSU program, it was not using the same stack as my workplace. To fill in for what I don’t know, I looked on LinkedIn Learning for some React.js courses, and thankfully found several courses, as well as a Learning Path.

React.js Developer Learning Path

Just this week I have had time to complete the first course, and already feel that I could easily begin building an app with React.js. Since this may become a future focus area for my career, I am going to continue with the Path and complete the Certification. For me personally, having a quick video course, especially one that has all the steps broken down for me to review as needed, gives me that sense of confidence that I can actually be part of a development team and can effectively contribute.

Content for one Course

These courses give you that first 20-50% of learning that you would usually rely on text walk-throughs from a bland website, or often just your coworkers, and can get you up and running much faster. As I mentioned before, it does not have everything under the sun, but I do find it to be a useful first place to look before I just go to the docs.

Why get another degree?

Like everyone in the post-baccalaureate program at Oregon State, my first undergraduate degree is in a field unrelated to Computer Science. My background is in Business, and I even stayed in college and completed an MBA many years ago thinking that I would become a manager… which I now realize years later is a fairly non-specific plan and is not what I was ready for then or even now.

My path in life has generally been one of taking opportunities as they come along, and back in 2011 I applied to Apple having never touched an iPhone and honestly having almost zero experience ever using a Mac. As luck, and six months of interviews for two different positions, would have it, Apple was kind enough to offer me a position, which I gladly accepted. One of the positions I applied for involved working with a reporting system where basic knowledge of SQL was required, and I only had a small amount of experience at the time editing queries using a query builder. I ended up not getting that position, I ended up as a Demand Analyst where the work was primarily in Excel, but I never gave up on getting the position I felt was right for me.

After a few years of learning about Apple, I did end up interviewing and getting the Senior Business Analyst position (as we were called back then). As luck would have it, this is also when the idea of reporting and business analysts was changing rapidly. Previously, an individual might be simply dragging and dropping measures and dimensions to build a report, and now the requirement was to write our own SQL from scratch and build and publish our own dashboards with visual elements like charts and graphs to tell a story with our data. There was also opportunity to do more if you could, and this is when I started looking into furthering my education.

Machine Learning and Data Science was everything everyone talked about, so I started taking classes from Coursera. My extremely positive experiences with Coursera lead me to realize I had the time and the interest in pursuing a formal degree. I applied for and was conditionally accepted to the Johns Hopkins Data Science Masters online program, I just needed to take a couple of programming courses. I selected to go to my local community college to take C++ and Java so that I could pursue the program… and honestly just fell in love with programming itself.

For me, when I was learning about ML I felt like this is really interesting, but there is more to this that we are not discussing. It felt incomplete to me to learn something at the tail end and not understand the bones of it. When I was taking C++ and Java, I saw how things were created, and could see that if I wanted to later build predictive algorithms having a strong background in Computer Science was going to be extremely valuable. So, that is when I went in search of a program that could get me where I felt was really the right path for me, and this is how I ended up at Oregon State.

Just being in this program has already brought me new opportunities at work, and as I finish up this last course I have the confidence I need to get started on a career path I never even considered those many years ago. I found the place where I belong, and this is why I chose to obtain another degree.