Abstract

Goldstream Engineering constructs different types of structures all over interior Alaska. Based in Fairbanks; they must keep a record of all of the site visits that they do to make sure everything is going according to plan. My app, built using React, takes all the information they need and creates a downloadable file for them to save to their records. It was a big learning experience working with a client instead of a professor on this project.

Introduction

Coming out of the web development class and with my experience from the mobile app development class, I decided to build an app for my senior project. I wanted to make something that would be utilized after I created it. Additionally, this developed because multiple people found out that I am a computer science major, and they mentioned various app ideas to me. I decided that this was the best way that I could build something for a legitimate client instead of just a project for a class.

Goldstream is a civil, environmental, and structural engineering firm. They work on projects that range from simple septic tank design to renovating remote structures to building bridges and roads. They develop the plans and details for construction, then supervise the construction crew as they build it. While these projects are taking place, they perform site visits. A site visit is a task performed by one of the engineers periodically throughout a project to go and verify that the construction is going as designed and on schedule. I got in touch with this project idea from my spouse who has been working for them for three years now. I have met the team, and they have been familiar with me since my spouse began working there. It was mentioned to me prior to my sophomore year, when they found out that I was majoring in computer science. I decided to pursue this project, since I had already established a connection with the client.

The problem that they wanted to address was managing documentation for site visits across multiple projects they were involved in. The current application they utilize costs $60 a month, but they only require a small portion of what the app offers. They want something more personalized and more cost effective than the app that they are currently using.

