Structured Reporting is a generic web application that takes JSON Schema and generates a multilingual UI form for data capturing, stores that data locally (in-browser using pouchdb), sync's the data to other databases (couchdb or cloudant), and can work completely offline.
It supports validation of inputs, collapsible sections, dependencies (sections that are visible based on the values of inputs), array inputs (add as many of a section as you like), signing off of reports (using a PIN code), and multilingual forms.
It is typically used to capture health or other data on computers and mobile devices.
- JS framework: React - Visit site
- Design system: IBM Carbon - Visit site and visit components site
- Form management library: React-jsonschema-form - [Visit site](https://react-jsonschema-form.readthedocs.io/en/latest/
- Internationalization - React-Intl
This web application does not require an application server, it can simply be hosted on a static server. Optionally, a CouchDB or Cloudant server can be used to sync data from the client browser(s), which can be set up in src/api/constants.js
- As pre-requirements, you will need to have basic knowledge in HTML, CSS, JS and modern JS(ES6).
-
Here is a very good article with the 10 ES6 most used features: 10 ES6 most used features
-
Also some knowledge in NPM and Git. If you don't have it don't worry... this is learned on the fly.
-
And finally a good editor. I recommend VSCODE or Atom. In that order.
-
Recommended articler to understand the methodology behind building React apps: Atomic Design Thinking
-
As you start with React you will encounter many new concepts. It might seem overwhelming but don't worry they are all very easy to understand. Just go one step at a time.
Some of the most basic concepts you will need to get familiar with are...
- Atomic Design
- JSX
- Stateful component
- Stateless component (aka function component)
- Props and PropTypes
- Refs
- Lifecycle methods
- Hooks (This is a super feature released this year that replace many of other old features as stateful components and lifecycle methods)
- Virtual DOM
- Testing: Jest and (enzyme or react-testing-library)
One step at a time will make it 😆
- Some free react courses: They are from two/three years ago and you won't be using some of the things they explain. However, it's critical to understand how the previous versions of React work. There are tones of old code out there and you will be needing to know how to read that code.
egghead.io/courses/start-learning-react
egghead.io/courses/the-beginner-s-guide-to-react
Pre-requirements:
- Install nodejs
- Install an editor, I recommend VSCode
- Install git
Once all above is installed:
git clone https://github.ibm.com/carlos-parreno/service-corps-frontend-stack-test.git
cd service-corps-frontend-stack-test
npm install
npm run build
npm run start
The application will be running on http://localhost:3000/
Happy coding 🤗
Forms are stored in the /public/schemas folder. There are sub-folders for each language (using language code). The /public/schemas/schemas.json file contains an array of schemas to make available to the user, which maps to a JSON Schema file of the same name (see the general-report.json example). The language-specific sections are stored in the language sub-folders with the same name (e.g. /public/schemas/en/general-report.json), which are then combined with the language-specific /public/schemas/en/common.json schema that contains fields common to all forms, and then combined with the root-level schema (e.g. /public/schemas/general-report.json) to generate the final JSON Schema file that is used to create the form.
To add a new form, follow the example of the general-report.json as noted above, and add the new form to the /public/schemas/schemas.json file to make it available.
- User authentication has not been implemented.