Learn to build web applications
4.2 (28 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
318 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn to build web applications to your Wishlist.

Add to Wishlist

Learn to build web applications

Learn what Google's platform offers to easily build scalable apps in no time. No previous coding experience required
4.2 (28 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
318 students enrolled
Created by Michael Gradek
Last updated 7/2015
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 12 hours on-demand video
  • 1 Article
  • 5 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn how to program in Python and create web applications on Google App Engine
  • Learn about development patterns following Google's best practices
  • Build a Recipe Search Engine which allows users to register, log in, post recipes with images, search for recipes and even build a parser or crawler that will go our and fetch recipes from other sites
  • HTML development with Twitter's Bootstrap Framework
  • Javascript and jQuery development
  • AJAX and asynchronous requests
  • Backend development
  • Using the NoSQL Google DataStore database
  • Creating users and logging them in using cookie sessions
  • Encrypting passwords and cookies
  • Posting content, including images, to our app
  • Indexing recipes into our Full text Search Index
  • Building a parser (crawler, spider) and fetching content from other sites
  • Debugging
  • Deploying the application
  • Pointing a custom domain to our app
  • Monitoring and performance testing and enhancing using logs and traces
View Curriculum
  • Excitement and enthusiasm for building awesome stuff!
  • No programming experience is requeired
  • Ideally the student should have/install a software development tool to write Python code, however, we will go over installing one in class
  • Installing the Google Cloud SDK will be covered in class

Web app development isn't hard, but there sure is a lot of material to go over. I wanted to create a comprehensive course because I feel if someone is serious on building something great, you need to have knowledge on many of the different aspects of creating web apps. In addition, I didn't want to create a boring course which goes over the basics of programming and then, separately, shows how to develop feature after feature without a cohesive vision.

Instead, this course is project based, meaning that we will develop an entire web application throughout the course, and along the way, learn about programming basics and all of the different aspects on web app development as we encounter the need to implement certain features or learn certain concepts.

In this course our main project will be building a recipe search engine using Python and Google App Engine! Yeah, a full-blown recipe search engine. It's kind of like a smaller version of Google, where the only thing you can search for are recipes instead of the entire web. Check the "What am I going to get from this course?" to see all of the different concepts we are going to learn :)

Python is in my eyes, the best programming language to learn when you're starting. It reads like english so it's easy to understand the code and what it's doing, and Python tends to be terse, meaning that it's neatly concise and free of syntactical and verbal redundancy. Or in other words, it's clean and productive, where one line of Python code can do what maybe 5-6 lines of code do in other languages. Python is also a lot of fun to code!

Google App Engine is an astonishing technology we can use to deploy our apps. It takes away all of the headaches of managing servers and infrastructure so you can focus 100% on your application code. Whenever your app gets popular and receive a peak of traffic you don't have to worry about your servers crashing over the increased load. Google App Engine automagically spins up new servers to serve your users. In addition, App Engine provides many extremely useful services we will use, but that we don't have to install and configure. For example, we don't need to install nor configure a database, a email server, full text search indices, queues, etc. All of that is already build by Google on App Engine and we simply need to call those services to use them. Do you know how much time that saves us in the development process? A ton!

All of that allows us to rapidly develop apps, test them out and figure if we are getting traction or if we need to improve our product. It's this ability of fast development cycles that leads us to find our ideas that work, and hopefully, generate revenues and lead us to live the lifestyle we dream of.

Who is the target audience?
  • Beginners and people who want to lean web app development but don't want to waste time on installing and configuring systems
  • Non-technical Product Managers who work with technical teams every day and want to understand the underlying web technologies to have better view on their team's work and needs
  • Entrepreneurs who want to start a web app and test their business ideas out fast
  • Developers who want to learn what Google App Engine is all about
Compare to Other Web Development Courses
Curriculum For This Course
131 Lectures
6 Lectures 35:03

The web runs on many interconnected computers and servers. Clients (users) send requests to access websites (hosted on servers). To do that, we type in the domain name. This domain name is resolved to the IP address of the server that hosts the given application or website. When our server receives our request, the code living on the server interprets the request, figures out what it needs to do, and sends back a response. The response in most cases contains HTML which our browser then picks up and renders that graphical representation on our screens.

Preview 06:52

  • Protocol: the standard that is used for machines to communicate over the internet when requesting websites.
  • Domain: the name that points to an IP address of the server that hosts our web application
  • Port: servers have many ports, each service runs on a given port. The services that run our web applications in most cases run on the port 80 (it's a standard), so we don't need to tell the browser to go to port 80.
  • Path: In order to access a resource at the server, we need to specify the path to reach said resource
  • Query Parameters: additional data the server may expect to fine-tune the request to the server knows exactly what you're looking for. Common examples are user IDs, or blog post IDs to fetch given item
Preview 05:59

Paths are going to be the most important part of understanding how to develop our web apps.

Find the path
1 question

We, the users, send requests to web apps. The request contains a header, and sometimes a body (depending on the type of request). The server evaluates the request, and the code living on the server figures out what to do, and once it know what to give back to the user, it sends back a response. There is only 1 type of response, and it contains both the header and body.

Preview 02:37

Headers contain extra useful information to provide the desired functionality. It's information that we don't see in our browser, as it's not part of the body. Common examples of data sent in headers are user session information when the user is logged in. If the header entry responsible for passing the user session was not present, the server would not know if the user is logged in or not.

Preview 05:40

What happens when we try access a website?
1 question

App architecture is a complex subject. Managing the architecture when your app gets popular is even more complex and requires hiring a team of trained DevOps people.

Preview 08:45

App Engine's architecture is much simpler, as it's abstracted into different services we can choose to use as part of our application stack, or not. If we choose to use a given service, all we need to do is call the service using the APIs provided in the Google Cloud SDK. There's no installing, configuring, monitoring or DevOps involved. Many head-aches are solved from the get-go :D

Preview 05:10

Why Google App Engine?
1 question
Getting started: Guest Book app in Google App Engine
21 Lectures 01:51:33

In this lecture we will learn how to install the Google Cloud SDK. The SDK allows us to have access to the same functionalities our app will have on Google's servers, on our local machine. This allows for easy development as the behaviour of our app will be the same on our local machine as on Google's servers. Awesome! :)

Installing Google Cloud SDK

(optional) Installing the Google Cloud SDK on Windows
5 pages

We're going to create and run our first project! With only two files and absolutely no configuration your are able to run an App Engine application on your local machine, that's really cool!

Creating and running your first App Engine app

The app.yaml is kind of like a configuration file. The most important part of it is the "handlers" section where we map incoming requests to a router file. Then, we have the main.py file which contains the router and the request handler which handles incoming requests.

Understanding how App Engine works

Brief intro into classes. Classes are a way to model information and structure together logical components and functions. In out web app, a class represents a incoming request, containing all the headers, and a response, containing the headers and body of said response. We can change the default headers being sent back in the response. We can also add new headers. We also have to provide the body of the response. All this is done with class methods already provided by the webapp2 framework. We will explore these concepts further along the course.

About Classes in Python

A response is the thing we are always going to be sending back to our clients. It contains the headers (which are set by default by the webapp2 framework), and the body generated by our code. The response is the thing that the client's browser grabs to interpret it, and render something on their screen.

Responses in App Engine

Quizz :)

What will happen if we try to send a request to the path '/hello'
1 question

Routes are the most important concept we need to take away from this section. A route is a way of telling App Engine which bit of code needs to process the incoming request. This is done by mapping the path of the incoming request, to the function (Request Handler) that we want to handle it.

More on Routing paths in App Engine

Routing in App Engine
4 pages

HTML is the markup language that tells browsers how to render things on screen. We go over the very basics in this lecture, and will go into more detail in the Recipe Search Engine project further along.

Building our Guest Book form in HTML

Here we're actually developing the function, or Request Handler, that actually processes an incoming request sent to us by users to the path /greet

Implementing our Greet Handler

Unlike other services, we don't need to install and setup our database (DataStore in App Engine). This is already done for us. All we need to do is use the API (Application Programming Interface) which is provided in the Google Cloud SDK (Software Development Kit). The API is imported into our project by writing

 from google.appengine.ext import ndb 
Saving Greetings to our Data Store

Before we move along, we need to understand lists. Lista are a collection of items (any type of item, any amount of it) stored under the same variable name. We can do many things with lists, such as sort them, test whether some item is in the list or not, and access each item one by one.

Lists in Python

Lists quizz
2 questions

In order to add our greetings, we need to break up our HTML a little to insert said greetings.

Breaking up our form HTML

Fetching items from the DataStore does not require knowledge of a Query Language such as SQL. Instead, we perform queries directly with code. Isn't that much better? :)

To fetch all greetings (not filter the results, nor order them) we can simply perform the following line of code to save all greetings into the "greetings" variable.

 greetings = Greetings.query().fetch() 

Fetching Greetings from our Data Store

Once we have the greetings (in a list), it's just a matter of looping or iterating over them and inserting them into our HTML

Showing the Greetings on our Home Page

Working with huge strings, and breaking them up to insert our results from the datastore is very cumbersome. It's much better to use templates, which allow us to separate the HTML (front end) from our backend code. The backend will simply call the template in question and send it back to our clients as the response. Everything will be much tidier :D

Refactoring our app: implementing Jinja2 templates

Understanding dictionaries in Python

We need to add the list of greetings into a key in our dictionary, which we will then pass into the Jinja template. This list of greetings will then be accessible from the template by the name if the key we give it

Adding Greetings to the template

The key concept is that every file should have its specific purpose. It's generally not a good idea to write many different functionalities belonging to different logical groups in the same file.

This is why we are going to move out model (which is a logical element of treating with data in out datastore) out of our request handler (which is code dedicated to receive a users request, figure out what to do, and send back a response).

Refactoring the Greetings Data Store Model

We're going to do the same thing with our router :)

Finishing our refactor and our project!
Structuring our Recipe Search Engine project
10 Lectures 40:53

We're going to build a recipe search engine and along the way learn about:

  • HTML
  • Javascript and jQuery
  • AJAX (asynchronous requests to the server)
  • Backend development
  • Using the NoSQL DataStore
  • Creating Users
  • Encrypting passwords (a must!)
  • Logging users in (user sessions)
  • Posting content, including images to the server
  • Storing recipes and images in the NoSQL DataStore
  • Indexing recipes into our Full Text Search Index (Search API)
  • Performing queries to the Full Text Search Index
  • Building a Parser (or spider) that automatically grabs content from other websites
  • Debugging
  • Deploying our application
  • Monitoring
  • Performance testing our application

Whoa...! Let's get to work!

Preview 05:39

Make sure to have a Google account (gmail.com) and be logged in. Then go to: https://console.developers.google.com

Once there, go ahead an hit "Create new project"

Creating our project on the Google Developer Console

The app.yaml is sort of like a configuration file which tells App Engine some project details such as the application version, the handlers, libraries we want to use, etc. We won't be working on this file too much, and I tend to not write it from scratch. I always copy it from project to project and adapt it. And for that reason, I've provided a app.yaml sample file you can download ;)

