Study-MC (Study Medicinal Chemistry) is a College of Pharmacy web application to help graduate students learn, test, and review their course materials.
Running the Application Locally
App: https://apps.phar.umich.edu/study-mc/
Sprint Planning: https://trello.com/studymc
Virtual Lib: https://pharmacy.umich.edu/mcvl/
Learn Content provided to help expand the student's knowledge along with practice problems which include feedback.
Test Example test questions to gauge a student's knowledge on a particular topic.
Review A review sheet which students can fill out online then print upon completion.
-
git clone git@github.com:chriscerk/study-mc.git
-
cd study-mc
-
npm install
-
ng serve
-
Navigate to
http://localhost:4200/
in your browser. -
Create a file named
firebase.config.ts
and put it in the/src/environments/
folder -
Get your firebase credentials and insert as:
export const firebaseConfig = { apiKey: "", authDomain: "your-app-name.firebaseapp.com", databaseURL: "https://your-app-name.firebaseio.com", projectId: "your-app-name", storageBucket: "your-app-name.appspot.com", messagingSenderId: "" };
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve
.
-
npm run deploy
-
Open FileZilla, delete everything in the
/study-mc/
folder. -
Copy the contents of the
dist
directory to the server through FileZilla.
src/app
is where the bulk of the application lives.
Within core
are modules that are only loaded once. core/services
contains the modules that allow StudyMC to load the data and "talk" with Firebase.
shared
contains modules that are shared across the application. shared/models
might be useful to view to see how the data is organized.
src/assets
is where content which is stored by the Service Worker resides such as images and JSON files.
dist
is generated by a ng build
command or npm run deploy
and is where your production code lives`
scripts
is for any custom JS scripts. Currently there is canvasHotspots
which is used for hovering over compounds to show information. fabricProcessor
is a library I created for making interactions with HTML5 canvas using FabricJS. Both canvasHotspots
and fabricProcessor
implement animations simply from data.
For each Topic in a Course, the images are stored in assets/media/compounds/
. For each new topic added to a course, a new folder must be created WITH THE SAME NAME AS THE TOPIC in this location. Images for that topic must be placed inside of the new folder.
Data currently pulls from a Firebase connection for everything except 'Learn'. Data can be pulled from the assets/data/
folder easily by using the respective functions in the app/core/services
folder. Firebase allows the user to update the data instead of the data being statically served as a JSON file like the Learn Component.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.