CSCE-315: Programming Studio (Fall 2020)

Project 3: G-Suite Add-On Development

Updates

Updates will be posted here.

Team configuration

This is a team project. The team configuration will be the same as project 2.

Project Goal

This project is meant to help familiarize you with:

  • Cloud service (G-suites) add-on application development concepts
  • Cloud service (G-suites) add-on application development tools
  • Agile development methodology : SCRUM
  • Human Computer Interaction design and evaluation
  • Presenting your work to others

1. General Project Requirements

For this project, you will write a G-suites add-on of your own design.

  • Research the G-suite Add-on market to find a niche (you can browse the G-Suite Market). Note: some Add-ons have github source -- you can study these to see what Add-ons are capable of and to get a general orientation, but should not use the code itself in your project.
  • Design and implement your own G-suite Add-on.
  • The Add-on should include the following (All are mandatory):
    1. User interface that includes drop-down menu, side bar, and pop-up dialog box.
    2. Analysis and manipulation of text and other document objects already in the document.
    3. The use of dynamic graphics (2D or 3D, non-UI, showing a couple of photos is not enough) that are generated based on some kind of real world or synthetic data, or user input. For example, weather data (temperature, humidity, etc.), data structures (stack, linked list, etc.), matrices (adjacency matrix, correlation matrix, etc.), statistics plots (mean, variance), chess game board configurations (given current board state data, and sequence of moves), equations, brain image data 3D rendering, health data, workout schedule/data, travel itinerary data, etc.
Note that this is a relatively open-ended assignment. Therefore, the first task your team should take on is to determine basics such as what features you will try to implement, and how to go about this. Keep your expectations reasonable, and make sure you have plans for what to do, both if you are able to add additional functionality, and if you need to remove functionality. There are a lot of "new" aspects to this project, so you should make sure to keep your expectations reasonable (but not too low).

Think about for what use case you want with Google Doc, and what features are missing that make your job repetitive and tiresome. Google Doc for XYZ. The following are some first thoughts that occurred to me, so some of these may be overly difficult to implement.

  • Example 1: I want an Add-on that can help me plan my vacation trip better, by quickly including images, lists, maps, addresses, contacts, itinerary, reservations, etc. into a single document.
  • Example 2: I want an Add-on that can help me plan and keep track of my workout schedule and weight-training regimen, with a scrap-book like function where I can automatically show representative images for each workout from the list of images that I registered in the app.
  • Example 3: I want an Add-on that can help me quickly take a memo for a food recipe, where I can add stock images, link to original source, list items and amount, quickly convert between metric and imperial measures, and show the steps in an intuitive manner.
  • Example 4: I want an Add-on to ...

2. Human Computer Interaction Requirement

A key component of this project is the conduct a HCI user study to improve your interface. This user study will have a very limited scope compared to a full-blown user study.

The stages of the user study are outlined below.

  1. Stage 1: User stories and User study design (in Phase 2 in the project)
  2. Stage 2: Conduct user study (in Phase 3 in the project)
  3. State 3: Analyze results and propose changes to UI (in Phase 3 in the project)
  4. Stage 4: Implemented revised UI (in Phase 4 in the project)
Each stage is detailed below:

Stage 1: User stories and User study design

This stage will include the following deliverables:
  1. User Stories: Two user stories, one paragraph each. The user story will contain how two different users will use your Add-on. For example, consider vacation planning. You can write a typical use from the perspective of a traveler and a travel guide. Example (Traveler): "I want to collect all the information I need for my upcoming trip to Africa. I will use the Add-on to write down the daily itinerary, and use the UI to pull maps and photos and include them easily without copying and pasting the content manually. I also want an interface where I can type in the flight and transportation schedule easily. ... "
  2. User study design: Based on the user stories, you need to develop a user study design.
    • How many participants? How long will each session be?
    • Where and when to conduct the study (use the lab time, in breakout rooms, etc.)
    • What task will you give to your subject?
    • What pre-study questions will you ask (about 5 questions)?
    • What will you measure during the study? How will you collect this information?
    • What post-study questions will you ask?
    • How you will analyze the data (about 5 questions)?

Stage 2: Conduct user study

Carry out the user study.

State 3: Analyze results and propose changes to the UI

