# data[].attributes.body
Reflection/Retrospective Sprint 11, 12

Learning outcome.  Live and experience the Impact of Computing by becoming part of the Internet and describing your project to the Night at the Museum audience.

Retrospective Sprint 11

M - W: Continue Indi Reviews and CCC on PBL
M - Review canvas assignments
Tu - Reflections on Deployment or on Computing Experience that is life changing
Th - Retrospective Sprint TT
Th - F: Perform Final Project Reviews

Finals Week

M - Practice AP Exam Due
Tu - Present and Walk About
Finals see canvas

# data[].attributes.body
Prototyping Sprint 3,4
Week 1 - 10 points

Points

Prototype Checkpoint (see canvas)

Unit 3 MCs: If statements

Live grading on Monday

Plans

Tuesday:  Planning, TPT.  Make sure you look at planning requirements in canvas.

Wednesday:  Code, Code, Code (CCC) day.   Layout and Thymeleaf usage.

Thursday:  Tech Talk 3, surprise topic, hack-a-thon challenge from 1st 32 minutes of Harvard Video CS50 Lecture 0.

Friday: CCC and Deliver for Monday

Prototyping Sprint 3,4
Week 2 - 10 points

Points

Mon: Planning

Live Grading

Story/Issues Definition for week

Building backlog Story/Issues for Trimester Project

Unit 4  MCs: Iteration

Tue: TPT Review Unit 3 If, start Unit 4 Interation

Student Led Presentation

Cont... Live Grading

Wed:  CCC

Planning Reviews for 1 point In Progress, Backlog

Thu: TT 4 - Images and Backend (Model)

Focus on Model (vs last weeks focus on View)

Fun stuff with Images

Fri: CCC and Deliver

Video showing Runtime / Prototyping highlights 2 minute, by Sat 5am

see canvas

# data[].attributes.body
Deployment Sprint 9,10
Week 9

Points

M - Assignment for Indi Vids
Tu - Live Grade for ASCII Art
Th - Tech Talk on RESTful APIs

Unit 9 MCs Inheritance

Deployment Sprint 9,10
Week 10

Points

M - 5AM Teacher to watch Indi Vids

Unit 10 MCs Recursion

# data[].attributes.body
Innovation Sprint 1,2
Week 1  - 10 points

Points

Team Check 0: Tech Talk reviews

Wednesday See canvas

Individual Check 1: Unit 1 Primitives

Friday See canvas

Plans

Monday:  Planning.  Teacher presents, TT 0.*.  Scrum Team build Project Board (Scrum Board).   Review Tour of Code at tables.

Tuesday:  TPT.  Unit 1 work.   Review AP classroom.  OO election / nominations. Video on Collaboration.

Wednesday:  Code, Code, Code (CCC) day.  Work on PBL objectives, this week is Plan before Code.  Video on Design.  Think about your design requirements...

