Look at that photo above. Simple and very unremarkable? Yet, I am incredibly proud of it! It is one of my greatest achievements in my Software Engineering career so far.

This past Saturday I signed up for my first Hackathon! The hackathon was called Hack for Your Mother and it was geared towards creating tech solutions to make a difference for nonprofits, government agencies, and social impact startups. The entire hackathon was online and it was very organized with meeting spaces and different rooms to work in and network. The day started with pitches of projects that we could join to help out with for the day. Afterward, we joined a project and were given tasks to complete and then we presented our work at the end. Busy busy! It was a long day and yet the hours flew by!

The project I worked on dealt with COVID related PPE allocation to different medical facilities depending on the demand and supplies available that week. Currently, this process is being done on an excel sheet by hand. We worked to make this task much easier by having a simple application where the user could upload both files (one for supplies and one for demand) and then be given the result right away.

I worked on the front-end of this application.

GUI

Initially, when deciding how we wanted to design this application, we decided against a web application. This was because we did not want to add any operations costs to this project. Additionally, since currently, only a select number of people would need to use this program, having the program exist on the user’s system was all that was necessary.

Next, we considered a CLI app, which I am already familiar with. It made the most sense, however, CLI apps are not very user friendly. After some discussions with the UX team on the project, we decided the best option was a GUI.

I did not have any experience with building a GUI from my software engineering Bootcamp. So it was time to learn! What is a GUI? GUI or Graphical User Interface, allows the user to use graphics to interact with the operating system as opposed to just the terminal. These graphics can include windows, scrollbars, buttons, pictures, and icons to help the user understand how to interact and what to do with the program. This creates a much more friendly user experience and is especially beneficial if the user is not familiar with CLI or Command Line Interface.

Though using a GUI has many benefits, it should be noted that they will consume more energy and run slower than the CLI counterpart. However, since our application was fairly simple this was not a design concern.

When creating the GUI I had to make sure it was going to be compatible with the inputs and outputs that were expected from the other teams. Integrating the other portions of code was a very useful exercise in learning how large projects come together. After some stitching together and verifying the pieces worked together we were done! In the end, our GUI looked like the photo above. We had two buttons that prompted the user to upload the two CSV files with the supplies and demand information. The chosen files then showed up on the interface so the user can verify they picked the right files. Then a button to process the data which will let them know where the new allocation data is saved as well as automatically open the file in excel. The things I had to consider were:

What did the input data look like?

From the project manager, I learned that the input was to be two CSV files that the user already has saved on their system. Therefore, when creating the GUI I created two options to upload documents from the user’s local system and made sure to only allow CSV files!

What data did the data processing script expect?

I worked together with the script team to make sure we would be able to integrate the script properly. We ended up converting the script to take in two arguments (the two input files) when it is run. This allowed me to run the script from my GUI using the two files the user selected.

What output does the user expect?

The script, when run, output a new CSV file with the data the user wants to see and saved it in the same directory. While this technically means the user has access to the results, it was not very user friendly to have to go find the file and open it. The last thing I implemented into my GUI was to automatically open the resultant CSV file (using the default program set on the user’s system). This means they saw the data right away!

Java

Now to drive into the Java code! I had never coded in Java before, but we chose to create the GUI in java for accessibility. Java is platform-independent since we were not using any special native libraries and this meant our application would run on any operating system. Since we did not know the operating system of the user, this was important.

Initially, we looked into using NetBeans, a Java IDE that would have done a lot of the work for us and would have been a lot easier than making the GUI from scratch. However, after failing to get it set up correctly on my system, we decided in the interest of time to just move on and try to build it ourselves.

Java has three sets of classes for creating GUI applications, The Abstract Window Toolkit (AWT), Java Swing, and JavaFX. Our GUI was written using Swing. This allowed me to use components such as JButton, JFil, JFrame and so on. The way Swing components work is that each of the elements is written as a pure Java object. This means a specific Mac or Windows element isn't created. The benefit of this comes when you do not know which system your application will be run on since the elements will look the same on every operating system. JavaFX is the user class system for building GUIs in Java and going forward might be a better choice when adding in more elements.

After getting the right elements on the GUI, I added event listeners and event handlers to be able to interact with the user and their inputs. This included things like saving the paths to files the user selects, running ruby scripts with those files, opening CSV files, and outputting the stages of the process to the screen so the user can follow along.

How did I manage to do all this without knowing the language?? A combination of playing around with some existing code I found online, looking up a lot of things on google, and asking for help when I needed it. Even though the syntax of Java still is a mystery, since I have an understanding of buttons and events and event listeners already I was able to quickly fill in the gaps to understand what my code was doing. It turns out you can understand the code without understanding the language!

Conclusion

In the end, we got a chance to present our day's work and it was a very proud moment watching everything fall into place! My favorite part of the hackathon was seeing all the presentations at the end. Each group presented the progress they made and it's also amazing to see how much we were able to accomplish in such a short period of time! The presentations also showcased how our work today fits into the larger project goals. It was very fulfilling to be able to work on and make a meaningful contribution to these large ongoing larger projects. Even more so knowing that the end products are meant to help make the world a better place.

I absolutely loved my entire hackathon experience! I am already impatient to attend another and I highly recommend all new software engineers to attend a Hackathon for yourselves! I ended the day with a strong sense of pride in what I was able to accomplish as well as the rewarding feeling of knowing I volunteered my time and skills for good.

References:

https://www.geeksforgeeks.org/difference-between-cli-and-gui/

https://www.dummies.com/programming/java/things-java-guis/

I love seafood, exploring new cities, board games and learning to love to code. https://github.com/sarakhandaker/portfolio