1 of 100

Computer Science

Our Curriculum and Department

This page will introduce you to the course material we're building and how the Computer Science Department at Gilmour Academy operates.

Intro to Programming

A review of the basics of computing, programming and robotics. We'll build simple Python apps and play with Raspberry Pi's.

We program little turtles to dance on the screen then we play with real robot cars. Learning how to program is an awesome time. I love my job.

Acceptable Layer of Abstraction

For the people that say "I'm not good with computers"

Computer Science may be intimidating but like any other field of study, you don't have to learn it all at once. We're skipping so much in this class. Don't worry about it. You'll have enough tools to figure out if you want to invest the time to learn the deeper, more challenging (and more powerful) stuff.

In any line of questioning, you can keep asking "Why?" Eventually, you just stop when you think you've learned enough. For example, you can legitimately claim you know how a car works (you put gas in, turn a key, etc) even if you're hopeless as a mechanic. You've got a different acceptable layer of abstraction than a mechanic claiming too that she knows how a car works. The inner-workings of a car engine may just be an abstract idea that you only broadly understand (something about spark plugs). The point: You can start learning really cool tech without having to shift your acceptable layer of abstraction too much. It'll be fun.

You need to know about the pieces, even if you don't know exactly how they work.

In order to understand basic computer programming, you will need to understand some of the components in your computer. If you understand the basic shape of the environment, the behavior of programming languages will have better context. You won't need to understand exactly how a processor works, but you'll need to know roughly how it fits into the picture so you can solve some common problems.

Links and Resources

Software

Free Code Training

Best intro: (Python, git, Command Line)
Fun:
Solid: https://sololearn.com
Hard, smart:

1: Parts of a Computer

What are the parts that make up a typical computer? Let's take one apart, label its components and talk about what each does.

Expectations

Learning Targets

I can disassemble and reassemble a computer.
I can describe the function of basic PC components.

Assessments

You will be asked comprehension questions to identify parts of a computer from their images, what their primary purpose is, and what their common problems are
You will be observed disassembling and reassembling a computer and checked that you can identify all the components and that you can reassemble the machine correctly

Components

Imagine a person juggling while singing an old song from their childhood. Part of the juggler's brain is tracking the motion of each ball and the timing of each throw. Another part of the juggler's brain is recalling the song. His stomach is fueling his muscles. His nervous system is communicating controls from his brain to his arms. His eyes are taking in information. His voice is outputting the song. We'll use this as a reference as we go over hardware.

Central Processing Unit

Description

CPUs or processors do math. They are a super complex series of logic gates made unbelievably small. What are logic gates? Imagine a wire with two light switches in a row. Since both switches are on the same wire, both need to be flipped to the ON position in order for power to flow through the line. That's an AND gate. If the wire split into two instead and each fork had its own switch, that would be an OR gate as only one or the other has to be enabled for power to flow. Processors have millions and millions of these complex arrangements made in microscopic sizes.

According to our analogy, the CPU is the part of the juggler's brain that's calculating the path of each ball while also managing all the other signals through his brain. It doesn't cover all the functions of the brain in our analogy, but it is at the center of the comparison.

Problems with CPUs

CPUs use a lot of power and generate heat. Metal wires create a little resistance as electricity flows through them and that energy turns into heat. You must manage the heat that gets created by your CPU using a fan or other cooling system. If your computer collects a lot of dust, it will insolate

If a CPU is older it means it could be generating more heat while executing fewer commands. And if the CPU is slow, that means it must be connected to a whole bunch of other parts that are older and slower too.

Extra Information

In case you're curious and don't mind a little challenge, learn about the and how computer engineers have gotten around it.

Random Access Memory

Motherboard

Hard Disk Drive

Power Supply and Case

Peripheral Devices

Additional Practice

Look through and read how the experts recommend you shop for components
Create a Quizlet set and practice these terms

APIs Make Life Easier

No one writes code totally from scratch. All programmers use a variety of preexisting systems that allow for easier development. We write code that interacts with other layers. That's an API or Application Program Interface. We can interact with our operating system, helpful resources or other apps.

BIOS

The BIOS or Basic Input/Output System is firmware. It's something built right into your motherboard. It helps boot your computer up and gives something for the operating system to run off of.

Operating System

The OS is a big deal. It serves as a vital intermediary between software and hardware. Instead of having to program every little operation for each device in our computer, we can just use the commands provided by the operating system.

Interpreter

The interpreter allows us to execute our written Python code. It's our interface with the Operating System which is in turn interfacing with our hardware.

Libraries and Packages

Part of what makes Python so great are all the tools and frameworks available. Want to build a web application? Use Flask or Django and you'll be up and running in minutes. Do you want tools for data analysis? Machine learning? Robotics? There's an ocean of open-source tools ready to give your app superpowers.

2: Parts of Python

Expectations

We're going to take a tour of Python. You are expected to know generally what these things are, you're not yet expected to know how to use them. So no freaking out. We'll play around with some fun projects after a quick look around.

Learning Targets

I can make a hello world app in Python.
I can differentiate between compile-time, run-time, and logic errors.
I can describe the basic constructs of programming languages such as variables, conditionals, loops, and flow control.

Assessments

You will be answering comprehension questions about the layers supporting software execution.
You will be creating and submitting your several small Python apps using trinket.io

Let's go to trinket.io and build some simple stuff, starting with print("Hello, world")

We'll go over each of these concepts in greater detail. For now, let's skim over all the big topics.

Class Videos

The first video deals with the following concepts: Functions, Variables, Operators and Conditionals

Class 1/4

Class 1/11

Class 1 / 20: User defined functions

class 1/24: for / while loops

Key Concepts

Data Types

The first thing we'll tinker with is declaring variables and storing information. Variables in Python are dynamically typed, meaning you can store one type of information in a variable and then switch it without any fuss. Other languages are more strict and don't allow such shenanigans.

Operators

We use math symbols for most common operations. But Python has some cool operators. Read!

Conditionals