Theme - idea of Website (ie Poway USD 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, more on Spring/Java

Friday: CCC and Deliver.

Innovation Sprint 1,2
Week 2  - 10 points

Points (see canvas), review on Monday in class.  Discuss Unit 1 - 10 grind and benefit (like a driving test); Implementation for TT 1; Requires read of Padlet and declaration of personal Computer Equipment plan.

Flexibility, but no more than one Sprint behind.  Grade together or separately?

PBL 1-2

Unit 2: Using Objects

Plans

Monday: Planning.  Tweet, Tweet review, find your groove, learn what I like.  For turn in guide video by Bryant, an amazing one minute update on work.  For PBL organizing and categorizing Web design video by Anika.

Tuesday: Student Led OO activity (suggest most missed and/or activity, ...) on Unit 2.  Open forum for what people want for support.

Wednesday: CCC. Work on PBL 1-2 plus Unit 2.   Focus!

Thursday: Tech Talk 2 focus on HTML (see below).  Be prepared to ask questions or submit questions in advance on frontend code.

Friday: CCC.  Deliver PBL 1-2 plus Unit 2.  Look at embeds

Tech Talks 0.* status

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

Scrum Teams and Individuals should be tool, planning, and scheduling capable.

TT 0.2, TT0.4, Brief Project Tour

Monday Table visits as well as Touring Code through Brief's below.

TT 0.5 Journal

You should understand or ask me to discuss within you Scrum Team.  You will be learning by doing with points.

# data[].attributes.headline
Tech Talk 1 - Building a Spring/Spring Boot Site

# data[].attributes.subject
Tech Talk 1 - Building a Spring/Spring Boot Site

# data[].attributes.body
Introductory Project - spring_portfolio.   We will review Greet and Birds.

Greet: HTML Forms and Action

Greet: Java Controller, passing data to Thymeleaf

Greet and Birds:  Review Templates

Birds: Adding static code to bottom of HTML, thinking about Thymeleaf layouts

# data[].attributes.body
Recap from Tools

There have been updates to project.  Update Fork by doing a Fetch Upstream.

1. Fix 404 error page.  An unidentified student point out that my 404 page was not working.  This was a result of an error in an html reference.

2. Fix layer issue, thanks to student help.   Navigation bar problem with Birds.  Three students assisted on ideas for fix.  The solution was to add z-index to navbar, so menu layer is on top of VANTA animations.

3. Adding Sanvi's notes.  This is intended to answer the question.  What does a Journal look like?

Another Student Recommendation.  People who are having problems running the project.  It has been suggested to update Java, and update the Adopt Open JDK.  It is very important to be on standard of class.

Backend

Brief Project Tour: backend - src/main/java

Look inside "Main" (Main.java).
1. Everything in Java is a class.  The name of the file and name of the class should always match.

public class Main

2. This piece of code is beginning of every Java app.  This is the starting "method" (aka function) within the Class.

public static void main(String[] args)

3. The annotation @SpringBootApplication indicates it is starting point for the Spring Application.

@SpringBootApplication

4. Together with Standard Java and the Annotation for Spring you have the starting point for the application.  So the code inside the Java app default method is run.

SpringApplication.run(Main.class, args);

Frontend

Brief Project Tour: frontend - src/main/resources

Look inside of "templates/index.html"
1. SpringApplication.run will find the "index.html" file.  This will be the root directory of your server.  In our case localhost:8080.   The index.html file is built with Thymeleaf templates, "layout:"  tells it to find the layout.html file.

<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml"
      layout:decorate="~{layout}" lang="en">

Look inside of "templates/layout.html"
2. The layout.html file is the master template.  It contains the common head and body tags.  These tags reference other templates.  The th:replace are inserting pieces into the page that are standards across pages (ie Navigation).  The layout:frament are the items that the consumer/user of the layout will define as unique to their page.

<head>
    <div th:replace="fragments/head :: header"></div>
    <div layout:fragment="metadata">...</div>
</head>

<body>
    <div th:replace="fragments/nav :: header"></div>

    <div layout:fragment="content">...</div>

    <div th:replace="fragments/footer :: footer"></div>
</body>

<div layout:fragment="script">...</div>

Look inside of "templates/index.html: again
3. Try to visualize where layout:fragment="metadata" and where layout:fragment="content" insert themselves into the page.  The best way for me to visualize is to look at the result in browser:  view-source:http://localhost:8080/.  Look at layout.html,  navigate through templates and see where stuff is coming from.  Try to find these parts

<head><div layout:fragment="metadata" th:remove="tag">
    <title>Intro</title>
</div></head>

<!-- layout::fragment="content" is heart of ThymeLeaf layout -->
<body><div layout:fragment="content" th:remove="tag">
    <!-- Start of body content specific to page -->
    <div id="spring_intro" class="articles" style="margin: 30px;">
        <h1><strong>Java and Spring</strong></h1>
        <h3><strong>What is Spring?</strong></h3>
        <ol>
            <li>Spring Framework is the most popular application development framework of Java. </li>
            <li>Spring Boot helps to create a stand-alone application with less configuration.</li>
            <li>Spring MVC is a model view controller-based web framework under the Spring framework.</li>
            <li>ThymeLeaf is a server-side Java template engine, support HTML5 JVM web development, and provides full integration with Spring Framework.</li>
        </ol>
        <h3><strong>What should Java Developers learn?</strong></h3>
        <ol>
            <li>Development DevOps. Java programmers should have a passion for managing the environment and learning automation (Maven, Gradle, DevOps, Deployment.</li>
            <li>Git/GitHub.  Learning to master managing change, branches, pull requests.</li>
            <li>REST services using Spring.  Mastering creating and consuming RESTful APIs</li>
            <li>Microservices are nothing but an extension of RESTful Web services with the main objective being to break up your code into small, distributed, and independent services.</li>
            <li>Java 9-15. Java 8 is AP standard.  Things like Jigsaw, Reactive Streams, Process API, HTTP2 client, JShell, React JS are all more recent</li>
        </ol>
    </div>
    <!-- End of body content specific to page -->
</div></body>

Tech Talk 1

Java Side

@SpringBootApplication, Main.java (not to much to change here)

@Contoller, controllers/Greet.java & Birds.java.  Greet is exchanging dat through model.addAttribute.   Birds is simply loading the page.

HTML Side

greet.html is using the layout and interacting with backend.   Notice use of th:text as pre-processor.  Examine code after it is rendered in browser.

birds.html is about adding script at the bottom of the HTML.  Note, VANTA requires this at bottom.

Mini Lab - TT1 (Greet, Birds, Unit 1)

Think about how to put Unit 1, Greet, and Birds together.  Data type from HTML to Java is Text.  This is good opportunity to explore data types.  For instance, instead of greet....  A couple of inputs and some Math.

To encourage every individual to get started do something with Greet in About section of your Web page. For instance, reveal a secret about yourself if the tell you there name.

# data[].attributes.body
Prototyping Sprint

Learning outcome.  Start coding.  Start learning and evaluating your Scrum Team and technical capability versus your innovation/feature/scrum plan.  Look for advice from peer Students, Crossover and Teacher for project direction.   Keep pushing forward, modifying plans, and start performing research.

Prototyping considerations

Front End.  Start getting comfortable with HTML, be careful not to get carried away in CSS, use Bootstrap.

Back End.  Start looking at Thymeleaf/Java.  Be sure to gain understanding, don't shy away.

MVC.  Make sure that your ideas use coding, not just HTML and CSS.  "Java", "Thymeleaf", or "JavaScript" are keys to learning WEB programming with Java.  If you are writing similar lines of HTML or Java over and over, this is a problem!  This needs an algorithmic solution (aka using logic, if, loop, and/or class/data).

Java Coding and the WEB

Week 3

Bootstrap examples. Start getting comfortable with HTML, be careful not to get carried away in CSS by using Bootstrap.

ThymeLeaf usage examples. Reduce redundant HTML, this is similar to Jinja2 in Python/Flask model.

Week 4

RESTful APIs examples.  This is an easy way to get lots of data for PBL that is ahead.

HTML, JavaScript, Ajax or Axios examples.  This is the way to using RESTful APIs to retrieve data in your own application.

# data[].attributes.body
AP CSA COURSE OUTLINE FOR THE YEAR

Methodology.  Project Based Learning (PBL)
Guideline. The 10 Units of AP Comp Sci A
Key Learnings for 2021-2022

Collaboratively Build, deploy and host Web Pages

Programming, Algorithms, Databases, and APIs

1 Individual Project highlighting all 10 units, either academically or in interest fashion

"Real World”  Scrum Team projects with a Customer/Sponsor

AP testing in May

Alerts

Assignment Due Monday start of class (see canvas)

5 point seed (highly engaged +, distracted -), we will likely have < than 75 points in Trimester 1.

Tri 1 Project

You and your Scrum Team will collaboratively Build, deploy and host Web Pages.  This Web project contains work Technicals learned throughout the trimester.  This will be done in increments.  Monday morning assignment focuses on setting up Tools and Methods of becoming a Nighthawk Developer.

Feature Considerations for Project

One unique idea, aka something useful to school

Ability to show case PBL, TPT work and labs

A page that highlights YOU and your Technical Capbilities

Technical Requirement for Project

Use "Java Classes" as well as Units 1-10.

Use "Thymeleaf" with "Java Classes".

Technical PBL requirements as described through the Tri 1 weeks/sprints.

Week 0 Learning Outcome

Getting adapted to the Agile development methodologies used in Computer Science.  Additionally, getting introduced to the Tools used in building a Java/Spring Web Server.

Comp Sci and PBL attitude, suggestions and requirements

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

Week 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 0.1 tech talk 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.

# data[].attributes.body
Introductory Project - spring portfolio resources

head, style, script, body

Bootstrap Grids , Navbars

Thymeleaf layout, static, templates

Continue learning HTML & CSS basics using W3Schools.

Review view-source on csa home page

Week 3.  Prototype a layout.
PBL.  Try getting your own STYLE, COLORS, FONTS; get your basic groove into your site.  Try a couple of prototype experiments and get feedback from Crossover.
Mini Lab.  Try using String methods and Number methods within Thymeleaf.   Incorporate with Bootstrap formatting.

# data[].attributes.body
Modeling Sprint 5,6
Week 5 - 5 points

Points, Individual and Live grading

Unit 5 MCs: Writing Classes

Canvas assignment,

Plans

M - Go over Canvas assignment, Individuals who received a grade look for a team that needs grading.
T - OO's Unit 4 corrections, Unit 5 preview
W - CCC
Thu -  Tech Talk 5, featuring "testers", "extend" and "polymorphism".
F - CCC,  Deliver

Modeling Sprint 5,6
Week 6 - 10 points

Points

Unit 6 MCs: Arrays (Arrays and ArrayList are like Lists in Python)

Canvas assignment

Presentation during TPT day

Plans

M - Day off
T - Start review of pair journals.  OO's Unit 5 corrections, Unit 6 preview
W - CCC. Complete review of pair journals.
Th - Tech Talk 6, student reviews - 2 points
F - CCC, Tour of Code, Deploy

# data[].attributes.body
Organizing Java code through Class Definition
Adjustment to Schedule

Here is the Fibonacci series runtime (model , view, control).

Learn Model, View, Control (MVC) through the Fibonacci examples.  MVC is the code organization style behind Java and Spring.

Through the "model" code learn Inheritance.  The power of Java is its Classes and reuse through Inheritance.  What benefits does FibRecurse get from this extend?

public class FibRecurse extends _Fibonacci

The Fibonacci example not only extends it includes Polymorphism.  This allows you to reuse large portions of code from Base Class and make some modifications to your customized Child Class.  Why was init method chosen for Override?

@Override
protected void init()

Fibonacci series uses Testers/Drivers in Model and Control.  Does this method become an instance of the object?  How would you access it from another Class?

public static void main(String[] args) {

Controller code you will notice @GetMapping and URI (aka route).  This establishes communication and control between front end and back end.  This code loads page shown in the return statement.  The model.addAttribute passes data from backend to Thymeleaf.  The @RequestParam receives data from via get mapping.

Thymeleaf assists in layout and preparing page prior to browser receiving HTML.  There is extensive code supplements in preparing a page.   Several are used in the page: iteration, conditional, referencing objects.

# data[].attributes.body
Deployment Sprint 7,8
Week 7 - 10 points

Points

Units 7 MCs ArrayList

Canvas assignment and deployment will be focus for 2 weeks.

M - Planning, RPi's
Tu - Student Led TPT
W - CCC, progress checks with Scrum Master for points on Canvas assignment and deployment. 1pt
Th - Deployment Tech Talk, work progress check on selected students for points. 1pt
F - CCC, live grade Monday on Checkpoint

Deployment Sprint 7,8
Week 8 - 10 points

Points

Units 8 MCs 2D Arrays

PBL goals across team, should be related to your original idea and starting a "deployed" Web Site.

M - PBL Planning, Deployment Plan, CCC
Tu - Crossover reviews, Student Led TPT, 2D Arrays and ASCII Art
W - CCC, review week plans 1pt
Th - Intro to Modeling Databases (POJOs)
F - CCC, Deployment video, 2D ASCII lab

# data[].attributes.attachment_caption
Becoming part of the Internet with Java and Spring Boot

# data[].attributes.body
Details/Process

Deployment Guide

Key Concepts in Hosting

Computer Options

Self Hosted - DeskTop, Laptops

Self Hosted - Raspberry Pi 4, Raspberry Pi 400

Cloud - Amazon Web Service (EC2), Microsoft Azure, Google Cloud

Operating Systems

RPi OS, connect from anywhere with RealVNC

Ubuntu, connect to AWS EC2 using SSH

Internet Hosting

Domain, Domain Name Servers (DNS), Domain Name Providers (freenom.com)

Home Router, Routing (Port Forwarding)

Reverse Proxy Server (Nginx)

Setup Java Web Application

# data[].attributes.body
Start learning about the power of Java and its power as a backend server for Data.  This overview shows the power of SpringBoot and several abstraction layers and the usage of Plain Old Java Objects (POJOs).  Amazing!

SpringBoot and SQL

Overview includes interacting with databases through HTML and access databases through RESTful APIs

# data[].attributes.attachment_caption
adopt-openj9-15 works well for development and deployment

# data[].attributes.body
Tools and Purpose

Java is the key language you will be using in this class.  HTML, CSS, JavaScript are the key support you will be using to enhance your learning of Java.
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.

Equipment needed/recommended to maximize 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.

Installation (software requirements)

IntelliJ Ultimate, License Manager and Tips

Fork and the Clone Project from GitHub

Select JDK (see visual), you will likely need to +Add JDK before you can Select it.

Play your project

type localhost:8080 in Browser.

GitHub

Concepts video by Michael Hayes.

Slack

Collaboration tool

# data[].attributes.headline
Tech Talk 0.1 - Vision, Student Leadership

# data[].attributes.subject
Tech Talk 0.1 - Vision, Student Leadership

# data[].attributes.body
Tools and Equipment Recap

Downloading Tools
Setting up IntelliJ, using Java
Connecting to GitHub, pull
Running Code, visualizing in Browser

* Issue with newer version of adopt-open JDK, seem to work with Amazon.  This needs debugging.  Perhaps POM file needs and adjustment.  Extra Credit opportunity

* Issue 2 run Birds and notice that Bootstrap dropdown menus do not work correctly.  Extra Credit opportunity

Vision and Student Leadership

Review Visual

Vision

As you venture into Computer Science, you need to establish vision.  Academic success in this Computer Science Class comes with a plan (Why?).   A plan requires a strategy (How?).

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)

# data[].attributes.headline
Tech Talk 0.2 - Project Deliverables starting with Collaboration, Design

# data[].attributes.subject
Tech Talk 0.2 - Project Deliverables starting with Collaboration, Design

# data[].attributes.body
Incremental delivery

Through the year individuals and teams will be focused on delivering projects in small increments   The visual shows the interaction between different parts.   There are lots of pieces to be built, all are not completed at the same time.

Web Programming Tools

Spring, HTML, ThymeLeaf and SQLite databases are Web Programming Tools and Frameworks.  Building a Web Site(s) will be a key outcome of this class.  The Web with Spring will enable us to show and analyze Java algorithms,  highlight Java strengths, and enhance our PBL experience.

PBL collaboration and ideation

The idea of building a Web Site incrementally, with a useful idea, is a Project Based Learning (PBL) way to learn Computer Science.   To begin, we don't start with Coding, we start with Collaboration and Ideation.

Watch these videos!  These video were made for CSP but are fundamental to any project and language.
Faculty Lecture 1 - Collaboration
Faculty Lecture 2 - Design

# data[].attributes.headline
Tech Talk 0.3 - Sprint Schedule, Scrum Board

# data[].attributes.subject
Tech Talk 0.3 - Sprint Schedule, Scrum Board

# data[].attributes.body
Issues

Sprint cadences have ideas/issues that are broken into short term work units on a Scrum Board (issues).

Scrum Board

The Scrum Board contains issues that are assigned to individuals,  each of these issues will have "tangible" deliverable (code/video/...).  Pair, Scrum Team, will use Scrum Board to understand your ideas and efforts.

Assessments / Reviews

During Teacher reviews ( 1 v 1, 1 v 4) meetings you will provide Teacher with issues that are "review ready" that represent your Deliverables.

Homework

To maintain pace in this class, you should consider a 2 hour coding or design session (weekly) outside of class time, or 4 hours outside of class per 2 week Sprint.  You will have time to code in class as well.

Typical Two Week Sprint

Week 1
Monday - Sprint Objectives, Scrum Team Planning
Tuesday - Test Prep Tuesday (Student Led)
Wednesday - Code, Code, Code
Thursday - Tech Talk (Teacher)
Friday - Code, Code, Code; Teacher 1 v 1
** 2 hours outside of class for project work

Week 2
Monday - Sprint Grading plan,  Scrum Team Planning
Tuesday - Test Prep Tuesday (Student Led)
Wednesday - Code, Code, Code
Thursday - Tech Presentation (Student)
Friday - Code, Code, Code; Demos/Self/Peer Grade
** 2 hours outside of class for project work

Scrum Board / Kanban

Issues are placed in columns on a Scrum Board to represent progress.  The below columns have been successful in our academic environment.  Look at picture to see working example of Issues and Scrum Board. A key deliverable of this Tech Talk is starting a Scrum Board with the items due on Monday.
1. To do/backlog
2. In progress
3. Complete
4. Deployed
5. Review ready  ### Teacher ready
6. Done

# data[].attributes.headline
Tech Talk 0.4 - Tangible Artifacts, aka Code

# data[].attributes.subject
Tech Talk 0.4 - Tangible Artifacts, aka Code

# data[].attributes.body
Tangibles, Tangible Artifacts, Artifacts

Ultimately, success in this class will be dependent on producing code.  Along the way you may produce other tangible artifacts (ie designs, videos, documentation, deployment artifacts).    All your tangible artifacts SHOULD end up in GitHub or as references off of your Web Site.  You will have opportunity to send messages and dialog about delivered artifacts through Slack.

Code Project, Repository, Repo

A key artifact from this Tech Talk is to setup  a  code project in GitHub that you can Pull and Push from using IntelliJ.  Everyone in the team should do a Pull and Push to receive credit at review.

# data[].attributes.body
Example Journal

CSA will be doing a digital journal, as we did in CSP.  This link is for CSP, but you should be able to adapt and create something for CSA.

Journal and Responsibility ...

1. A 5 point seed will be granted to all students.  This seed will change (positive +, negative -).  The journal is related to your professional conduct in class and your Grade.

2. You and Pair partner will be collaborating on Journal throughout the trimester.

3. Journal these positives (positive +) Great memory.  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. Journal these negatives (negative -) Lack of memory, lack of attention, lack of energy, coupled with lack of journaling could all impact seeded points.   Professional and 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 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).

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)

