1 ASSIGNMENT 2 CSE3CWA REPOSITORY: HTTPS://GITHUB.COM/CSE5006/ASSIGNMENT-2 2 TABLE OF CONTENTS Overview................................................................................................................................................................. 3 Plagiarism ........................................................................................................................................................... 3 Due Date............................................................................................................................................................. 3 Submission Details.............................................................................................................................................. 3 Demo Implementa?on........................................................................................................................................ 3 Objec?ves........................................................................................................................................................... 3 Ge?ng Started.................................................................................................................................................... 3 Task 1 Backend API (50 Marks) ............................................................................................................................ 7 Specifica?ons...................................................................................................................................................... 7 Task 2 Frontend Interface (50 Marks) .................................................................................................................. 8 Task 2.1 (15 Marks)............................................................................................................................................. 8 Specifica?ons.................................................................................................................................................. 8 Task 2.2 (25 Marks)............................................................................................................................................. 8 Specifica?ons.................................................................................................................................................. 8 Task 2.3 (10 Marks)............................................................................................................................................. 9 3 OVERVIEW PLAGIARISM This is assignment must be completed individually, not in groups. You are welcome to discuss problems with fellow students, but the work that you submit must be your own. Don't try to plagiarise, it's extremely obvious and will only serve to get you into trouble. That's not any fun for you or for us. DUE DATE This assignment is due on LMS. Penal?es are applied to late assignments (accepted up to 5 days a?er the due date only). See the departmental Student Handbook for details. SUBMISSION DETAILS Create a short video explaining on how you tackle each task and demonstrate how to run your program. You can use Zoom to record your demo. Zip up everything (video and your project) in your project directory into one file Submit your zipped file via LMS Your final submission must run in a clean virtual machine a?er invoking docker compose up, as this is the environment that we will be using to mark your assignment. DEMO IMPLEMENTATION I will show the demo again in the next lecture to help you understand about what an implementa?on of Contactor might look like. OBJECTIVES To combine what youve learnt in labs into a complete web applica?on To provide you with a reference web applica?on for future projects GETTING STARTED There is a template for the assignment project available for you on GitHub at htps://github.com/CSE5006/assignment-2. Clone and fork the repository and use it as a star?ng point for your assignment. Be sure commit and push regularly to avoid losing any of your work as you develop. Make sure you fork the repository as a private so other people cannot see your work. GETTING STARTED In this assignment, you will create a simple web applica?on that consists of frontend and backend (API and DB) to keep and maintain all of your contacts. The architecture of the applica?on is shown below. 4 Backend DB Sequelize API Frontend The applica?on has the following func?onali?es: Add new a contact name Add new phone numbers List all contact names and phone numbers Remove a phone number from a contact Remove a contact name and all of the phone numbers Display the sta?s?cs of the data The applica?on is created in a docker container with microservices configura?on. The example of fully working applica?on is shown below. To add a new contact, you could put your name in the name component and click Create Contact 5 To add a new contact phone number, you could click the name and provide the contact type and the phone number. To delete a phone number, click the Delete buton on a phone number row. 6 To delete a contact name, click the Delete buton on a name block. To show the sta?s?c, click the Show Stats link (CSE5006 Only) There is a template for the assignment project available for you on GitHub at htps://github.com/CSE5006/assignment-2. Clone and fork the repository and use it as a star?ng point for your assignment. Be sure commit and push regularly to avoid losing any of your work as you develop. Make sure you fork the repository as a private so other people cannot see your work. 7 TASK 1 MICROSERVICES (10 MARKS) Provide the connec?ons among all of the microservices SPECIFICATIONS The project has several microservices that are connected to each other. These microservices are NGINX, Frontend, Backend and Database. The microservices architecture of the applica?on is shown below: NGINX Frontend Backend DB Port 80 Update the docker-compose.yml to provide the connec?ons as shown in the microservice architecture TASK 2 BACKEND API (40 MARKS) Create the backend database and REST API for the Contactor applica?on. SPECIFICATIONS The database shall have two tables, one for contacts called Contacts and one for phone numbers called Phones. You can test these endpoints using HTTPie Records from the Contactor table shall contain the fields id (number, Primary Key), name (string) Records from the Phones table shall contain the fields id (number, Primary Key), name (string), number (string), and contactId (number, Foreign Key) Foreign keys shall follow the camel-case naming conven?on (eg a foreign key to the Contacts table would be called contactId). Specify the foreign key name explicitly in associa?ons, as in Lab 07 (there we did foreignKey: 'postId'). Each phone number shall belong to one contact, but a single contact can have many phone numbers. Two Sequelize models shall be defined Contact and Phone. These models shall have the correct associa?ons. The backend shall expose the following REST API: Port 5000 8 HTTP Action Descrip?on GET /contacts Returns a list of all contacts (does not include phone numbers). This endpoint has been created for you already. GET /contacts/:contactId/phones Returns a list of all phone numbers for a par?cular contact. POST /contacts Creates a new contact using the posted data. Returns the new contact. GET /contacts/:contactId Returns a single contact by ID. DELETE /contacts/:contactId Deletes a single contact by ID. All of the contacts phone numbers shall be deleted also. Returns an empty object, {}. PUT /contacts/:contactId Updates the atributes of a par?cular contact. Returns the updated contact. This needs to work even though it will not be used by the frontend. POST /contacts/:contactId/phones Creates a new phone number using the posted data. Returns the new note. GET /contact/:contactId/phones/:phoneId Returns a single phone number by ID. DELETE /contact/:contactId/phones/:phoneId Deletes a single phone number by ID. Returns an empty object, {}. PUT /contact/:contactId/phones/:phoneId Updates the atributes of a par?cular phone number. Returns the updated phone number. This needs to work even though it will not be used by the frontend. TASK 3 FRONTEND INTERFACE (40 MARKS) TASK 3.1 Create a read-only web interface for the Contactor applica?on which displays contacts and phone numbers. SPECIFICATIONS There shall be a view which lists the names of all the contacts. Clicking on a contact shall display a list of all of the phone numbers within that contact. TASK 3.2 Allow users to create and delete phone numbers and contacts via the web interface. SPECIFICATIONS Users shall be able to create and delete phone numbers and contacts. Modifica?ons to contacts and phone numbers shall be persisted in the backend database via the REST API. Therefore changes should survive a page refresh. You do not need to implement the ability to edit contacts or phone numbers, only to create and delete them 9 TASK 3.3 Make the interface prety and nice to use. The Internet is a great place to find inspira?on for styles and small snippets of CSS which you can incorporate into your design. It is acceptable for you to use CSS libraries such as Tailwind if you like. It is not acceptable to use component libraries such as Chakra-ui. TASK 4 PRESENTATION VIDEO (10 MARKS) TASK 4.1 Create a 5-minute (maximum) presenta?on video that explains how you solved/addressed the tasks and demonstrates how the complete project runs. SPECIFICATIONS Your video should not be longer than 5 minutes. Use Zoom to record your video in mp4 format. Make sure you show your face when recording the video. Make sure you explain how to address the challenges in each tasks, including your program flow. Demonstrate how to run the project and how all tasks have been covered. Compressed the video together with your project folder.

Attachments:

CSE3CWA--Asse....pdf

Assignment-2-....pdf

Week-8---Inte....pdf

Week-7---REST....pdf