Creating the app.yaml file

When you set out to build a larger project, we need to take care of the structure and make sure we can find items easily later on, so the project structure is pretty important

Creating our project directories

  • http://getbootstrap.com/
  • Download "Bootstrap"
  • Uncompress files
  • Place the bootstrap.min.css in the /static/css folder
  • Place the bootstrap.min.js in the /static/js folder
Importing Twitter Bootstrap framework

The router is what's going to map the incoming requests with request handlers. It's part of the webapp2 framework so we can simply import and use it.

Creating our Router

What is a router?
1 question

We need to add functionality to the default, stock Request Handler that webapp2 provides. To do just that, we are going to create our own Request Handler class and extend off of the webapp2.RequestHandler.

Our new YumSearchRequestHandler will the the code that's used by all of our pages and thus any code we need to be implemented in all pages will be written in this class.

Building our custom Request Handler

Finishing our custom Request Handler

  • Add the following line in the <head> tag
      <link rel="stylesheet" href="/static/css/bootstrap.min.css"> 
  • Add the following lines just before you close of the </body>. It's important that you add them in this order, first jQuery and then Bootstrap
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
      <script src="/static/js/bootstrap.min.js"></script> 
Implementing Bootstrap in our base template

In order to not have duplicate code for every single template, we need to abstract all of the common parts out into a separate, base template.