What is the digital divide?

1. Why should you become part of the Internet?
2. What about lower income people in San Diego?  How could you outreach to other students?
3. Why do you think I want every student to try and use their own laptop?

# data[].attributes.headline
Tech Talk 9 - RESTful APIs (Using RapidAPI)

# data[].attributes.subject
Tech Talk 9 - RESTful APIs (Using RapidAPI)

# data[].attributes.body
Rapid API Home

1. Runtime Review.   Web APIs, RESTful APIs, APIs are a source for obtaining large amounts of data.
2. RapidAPI Review.  See visual.  RapidAPI is a provider of many types of data.  Social Media, Stock Market, Weather, etc.  You can get APIs directly, but this is nice source!
3. Brief Code Review.   Consider that a Web APIs is centered on a "request" and a "response".  The "response" is in JSON format.  JSON is a universal text format for WEB transport.
4. HashMap or JSON Object.  Working with JSON in Java has a couple of key alternatives.  Both of these are not CB requirements, but are means of using modern Data Structures.
5. Debugging.  JSON data or large quantities of data can be confusing at times.  Debugging is a great way to look inside of your code as it is processing.

# data[].attributes.attachment_caption
Can you solve for 50 at 10 minute mark of Harvard Video.

# data[].attributes.body
Prototyping and Inspiration.  Part of Prototyping is gaining inspiration from things you see.  In this Harvard Video CS50 Lecture 0, at the 10 minute mark th Professor asked the student to solve a problem.

