A5: Core implementation - due Thursday, 11/3, 11:59pm


This week's goal is for you to complete the interaction flow for your app. Spend this week fleshing out the implementation of your main interactive features. Don't worry about making it pretty yet—fonts, colors, and pixel-perfect layout can all come later. Also, update your development plan as you discover more about what you want to prioritize, what you can expect to implement, and what you may need to mock up.

Step 1: Revisit POV & Inspiration

This week you will be completing core implementation features of your app. However, it's important not to lose sight of your point of view (POV) and inspiration while implementing functionality. To keep you on track, you will revisit your POV as well as your inspirations for your app. In one paragraph, summarize your POV and think about the inspirations that you are using to develop your app. You may find it helpful to return to your A1 and A2 assignments to refresh your memory on the POV and inspirations, but the paragraph should contain revised and new information based on what you've learned in the past few weeks.

Step 2: Reading JSON data

Your app should be able to read JSON data from the server and use it to customize a set of templated webpages. (This way, you don't need to take the time to set up a real database.) You should create a file named data.json that has data pre-stored in it, and your app's job is to retrieve data from that file and populate its webpages with it. (You can create fake data if it makes sense for your project. Also, it is not required that your data.json file dynamically update with new data. A pre-filled static data set is fine.) Refer to Labs 4, 5, and 6 for help on this, especially paying attention to Lab 5.

OPTIONAL: If you choose to use a real database instead of a JSON file (which you are not required to do), it is up to you to configure and debug it; we cannot support the wide variety of databases that students may choose to use in this class. Also, make sure to VERY clearly document the fact that you are not using data.json in your assignment submission, so that we can know not to look for a data.json file. Instead of a data.json file, you must provide a human-readable dump of the data in your database, since we cannot otherwise see into your database. If you don't do this, then we cannot give you that point on the rubric. Note that using data.json has the advantage of it being human-readable, so it is easier to debug and grade.

Step 3: Implement Unique Interactions

What is it about your app that makes it unique? What specific features make it stand out?

Now is the time to implement the unique features that separate your app from other apps; i.e., not just implementing generic functionality. Think about the core functionality of your app. What needs to be coded up to make those features work? In an app that manages goals and todo lists, you might be implementing the feature to make events and to add/delete them from a task list. If you were developing Yelp, you might implement a feature to search for suitable restaurants based off of filter preferences and the user's location this week. With Yelp, you might also develop the review system, where users can write reviews for each place and rate it.

By the end of this week, your goal is to provide the users with several ways to interact with your app, including the most important and required interactions.

Step 4: Fake Login Screen

Making a login screen will help you keep track of individual users and their personal progress within your app. Using Wizard-of-Oz techniques, create a fake login page, which simulates the experience of logging in but does not use real user accounts. For example, you may ask for a login and password, which upon submit, lead the users to the first page of your app without saving the information or any actual authentification of the information. Do not spend time making real login functionality. You can do it later if you want, but NOT for this assignment.

Step 5: Update Your Development Plan

Follow the development plan you created last week, and update it as you go. Mark tasks that have been completed and add new ones if you need to. Make sure that your next week is planned out with goals and who is responsible for each task. Re-evaluate your stretch goals and what's feasible and what isn't. You may decide that your plan is too ambitious, or you may decide that your plan is too conservative; maneuver accordingly.

Step 6: Task Description

Write a 2-sentence description of a task that you'd like your TA to try when grading this assignment, without giving away the exact instructions on how to accomplish this task. For example, if you ultimately want users to visit a newsfeed page and subscribe to it, the instructions might be "find a way to keep up to date with current events outside of the app." In another example, if you were developing Uber, you might want the user to enter a destination, use the fare estimate feature, and compare UberX from Uber Black, but your instructions should say something like: "Find the cheapest way to get home from UCSD" (since that does not give away how exactly to accomplish the task). The task should not require your TA provide any personal information or to create an account (including on third-party platforms). If your task requires any such information, create a dummy account or dummy information for your TA to use, and add it to the task description.

Student Examples

Here are some examples of development plans. If you want, use File -> Make a copy... to copy over the formatting for each spreadsheet to form the basis for your own plan.

  • (1) is very stylized, dynamic, and mostly thorough,
  • (2) is fairly thorough, colorful, but is missing time estimates and has only one stretch goal listed,
  • (3) is a mediocre plan that's mostly thorough, where most tasks are broken down into less than 1 hour chunks,
  • (4) is very thorough, with time estimates and time costs, but some tasks could be more actionable,
  • (5) is a great video of the dynamic nature of implementation plans throughout the project.

GradeSource++: This example project abstracts away GradeSource for you and works with the data to show you where you are in a class.

Balancr: This app helps people balance their time between work and play. This team has done a wonderful job making the app functional-- you can create a sign-up, add activities, and see it reflected on the pie chart.

For both examples above, simply imagine that the data that powers the functionality of the apps are temporarily stored in a data variable that is pre-populated with data from a .json file.

Team Submission

For this assignment, ONE person will submit the assignment for their team, listing every team member's name and student ID number (PID) in the assignment submission.

Your write-up will contain the following in one single PDF:

  • One paragraph on your point of view & inspirations for your app. (Revisit POV & Inspiration)
  • The URL of the prototype that you want us to see and grade. Note: the URL must work at least until your assignment is graded in the coming week. If it doesn't work, you'll receive no credit. Very important: the contents of this URL should not change in the upcoming week while your TA is grading this assignment, or else that is a violation of the academic honesty policy; test your new changes at a different URL. (Interaction Flow, Use of Data in Prototype)
  • A description of the unique interactions that you chose to implement, along with an argument for why those are unique to your app. (Unique Interactions)
  • The PDF of your original A4 development plan that you submitted last week. (Look up how to join multiple PDFs into one single PDF submission.) (Original A4 Development Plan)
  • The PDF of your updated development plan, taking into account this week's updates. (Look up how to join multiple PDFs into one single PDF submission.) (Updated Development Plan)
  • A ~2-sentence description of the task you'd like us to try when grading this assignment. This description should include any needed login/password information. (Task Description)
  • The GitHub URL for your project's source code.

Note: since we may grade your assignment up to a few days after submission, per the honor code, we expect that the prototype URL show the state of your prototype at the time of submission. You will very likely be updating your prototype after submission, but please do so on a separate URL.

Submit your single formatted PDF in Gradescope.

Evaluation criteria & Grading rubric

The rubric below contains criteria that are worth one point each and will be graded independently and in a binary fashion.

  1. The "Revisit POV & Inspiration" paragraph summarizes the POV and inspirations that connect to how the prototype is being designed.
  2. All of your code is publicly viewable on GitHub.
  3. Your data.json file contains pre-seeded data for your app that will be used to render parts of HTML webpages using templates. (If you are using a database, provide a human-readable dump of its data since we cannot see into your database.)
  4. The app screen(s) that reads JSON data from the server (or optionally, from a database) is able to do so successfully and without error.
  5. Every page in the app has their primary functionality implemented.
  6. Every page is able to perform a unique task that contributes to the overall goal of the app.
  7. Manually testing all functionality in each page of the app does not lead to dead ends or errors.
  8. The description of your unique interaction(s) convincingly argues that it is, in fact, unique for your app.
  9. At least one piece of unique interaction has been implemented in the app.
  10. Login screen is FAKE and simulates the experience of logging in. (no credit if you implement a real login screen; we want to see you create a fake one first)
  11. Development plan is attached as a PDF, is easy for your TA to read and understand, and has been updated to show progress and additional tasks in the new version compared to the previous week.
  12. GitHub repository URL and your deployed app's URL are present, and both contain working code.
  13. 2-sentence task description is present.
  14. Task description does not give specific instructions, but instead describes a task that a real user might want to do.
  15. The app's functionality for the described task is complete in its interaction and causes no errors.
  16. Extra credit (up to 4 points) - In addition, your TA can give your team up to 4 extra credit points if your app is extraordinarily polished by this deadline, which provides an incentive to get work done early and to go above and beyond the basic requirements.