Web Programming Tools

PBL, collaboration and ideation

Vision,  Student Leadership

Vision

Establish a Why?

• Believe and put in the work so you can achieve.
• Learn to love Computer Science.  Work on something you like.
• Build skills that will be in high demand as you apply for college, internships, and jobs
• Perform well in class, get a series of A's over the 3 trimesters.
• Excel in the AP exam (receive 4 or 5)
• Earn academic respect of your fellow students and Teacher
• Earn a recommendation from your Teacher for internships and college applications

Establish a How? (Review graphic)

• Learn best practices in Computer Science development (Agile).  Make a Plan, start with an Idea, collaborate, code, and iterate.
• Learn and practice great learning strategies used in the 21st Century (4Cs)
• Become a Student Leader in the classroom (OO or TO)
• Establish and build relationships, learn to work within those relationships (Scrum Team, Crossover Group, Pair Programming)

Colin Szeto Friday Forum

Git Concepts Concepts video video by Michael Hayes

GitHub Fork

Setting up a Scrum Board

Sprints

Scrum Board

Deliverables

Homework

Sprint Calendar (sample)

Scrum Board columns

Deliverables

Teacher / Student experience

• Receiving Data from Backend
• HTML Form and Action
• Python Function and obtaining data from Form
• ... and more

Sprint 9, 10
Week 9

• One unique idea, aka something useful to your team and/or something that helps you in school
• Show case work and labs from TPT and TT.
• A page that highlights YOU

• Journal and Pair Test Corrections (sample)
• Individual Test Corrections (sample)

Sprint 1, 2

Week 1

• Monday:  Planning day.  Teacher to finish TT 0.*  Scrum Team build Project Board (Scrum Board).   Review Tour of Code at tables.
• Tuesday:  TPT day.  Watch Collaboration Video.   TPT and OO announcements, classroom nominations.
• Wednesday:  Code, Code, Code (CCC).  We are focused on design so we will Watch Design Video.  Think about your design requirements...
  • Theme - idea of Website (ie Poway Restaurants)
  • Labs - we will have Greet lab tomorrow, a place to store TT or TPT info
  • About - authors, something about you, each student in Scrum Team
• Thursday:  Tech Talk 1, Flask/Python
• Friday: Delivery day.  Video/Journal 0 due (see canvas). 

Week 2

• Monday:  Tweet, Tweet; find your groove, learn what I like.  Reflection, watch video by Seals as max credit example for Video/Journal 0.  Planning for PBL 1,2 on canvas which includes implementation from TT 1 and requires read of Padlet and declaration of personal Computer Equipment plan.
• Tuesday: Student Led TPT by OO's.  Focus is on Big Idea 1: Creative Development.   In supplement to TPT watch video by Anika on starting to categorize thoughts, this is example of putting TPT learnings into action.
• Wednesday: CCC. Work on PBL 1,2.  Focus!
• Thursday: Tech Talk 2, more on Flask/Python (review below in Padlet)
• Friday: CCC and Deliver PBL 1-2 (see canvas), look at embeds

Tech Talks 0.* status

TT 0 Tools, TT 0.1 Vision, TT 0.2 Scrum Board

TT 0.3, TT0.4, Brief Project Tour 

TT 0.5 Journal 

• head, style, script, body
• Bootstrap Grids , Navbars
• embed vs href
• templates, Jinja inheritance extends and block

