Programming Question

Prompt

You now
have a working full stack application that serves the customer! Now it’s time to develop an SPA for your client that will produce rich functionality for administering the client database. You will create an add form for trips. In testing, if you add a new trip you should see it in the database, in the trip cards, and on the Express Public website.

Follow the instructions in the SPA section of the CS 465 Full Stack Guide and address the following:

Develop the Angular application structure using TypeScript, HTML, and CSS. Specifically, you will need to:

Develop the Trip list component.

Refactor the Trip logic into a Trip card component.

Develop the Trip data service to interact with the API on the Express backend.

Retrieve and display a list of trips. Select one trip and edit it by updating its values and saving. Code the behaviors for:

POST

GET

DELETE

PUT

Add appropriate CRUD methods to the API backend.

Test Angular in the browser and verify the RESTful API endpoints using Postman.

*Submit the updated travlr.zip zipped file folder. In addition to the zipped file folder, you must submit the following screenshots as images to Brightspace: (1) the Card Listing showing an additional trip which you added, (2) the Edit screen, and (3) the Update screen.

In additon to developing SPA for your client, you mustwrite a journal entry that summarizes the architecture, functionality, and testing of a SPA for the client-side administration of the web-server. Reflect on the single-page application (SPA) you built following the Full Stack Guide so that it renders a client-based web page using Bootstrap CSS, and admin features built in Angular with reusable UI components and logic. Specifically, summarize the following in your journal entry:

• How is the Angular project structure different from that of the Express HTML customer-facing page?
• What are some advantages and disadvantages of the SPA functionality? What additional functionality is provided by a SPA compared to a simple web application interaction?
• What is the process of testing to make sure the SPA is working with the API to GET and PUT data in the database? What are some errors you ran into or what are some errors you could expect to run into?
• What questions do you still have that will help you with SPA in future builds?