I would like to define a couple of schemas and automatically generate simple tables and forms from that automatically retrieve and store data via a standard REST API in a database (ideally a MongoDB).
The schema could for example look like this:
{ "title": "AudioInputDevices", "type": "object", "properties": { "id": { "type": "number" }, "name": { "type": "string" }, "channelCount": { "type": "number" } }, "required": ["id", "name", "channelCount"]
}(But it could of course be more complicated and have properties of type array or object.)
UI
From the example schema, it should generate UI elements like this:
+----+-----------------------+--------------+
| id | name | channelCount |
+----+-----------------------+--------------+
| 0 | Built-in Microphone | 1 |
| 1 | Behringer XR18 | 18 |
| 2 | Sennheiser Stereo Mic | 2 |
+----+-----------------------+--------------+ [Add] [Edit] [Delete]The Add button opens a form like this:
+--------------------------------+
| Create New Record |
+--------------------------------+
| name: [ ] |
| channelCount: [ ] |
| |
| [Submit] |
+--------------------------------+The Edit button opens a form like this:
+------------------------------------+
| Edit Record |
+------------------------------------+
| name: [Behringer XR18] |
| channelCount: [ 18] |
| |
| [Submit] |
+------------------------------------+REST API
The table should automatically load its data from GET /api/AudioInputDevices which would return something like this:
[ { "id": 0, "name": "Built-in Microphone", "channelCount": 1 }, { "id": 1, "name": "Behringer XR18", "channelCount": 18 }, { "id": 2, "name": "Sennheiser Stereo Mic", "channelCount": 2 }
]When the Add form is submitted the data from the form should be submitted via POST /api/AudioInputDevices with a json like this:
{ "name": "Headset Mic", "channelCount": 1
}The response would be:
{ "id": 3, "name": "Headset Mic", "channelCount": 1
}and should be added to the table in the UI automatically.
When the Edit form is submitted the data from the form should be submitted via PUT /api/AudioInputDevices/:idOfSelectedItem (e.g. /api/AudioInputDevices/3 with a json like this:
{ "name": "Hello", "channelCount": 1
}The response would be:
{ "id": 3, "name": "Hello", "channelCount": 1
}and the entry in the table should be updated accordingly automatically.
When the Delete button is pressed, a request should be sent to DELETE /api/AudioInputDevices/:idOfSelectedItem and if a status code 200 is received the element should be removed from the table in the UI automatically.
Database
A request to GET /api/AudioInputDevices should create a MongoDB query like this:
db.AudioInputDevices.find({})A request to GET /api/AudioInputDevices/123 should create a MongoDB query like this:
db.AudioInputDevices.find({"_id": 123})A request to POST /api/AudioInputDevices should create a MongoDB query like this:
db.AudioInputDevices.insertOne({ name: "New Microphone", channelCount: 1
})A request to PUT /api/AudioInputDevices/22 should create a MongoDB query like this:
db.AudioInputDevices.updateOne( { id: 22 }, { $set: { name: "Updated Microphone", channelCount: 20 } }
)A request to DELETE /api/AudioInputDevices/2 should create a MongoDB query like this:
db.AudioInputDevices.deleteOne({ id: 2 })Ideas
express-restify-mongoose seems to be great for creating complete MONGODB-connected REST APIs from a Mongoose Schema.
UI-Schema seems to be great for generating tables and forms including frontend validation. It's based on JSON Schema, extended by a couple of UI-specific keywords.
But even if I were to write a UI-Schema to Mongoose Schema converter, the UI still wouldn't automatically be connected to the API.
The whole idea seems like such a trivial and obvious problem, that has most likely been solved before I would guess. I'm just not able to find anything online. Does anyone of you have any experience with this or ideas on how to solve it without too many hacks?
Edit:I would prefer a solution using a JSON-based REST API, React.js frontend and MongoDB for storage in the backend, but I am open to alternative solutions. It's just important that it needs to be a JS-based browser frontend and a JS-based nodejs backend.
3 Related questions 1736 How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X) 327 Push items into mongo array via mongoose 1247 No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API Related questions 1736 How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X) 327 Push items into mongo array via mongoose 1247 No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API 174 How to define object in array in Mongoose schema correctly with 2d geo index 942 Generate a Hash from string in Javascript 149 Mongoose indexing in production code 120 How to protect the password field in Mongoose/MongoDB so it won't return in a query when I populate collections? 194 Properly close mongoose's connection once you're done 0 How do I delete a entry "object" from a mongoose user model schema Load 6 more related questions Show fewer related questions Reset to default
