Term Project - Milestone 1

1. Objectives
2. Collaboration
3. Due
4. Instructions
   1. Part 0: Accept the GitHub Classroom Assignment
   2. Part 1: Prototyping
      1. What you must produce
   3. Part 2: User Flow Diagram
      1. What you must produce
   4. Part 3: Project Starter Code
      1. Part 3.a: Partner 1 instructions
      2. Part 3.b: (If applicable) Partner 2 instructions
      3. Part 3.c: Requirements for Initial Content
5. Submission

Objectives

• To create prototypes of your application’s screens and a user flow diagram.
• To initialize your GitHub repository with a starter project.

Collaboration

Work with your project partner(s), if any, on this assignment.

Due

Sunday, March 17 @ 11:59pm via GitHub.

Instructions

Review the overall Term Project Description first.

Part 0: Accept the GitHub Classroom Assignment

1. Follow this link to GitHub: https://classroom.github.com/a/t7Y3_w95.
2. Select your name from the list.
3. The next screen talks about teams:
   • If you are working alone, create a team named team-<lastname> using your last name, e.g., team-jones
   • If you are working in a pair:
     1. The first person to sign up should create a team named team-<lastname1>-<lastname2> e.g., team-smith-jones
     2. The second person to sign up should click “Join” on the appropriate team from the list.
4. Click “Accept the assignment” on the next page.
5. The next page will say “You accepted the assignment…” Click on the link to your team’s assignment repository – bookmark this page. If you are the first person to accept the assignment on your team, you will have to refresh the page a few times before the link appears as GitHub takes a second to create the repository.
6. Note: Your project repository will have no code in it initially – this is intentional.

Part 1: Prototyping

Review the required functionality in the Term Project Description on Canvas.

Brainstorm how the screens of your app will look. Focus on user functionality – DO NOT WORRY ABOUT IMPLEMENTATION DETAILS. Sketch how each screen will look, and focus on functionality and not stylistic elements. Here are some questions to help you brainstorm:

• What information should the app provide or display?
• How does the user accomplish their task?
• What feedback does the system provide?
• Your screens have a “Big Action”, view sites, favorite a sit, select a specific site. Think carefully about what happens a) when The Big Action is successful, b) why and when the Big Action could/should fail, c) what happens next after the Big Action.

You are not locked in to your design. The important thing is to think about how your app will be organized, and to have good discussions with your partner (if any) about what the app does, not how it will do it or exactly how it will look. An example of a Login screen is below:

What you must produce

1. A clear, legible prototype of each Screen in your application except the “About” screen. I recommend that you use a tool such as Miro. You may hand-draw the prototypes as well.
2. Each prototype must be accompanied by the following information either in the margins, below the prototype illustration, or annotated in the illustration itself:
   1. Which parts of the interface the user can interact with (i.e., buttons, scrollbars, navbar) and what each interaction does.
   2. Which interactions result in forward-navigation from the current screen to subsequent screens.
3. Your prototypes must show all of the required functionality in Term Project Description.
4. You will upload and display items 1 and 2 to the Wiki page of your GitHub project.
   1. Here is the basic syntax for formatting a GitHub Wiki page
   2. Here is a reference on adding images to a GitHub Wiki page

Part 2: User Flow Diagram

Show the flow of screens the user sees as they navigate through your app. Draw these on a sheet of paper or use a charting tool. You may combine the User Flow Diagrams and Prototypes if using a tool such as Miro.

1. Draw a box for each Screen in your app. Write the name of the Screen in the box.
2. Draw a line between Screens if a user can navigate from one screen to the other in some way.
3. Label each line with the action that navigates between the activities, e.g., “Clicks Save”, “Logout Button”, “Create New Button”

Below is an excerpt of a completed User Flow Diagram:

What you must produce

1. Upload the completed User Flow Diagram to your GitHub Wiki page and ensure it is being displayed on the Wiki.

Part 3: Project Starter Code

Unlike previous assignments, you must create your starter project code.

Part 3.a: Partner 1 instructions

If working on a team, one partner should complete these steps:

1. In VS Code, run the “Flutter: New Project” command from the Command Palette. Name your folder and your project something descriptive.
2. We need to find the Source Control pane to interact with GitHub. It will either be:
   1. At the the Source Control icon on the left.
   2. Under the “Source Control” panel on the Explorer file browser pane.

3. Click the “Initialize Repository” button.

   

4. The Source Control pane will change to show a textbox and a list of files. in the Text box, type a message like “initial commit” and then click the Commit button. DO NOT click the Publish Branch button.

   

5. DO NOT click the Publish Branch button. Click on the Source Control icon on the left.

6. Select “Remotes” and click the Plus sign.

   

7. A textbox will appear at the top of VSCode saying “Please prove a name for the remote”. Put the word ‘origin’:

8. The textbox will change to say “Please provide the repository url for the remote”. Go to your bookmarked GitHub repo for the Term project. Copy the HTTPS url under Quick Setup into the Textbox in VSCode:
9. Finally, click the blue “Publish Branch” button at the top of the Source Pane. Your code should now appear on your GitHub repo website.
10. You are now ready to work on your project.

Part 3.b: (If applicable) Partner 2 instructions

1. Open an new VS Code window through File -> New Window
2. Click the “Clone Git Repository” link
3. Paste in the bookmarked URL of the repository
4. Click the “Open Cloned Project” popup
5. You are now ready to work on your project as in Assignments 2-3.

Part 3.c: Requirements for Initial Content

1. Create two screens for your app:
   • the Home/Welcome screen. It must contain an AppBar and the title of the app in a Text widget.
   • An About screen that displays a Text widget with a statement like “This app was created by Partner 1 and Partner 2.”
2. Create a Button (or other widget) that navigates from the Home screen to the About screen.
3. Commit and Push your content. Ensure that all team members can run the project.

Submission

• Parts 1-2 must be displayed on your team’s GitHub wiki page
• Part 3 must be committed and pushed to the GitHub repo.