代做Peer-Review、代写GUI/CRUD留学生、代做Java设计、代写Java

日期：2018-12-02 10:25

Example data and server

I’ve created a public repository on GitHub for the server side of the Assignment/Peer-Review project: APRServer. This is where you will get files and (eventually) the server to test with your GUI. Important: you will not be modifying this repository. You can clone or fork it but you will not modify it.

GUI Components

We will not “reinvent the wheel” but start with the React bootstrap component set. As they say on their page:

You must use the above components for your work. Also, use react-bootstrap-table2 which is the updated version of the table component.

Weekly Questions

Question 1

We are going to start with the GUI for the teacher to create, read, update, and delete (CRUD) assignments for students. To start with some tasks to show before we start talking to the API server use the file tasks1.json which can be found in the APRServer repository in the testHelpers directory.

(a)

Just to get started, use some combination of react-bootstrap components show a list of the tasks (not instruction information since that is too long) from the tasks1.json file. Put this into some kind of React component and show the essential code and a screen shot here.

(b)

We need to construct a component to show the task instructions which are in Markdown in a nice HTML format (i.e. rendered). We’ll want to see both the markdown form and the nice rendered HTML form. Show essential code and a screen shot using a task with non-trivial Markdown.

(c)

Now we want the user to be able to select a task from some sort of list/menu/whatever and show the instructions and other information in Markdown and nice format. This is the “Read” of CRUD. Describe your component organization and show a screen shot(s) of your work.

(d)

Add a mechanism to delete a selected task. Remember use state updates in React and the particulars for dealing with arrays. This is the “Delete” in CRUD.

(e)

Add a mechanism to edit and update a selected task. No fancy editing is required. Only a textbox to modify the Markdown, use nice components for the other fields (due date and status). They cannot edit the “task-name”. This is the “Update” in CRUD. Be careful when updating React state. In this case you are updating an entry in an array, so it is easiest to make a copy of the original state array and modify it then call setState() with the modified copy. Do not directly change the state array. Describe your component structure and show screen shot(s) of your work.

(f)

Add a mechanism to create a new task and add it to the task list. Note the similarities to part (e) and reuse/extend components as you see fit. Describe your component structure and show screen shot(s) of your work.

Now we need to get the GUI from Question 1 working with the actual server.

Do not put APRServer-master in the same directory as your GUI work! Run npm install and then run npm test to run the Mocha tests. Take a screen shot of the test results and show it here.

In the main directory of this repository (on your computer) you can run the server via the command line with node prserver.js. You can change the IP address and the port by editing this file.

(g)

Now we need to set up proxying by the React web development server we are using so that API requests get forwarded to the server in part (a) while we still get our React updates from the React web development server. See the instructions for proxying API requests in development in the Create React App documentation.

Show the line that you added to the package.json file in your GUI project to enable this.

(h)

With the server and development environment from parts (a) and (b) update your the project from Question 1 so that it gets the list of tasks from the server and not the JSON file. We will use the JavaScript DOM fetch() interface for this. Get all the basic display of tasks working here. Explain the context (where did you put the fetch call in relation to your component.)

(i)

Add functionality to update (PUT) a task on the server. Show the method with the fetch call (not the entire class) and explain its context here, i.e., how does it get invoked.

(j)

Add functionality to create (POST) a new task on the server. Show the method with the fetch call (not the entire class) and explain its context here, i.e., how does it get invoked?

(k)

Add functionality to delete (DELETE) a task on the server. Make sure that your GUI is in sync with the server after the deletion. Show the method with the fetch call (not the entire class) and explain its context here, i.e., how does it get invoked?