We will then extend off of the "main.html", or the base template to all other templates so we don't have to write the base code all of the time. Also, when we make changes to the base HTML, we only need to do them in one place :)

Abstracting our templates into a more reusable architecture

Why do we need to abstract?
1 question
Writing the HTML of our pages
24 Lectures 01:54:01
Implementing a top Navigation Bar

Implementing a Bootstrap Modal

Creating a Register form inside a Modal

Adding more inputs to the form

Finishing the modal HTML

The click listener detects when we click a button and performs some logic that we specify within the function. I n our case, we will be launching an asynchronous request to the server. Isn't that awesome? :)

Adding a click listener to our button using jQuery

What is AJAX?
1 page

Here we are actually sending the AJAX Post request to our server. AJAX is really neat because it allows us to call the server without refreshing the entire page. This brings many benefits such as:

  1. Great user experience as the page really seems like an app instead of a 1990's website ;) Overall, we can make the site much more interactive
  2. Better performance as the server can respond quicker due to a smaller amount of data being sent over the wire
  3. Better performance for the user, as their browser doesn't need to reload and re-render an entire page, just a small portion of it
Using AJAX in our form

It's always a great idea to give the user some feedback if our site is "working". We can do this by changing the appearance of the button. If the request is pending to be received, we can change the button to say "Registering..." and add a icon that lets the user know the site is working

Changing the Button depending on if the request has been received or is pending

Part 2 of changing the Button UI according to if the site is still working

Implementing error messages if the form didn't validate appropriately

This code will pick up the values sent to it by the AJAX form, and if all is correct, it will go ahead and register the user

Creating our Register Request Handler

We use ifs to test different cases. Inside the if we must always provide a test that evaluates to either True of False. For example:

if 5 > 10

