SWEN-344 Client (Final) Practicum

Make sure you have completed the initial setup instructions for the Practicum.
Reminder: The gitlab project will still be named react-final-abc123, where ‘abc123’ is your student username.

All your code must go in the repo you created. Once your repo is ready, implement the code (client and server) as instructed below, using python, RESTful APIs and SQL with the provided data-set. Pay attention to the output formats specified.
The DB is initialized from the server (see server.py). Your client code (any code in tests) should not call the DB directly. Server side DB code must make proper use of SQL for full credit. Client code must properly use RESTful APIs for full credit.
You are NOT allowed to add any new APIs or modify the provided APIs as set up in server.py. You need to use the provided API and intelligently use parameters within the existing definition in server.py
Your implementation of the apis will be in vendo*.py files. Read the comments for each method and implement as specified. (You are allowed to add helper files. You are NOT allowed to modify the API or DB structure)
No assertions are required for this exam (beyond what is already implemented).
Client code does not know about PRIMARY or FOREIGN keys, so don’t hard code that information into the client. The server has to deal with those details.
You are required to use Nodejs, Flask and React with Reactstrap components to implement this exam.
Push all code to your repo per instructions.

Overview

You are implementing a network enabled vending machine. The display presents the user with the items stocked in the vending machine.
Use a Reactstrap Card for the display of each item.

  • The information displayed is:
    • The name of the item
    • The quantity (that is the number in parentheses after the name)
    • The price
    • The button to select to get an item
      There is a keypad which presents a button for each item in the vending machine.
      When you press a button, a single item corresponding to the button pressed is dispensed, and the available quantity goes down by one.
      This is a mini vending machine, so it only holds a total of 8 items (A-H), in 2 rows of 4 items per row.

Tech Stack:

Since this is full-stack, you will need to implement client code (Node/ React/ JS) and server code (python), same as the course projects.

Requirements:

Part 1: (Tag as ‘part-1’ in gitlab)

  1. Display all products:
    • Retrieve and display the products in the vending machine. There are more items in the item table than fit in the machine, which can hold only 2 rows of four items. The vending_machine table tells you what is actually in the vending machine display and tells you which row and position in the vending machine the item is located. The display must match that positioning. Implement the API needed to retrieve and display the machine contents. Your display should be (very) similar to this:
      ../vending1.png
    • You will use the get endpoint for vend
    • The colour scheme for the items display is based on the quantity
      • The display is color coded such that:
      • Qty >=7: Green
      • Qty >= 4 and < 7: Yellow
      • Qty <= 3: Grey
    • The .css file supplied can help you with the colourization (modify as needed)
    • Use css selectors to help you with colourization. Review vend.css. There are placeholders for the colors - you will need to add the correct attributes to match the colors described in the requirements (and shown in the picture).
      Note that proper colorization requires background and font colour to be correctly paired for readability
    • Make sure currency is correctly formatted.
  2. Make the buttons work:
    • You are already provided a convenient display for the keys used to select a product for purchase.
    • Finish implementing the feature so that when a button/ key is pressed, the quantity of the selected item goes down by 1. Quantity cannot go negative.
      • You have to change the quantity in the DB, and then retrieve the new data to update the display including the colourization (as previously described)

Part 2: (tag as ‘part-2’ in gitlab)

  • When you implement Part-2, make sure all your Part-1 features still work! Details will be released at the final exam

  1. Add a new item and display it:

    • Add a button labeled ‘Add item’. When clicked it will:
      • Display a popup modal with fields to enter values for all item fields (see picture and DB schema)
      • The modal will have a ‘Save’ and ‘Cancel’ button. Save will error check the values and if correct, will apply the changes (closing the modal). Cancel will discard the data entered, and close the dialog.
        • If there is an empty or incorrect value in a field, display a message at the bottom of the modal in red-text saying ‘Please provide correct values, or cancel’. In practice, there would be more user indicators, but you don’t have do provide more error handling than that for the exam.
      • You can also select a ‘Button’ (A-H) which corresponds to the display location (see the other pictures)
      • Whichever ‘Button’ A-H is selected, once saved, it will replace the prior item in the vending machine display To make this work, you will need to:
        • Add a new item
        • Replace the entry in the the vending_machine table to make the new item have a display location
        • and then refresh the display from the database.
          Remember that POST should be used to create new data and PUT to modify data.
      • You will mimic the controls in the display shown below.
        • Pay special note to the fact that the quanity is a numeric field, and has up/ down buttons to change the values.
          • Numbers cannot be less than 1 when clicking the buttons.
          • Numbers cannot be greater than 20 when clicking the buttons.
        • The ‘A-H’ button selection is a drop-down list
          The display should look like this (follow the sequence of the images)
    With Add Item Modal with controls Result of Saving new Item
    ../vending2.png
    ../vending3.png
    ../vending4.png

    NOTE: As always, you must use proper Full-Stack application principles. Remember you must make any DB updates, and then reload the UI using the new DB data.

Grading:

  • 100 points total
  • Correct setup, CI works, all instructions followed: 10 pts
  • Requirement 1: 25 pts
  • Requirement 2: 20 pts
  • Requirement 3: 45 pts
  • Full credit will require:
    • Correct functional behaviour and UI behaviour. This includes matching the display behaviour and layout
    • Correct implementation of both the client code and the server code
    • Proper use of JS, React, Reactstrap components and REST & SQL
  • Deductions:
    • Student repo not visible to instructor (added as reporter) by end of class 12/9 (-10pts)