This is a team programming assignment. Each team has it’s own repo to complete this assignment, and you will work as a team.
In this assignment, you’ll be given the starter code for this web app, which you should go explore a bit right now:
You’ll see that there is a link called Restaurants which leads to a set of web pages where you can do CRUD operations (Create, Read, Update, Destroy) on Restaurants.
You’ll be working to add similar operations for three additional things, as explained in the participation activity https://ucsb-cs156.github.io/s23/hwk/p06/
Here are links to the repos:
- Grading for this assignment is manual; someone on your team will submit the url to the Canvas link for team01 when the team thinks the site is ready for grading.
Read through https://ucsb-cs156.github.io/s23/hwk/p06/ if you haven’t already.
The rest of this explains how to proceed.
Next, choose one person that will carry out the following task while sharing their screen; the rest of you should follow along. If you are on zoom, go into a breakout room for your team, and follow along there.
- Clone your teams team01-teamName repo.
Add a remote for the starter code:
git remote add starter
- Pull in the starter code and push it to the main branch
git pull starter main git push origin main
Now make a one line change in the file:
On this line:
team01-s23-5pm-1or whatever your team’s name is
Commit this change to the main branch, and push.
One more one line change in
to this (substituting in your team name, not the one shown):
You should see that commiting and pushing these changes kicks off a GitHub Action (look at the Actions tab in your repo) that publishes the site to the gh-pages branch.
Once that finishes, you’ll need to enable GitHub Pages, which is the next step
Enable GitHub Pages for your repo by going to the Settings tab, finding Pages, and making it look like this:
Then, on your team01 Github repo page, find the place at right that looks like this:
Click the little gear.
You should then see a page like this. Click the box that says “Use your GitHub Page Website” and then click Save Changes
Then you should see something like this:
If you click the link, it should take you to the deployed web app, similar to the one here:
Now, each member of the team should clone the team’s repo to your own machine (this won’t work on CSIL).
git clone repo-url, then cd into the repo and open it up in your editor (we suggest VSCode).
Now, if you haven’t yet installed node on your machine, follow the instructions here to do so:
cd frontend to move into the subdirectory with the React application.
This should install all of the dependencies of your application.
This should bring up the application at the url http://localhost:3000 so that you can test it locally before deploying.
If this doesn’t work, ask your teammates for help; if it still doesn’t work, ask the staff.
Now, you are ready to start coding to work on your issues.
First come up with a branch name, and a branch naming convention.
- If your name is Chris, and you are adding hotelFixtures, you might call your branch
- Or: if you are working on issue7, you might call it
- Discuss the branch naming convention with your team on your team’s slack channel before starting.
To create your branch, cd into your cloned repo, and use this command:
git checkout main git pull origin main git checkout -b Chris-hotelFixtures
This creates a new branch
Chris-hotelFixtures that is branched off a fresh copy of the main branch.
You’ll do all of your work in this branch, and when you are done, you’ll do a Pull Request to get your code into the
- Note that using this workflow is a required part of the assignment.
- We are practicing a workflow (the GitHub feature-branch/pull-request workflow) that will become super important later in the course, and even more important when you work on real world projects.
I will add more details here about the specific issues
But for the most part, you’ll just follow the example code for
Be sure that for each file you add, you also look under
tests, not just
- Step 6a: Adding the fixture
- Step 6b: Adding the CRUD utilities
- Step 6c: Adding the form
- Step 6d: Adding the table
- Step 6e: Adding the Create and Edit Pages
- Step 6f: Adding the Index and Details Pages
As you work on your page, make commits whenever something is working.
- Use your initials at the start of your commit message (e.g.
cgfor “Chris Gaucho”)
- Separate your initials from your message with a hyphen
- Your message should describe what you did
git commit -m "cg - added hotelFixtures
git commit -m "cg - added HotelCreate page"
Having meaningful commit messages is a component of your grade for this assignment, so please do put some thought into what you write.
As you make commits, push them to your branch, for example:
git push origin Chris-hotelFixtures
A few handy commands:
git statusshows what branch you are on, among other things
git branch -ashows all current branches
git fetchupdates information about branches by pulling new branch names from GitHub
As you do your pull request, drag the issue on the Kanban board into the “In Review” column.
The next step is to go to the webpage for your repo on GitHub, and find the “Pull Requests” tab. It should look like this:
Click the “New Pull Request” button. You should then see something like this:
Change it so that the base is
main and the branch you are comparing to is your branch, like this, and then click the “Create Pull Request” button.
You’ll then see something like this.
Your next step should be to change the title (which will be populated with some suggested text from one of your recent commit messages). Change it to: “Add Los Angeles” (or whatever your town was).
Then, in the big area, using complete sentences, type something like this what you see in the image below:
Then click “Create Pull Request”.
- get a new issue from TODO
- assign it to yourself (and if applicable to your pair partner), and
- drag it into In Progress
- and start working in a new branch
You may need to create a branch from your previous branch (instead of from
main) if you are building on code in an earlier PR.
At this step, you should coordinate with one another again.
The aim here is for each of you to merge someone else’s pull request (not your own).
Note that because each of you were making changes in
App.js and in
AppNavbar.js, there is a potential for merge conflicts. Fortunately, these will be easy to resolve! But the process for resolving them can be a little tricky, so we’ll go over it in lecture.
As each pull request is merged into the main branch, you should see the page populate on the running app on Github Pages.
When all six are merged into the main branch and appearing in the app, your team is done with this assignment.
- Grading for this assignment is manual; someone on your team will submit the url to the Canvas link for team00 when the team thinks the site is ready for grading.