Client Hand-off Document
Project: Edible Campus (m)app
Client: Kyle Parker
Introduction
This document outlines the steps required to set up, launch, and maintain the Edible Campus (m)app web application we have developed for you. The application is designed to display the locations of edible plants on the UNC-Chapel Hill campus. Users can interact with the map, add comments using Google reCAPTCHA for security, and find plant information.
Technical Overview
The Edible Campus (m)app is built using Node.js, HTML, CSS, and JavaScript. It relies on the Leaflet.js library for map rendering, the Leaflet Routing Machine for navigation, and the ExcelJS library for handling Excel files. The application also uses Google reCAPTCHA to secure the comment submission system and the Mapbox API for map data.
The application source code is hosted on GitHub at https://github.com/WeiKangda/COMP523EdibleCampus.
Set Up and Deployment
To set up and deploy the Edible Campus (m)app, follow these steps:
1. Download the project repository from GitHub: https://github.com/WeiKangda/COMP523EdibleCampus
Run the following command:
git clone https://github.com/WeiKangda/COMP523EdibleCampus.git
2. Install Node.js on your local machine, if you haven’t already, by following the instructions at https://nodejs.org/en/download/
3. Open a terminal or command prompt, navigate to the project directory (COMP523EdibleCampus), and run the following command to install the required dependencies:
npm install express xlsx multer express-rate-limit axios
4. Run the application with the following command:
node app.js
5. Open your browser and navigate to http://localhost:3000.
6. Choose a web hosting platform that supports Node.js applications, such as Heroku, AWS, or DigitalOcean. Create an account on the chosen platform and follow their documentation to set up a new project.
7. Deploy the application to the hosting platform by following their specific deployment instructions. This typically involves linking your hosting account to the GitHub repository or uploading the files directly through the platform’s user interface.
Follow the instructions in the following documents to deploy to Carolina Cloud:
https://docs.google.com/document/d/1XMmFrcf3Ee5YmCSd8RQIpVsgkJhG7IFHZEoS0syAM-U/edit
8. Configure the domain name for your application if desired. This step is optional but allows you to use a custom domain name for your application instead of the default domain provided by the hosting platform.
Content Modification
To modify the content displayed for each garden, navigate to the ./COMP523EdibleCampus/gardenContent directory and modify the Excel sheet called gardenContent.xlsx. Simply modify the corresponding sheet of the gardens to reflect changes.
To add more features of the plant, add the new features in the Excel sheet first. However, in order to show the new features, ./COMP523/COMP523EdibleCampus/public/js/displayGardenContent.js also needs to be modified. We are planning to meet with our client to talk about all the plant features he wants to have and add those features for him. We are also planning to show him how to add new plants and features during our meeting. We will also record a video for our client’s future reference.
Maintenance and Costs
As a Node.js application, the Edible Campus (m)app may require occasional updates to its dependencies and security patches. To update the application, modify the relevant files in the project directory and redeploy the application.
You may also need to update the garden information and images periodically. To do this, update the relevant data in the Excel file and redeploy the application.
The costs of running the application will depend on the hosting platform you choose. Review the pricing details for your chosen hosting platform to understand the costs involved, as they may vary based on factors such as bandwidth, storage, and computing resources.
Support
If you encounter any issues or need assistance with the Edible Campus (m)app, please contact our support team at huhu8@email.unc.edu. We will be happy to help you resolve any issues and ensure the application runs smoothly.
Additional Resources
Google reCAPTCHA Documentation: https://docs.google.com/document/d/1KQyQVfPCrYbR3sDGgltKUBp_-swKEJ_v8UtO2prn-C4/edit?usp=sharing
Reference for Postimage
https://docs.google.com/document/d/1c7RYiXriPJuYCGJTkClAGQrARLwYR7JMl0Q6SAnYRYs/edit?usp=sharing