| ID | As A/An | I want to... | So I can... |
|---|---|---|---|
| Viewing and Navigation | |||
| 1 | Shopper | View list of products | Find something to purchase |
| 2 | Shopper | View details of product | See Price, Description, Image, and Sizes i/a |
| 3 | Shopper | See list of deals, clearance items, etc | Take advantage of deals and save money |
| 4 | Shopper | See my cart's total at any time | Avoid spending too much |
| Registration and User Accounts | |||
| 5 | Reg User | Register for an account | Save my delivery details and order history |
| 6 | Reg User | Quickly login/out | Access my account |
| 7 | Reg User | Request a password reset | receive and email to reset my password in case I forget it |
| 8 | Reg User | Receive an email confirming my registration | Verify my account was registered successfully |
| 9 | Reg User | Access my user profile | View my order history, manage my personal details |
| Sorting and Searching | |||
| 10 | Shopper | Sort the list of available products | See the products in a list sorted by price, rating, quantity available etc |
| 11 | Shopper | Sort a category of products | See the products in a category sorted by name, price, rating, etc |
| 12 | Shopper | Sort multiple categories simultaneously | Find the best rated or best priced across broad categories such as 'books' or 'honey' |
| 13 | Shopper | Search for product | Find a specific item I wish to purchase |
| 14 | Shopper | View a list of search results | See if the product I want is available to purchase |
| Purchasing and Checkout | |||
| 15 | Shopper | Easily select the size and quantity whilst purchasing an item | Ensure I don't accidentally select the wrong product, quantity, or size |
| 16 | Shopper | View items in my basket | See what items are in my basket at a glance to ensure the items are correct |
| 17 | Shopper | Adjust the quantity of individual items in my bag | Easily adjust the amount of an item I intended to purchase (including removing) |
| 18 | Shopper | Easily enter my payment information | Checkout quickly, without hassle |
| 19 | Shopper | Feel my payment and personal information is secure | Provide the needed payment and personal information, and feel it is handled safely |
| 20 | Shopper | View confirmation of order before completing purchase | Verify I haven't made any mistakes |
| 21 | Shopper | Receive confirmation email after checking out | To keep my own record of the purchase |
| Admin and Store Management | |||
| 22 | Site Owner | Add a product | Add new products to my store |
| 23 | Site Owner | Edit/update a product | Change the price, description, images etc of a product |
| 24 | Site Owner | Delete a product | Remove items that aren't for sale anymore |
To run a frontend (HTML, CSS, Javascript only) application in Gitpod, in the terminal, type:
python3 -m http.server
A blue button should appear to click: Make Public,
Another blue button should appear to click: Open Browser.
To run a backend Python file, type python3 app.py, if your Python file is named app.py of course.
A blue button should appear to click: Make Public,
Another blue button should appear to click: Open Browser.
In Gitpod you have superuser security privileges by default. Therefore you do not need to use the sudo (superuser do) command in the bash terminal in any of the backend lessons.
We continually tweak and adjust this template to help give you the best experience. Here are the updates since the original video was made:
April 16 2020: The template now automatically installs MySQL instead of relying on the Gitpod MySQL image. The message about a Python linter not being installed has been dealt with, and the set-up files are now hidden in the Gitpod file explorer.
April 13 2020: Added the Prettier code beautifier extension instead of the code formatter built-in to Gitpod.
February 2020: The initialisation files now do not auto-delete. They will remain in your project. You can safely ignore them. They just make sure that your workspace is configured correctly each time you open it. It will also prevent the Gitpod configuration popup from appearing.
December 2019: Added Eventyret's Bootstrap 4 extension. Type !bscdn in a HTML file to add the Bootstrap boilerplate. Check out the README.md file at the official repo for more options.
Happy coding!