Conditionals control how the program flows based on input from the user (in an app) or sensors (on a robot.

3: DRY Turtle

Expectations

Learning Targets

4: Turtle Design App

Class Videos

2/1

Wordle with Turtles

Daily Lessons

Wordle with Turtles Assignment

7: Kivy

Kivy App 2 Rubric

Create an interactive program using the kivy framework. The app should be useful to you (i.e.; not a game or a tech demo).

The program will be graded as follows:

Usefulness - 2pts

5: GitHub Classroom

2-A: Selection and Iteration

Conditions

A fundamental element of flow control is whether or not you want to execute a block of code. We use a conditional or if statement to test something. That test will result in a true or false value. If it's true, we'll execute the block of code. If it's false, we'll skip to the end of the block of code.

Review

Acing your AP test is about testing for bugs in your understanding, studying the fix, then practicing the solution.

Review the concepts:

Crush all the Codingbat Problems

Get your speed up:

Watch Videos:

Going Pro:

2D Game Design

Developing games using GameMaker Studio 2 and drag and drop programming

Class Overview

Expectations

We will be learning programming concepts using GameMaker Studio 2's drag and drop interface as well as some simple GML code. All the concepts will be taught through the creation of games. Through PowerPoint instructions, you will be able to work at your own pace and return to concepts which might be confusing.

Mr. Vanek will be available to help if you have bugs that crop up in your programming and to clarify points in the tutorials.

In each unit, you will be responsible for completing an assignment which builds on the concepts you have learned. Feel free to flex your creative design muscles, especially in the assignment portion of the game. Adding extra features or finding new ways to accomplish them will help your game and your learning.

Gamemaker Studio 2 and Github Setup

Turning in your games

Game 2: Maze

The maze game increases user control with directional inputs as well as creating a game progression through multiple rooms.

Maze Instructions.

Note: Maze reuses the resources from the first game. If you need to download the assets again, they can be found .

Game 3: Ping Pong

With Ping Pong students learn to deal with multiple player inputs as well as create a simple scoring system.

Ping Pong Instructions

///Bounce against walls

move_bounce_all(true);
move_outside_all(direction, 100);

Ping Pong Sprite and Sound Resources

HINTS for assignment!

DO NOT DO:

Mario Resources

Game 7: Final Project

Please turn in the planning sheet answers by filling them out in a google doc and sharing it with me or by handing a printed sheet to me at the start of class.

Places to find sprite and tile assets

Assignment

Publish to Opera

https://gamemaker.io/en/tutorials/publish-to-gxgames-tutorial#_ga=2.75440849.2104760815.1662492576-1508294388.1639755424

3D Game Design

Developing games using the Unity framework and the C# programming language

1: Class Overview

Expectations

We will be learning C# programming and Unity development during this course. All the concepts will be taught through the creation of games. Through tutorials, you will be able to work at your own pace and return to concepts which might be confusing. Mr. Vanek will be available to help if you have bugs that crop up in your programming and to clarify points in the tutorials.

For the final project of the semester, you will be developing your own game. If you have good ideas for the form the game may take during the course of the semester, be sure to write them down.

2: Installation

We will be installing Unity Game Development Engine to develop your games.

Expectations

Students should set up their personal computers to work with Unity and to share their save files between computers.

Learning Targets

I can set up a computer to be ready for work outside of class.

Assignments

Download and install:

Unity Hub
The most recent version of Unity
Github Desktop

3: Exploring the Unity UI

We will be looking at the user interface for Unity, how to navigate, where to find different aspects of our programs.

Building a game is a huge task. Unity organizes the many elements in our game, connecting objects with scripted actions. We must learn how a user interfaces with all Unity's powerful capabilities. \

Tutorial

Unity has changed

Game 4: Final project

Assignment

For the final project, you will be designing and executing a game of your own design. This will be a proof of concept game. The importance is placed on the game's design and programming, not on how it looks. Make sure that levels are playable before working too much on art assets.

The final project needs to fulfill the following requirements:

The program runs with no bugs that break the game.
The game should be FUN. This is a game, after all.
The project should have a minimum of two workings animation with transitions between them.
The project should have a minimum of three levels or be procedurally generated. Levels should have transitions between them.
The project should use some aspect of user interface (text) either via instructions or heads up display.
The project should have a good use of materials and / or material assets from the asset store.

FAQs

This page will be updated with videos to offer greater clarity or detail about Unity concepts. This is also the repository for student requested videos which are outside the classroom content.

EXTRA DETAIL

INPUTS

OLD: Distance Learning Setup

This page describes how to get setup for distance learning, spring 2020.

//Put this code in the update

        for (int i = 0; i < 20; i++)
        {
            if (Input.GetKeyDown("joystick 1 button " + i))
            {
                print("joystick 1 button " + i);
            }
        }


        if (Input.GetAxis("TestInput") != 0 )
        {
            print(Input.GetAxis("TestInput"));
        }

OLD: GIT

This video will show you how to prepare your video for version control and turning in projects.

Syncing your project

3D Modeling & Fabrication

This course focuses on what it means to make art in the modern world. Students will use the latest technology to explore digital painting, sculpting using computer controlled wood cutters and 3D printers, and interactive works using programmable electronics motors and sensors.

Installation

Download the fusion 360 software from the link below and install it on your computer. You will have to create an Autodesk account. Please use your Gilmour email.

Fusion 360 Interface and Sketch Modeling

Keychain requirements (1 point each)

Your keychain should:

Primitive Modeling

Assignment:

In your group, you will create a community of buildings which should relate to each other and a theme of your choosing.

Your building should:

Patterns

Appearances and Rendering

3D Printing Concerns

Assemblies and Mechanical Design

Laser Cutting

Sculpt Tools

Final Assignment

Find a image of a cartoon character and create a sculpt based on that character. Simpler is better for this project. You should include the entire body of the character.

Milling Concerns

Robotics 7

Software Installation

Python basics (trinket.io)

Video 1

Terms:

Variables: Words that can store data. A variable might store a number, a word, a sentence or a list of things.

Python Turtle

Turtle assignment

Programming for the Ev3

Basic Drivetrain Setup:

Defining our own functions:

Setting up for clarity

Robotics 8

Introduction to App Development, Kivy, and Intermediate Python.

Replit

Python review

Functions, Variables, Comments and Simple Data Types

Calculator

Hardware Team

Much of the CAD work discussed in this section uses skills built in our 3D Modeling & Fabrication class.

CAD Examples

Elevators

Command Pattern

Conceptual overview of the "what" and "why" of Command pattern

The Command pattern is the overall design that SolversLib uses. It's how we keep the code from becoming any more of a confusing mess than it already is — a pattern we can follow. This page delves into the "what" and "why" behind this pattern, equipping you to write efficient and maintainable robot code—the kind where Future You doesn't curse Past You's organizational choices.

https://docs.seattlesolvers.com/

What is Command Pattern?

The Command pattern boasts a rich history dating back to the late 1970s and early 1980s. The concept emerged within the Smalltalk and Xerox PARC communities, documented in publications like Anneliese Schürr's 1992 paper "Separation of Concerns and the Command Pattern." Initially focused on graphical user interfaces (GUIs), the pattern's flexibility was adopted in various software development domains.

Its popularity soared with the rise of design patterns in the 1990s, solidified by Erich Gamma et al.'s influential book "Design Patterns: Elements of Reusable Object-Oriented Software." This widespread recognition cemented the Command pattern as a valuable tool for promoting loose coupling, reusability, and maintainability in object-oriented programming.

The Command pattern originates from software design principles and offers a structured way to manage robot actions. Instead of writing long, blocking code sections, you create independent classes called Commands. Each Command encapsulates your robot's specific task, like driving forward, turning, or activating a mechanism.

Why Command Pattern?

Farewell, Blocking Code

Traditional robot programming often involves lengthy, sequential code blocks, potentially hindering responsiveness and multitasking. If your robot is stuck inside of a loop that gradually moves a motor, it's not doing other things. It's blocked until you move on.

Non-blocking commands eliminate the need to do one thing at a time by repeatedly calling execute functions that run until their isFinished condition is reached. This allows the robot to perform multiple actions simultaneously. This means smoother operation and the ability to react to real-time events effectively.

Reusable Gems

Commands are designed for reusability. You can create a generic RotateCommandand adapt it for different distances or speeds across various parts of your code. This reduces code duplication and simplifies maintenance.

Collaborative Codebase

SolversLib encourages modularity with separate Command files. This translates to clear ownership and promotes a collaborative development environment. Team members can work on their specific Commands without worrying about conflicts in common code sections. Version control systems like Git become even more valuable as team members push their Command commits independently.

Utilities in SolversLib

This toolkit is packed with stuff — way more than just commands (though they're still a big deal and I'm going to keep writing about them). Check out all the things:

Command Management:

Subsystem Framework: Organize your robot's hardware into logical subsystems that own their resources and prevent conflicts.
Command Scheduling: The scheduler handles command lifecycle, requirements, and interruptions automatically.
Command Composition: Chain commands together, run them in parallel, or create complex sequences without callback chaos.

Hardware Wrappers:

Motor & Servo Control: Simplified classes with built-in caching to reduce unnecessary hardware writes. Special support for Axon servos with absolute encoders.
Sensor Interfaces: Wrappers for gyros, distance sensors, color sensors, and more.
Gamepad Extensions: Enhanced button and trigger handling with intuitive methods like wasJustPressed() and wasJustReleased().

Movement & Navigation:

Drivebase Classes: Pre-built support for differential, mecanum, kiwi, and X-drive configurations with both robot-centric and field-centric control.
Kinematics & Odometry: WPILib-style classes for tracking robot position using encoders and gyros across different drivetrain types.
Controllers: PID, feedforward, and SquID control for precise mechanism movements.

Utilities:

Geometry Classes: Pose2d, Translation2d, Rotation2d for coordinate math.
Look-Up Tables: Store and retrieve tuned values (velocities, angles) based on distance or other inputs.
Timers & Math Helpers: Built-in timing functions and utilities like clamp for value constraining.

Pedro Pathing Integration:

Built-in support module for seamless integration with Pedro Pathing autonomous navigation.

Video Overview

6: Raspberry Pi / GoPiGo

Expectations

Learning Targets

I can connect to my Raspberry Pi via SSH.
I can deploy an app to a Raspberry Pi.
I can compose a higher-ordered algorithm.
I can update code on my Raspberry Pi.
I can make short, descriptive commit messages.

Assessments

You will submit a link to your GitHub repo.
You will demonstrate your capacity to control your robot.
You will be asked regular comprehension questions about Raspberry Pis.

Terms

Printed Circuit Board (PCB)

Single Board Computer (SBC)

This is a PCB with all the basic components found in a personal computer (PC)

Getting Started

Fork code

Visit the and fork it
Open Replit and start a new project from github
Use your forked github project. You should now see your code on your editor. Explore student.py and teacher.py.

Push code to GitHub

Whenyou make changes to your app and want to update the code on your robot, we first need to send the code from our computers to GitHub. This happens in the version control tab by typing in "What did you change" and hitting Commit & Push.

Pull code on robot

Now we'll remote control our robots using SSH. We'll use Linux commands to pull the updated code down from GitHub.

Open putty and enter the ip address of your robot. Click open.

login: pi
password: robots1234

Note: You will not see the password when typing. This is a security feature!

Make sure you're in the right folder: cd Piggy
Pull your updated code: git pull origin master
Run your app: python3 student.py

Calibrate

We'll need to configure your class variables.

Midpoint

If the servo wasn't mounted perfectly, the midpoint won't be 1500. But that's rarely the case. We should adjust this to fit your particular robot.

Motor Speeds

Sometimes one motor will perform faster than the other, giving the robot a noticeable veer. We can try to correct for this drift by adjusting the motor power.

Moving Your Robot

Dance Project

Check out what commands are available from the API that's provided for you. These are the commands you're inheriting.

Higher-Ordered Logic

Your dance method should read as close to regular English as possible. The nitty-gritty commands are all kept in the particular methods being called in your dance algorithm. So your dance method should just call a handful of moves. Within those moves, you'll use the specific motor commands below and get into the nitty-gritty of robot control.

deg_fwd(angle) - how many degrees do you want your wheels to rotate? You need to pass the angle
turn_to_deg(angle) - rotates to the given angle as calculated by the piggy's gyroscope
turn_by_deg(angle) - turns relative to it's current heading. Positive values rotate right and negative rotate left

Shutting down the robot

To shut down your robot, type: sudo shutdown now in the putty window.

Basic Movement Methods

Square
Dance
Add safe_to_dance() method which checks surroundings and only dances if it has enough space.
Move to wall and stop

Intermediate Movement Methods

Write a move method which scans slightly to the left and right of the robot as it moves forward.
If it senses a wall straight ahead, it goes around to the closest side as above (put that move in it's own method)
If it senses a wall at the edges of the robot, swerve slightly to miss the wall (this swerve should again be in it's own method).

Coming soon.

2: MVT Pattern

Expectations

In the last section, you learned there's a lot of layers to a stack. But even within our stack's application layer, there's a lot of complexity. If you don't keep organized, your code quickly gets overwhelming and difficult for other people to understand if you need help. But we find that we can sort-of split our code into three areas, 1) code that stores stuff like user data, 2) "logic" code, or rather the stuff that loads data executes actions like making a sale, and 3) the HTML visuals we see when we interact with the app. This pattern was originally called MVC. We use a slight twist on that called MVT.

