Fully-developed Web App

Assessment 2: Fully-developed Web App - Details

Weighting: 50% (Pair or Individual)

NB: you should not start this assignment until after you have submitted assignment 1

Overview - Fully-developed Web App

Due: Sunday 27/10/24 @ 11:59:00PM (Week 5)

Task description:

This assessment task requires you to develop a web application implementation for your e-commerce store. You may work individually or in a pair. You are free to reuse the code from your previous individual assignment, make any changes, or develop the pages again so long as they meet the previous assignment brief. Ideally, you may choose to reuse some of your previous work as it will save you time.

In the table below are several documents that will assist you to understand the task requirements and the criteria that will be used to assess your performance.

Overview:

Assignment Objectives

On completion of this assignment you should have gained skills in the following areas:

1. Ability to design a web application using the Model-View-Controller (MVC) software design pattern

2. Learn some of the foundations of HTML and CSS and the Bootstrap framework to create responsive websites

3. Demonstrate skills at developing a prototype e-commerce web application.

This must be your own work: Use of services such as Wix or Squarespace etc are not allowed. Pre-made Bootstrap template websites such as Bootswatch are also not allowed - we will know if you used a template! However, taking code snippets from getbootstrap.com or w3schools is encouraged, as is your own significant customisation of any elements you use from those sources.

Unit Learning Outcomes assessed:

1. Demonstrate approaches for producing Web application design in support of requirements, at a sufficient level of detail for use in the software development process. (CLO1)

2. Undertake tasks to specify Web forms and databases, using frameworks, which will be used when developing the program code of Web applications. (CLO2)

3. Undertake tasks for developing Web application integrating the components of the Web application that includes forms, controller modules and database. (CLO3)

Estimated time for completion	Weighting	Group or Individual	How I will be assessed
30 hours	50% of final grade	Individual or Pairs	Using a 7-Point grading scale

What you need to do

1. Read the Criterion-Referenced Assessment Rubric.

2. Read the assignment objectives, assignment description, late submission penalties, and background.

3. Follow the step-by-step guide of the assignment.

Assignment Description

In this assignment, you will develop a web application implementation of your ecommerce store that implements the following technologies:

· HTML & Bootstrap, CSS

· Python & Flask

· Jinja2 HTML Templates

· Flask-WTForms

· Flask-SQLAlchemy.

NB: You must not use any form. of existing template for your store. You may use code snippets from sites like w3schools.com but not any kind of site template. You may however use/extend/customise the class example/s as you see fit.

Project Deliverable

You are free to reuse the code from your previous individual assignment, to make any changes, or to develop the pages again so long as they meet the previous assignment brief. Ideally, you may choose to reuse some of your previous work as it will save you time. Your solution must demonstrate the following:

The following pages, with content loaded dynamically from the database:

· Landing page to search/filter for products e.g., by category. You might use a subpage to display specific categories or search results

· Item detail page (to view additional details of a specific item) with ability to add to shopping basket

· Shopping Basket page showing appropriate information about the added products and at the minimum, the ability to view/delete items

· Checkout page (enter details, order completion).

Your database should contain the following three tables, at a minimum:

· Products

· Orders

· OrderDetails.

You must develop code that is well written, with reasonable code comments. Your solution must implement the technology taught in the unit such as HTML, Bootstrap, and Python Flask (with the required modules 代 寫Fully-developed Web App flask_wtf, email_validator, flask_bootstrap, flask_sqlalchemy) only. JavaScript. is not used in this unit and should not be used as it may distract ou from completing work that will get you marks. The code you submit will be tested and run, so there should be no unexpected dependencies.

Video demonstration

Create a short video presentation and upload it somewhere (preferably your QUT OneDrive). This video is intended to simulate a milestone (the minimum viable product) being demonstrated to a client. Include a shareable link to your uploaded video in the declaration document.

· Be succinct (between 3 and 5 minutes. Marks will be deducted for going over time.)

· Introduce the purpose of your ecommerce store

· Demonstrate the functionality of the working site.

NB: this presentation is a functional showcase and not a technical description of how things work (nor is it a sales pitch!)

What to submit

Submission

One zip file (filename: studentid_557_A2.zip)

that contains the following items:

Part 1 - Your solution, the project directory for your code
Part 2 - Mandatory Declaration Sheet containing a) a link to a video presentation that demonstrates your application and b) provides the details of you or your team if working in a pair.

Place Part 2 into the project directory for your code (i.e. Part 1). Zip up this single folder and submit using the submission link made available on Canvas

