15-539 Week 4 Team Homeworks

Homework 4: Backend

Variable deadlines. See specific assignments. Note that every code contribution detailed below must be a pull request.

Timeline

By Tuesday Night

• Django-rest-framework + Devops in official backend repo

By Wednesday Night

• S3 wrapper class added to official code base
• Empty routes (named according to the File API) added to official code base

By Friday

• User + Token API spec + Database schema completed
• User database schema added to models.py
• File upload routes filled in (basically just calling S3 wrapper, no auth)

By Sunday Night

• User + Token API implemented
• Authentication on every route in the code base
• Implemented File API client
• Authorization technical design doc complete

Individual Assignments

Scott

• Due by Tuesday 9/19 at 11:59PM

• Add Django-rest-framework + DevOps to official backend repo.

• During the Week

• Review code!

• Due by Sunday 9/24 at 8PM   -- Nate will help with this! :)

• Write a Technical Design Doc for Authorization

1. How do people normally do authorization when using Django?
2. How do people normally do authorization in general (not specific to Django)?
3. What services that we are building need authorization rules?
4. What user roles do we need?
5. What database schema (if any will we need)?
6. What should our specific implementation look like?
7. I may not have listed everything you should be thinking about here. This is pretty open ended work so you may need to write about things not listed here.  

Eddie

• Due by Wednesday 9/20 at 11:59PM

• Review feedback and update server side part of the File API proposal.
• Add empty routes to official repo based on definition of Eddie’s File API proposal.

• Due by Friday 9/22 at 11:59PM

• Fill in the file upload routes with actual logic for file upload.

• Due by Sunday 9/24 at 11:59PM.

• Review feedback for and Implement client side of File API.

Matt + Arman

• Due by Wednesday 9/20 at 11:59PM

• Add the file upload wrapper class that was implemented previously to the official backend repo.

• Due by Friday 9/21 at 11:59PM

• Read and understand Token Based Authentication in the django-rest-framework.
• Design the exact table schemas for users. What base information do we need to collect (address, etc). What tables should we have to store all of this? Take a minimalist approach at first. We can add more fields later.
• Design the exact API for user and token management (register, get token, login etc). This must be reviewed and approved before moving on.
• Add user database schema to model.py.

• Due by Sunday 9/24 at 11:59PM

• Implement User + Token API  routes.
• Ensure every routes on the official backend repo has authentication.  

Maya

• Due by Wednesday 11:59PM

• Meet with Eddie to review previous homework

• Due by Sunday 9/24 at 11:59PM

• Complete sample gradebook app

Homework 4: UX Design

IDE Team

• Look through everyone's designs from this folder on the Google Drive
• Consult with other team members as needed to come to a consensus about the important questions from HW3, consider user desires you've already thought a lot about

• I will compile all of these pieces of feedback from the team at large and put them into the google drive later tonight, so you will have more to work with

• Begin designing the proposal IDE(s), and finish by Monday night in the form of a full mock-up! :)

Teacher-Portal Team

• Study tools that have really great teacher portals

• Write down the most important features, anti-features, and any other observations

• Come up with user desires from the teacher perspective
• Draft interview questions for local teachers (we'll also do more than just interview them)
• Write down ways to learn from teacher though experience (grading with them, etc.)
• List and rank the most important pieces of the teacher portal needed

• grade book, exercise picker, student profile page, assignment maker, quiz maker, etc.

• After talking to Kosbie and Tara, begin designing the most important piece as a paper prototype and the basic mock-up by Monday night

Lesson Plan Team

• Study tools that have nice tutorials/lesson plans

• Write down the most important features, anti-features, and any other observations
• Are there quizzes? Videos? What is the general flow?

• Begin drafting user desires for a student learning a 112 Week 1 or 2 Lesson (so conditionals or loops, whichever you like better)
• Begin designing paper prototypes for this basic lesson plan and turn them into full mock-ups by Monday night

Exercise Team

• Study tools that have a great content

• Write down the most important features, anti-features, and any other observations

• Come up with a proposed course flow (for example: lesson->exercise->explore->assessment)
• Come up with ideas for the structure of the course

• Should there be a project?
• How long are units?
• How do students move from unit to unit?

• Come up with ideas for managing students at different levels of difficulties

• A, B, and C problems
• How do we display progress to the students?
• What do we do about students who are struggling?
• What do we do about really advanced students?
• What is the average student experience?

Everyone

• Think of components we need from the frontend team! :)

