Computer Science
Gilmour AcademyLancerTech
  • Our Curriculum and Department
  • Intro to Programming
    • 1: Parts of a Computer
    • 2: Parts of Python
    • 3: DRY Turtle
    • 4: Turtle Design App
    • Wordle with Turtles
    • 5: Interactive Turtles
    • OLD 5: Replit, GitHub, and repositories (Oh my!)
    • 6: Raspberry Pi / GoPiGo
    • 7: Kivy
  • Intro to Web Design
    • 1: Internet?
    • 2: Websites?
    • 3: Bootstrap Template
    • 4: Graphics and Branding
    • 5: Collaboration
    • 6: Advanced Editing
    • Publish Static HTML
  • AP Computer Science
    • 1: Logic & Instances
    • 2: How Java Works
    • 3: Data Types & Flow
    • 4: Strings
    • 5: Objects & References
    • 6: Inheritance & Algorithms
    • 7: Data Structures
    • 8: Sorting
    • 9: Review
    • Data Science
  • Web App Dev
    • 1: Core Concepts
    • 2: MVT Pattern
    • 3: Hello Flask
    • 4: Install Flaskinni
    • 5: Tour Flaskinni
    • 6: Visualize Your App
    • 7: Theme & Blueprint
    • 8: Standup Your DB
    • 9: Advanced Topics
    • 10: Deployment
  • 2D Game Design
    • Class Overview
    • Gamemaker Studio 2 and Github Setup
    • Game 1: Bouncing Ball
    • Turning in your games
    • Game 2: Maze
    • Game 3: Ping Pong
    • Game 4: Breakout
    • Game 5: Tank Battle
    • Game 6 Highlights
    • DO NOT DO:
    • Game 7: Final Project
    • Publish to Opera
    • FAQ
  • 3D Game Design
    • 1: Class Overview
    • 2: Installation
    • 3: Exploring the Unity UI
    • Game 1: Rolling Ball
    • Game 2: Tanks
    • Game 3: Third Person Platformer
    • Game 4: Final project
    • FAQs
    • OLD: Distance Learning Setup
    • OLD: GIT
  • 3D Modeling & Fabrication
    • Installation
    • Fusion 360 Interface and Sketch Modeling
    • Primitive Modeling
    • Patterns
    • Appearances and Rendering
    • Building Community Gallery Page 2023
    • Parametric Modeling
    • 3D Printing Concerns
    • Assemblies and Mechanical Design
    • Laser Cutting
    • Sculpt Tools
    • Milling Concerns
  • Robotics 7
    • Software Installation
    • Python basics (trinket.io)
    • Python Turtle
    • Programming for the Ev3
    • Setting up for clarity
  • Robotics 8
    • Replit
    • Python review
    • Kivy Basics
    • Calculator
  • Competitive Robotics
    • Hardware Team
      • CAD Examples
      • Elevators
    • Software Team
      • Command Pattern
      • Example Command
      • Subsystem
      • Running Your Code
      • Under the Hood
      • RoadRunner
      • Vision Processing
  • Archives
    • Adiletta Archives
      • Old Web
        • Ex: WordPress CMS
      • ItP
        • OLD: Parts of Python (old -- Mr. A)
        • OLD: 5: Raspberry Pi
        • OLD: 6: Deploying Code
        • OLD 7: Nav Algorithm
    • Vanek Archives
      • OLD Robotics 8
        • OLD: End of Class Project
      • OLD Competitive Robotics
        • Untitled
        • Webots Videos
      • OLD Robotics 7
        • Trinket Introduction
        • Lists: x/y position
        • Functions: Math program
        • Lists: Grocery List
        • Study Guide Program
        • Tic Tac Toe Game
        • Dice Roller Program
        • Visualization
        • Dice Roller + Visualization
        • OpenSCAD: Installation
        • OpenSCAD: Command Sheet and Intro
        • OpenSCAD: Difference
        • OpenSCAD: Variables
        • OpenSCAD: Union
        • OpenSCAD: For Loops
        • OpenSCAD: Final Project
      • OLD Art I - Blender Sculpting
        • Class Overview
        • Installation
        • Lesson 1 - Tools
        • Lesson 2 - Detail
        • Lesson 3 - Base Mesh: Metaballs
        • Lesson 4: Converting metaballs and adding detail
        • Lesson 5: Masking, Hiding, and Working with Multiple Objects
        • Lesson 6: Joining Objects & Basing
        • Lesson 7: Sculpture Painting
        • Student Gallery: Animal Sculpts
        • Lesson 8: 3D Compositon
        • Lesson 9: The Project - Putting it all together
        • Lesson 10: Developing the image further
        • Lesson 11: Layout the base metaball mesh.
        • Lesson 12: Final Detail
        • Lesson 13: Basing and Painting
        • Final Project Gallery
      • OLD Fab
        • OLD Building Community Project Gallery
        • Copy of Building Community Project Gallery
        • old Building Community Project Gallery
      • OLD: Turtle Design App
      • OLD Arduino Robotics 8
        • Arduino Basic Commands Cheat Sheet
        • Logging into Tinkercad
        • Arduino, Circuits, LEDs and Resistors
        • Functions and Variables
        • Serial Monitor
        • Buttons and Interrupts
        • Traffic Light Project
        • Potentiometers + Servos
        • Piezo Buzzer and Tone();
        • Sequencer Project
        • Arrays and for loops
        • Extra Loop Practice
        • Refining the Sequencer
        • Servos
        • Ultrasonic Sensors
        • Final Project
