The course is part of this learning path
This course is the second course in two-part series on how to build an application in Python. In the first course, we built a data ingestion process that extracted named entities from articles across a few different publications. We extracted named entities from around 100,000 articles and we saved the results into Cloud Firestore. In this second course, we'll explore the codebase for a web application used to visualize those results.
We'll kick off the course by checking out some quality of life changes implemented while developing this app. That includes a custom bash theme, a replacement debugger, a debugger command for starting an IPython shell, and pytest plugins. After that, we're going to review the data access layer and its accompanying tests. That's going to include multiple implementations of each data access service. Then we'll check out Python's web application standard.
Next, we'll review the web application layer and its accompanying tests. That's going to include a fast web application framework, custom middleware, request hooks, and application configuration. After that, we're going to review the presentation layer, including a Vue.js app and materialize CSS. Finally, we're going to run the app locally and trace some requests through the application using the debugger.
If you have any feedback relating to this course, feel free to contact us at support@cloudacademy.com≥
Learning Objectives
- Implement a few developer quality of life changes
- Implement a testable data access layer
- Understand how a Python web app operates
- Understand how to build and test a more complex web app
- Understand how to use ipdb and IPython
- Enhance your knowledge of the Python programming language
Intended Audience
This course is intended for software developers or anyone who wants to learn more about building apps with Python.
Prerequisites
- Before taking this course, please make sure you have taken the first course in this two-part series: Building a Python Application: Course One
- You should also have an understanding of Python 3, Linux CLI, HTML/JS, and Git
Resources
The source code for the course is available on GitHub.
Hello and welcome. In this lesson, we're going to explore the front end code, which all resides in the index.html file. We're not going to spend a lot of time on this part of the code, however, it is worth at least a glance. I'm using the materialized framework for the CSS and for some basic front end controls, I'm also using view.js to wire up the user interactions.
The HTML for this app is pretty basic. We have a navigation bar and we have a div with an id set to app, which serves as a Vue application. This div here uses a VueJS for loop to loop over the publications that it receives from our web app. It sets the image by combining the base URL with the image URL from the publication. And it also sets the publication name and count.
This section of code here is responsible for generating the cards on the front end. When we click on the preview button, a sidebar pops out from the right, and it lists the word counts for a given publication. This bit of code here is that sidebar.
Looking at the JavaScript, we can see that there are two distinct Vue JS apps. One is the navigation and the other is the word cloud image cards. The main page fetches the publications on load, and it sets the pubs property to the JSON results. This is the property that's used in the VueJS for loop.
So when this property is set, the for-loop runs and it populates the cards for each publication. The preview button is wired to run the open sidebar method and it passes in the publication name. The implementation of that method, calls the slide out applications open method. This code fetches the frequencies from the backend, it stores the results in the word counts property, and then calls the sidebar menus open method.
The sidebar is instantiated here and it specifies that we want to slide out from the right and that we don't want to prevent scrolling of the page when the sidebar is open. These two methods getNext and getPrevious are responsible for paging the results.
Calling next we'll append the results to the word cout rate property. The sidebar will display the last 10 results. The previous method removes 10 records from the word count array, which will result in the sidebar displaying the previous page.
Now this allows us to go back without fetching the results again. However, get next will always fetch its results from the API directly. Now this is not as efficient as it could be, though it works for this use case. So that's about all the detail we'll go into for this code base. I just wanted to show where we're using these different API calls.
In the next lesson, we're going to fire up the application and actually test it out. So whenever you're ready to keep going, I will see you in the next lesson.
Lectures
Course Introduction - Quality of Life for Developers - What Is It That We're Building? - Exploring the Data Access Layer - The Web Server Gateway Interface - Exploring the Web Application Layer - Running the Web App - Summary / Next Steps
Ben Lambert is a software engineer and was previously the lead author for DevOps and Microsoft Azure training content at Cloud Academy. His courses and learning paths covered Cloud Ecosystem technologies such as DC/OS, configuration management tools, and containers. As a software engineer, Ben’s experience includes building highly available web and mobile apps. When he’s not building software, he’s hiking, camping, or creating video games.