Project Initiated: 2021-03-05
Updated: 2021-03-17
This repo is the JavaScript/React side of this project. The Python (Raspberry Pi) side of this project can be found in its own repo, HERE.
A Firestore database is also required for full functionality
Please install and set up the React app and the Firebase database (instructions below) before moving on to the Python/Raspberry Pi installation/setup.
Save Lives!
Are you a terrible plant parent? Does your “green” thumb spread death to all potted life-forms? Despair not, for now you have “Soil-Ent-Green”!
Soil-Ent-Green is a web/hardware application that allows users to remotely gather soil moisture data from their houseplants, and have that data graphed for them in real-time.
A "Raspberry Pi" running the Soil-Ent-Green Python application is used to gather the data and send it to "Firestore" (NoSQL online database) for storage. The Soil-Ent-Green React application retrieves the data from Firestore and provides a browser-based user interface.
The React application has full C.R.U.D. capabilities and utilizes Firebase Authentication, so a user can only access, add, edit, and delete their own plants and database data. As plant information is stored in the Firestore database with the sensor data, this application could be utilized by the user from any browser/device (if the application were deployed).
The Python application can be modified to account for individual sensor calibration and to adjust the interval between sensor readings. For the purposes of quick demos and easy sensor calibration, this interval is set to 2 seconds by default.
Soil-Ent-Green is an exercise/experiment in figuring out how a hardware product might be paired with its web app, without the user being required to edit any code.
If this were a "real" product, custom hardware would be used instead of a Raspberry Pi, and it would come factory programmed with a unique "Machine Name" and database authentication key. The "Machine Name" would be printed on the hardware's exterior so that a user can easily find it and type it into the plant creation form in the React app.
- A browser that can run HTML5.
- A Firestore account/database.
- This React App.
- Node.js
- A "Raspberry Pi" running "Raspberry Pi OS", and the Soil-Ent-Green Python 3 application found HERE.
- Capacitive soil moisture sensor.
- Analog to digital converter (ADC ADS1115 based).
Option 1 (direct download)
- Copy and paste the following GitHub project link into your web browser's url bar and hit enter/return.
https://github.com/CodingMoore/soil-ent-green-react-v2
-
Download a .zip copy the repository by clicking on the large green "Code" button near the upper right corner of the screen.
-
Right click the .zip file and extract (unzip) it's contents.
-
Open the unzipped folder/files using Visual Studio Code, or similar source code editing program. Install all required dependencies from the package.JSON folder, and then build the program. If you are using Node Package Manager, first navigate to the root directory of the project in your console. You can then type the following commands to install build and run the program.
npm installnpm startThe code will automatically be built, and it should automatically be launched by your default web browser. If the application does not launch automatically, you can type the following into your web browser's url bar and hit enter/return.
Option 2 (via git console/terminal)
-
Open your Git enabled terminal/console and navigate to a directory that you wish to download this project to.
-
Type the following line of code into your terminal/console to automatically download the project to your current directory and hit return/enter.
git clone https://github.com/CodingMoore/soil-ent-green-react-v2
-
Once the project has finished downloading, navigate to the root directory of the project in the terminal/console, and type "
code ." and then hit return/enter.The project should automatically launch using your default source code editor.
-
Install all required dependencies from the package.JSON folder, and then build the program. If you are using Node Package Manager, first navigate to the root directory of the project in your console. You can then type the following commands to install build and run the program.
npm installnpm startThe code will automatically be built, and it should automatically be launched by your default web browser. If the application does not launch automatically, you can type the following into your web browser's url bar and hit enter/return.
-
Go to https://firebase.google.com/ and click "Get Started".
-
Sign-in to your google account, or create a new google account.
-
Click "Create a Project". If this button is does not appear, first click on "Go to Console" in the upper right-hand corner.
-
Give your project a name, and click the "Continue" button. You may or may not choose to enable "Google Analytics" at this time. Click the "Create project" button.
-
After a few seconds, your project will be built. Click on the "Continue" button.
-
Open the "Build" section of the vertical menu on the left side of the screen, and click "Firestore". If this menu is not visible, you may need to widen your browser window.
-
On the Cloud Firestore page, click the "Create database" button.
-
Select "Start in test mode" and click the "Next" button. Please note that the security settings for test mode are turned OFF by default.
-
Select the "Cloud Firestore location" from the drop down menu. The default option is probably the best choice. Click the "Enable" button.
-
Click on "Project Overview" at the top of the vertical menu on the left side of the screen. If this menu is not visible, you may need to widen your browser window. Then click on the "web" icon that looks like "</>".
-
Give your app a nickname. and click the "Register app" button. Do not check the checkbox for "Also set up Firebase Hosting for this app".
-
Copy the "firebaseConfig" settings as you will need to add them to the React ".env" file so that the React application can connect to the database. For more information on this, read the "Create React .env File" section below. This code contains information that needs to be kept SECRET, so do not share it. Click on the "Continue to console" button.
-
Open the "Build" section of the vertical menu on the left side of the screen, and click "Firestore". If this menu is not visible, you may need to widen your browser window. Now click on the "Rules" tab.
-
Replace the rules code with the following and click the "Publish" button...
// Note that these rules are not secure and should NEVER be used in production!
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
These rules can be use for demonstration purposes, but they are NOT secure and should never be used for production projects, or to store sensitive or important information. Anyone who has your database url will be able to read, modify, or delete the contents of your project database.
-
Open the "Build" section of the vertical menu on the left side of the screen, and click "Authentication". If this menu is not visible, you may need to widen your browser window. Click on the "Get Started" button.
-
Under the "Sign-in method" tab, there will be a list of "Sign-in Providers". Click on "Email/Password" and then click "Enable". It is not recommended that you also enable "Email link". Click on the "Save" button.
You will be required to gather additional information from Firebase during the Raspberry Pi setup.
Warning: Once the Python/Raspberry Pi application has been started, it will continue to send data to Firestore at the "time.sleep()" interval that you have set in the "soil.py" file (default: 2 seconds). It will do so until the application is stopped, or the Pi is shut down. Viewing a live data graph in the React app will also count toward your read/write limits whenever new data points appear.
If your "time.sleep()" interval is low, and/or you forget to turn it off the application, you could go beyond Firestore's threshold for FREE database read/writes or storage. As of the time of this writing, Firestore's "Spark" plan will not charge you when this threshold is reached, but the application will cease to function until data is deleted, or when the read/write threshold resets the next day. However if you are not using the "Spark" plan, this could potentially cost you money.
I will not be held responsible in any way shape or form for any damages or costs that you incur while using these applications or by following my instructions. To track your Firestore Read/Write usage, go to your projects Firestore and select the "Usage" tab. To check your "plan" type, you can then click on "View in Usage and Billing", and then on the "Details & settings" tab.
Before creating your ".env" file, make sure to push this project to your github account. If you do not, you risk accidentally exposing your secret account information to the world.
Create a new folder in the root directory of the Soil-Ent-Green project, called ".env". Copy and paste in the following lines of text...
REACT_APP_FIREBASE_API_KEY = ""
REACT_APP_FIREBASE_AUTH_DOMAIN = ""
REACT_APP_FIREBASE_DATABASE_URL = ""
REACT_APP_FIREBASE_PROJECT_ID = ""
REACT_APP_FIREBASE_STORAGE_BUCKET = ""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = ""
REACT_APP_FIREBASE_APP_ID = ""
REACT_APP_FIREBASE_MEASUREMENT_ID = ""
Paste the firebaseConfig settings values that you copied earlier INSIDE of the quotes of their respective fields. If you no longer have the firebaseConfig values available, you can find them again by going to you Firebase project, clicking on the gear icon next to "Project Overview", and then clicking on "Project Settings". From here, you can scroll down to find the firebaseConfig values you need.
Save this new file.
- The graph currently shows ALL moisture data from a given plant rather than from a specific timeframe.
- There is currently no confirmation that the user has signed-up or signed-in.
- The 'My Plants' button in the header is only functional when the user is on the login page. (The 'My Plants' button that appears at the bottom of other pages is always functional.)
- The 'Red Alert' and 'Yellow Alert' functionality is not yet in place. (It will be used to send notifications if the moisture level drops below these levels.)
Hardware:
- Raspberry Pi 3B+
- SwitchDoc Capacitive Plant Moisture Sensor Corrosion Resistant Grove
- SwitchDoc Grove ADC - 4 Channel 16 Bit Analog to Digital Converter (based on ADS1115)
- SwitchDoc Pi2Grover - Raspberry Pi to Grove Connector Interface Board.
- SwitchDoc Grove Cable - 30cm Universal 4-pin: 5-pack
Software:
- Python 3
- React.js
- JavaScript
- Node.js
- CSS
- Bootstrap
- Firebase (Firestore) database
Authored by: Randel Moore
GPLv3
Copyright © 2021 Randel Moore