Analyze the collected data and feedback. If certain UI features were pointed out as cumbersome or found to be ineffective (hard to guess what it does, too many levels to reach needed function, confusing names, etc.), propose how you will revise the UI to address these concerns.

Stage 4: Implement revised UI

Implement the revision plan.
Stage 1 : Conduct in phase 2 of the project.
Stage 2 : Conduct in phase 3 of the project.
Stage 3 : Conduct in phase 3 of the project.
Stage 4 : Conduct in phase 4 of the project.

3. Agile Development Methodology (SCRUM) Requirement

This project will be approached by trying to follow an approach similar to one that would be used in an agile development environment. Due to team size, and even more significant, due to time constraints, we will not be able to follow a "real" agile approach, but we will try to capture some of the themes.

We will use an iterative approach to this assignment. Your team will be asked to implement the program over three "sprint" iterations, each just over a few days in length. At the end of each iteration, your team should have a complete, working program feature set. More features and functionality should be added at each iteration. In addition, you are to keep a backlog, a burndown chart, and hold SCRUM meetings (almost everyday). Each of these will be discussed below.

The following will be the project schedule:

  1. Project Assigned
  2. Product backlog and initial burndown chart created
  3. Sprint 1 backlog created (UI code)
  4. Sprint 1 completed.
  5. Sprint 2 backlog created (Major functionality code)
  6. Sprint 2 completed
  7. Sprint 3 backlog created (Final version + UI revision based on feedback)
  8. Final sprint completed
  9. After each sprint, along with other required materials, submit : For this sprint, (1) semi-daily sprint meeting log, (2) initial and final spring backlog, (3) initial and final burndown chart.

SCRUM tips

Here are some example templates of the product backlog: And, here's the burndown chart: Some tips:
For the project, you should focus on the tasks based on submission timeline (UI -> major functionality -> integration). Set up your product backlog accordingly. As for the burndown chart, you will initially not have any data. Use your estimated time for each task and during which sprint you will get those done to come up with a initial burndown chart.

Grading

There will be a team grade assigned for the project, and like the first project, the team grade will be apportioned out to the individuals.

See below for rubrics.

Deliverables

