Server-Side Development
To initiate the project, a main directory named ‘classroom_example’ was created to contain all necessary files. Within this directory, a sub-folder labeled ‘server’ was established, where the server-side application would be developed. The first step involved running npm init -y to generate the package.json file.The server folder includes two primary files: server.js and router.js. The server.js file contains boilerplate code for global route handling, while router.js directs specific routes based on HTTP methods.
File Structure Overview
Server.js (/server/server.js)
- Required necessary packages and assigned them to variables.
- Created an Express application instance and mounted middleware for route handling.
- Configured the server to run on port 4000.
- Implemented default error handling.
const express = require('express');
const app = express();
const router = require('./router');
app.use(express.json());
const cors = require("cors");
app.use(cors());
app.use('/', router);
app.use((err, req, res, next) => {
const defaultErr = {
log: err,
status: 500,
message: { err: 'An error occurred' }
};
const errorObj = Object.assign({}, defaultErr, err);
console.log(errorObj.log);
return res.status(errorObj.status).json(errorObj.message);
});
app.listen(4000, () => {
console.log('Listening on port 4000');
});
Router.js (/server/router.js)
- Required files that house controller functions for data retrieval.
- Created an Express router instance.
- Defined routes to facilitate data communication between the backend and frontend.
const express = require('express');
const router = express.Router();
const userControllers = require('./Controllers/userControllers');
const sessionController = require('./Controllers/sessionControllers');
router.post('/generate', userControllers.generateToken, (req, res) => {
res.status(200).json(res.locals.token);
});
router.post('/login', userControllers.verifyUser, (req, res) => {
res.status(200).send(res.locals.loggedIn);
});
router.get('/session', sessionController.getId, sessionController.getUsers, (req, res) => {
res.status(200).send(res.locals.users);
});
router.get('/details', sessionController.getId, sessionController.getDetails, (req, res) => {
res.status(200).send(res.locals.details);
});
In addition to these files, there are also ‘Models’ and ‘Controllers’ folders within the server directory. The Models folder connects to a PostgreSQL database using Node-Postgres to manage database connections efficiently.
User Controllers Overview
The userControllers.js file is responsible for creating JWT signatures and verifying user credentials. Utilizing jsrsasign for cryptography and dotenv for managing environment variables containing SDK credentials is critical here.
userControllers.generateToken, which generates a JWT signature based on incoming request data. The second method, userControllers.verifyUser, checks if a user exists in the database by querying with provided credentials.
Session Controllers Overview
The sessionControllers.js file contains methods for retrieving session details via the Video SDK API. Axios is employed as the HTTP client for making requests.Key methods include:
- getId: Retrieves the current session ID.
- getUsers: Lists users participating in a session.
- getDetails: Fetches detailed information about a session.
Conclusion
This overview encapsulates the server-side setup for creating a virtual classroom application using Zoom Video SDK. The next part will explore client-side development where React will be utilized alongside Ant Design and TailwindCSS for UI enhancements. By following this guide, developers can effectively build an online learning platform that meets modern educational needs.
