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.1 (24 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.
295 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 131
  • Length 12 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2015 English

Course Description

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.

What are the requirements?

  • 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

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
06:52

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.

05:59
  • 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
1 question

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

02:37

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.

05:40

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.

What happens when we try access a website?
1 question
08:45

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.

05:10

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

Why Google App Engine?
1 question
Section 2: Getting started: Guest Book app in Google App Engine
06:51

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! :)

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

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!

06:50

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.

05:18

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.

02:48

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.

Quizz :)
01:00
What will happen if we try to send a request to the path '/hello'
1 question
07:00

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.

Routing in App Engine
4 pages
09:56

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.

03:37

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

07:00

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 
07:26

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 quizz
2 questions
02:29

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

06:40

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() 

04:48

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

08:04

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

Understanding dictionaries in Python
06:07
05:00

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

03:58

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).

05:51

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

Section 3: Structuring our Recipe Search Engine project
05:39

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!

01:23

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"

03:07

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 ;)

01:45

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

03:57
  • 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
03:10

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.

What is a router?
1 question
09:20

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.

Finishing our custom Request Handler
02:49
05:17
  • 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> 
04:26

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 :)

Why do we need to abstract?
1 question
Section 4: Writing the HTML of our pages
Implementing a top Navigation Bar
12:26
Implementing a Bootstrap Modal
02:38
Creating a Register form inside a Modal
03:22
Adding more inputs to the form
01:29
Finishing the modal HTML
02:17
07:52

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? :)

What is AJAX?
1 page
02:53

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
05:52

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

Part 2 of changing the Button UI according to if the site is still working
01:11
Implementing error messages if the form didn't validate appropriately
04:32
02:35

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

09:16

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

Implementing form validations
05:30
03:46

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

Making jQuery change the modal content according to what the server returns
04:48
Creating the data Model in the DataStore
07:16
09:51

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

About Storing Passwords (PDF Notes)
4 pages
Implementing Password encryption with salts
10:37
About regular expressions and email validation
07:08
Checking whether the email already exists, or not
01:42
Preparing to change the modal's body dynamically with jQuery
04:28
Changing the modal's HTML according to the response returned back from the AJAX
02:32
Section 5: Sending automatic Emails in App Engine
Creating an Email Object
05:05
Finishing the send_mail function
06:09
06:50

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 
Section 6: Logging in users
Creating our Login Screen
09:01
Implementing the Password checking functionality
07:07
Some theory on cookies and security
08:31
Implementing cookie signing and cookie validation functions
08:03
Writing cookie sending and cookie reading functions
03:07
Creating a "Login Required" wrapper
07:56
Finishing and testing the Login Required wrapper
05:38
Section 7: Full Text Search - Searching through documents using keywords
What are Full Text Search Indexes?
5 pages
Full Text Search Index Quizz
3 questions
03:18

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

Creating the Account Page
05:02
Creating the post recipe template
04:14
Building out the recipe form to add new recipes and index them
14:48
Creating the Recipe data model
06:47
Creating the Add Recipe class method to add and index new recipes
06:26
Indexing recipes into our Full Text Search Index
07:04
Picking up the data sent by the user
04:35
Saving the photo uploaded by the user
09:43
Implementing the Add Recipe function in the Post Recipe Request Handler
02:10
Finishing and fixing some bugs
06:16
Section 8: Querying the Full Text Search Index
Querying the Search API, filtering by current User
06:25

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

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.

Ready to start learning?
Take This Course