• Python, HTML, CSS, JavaScript are the key languages you will be using as you start this class.  
• IntelliJ is the code editor we will be using in this class.  IntelliJ is more than and editor, it is called and IDE (Interactive Development Environment.  
• GitHub is where we store and share code in the cloud, think Google Docs but for Code.  
• Slack we will use for messaging, we have been averaging 35,000 message per class.

• A laptop, that you bring to class every day with the Development Tools installed on it.
• A Web Site host.
  • Raspberry Pi (RPi) single board computer. Host your own Web Site.  Work with IOT devices.
  • AWS account.  Host Web Site.  Have secure cloud data.

Software Installation  

Overview video playlist by Sriya Chilla and Ridhima Inukurti.

1. GitHub signup
2. Python install
3. IntelliJ install,  

• Slack online, my recommendation is to download the App to phone and computer

• Visualizing Binary Math with on off indicators, see picture from TPT.
• Conversions to Octal, Hexadecimal, and Decimal
• Incrementing and Decrementing Simulation

•  Number Systems and "Binary" 
•  "Hexadecimal" using Khan Academy

• HTML DOM event onclick
• Javascript parseInt
• Javascript changing the DOM
• Template Designer Doc (search for range)

• Front End.  Start getting comfortable with HTML, be careful not to get carried away in CSS, use Bootstrap. 
• Back End.  Start looking at Flask/Python parts of discussed code.  Be sure to gain understanding, don't shy away.
• Computational Thinking.  Make sure that your ideas use coding, not just HTML and CSS.  "Python", "Jinja2", or "JavaScript" are keys to learning class and college board objectives.  If you are writing similar lines of HTML or Python over and over, this is a problem!  This needs an algorithmic solution (aka using logic, loop, coding, and/or data).
• Data Design.  Often, algorithmic solutions require "Data"; or "Data" requires a algorithmic solution.  Are you considering how to use, store, and retrieve data? 
• Think about what you need to learn or research, how as a team you will divide and conquer on that research.

• Learn about manipulating images.  
• Convert images to arrays using Pillow (PIL)  and Numpy.  
• Convert images to string (base64).

1. frontend RGB display: rgb.html
2. backend image data and conversions: images.py
3. route to connect frontend and backend: starter.py

• Student needs to become competent in Scrum Team participation,  Scrum Board planning, revising plans, and iterating toward successful delivery.
• Scrum Master and Scrum Team needs to optimize delivery between Scrum Team and Teacher.
• Student needs to become competent in HTML, Javascript and Python. Each student needs to learn and apply College Board requirements in "Algorithms and Programming" using these languages.
• Student and Teacher will look at extending mini-labs we have worked on previously, we will look at adding requirements to these labs to hone in on the "Data" and "Algorithms and Programming" skills.

Retrospective Sprint 11

• Computer Innovations
• Digital Divide
• Computer Bias

Finals Week

• Collaboratively Build, deploy and host Web Pages
• Algorithms, Databases, and APIs
• Individual College Board Performance Task Project
• "Real World” Scrum Team projects with a Customer/Sponsor

Alerts

• Assignment Due next Friday start of class (see canvas)
• 5 point seed (highly engaged+, distracted -), we will likely have < 75 points in Trimester 1.

Tri1 Project

Learning Outcome for Sprint/Weeks 0,1,2 

• Attitude.  An Agile mindset is not knowing the answer, making lots of mistakes and performing iteration.  A successful grade is dependent on making mistakes, research, and iteration.
• Suggestion. Please bring a personal laptop to class daily.  The Internet and AP Central web site can be considered text book.  
• Requirements. Everything will be distributed electronically.  All code you develop will be delivered to the Cloud.  The class has a NO PAPER policy, when the Teacher sees paper the student may be considered to be distracted (-).

Sprint 0

• Wednesday - Pick pair share partner, Pick team of four.  Based off of mathematics there can only be 3 teams of 5 maximum.   Spend some time talking and getting to know each other.  Teacher will visit teams as time allows.  Start looking at Tech Talk 0, 0.1; if you run out of things to do.

• Thursday - Start bringing your laptop.  Tech Talk 0.  Start setting up tools and code for your 1st Flask/Python web site.

• Friday - As many 0.* tech talks as possible.

Journal and Responsibility

1. A 5 point seed will be granted to all students.  This seed will change (positive +, negative -).  The journal is HIGHLY related to your "ENGAGEMENT"  in the class, your Grade, and illustrating your commitment.  
2. You and Pair partner will be collaborating on Journal throughout the trimester.  You can share references, but make sure you are both participating in REVISION HISTORY.
3. Great memory. Journal these positives (engagement +)  Contribution to the class.  Being prepared for Tech Talks and Participating. Being involved in Test Prep Tuesday, Student Lead activities: as a Technical Officer, or as  an Operation Officer.   Doing exceptional code, analysis and helping others learn.  Being thorough in Self Grading processes.  Performing exceptional Scrum Master work, exceptional Project Delivery, sharing amazing work via breakouts or through teacher coordination. Arranging or attending professional events with guest speakers in STEM and Technical industries.
4. Avoid negatives.  Journal these negatives (distracted -) Lack of memory, lack of attention, lack of energy, coupled with lack of journaling.   Start to catch your negatives.  Professional is always improving and overcoming.  Appropriate conduct is critical to the classroom, inappropriate comments or inappropriate digital media or content will likely cause a point deduction and other action.   Paper or books open in class is considered being "off track", this is a likely point deduction.  Phones can and should be used to do research, test your web site, or take a picture of a white board.  Phones used for non-CompSci task in the classroom, ie call to others, even family members will likely be a point deduction.  
5. Journal these FYIs, thoughts and questions ... We will have 5 minutes at the beginning and end of class for gear up, wind down, socialize, make phone calls, text, etc.  We will have a lot of time in breakouts with Scrum Team that are focused on PBL.  Ask yourself each day, what would a professional engineer be doing?  or, is what I am doing on the Scrum board and contributing to Team and Project?  or, can I wait 'till last 5 minutes to go off track?  Enjoy your work, engage in Comp Sci.
6. There will be times where your Journal will be reviewed for points.  A Journal could be coupled or complemented with links to Code comments, README.md files, and other solid Engineering productions (aka a video).  These could be links to collaborative work, but whenever you link to something make sure it is obvious that you are part of the creation.
7. Bottom line, you need to establish professional "study habits" that enable you to remember concepts.  Mr Mortensen will ask, "do you have that in your journal?", "did you ask your pair?", "did you research that topic, show me your journal".  Ms Naidu may have similar approach.  Both of us would request that you become responsible for retaining information from class, knowing PBL objectives, and use a journal.  As a pair, scrum team or crossover group you should have TREMENDOUS recollection capability.  Establish a relationship where these are your 1st resources for questions and recall.  Reference each others journals.  Ask them, then ask your Teacher.

Digital Divide (Journal Topic)

Open: flask_portfolio, then double click on main.py

Find line: 
from flask import Flask, render_template

Find line:
app = Flask(__name__)

Find lines:
@app.route('/')
def index():
    return render_template("index.html")

Find lines:
@app.route('/kangaroos/')
def kangaroos():
    return render_template("kangaroos.html")

Find lines:
if __name__ == "__main__":
    app.run(debug=True)

Find and open file: templates/index.html

Find line: {% extends "layouts/base.html" %}

Find and open file: templates/layouts/base.html

Mini Lab

• Look at Stub code
• Integrate Greet Code (frontend and backend) into TT TPT area of your Web site.
• Make individual pages with Greeting in About area of your project.
• Think about "Lazy" way of doing the above, less copies of the same thing.

• Sequencing (Order of Code).  Sequencing  of code  is evident in Image Info section of the RGB lab.  After opening the file there is a series of steps used to extract Image Information.  Find this example of a Sequence and show it in your Journal.
• Selection Statements (Ifs).  If conditions are how Python is able to process input on HTML forms. For instance, when input on bulbs is entered in HTML the change in quantity is detected in Python to pass the changed value to the new rendering of the form with the change.  Find this example of Selection and show it in your Journal.
• Iteration (Loops). Iteration is used by Jinja2 to produce Bulbs.  The number of Bulbs controls iteration.  Iteration is the Lazy Programmer friend, look how many lines of HTML are generated by repeating the same lines of code through iteration.  Find this example of Iteration and show it in your Journal.
• Variables and Data Abstraction.  In the RGB lab, there is a variable used to store the path information.  This variable is needed to locate the static image file.  This variable is defined and set in main.py to image_data function.  Find where path variable is defined use Python print() statement to show path and how it contributes to path Pillow Image.open.  Describe this in journal.
• Structuring Code Blocks and Developing Functions.  There are several JavaScript functions in the Binary Math lab.  Find 2 functions that respond to Binary Math events.  Describe what is in each Code Block.  Describe other functions and code block called by these functions.
• Algorithms are the combination of Code and Presentation that Programmers use to solve problems.  The RGB lab uses an algorithm to change and display the image differently than it was defined originally.  Find the code snippets and describe the algorithm in your journal.

• Using Variables, Lists, Dictionaries

• Breakpoints.  Break, Examine, Resume, This is the process of interrupting execution with a breakpoint, looking at code path or data, and resuming execution. Common practice would be to look at Iteration progress or examine code path of a Conditional, or examine when and how data is modified.
• Observing Memory.  Looking at variables and complex data structures while code is stopped.
• Conditional Breakpoints.  Examine something at certain conditions (Advanced Debugging).

• Debugging and Breakpoints in Chrome F12
• JavaScript Alerts, these can be used as markers and can show
• Console.log in Chrome F12 (see visual)

• Python print() messages in run window
• Python Debugging, setting breakpoints

Sprint 7,8 week 7 - Logic gates

Sprint 7, 8
Week 7

Hosting a Web Application Requirements

1. Home Computing - Raspberry Pi (RPi OS)
2. Cloud Computing - AWS EC2 with Linux (Ubuntu)

Learning Opportunities through your Web App

• ISP / Private Networks and IP Addresses
• DNS Servers (Freenom)
• Routing and Port Forwarding
• Reverse Proxy (Nginx)
• Running WEB http:// apps on localhost:5000 (Gunicorn)
• Certificates https:// (Certbot)

Raspberry Pi Non Production

• Starter Guide and Concept running Apps on RPi

Raspberry Pi Production Web Server

• Concept and Overview
• Deployment Guide (production)

• Collaboration.  Classic Retrospective questions.  Use Geekbot in Slack. Try to prioritize answers.  How did the term go as far as people, relationships, processes, and tools?
  • What went well?
  • What didn't go that well?
  • What did every team member learn?
  • What puzzles every team member?
• Individual.  Prioritize answers.  Data, Programming, Algorithms, Internet.  How did the the term go as far as projects?
  • What was your favorite mini-lab project?
  • What was your favorite CB topic?
  • Identify in priority order biggest challenges.

• How can I use computing to help me as a student in other classes?  How can my computing work and projects help me study my other subjects and interests?
• How can I use computing to build something that is fun for me, as well as leave a legacy for future DNHS students?
• How do I prepare myself for my "Create Task" College Board project?
• How do I prepare myself and group for a 3rd Trimester project and obtain a sponsor?  

• Making a List of Jokes, each Joke is a dictionary.  See webapi.py observe list and creation of dictionaries.  There is some future consideration for likes in this dictionary.
• Transporting data through Internet by making WebAPI endpoint, observe "def get_joke()" and  "def get_jokes()".  Try these endpoints through browser: ...api/joke, ...api/jokes
• Use JSON response and Jinja2 formatting to build HTML pages off of response and JSON.  See requests in starter.py (def joke and def jokes).  Observe to test in IntelliJ you will need to uncomment url line to your localhost and port.  See formatting.look at HTML of joke.html and jokes.html. 

• Obtaining large amounts of data with a published WebAPI or RESTful APIs, these provide JSON response.  See starter.py and observe "def covid19()" (request, response, and json() formatting)
• Using JSON response and Jinja2 to build an HTML page.  See covid19.html.