用 NodeJS 实现一个虚拟化管理器的Web服务。
Requirement
You have been hired by a client to develop a new web service, “Neverwrote”,
for managing virtual notes “Never say ‘I never wrote that down’ ever again!”.
Having heard of the latest and greatest in web technologies, your client
specifies that the backend shall run on a Node.js server, and that the
frontend shall be built with React. “That’s strange, those are exactly the
same things that I learnt in CSE2WDC” you think to yourself as you boot up
your computer and get ready to start work.
Submission Details
- Zip up everything in your project directory into one file.
- Submit your zipped file via LMS
Your final submission must run in a clean virtual machine after invoking
docker-compose up, as this is the environment that we will be using to mark
your assignment.
Demo Implementation
To help you understand about what an implementationof Neverwrote might look
like, I will upload the video in the assignment page. Be sensible and don’t
put up personal information or inappropriate content in your database.
Objectives
- To combine what you’ve learnt in labs into a complete web application
- To provide you with a reference web application for future projects
Getting started
There is a template for the assignment project available for you on LMS.
Download this zip file and use it asa starting point for your assignment. Be
sure to commit and push regularly to avoid losing any of your work as you
develop.
You will find more specific information about the project structure in the
README.md file.
Part 1 - Backend API
You will find “Lab 07 - Backend” to be particularly useful as a reference for
this part.
Task 1.1
Create a REST interface for the Neverwrote backend database. The database has
two tables, one called Notebooks and one called Notes.
- Records from the Notebooks table contain the attribute title (string).
- Records from the Notes table contain the attributes title (string) and content (text).
- All tables have a primary key column called id.
- Records from the Notes table are associated with Notebooks in a many-to-one configuration using the foreign key notebookId.
Specifications
- The backend shall expose the following REST API:
HTTP action Description
GET /notebooks | Returns a list of all notebooks (does not include notes).
This endpoint has been created for you already.
GET /notebooks/:notebookId/notes | Returns a list of all notes for a
particular notebook.
POST /notebooks | Creates a new notebook using the posted data. Returns the
new notebook.
GET /notebooks/:notebookId | Returns a single notebook by ID.
DELETE /notebooks/:notebookId | Deletes a single notebook by ID. All of the
notebook’s notes shall be deleted also. Returns an empty object, {}.
PUT /notebooks/:notebookId | Updates the attributes of a particular
notebook. Returns the updated notebook.
GET /notes | Returns a list of all notes.
POST /notes | Creates a new note using the posted data. The notebookId
attribute shall specify which notebook it belongs to. Returns the new note.
GET /notes/:noteId | Returns a single note by ID.
DELETE /notes/:noteId | Deletes a single note by ID. Returns an empty
object, {}.
PUT /notes/:noteId | Updates the attributes of a particular note. Returns
the updated note.
- The tests shall pass. This is a very helpful tool, as you can verify that you are on track as you complete this part of the assignment. You can run the tests with:
docker-compose run --rm api jasmine- You shall not modify the tests in the spec/ directory
- The API shall access the database (and accept values from the HTTP request where appropriate). The REST API shall not use hard-coded values for notes or notebooks.
Part 2 - Frontend interface
You will find “Lab 08 - Frontend” to be particularly useful as a reference for
this part. I have also prepared a stripped-back React/Redux code example which
you may find useful to look at for ideas.
Don’t forget that you need to have Gulp running (docker-compose run –rm
frontend gulp) for your frontend code to be compiled as you work.
Task 2.1
Create a read-only web interface for the Neverwrote application which displays
notebooks and notes from the database. The code template provided for the
assignment is currently set up to display notebooks from hardcoded dummy data
only.
Specifications
- There shall be a view which lists the titles of all of the notebooks.
- Clicking on a notebook shall display a list of all of the titles of notes within that notebook.
- Clicking on a note shall show the full content of that note.
Task 2.2
Allow users to create and delete notes and notebooks via the web interface.
Specifications
- Users shall be able to create and delete notes and notebooks.
- The state of the application shall be maintained in a Redux store.
- All changes to the Redux store shall be made via dispatched actions.
- Modifications to notebooks and notes shall be persisted in the backend database via the REST API. Therefore changes should survive a page refresh.
- You shall use the MarkdownEditor component provided for you as the way to write note content. This is not much different from using a normal text field.
- You shall use two Redux reducers: one for the notebooks and one for the notes.
Task 2.3
Make the user interface pretty and nice to use. Feel free to use the Internet
for inspiration.
Bootstrap v3.3.6 is already included as a dependency of the project, and
defines a bunch of nicelooking CSS classes which you can use out-of-the-box.
Check out the documentation at http://bootstrapdocs.com/v3.3.6/docs/
to see what’s available (in
particular the CSS and Components pages).
Part 3 - Bonus task
These bonus tasks are an opportunity for you to earn back marks which you may
lose in the other parts of the assignment.
Implement a search system for the frontend interface.
- 10 marks will be awarded for search functionality within a notebook (filtering based on title and content). This can be purely client-side (in the browser).
- The rest of the marks will be awarded for a separate ability to search across all notes and notebooks based on title and content. This shall be implemented via a new API endpoint (so the searching happens in the backend).