Learning Targets

I can describe the rationale for the MVT design pattern.

Background

There are countless ways to organize the files and code used in an application. How does one choose? How do you plan out the parts of your app? There’s big advantages to following best practices, using a pattern that others can recognize. You may hear people references the Gang of Four (GoF) when referring to . MVC is one such pattern, but for reasons I'm still figuring out, Flask uses a conflicting acronym for remarkably similar pattern.

Model: Database schema or rather, what gets stored in memory. But we won't have to learn a database language like SQL just yet. We'll have a tool called an ORM to convert Python into SQL for us. We'll use that to setup our SQL database tables for each object
View: Routes internet traffic. Here's where we connect the /url/someone/typed/ to the Python thinking that will respond to request for that certain webpage. The view is our controller. It's our application logic--our central brain.
Template: HTML with bits of {{ python }}

(We will be using a modification of this pattern called MVT)

The model (M) is a model or representation of your data. It’s not the actual data, but an interface to the data. The model allows you to pull data from your database without knowing the intricacies of the underlying database. The model usually also provides an abstraction layer with your database, so that you can use the same model with multiple databases.

The view (V) is what you see. It’s the presentation layer for your model. On your computer,the view is what you see in the browser for a Web app, or the UI for a desktop app. The view also provides an interface to collect user input. In our MVT pattern, this becomes T. So MVT and MVC both use the term "view" but for different parents of the same triangle. This seems needlessly cruel to those studying this stuff.

The controller (C) controls the flow of information between the model and the view. It uses programmed logic to decide what information is pulled from the database via the model and what information is passed to the view. It also gets information from the user via the view and implements business logic: either by changing the view, or modifying data through the model, or both. In our MVT pattern, this is the V and will be found in our views.py file.

Model

Schema

If I launched flask shell I could talk with Python while flask is running app and I could ask app.models for all the objects we use around our code. Like app.models.User. That would be the schema. It's not an actual user that I'm referring to when I say app.models.User. That's the definition, the skeleton or the schema. The individual records in the User table will used for the instantiated objects in my code.

Schema is more than just the list of properties (like first_name and such) and functions of an object in your app. It also describes how objects are connected in your database.

Relationships

: Communication diagrams model the interactions between objects in sequence. They describe both the static structure and the dynamic behavior of a system.

: table that associates two other tables in a many-to-many relationship. Let's say you make a website to manage school clubs. Students can be in many different clubs and clubs can have many different students. Somewhere in our database we need to write down a connection between each Student.id and each Club.id. It's the list of connections between two objects. You want to leave the club? Remove the record that links the two id's.

There's more: Instead of just connecting two objects, what if we wanted to qualify that relationship? Not only do you want to say "this user belongs to this club," but you also want to mark down that she's the president of the club. So now we have a Membership object that can have all sorts of properties that describe your role on the club and what you're allowed to do or not do. Association objects are super cool.

Queries

: a technique that lets you query and manipulate data from a database using an object-oriented paradigm. When talking about ORM, most people are referring to a library that implements the Object-Relational Mapping technique, hence the phrase "an ORM". An ORM library is a completely ordinary library written in your language of choice that encapsulates the code needed to manipulate the data, so you don't use SQL anymore; you interact directly with an object in the same language you're using. For example, here is a completely imaginary case with a pseudo language: You have a book class, you want to retrieve all the books of which the author is "Linus". Manually, you would do something like that:

