Video Demo: https://www.youtube.com/watch?v=R8cvyEp0Vxs
- About The Project
- Getting Started
- Prerequisites
- Installation
- Project’s schemes
- Usage
- Roadmap
- Contributing
- License
- Contact
- Acknowledgements
This project is the last activity of Harvard's CS50 Introduction to Computer Science with David Malay. With the task that was given, we decided to make a Flask-based web application that tackles on the aspects of making an appointment with a doctor. The website is composed of a series of html templates and a python file which guide the user to register a doctor or a patient account and then treating according to each role, providing specific routes for each of their necessities. It is inspired by an Open Source Software called OpenEMS.
This project was made possible using:
- Visual Studio Code
- Python
- Flask
- Mapbox
Using your Text Editor and terminal, install Git and Python 3.7.9 and execute the command
pip install venv
in order to set up a virtual python environment to install the requirements. Then, activate your venv folder, which should be inside your project root folder and run the next commands
Git clone https://github.com/arturacm/cs50finalproject
Pip install ‘requirements.txt’
Setup an account at Mapbox and navigate to Access Tokens section and create a public token, copy it and create a ‘.env’ file on the project’s root folder and set up the file as below
MAPBOX_ACCESS_TOKEN = * Insert copied token here * (exclude the asterisk sign)
Open once again your terminal and configure your Flask settings (example below assumes your terminal is a Linux WSL bash terminal, for other terminals, such as PowerShell or cmd, access Flask’s Command Line Interface Documentation:
export FLASK_APP=application:app
export FLASK_DEBUG=TRUE
Flask run
If you followed the configuration correctly, you should be able to open to your configured default browser the application hosted on http://127.0.0.1:5000/
Our current project scheme can be seen as:
| File Name | Description |
|---|---|
| /static | Folder for organizing the front-end styles, CSS and Map Marker. |
| favicon.ico | Webpage tab icon |
| marker.png | Map marker |
| styles.css | CSS configurations |
| /templates | Folder containing the pages |
| apology.html | Renders application failures |
| appointment.html | Renders form to submit appointments |
| change.html | Renders form to change password |
| details.html | Renders details for a specific appointment |
| find_doctors.html | Renders map with doctors in the database |
| history.html | Renders past appointments in tabular manner |
| index.html | Renders future appointments in tabular manner |
| layout.html | Flask based layout to reduce repetition of code in each template |
| login.html | Renders user login form |
| map-register.html | Renders map to update a doctor’s location |
| register.html | Renders a user patient or doctor registration form |
| .env | Contains MapBox API Token |
| application.py | Contains all the necessary functions and rules for rendering all the templates and registering info to the database |
| database.db | SQL based database containing users, doctors, patients, appointments tables |
| helpers.py | Side application to load apology template if an error occurs |
| requirements.txt | All of the Python’s packages and dependencies necessary for running the project locally. |
| run.py | Optional application that calls application.py and loads with FLASK_DEBUG on by default. |
Once opened, you may create an account at register and pick a role as a patient or a doctor.
After selecting the account’s role, the form will act accordingly and provide you with the necessary camps to provide for the SQL database.
The index webpage will show you your next validated appointments and upon registration should show a page which looks like the image below.
From there, you have, as a patient, the following fields:
- Appointment
- History
- Find Doctors
- Change Password
- Log Out
The appointment webpage will show you a simple form to submit an appointment and should look like the image below.
History webpage works similarly to the index webpage and shows you appointments which already happened.
Lastly, the other main functionality is a map which shows you the current list of doctors subscribed to the database.
If checked thoroughly, it can be perceived that the website is still in its development stages and it can be improved greatly by a new stylization with newer graphs, images and fonts. This should be an ever-increasing aspect of this website if opted to continue improving on it. Other aspects should be:
- Implement fixed scheduled appointment hours;
- Implement acceptance of schedules;
- Implement a calendar interface;
- Implement a real time chat API for doctor and user;
- And many others.
If interested in contributing for this open source project, it can be done so by following the next steps:
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m ‘Add some AmazingFeature’)
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
Distributed under the MIT License.
Artur Moreira - LinkedIn - email: arturacm@gmail.com
Davi Leal - LinkedIn - email: davipbl@gmail.com
- OpenEMS
- Flask
- Python
- David Malay from CS50