Reference no: EM133692743
Rapid Web Development
Assessment Task - Task overview
Assignment Objectives
Ability to design a web application using the Model-view-controller (MVC) architecture pattern
Learn some of the foundations of HTML and CSS and the Bootstrap framework to create responsive websites
Demonstrate skills at developing a prototype ecommerce 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:
Describe what you want to design and develop (e.g., a store for books, cars, rooms, watches etc.)
Design the details of your web application (user stories, UML conceptual design, UML database design)
Submit a static HTML prototype for your ecommerce store.
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:
View products/services
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.
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.
Order products/services
A user who wants to buy the product/service, should be able to add the product to a basket.
A user should be able to view the contents of their basket at any time, remove items.
A user should be able to complete the order by providing details such as their name and shipping address.
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
Database Design: Design the data model using UML identifying classes, associations, multiplicity. You could use lucid chart 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:
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.
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:
title of the item
an image of the item
description of the item
price of the item,
and other item specific information of your choice.
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 or make use of any Bootstrap or web templating sites (e.g., Bootswatch, Wix, Squarespace etc). Further, the Bootstrap version that you use must be Bootstrap 4.6 via the official CDN as given on getbootstrap.com. Bootstrap 5 was released a couple of years ago but is still not totally ubiquitous so we will avoid that for now.
All the work submitted should be your own. The use of generative AI such as ChatGPT is not allowed in this unit.
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.
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 any custom 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.