An online-shop or e-commerce website is a complex web-based system that includes many functionalities. In order to design such a complex system. it is essential to think think abstractly to simplify the system we want to create and to break down the system into smaller modules.
Abstraction
An online shop is an abstraction, in other words a simplified model of a real life supermarket.
To define an abstraction, you need to consider which details your system will include and which details will be removed from your system to simplify it.
| Online Shop Abstraction | |
| Details to keep | Details to remove |
| The ability to browse through different categories The ability to pick an item and view its full description and price The ability to add an item to your shopping basket The ability to proceed to checkout The ability to enter your card details and proceed to payment |
The physical layout of the supermarket The building aspect, colour of the walls, width of the aisles, type of floor, etc. The physical dimensions of your trolley or shopping basket The ability to pick up an item and manipulate it. The ability to pay in cash The need for the cashier to scan every item of your shopping trolley The presence of other customers in the shop |
There are many reasons why we would want to simplify our model:
- A simplified model will be easier to code
- You will be able to complete the project in a shorter timeframe
- The system will not require too much processing power to run smoothly
- The system will be adapted to the input and output devices available
- The system will be easier to use
Once you have defined the scope of your abstraction (the details that your system will include) the next step is to break down this system into many sub-modules that can be tackled one at a time. This is what we call decomposition.
Decomposition
Decomposition consists of breaking down a complex system into smaller sub-systems / modules.
The benefits of decomposition is to:
- Break down a complex system into smaller, more achievable sub-tasks
- Organise your time and resources more effectively, especially when working as a team. Different team members can work on different sub-tasks.
- Identify opportunities where you can re-use existing modules that you may already have implemented within other projects. For instance many system will require a login screen, many games will require a leaderboard. You might already have the code for these sub-modules.
Structure Diagrams
Structure diagrams are often use in computer science to help with the decomposition stage of the project. They help you break down your project into smaller sub-systems. And then for each sub-system you can break these down further into smaller modules or sub-tasks.
For instance, use the drag and drop activity below to complete the structure diagram for an online shop such as Amazon:
Structure Diagram – Online ShopOpen in New Window
LMC Simulator
Flowchart Studio
Python Syntax