Homework 4: Frontend/UXI

We have a slightly fragmented team, so this homework will be different depending on which sub-team you self-identify with (if you are unsure, let us know!). There's a lot to read in this email, so feel free to only read the parts pertaining to you.

Note that this is a critical path team which means that you are exempt from CS1 content. Let me know if you are unsure about your situation.

Due date: Monday, September 25th, 11:59pm

All Frontend

• Weekly Frontend team meeting is scheduled for Sundays from 12:30-1:30pm (location TBD)

• Attendance is mandatory unless prior arrangements are made
• Alec & Sean: you weren't on the original scheduling form, let me know if this time doesn't work and we can figure out what to do

Training

I'm posting the full Frontend stack training sequence below, since we have some new members and a guest member interested in spinning up on our stack.

Please place all related code that you produced in a directory named 'training'. All code should be runnable (i.e. I can type npm install, then npm start, and get a working app (hopefully)).

Prior topics (for people just getting started):

• HTML: Follow this tutorial and cover the "HTML Tutorial" and "HTML Graphics" sections
• JavaScript: Follow this tutorial and complete the "JS Tutorial", "JS Objects" and "JS Functions" sections.

• Exercise: write Tetris in JavaScript using the HTML canvas and following the 112 tutorial. Let me know if you need starter code.

• Bootstrap 3: The docs are fairly self-explanatory.

• Exercise: implement your favorite website's layout in Bootstrap. (i.e. we did Amazon during lecture)

• React: Follow this tutorial which walks through writing a simple Tic-Tac-Toe app.

• Exercise: implement a multiple choice question application. Start by mapping out the state required to assemble an entire app (think: A quiz is made up of questions, questions have a statement and options, an option needs a radio button, etc.).

Recommended for hw4

• Redux: Watch this better video tutorial

• Exercise: convert the multiple choice app from last week to use Redux.
• Recommended organization:

• If you didn't have a clean state tree for the pure-React version, start by organizing all the data into a clean state tree
• Wrap the app with a top-level Provider component
• Have 'dumb' components which take data as props and spit out a rendered element
• Have 'smart' containers which handle data fetching and distribution. These shouldn't directly render view elements
• Google the above terms if unfamiliar

• Features to try to implement:

• Checking against a solution (a hardcoded solutions object in your state is fine for now) and rendering user feedback (i.e. a check mark)
• Submission functionality (for now it's fine to just log a 'solutions' JS Object to the console)
• A progress bar

• Immutable.js:

• First, read a primer on using Immutable with Redux

• Pay close attention to the 'Best practices' section

• Convert your multiple choice app to use an Immutable Map as the Redux store (instead of a raw JS Object)

• Ensure that your reducers and smart components are using the Immutable data structures
• Ensure that your 'dumb' components are taking raw JS Objects as props. To do this cleanly, Google 'Redux connect mapStateToProps' :)

• React-Router:

• Follow the resources here to get React-Router set up for your multiple choice project.
• Use Routing to implement a collection of multiple choice quizzes.

• Have a quiz 'home page' with links to the various quizzes, and implement the links using <Route /> elements

Next steps (if you finish the recommended topics for the week)

• Fetch:

• Fetch is a promise-based, asynchronous, HTTP API. (Click those links if you don't understand those terms)
• Fetch is on its way to becoming a web standard, but you might have to npm install whatwg-fetch --save
• Read how to handle async actions in Redux.
• Find a free, web api (like this Cat image API for example), and use the fetch api to asynchronously load things on your multiple choice app.
• Be diligent in handling errors (i.e. see the fetch( ... ).catch( ... ) documentation)

Prototype implementation

Be on the lookout for a new repo going up on Github to submit to. These components are meant to be prototypes, so do your best to design the features you think are useful and implement them.

Depending on where your skill level is, you may have to revisit some of the training topics. Let me know if you need extra material to look at or are unsure on how to start.

In terms of code organization, don't worry too much since these are prototypes. As a starting point, I'd recommend keeping all of the required files in some directory corresponding to the whole module. For example, if you were writing the Gradebook, have a directory named 'gradebook' and put all of your components, containers, reducers, etc. in there.

• Chris: Gradebook

• Aim for an interactive gradebook for a set of students.
• Start with the basics (i.e. essentially a row/column form of numbers)
• Add interactive elements/ways to drill down on a single student or single assignment
• Play with data visualization tools to chart aggregate performance, performance over time, etc.

• Cyrus: Login/create account page

• For now, keep the fields to the bare minimum. Username and password (and maybe a recovery email)
• Check out React-Router to do easy client-side routing
• For now, don't worry about server-side auth. Just make a 'dummy' auth on the client side.

• Elliot: Tutorial/lesson plan

• The idea here is a framework that chains together sections of content into a 'tutorial' or 'lesson plan'
• It should have some sort of progress indicator
• Focus on the clarity and consistency of how the content is displayed.

• Some example things: paragraphs, syntax-highlighted code blocks, images, alerts

These specifications are pretty open, feel free to ping me if you want to talk about things to start with.

Homework 4: Autograder

This homework has a research component and a prototype implementation component.

Due: Monday, 9/25 at 11:59pm

Research

• Deep dive into a few CS1 content exercises of varied difficulty and evaluate each one against our proposed autograding frameworks.
• Investigate competitors (e.g. Khan Academy, Code.org, etc), study their autograding approaches, and analyze their strengths and weaknesses.

Implementation

• To get some actual results flowing, start by implementing Pixel Matching autograding. Start with the new framework (which should be presented during class on Thursday) and write a prototype autograding module that grades exercises based on diff-ing the pixel output.

Submission

• Submit the completed homework by creating a pull request here: https://github.com/cmu-cs-academy/autograder-hw
• If possible, complete the research portion of the homework in markdown files (which are easily perusable on Github).

As always, don't hesitate to contact me if you have clarifications on the assignment. We (Jacob + Richard) should also anticipate a meeting near the end of the weekend/beginning of next week.

Homework 4: Graphic Design

• Create initial designs for components that we will definitely need:

• Start page, including:

• Logo/branding
• Log in or Register

• Header (for every page), including:

• Logo
• Page title
• Navigation/menu
• Login/logout buttons

• 'Submit' button
• Progress bars

• The above components are just features I think we'll need; if there are other components you think we should start with, create designs for those instead.

Homework 4: Textbook

• Using the lesson you reviewed and edited during hw3 as well as a tools you described during hw2 (or any other tool you feel like using) to make a textbook section.
• Provide thoughtful comments about the challenges you face with the tool as well as how you had to adapt your lessons to meet the limitations(or the new abundance of features) of your tool.
• Rate your tool in the following ways, from 1 to 10:

• Usability (10 being very easy to use)
• Feature richness
• Availability (10 being easily available, 0 being behind paywall)
• Developer support (10 being very comprehensive docs)
• Active development (0 being dead project)
• Popularity.

• Finally, you will partner up with a teammate and send each other the lesson implementation. Then, write a small paragraph evaluating your peer's textbook based on usability and effectiveness.

Homework 4: Accessibility

Last week, we all looked at different disabilities and researched our legal obligations to students with those disabilities. We also tried to make actionable suggestions that we can pass along to our development teams to make sure all of our content is accessible.

This week, we are going to build upon that even further. As part of this homework, I want to combine all of the guidelines you suggested last week into a single design document that our other teams will have to abide by in the future. For example, if last week we suggested that we need to have a minimum contrast ratio, our video content needs to have subtitles, and we need to support screen readers, there should be a document that combines all of these requirements and describes what we need to do in order to satisfy them. Since we’re only a team of three, you should have a meeting this week to combine all your requirements (that you discovered last week) into a single design document that our other teams can follow as they’re creating new content.

In addition, I’d also like for you to research some tools that we can use to make sure all of our web-content is accessible. Here may be a good starting point. I’d like you to submit a proposal about the tools we should use and how they should be integrated into our development process.

What to submit:

• Your accessibility guideline document (that you created as a team so I expect that you all turn in roughly the same document)

• Should layout all of our requirements that other teams must satisfy in order to develop accessible content

• Your proposal for tools we can use to test the accessibility of our content

• A few paragraphs describing a couple tools, why we should use them, and how they could be integrated into our development process

I expect that this homework should take roughly three hours, so please email me if it is taking significantly more!

Homework 4: Video Team

Note - in 2 weeks, we need to have one finalized example content-video for Professor Kosbie, including a suggested video style/format (typing vs whiteboarding, etc), a way to track views, hosting, etc. This week's homework was designed to get ready for that deadline.

Everyone:

• Research Vimeo.

• We need to decide hosting asap, and Vimeo is our best option right now.
• How commonly is it banned in schools?
• How do accounts work?
• How does view tracking work (can you see how long a user watched a video, or just whether or not they pressed play)?
• How does embedding work?
• Submit this analysis with your homework.

Remy:

• Compare OpenShot, DaVinci Resolve, and HitFilm

• Make a quick animation in each
• Compare how easy it is to do with each software
• Discuss the benefits/drawbacks to each one (does it have the features we need, is it simple enough, how high is the learning curve)
• Make a recommendation about which one to use

Alan and Alex:

• Make an initial code animation program

• Takes in a file with (python) code
• When the program is run, the user can select which line(s) to highlight
• Submit this as a separate zip (within your overall hw4 zip) including

• All the code necessary to run
• An example python file (to test highlighting)
• A readme explaining how to run it

Homework 4: Media Team

Last week, we began organizing media content into categories, essentially pre-packaging the content we’d need to make some simple lessons. This week, I’d like to continue that process. We have a lot of media, and will need to make a lot of exercises, so this is a really important task. If you could put together 2-3 more media collections for this week, I think we’d have a really solid foundation, so I’d like you to do that as part of your homework this week.

We also need to start thinking about the workflow and team organization. How should we organize the rest of our content in such a way that other teams know what we have available? Where will it be available (do we just dump everything into a Google drive or is there a nicer solution)? What will the process be like when teams need to request media content for one of their lessons? These seem like small details but are actually important things to consider. I’d like you to spend some time thinking about this and then submit a short summary of what you think our standard operating procedures should look like going forward. This is pretty open ended, so feel free to include your thoughts on things that I didn’t mention here.

What to submit:

• Your media collections
• Your proposed operating guidelines for the media team

I expect that this homework should take roughly two or three hours, so please email me if it is taking significantly more!

Homework 4: Extended Framework

• The goal of this assignment is to educate your teammate to use the API you used before to implement an application.
• Team Logistics:

• For this assignment you will be getting into tutor and student groups.

…

• Try to avoid grouping with someone that did the same API as you the week before. If it is absolutely impossible to do so message me as soon as you realize it. However, I will try to preempt that.

• Assignment logistics:

• You will meet with your tutor sometime during this week to go over the API your tutor worked with last week.
• You must work on the same API as your tutor worked on for hw3.

…

• You must each turn in a different small app using the assigned API.

• You will also report the time when you met with your tutor along with a small summary of what you went over.

• Application logistics:

• The request processing will depend on the API taught to you by your tutor. It doesn’t need to be anything too grandiose, just a console app or a few cool features that use the api is plenty.
• For a simple guide on what is expected look at the example script I sent to you with homework 3.

Homework 4: CS Pedagogy & Competitive Analysis

1) Pick an existing program from this list

        - Project LeadTheWay

        - Codecademy

        - Codeavengers

        - Khan Academy

that you haven’t studied, and compare / contrast your findings on the program to what someone previously saw from this document (https://docs.google.com/spreadsheets/d/1nU3JV0LI-BE5jt_zqPoxfK3ROCIzS-UoMTqrs-kkXvU/edit#gid=0).

Sign up with your name (I made space) and add your thoughts below the original person as well as producing a writeup with your thoughts. Make sure to read the other person’s thoughts first and respond to how you agree / disagree with those.

2) Continue research into Pedagogy papers / books and look into what aspects would be useful for the entire class to know.

***) If you find anything incredibly insightful (either from another program OR from a pedagogy paper), let me know so we can present it to the class. Basically like what I presented from the Khan Academy site the other day. If you aren’t sure if something is “worthy” enough to show the class, send it to me and I’ll help decide :)