Here the test is "5 > 10", and will evaluate to False

Learn about "if" statements in Python

Implementing form validations

Since it's code that will be used by more Request Handlers, we can abstract it and put it into the common area, our YumSearchRequestHandler

Abstracting our JSON response to our Custom Request Handler

Making jQuery change the modal content according to what the server returns

Creating the data Model in the DataStore

Never, ever, ever store passwords as plain text. We need to encrypt them.

About storing Passwords

About Storing Passwords (PDF Notes)
4 pages

Implementing Password encryption with salts

About regular expressions and email validation

Checking whether the email already exists, or not

Preparing to change the modal's body dynamically with jQuery

Changing the modal's HTML according to the response returned back from the AJAX
Sending automatic Emails in App Engine
3 Lectures 18:04
Creating an Email Object

Finishing the send_mail function

There seems to be a bug in the gcloud commands with email sending. We need to quit out of our app, and start it in another way:

First, I'm going to change directory to some folder which from there I can navigate forward both to my project and to the SDK folder. For me, that'll be the home directory (~)

 cd ~ 

Then we need to start the dev_appserver.py located in google-cloud-sdk/platform/google_appengine and pass in the directory to the app.yaml file in our app

 python google-cloud-sdk/platform/google_appengine/dev_appserver.py Projects/AppEngine/yum-search-2/default 
Sending out our first email with App Engine!
Logging in users
7 Lectures 49:23
Creating our Login Screen

Implementing the Password checking functionality

Some theory on cookies and security

Implementing cookie signing and cookie validation functions

Writing cookie sending and cookie reading functions

Creating a "Login Required" wrapper

Finishing and testing the Login Required wrapper
Full Text Search - Searching through documents using keywords
12 Lectures 01:10:23
What are Full Text Search Indexes?
5 pages

Full Text Search Index Quizz
3 questions

Full Text Search allows us to search through millions of indexed documents using a couple of keywords. The documents retrieved by the search will contain those keywords.

This is something hard to achieve with a traditional database such as MySQL or even the DataStore for that matter. Databases aren't really designed for that use case, that's why we need to use the Search API

Preview 03:18

Creating the Account Page

Creating the post recipe template

Building out the recipe form to add new recipes and index them

Creating the Recipe data model

Creating the Add Recipe class method to add and index new recipes

Indexing recipes into our Full Text Search Index

Picking up the data sent by the user

Saving the photo uploaded by the user

Implementing the Add Recipe function in the Post Recipe Request Handler

Finishing and fixing some bugs
Querying the Full Text Search Index
12 Lectures 01:13:23
Querying the Search API, filtering by current User

Displaying the results on the Account Page

Building queries for the Search Results Page

Creating the Search Results Page

Fixing a small error

Creating the Recipe Page Request Handler

Implementing the Recipe Page HTML and template

Testing the image resizing functionality App Engine provides

(optional) Installing the Pillow library

Serving resized images

Finishing the Recipe Page

Finishing the Home Page
Building our Parser!
26 Lectures 02:26:51

Fetching 1.5 million URLs to load into our parser

Setting up our Parser, assigning dedicated resources to it

Launching our App with the parser module

Loading the URLs into a Queue

Picking up tasks form the queue

Figuring out how to extract information from the source site

Adding the BeautifulSoup library to our project

Parsing Recipe Titles

Parsing Recipe Image URLs

Parsing Prep Times and Cook Times

Parsing Recipe Ingredients

Parsing Recipe Directions

Fetching or downloading the Recipe Images

Saving the image to our Google Cloud Storage bucket

Saving and indexing the parsed recipe

Debugging our save process

Couple of cosmetic changes

Loading a batch of 1000 URLs into queue and testing parser

Debugging the ingredients function

Debugging the Prep Time and Cook Time functions

Debugging the Photo Fetch function

Debugging the Prep Time and Cook Time functions again

Debugging the HTTP redirects case

Testing our Search Engine

Finished Yum Search Source Code
Deploying our app and configuring a custom domain
2 Lectures 15:11

Configuring a domain name to point to our app
1 More Section
About the Instructor
Michael Gradek
4.2 Average rating
28 Reviews
318 Students
1 Course

My all-time favourite quote is "If everything seems under control, you're just not going fast enough" by Mario Andretti. I wake up each day dreaming of creating truly outstanding and engaging products millions of people will want to use.

I studied Business Management, but technology always laid deep in my heart from the moment I first got my hands on a computer. Since a young age, I self-taught myself coding and web development, both front-end as well as back-end.

I can firmly say that having both Business and Technological skills has allowed me to get the jobs I always wanted to get at amazing tech companies, but more importantly, has allowed me to be free. Freedom in the form of being capable of building projects and startups that allow me to live the life I always dreamt of.

My personal goal is to pass this freedom on to more people, hopefully you too.