book_list = new List(); sql = "SELECT book FROM library WHERE author = 'Linus'"; data = query(sql); while (row = data.next()) { book = new Book(); book.setAuthor(row.get('author'); book_list.add(book); }

With an ORM library, it would look like this:

book_list = BookTable.query(author="Linus");

The mechanical part is taken care of automatically via the ORM library.

Questions

So object-relational mapping is a programming technique for manipulating data?
- Yes, it’s the tool (ours is called SQLALchemy) that keeps us from having to write many SQL commands of our own.

: a method of associating user-defined Python classes with database tables, and instances of those classes (objects) with rows in their corresponding tables.

: the process of transferring data between computer storage types or file formats. If we ever want to change our SQL tables to add new information to every record, we’ll need to migrate the data from the old table to the new table. We’ll use a tool called Alembic to do this.

View

Routes

: moving data from source to destination. Our Flask controller will take requests to, for example, yourwebsite/home and match it to the code that builds the home page

: Session is the time interval when a client logs into a server and logs out of it. The data, which is needed to be held across this session, is stored in a temporary directory on the server.

Decorators

Template

: generating HTML code from a mix of Python and HTML, this is done in Flask using Jinja2.

: a template engine for the Python programming language. It’s the software that takes the mix of HTML and Python and renders it down to just HTML which is then sent to the user.

Inheritance

There's no reason to write every page used in your app on separate html files. Templating allows us to extend or start from a base file that has all the nav bar and footer stuff we need. This is a type of inheritance and it's pretty neat.

Static Assets

Static assets are your images and CSS files and other stuff that doesn't get run like code and have to get served up to your users. We'll find ways of making this process go fast.

3-B: Monster Project

Monster Battle Game - Project Assignment

Overview

Enhance your game by implementing monster special abilities and customizing the 4th action button. Make your game feel complete and polished!

Part 1: Monster Special Abilities (Required)

Goal: When monsters attack, check if they have special abilities and trigger unique effects.

Where to work: In the monsterAttack() method, after damage is dealt.

Steps:

Check each attacking monster's special() ability (it returns a String)
If the ability is not empty, add custom behavior based on the ability name
Display appropriate messages for each special ability

Example Pattern:

Possible Special Abilities to Implement:

Vampire: Heals for 50% of damage dealt
Poison: Deals 5 extra damage for the next 2 turns
Rage: Increases damage by 25% when below 50% health
Thorns: Player takes 10 damage back when attacking this monster

Tips:

You may need instance variables to track ongoing effects (like poison duration)
Update the setupGame() to create monsters with different special abilities
Test each ability one at a time

Part 2: Customize the 4th Button (Choose One)

Option A: Implement Use Item System

Make the 4th button use consumable items from your inventory.

Tasks:

Create health potions in setupGame() (see GameDemo.java for examples)
The useItem() method already works - just add items!
Create 2-3 different item types:

Option B: Implement Player Special Abilities

Replace "Use Item" with a unique special ability for each character class.

Tasks:

Change button label in setupGame() to "Special"
Add a useSpecial() method with unique abilities per class:
- Fighter: Berserker Rage - Double damage for 2 turns

Cooldown Pattern:

Part 3: Polish Your Game (Required)

Make your game feel professional and complete!

Required Improvements:

Victory Conditions: Display final stats when game ends (turns survived, damage dealt, etc.)
Better Targeting: Let player choose which monster to attack (hint: show monster numbers in message)
Status Display: Show active effects in messages (poison status, shield amount, cooldowns)
Balance Testing: Adjust character stats so all classes are viable

Optional Enhancements:

Add more monster types with different stat ranges
Create boss monsters with multiple special abilities
Add difficulty scaling (monsters get stronger each wave)
Implement combo attacks (bonus damage for consecutive attacks)

Submission Checklist

At least 3 different monster special abilities working
4th button fully functional (items OR player specials)
Game is balanced (winnable but challenging)
No major bugs (crashes, negative health, etc.)

Tips for Success

Test frequently: Run your game after each small change
Start simple: Get one special ability working perfectly before adding more
Use print statements: Add System.out.println() to debug issues
Study GameDemo.java

Example Monster Creation with Specials

Example Command

A function-by-function discussion of a Command's essential components

Commands are the heart of SolversLib, promoting clean and organized robot code. Before we get too technical, let's dissect a basic Command example, exploring its critical sections.

Constructor

When crafting a Command, the constructor serves as its architect, defining essential elements before the Command's execution:

1. Establishing Requirements:

Timeout: Specifies the maximum duration for the Command's execution, ensuring it doesn't run indefinitely. This is a default feature but can be eliminated for commands that run by default (like the DriveCommand).
Subsystem Dependencies: Identifies which robot subsystems (e.g., drive, arm, elevator) are crucial for the Command's operation. This declaration is accomplished through the addRequirements(subsystem) call. That subsystem will cancel any other commands when this one is run.
Handy References: Creates shortcuts to frequently used robot components, streamlining code and enhancing readability. Connection to our robot object allows us to check on its state variables.

2. Pre-Execution Setup:

The constructor executes during robot setup, preparing the Command before its actual launch. This separation from the initialize() method, which runs immediately before execution, allows for careful configuration and resource management.

Initialize

The initialize() method acts as the Command's launchpad, performing critical setup tasks right before execution:

1. Setting the Stage:

Timer Activation: Initializes the timeout timer using timer.start() to enforce the Command's duration.
Target Calculation:
- Motor Positions: Calculates encoder target positions for precise motor control.

2. Key Considerations:

Once and Done: initialize() executes only once before the Command's execution loop begins.
Preparation Focus: Its primary responsibility lies in configuring initial values, targets, and action plans, setting the stage for successful execution.

Essential Reminder:

Although initialize() lays the groundwork, the execute() method, covered next, drives the Command's actions and interacts with the robot's physical systems. This non-blocking and concurrent nature can be a new concept for high school programmers.

Execute

The execute() method is the Command's heart and soul, translating plans into action.

1. The Execution Loop:

Imagine execute() as a conductor, continuously calling the shots throughout the Command's lifespan. It doesn't have a set duration; it will keep getting called until its isFinished() method signals completion. However, it's crucial to avoid blocking calls like while loops or sleep() that would halt the entire robot program.

2. Concurrent Commands: Sharing the Stage Gracefully:

Remember our analogy of multiple Commands as athletes? They might perform simultaneously, especially if they don't require the same resources. execute() needs to consider this possibility, ensuring smooth cooperation and avoiding conflicts.

3. Key Principles:

Non-Blocking: Steer clear of blocking calls that would freeze the robot program. Instead, favor short, focused actions within execute() and rely on isFinished() for termination.
Concurrent-Friendly: Design your execute() logic to function correctly even when other Commands are running concurrently, as long as they don't interfere with the required resources.

4. Understanding the Challenge:

This non-blocking and concurrent nature can be a new concept for high school programmers. Here's an analogy to help:

Imagine juggling. Each Command is a ball you keep in the air. You can't hold onto any ball for too long (blocking call), or you'll drop the others (other Commands needing resources). But by quickly tossing and catching each ball (short actions), you can keep them all going simultaneously (concurrently).

Remember:

execute() is the action stage, but design it wisely to avoid blocking and ensure smooth cooperation with other concurrent Commands. It's like the insides of the while loops we're avoiding because they're blocking (and the condition of those avoided while loops is the isFinished()). Embrace non-blocking techniques and keep your execute() methods focused and efficient for optimal robot performance.

isFinished + end

The final act of our Command play unfolds in these two methods:

isFinished(): The Curtain Call Condition

Think of isFinished() as the stage manager, waiting for the right moment to signal the end of the Command's performance. Similar to the condition in a while loop, it continuously evaluates whether the Command has achieved its goal. If isFinished() returns true, the curtain falls, and the Command gracefully exits.

Key Considerations:

Exit Criteria: Define clear conditions for completion within isFinished(). Common criteria include:
- Time elapsing (using the timer started in initialize())
- Sensor readings reaching desired values

end(): Taking a Bow (Even if Interrupted)

The end() method serves as the post-performance cleanup crew, ensuring everything is left tidy after the Command finishes, whether naturally or interrupted by another Command.

Key Considerations:

Power Down: Stop motors, reset servos, and release any acquired resources.
State Management: If using an ENUM to track subsystem state, ensure it reflects the actual final state, especially if interrupted. Update the ENUM variable accordingly in end().
Cleanup Thoroughness: Leave the robot and subsystems ready for the next Command without lingering effects.

1: Core Concepts

Expectations

Slow down. Get your head around these ideas before we lean into the code. Being able to come back and reference these terms as they come up will help you put the whole puzzle together.

Learning Target

I can describe a full-stack application and the tools required to build one using relevant vocabulary.

What is a Stack?

A stack is all the systems used to run an app. Usually, several computers are involved but that's not a must. Let's look at the various layers in a stack...

: Web stack contains an operating system (OS), a programming language, database software and a Web server. A full-stack developer is someone capable of building an app or solution that addresses each of these components.

Let's understand the layers by discussing the programming languages used in each.

Client

This is what you see on your page. HyperText Markup Language, gives content structure and meaning by defining that content as, for example, headings, paragraphs, or images. CSS, or Cascading Style Sheets, is a presentation language created to style the appearance of content—using, for example, fonts or colors.

is a programming language commonly used in web development. It was originally developed by Netscape as a means to add dynamic and interactive elements to websites. It used to be used solely for client-side purposes, but now servers are running apps build using NodeJS. JavaScript has nothing to do with Java.

... but how do we get this HTML / CSS / JS on our client computer?

: the message system that runs the World Wide Web. This is how website information is sent over the Internet. There are many different types of HTTP requests, including GET and POST, one asks for information from the server and the other submits information to the server.

Web Server

: In computing, a shell is a user interface for access to an operating system's services. In general, operating system shells use either a command-line interface (CLI) or graphical user interface (GUI). CLI is used to communicate to the shell in the form of text input.

(Secure Sockets Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browsers remain private and integral.

: An Operating System provides services to both the users and to the programs. It provides programs an environment to execute. It provides users the services to execute the programs in a convenient manner.

Web Application

Okay, we've got a web server receiving signals from our client's computer. Now comes the part where our server runs the app we've built and gives us cool information.

: Python is a high-level programming language designed to be easy to read and simple to implement. It is open source, which means it is free to use, even for commercial applications. Python can run on Mac, Windows, and Unix systems and has also been ported to Java and .NET virtual machines. Most Python distributions rely on CPython, which means your code will boil down and run using the C language. Flask is a Python library.

Framework is described as “an abstraction, in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software, is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. (additional )

Database

Structured Query Language, used to request information from a database. SQL has been the favorite query language for database management systems running on and . Increasingly, however, SQL is being by PC database systems because it supports (databases that are spread out over several ). This enables several on a to the same database simultaneously.

: is an (ORDBMS). As a database server, its primary functions are to store data securely and return that data in response to requests from other software applications.

More Python Vocab

: a computer program that directly executes, i.e. performs, instructions written in a programming or scripting language, without requiring them previously to have been compiled into a machine language program.

: One of the design ideas behind Flask is that there are two different “states” in which code is executed. The application setup state in which the application implicitly is on the module level and request handling.

Imagine two people watching a movie at the same time. Because those two people have different life experiences, they will interpret the movie in a different way. When your app is running, it loads variables and libraries that gives it a particular “experience.” Our application context refers to the references at play.

: encapsulates code and data to implement a particular functionality, has an interface that lets clients to access its functionality in an uniform manner, is easily pluggable with another module that expects its interface, is usually packaged in a single unit so that it can be easily deployed.

A module is a loose term. Python uses the term to describe a single file, sometimes just one part of a larger library of tools that you can import and use within your app. If you put a single line of code in a file, you’ve built a module.

: A folder where a copy of all dependencies is kept separate from the system installation. This allows you to work on several apps without having to manually toggle which version of the language interpreter your system is using. It's a safe and responsible way to develop your apps.

Virtual environment does not include “your app” this is separate. And you may have meant modules, not models. The model refers to the objects and database tables we’ll use in our app. Meanwhile, the libraries or modules that our app depends on in order to run will be installed in our virtual environment.

: “a collection of implementations of behavior, written in terms of a language, that has a well-defined interface by which the behavior is invoked.”

: A dependency is a file that something you are trying to install requires. These are the required libraries and modules for your app to function.

An efficient programmer keeps their dependencies in a virtualenv, but it’s not required to do so. You can install them globally if you’d like, but other apps running on that machine might complicate things. There are other ways to manage dependencies too.

: is a system for tracking changes in computer files and coordinating work on those files among multiple people. Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.

Throughout the course of the semester how often will we be referring back to older versions of our app?

: An item in memory with a variable name, location reference, and the instantiated code provided by some class definition. Objects have individuality, and multiple names (in multiple scopes) can be bound to the same object. This is known as aliasing in other languages. This is usually not appreciated on a first glance at Python, and can be safely ignored when dealing with immutable basic types (numbers, strings, tuples).

A method is a function that “belongs to” an object. (In Python, the term method is not unique to class instances: other object types can have methods as well. For example, list objects have methods called append, insert, remove, sort, and so on. However, in the following discussion, we’ll use the term method exclusively to mean methods of class instance objects, unless explicitly stated otherwise.)

In almost all programming languages, functions accept variables that are used in their code, (i.e. f(x) = x + 1). The parameter is simply the variables that are referenced within a method or behavior. This can also be referred to as an argument. A Python module which can contain submodules or recursively, subpackages. Technically, a package is a Python module with an __path__ attribute. parameter. A named entity in a function (or method) definition that specifies an argument (or in some cases, arguments) that the function can accept.

: In class-based object-oriented programming, a constructor (abbreviation: ctor) is a special type of subroutine called to create an object. It prepares the new object for use, often accepting arguments that the constructor uses to set required member variables.

: Inheritance is a feature that represents the "is a" relationship between different classes. Inheritance allows a class to have the same behavior as another class and extend or tailor that behavior to provide special action for specific needs.

: A string literal specified in source code that is used, like a comment, to document a specific segment of code.

In-line comments are written with a # and add extra notes around our app. ‘’’DocString’’’ comments provide more detailed explanations right underneath class and function headers.

6: Visualize Your App

Expectations

If you don't start visualizing things before you're knee-deep in code, your product will lack a cohesive visual style and an intuitive workflow. Building an app starts with colors, logos and most importantly, wireframes.

Learning Targets

I can develop a brand identify for my product including logos, color pallets, fonts, and tone of voice.
I can outline the workflow of my app in a wireframe.

Setup a local folder using something like Google Drive to collaborate with your team. Download a theme. Start a PowerPoint or Google Slides document to take notes, build a scrapbook of visual designs that can help you shape the message you’re trying to send.

Select a Theme

Rather than design our own HTML layout and polish the finer details and effects, we’re going to use a theme. We’ll look at and . You must make sure your theme is based on , preferably the most recent version. You want to make sure that the theme has a variety of elements and layouts that will allow you to mockup pages quickly.

For rapid prototyping, don't be afraid of using Flaskinni's default theme. Proving your app concept with a pleasant, neutral design is smart.

Custom layer

Never make changes to theme.css, style.css or whatever your file is called that governs the primary rules of your theme. We will override the rules using different files. That way we can more easily upgrade the theme in the future. The custom.css file (that hopefully you're using to produce) in our <head> after the theme’s CSS. That way, our rules will overwrite the theme’s. We’ll have the final say.

Change base.html

Implementing a new theme is tricky business. You'll have to rebuild your static assets and modify all the templates. The base.html file will need the most amount of work as it will need to reflect We talk about that more .

The Brand

Building your app, your team, and your company requires a lot of drive. A brand identity is a flag on a battlefield for your soldiers to rally.

Colors

Go to the websites of some major brand names you know and look at the colors used. If you did deep enough, you'll find a variety of button colors, but most things follow a pretty consistent pattern. It's time to set up such a pattern inside our CSS.

These palettes can help you color your logo
expand the 5 colors you get from coolors
Eva will help you fill in any gaps on the standard Bootstrap colors (primary, success, info, warning, danger)

Sass

Hopefully you have a _variables.scss file where you can drop all your color palette. Many themes include these assets. Flaskinni's default theme comes from so you can take advantage of the to quickly implement your colors.

If you're using SourceLair, you may need to upgrade Sass so it can handle recent Bootstrap templates. So first run npm install -g sass so you can then run: sass app/static/scss/custom.scss:app/static/css/custom.min.css

The code below are example MacOS settings for the Live Sass Compiler extension for VS Code.

Fonts

You'll need a header and a body font at least. Sometimes a logo font is used as the headers, sometimes not. You may want to pick out your logo first and then find complementary fonts afterwards.

Logo

Start sketching ideas on your branding document. It can be very powerful to have a logo designed early in project development as it sets styles, colors and gives you something to reference when discussing your project.

Stock Images

Shutterstock.com -- start building collections of images you might want to use

Add images to your branding document. Scrapbook images that you don’t intend or are unable to buy and use but speak to the type of look and feel you want (or want to avoid). Have a different section for images that you may want to purchase and use later on. Free images you can start to download and organize into your team’s project folder. Paid images you can start to save in bookmarks, links on your slides, or in other ways.

Wireframes

The wire-framing that needs to be added to your branding document is essentially just shapes illustrating what your app can do. You could use Google Slides in a real hurry. Ideally though, you should use the wire-framing process not only to determine all the steps your users will need to take, but also how you'll organize the interface. You're making UI decisions as well as UX.

I try to start by first looking through the pages that come with my HTML theme and see what sort of layout, widgets and objects are readily accessible. Keep them in mind when designing your wire-frames. After this early phase, we will be building full HTML mockups to illustrate these wire-frames.

HTML mockups

Building HTML mockups is much, much slower than Adobe XD. You ought to sketch out your apps before you code HTML elements. But designing the HTML elements using the theme assets you'll have in production takes you from planning the outline of the user experience (UX) to the mechanics of the actual interface (UI).

Before you advance, be sure you’re making steady progress through the Flask Udemy course (and getting help when stuck)

3: Bootstrap

Use a Bootstrap template to produce a stunning webpage.

Learning Targets

I can build a hero with a call to action.
I can implement a color palette via CSS.
I can build a responsive Bootstrap website.
I can implement Bootstrap classes and components into a website.

What is Bootstrap?

. Twitter publishes a front-end framework that has significantly impacted web designers. It's great, and you'll spend a lot of time with .

What is responsive?

Responsive design isn't just about websites looking good on different screens; it's about delivering an optimal user experience on any device. Imagine navigating a complex website on a tiny phone instead of a spacious desktop – the frustration is real! Responsive design solves this by adapting the website's layout, content, and functionality to various screen sizes, ensuring a seamless user journey.

Bootstrap's Grid System:

Bootstrap, a popular framework, makes responsive design accessible. Based on 12 columns, its grid system provides a flexible layout structure. In your example, <div class="col-md-6"> and <div class="col-lg-6"> define elements that occupy 6 columns on medium and large screens, respectively.

Breakpoints and Device Adaptation:

The magic happens with breakpoints and specific screen widths where the layout adjusts. Bootstrap uses predefined breakpoints for @media queries, essentially saying, "When the screen size reaches X, apply these styles." Your task with the inspector window is to find these breakpoints! Look for @media rules defining styles for lg, md, and sm (small) screens. Notice how Bootstrap adjusts the number of columns these classes occupy at each breakpoint.

Exploring Device-Specific Adjustments:

While Bootstrap offers a solid foundation, sometimes device-specific tweaks are necessary. For example, on smaller screens, you might:

Collapse content sections by default and use buttons or icons to reveal them.
Increase font sizes for better readability.
Simplify navigation menus or switch to hamburger menus for better accessibility.

Beyond Bootstrap:

Remember, Bootstrap is a tool, not a silver bullet. You might need to go beyond its base styles as your projects evolve. This is where understanding CSS media queries and flexbox becomes crucial for more granular control over responsive layouts.

Beyond Screen Size:

While the screen size is the primary factor, a responsive design also considers other aspects:

Device orientation: Portrait and landscape modes on phones and tablets require different layouts.
Resolution: High-resolution displays might necessitate adjustments for image quality and text sizes.
Network speed: Consider loading optimizations for users with slower connections.

The Importance of Testing:

Responsive design isn't a one-and-done task. Rigorous testing on various devices and screen sizes is crucial. Use browser emulators and real devices to identify and fix any layout issues and ensure a consistent user experience across platforms.

Container - Row - Column

Every Bootstrap page starts with the same fundamental building blocks: Container, Row, and Column (C-R-C). Think of this as the skeleton that holds your entire layout together. Just like a house needs a foundation, walls, and rooms, Bootstrap needs containers, rows, and columns to create organized, responsive layouts.

The Container: Your Layout's Foundation

The container is the outermost wrapper that holds all your content. Bootstrap offers two types of containers:

.container - Creates a responsive fixed-width container that adjusts at breakpoints .container-fluid - Creates a full-width container that spans the entire viewport

The container provides proper margins and ensures your content doesn't stretch awkwardly on very wide screens. It's like setting boundaries for your design – everything stays contained and centered.

The Row: Horizontal Organization

Inside every container, you need rows to create horizontal groups of columns. Rows use negative margins to offset the padding that columns add, creating perfect alignment.

Important rules for rows:

Rows must be placed inside containers
Only columns should be immediate children of rows
Rows create horizontal groups of columns using flexbox

The Column: Where Content Lives

Columns are where your actual content lives. Bootstrap's grid system is based on 12 columns, and you can combine them in various ways to create different layouts.

Column class breakdown:

col- - The base column class
md - The breakpoint (xs, sm, md, lg, xl)
6 - The number of columns to span (1-12)

The Magic of 12 Columns

Bootstrap's 12-column system is incredibly flexible. Here are some common combinations:

Two equal columns: col-md-6 + col-md-6 = 6 + 6 = 12 ✓
Three equal columns: col-md-4 + col-md-4 + col-md-4 = 4 + 4 + 4 = 12 ✓

Putting It All Together: A Complete Example

Here's a basic Bootstrap page structure that you'll be building in CodePen:

Key Takeaways for Your CodePen Assignment

When building your C-R-C structure, remember:

Rows go inside containers: They give you readable margins. We typically avoid putting rows directly in the body
Columns go inside rows: And content goes inside columns
The numbers must add up to 12 - Or less if you want some columns to not fill the full width
Use breakpoints thoughtfully - col-md-6

This structure is the foundation of every Bootstrap layout. Once you master Container-Row-Column, you'll be able to create complex, responsive layouts with confidence.

Setting up a Bootstrap Project

VS Code with Downloaded Template:

What is VS Code? VS Code is a popular, downloadable code editor for your computer. It provides powerful features like syntax highlighting, code completion, and debugging tools.
Using VS Code: You can download the StartBootstrap template yourself and open it in VS Code for editing.
Pros of using VS Code:

Download a StartBootstrap Template:

Visit StartBootstrap () and browse their collection of free templates.
Choose a template that suits your project's needs.
Click on the template's preview page and find the download button.
Select the option to download the zipped file.

Open the Template in VS Code:

Open VS Code.
Go to File > Open Folder.
Select the unzipped folder containing the downloaded template.
Click

Create a Custom CSS File:

Within VS Code:
- Go to File > New File.
- Name the file custom.css.

Open a Preview of the Site:

In VS Code:
- Right-click on the index.html file and select Open with > Live Server.
This will launch a local preview of the website in your default browser.

Make Changes and Refresh:

Edit the HTML and CSS files directly within VS Code to customize the website.
Update your custom.css file with desired styles.
Save your changes.

Continue Building:

Use the template's structure and provided classes as a starting point.
Add your own content and modify the HTML as needed.
Refer to the template's documentation for available components and their usage.
Use your custom.css file to personalize the design further.

Additional Tips:

Regularly save your project folder to Google Drive for backup and collaboration.
Explore Bootstrap's extensive documentation and online resources to learn more about its features and customization options.
Remember, practice makes perfect! Start with this guide, experiment, and have fun creating your unique website!

9: Advanced Topics

Expectations

From here on out, your project is going to vary from everyone else’s. Once your models are done, you’ve now got to build out each view and template that will serve the workflow of your MVP. Work with your teacher to identify what your MVP needs to do, (we’ll call this your requirements based off of the SRS stage of the IEEE software lifecycle). Once we work out what exactly you’re building in your module, we’ll populate your Trello backlog with loads of tasks. And as we solve those weird tasks, we’ll start to build the collection of topics below.

Learning Targets

I can research and hack together an MVP.

Session

Decorators

The term decorators in programming refers to a sort of flag or notice put at the start of a method to signal some sort of special treatment. We use @login_required to trigger Flask-Security’s verification that the user is carrying the encrypted token from our system given to a confirmed user. I would imagine verification of authority and privileges is the most common reason to use a decorator in Flask. We use them .

Forms

The form is our primary method of collecting information from the user. Depending on your application's need, you may need to looking closely into . Meanwhile, here are a few recipes that have been requested.

Drop-down

When filling out a form, you may want to have a drop-down of a user's friends or some other set of data unique to that user. How can you provide those dynamic options within a form template?

The most typically recommended answer is the .

And what if you want one drop-down to populate the options of another dropdown?

Build Options From a View

Just use a SelectField with no real options and populate them after you build the form.

Placeholders

Examples:

(placeholders)

Captcha

SQLAlchemy and Databases

backref VS back_populates

Two back_populates equals one backref. Using backref declares a two-way relationship. It’s more efficient than dropping a back_populates on both ends of the relationship but I prefer it because I’ve been confused too many times staring at a class wondering about its relationships unaware that another class has declared a relationship backref in a different file.

Relationship Loading: Lazy?

Let’s say you want to query the database for a user’s contacts with a built-in relationship such as current_user.contacts. You can get a list back from the database with just that one command. However, what if you know you’ll always need additional filters on that query. You don’t want the results quite so fast, instead you’d like the SQLAlchemy query not to complete its task but rather to keep the search open and ready for additional filtering or sorting.

Command Line Interface

flask shell

This is a really useful skill we should go over as it helps us test and figure out where things go wrong.

flask shell

if python just said it doesn't know what that is, then you need this line: from extensions import db

from user.models import User

my_users = User.query.all()

look at your user(s): my_users my_users[0].email

my_users[0].first_name

Talking to Postgres

Let's make sure we can login directly to our database. You can skip this step if you're, say, in the midst of a hackathon, the app is working, and you've got to keep moving. In the long-run, it's critical you know how to flex control over your database directly.

If you're using Terminal, bash or PowerShell, you should be able to type psql to open a command-line version of PostgreSQL. You can also use a friendlier interface like pgAdmin, though I recommend making the effort to explore both. You'll need to specify your user when accessing psql. Specifying your user can vary a lot depending on how you approach it. Good thing you know how to Google.

Linux:

sudo service postgresql start psql (try listing the current databases) \l (if you need to quit) \q

If you’re the superuser using sudo -i then you’ll be on the root account (don’t do that). Postgres has a built-in admin you can log into with su - postgres and then psql (you shouldn’t need that but it’s useful).

You can edit accounts' psql access and credentials with stuff like:

ALTER ROLE ubuntu WITH PASSWORD 'ubuntu';

You probably won’t need this very often, but it’s important to know if you want to understand how your app works. Launch psql and be very careful as you tiptoe through our database:

(connect to our database, which in this example is named “db”) \c db

(check out the tables in our database) \dt

(see what we’ve got in our post table) SELECT * FROM post;

If there are no posts, we’re going to create the first one, which will have the ID of zero. If there are posts already, we’re going to create one with the next highest number.

( of a post)

INSERT INTO post (id, user_id, title, subtitle, body, slug, live) VALUES (0, 0, “Some title”, “Some subtitle”, “Some body”, “someslug”, True);

(let’s quit psql) \q

Launch your app and check it out. ?

(go back into psql and connect to our db then what we made)

DELETE FROM post WHERE id=0;

(make sure it’s gone) SELECT * FROM post;

Configuring Flask-Mail

This line needs to be in your settings.py:

SECURITY_EMAIL_SENDER = private.ADMIN_EMAIL

JavaScript

Setting Nav Links Active

Confirmation Buttons

Just as we keep a custom.css file, your project should have a custom.js function. Something like this could be very handy. Now you can just add class=”confirmation” attribute to any <a></a> and it’ll have a JS-powered confirmation window.

AJAX: Server Without Reloads

Actions of our app are triggered by routes in our view. If you type in the url of your site, /index, your browser sends a GET request to that route to the homepage route in your app. Your browser loads the page. But what if you want to avoid refreshing the page? What if you want to send a message from a modal window and press submit without losing your spot on the current page?

Passing Variables from Flask to JavaScript

Calling a JavaScript Method on a Button

<a onclick="hidePaidBills()" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="hide paid"><i class="fa fa-eye"></i></a>

Sending SMS Messages with Twillio

Updating Dependencies

We use as a sort of bubble that contains our version of Python, Flask, and all the many other libraries used. Each library is likely to see improvements and security fixes. It’s important to keep this codebase updated but it’s an awfully risky process. Updates might change how some of the libraries work and may force you to change or cause new bugs. Best practice is to keep a previous version of your handy and to build thorough .

Before asking to do a lot of work, you may want it upgrade it first: pip install --upgrade pip

Update all libraries (copied from StackOverflow)

sudo -H python3 -m pip freeze --local | grep -v '^-e' | cut -d = -f 1 | xargs -n1 sudo python3 -m pip install -U

If you don't want to overdo it with the sudo nonsense: pip freeze --local | grep -v '^-e' | cut -d = -f 1 | xargs -n1 pip install -U

Create a requirements document:

pip freeze > requirements.txt

Test to make sure the app works. If it doesn't, undo changes tracked by git to get you your previous version of the requirements.txt. Reinstall your dependencies based on all the previously recorded versions.

Documentation

Inside docs/ folder are files produced by .

Enable the support of the Google-style docstrings which are much easier to read:

Unit Tests

The most responsible way to build software is to start with unit tests. A script will mimic various types of users as they test every function on your site. The unit test will report when something acts differently than expected. I struggle with keeping to this discipline. A more sophisticated implementation of Flask’s unit test system will be the best sign of my own professional growth in this area.

4: Install Flaskinni

Learning Target

I can run Flaskinni after having cloned its code, configured its dependencies in a virtual environment, set up a database, and added an environmental variables file.

Install Party

A day before some hackathons or events like , experts will host a session to help everyone install the tools they'll need. If you serve pizza, you can call pretty much anything a party.

Your OS

Whether you're using Windows, macOS, or Linux, you have a responsibility to your teammates that you keep your machine updated and organized. Run system updates, keep files off your desktop, have a system of organizing your project files. Knock this out early so it doesn't jam you up while installing complex programming tools.

Dev Tools

Go slowly. Go patiently. Things may not work. You will have to Google stuff, study, maybe ask for help, and solve your problems. Keep hacking at the problem. That's how we all learn best.

Python

Your computer only understands Python code through a or . Your computer uses bytecode to run the software. Our interpreter changes our beautiful Python code into a jumble of machine instructions. Ensure you use the same version in development as you do in production. That means if your server will run, say, Python 3.10, that's what you use to build the thing.

Postgres

This is the open-source database tool we're going to use. You'll set up Postgres to host your own private database. It won't be available outside of your computer. It's just so while you work on an app, it can access a practice source of information.

Remember postgres password. Since my computer's database is only used for building and testing apps, I set the password also to postgres

Git / GitHub

Mac users should have and run xcode-select --install in their terminals. Windows users need to install . This gives you the commands to clone a repository, manage your changes to code, and sync

NPM

Once upon a time, Javascript was just used to make pictures slowly spin on a webpage. Now we've got NodeJS letting this language that used to be purely stuck inside a web browser to now run independently on your computer. It's so popular, the tool to quickly install awesome new Node packages is a must-have.

Choco & Brew

Node Package Manager often encourages the installation of amazing CLI installers like choco or brew (Mac and Windows respectively). So if you like quickly installing awesome things and can accept the responsibility to do so safely, get one!

Scss

Old-school CSS is a pain to program at a large scale. Sass is much more powerful. Your computer has to have it to run the service built into Flaskinni. If you've got Choco or Brew installed, adding Sass is a breeze.

Editor

VS Code

I recommend these extensions

(they make it much easier to see your files)

Setup Code

You can edit your code on the cloud with cool sites like . A cloud-based IDE is likely going to be based on Linux. That means you'll need to know a bit about . Linux plays well with coders and a cloud-based IDE makes it easy to share your development progress with people and get feedback faster. That's big.

You can also set up right on your computer. You should know how to do this just so you can practice putting all the pieces together. I prefer to program in the cloud and locally and use to keep the two environments in sync.

Clone the repo

Use VS Code's git tool to pull down the repo from GitHub.com: https://github.com/dadiletta/flaskinni

Stand up the db

"Stand up" a database just sounds so much cooler than "set up," but it's the same idea. You can see in settings.py that Flaskinni by default is going to reach out to a PSQL database named db-flaskinni on the server 0.0.0.0. The username and password used to access the database are also loaded there. Changes to this information shouldn't be done in settings.py but rather a .env fille. But before we do any of that, fire up pgAdmin and create a database.

Env variables

Our .env file doesn't and shouldn't ever get synced to GitHub. It's our secure place to keep the unique variables for each environment where our app will run.

Virtual env

First you use the correct version of Python to launch its venv module to create a folder for our dependencies (also named venv):

Windows: python -m venv venv
Mac: python3 -m venv venv (as of this writing, Mac still comes with now-defunct Python2, so you need to distinguish between them)

Let's say you're using Windows and you need to specify a non-default version of Python. You may need a line like:/c/Users/smithj/AppData/Local/Programs/Python/Python3XX/python -m venv venv

Then we activate the virtual environment so all our required "expansion packs" or dependencies will be installed in our little bubble:

Mac: source venv/bin/activate
Windows: (might need) Set-ExecutionPolicy Unrestricted -Scope Process .\venv\Scripts\activate
Windows (using bash instead of default Powershell): source venv/Scripts/activate

If you've got a happy little (venv) before your terminal prompt, you're ready to run: pip install -r requirements.txt

Did one of the dependencies listed in requirements.txt fail to install correctly? It's a common problem that must be solved. uWSGI doesn't need to be installed in the development environment so you can #comment that line out. If psycopg2 is failing to install, you can comment that out and manually install the binary alternative, pip install psycopg2-binary. Running pip install wheel may also resolve many of the installation issues.

You're likely going to end up with the wrong version of Flask-Security. So next run: pip uninstall flask-security

pip uninstall flask-security-too

pip install flask-security-too

Flask run

After running flask run in VS Code, you should be able to visit to see your website.

Migrations

This is important! Pity the poor programmers that forget to set up their migration tools. Once Flaskinni is up and running the first time, run flask db init to allow Flask-Migrate to help with any future changes to your models. We'll talk about .

Alternate setups

Replit

Help! I don't know how to configure Replit's database service with SQLAlchemy. Their technical support doesn't know how to do it. They point me to ... and those folks can't crack it, either.

Docker

I need to study up on Docker. These are notes that I'll use to redo this section later. Trying new stuff is important, even if you're not moving it into your stack. Docker represents a booming growth in containers, and that's something serious web dev folks need to deploy at scale.

Make sure is installed, running, and logged in.
Clone git clone http://github.com/dadiletta/flaskinni
Edit the Dockerfile with environmental variables

What if it's not working?

You're going to get stuck... a lot. This is where you can distinguish yourself as a programmer. Every problem big and small you hack your way through makes you more legit. So enjoy the grind. It's important to read around the problem and not just through it. Sloppy copying from StackOverflow once you copy and paste the error into Google can get you in trouble. Get background research done to understand some of the bigger concepts. Be willing to reach out for help, but respect that other people are grinding away too. Always show evidence of your research when asking for help as it will build trust with your support network.

4-B: Sorting

We will write our most complex algorithms as we study efficient ways to sort collections of data. Some of these algorithms will require recursion, our most abstract and challenging topic to date.

Learning Targets

I can implement selection, insertion and merge sort algorithms.
I can compare sorting algorithms' efficiency.

Algorithms

We've talked about algorithms before, most especially around the shuffling patterns we've used in the Elevens lab.

Efficiency

The bigger the group of data, the more important it is to be efficient. Searching on the web or in a database needs to be awfully fast. We measure the efficiency of a complex search or sort algorithm in Big O notation.

Searching

Let's knock out a quick algorithm first, searching. The O(n) way is just a straight traversal. But we could chop that down to a O(log n) with a binary search:

The visualization of these patterns / algorithms / methods / whatever, is surprisingly helpful. You can get a feel for how we chunk the computer's task to organize a long list of numbers.

Selection Sort

Let's start with a nested loop, a boring old O(n^2) traversal and sort.

Now between the inner and otter loops, we do a 3-part-swap

Insertion Sort

Insertion sort has the same worst-case scenario efficiency as selection sort, but it has a much better best-case scenario efficiency.

Step 1: Nested loop with an inner loop traversing in reverse.

Still Step 1: The inner loop doesn't need to start at index`[0]`

Step 2: The inner loop goes backwards so long as the number that the outer loop has is bigger

Step 3: You'll have to move numbers over as you go to make room

Assignment

Create a class that uses Sortable and IntegerMonster. Hopefully, that and the code below is enough for you to figure out what to do next. If not, let's make some extra time to practice/read about inheritance in Java.

You'll have to use extends before implements. Potentially helpful analogy: I imagine "extends" as the class's last name and "implements" as job titles.

Surprise: Your client suddenly changes the SoW and insists that the sort methods' outer loops print the current state of the array neatly on one line. Each array during the sort should be labeled.

Recursion

What happens if I call a function that calls itself? You can use this as a trick to chunk information in a loop-like flow.

A base case is the critical piece of a recursive function that will terminate the recursive calls, and start the domino effect in the opposite direction.

If we have a base case in place (rhymes!) we can use recursion to solve some tricky problems in an elegant fashion.

Merge Sort

This is a great follow-up to the video below.

Let's start with some numbers to sort:

Check if nums has hit its base case. Is it already split up? If not, split it up.

Then we send each side to mergeSort. Notice we send the left side first. And the next copy of mergeSort will break that side up first too--all the way down to the base case.

But down at that last level, when they can't be broken down any further, we'll be left with a few useful ingredients, the (yellow) nums, the left side, l, and the right side, r. Now we'll shove l and r back together, in order, and overwrite the contents of nums. We'll do this in a separate function: merge(nums, l, r, mid, n - mid);

There are all sorts of variations on mergeSort and the merge function. The one from is pretty clever and fun to talk over. Check it out:

First notice how they include the post-operation increment, k++ (instead of ++k). This way, every time k is used, it increases the index tracker on the parent array. It's a clever touch. Meanwhile, i is serving similarly as the index tracker for the left side and j is serving the right side.

The first while loop proceeds until one of the counters hits their max. Then only one of the two remaining while loops will execute, collecting the last number.

Assignment

Create a class that extends NameManager and implements all required methods.

4-A: Data Science

I wanted to put our own spin on the Data lab from CollegeBoard for this project. Rather than just following the standard lab, we're going to analyze real-world video game sales data that will give you hands-on experience with classes, interfaces, and data processing in Java.

For this project, we'll be using a comprehensive dataset containing information about video games, including sales figures, critic ratings, user scores, and more. I've sourced this dataset from Kaggle: Video Game Sales and Ratings.

This project will give you practical experience with:

Creating and using custom classes
Working with interfaces
Processing CSV data files
Implementing search and analysis algorithms
Visualizing data patterns

Activity 1: Getting Started

Our project requires two main Java classes:

GameDataRow - Represents a single game record from our dataset
GameDataManager - Handles loading and analyzing collections of game data

Let's start by looking at how to set up the GameDataRow class:

Understanding the Class Header and Interfaces

The class header public class GameDataRow implements Comparable<GameDataRow> has several important components:

public - This access modifier makes the class accessible from outside its package.
class GameDataRow - Defines a new class named GameDataRow.
implements Comparable<GameDataRow> - Indicates that this class implements the Comparable interface.

The Comparable Interface

The Comparable interface is part of the Java Collections Framework and enables objects of a class to be compared to each other. When a class implements Comparable, it must provide an implementation of the compareTo() method:

The compareTo() method must return:

A negative value if this object should be ordered before the other object
Zero if both objects are equal
A positive value if this object should be ordered after the other object

In our implementation, we're sorting games by global sales in descending order (highest sales first).

Other Common Interfaces in Java

While we're only using Comparable in this project, here are other common interfaces you might encounter:

Serializable - Marks a class as capable of being serialized (converted to a byte stream).

Runnable - Used for classes whose instances will be executed by a thread.
ActionListener - Used for handling action events, commonly in GUI applications.
Iterable - Allows an object to be the target of the "for-each loop" statement.

Properties and Encapsulation

Now, let's determine what properties our GameDataRow class needs. Our CSV file contains 17 columns of data about each game, and we want to represent each data point as instance variables in our class.

Looking at the structure of our CSV file, we need to create properties that match each column:

Encapsulation Review

Remember that encapsulation is one of the four fundamental OOP concepts, along with inheritance, polymorphism, and abstraction. Encapsulation means bundling data and methods that operate on that data within a single unit (the class) and restricting direct access to some of the object's components.

Notice all our instance variables are marked as private. This is a key principle of encapsulation:

Private instance variables: By making our instance variables private, we prevent outside classes from directly accessing or modifying them.
Public accessor methods: We provide controlled access through getter methods (and sometimes setter methods).
Data validation: Through these methods, we can validate any changes to ensure they meet our requirements.

Good encapsulation ensures that the internal representation of an object can't be seen from outside the object's definition, which creates a "black box" effect.

Constructors

We need constructors to initialize our GameDataRow objects. A well-designed class should have multiple constructors to provide flexibility in object creation:

Notice I've included three constructors:

A primary constructor with all fields
A simplified constructor with only essential fields
A copy constructor to create a deep copy of an existing object

Accessor Methods (Getters)

Now we need accessor methods (getters) for all our instance variables. This is a perfect opportunity to use AI responsibly. Rather than typing out all these repetitive methods, you can ask Claude or an IDE's chatbot to generate them for you.

For example, you could say:

Please generate all the accessor methods for the GameDataRow class based on the instance variables.

This isn't plagiarism or cutting corners - it's using a tool to handle the tedious, repetitive aspects of coding so you can focus on the more challenging and creative aspects like designing algorithms and implementing the business logic.

Here's a snippet showing what a few of these accessor methods would look like:

Test-Driven Development

Let's talk about Test-Driven Development (TDD) - a software development approach where you write tests before writing the actual implementation code. This practice has been widely adopted by professional developers because it leads to more reliable, maintainable code.

In TDD, the process follows three simple steps, often called "Red-Green-Refactor":

Write a test that fails (Red)
Write the minimal code to make the test pass (Green)
Improve the code without changing its behavior (Refactor)

For our project, I've prepared a complete main method that serves as a test suite. It will systematically test all the required functionality of your GameDataRow class and tell you exactly what's missing or not working correctly.

Adding GameDataManager and Testing

Now that your GameDataRow class is complete, let's work with collections of games:

Copy the contents of GameDataManager.java file from this link:
Download the video_games.csv file and place it in your project directory. The location should match the path in the GameDataManager.loadFromCSV() method call.

Activity 2: Building Methods

Now that we have our class structure and properties defined, it's time to add meaningful functionality to our GameDataRow class. To complete this class, you'll need to implement several methods that analyze game data in different ways.

I'm providing you with a few utility methods that handle some of the trickier aspects of parsing data from the CSV file, such as handling non-numeric user scores. Let's first look at these provided methods:

I'm giving you these methods because:

The hasUserReviews() and getUserScoreNumeric() methods handle data conversion and error checking that might be challenging
The toString() method is lengthy but straightforward, and implementing it wouldn't teach you much

Now, let's focus on the methods you need to implement:

Method 1: getAverageScore()

Return Type: float

This method calculates the average between critic and user scores. However, there's a challenge: critic scores are on a scale of 0-100, while user scores are on a scale of 0-10.

Requirements:

Return a float representing the normalized average score on a scale of 0-10
Normalize the critic score to a 0-10 scale by dividing by 10
Handle cases where one or both scores are missing/invalid
Return the appropriate average or individual score based on what's available

Key Considerations:

What constitutes an "available" score? (Hint: check for positive values)
How do you handle the case where only one score type is available?

Hints:

You can paste this code into your method as a starting guide:

Method 2: getSalesPercentages()

Return Type: float[]

This method calculates what percentage of the global sales comes from each region (North America, Europe, Japan, and Other).

Requirements:

Return an array of float values representing percentages for each region
The array should have 4 elements, one for each region
Use the defined constants (NA_REGION, EU_REGION, etc.) for array indices
Handle the case where globalSales is zero to avoid division by zero

Key Considerations:

The formula for calculating percentage is: (regional sales / global sales) * 100
If globalSales is zero, return an array of zeros to avoid division by zero

Method 3: hasSalesData()

Return Type: boolean

This method determines whether the game has any sales data available.

Requirements:

Return true if any sales data (regional or global) is available
Return false if all sales fields are zero

Key Considerations:

Check all sales fields (naSales, euSales, jpSales, otherSales, globalSales)
Use logical OR operators to efficiently check multiple conditions

Method 4: hasCriticReviews()

Return Type: boolean

This method determines whether the game has critic review data available.

Requirements:

Return true if the game has both a critic score and a count of critics
Return false if either piece of information is missing or zero

Key Considerations:

Both criticScore and criticCount should be positive values

Method 5: getDominantRegion()

Return Type: String

This method determines which region has the highest sales for this game.

Requirements:

Compare sales across all regions and find the highest
Return a string representing that region ("North America", "Europe", "Japan", or "Other")
Handle ties by choosing the first region encountered with the maximum value

Key Considerations:

You'll need to track the maximum sales value and the corresponding region
You can use a switch statement to convert from region index to region name (see example below)

Method 6: getRegionalSales()

Return Type: float

This method returns the sales figures for a specific region.

Requirements:

Accept an int parameter representing the region (use the class constants)
Return the sales figure (as a float) for the specified region
Handle all four possible regions: NA_REGION, EU_REGION, JP_REGION, OTHER_REGION

Key Considerations:

Use a switch statement to select the appropriate sales figure based on the region parameter

Switch Statement Example

A switch statement allows you to select one of many code blocks to be executed. Here's how you might implement the getRegionalSales method using a switch statement:

The switch statement evaluates the regionIndex parameter and executes the code block that matches the case. The default case handles any values that don't match any specified cases.

Method 7: Implementation of Comparable

Return Type: int

You need to implement the compareTo method from the Comparable interface.

Requirements:

Override the compareTo method to compare games based on global sales
Higher sales should sort before lower sales (descending order)
Return negative value if this game has higher sales than the other game
Return positive value if this game has lower sales than the other game

Key Considerations:

Remember that returning a negative value means "this" comes before "other" in the sorted order

Activity 3: Results

Let's add one final method to our GameDataRow class before moving on to working with collections of game data:

Understanding Static Variables and Methods

This method introduces an important concept in Java: static members. Unlike instance variables and methods that belong to specific objects, static members belong to the class itself.

Here's what you need to know:

Static variables (like our gamesAnalyzed counter) are shared across all instances of a class. There's only one copy in memory, regardless of how many objects you create.
Static methods operate at the class level rather than the instance level. They can be called using the class name without creating an object: GameDataRow.getGamesAnalyzed().
Cannot use this in static context

In our case, we're using the static variable gamesAnalyzed to track how many game objects have been created throughout our program's execution. Each constructor increments this counter, and our static method lets us retrieve the current count.

Creating Your Own Analysis

Now it's time to put your skills to work! Modify the GameDataManager.java file to add your own custom analysis of the video game data.

Add at least one new method to the GameDataManager class that performs an interesting analysis. Here are some ideas:

Year Analysis: Which year had the highest average game quality? Most releases?
Developer Success Rate: For developers with multiple games, which ones have the highest average scores?
Cross-Platform Analysis: Which games appeared on the most platforms? Do multi-platform games sell better?
Sales vs. Ratings Correlation: Do higher-rated games generally sell better? Is there a difference between critic and user ratings?

Once you've added your analysis method(s), modify the main method to call your new method and display the results.

Example Custom Analysis Method

Here's what your custom analysis might look like (don't just copy this - create your own!):

In the main method, you would add a call to your new analysis:

Requirements for Your Custom Analysis

Your analysis should:

Process data from multiple games
Use loops and conditionals appropriately
Output meaningful results
Include comments explaining your approach

Activity 4: Recursion

In this final activity, you'll explore recursion - a powerful programming technique where a method calls itself to solve a problem by breaking it down into smaller instances of the same problem.

Understanding Recursion

Recursion is a fundamental concept in computer science that provides elegant solutions to certain types of problems. A recursive method has two essential components:

Base case(s): The simplest scenario(s) that can be solved directly without further recursion
Recursive case(s): Where the method calls itself with a simpler version of the problem

Let's examine a simple example - calculating the factorial of a number:

When calculating factorial(5):

The method first checks if n equals 0 or 1 (our base case) - it doesn't, so we move to the recursive case
It returns 5 * factorial(4)
Now it calculates factorial(4), which is 4 * factorial(3)

Why Use Recursion?

Recursion offers several advantages:

Elegance: Recursive solutions can be concise and elegant for problems that would be complex to solve iteratively
Divide and conquer: Recursion naturally implements divide-and-conquer strategies, breaking down large data sets into smaller pieces
Tree traversal: For hierarchical data structures like trees, recursion provides a natural approach
Problem decomposition: Complex problems become simpler when broken into smaller, similar sub-problems

Implementing Recursion in Game Data Analysis

Looking at our GameDataManager class, several methods could benefit from a recursive approach. For example, finding games within a specific criteria could be implemented using a binary search algorithm rather than the current linear search.

Here's an example of how we could improve the findGamesByTitle method using a recursive binary search (assuming the games list is sorted by title):

The recursive binary search has a time complexity of O(log n), which is much more efficient than the O(n) time complexity of linear search, especially with large datasets.

Another example would be implementing a recursive merge sort:

Your Task

Choose one method from your GameDataRow or GameDataManager class that could benefit from a recursive approach
Reimplement it using recursion
Test your implementation and compare it to the original approach
Document your findings: Was the recursive approach more elegant? More efficient? What challenges did you face?

Alternatively, you can implement a new recursive method that performs a complex analysis that would be difficult to do iteratively. Here are some ideas:

Find the most profitable franchise (games with similar names) recursively
Implement a recursive algorithm to categorize games into hierarchical genres (e.g., "RPG > Action RPG")
Create a recursive method to find "hidden gems" - games with high ratings but low sales

Example: Recursive Method for Maximum Critic Score

Here's an example of how you might implement a recursive method to find the game with the highest critic score within a list of games:

This method uses a divide-and-conquer approach, recursively finding the maximum in each half of the list and then comparing the results. While this specific example might not be more efficient than a simple loop, it demonstrates the recursive pattern that can be applied to more complex problems.

Remember, not all problems are best solved with recursion. Some considerations:

Recursion can lead to stack overflow errors with very large inputs
Recursive solutions sometimes have higher memory usage
Some problems have simpler iterative solutions