And now, our main event! For my third installment in the Release 0.2 collection, I chose to offer my services to the ContestReminder repository, which is notification service created to remind the user of coding contests that the user has signed up for!
Now I was getting somewhere! Now that I had all of the information I needed (the profile picture, username, and number of contributions to this repo), I just needed to think of a way to display it nicely. I decided that a top-to-bottom list such as this one would fill up the screen too quickly, and would lead to a lot of unnecessary whitespace. Alongside this thought, I also felt that having the information visible beside or even below the pictures would become too cluttered. That is why I decided on these final changes:
Here, I added the formatting that is also found on the `Home` page, featuring the black box around the border, as well as the GIF that is shown there. To make this page easier on the eyes, I had the pictures be displayed without the accompanying text, but made them into links to each respective contributors GitHub profiles. I also implemented an extra feature, where if you hover your mouse over each picture, it will display a phase that reads: "{username} contributed {number of contributions} times!" (there is logic set up to change the phrase to singular in case the person has only contributed once). Finally, I placed a button below the pictures to allow the user to return to the `Home` page, completing the flow of the webpage.
The issue in question asked for an additional view for it's app, that will be built into a future 'About' page, with it's first addition being a place that will display all of the contributors to the project. To obtain this ever growing list, the maintainer kindly asked for it to be pulled from the GitHub API.
Before beginning to add my code to solve this issue, I had to acquaint myself with the style of HTML Template that was being used. To do this, I examined the style being used for the home.html template. While inside that template, I replicated the button style featured from the `Log In` and `Sign Up` buttons to create another for the new `About` view I'd be creating, and included it within the `if` structure to ensure it would be there regardless on if the user was signed in or not.
Knowing that the button alone wasn't enough to access the view I was about to create, I proceeded to search for where the remaining button paths were laid out. I eventually found them within the urls.py file. Under the collection of `urlpatterns`, I added my own path for the `About` view, keeping it basic for now just to allow access to it.
From there, I mimicked the `Home` page layout to build my base template for about.html. Setting up a starting point for extracting the list of contributors from the API, I created a heading for the page.
Realizing that I was not quite prepped for extracting that information yet, I scoured the source files to find where I should place my function to collect the contributor information. I eventually settled on the views.py file that already housed a class that handled the `SignUpView'. Here, I defined a function called `contribute` which I set up to send a GET request to the GitHub API and save the response (in JSON format) to a list named `contributors`. I then returned this new list as a payload for whenever the `About` page gets rendered.
However, when I went to see the handiwork that I had just finished, even though my `About` page had placeholders set to receive information from this list, it wasn't displaying any of it! I needed to do more digging.
In the end, I returned back to the urls.py file, and discovered that alongside the path to the `About` page, I needed to include the name of the function I had defined. Adding this crucial information led me to a result looking like this:
Here, I added the formatting that is also found on the `Home` page, featuring the black box around the border, as well as the GIF that is shown there. To make this page easier on the eyes, I had the pictures be displayed without the accompanying text, but made them into links to each respective contributors GitHub profiles. I also implemented an extra feature, where if you hover your mouse over each picture, it will display a phase that reads: "{username} contributed {number of contributions} times!" (there is logic set up to change the phrase to singular in case the person has only contributed once). Finally, I placed a button below the pictures to allow the user to return to the `Home` page, completing the flow of the webpage.
In the end, once I got over the format of the templating engine used in creating the HTML views, my only real hurdle was connecting my function to the URL, as well as getting the formatting just right. This was a really fun issue to do, and will be rewarding for whoever contributes to this project in the future!
Below are the Gist files that feature the files I needed to alter for this project:
Loading https://gist.github.com/matt-ross16/5a3c126....
Comments
Post a Comment