• 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

• 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

• 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

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

• 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

• head, style, script, body
• Bootstrap Grids , Navbars
• Thymeleaf layout, static, templates

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.

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

• SpringBoot and SQL 
• Overview includes interacting with databases through HTML and access databases through RESTful APIs

Details/Process

Key Concepts in Hosting

• Self Hosted - DeskTop, Laptops
• Self Hosted - Raspberry Pi 4, Raspberry Pi 400
• Cloud - Amazon Web Service (EC2), Microsoft Azure, Google Cloud

• RPi OS, connect from anywhere with RealVNC
• Ubuntu, connect to AWS EC2 using SSH
  
  

• Domain, Domain Name Servers (DNS), Domain Name Providers (freenom.com)
• Home Router, Routing (Port Forwarding)
• Reverse Proxy Server (Nginx)
• Setup Java Web Application

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.

• 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

TT 0.2, TT0.4, Brief Project Tour 

TT 0.5 Journal 

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

Points, Individual and Live grading

• Unit 5 MCs: Writing Classes
• Canvas assignment, 

Plans

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

Points

• Units 7 MCs ArrayList
• Canvas assignment and deployment will be focus for 2 weeks.

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.

Points

• Unit 9 MCs Inheritance

Deployment Sprint 9,10
Week 10

Points

• Unit 10 MCs Recursion

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

• 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

Vision and 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)

Incremental delivery

Web Programming Tools

PBL collaboration and ideation 

Scrum Board

Assessments / Reviews

Homework

Typical Two Week Sprint 

Scrum Board / Kanban

Code Project, Repository, Repo

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)

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?

Brief Project Tour: backend - src/main/java

public class Main

public static void main(String[] args)

@SpringBootApplication

SpringApplication.run(Main.class, args);

Brief Project Tour: frontend - src/main/resources

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

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

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

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.

• 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
• Thymeleaf iteration

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.
   
   

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.
   
   

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 <<"

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

• 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

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

• Java System.out.println() messages will output run window
• Java Debugging, setting breakpoints

Retrospective Sprint 11

Finals Week

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