SWEN-344: Final Exam Setup - Client (Vending)

You will create a new project in gitlab (in your own account, not in any other group) named as follows:
Project name: react-final-abc123 (where abc123 is your username)

• Add your instructor and CA as ‘reporter’.
• Clone the repo to your local machine
  • Download the provided starter code and copy into your project.
    • Starter Code
    • Extract all the files from the final-setup zip file and place directly into react-final-abc123.
  • There update the db.yml file with your password (in the server/api folder).
  • You should have all your python setup still intact from client-4, so you should not need to re-run the requirements.txt file.
• Navigate to the student-react-vend folder, and (on the command line), run npm install. Note that you DO NOT have to do create-react-app, since I have created the skeleton app for you!
  • This will take a minute or two, but should install the necessary Nodejs files and packages.
  • Make sure you also run the following commands:
    • npm config set legacy-peer-deps true and
    • npm install ajv@latest ajv-keywords@latest
• Once the install is finished, run npm start and make sure the default React page loads (note that this is just the default/ error handling page, since the DB server is not yet running!) It should look like this:
  

  

• Commit and push to your repo, and make sure the CI also runs successfully!
• Now start the DB server. In your root folder start the server process with py server/server.py
• Refresh the webpage, and you should now see:
  

  

• Of course, the APIs are not yet implemented, so you are not seeing the intended display – that will be your task!
• Read the information below to understand more about the data-set.
• You must have all the setup/preliminary work done before the actual practicum. You will use this setup to do the actual practicum work during the exam time.
• Details for the full practicum will be provided on the day of the exam.

Overview of data-set and project setup:

This is a data-set of snacks in a mini-vending machine.
Study the tables, and the data set, as well as the server side setup.

• The DB is initialized from the server side (look in server.py)
• You will be asked to develop routes and endpoints which will be specified in the exam document.
• The signatures for the endpoints are provided to you in server.py
• You are not allowed to add or modify the end-point definitions
• You will be using Nodejs and Flask (same as with the client projects).
  • You will need to run the Flask server: py src/server.py or python3 src/server.py
• Write your server implementation in src/api/*.py files.
  • You are not allowed to change the API signature. So carefully implement the correct verbs and parameters consistent with the API signature to handle the requirements
• You are responsible for setting up the correct directory structure, which is similar to what you used for the REST project.
• A file to create and populate the data (data.sql) is provided. Do not modify this file!
  • You should run the app before you make any modifications. They will tell you if everything is configured correctly.

Overview of client side files:

• You will have a functional skeleton React/ Reactstrap project inside student-react-vend. The main files are:
  • index.js: This basically renders Page
  • Page.js: This has the skeleton for the main page. It makes an initial API call (from componentDidMount).
    • There is only a small amount of code provided to give you some starting points for making an API call and handling the results. Review this code and modify as needed for the practicum – but it must stay as a class component.
  • Keys.js: This has a functional implementation to render the buttons for making vending machine selections and communicating back to the parent (Page). You should not need to change this (but if you really need to … small changes only; no rewrites). Review the code for examples on iterators and events/ callbacks.
  • vend.css: Basic styles to help you lay out the page and match the screenshots/ requirements.
  • You may add other files as needed for implementing the requirements for the practicum.

Exam logistics:

• The practicum has two parts

  Part-1: Take-home

  • After completing the setup, implement the part-1 requirements (see below)
    • Due pushed/ tagged in gitlab (tag your submission as part-1) before the in-person final exam

  Part-2: In-class

  • You will be given instructions on more features (client, server, APIs) to implement for the remainder of the exam
    • You will receive these additional instructions at exam-time in class.

Take home/ Part-1 requirements scenarios:

• Implement as specified on this page: take home exam

In class/ Part-2 requirements scenarios:

• In-class practicum: The page will be available in myCourses at the time of the practicum