Web UI for Mars-Sim

[bevans2000]

@mokun I've been playing with ReactJS since the New Year and turned my attention to thinking about a Mars-Sim web interface.
I've put together a little pilot to see how it could work. You can see it here http://mars-sim-pilot.s3-website.eu-west-2.amazonaws.com

It's hosted as a static web server running on AWS S3.

You can see the code in GitHub https://github.com/bevans2000/mars-sim-react-pilot. One key point is the data is loaded from JSON format which of course could be produced by a RestFUL server. It has a basic framework to understand how Units can be referenced with a shared Component of UnitLink. It uses Bootstrap so does adjust nicely to a mobile phone but theme colours is a bit random at the moment.

The challenges I see are:

• How to display all the important properties in a Web interface.
• How to generate the JSON representation in a RestAPI without having to write a lot of mapping code.

[mokun]

• How to generate the JSON representation in a RestAPI without having to write a lot of mapping code.

Can Gson automate the process ?

I just came across this regarding Jackson.

[bevans2000]

Yes JSONView is interesting but we have an object model using composite objects, e.g. a Person has a PhysicalCondition object. It bad practice to expose this internal representation in an external API. So what I think we good practice suggests we have a dedicated interface layer.
This layer would be simple POJOs (or DTOs depending on your terminology) that use Lombok to reduce writing code. This would allow to choice which model properties are passed as JSON properties. Also it's possible to collapse the object model without compromising the readability of the parent class. For example, some properties of a PhysicalCondition could be top-level properties in the Person JSON representation.
Secondly if we have explicit DTOs then these can be automatically documented in a Swagger interface.
Our life is slightly easier because the direction date is always server -> client do deserialising is not such a problem which is always harder.
I'm going to build a prototype back-end that can provide data for the pilot UI. The pilot UI already has code to load data from a remote service.
Eventually, I'm keen that it could use OAuth2 such that existing users of Google or GitHub could register very easily. This would allow us to put certain end users in charge of Settlements or Persons.
Nevertheless, there's a big gap between the current code base and getting a web based interface.

[bevans2000]

This is the pattern I was considering might be best suited for us https://www.baeldung.com/entity-to-and-from-dto-for-a-java-spring-application

[bevans2000]

@mokun Right, I've been playing over the weekend and have a basic Proof of Concept. https://github.com/bevans2000/mars-sim-rest-pilot
There is a readme to explain how it works but essentially there is a Spring Boot RestAPI server and a ReactJS client. I've used a could of code annotation packages that vastly reduce the code that would have to be written; basically we would have define the DTOs and that all with a controller per type.

[mokun]

@mokun Right, I've been playing over the weekend and have a basic Proof of Concept. https://github.com/bevans2000/mars-sim-rest-pilot There is a readme to explain how it works but essentially there is a Spring Boot RestAPI server and a ReactJS client. I've used a could of code annotation packages that vastly reduce the code that would have to be written; basically we would have define the DTOs and that all with a controller per type.

Is there a way to make it both runnable in AWS and a local machine

[bevans2000]

Once the Docker image is created then you can host it in many places including AWS. Running it locally is via the mvn call.
It's possible to run the client in npm locally and connect to a remote API endpoint by changing the proxy property.