Powered by GitBook
On this page
  • Expectations
  • Learning Targets
  • Hello Flask
  • Alternative
  • Challenge
  • Variables from a route
  • Link to another page
  • Basic templating
  • What's Missing?
  • No Templates and Few Routes
  • No Models or Database
  • No Interactivity
  • Few Libraries

Was this helpful?

Export as PDF
  1. Web App Dev

3: Hello Flask

Previous2: MVT PatternNext4: Install Flaskinni

Last updated 4 years ago

Was this helpful?

Expectations

Where are you going to do your coding? If you try to run your app, what other software is required? How are you going to save or publish your work? Configuring your , , and is essentially your workspace.

Learning Targets

  • I can create and view a blank Flask app.

Before we get into the structure and mechanics of our code, let’s build the most basic of Flask apps. It’ll help set some context as we then start to learn particular skills. It’s important that you start from scratch as it builds confidence knowing you can start from the ground-up.

Hello Flask

Let's look at the most simple possible Flask app.

Alternative

In case Repl.it isn't cooperating with your browser, here's a simple view of a basic "Hello Flask" app.

hello.py

import os  # connects the OS library so we can lookup our own IP address
from flask import Flask   # this connects our framework of tools we'll need

app = Flask(__name__)  # here we create our app in memory. It's maybe the most important line of code

@app.route('/') # if anyone tries to go to the homepage, their request will be routed to the method below
def index():
    return 'Hello from Flask'

if __name__ == '__main__':
    host = os.getenv('IP', '0.0.0.0')
    port = int(os.getenv('PORT', 5000))
    app.debug = True 
    app.run (host=host, port=port)

Challenge

Variables from a route

If I go to /hello/george, can you make the screen say, "Hello, George?" How do we pull a variable from the URL on that GET request?

Link to another page

Build another route and switch between two pages.

Basic templating

Use render_template

What's Missing?

If you can understand some of the elements that are missing from this simple example, you’ll have a greater appreciation for the core of our Flask app and the many components that we’re about to study.

No Templates and Few Routes

Our initial application, hello flask, had one singular route @app.route('/') which is very basic. Just a homepage, that’s it. On the other side, “Flaskinni” includes numerous routes so you see blog and account pages just to name a few. Each route in Flaskinni calls templates with method calls like render_template('index.html'). These are just as their name suggests, templates or outlines of the final HTML page a user sees. Templates are a big deal (⅓ of our whole MVT structure).

No Models or Database

In the Hello Flask application, there is no database or model schema being used. There are no objects like user, admin, blog post in the app. Also in the Hello Flask app, we had no database, but in Flaskinni there is a database, and a schema that shows how the database will be set up. Also in Flaskinni there is code that creates database tables and is able to send the data to the database in the format laid out by the schema.

No Interactivity

Our initial Hello Flask application had no interactivity whatsoever as illustrated by the one simple message that is sent to the user. Our app only responds to GET requests, never a POST request. In other words, the user is only getting static information and is never sending information back to the server or requesting more specific information. For example in the Flaskinni application a user can post a blog post or can request or a certain blog post.

Few Libraries

Libraries are expansion packs, they're files containing compiled code that allow the app to reference them later in other files. Libraries allow the app the run faster and have more capabilities. Instead of calling methods over and over while writing the app, the user can call the library file. The linking of libraries allows a file to gain the capabilities of the library module without having to define those methods again.

Want to know the difference between ‘GET’ and ‘POST’? You see them mentioned as a on line 16 in the picture below? Well, you should know the name Tim Berners Lee. GET and POST are two of the HTTP requests that travel over our network and provide us the Internet. Simply put, GET is a request for a page and POST is when the user is submitting a form. Knowing the types of HTTP requests gets really important if you ever decide to use to use this web app to power mobile apps, too.

kwarg
Flask-RESTful
IDE
dependencies
VCS
This is probably woefully out of date by now.