A5: Core implementation – DUE Wednesday, Nov. 8 @ 12:30am
[The workload for the rest of the assignments will ramp up significantly since you need to start writing code and working toward creating a fully-functional web application. Please plan accordingly and get up to speed on frontend web programming.]
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: 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 3: 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.
Step 4: 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 5: 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 such as Facebook or Google). 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.
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.
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.
Submit a single well-formatted PDF file for your entire team with the following items concatenated within it:
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 to the bin for your studio section. Only one team member needs to submit on behalf of the entire team.
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.
Due In Studio: Teammate Assessment
Frequently Asked Questions
Q: What web frameworks or open-source tools can we use?
A: Anything you want, as long as you can meet the requirements of each assignment's rubric. Note that the teaching staff may not be able to help you beyond what is covered in the labs, so choose wisely (i.e., make sure the entire group is comfortable with the stack and none of you is burdened to handle things alone). We will only officially support the web stack that we teach in labs, so if you go above and beyond this basic stack, then make sure your team is fully comfortable using your chosen tools.
Q: Where can I find more web development tutorials and resources?
A: As a starting point, check out our web dev resources section.