15-539 Week 6 Team Homeworks

Homework 6: Backend

• [Small Task] [Eddie] Finalize a version of the backend for frontend demo
• [Small Task] [Eddie] List files
• [Small Task] [Eddie] CORS
• [Small Task] [Eddie]  add Auth to API routes
• [Small Task] [Eddie] have login return previous token if one exists
• [Big Task] [Scott + Matt + Arman] Implement Permissions
• [Small Task] [Maya] Find way to remove directories after file storage tests run
• [Small Task] [Maya] Review previous homework with Matt  
• [Small Task] [Matt] User views are still function based
• [Small Task] [Scott] Custom enum type for choice fields

Homework 6: UX Design

[Chris + Maya] Exercise Team + [Helen]:

• Meet with Kosbie to discuss prototype
• Discuss with Helen how exercises will be integrated into the IDE
• Use paper prototype work from hw5 to make an interactive wireframe in invision or other similar software

[Erika + Maya] Student Portal

• List user desires for student portal
• Make first rough draft of prototype
• Talk to Sean about Teacher Portal + meeting with Erin

[Erika + Luca + Helen] IDE Team:

• Make spec sheet for Dev Team
• Develop Visual Tone with Remy

• Discuss look and feel
• Determine transition and interaction of elements
• Determine colors, typeface, and icon styles

• Help out other assigned team

• [Erika] Student Portal
• [Luca] Lesson Plan
• [Helen] Exercise

[Sean] Teacher Portal

• Discuss interactions between assignments and teacher portal with lesson plan team [Chris + Remy]
• Meet with Kosbie to go through teacher portal designs
• Meet with Erin (maybe this Monday) and walk her through your designs + decisions, get feedback
• Start building wireframes from freehand work in hw5

[Matt + Remy] Lesson Plan Team + [Luca]:

• Meet with Kosbie to discuss hw4 generated user desires
• Meet with Sean (Teacher Portal) to discuss integration of the two designs
• Meet with Video Team (coordinate with TA Lizzy) to discuss video's role in the lesson plan
• Take hw4 prototype and generated user desires and make it into a more interactive mockup with multiple screens

[Remy] Graphic Design:

• Share style guidelines with whole team during meeting on Sunday
• Advise IDE Team in visual tone + style guidelines

Homework 6: Frontend/UXI 

Overview

Good job on finishing up the last training items last week. This week the entire Frontend team is going to start focusing on writing production level code. Below are general guidelines that everyone is expected to adhere to from now on. Sub-team specific assignments follow afterwards.

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

Frontend weekly meeting: Sunday 10/8 12:30-1:30pm, WEH - 4416 (Sorrels Library, room in the way back corner)

Status meetings: Fill out this when2meet by noon on Friday! Coordinate within your subteam (below) and have a single member fill out your combined availability.

General Guidelines

• Spend a decent amount of time understanding the current structure of the frontend repo (and feel free to make suggestions if they come to mind).
• Don't be afraid to refactor if you find a better/cleaner way to do something.
• Spend enough time thinking about architecture decisions (module interfaces, naming, etc.) to be able to defend them.
• Aim to hit consistent, quality code. If someone were to look at two files/two parts of a file, they should not be able to tell who wrote it.
• Divide, then conquer. Design your components to be modular enough to work semi-parallely.
• Code review as you go. (See specific guidelines)
• Some code review tips:

• Be able to defend both comments and replies.
• It is often helpful to provide alternatives if you request a change. For example if you think a component is mis-named, provide alternative names that you think work better.
• Be respectful.
• Do not take comments personally—it's about the code, not you as a person.

Specific guidelines (must follow)

• Work on a 'team' branch off of the core frontend repo.
• Branch naming conventions:

• The main 'team'/feature branch should be named after the component your sub-team is implementing. For example, `signup`, or `navigation`, or `layout`
• When working on a specific component, branch off the main feature branch to a branch named <feature>/<component>. For example, `signup/submit-button` for a submit button on the signup page.

• Use pull requests to integrate features into your main feature branch. Do pull requests often, and tag the rest of your team so they know what's going on.

• Pull requests should automatically trigger a Travis CI build. If it fails, click on the red 'x' to see what to fix. It should indicate which build step failed. See the readme on how to run the build locally.

• Deliverable:

• By the deadline, make a PR from your team's main feature branch to master.
• The PR description should contain a brief report of the specific functionalities that you implemented, any known bugs, things to work on for the next week, and any other notes.

Cyrus, Eugene, Jerry

• Convert the navbar component to fit into the directory structure of the main frontend repo.
• Use the updated mockup: https://projects.invisionapp.com/share/VDDRI7WXE#/screens/256325799
• Additional concrete goals should be set during the status meeting

Chris, Elliot, Alec

• Move sign up page to main repo.
• Integrate backend API /users/register endpoint.
• Additional concrete goals should be set during the status meeting

Zach, Rick

• Use (and potentially modify) the Bootstrap grid system to create a robust layout for the IDE.
• The layout involves the placement of the text editor, console. canvas, button toolbar, and shell input components.
• Use the mockup as guidance: https://projects.invisionapp.com/share/VDDRI7WXE#/screens/256325799
• Ensure a TextEditor column width of at least 80
• Ensure a constant canvas size
• Clear up details in the status meeting.

