In this assignment, complete the interaction flow, fleshing out the interactive elements. 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
As you dive into implementation, don't lose sight of your high-level goals.
Your webapp should read a JSON data file (such as data.json) with pre-stored data. Your code should ruse that data to customize handlebars templates. Populate your app with it by manually adding new objects to the data variable. It is not required that your data.json file dynamically update with new data. Refer to Lab 4 & Lab 5 for help.
What is it about your app that makes it unique? What specific features make it stand out?
Now is the time to implement the features that separate you from the other apps. Think about the core functionality of your app. What needs to be done to make its features work? In an app that manages goals and todo lists, you might be implementing the feature to make events and 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.
Your goal is to provide the users with more ways to interact with your app, including the most important interactions required for your app, by the end of this week.
Making a login screen will help you keep track of individual users and their unique features or progress within your app. Using Wizard of Oz techniques, create a fake login, which simulates the experience of logging in. You may ask for a login and password, which on submit leads the users to the first page of your app. You are not required to save the information or actually authentication via username and password. If you do use real auth, great! Just remember to include any needed login/password information in your writeup :).
Follow the development plan you created last week, and update it as you go. Include a sum of the expected and actual number of hours for each teammate in the top left hand corner. 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. (We recommend Google Sheets.)
Here are some examples from prior years. Note assignments change from year to year, so use these examples as a reference, see where they succeed/breakdown, and make sure your final submissions adhere to the rubric for this year.
Development plans: (1)
In this assignment, we want to emphasize the user task at this stage of development. The interface should be fluid with respect to a particular task made intuitively easy to step through as a user. For this assignment, this team would complete functionality by capturing all of the relevant information entered into the text boxes, and updating the content of each page with that new information.
GradeSource++: This example project from last year abstracts 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. They have made their 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 supports the functionality of the apps are only temporarily stored in a data variable that is pre-populated with data from a .json file.
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 another version.
Submit your formatted pdf hereNote: if you are a rare group of 2: pursue a dev plan that meets the rubric with a reasonable workload. If you are unable, you may propose an accommodation to this on Piazza; include a link to your dev plan.
Self Assesssment (1 person / team) During studio, click here to assess your group's work as a collective unit.
Team Assessment (individual) During studio, click here to assess your own work and each of your team member's work.