CheckList

Utility to perform standardized checks in ICT equipment.

CheckList is a PWA (Progressive Web App) used in Catalan public schools to perform standardized checks in the process of delivery and installation of new ICT equipment.

Demo site: https://met.xtec.cat/checklist
(school code: 12345678 password: demo)

Usage

The scenario where the application is used has the following elements:

• Each school has a unique ID (currently formed by 8 numerical digits) and a password known only to the school principals.

• Schools have had an allocation of points that allowed them to make a selection of products in a catalog of ICT equipment, based on their educational project. The products are delivered and installed in schools by supplier companies. At the time of installation, schools must check that everything works correctly and is well configured.

• Each ICT product type has a unique alphanumeric identifier and a specific set of tests to be carried out.

• Several people can simultaneously perform the tests at the ICT equipment of each school, using different devices.

Main components

The PWA has three main components, organized in three separated directories:

• /api: a REST API currently powered by PHP scripts backed by a MySQL 8.0 database.

• /app: the front end PWA made with React components, most based on Material-UI and built with create-react-app scripts.

• /socketsrv: a WebSocket service powered by Socket.io, used to synchronize all instances of the PWA running at the same time on different devices. For more information about this component see: socketsrv/README.md.

In addition to this, three more folders are provided:

• /data: Contains product pictures, the application icons and a SQL file (checklist-demo.sql) that can be used to initialize the MysQL database with example data. It contains also an utility (create_units.js) used to generate SQL scripts from data in JSON format.

• /.devilbox: Specific settings for Devilbox, used to glue all components in a powerful development platform based on Docker containers. For more information see: .devilbox/README.md.

• /.vscode: This folder contains a script used to debug react sessions with Chromium in Visual Studio Code.

Prerequisites

• NodeJS is needed to build the main application and launch the webSocket server. Linux users are advised to use the official LTS repositories.

• A LAMP environment providing Apache or Nginx, PHP and MySQL or MariaDB.

Setting up

First of all, the NPM components must be loaded in app and socketsrv:

# Go to the main project directory:
$ cd path/to/checklist

# Go to the 'app' folder and install the required npm components:
$ cd app
$ npm install

The same process should be done with the socket server:

# Go to the main project directory:
$ cd path/to/checklist

# Go to the 'socketsrv' folder and install the required components:
$ cd socketsrv
$ npm install

Common operations

From here, the most usual operations are:

Start the socket server:

$ cd path/to/checklist
$ cd socketsrv
$ SOCKET_PORT=8000 DEBUG=chklist node index.js

Launch the development server:

$ cd path/to/checklist
$ cd app
$ npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Build the main application:

$ cd path/to/checklist
$ cd app
$ npm run build

Builds the app for production to the app/build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

For more information about this and other available scripts check the Create React App site.

License and Credits

CheckList has been created by the ICT in Education Unit of the Department of Education of the Government of Catalonia.

Released under the terms of the European Union Public License v. 1.2.

This application uses the following open source components:

• React - A JavaScript library for building user interfaces
• Material UI - React components that implement Google's Material Design
• Socket.IO - Enables real-time, bidirectional and event-based communication
• json2csv - Converts json into csv
• PHP - Used on the backend API
• MySQL - To store the collected data