Homework 6: Autograder

Homework 6 Tasks

• Primary focus: create a 'benchmarking' exercise (or several exercises, even)

• Aim to encapsulate a wide range of features.
• Feel free to be inspired by external resources, citing them of course

• Experiment with the latest animation framework (attached)

Notes for Jacob

• Good work on the prototype Autograding module so far. We want to pause further development on that until we assemble as a full team (with Prof. Kosbie)

• Like I mentioned earlier today, expect this to happen within the next week or two.

• Benchmark exercise seems vague:

• Create several categories, don't feel limited by Autograding mechanics yet—that's what we'll try to solve next week

• Keep me updated if you have questions/want to discuss anything!

Homework 6: Graphic Design

Merged into UX Design.

Homework 6: Textbook

Assignment:

• This assignment is pretty similar to HW4 and once again you will be working together to make finalized implementation of the synthesized chapter plan from HW6.
• In order to facilitate this homework we will try to break down the process into a set of expected deadlines:

• By Friday Night: Decide, from the tools we have used so far, which tool is the most suited to for our task. This will be decided by a slack meeting in order to more easily accommodate a time slot.
• By Saturday: Flesh out your lesson drafts/outlines as well as create a storyboard and layout diagram for your implementation.
• By Sunday: Meet for draft review as well as final comments and design convergence.

• After the meeting I will be available for some time to help with any questions on implementation or goal clarifications.

• Monday: Post your finalized project zip containing the folder described below, with the exception of lesson peer reviews, on Slack at which point you will go through the finalized chapter and make thoughtful comments on the following:

• Interactivity
• Informativeness
• Engagement

• Tuesday Lecture: Have a small note on anything you want to stress about your specific lesson implementation, such as a specific feature you found very useful.

Submission Details:

• A folder named textbookImplementation.
• Inside the folder:

• A README (only .txt, .md, or .pdf please!) detailing problems encountered when implementing and any suggestions/critiques you have about our final product. outline you fleshed out.
• Your comments (described in the section above)
• (TBD FRIDAY) The rest of the submission will include any structured directories containing our finalized product.

Homework 6: Accessibility

This week, we will begin some important work that involves assessing the accessibility of our own real prototypes! The UX design team has created an IDE mockup (found here). It is still in its early stages, but we want to catch any accessibility related issues early on so they can be corrected as soon as possible. I’d like you all to review the IDE prototype and comment on any accessibility concerns you may have.

Additionally, we are starting to produce some video content, and I think it would be helpful to lay out rules that all of our video lessons must abide by. This may be as simple as providing subtitles, but there may also be things we’ve overlooked. I’d like for you all to collectively decide on the rules we will follow for our video content based on your past research. You should produce one document together as a group. I don’t expect this to take long, since we’ve already done most of the research and just need to compile it into a concise document. After reviewing this document, I will be meeting with the video team to discuss accessibility requirements.

What to submit:

• Your IDE accessibility feedback        

• Should include things that were done well
• Should include things that need improvement

• When improvement is required, provide actionable feedback

• A link to the document detailing requirements for video content

• Should be one document for the entire group, coordinate collaboration however you’d like!

It’s exciting that we are moving past research and are starting to apply our findings to real content! Have fun with this assignment and let me know if any questions arise!

Homework 6: Video Team

Remy:

• Prepare an OpenShot tutorial (basics of cutting/moving clips)
• Edit the video, with the ‘stars’ animation

Alan and Alex:

• Documentation on the video production process
• Requirements:

• Writeup on the SCS teaching kit

• How to record
• How to export video

• Submitting video to the editing team

• File type
• Additional information

• For title screens
• Animations to be included

• Code animation program

• How to use
• Current features
• Future features

Homework 6: Media Team

This week, we are going to shift our focus away from finding and organizing media. Instead, we are going to focus on how to distribute it both for our own content and for projects that students may end up creating. What I’d like you to do is look at some of the different content distribution tools that are available, and come up with some pros and cons for each of them (essentially you’ll just be doing a competitive analysis). For example, we may want to use Amazon CloudFront to deliver our media content, but this is just one option and there are surely more. We want to make sure that we choose the best tool for the job, so a competitive analysis of products is required:

What to Submit?

• A document detailing all of the products you looked at with pros and cons for each

• At the end, include your proposal for which product you thought was best and provide a brief justification

Homework 6: Extended Framework

Hi everyone, this week, we will be doing a deep dive into a single API. I want to see you guys really get to know the APIs that you chose in homework 5 by using them to develop a small, fun application that has a visual component (i.e. something that could be shown on the canvas). Next week, you will be turning this app into a lesson, but for now, just worry about making it cool to play with!

I will not be requiring you to use our animation framework this week, but keep in mind that our eventual goal is to allow students to use the app on the canvas. You will probably want to use TkInter because you already know it and our framework should be able to do anything it can do.

This week, you have two deliverables that will be submitted via Autolab with your regular homework:

1. The source code of your application as one python file.

2. Documentation describing how to run, and interact with your program.

These specifications are loose because I really want to let you guys dive into code this week, make something fun!

Homework 6: CS Pedagogy & Competitive Analysis

• Finish compiling your rubrics and first using it for impressions on sites.
• Find more papers about pedagogy for CS and how we can use that in teaching