Learning outcome.  Explore ideas and turn them into code and learning opportunities. Become familiar with binary, octal, and hexadecimal conversions between Base 10, Base 2, Base 8, Base 16.   Look at HTML DOM, onclick events, and start using javascript.

Points and Work.  Hack-a-thon today and mini-lab due next Friday. GitHub source for project.

Online runtime of  Binary Math

Visualizing Binary Math with on off indicators, see picture from TPT.

Conversions to Octal, Hexadecimal, and Decimal

Incrementing and Decrementing Simulation

Resources
Background understanding from Khan Academby

Number Systems and "Binary"

"Hexadecimal" using Khan Academy

Technical reviews

HTML DOM event onclick

Javascript parseInt

Javascript changing the DOM

Thymeleaf iteration

# data[].attributes.body
Once again, prototyping is attempting things that are new.  Modeling, which we start on Monday,  is looking at and constructing Models (aka Java Classes).

Learning possibilities from Modeling project related to Images.  Become familiar with Classes, Attributes, and Methods.  Become familiar with data and meta data in an Image.  Become familiar with data representations, and manipulation of Images.  Other future PBL interest could be encryption and steganography.

Start by looking at HTML, images.html...

1. Search for "th:each", the first is is processing through a list/array of image information (lii).  For each member the Web Page is rendering images as shown in visual.