Submit one zip file (filename: studentid_557_A2). If working in a pair, then only one person should submit on behalf of the pair (and show both student IDs in the filename and ensure both students names and IDs are clearly shown on the Part 2 Mandatory Declaration Sheet).
The zip file should contain:

PART 1: Your Solution

· The main Project Directory containing relevant directories, Python files, HTML files and any static files your web application uses.

· Include the SQLite database file that you used for testing. It must already be populated with some products (do not expect your markers will create or populate your database for you)

· Please do not include any venv directory (Python virtual environment). Ensure that you check that your file size is reasonable before uploading

· Example directory structure:

o zip

§ instance

§ store_db.sqlite (created when running the create_db function)

§ mystoreapp (you should change this to suit your store)

§ templates

§ html files

§ static

§ img

§ img files

§ style.

§ style.css

§ __init__.py

§ views.py

§ models.py

§ forms.py

§ run.py

§ pdf (link below)

PART 2:

This Mandatory Declaration SheetLinks to an external site. (placed within the Project Directory, i.e., your Part 1)

· Include a link to a video presentation that demonstrates your application.

· Your details or, if working in a pair, the details of your team and a short review of the team experience (who did what tasks and let us know what went well and if anything didn’t go so well).

How you will be marked

Please see the assessment rubric.

Late Submission Penalties

Consistent with QUT commitment to real world learning, managing priorities, competing commitments and time are essential skills for effective learning and professional life. Assessment work submitted after the due date will be marked only with an approved extension (MOPP E/6.8.2). Assessment work submitted after the due date without an approved extension or, where an extension has been granted, after the extended due date, will not be marked and a grade of 1 or 0% will be awarded against the assessment item.

Rubric

Criteria	High Distinction	Distinction	Credit	Pass	Fail
How each specific ecommerce page will be marked (80%)	Fully functional ecommerce page without errors. All requirements are fully met. A submission of this standard succeeds in the fundamental requirements but also looks convincing to a potential customer. The solution is thorough, comprehensive, robust and well tested.	Mostly fully functional ecommerce page with very minor or no errors. Most requirements are fully met. A submission of this standard succeeds in the fundamental requirements but also looks nearly convincing to a potential customer. The solution is thorough and robust.	Ecommerce page is partly incomplete or has some minor errors present. Most of the requirements have been met and the page is functional with a few errors present (i.e. the site still works and the errors only mildly impair the usage of the solution). The solution is good and relatively convincing to a potential customer.	Ecommerce page is incomplete and has some moderate errors present. Most of the requirements have been met and the page is mostly functional with an acceptable number of errors present (i.e. the site still essentially works and the errors only moderately impair the usage of the solution). The solution is adequate and somewhat convincing to a potential customer.	Key parts of the ecommerce page are missing. Requirements misunderstood or ignored, does not meet requirements. A submission of this standard would not function (or partially function) as a minimal viable solution. There would be presence of serious errors that would impair the solution’s basic operation.
Landing Page (to search for products and optionally add to basket)	20–17 marks.	16–15 marks.	14–13 marks.	12–10 marks.	9 or fewer marks.
Item detail page (add to basket)	20–17 marks.	16–15 marks.	14–13 marks.	12–10 marks.	9 or fewer marks.
Shopping basket (to view/delete items)	20–17 marks.	16–15 marks.	14–13 marks.	12–10 marks.	9 or fewer marks.
Checkout page	20–17 marks.	16–15 marks.	14–13 marks.	12–10 marks.	9 or fewer marks.
How your YouTube presentation will be marked. (20%)	Demonstrates an exemplary ability in introducing the purpose of the ecommerce store and its related concepts. Provides an insightful and comprehensive walkthrough of the ecommerce store, demonstrating the functionality of the site, and emphasising the most highly relevant features. The delivery is professional. 20–17 marks.	Demonstrates a very good ability in introducing the purpose of the ecommerce store and its related concepts. Provides a comprehensive walkthrough of the ecommerce store, demonstrating the functionality of the site and emphasising most of the relevant features. The delivery is professional. 16–15 marks.	Demonstrates a good ability in introducing the purpose of the ecommerce store and its related concepts. Provides a useful walkthrough of the ecommerce store, demonstrating the functionality of the site and emphasising where required. The delivery is professional. 14–13 marks.	Demonstrates an adequate ability in introducing the purpose of the ecommerce store and its related concepts. Provides a somewhat useful walkthrough of the ecommerce store, demonstrating the functionality of the site, mostly emphasising where required. The delivery is mostly professional. 12–10 marks.	Introduction lacks adequate structure and ecommerce store and related concepts not adequately explained or contains major omissions or deficiencies. Walkthrough is unhelpful and the delivery is not professional. 9 or fewer marks.