IFN557: Rapid Web Development

Assessment Task 1

Assessment Task 1

Task overview

Assessment name:	Design and Front End
Task description:	In this assignment, you will design and implement a basic ecommerce store prototype for your chosen product or service. There is no specific topic provided to you so you must select the topic and scope your own design accordingly. So, be creative!
Learning outcomes measured:	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)
Due:	Week 3 (9 October 2020 by 23.59)
Length:	Part 1 the written report would typically only be a few pages in length.
Weighting:	50 %
Individual/Group:	Individual
How will I be assessed:	7-point grading scale using a rubric

Task details

What you need to do:	Read the Criterion-Referenced Assessment Rubric. Read the assignment objectives, assignment description, late submission penalties, and background. Follow the step-by-step guide of the assignment.
Presentation requirements:	This assessment task must be formatted in the following way: 12 point Times New Roman font Single linespacing Use APA referencing (if required).
Resources needed to complete task:	IFN557 Blackboard site QUT Cite|Write APA guide.

Submission Information

What you need to submit:	One single zip file (filename: studentid_557_Ass1.pdf) that contains the following items: Part 1 – Written Report as detailed below Part 2 – Front-end prototype Submit using the submission link made available on Blackboard
Moderation:	All staff who are assessing your work meet to discuss and compare their judgements before marks or grades are finalised.

Academic Integrity As a student of the QUT academic community, you are asked to work to uphold the principles of academic integrity during your course of study. QUT sets expectations and responsibilities of students, more specifically it states that students “adopt an ethical approach to academic work and assessment in accordance with this policy and the Student Code of Conduct. E/2.1 (MOPP C/5.3 Academic Integrity). At university, students are expected to demonstrate their own understanding and thinking using the ideas provided by ‘others’ to support and inform their work, always making due acknowledgement to the source. While we encourage peer learning, it is not appropriate to share assignments with other students unless your assessment piece has been stated as being a group assignment. If you do share your assignment with another student, and they copy part of or all of your assignment for their submission, this is considered collusion and you may also be reported for academic misconduct. If you are unsure and need further information you can find this at: http://www.mopp.qut.edu.au/C/C_05_03.jsp#C_05_03.03.mdoc.

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) architecture 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

Assignment Description

In this assignment, you will design and implement a basic ecommerce store prototype for your chosen product or service. There is no specific topic provided to you so you must select the topic and scope your own design accordingly. So, be creative!

An ecommerce store has many elements; However, due to the constraints of this introductory unit your prototype will only focus on the creation of a simple site where users can browse and choose products to purchase. Your site will not support user authentication or payments which would obviously be a crucial part of a real system. The objective of this assignment is to allow you to demonstrate your ability to design a web application using the approaches and frameworks that we have (or will) introduce. The web application must support the list of features described in the next section so please keep these in mind when you come up with your design.

This is an individual assignment. In this assignment you will: (i) describe what you want to design and develop (e.g. a store for books, cars, rooms, watches etc.), (ii) design the details of your web application (user stories, UML conceptual design, UML database design), (iii) Submit a static HTML Web prototype for your ecommerce store.

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.

Background

Web app development is complex. In fact, it involves so many different tasks that it is highly unlikely that a single person can carry out each of them on a professional level. Ordinarily a web development project is made up of a team of specialists who are experts in their own field. So, is this unit attempting to achieve the impossible? No. Whilst it is inevitable that you will not gain the skills to develop a professional application by yourself, you will learn enough to understand each of the key areas involved and be able to produce a small prototype application. This understanding across all the relevant areas will be extremely useful to you, especially if working in a multidisciplinary team in industry.

The first assessment in IFN557 involves you creating a prototype of an ecommerce store using the design techniques we introduce and utilizing the Bootstrap Framework.

Requirements

The following features are required in the ecommerce store:

1. View products / services
   1. Your ecommerce store should list the set of products or services that are currently available for sale. The products/services can be grouped into different categories. A user should be able to view all products/services belonging to a group. In an ecommerce store for books, a buyer should be able to find all `fiction’ books by choosing the group.
   2. A user should be able to select a product/service and view the details of it. The details should be determined based on what the product/service is. For a book, it would be the author, ISBN, category and so on.
2. Order products / services
   1. A user who wants to buy the product/service, should be able to add the product to a basket.
   2. A user should be able to view the contents of their basket at any time, remove items.
   3. A user should be able to complete the order by providing details such as their name and shipping address.

Submission

Submit one single zip file (filename: studentid_557_Ass1.pdf) that contains the following items:

• Part 1 – Written Report as detailed below
• Part 2 – Front-end prototype

Submit using the submission link made available on Blackboard

PART 1: A written report containing the following.

Description: A paragraph (5-6 lines) about the ecommerce store. The topic of the ecommerce store, the important details of the product/service that can be bought.

User stories: Prepare user stories for the requirements. A user story can detail one or more requirements. A user story preferably should be short (no more than 3-4 sentences) and list the acceptance criteria. Ensure that each user story is numbered so that the marker can easily reference it.

Conceptual Model: With the user story as a reference, identify the objects, their behaviour, relationships and multiplicity. Please use UML class diagram to represent the concepts, their attributes and the behaviour. You can use any open source UML editor for this purpose (e.g. https://www.lucidchart.com/)

Database Design: Design the data model using UML identifying classes, associations, multiplicity. You could use lucid chart (https://www.lucidchart.com/) for the UML model

PART 2: You should also submit a zip file containing your Front-end prototype 

Front-end Prototype: Develop the front-end pages. The HTML you develop are not functional pages: they are pages with static content at this stage. Use HTML and Bootstrap components to give structure and style to the content of the e-commerce store. You do not need to use any programming language to implement this prototype (e.g. Javascript, Python, etc – note that HTML is a mark-up language). A subset of the requirements will be demonstrated in this prototype:

1. Landing / home page
   The landing/home page is the main page of the web application. From this page, the user is guided to the other pages (e.g. using a navigation bar) to perform the different functions supported by the ecommerce store. The page should have the user interface elements to allow the user to search for products and to add to them to a shopping basket.
2. Item details page
   A page that presents the details of a single item as an example, i.e. what a user would see when they select an item to view the details. One example item is sufficient. The page should have:

1. title of the item
2. an image of the item
3. description of the item
4. price of the item,
5. and other item specific information of your choice.
6. The page should allow the user to add the item to their basket.

NB:

• The design that you create should be your own i.e. you are not to use any existing template. Further, the Bootstrap version that you use must be the very latest version available via the official CDN as given on getbootstrap.com.
• This version of the prototype does not need to support the basket or order completion page.
• The navigation between pages needs to be intuitive and is left to the student to decide how an end user browses to other pages.
• Bootstrap components should be used. Standard components include NavBar, Jumbotron, Cards, Alerts, Modal etc… For a list of components, please visit: https://getbootstrap.com/docs/4.3/components.
• Your submission should contain the following folder structure (as discussed in the lectures)
  • All HTML files in one directory.
  • A separate folder for css (if you are using CSS), and an img folder with all the images used in your HTML pages.
• Markers will evaluate you by opening the HTML files in Google Chrome. Please make sure you have taken care of all the necessary dependencies.

Unit Code | Unit Title Assessment Task 1 Rubric

Criteria	High Distinction	Distinction	Credit	Pass	Fail
Describing the solution. The Ability to describe the ecommerce store, conveying the important details, including the product or service being provided and the user stories based upon the requirements. Weighting: 20%	Excellent description of the e-commerce store. Complete set of user stories addressing all requirements. Each user story has all elements and are understandable to everyone clearly expressing the user needs and benefits. Acceptance criteria is extremely well described.	Very good description of the e-commerce store. Complete set of user stories addressing all major requirements. Each user story has all elements and are understandable to everyone clearly expressing the user needs and benefits. Acceptance criteria is very well described.	Good description of the e-commerce store. Complete set of user stories addressing most key requirements. User story might miss some elements but still articulate user needs and benefits. Acceptance criteria is well described.	Adequate description of the e-commerce store. User stories addressing key requirements but some may be missing. User story might not be fully complete or understandable to everyone or missing some of the user needs and benefits. Acceptance criteria is sufficiently described.	Inadequate description of the e-commerce store. User stories miss key requirements or are not complete or understandable. User needs and benefits need more exploration and acceptance criteria insufficient for the site.
Developing a conceptual model. The ability to represent the objects and their behaviour, attributes, relationships and multiplicity extracted from the user stories using a UML class diagram. Weighting: 15%	All classes have been detailed with complete set of attributes. Behaviours of classes are complete. Relationships between all classes are correct and multiplicity has been specified.	All classes have been detailed with complete set of attributes. Some behaviours or attributes are missing. Relationships, multiplicity are correctly specified.	All classes have been detailed. Some behaviours or attributes are missing. Relationships, multiplicity is specified.	All classes identified. Attributes and behaviours are incorrectly specified. Relationships are missing or multiplicity is incorrect.	Some classes are missing or incorrect. Attributes and behaviours are incorrectly specified. Relationships are missing or multiplicity is incorrect.
Developing a database model. Ability to represent the data model including classes, associations, multiplicity and represent using UML. Weighting: 15%	All classes have been detailed with complete set of attributes. Primary and Foreign key are correctly specified. Associations between all classes are correct and multiplicity has been specified.	All classes have been detailed. Some minor attributes are missing. Primary key and Foreign key are correctly specified. Associations, multiplicity are correctly specified.	All classes have been detailed. Some attributes are missing. Primary key and Foreign key are correctly specified. Associations, multiplicity are correctly specified.	Some classes are missing. Some Primary key, Foreign Key and attributes or associations are missing. Multiplicity has been specified.	Some classes are missing or incorrect. Attributes and Keys are incorrectly specified. Associations are missing and multiplicity is incorrect.
Prototyping the front end. The ability to demonstrate professional structure and style through a convincing static HTML prototype of an e-commerce store. Weighting: 50%	The site is a convincing, sophisticated depiction of the e-commerce store. The site has extremely appropriate structure and styling which is extremely consistent throughout. The content is extremely relevant and presented with a sophisticated layout. Bootstrap has been used creatively with significant customisation through CSS. The layout responds extremely well to different viewport sizes. Navigation is intuitive.	The site is a quite convincing depiction of the e-commerce store. The site has very appropriate structure and styling which is very consistent throughout. The content is extremely relevant and presented intuitively. Bootstrap has been used in a very appropriate way with some customisation through CSS. The layout responds well to different viewport sizes. Navigation is intuitive.	The site is a good depiction of the e-commerce store. The site has appropriate structure and styling which is consistent throughout. The content is relevant and presented appropriately. Bootstrap has been used to make the site look good. The layout responds reasonably well to different viewport sizes. Navigation is appropriate.	The site adequately depicts the e-commerce store. The site has appropriate structure and styling which is mostly consistent throughout. The content is mostly relevant but the presentation could be improved. Bootstrap has been used but alternative attributes and properties would improve things. The layout responds somewhat to different viewport sizes. Navigation works.	The site is not an adequate depiction of the e-commerce store. The site structure and styling needs substantial improvement. The content is not always relevant and the presentation is lacking. Bootstrap has not been used correctly. The layout does not respond to different viewport sizes. Navigation problems.

Document Revision

Date	Version #	Changes
9/9/20	1.0	First draft. Still subject to minor changes up to the end of week 1.
14/9/20	1.1	Minor updates. Emphasized that one item example is sufficient on item detail page. Minor rewording of landing page description and assessment criteria.

The post IFN557: Rapid Web Development appeared first on My Assignment Online.