2. The second th:each is providing a sample of the RGB information.  It is doing conversions into Hex Code and Binary to show data in formats that are more familiar when looking at color codes.

Frontend improvements

** How would you provide Gray Scale for all the images?
** How would you layout original pic, grayscale pic, data inside?
** Since this is a lot of data, what would be good way to show or select images of your choice and show results?  Try a different approach to presentation.

Next look at the Controller, MainController.java...

1. Search for "image", the first method, GetMapping /image, shows creating a Model definition for "lii".  This is created to interact with images.html.  Several image files are used to  define objects that end of in an  ArrayList of objects "lii".  Steps occur to construct the object, followed by a method operation from the object that is used to read the image information.

2. The second method of interest, GetMapping /image/grayscale, is used to change the image from color to black-and-white.

** Is the lii setup using best practive?  Can you think of some improvements?  Try to do this with 10 images.
** Should there be two GetMappings?  Try a method that consolidates.

Finally, look at the Model, ImageInfo.java...

1. As a true prototype in exploration Java, this file has three argument constructor and many methods.  This class has many attributes and methods used to define the properties of the image file.

2. Many of the methods the Getter style methods are called by the HTML (frontend).

3. Constructor and Image Information are established and generated by the Controller.  After establish this and passing as a Model Attribute, Thymeleaf is able to these methods.

