The
Tide Planning Tool is a web application designed to help you find tides that meet your coastal recreation needs.
I built this application to improve my software development skills, while creating a practical tool to help plan trips.
This article is a general overview of how the web application works.
Web applications consist of two parts: the frontend code and the backend code. The frontend is the user interface
that you interact with. The backend works behind the scenes to process your inputs and manage the application's
functionality.
The Tide Planning Tool frontend is the webpage on buggulch.com. It is written in two files,
tide_tool.html
and
tools.css.
The HTML code, tide_tool.html, is used to present the content and define the structure of the webpage.
The header, descriptions, and the form that the user completes are all written within the HTML file. The CSS code,
tools.css, styles and formats this content. It provides the font style, background image, text spacing, and other
presentation specifications.
At the end of the HTML file is a section of Javascript code. Currently, no other buggulch web page uses Javascript.
The web pages are built with only HTML and CSS code. They are styled pages of text with links that allow you to
navigate to the other buggulch web pages. Javascript is a more sophisticated programming language that gives a web page dynamic
functionality. In the case of the Tide Planning Tool, the JavaScript senses when a user submits the HTML form on
the website. It then takes the form answer data, reformats it into a suitable format for data transmission, and
sends it to the backend server.
The Tide Planning Tool backend code is made up of two files,
flask_server.py
and
backend.py.
These files are made using Python, a programming language that is well suited for building data analysis tools. The flask_server.py
file is a server that is hosted using a free hosting service called Render. The server is essentially code
living on a computer that is always on, courtesy of Render. It sits around waiting for the frontend code to
send over a user's HTML form submission data. Once received, the data is reformatted and used as inputs to
the backend.py file.
The backend.py file is where the tide data is retrieved and analyzed based on the HTML form submission answers.
The tide data is retrieved from an NOAA database using the noaa_coops package built by NOAA. A package is a
collection of pre-made code built to provide a specific functionality to someone else's code. The backend.py
file installs the noaa_coops package and then utilizes an noaa_coops tool to obtain tide data based on the location
and date range specified by the form submission answers. The noaa_coops tool achieves this by communicating with
the NOAA API to get data from the NOAA database.
The tide data is returned as an array of data entries, each containing a timestamp, tide height, and high or low
classification, for every high or low tide within the user defined time period. The data array is converted to a pandas
dataframe for ease of data manipulation. Pandas is a package like noaa_coops, but when installed, it enables the
use of data manipulation tools instead of tide data retrieval tools. Converting the tide data to a pandas dataframe
enables it to be manipulated with the pandas package tools. From here, the tide data is filtered based on the
remaining criteria specified by the form submission answers. If the low tide option is selected, all high tides
and tides higher than the chosen tide threshold are eliminated from the data set. If the high tide option is
selected, all the low tides and tides lower than the chosen tide threshold are eliminated from the dataset.
The data is then filtered based on the selected days of the week that the user would like their tides to fall on.
To do this, the tide timestamps must be assigned a day of the week. A package called datetime enables this
functionality. It provides a tool to identify the day of the week of a given date. All tides that don’t fall on
the selected days of the week are eliminated from the dataset. Additionally, the datetime package has many other
functionalities used throughout the backend code, such as manipulating date and time formats and performing date
and time arithmetic.
The last stage of data filtration eliminates tide data that does not satisfy the time of day criteria. The time of
day options include daylight, night, and no preference. To perform the data filtration, each tide is assigned a
sunrise and sunset time. The sunrise and sunset data is obtained using the Astral package, which provides a tool
that calculates sunrise and sunset times when given the inputs; state, city, timezone, latitude, longitude, and
date. In the Tide Planning Tool form, the user only selects a location (e.g., San Francisco, CA), so the timezone,
latitude, and longitude must be retrieved from another source. A data sheet named
location_db.csv
is used to store this additional location information. The data sheet is indexed by the location name, which corresponds to the
user's selection. Alongside each location name, the spreadsheet contains columns that store the associated timezone,
latitude, and longitude for that location. The code utilizes this data as inputs to the Astral tool to obtain the
sunrise and sunset data for all the tides remaining in the tide dataset. The sunrise and sunset times are then
compared to each tide time. If the tide time does not fall within the selected criteria (daylight, night, or
no preference), the tide is eliminated from the data set. The daylight option is defined as one hour before sunrise
to one hour after sunset. The night option is defined as one hour before sunset to one hour after sunrise. The no
preference option skips the time of day filter.
Now that all remaining tides satisfy the tide criteria provided by the form submission answers, the tide data is
reformatted for data transmission and sent to the frontend webpage. The frontend Javascript code retrieves the data
and displays it on the website as an HTML table. The user then utilizes the data to enjoy a day
on the coast.