StudyMC

Study-MC (Study Medicinal Chemistry) is a College of Pharmacy web application to help graduate students learn, test, and review their course materials.

Overview

Organization

Running the Application Locally

Development

File Structure

Other Info.

Screenshots

Quicklinks

App: https://apps.phar.umich.edu/study-mc/

Sprint Planning: https://trello.com/studymc

Virtual Lib: https://pharmacy.umich.edu/mcvl/

Organization

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.

Running the Application Locally

1. Ensure Node.js & Git are installed

2. git clone git@github.com:chriscerk/study-mc.git

3. cd study-mc

4. npm install

5. ng serve

6. Navigate to http://localhost:4200/ in your browser.

7. Create a file named firebase.config.ts and put it in the /src/environments/ folder

8. 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: "" };

Development

Development server

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.

Building

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

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.

Deploying the Application

1. npm run deploy

2. Open FileZilla, delete everything in the /study-mc/ folder.

3. Copy the contents of the dist directory to the server through FileZilla.

File Structure

src/app/

src/app is where the bulk of the application lives.

core

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

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

src/assets is where content which is stored by the Service Worker resides such as images and JSON files.

dist

dist is generated by a ng build command or npm run deploy and is where your production code lives`

scripts

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.

Other Information

Images

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

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.

Further help

Angular

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Screenshots