4. Cool technicals include:
a.) obtaining RGB values from image file
b.) building a base64 data definition of the image file (text and benefits of text with HTML).
c. ) manipulating RGB values and using additional operation of java: "logical &&" , "shifting bits <<"

** What is base64?  Can you name some benefits of using this versus a file in coding?
** What is the grayscale code attempting to do?  Python has a PIL library that simplifies some of the complexities in this implementation.   Prototyping would look for another path.
** This grayscale implementation on support PNG.  How would you support JPEG?

# data[].attributes.body
In this Tech Talk...
i.) Each Scrum Team will take a topic, prepare notes or slides (15 minutes)
ii.) then Each Team will present topic (5 minutes or less).

All preparations and observations will be logged in Team journal.  I will be grading team for 2 points (technical accuracy of content, clarity and professionalism of presentation)

Review key areas of MVC.

1. HTTP methods. What area of MVC is handling Get, Post, Put, Delete requests?  How many of these request types have you used in Java?  Cite examples.

2. Data in MVC. Where does data typically come from in MVC  to complement the creation of HTML pages?   Is it possible to access Model objects when creating HTML pages?  Cite examples.

3. HTML actions. After a page is loaded and visible to the user, what 'tech' have we used to make dynamic actions on the page?  Is it possible to access Model objects after starting dynamic actions on a page?  Is it possible to access JavaScript code when performing dynamic actions.  Cite examples.

