Jeff's Capstone Project

I wanted to make adding an entry feel a little bit more responsive. An easy way to accomplish this was to add an alert message when you successfully add to the table.  I did this by passing an alert when rendering the template. Alert=0 means an entry was successfully added, and alert=1 would tell them to try again.

This leads me to how I handle duplicate entries. I get the documents in the firebase collection and check each item before adding.

Now, the updating of entries. My thought process was it would be a modal that shows the details of each entry already populated in the fields. The application model has a couple more entries to add so I would need to update the way we implemented that. 

So, I created a detail modal and form template. This way I do not clutter one HTML file. I basically took a lot from the previous form that was used to create an entry and added the ‘value’ parameter.

I changed my model classes so that now it is cleaner and will only take the form data to return the object:

When adding an entry to the database, I made it so that the userID is associated with it. This way my function for getting all the entry documents will check if the userID matches the entry before adding it to the list. Now each user will only see what they added.

The update functions were pretty straightforward for the skills page. For the jobs page, I had to add extra logic that will also update the skills associated with that job. If you change the name of a company on the jobs page, the table on the skills page should also be changed. This was done by looping through the skills and verifying the IDs.

Running through the functionality I found I was missing something. When I delete a job, the skills associated with that job should also be deleted. I fixed this by also looping through the skills when I am deleting a job and if the IDs match, it also will be deleted.

Overall, this week was a busy one. I got stuck many times. I feel my implementation is not the best and can be improved. Yes, the functionality is working but there may be bugs I am unaware of. This is why having a team is great because there will be more eyes on this, which means they can find what I am missing. This website is starting to take shape!

For those wondering, I was successful in pushing my branch up to GitHub. There were 4 linting issues so it was not that bad. Simple things like adding a new line and removing unused imports.

There was a small change I needed to do when my teammate reviewed my code. I had to change the name of a file from ‘key.json’ to ‘credentials.json’. This would have been a 10-second fix but unfortunately, I had an issue with my computer and I lost my local copy of the repo. I needed to figure out how to get access to a remote branch. I followed these steps https://devconnected.com/how-to-switch-branch-on-git/ and I was able to select the branch I had been working on and submit the updated push request.

I realized while I was starting to implement the database functions for the skills page, I was typing (just change the applications to skills or to contacts):

db = firestore.client()
applications = db.connection('applications')

This would be repeated many times so I decided to extract it into a function. I called it dbConn(). It takes the collection name and makes the connection to the database and retrieves the desired collection.

My first goal was to get the delete functionality working for the jobs page so I can implement it for the skills page next. My thought process was that I needed to target the job I want to delete. To make sure I get the functionality right, I selected one document from firebase and with its ID I was able to call a function that deletes it. I hard-coded an example like this to make sure it works properly:

def deleteJob():
    dbConn('applications').document('3reZRCDZG98lW').delete()
    return 'deleted'

Now to make it work with the template and views. For the template in jobs.html, I added an indexing system that gives each entry in the table their jobID. This will make it so if they push the delete button, it will send that jobID to a new view. This view is

'/jobs/<jobID>/delete'

Now that I passed the jobID, I can call my deleteJob function and then redirect to the jobs page again but this time the entry will not show up on the table because it was successfully deleted.

After that, I started working on implementing the skills page. There were a lot of similar techniques that I used from the jobs/internship page.

Found a cool trick! You can add more data in the render_template:

return render_template('skills/skills.html', skills=skills, jobs=jobs)

This is how I was able to show all the jobs in the template.

The hardest part was figuring out how to make a drop-down of the positions and then adding that to the list of the application

{% for n in jobs%}
   <option>{{n.position}}-{{n.company}}</option>
{%endfor%}

I made a delete modal because I wanted to reuse it for the other pages.

This post from StackOverflow really helped me with the ‘with’ feature of jinja2.

https://stackoverflow.com/questions/9404990/how-to-pass-selected-named-arguments-to-jinja2s-include-context

{% with val='skills/'+ skills[n].id + '/delete' %}
    {% include 'deleteModal.html'%}
{% endwith %}

What’s happening here is I am including the delete modal but with the ‘val’ variable. The variable is string ‘skills/<skillID>/delete’

And in the deleteModal.html file, I have a link that goes to that route when clicked:

<a href={{val}}><button type="button" class="btn btn-danger">Delete</button></a>

I did the same for the jobs page.

Found out also, that if you add a job or skill and there is no such collection, the way my code is set up is that it will create it for you with the auto-ID setting. I like this but I am not sure if this will impose potential threats.

Started working on the jobs/internship page this week.  I had designed the mockup, so I know what it needs to look like.

Functionality that I want:

• The button will open up a form modal
• If there are no entries, there will be text saying there are no jobs and another form modal button
• The items in the form add to the table

The database was not set up yet, so I had to use fake data. I created an Application object that has the attributes we want (company, position, type, date, status).  I made a few fake applications so I can simulate data in the database. This way I did not have to hard code entries into my HTML template. 

Remember, we want to keep our code DRY (‘Don’t repeat yourself’)

After coding for a while my template file was getting really long and cluttered. I used my form modal and button twice (1 for the top of the table and 1 if there are no jobs yet). There has to be a way to make my code cleaner, preferably modular. Having the ability to separate parts of the code that I can use elsewhere would be ideal. It took a long time and a lot of research, but I found it! Thanks to this post on StackOverflow, https://stackoverflow.com/questions/1976651/multiple-level-template-inheritance-in-jinja2

