Skip to content

Latest commit

 

History

History
67 lines (44 loc) · 3.95 KB

README.md

File metadata and controls

67 lines (44 loc) · 3.95 KB

Student Draw

An app for randomly drawing (picking) students and showing their name drawings (images) for the Digital Literacy Project.

Design

General Workflow

  1. The teacher logs in at /admin.
  2. The teacher creates a "class" using the interface at /admin/create.
  3. A class link /class/<id> is generated (e.g. /class/vGq2fp) and the teacher is redirected to admin interface at /admin/class/<id>.
  4. Students go to the link /class/<id>. Or go to / and enter class id there.
  5. Students input their name, customize it to their liking, and submit it to the server for approval using the interface at /class/<id>.
  6. The teacher either approves or denies (prompting students to try again) the drawings of names as they come in live at /admin/class/<id> admin interface.
  7. The teacher includes/excludes (e.g. for attendance) students at /admin/class/<id>, and configures how the random drawing will work (e.g. whether students should only ever be called once, etc.)
  8. The teacher (on own or different computer) goes to /draw/<id>, which presents the cold calling (drawing) interface.
  9. The teacher performs random drawings at /draw/<id>, causing names to animate in.

Additions

  • Allow students to customize their name after the intitial submission, potentially with processingJS.

Getting Started for Users

Coming Soon!

Getting Started for Developers

Student Draw uses a client-server WebSockets-based architecture built on full-stack JavaScript.

Client

The client is built with React using boilerplate from create-react-app. Follow the steps below to get started with development.

  1. Ensure you have Node version 4.6 or later. You may check by running the following commands in a Terminal or Command Prompt.

     node --version  # should output v4.6 or later
     npm --version  # should output some version (i.e. should not error)
    
  2. Clone this repo, and cd to the client/ directory.

     git clone '[email protected]:icasdri/student-draw.git'
     cd 'student-draw/client'
    
  3. Install the required dependencies locally into node_modules.

     npm install
    
  4. Start the development server with npm start.

     npm start
    
  5. Using a browser, go to whatever address got printed (usually http://localhost:3000/).

  6. Start hacking on the source code! The development server and browser should live-update as you edit and save.

  7. To compile and create a production build suitable for deployment, run the following (the built client files will be placed in build/).

     npm run build
    

Server

The server is built with Node.js, Express, and Sequelize. This makes this app full-stack JavaScript and therefore the process for getting started with the server is similar to that of the client:

  1. Ensure you have Node.
  2. Clone this repo (or cd to the already cloned repo).
  3. cd to the server/ directory.
  4. Install the required dependencies with npm install.
  5. Start the server with npm start.

Proxying requests: As this is a client-side inflated app, the server essentially has no interface and only exposes an API at /api by default on localhost:3001. As the React (Webpack-based) development server is nice for developing the client and due to the Same-Origin policy of browsers, it is desirable/necessary to proxy requests to the server API through the React development server. This has been set up in client/package.json appropriately for the server running at localhost:3001.

Database: The server stores (creates/updates as necessary) an SQLite database file student_draw.db in the working directory. In order to aid development, an SQLite database viewer such as DB Browser for SQLite may be handy to verify server workings.