4. Hard coded data alternatives. What is an example of hard coded data in View?  Can you provide an example of hard coded data in HTML?  Can you discuss how this hard coded data could be moved into Control or Model?  Illustrate or describe how hard coded data in HTML can get out of control.  Cite an alternative to hard coded data.

5.  Java project dependencies.  Where do we capture dependencies for our Java Project?  Why do we use dependencies?  Can you site a dependency that you are using to support MVC framework?  How about something that assist in creating HTML pages?  What dependency and annotation allows us to be a 'lazy programmers' in relationship to setters and getters?

6. Model attributes.  In the nighthawk_csa project find the MainController.java file and observe the method associated with @GetMapping("/image")  Describe data that is created for model.addAttribute("lii", lii).  Be complete in describing any hierarchy in the attribute being added.

7. Thymeleaf each. In the nighthawk_csa project find image.html and look for line <tr th:each="ii: ${lii}">.   Describe how this works and what kind of code is generated.

8. On click. In the nighthawk_csa project find binary.html and look for line:  <button type="button" th:id="'butt' + ${i}" th:onclick="'javascript:toggleBit(' + ${i} + ')'">Turn on</button>.  Describe how this works and what kind of action is generated in rendered HTML.

9. Javascript function. In the nighthawk_csa project find binary.html and look for line: function add(n).  Describe when this code executed and what it does.  Be sure to discuss setConversions(binary);

https://padlet.com/jmortensen7/studenttt6p1
https://padlet.com/jmortensen7/studenttt6p2

# data[].attributes.body
Debugging is the process of looking at code as it is running.

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

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

Backend Debugging in IntelliJ

Java System.out.println() messages will output run window

Java Debugging, setting breakpoints

# data[].attributes.body
Sharing data through RESTful APIs.

Data
/csa/data/sql/users/...

Create

Creats new entry by ID, returns ID, old JSON, and new JSON

Read

Read all entries in the db, return list of objects within JSON

Read 5 first records, return list of objects within JSON

Return a single record by ID, returns JSON of object

Update

Update Entry by ID, returns ID, old JSON, and new JSON

Delete

Delete Entry by ID, returns deleted ID and JSON

# data[].attributes.body
Reflection/Retrospective

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.

Goals for Trimester 2

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 and group for a 3rd Trimester project and obtain a sponsor?