Introduction
For the starter ticket, everyone will be adding their name to the credits page! This document will take you step by step through the entire process: creating your ticket, creating your branch, making changes, making commits, pushing changes, and creating a pull request. Once you have made the pull request and we’ve reviewed it and merged it, then you will be assigned a Tech Lead and can start working on tickets from our project board.
| Info |
|---|
Note: The credits page is hidden. There is no button to get to it. To navigate to it locally, you have to go to the link manually by going to |
...
Create
...
the Ticket
| Info |
|---|
Note: If your GitHub account has not been added to the repository yet, message your GitHub username in #software_env-setup to ask for access. |
In the repository, you will see a tab called “issues Issues. ” Click on this tab and then click the green “New Issue” "New Issue" button in the top right of the screen. From there, select the “Task” "Task" option by clicking “Get Started.” "Get Started". This will open the template for a “Task” ticket. Feel free to explore the other templates.
Name the issue: “‘Your <Your First and Last Name’ - Credits”Name> - Credits. For example, Anthony Bernardi - Credits. Your description should be something along the lines of: “Giving "Giving myself credit for the amazing developing work I will be doing at NER!” " Your acceptance criteria should be something along the lines of: “See "See my name in my favorite color on the credits page.” " Your Proposed solution should be something along the lines of: “Add "Add my name and favorite color to the “names” "names" array in the CreditsPage.tsx file”file". And you You can leave the mocks section empty for now. Congratulations! You’ve .
On the righthand side, click on Assignees and find your GitHub username and select it. Then click on labels and choose the credits label. When you’re done, the page should look like this:
...
If it does, click on Submit New Issue. Congratulations! You've just made your first ticket in Finishline!
Create a branch
Once you’ve created your issue, you will now create a branch to complete where you will work on your issue. In your command line, navigate to your local Finishline FinishLine project (view environment setup if you’re unsure how to get there). If you enter the command git branch, it will show you the branches available and, highlighted in green, is the current branch you are on. You should be on develop, if not, run the command git checkout -b develop. Then once again make sure you are on the correct branch, and from the develop branch, you will create a new one run git pull to download all the latest changes from develop.
From here, create a new branch by running the command git branch checkout -b #yourissuenumber-yourname-credits. The issue number is the number that appears right after the title of your issue on its page. For example, your branch name should be something like #546-AnthonyBernardi-credits. It is very important that you add your issue number to the beginning of your branch everytime every time you create a new branch. Congratulations again! You've created your first branch in Finishline FinishLine and can now open it in VSCode or your preferred IDE to start coding!
Code
Open up the folder in VSCode as instructed by the environment setup doc. Follow the contributor guide for specific coding practices. For this ticket, find the folder named “src”, navigate into the frontend source and then to the “pages” folder. You are currently viewing all the folders for all the code of all of the pages that you see on the website, the file you will be editing is under the path src/frontend/src/pages/CreditsPage/CreditsPage.tsx. Click around through the folders and open up that file. Feel free to take a look around at other files and folders to see the code you will be getting familiar with for the rest of the semester! For this particular ticket, find the “credits” folder, and from there I will leave you to find the “names” array, and add
This file is a TypeScript React file, which allows it to use normal TypeScript as well as HTML tags. Read through the file and try to get a general understanding (don’t worry if it doesn’t make any sense). In this file, your goal is to find the "names" array and add a new entry containing your name and favorite color to the end of it!
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
TypeScript is built off of JavaScript, which uses JSON. Here’s a 1 minute video explaining how JSON works. Here’s a quick article explaining the basics. In TypeScript, we are able to add a type annotation to a JSON object to enforce the right type. A declaration of a variable might look like this:
In this example, |
Using the above information, you should be able to add another entry to the names array in the file. Note: the value you add for color is a Hex value. You can just google what the Hex value of whatever color you want to add is.
Once you’re done, save the file. To view your changes, enter go to your terminal and run yarn install and then yarn start to . This will start the website and in a browsers url enter "at localhost:3000. Go to your browser and enter the url localhost:3000/credits". If you get stuck along the way make sure to ask any questions in slack!
...
Committing Your Code
Once you’ve completed your ticket made the necessary changes and are ready to submit what you have for review, go back into your command line , make sure you are still on the right branch by running git branch, and run the command git add . which will save all the changes you've made, then . Then run git commit -m '#YourIssueNumber ‘#YourIssueNumber Added my name to credits'. For example, #546: added my name to the credits page. Again, the # is important so that GitHub recognizes that you’re working on your issue.
Once you've committed your work, you must push it to the remote site by entering git push. You may need to run git push --set-upstream origin [branch name] as instructed by the git CLI if the branch does not already exist in the GitHub repo and only exists on your local computer.
Creating a Pull Request
Its time to create a Pull Request (PR) so that your code can be reviewed. Go to the repository and select the “Pull Requests” tab. From there, select “New pull request” and make sure that “base” is “develop” and “compare” is the branch you’ve created. Once you’ve selected your branch to compare, select “Create Pull Request.”
For your title you can leave it as the branch name if you’ve properly named it. For the changes, say what you’ve changed! If you struggled at all, let us know in the notes section! We won’t be using the test cases section for this ticket so you can delete it, but if you had written any complex code that needed testing, make sure to show the results here, but for now you can delete this entire section. For screenshots, make sure to take one of the screen when its fill the entire screen, and another one where you make it as small as possible.
| Info |
|---|
On mac, the command to take a screen shot is |
You’ve completed the ticket so theres nothing left todo! You can remove this the Todo section as well since there’s nothing left todo. Then finally go over the check list and make sure you’ve completed everything.
On the right side of the screen you will see an option to request a reviewer, you can select any of the tech leads or anthony, then make or Peyton or Reid. Make sure to assign yourself under the assignee section (just like on the issue page).
Finally at the bottom of your PR you will see “closes #”, enter your issue number next to the #. For example, closes #546. Finally, select "Create Pull Request" and now you've finished! You will know you’ve you've succeeded if on the right side panel under “development”"development", theres a link to your ticket . Finally, select “Create Pull Request” and now you’ve finished! (if there isn’t, you can do it manually).
Wait for somebody to review your code, and if they have any comments make sure to make the changes in your code, and make a new commit with those changes, following the same rules as mentioned before (you do not need to create a new pull request).
Handling Merge Conflicts
...
Resources
For our guidelines on how to contribute to the repo, see the Software Contributor Guide.
For some resources on Git, see the Software Learning Resources page.