Volunteer Management App

Table of Contents

• Overview
• Contributors
• Gannt Chart
• Deployment Instruction
  • Backend
  • Frontend
  • Getting running
• Possible Issues & Bugs
• API Guide
• Continuous Integration / Continuous deployment
• UX design
  • Requirements
  • User Stories
  • Use Cases & Journey Mapping
• Ethics

Overview

We're working on a website that can be used by different communities to help self organise, keep track of need and effectively deploy help. We focus on building an intuitive front-end design and a system which all users can interact with. The application uses a Django project integrated with a vue application. And here is the website page https://uob.tofro.app/index/

---

Contributors

• Ismael Bencharef (IshShogun) - ha21869@bristol.ac.uk
• Linfeng Cai (CAILINFENG123) - yn20659@bristol.ac.uk
• Bowen Wang (Ruri22) - ki21094@bristol.ac.uk
• Xinyuan Zhang (s1s1s) - wo21905@bristol.ac.uk
• Zhiming Liu (LZMBill) - kf21667@bristol.ac.uk

---

1.1 Gantt Chart & Kanban

• Gantt Chart
• Kanban

---

1.2 Deployment Instruction

Please see our latest release ！

1.2.1 Backend: (Using Docker)

• Download & Install Docker

• Clone this repository:

git clone https://github.com/spe-uob/2022-VolunteerManagementApp.git 

• There are some extre steps for windows user(mac user can skip this step)

run these commands in Application\api directory
dos2unix setup.sh
dos2unix run.sh
dos2unix run-dev.sh

Then run this command in Application\api\build_scripts
dos2unix build-frontend-assets.sh

• Then Run the following command in the Application directory ( This downloads all required node modules for the vue app ):

cd ./Application/
docker-compose -f docker-compose.yml -f development.yml up --build

1.2.2 Frontend:

• Direct to the helloworldvue directory and run the following commands

cd ./Application/api/helloworldvue/
npm install
npm run serve

• Restart the tofro-django container and get running ! ! !

1.2.3 Getting Running!

To get the website running open the following url:

http://localhost:8000/

Login then direct to:

http://localhost:8000/index

This is where the Vue Application is rendered. Now all that is left is to enjoy!!!

---

1.3 Possible Issues & Bugs

1.3.1 Found a bug !!!

If you found a bug, you can use issue template to create an issue with the tag bug

---

1.4 API Guide

API URL	Request Type	Description
api/actions/	GET	retreive all the action data from a server
api/actions/	POST	Add actions to the database - Requires an object with Help Type, Resident, Due, Status, Date
api/volunteers/	GET	retreive all the volunteers data from a server
api/referrals/	GET	retreive all the referral data from a server
api/residents/	GET	retreive all the resident data from a server
api/residents/	POST	Add residents to the database - Requires an object with first_name, last_name, address, postcode, Date
api/volunteers/	GET	retreive all the volunteers data from a server
api/organisations/	GET	retreive all the organistion data from a server
api/residents/37/	DELETE	Deletes a resident from the database
api/actions/7/	PATCH	a set of changes described in the request entity be applied to the resource identified by the Request- URI

---

1.5 Continuous Integration / Continuous deployment

CI:

We decided to use GitHub actions that triggers whenever we start a pull request into main There are two tests, one for the frontend and one for the backend

• Frontend Tests
• Backend Tests

CD:

The deployment is achieved by pushing the code to a virtual machine, and the process of updating involves accessing the virtual machine, locating the corresponding file path, and pulling the latest code from GitHub.

The latest code is then deployed to https://uob.tofro.app/index/

---

1.6 UX design

To design an interactive user interface we employed general UX design methods, such as Journey Mapping, listing user personas and requirements. We aim to follow a UX design pattern.

1.6.1 Requirements:

• The site needs to be intuitive and easy to navigate/use for the coordinator
• The site needs to facilitate easy logging of new actions
• The site needs to facilitate easy matching between actions and eligible volunteers
• The site needs to facilitate efficient dealing of high priority actions
• The site needs to facilitate easy searching of actions,residents and volunteers

1.6.2 User Personas:

User	Goal	Frustrations
Coordinator	To efficiently match requests and log new data	Confusing UI requiring a lot of clicks and long traversals through out the interface
Residents	To quickly and efficiently give required information to coordinator	Long,slow drawn out phone call
Volunteer	Quick matching of volunteered action	Overlooked action for long period of times

1.6.3 Use Cases & Journey Mapping:

---

1.7 Ethics

If coordinators use this application, we need to know their email addresses, addresses, phone numbers, and personal information. To avoid concerns about privacy and security, obtaining ethical approval is crucial. To provide a good user experience, we have established the following ethical principles:

• We will prioritize the safety of our users.
• We will respect the privacy of our users and will never use their data for any purpose other than the intended one.
• We will listen to feedback and criticism from our users and will use it to improve our products and services.
• By adhering to these principles, we hope to create a culture of respect that benefits everyone in our group.

---