The app they are currently using is called Fieldwire. (https://www.fieldwire.com/) This app is a construction software for field teams. It offers a variety of different real-time communication between construction workers. Goldstream only uses a small part of what this software has to offer, due to the app being designed for large scale projects where communication can be difficult to coordinate. Goldstream only uses it to record site conditions for their firm, which is only made up of 6 people. There is another application I found that changes HTML text into a pdf. (https://aboutreact.com/make-pdf-in-react-native-from-html-text/) This application is a basic example of how to generate a downloadable pdf from text that is inputted.

Problem Definition

There are three main objectives that this project required for it to be a formidable replacement for what they are currently using. The first thing is the fact that it has to be operational offline for the sites that the engineers are visiting that are outside of phone service. This is a common occurrence for most of their projects because they take place in rural Alaska where service can be spotty or nonexistent. The second objective is that they need to be able to record all the information about current site conditions. The form must have all the details that they need to accurately convey the existing on-site conditions and how the construction is progressing. This way they can have an accurate account of how the project is progressing and verify it is being constructed according to design. The third objective is that the information must then be saved in a file that can be downloaded and stored in their records. The biggest constraint is that it must work offline; it can not lose any information in the transition between not having phone service and coming back online or vice versa.

The alternative for Goldstream, if this solution is not compatible with their system, is to continue to use Fieldwire. While they are only using a small part of the larger application, the Fieldwire app has the support and staff to keep it running. It might not be as specialized or personal, but it can do the job that they need. They can continue to use the app and get support. Fieldwire would be the best alternative to this project for Goldstream.

Design development

i. Navigation Bar

1. Needs to include the Goldstream logo or mammoth sign and portray a unique and personalized Goldstream design

ii. Offline

1. The app needs to be able to work completely offline. All data inputted must be saved, so no information is lost in the transition between service and no service.

iii. Inputs

1. All information concerning the site conditions needs to have the opportunity to receive input, so that the engineers can record all important data.

iv. Downloadable File

1. The data then has to be converted to a format that can be downloaded, shared, or saved for future reference.

Development, Testing, and Deployment Process

a. Work Completed

i. I first started with the navigation bar and added the ability to navigate through the application. For larger browsers, the navigation bar is in a horizontal ul list of the different page links that I mapped on a different file so that there was no need to list out every li item in each of the menus. I only had to make one li item and then map the page name and the page url to the Link item that manages the changing of the page in the browser using react-router. For smaller screens, I create a dropdown menu for a more organized experience on phones or tablets.

ii. The primary objective was enabling the app to work offline. Without it, the app would not be able to be used in the rural areas of Alaska where Goldstream does most of their work. I accomplished this by using a service worker. A service worker is a background programmable proxy that allows the controlling of what happens on a request-by-request basis. This works by fetching data from the network and then caches it in a separate cache that is independent from the browser cache or network status. This way the app can still be navigated despite lack of network availability.

iii. The next step involved adding the form items for the data input. I met with Goldstream many times to ensure that I had all of the information that they required to accurately record the site conditions. I used the class form-group to accomplish this.

iv. The next step in the process was to make sure that the data inputted would be saved and not disappear. I used local storage to accomplish this task. Each input area has a onChange method that is then equal to a function called handleChange that takes the inputted information and does a this.setState. The function, this.setState, is a function that takes the name of the input area and sets it equal to the data that was inputted. To save it so that it does not disappear, the form submit button or save button must be pressed in order to stringify the input and save it to local storage in the handleFormSubmit function. Everything that is saved is saved in an item called document that when the React lifecycle function, componentDidMount is run, the page is refreshed, it parses the document. If there is a value saved, it keeps it there. If there is nothing inputted, then it leaves it empty. This effectively saves the data that will be inputted and make it available offline or when the application is closed.

v. This next phase was the most challenging: compiling the saved data into a file that could be downloaded and used for future use. React libraries were extracted from the application above. React-html-to-pdf and react-pdf were the two libraries needed to generate a pdf from html items. I set everything up and tried to run a test pdf, however, the browser ran into an error with the react-pdf library. It kept saying “Support for the experimental syntax 'classProperties' isn't currently enabled” and to “Add \@babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.”. This appeared to be a common problem encountered because there are many resources and forums discussing solutions. However, I attempted every fix that I found to try and resolve the issue. I changed the package.json file to include the babel plugin which failed to get rid of the error. I also tried adding a babel.config.js file and had multiple variations of what other people had used, but they all failed as well. I was unable to find one that worked for my situation, and after spending way too long on it, I eventually decided to try a different approach. Instead of using html and generating a pdf from it, I found a different way to present and download the data into a text file. When the finish form button is pressed it runs the downloadTxtFile function. This function creates a Blob object which contains raw immutable data that is not in javascript form but can be appended to a .txt file. While the text file is limited to only text and can’t be as customized as a pdf, it still contains all of the necessary information that they need for documentation in a format that can be shared or stored easily. This was the most difficult part of the project, and it was more time consuming than I had originally accounted for. However, I was able to create a presentable note taking application.

b. Lessons Learned

i. A large learning point involved working with a client. Weekly meetings and discussions on how the project was progressing enabled me to receive consistent feedback on things that they liked or wanted to be different. This would not have been as prominent working on a set project for a class. It was interesting seeing how they would fixate on small details and would suggest things that as a programmer, I would not have done that way. It was interesting working with a client that did not have the technical skills of a professor. I was coding with a different audience in mind.

ii. Local storage was an interesting challenge, learning how to store the data to the phone instead of storing it in the cloud. It was a major part of the project that functioned properly to its full extent unlike the pdf.

iii. The service worker was an interesting aspect of applications that I was not familiar with. When I was doing research to understand how to make an application able to run without connection to the internet, the service worker that is built into React was able to accomplish this. It was interesting to learn about and implement.

iv. While I spent a long time trying to figure out the babel issue with react-pdf I was able to learn about the package.json configuration file and what the file does for the React app. I also learned about the Blob objects and how they are used to store data in a raw form for uses like: putting it into a .txt file or breaking down data for other uses.

c. Related classes

i. I have found myself using bits and pieces of concepts that I have been learning, since I started my work here at Walla Walla University. I took my experience with React from my assignments and projects in web and mobile app development. That was the driving force in my decision to build my app using React. I used the skills of how to design the process of my development from what I learned in software engineering and software development. The skills I learned in those classes helped me better communicate with the client and set appropriate goals for each week of work throughout the project. I felt like my overall knowledge from the fundamental classes and all the classes, where I had to learn new languages, really helped with my problem solving for this project. Having the basics of how coding works and how to write functional code in different languages, helped me understand and organize my project. This project reinforced a variety of concepts through the practice of application.

Evaluation of Project

a. Assessment of Design Criteria

i. My project effectively completes the basic design criteria for it to be useful to Goldstream. It might not be capable of completely replacing their existing system, but it could be a useful way to take notes of the site conditions at the site, and then have them available to then write out a more detailed description when they get back to the office. It works offline, so they can use it without connection to a network. It has all of the necessary inputs, and it saves them to local storage. The application can take those inputs and save them in a file that can be shared or stored for future use. With all three of these objectives working, my project meets the basic design criteria set forth by my client, Goldstream Engineering.

b. Assessment of Constraints

i. With the capability for data to be saved locally and offline, it meets the practical and safety constraints for use in the field. They may not need to pay the $60 dollars a month for Fieldwire if they like this application better. It is cheaper than their current system but could have a small cost for maintenance.

c. What are the social impacts of your project?

i. The social impact of my project will be a useful tool that the Goldstream team can use to record the notes of their site visit. It will change the dynamic of the site visit for Goldstream. It will allow them to work on their client-engineer relationships.

Conclusion

a. Evaluation of Product as a Solution

i. The opportunity to work with Goldstream has been a great learning experience. Doing this project has given me more ideas for other applications to work on, and a glimpse of how it will actually be working in the software development industry. The three main objectives that the app needed to meet are: it needs to work offline, it needs to be able to record all site conditions, and it needs to be able to put that data into a format that can be shared or saved for future reference. I feel like I was able to effectively accomplish these three objectives with the application that I have built.

b. For a feasibility study, provide recommendations to clients.

i. While I would love to have Goldstream completely use my app and not have to depend on another service, it is more feasible to use it as a note taking app for writing site visits. They can record everything when they are out at the site, and they can add more detail then save the file for their records once they are back in the office.

c. Restating Problem Statement

i. The original goal of the project was to create an app that can record the conditions of the multiple projects that Goldstream oversees. I believe that my app supports this endeavour and can be useful when trying to record the data at the site.

d. Future work

i. Areas for Improvement

1. My project is not perfect. It does not support adding any pictures to the file unlike the Fieldwire app that they are currently using. It saves the file in a .txt instead of a pdf. It also could be cleaned up layout wise to make the app feel better to navigate.

ii. Ways to Improve

1. I would add more in terms of input checking to make sure that no errors might arise when Goldstream is typing the report. I would attempt to have it auto input the location date and initial time when the network is available. I would have liked to have the finish form add it to a files page, so that any file created by the app would show up listed on that page, eliminating potential confusion as to if the file was created or not. I would also like to do more css work to make the application look more organized and clean.