See course web page for deadlines. Sprint meeting log will serve as the development log.
  1. Phase 1: Design document
    • The design document requirements are the same as Project 2.
    • Include an illustration that shows a rough transition diagram between different user-interface components of your app: Drop down menus, side-bar data entry, dialog boxes, etc.
    • Include information on major classes and how they interact. Also show a diagram.
    • Include SCRUM details.
    • Submit: Single file, named: 315-2020fall-<section>-<team_ID>-design.docx or pdf
      • Include all five items listed below in "Grading".
    • Grading:
      • 5% : Add-on concept sketch (brief introduction)
      • 15%: Key functionality to be provided
      • 30%: User interface design : UI elements and how they are expected to interact. Show mock-up. This should include a mock questionnaire.
      • 30%: Overall system design, including major classes and their interactions. Show diagram.
      • 20%: SCRUM details: Product backlog, Burndown chart, sprint meeting schedule (e.g., MWF 9am-9:30am).
  2. Phase 2: User interface code.
    • This will include all displays and user interface elements such as drop down menus, side-bar, and dialog box. It would be like an hollow shell that provides all major user interaction capability (navigating through different components), without any meat (no actual functionality). Just pop up a dialog box showing what function is expected to be implemented.
    • Include an updated illustration of your transition diagram.
    • Include your SCRUM materials.
    • Include User Stories and User Study Design.
    • Submit: Single zip file: 315-2020fall-<section>-<team_ID>-phase2.zip . Zip file contents must include:
      • all source code
      • user_study_design.docx or pdf: Include user stories and user study design, based on your implemented UI. See section 2, "Human Computer Interaction Requirement", above).
      • sprint.docx or pdf : sprint meeting logs , initial sprint backlog and final spring backlog, initial burndown chart, final burndown chart. Updated product backlog.
      • report.docx or pdf : include instructions to install and run, and include screen shots of the implemented user interface.
    • Grading:
      • 5%: layout, style, comments
      • 20%: all interface elements implemented
      • 60%: all interface elements function properly
      • 15%: SCRUM - sprint log, sprint backlog, burndown chart
  3. Phase 3: Core algorithm implementation.
    • Include main computational functionality of your add-on.
    • At this point, it is not required that the functionality is fully integrated with the user interface.
    • Include your SCRUM materials.
    • Include brief report on UI user study and feedback, plus plan for revision.
    • Submit: Single zip file: 315-2020fall-<section>-<team_ID>-phase3.zip . Zip file contents must include:
      • all source code
      • sprint.docx or pdf : sprint meeting logs , initial sprint backlog and final spring backlog, initial burndown chart, final burndown chart. Updated product backlog.
      • report.docx or pdf : include instructions to install and run, and include screen shots (or output of the functions you implemented, if not hooked up to the UI yet) of the implementated function.
      • user_study_results.docx of pdf : include user study results (user study data, analysis), and UI revision plan.
    • Grading:
      • 5%: layout, style, comments
      • 15%: all core algorithms implemented
      • 55%: all core algorithms function properly
      • 10%: UI user study and revision plan.
      • 15%: SCRUM - sprint log, sprint backlog, burndown chart
  4. Phase 4: Final version.
    • Submit the fully integrated code.
    • Include SCRUM materials.
    • Individual work load distribution (percentage): must be based on team consensus.
    • Submit:
      • Team: 315-2020fall-<section>-<team_ID>-final.zip
        • all source code
        • sprint.docx or pdf : sprint meeting logs , initial sprint backlog and final spring backlog, initial burndown chart, final burndown chart.
        • report.docx or pdf : include instructions to install and run, and include screen shots of the functions you implemented. Include a section on how you updated your UI based on user study (see "Grading" below for details).
        • contribution.docx or pdf : individual contribution percentage. Example:

          member percentage contributed details
          member 1: 20% UI design and implementation, SCRUM logs, reports
          member 2: 25% Key function 1 implementation ; UI implementation, SCRUM meeting management
          member 3: 30% Key function 2 and 3 implementation ; UI testing/debugging, sprint backlog and burndown chart maintenance, presentation slides
          ... ... ...
          Total = 100%
      • Individual: retrospective.docx or pdf (Writing assignment)
        • post production notes (very brief intro to your add-on initial design concept, changes you had to make to your design as you went along and why, challenges, solutions, lessons learned). 400 words. No references are needed.
    • Grading (Team):
      • 5% Code style (naming, commenting, layout, etc.)
      • 10% Update based on HCI User feedback and brief document outlining the method used and changes made.
      • 40% Add-on functionality (must meet all requirements and function properly)
      • 15% SCRUM method: sprint meeting log, product log (and revisions), burndown chart (and revisions)
      • 5% Final Report: Add-on user manual (similar to Add-on info on market place plus "Help")
      • 5% Final presentation (see "Presentation" section below)
      • 20% Weighted average of phase 1 through phase 3.
    • Grading (Individual : Writing):
      • 10% : Spelling / Grammar / Puctuation
      • 10% : Sections and paragraphs are appropriately marked and aligned and formatted for easy reading.
      • 20% : Article follows logical, consistent pattern of development of ideas.
      • 40% : Content is insightful, not just a list of stuff done
      • 10% : Paragraphs are of appropriate length
      • 10% : Transition between paragraphs is smooth

Presentation

All teams are required to give a short presentation.
  • The presentation will be during the final exam slot. Final presentation is on 12/7 from 11:00am-1:30pm
  • 6 minutes per presentation. 2 minute Q/A and transition. Submit the presentation file prior to the presentation date. Submission due date for this is 12/6 Sunday 11:59pm.
  • Team presentation order will be announced later.
  • Presentations are limited to 6 pages including the title page, and should follow the exact format as follows (each team member will rotate and present at least one slide):
    1. Title: project title, team #, list of members (with photos).
    2. Intro: brief intro of the app concept/design
    3. Technical aspects: overall design
    4. Code snippets: major highlights
    5. Screen shots
    6. Conclusion: lessons learned, etc.
    7. Rubrics:
      • 30% : Organization: all required topics are included, and each slide is well organized (amount of text, layout of figures and text, etc.)
      • 30% : Technical depth: The contents exhibit technical depth.
      • 20% : Delivery: The content of the slides are effectively communicated to the audience.
      • 20% : Time management: the 6 minutes that are given are used in full and did not overrun. Each slide was given due time.