I was able to separate big chunks of code and ‘include’ them to the template I want.

After getting the layout to behave the way I expected, I started looking toward implementing the database entries. My teammate provided the documentation for firebase and then I looked into it. I added some entries to the online database and my goal was to connect and read the values. On firebase, they are called documents in a collection. So, I will refer to the entries as documents

Following this tutorial, https://cloud.google.com/community/tutorials/building-flask-api-with-cloud-firestore-and-deploying-to-cloud-run.

I was able to connect successfully and assume I was able to access the data. Here was my output.

I was stuck on figuring out how to display each of the object values for the longest time. The tutorial kept using jsonify(). I decided to try removing it and it outputted what I wanted!

Here, you can see the two entries I created:

Side tip!

I recently discovered the python function, dir(). This is very helpful because it shows what functions an object has. Here is an example output of using it

Doing this allows me to do many things with the collection object.

What helped me solve a lot of my issues this week was to walk away when I got stuck. I walked my dogs, ate a snack, and even just called it quits for the day. Stepping away I feel like my brain can reset and different ideas come to my head.

This week has been quite a refresher. I went through old material from a previous class, CS 340 Introduction to Databases, and the Flask documentation tutorial.  A few months back I did create my own Flask web app, so I also took a look at that as well. It was actually really fun looking back at my previous work. It was my first time ever using Flask so I can see it was a bit cluttered and not very organized.

The main goal I had this week was to complete the structure and layout of our project. I wanted to get it uploaded to GitHub early on. Having a good skeleton code will make sure everyone has the same starting point and does not have to worry too much about organization and merge conflicts.

I followed the layout structure provided in the Flask tutorial here.

My layout looks similar but I modified it slightly

Creating this tree-like structure was done using the command:

$Tree /F > output.txt

As a team, we wanted to implement features to make our codebase more robust, but let me tell you, GitHub actions and workflows were really annoying me this week! More specifically the linter. Because I created so many files, there were linting issues on a few of them. It was silly things like having an extra line or having spaces on a line.  The feeling of finally getting that green circle made all the struggles worth it though!

The other thing was to make sure all of the tests in our test folder ran. This was also so satisfying to figure out. Python unittest has a way to do this with it’s discover functionality. Here is the command:

$python -m unittest discover tests "*tests.py"

What this does is it will ‘discover’ a folder called tests and run files that have tests.py in the name.

Overall, this was a busy week for me but with it, I feel I was able to improve and feel my efforts will set up our group for success!

I was assigned a team and project this week! My team consists of 3 other students and our project is the Job Tracker web app. My team seems really nice and smart. They all are very responsive and I believe we are going to create something great.

The goal of this project is for students to track their internship/job hunting efforts. The target users would be CS students who are attempting to land internships and full-time positions upon graduation.

Our initial goal was to decide which communication platform we were going to use. We decided on discord.

The two assignments that we had to complete this week were Team Standards and to Create Project Plan. The standards were pretty straightforward but important when working with a team. It can help mitigate conflict and make sure everyone is on the same page.

For the project plan, I took the initiative and volunteered to create a flow and mock design for our website. I created it using PowerPoint. It was a very time-consuming and tedious process. One of my team members introduced me to Figma but because I had already started using PowerPoint, I did not want to spend too much time learning how to use it (It seems super cool though, so I will take a look at it when I have more time!). I really wanted to get something out to the team as fast as possible so that we can discuss it and get the ball rolling. The faster we have a plan, the faster we get to code (my favorite part of the process).

I had a lot of fun creating the mock-up. I found myself getting lost and spending way too much time trying to get the boxes to line up and changing my mind several times. My wife had to remind me at times to stay focused and stick to what I had originally envisioned. She was right of course. I made notes that can be our stretch goals if we have more time and want to implement more functionality.

Hi, my name is Jeffrey Acuario.

This is my first time ever writing a blog. I thought about starting a blog once. I used to be very into powerlifting and thought about documenting my weight progress and training. Ultimately, I talked myself out of it because it was a busy time in my life. I was working at a startup biotech company and was putting in 12 hours a day.

A little about myself, I have 3 dogs, Tink (chihuahua mix), Kermit (dachshund mix), and Millie (border collie mix).

My wife and I enjoy traveling, hiking, and cooking. I worked previously as a Chemist and now am pursuing a bachelor’s degree in Computer Science at Oregon State University. I started this program back in March 2020. This class, CS467 Online Capstone Project is my last course in the program.

This week we are assigned to pick a project for the course. There were a lot of different choices catering to many different experience levels. The 5 that interested me the most were:

• Dating app for animal adoption
• Job Tracker
• Algorithmic Stock Market Trading Strategies
• Cross-Platform Discussion App
• Harnessing a public database of marine species observations to track disease outbreaks in real-time
• Wine Data Lake

These are all web-based projects in which I have some experience. These have more functionality and features to implement which will be great to learn and practice. This project requires working in a team. For me, team projects have been hit or miss. I am hopeful that I get a great team that does not procrastinate and can teach me some new techniques. But there will always be the possibility that I get a bad one which puts more weight on myself.

Even though I will be only taking one class this term, it being my last one gives me a lot of anxiety. What comes next for me is the job hunt and I feel unprepared.

I plan to pair this class with studying for technical interviews with LeetCode. My main focus will be the popular, Blind 75 LeetCode Questions.

My goal is to have a great last term and feel prepared for the next chapter.

“Drop by drop is the water pot filled”

-Buddha

Hope you enjoy my posts and thank you for reading!