---
# System prepended metadata

title: '**PA: Product and Presentation**'

---

## **pa**

# **PA: Product and Presentation**

*Digital Prime* has its focus on our client experience aiming to provide to our costumers the best prices in a fast, reliable and elegant platform.

## **A9: Product**

Our project is a shop that intends to provide to our costumers a fast ,reliable and secure way of buying new electronic products , in a world where the technology demand is constantly growing in our lives.

Our intent is to generate a platform where users  can search for their intended items, ask questions about them, buy them and have them rapidly delivered to their homes. Once the item is purchased, the user is able to review it so that other users know the buyers' opinions and if the product is worth it or not.

In order to have a reliable service we implemented a secure authentication system. All products have a brief characteristics description, images of the item and price. All product can be filtered and search by name, price, category. To achieve a complete transparency about the product quality users will have the opportunity to review and rate all the products they previously acquired.

Users are separated in 3 main groups:
* The System Administrators have the role of managing all store products; 
* Guests can only search and add product to their shopping cart;
* Authenticated users can do the whole process including the checkout, reviews and wish list.

### **1. Installation**

To install the final product from the git repository just do the following commands:
```bash
docker-compose up
php artisan db:seed
php artisan serve
docker run -it -p 8000:80 -e DB_DATABASE="lbaw2173" -e DB_USERNAME="lbaw2173" -e DB_PASSWORD="HL426277" lbaw2173/lbaw2173
```
### **2. Usage**

**URL to the product:**
The final product is available at:

http://lbaw2173.lbaw-prod.fe.up.pt

### **2.1. Administration Credentials**

> Administration URL: URL


| Username        | Email           | Password  |
| ------------- |:-------------:| -----:|
| admin    | admin@email.com | password |

### **2.2. User Credentials**


| Type | Username        | Email           | Password  |
|---| ------------- |:-------------:| -----:|
| buyer | user | user@email.com   | password |

### **3. Application Help**

In order to help users navigate we provide contextual help where they might need it. For example:
 - Bread Crumbs in the checkout process
 - Tips on forms (validation)


### **4. Input Validation**

For Validation we used 3 different techniques :
 - HTML5 form validation
 - Client side javascript validation
 - Server side php validate

### **5. Check Accessibility and Usability**
[Accessibility ](https://git.fe.up.pt/lbaw/lbaw2021/lbaw2173/-/blob/final/docs/acessibilidade.pdf)

[Usability mobile](https://git.fe.up.pt/lbaw/lbaw2021/lbaw2173/-/blob/final/docs/usabilidade_mobile.pdf)

[Usability Web](https://git.fe.up.pt/lbaw/lbaw2021/lbaw2173/-/blob/final/docs/usabilidade_pc.pdf)



### **6. HTML & CSS Validation**
[Validation Main Page](https://git.fe.up.pt/lbaw/lbaw2021/lbaw2173/-/blob/final/docs/validation_main.pdf)

[Validation Product Page](https://git.fe.up.pt/lbaw/lbaw2021/lbaw2173/-/blob/final/docs/validation_product.pdf)



### **7. Revisions to the Project**

* **EBD:** We needed to change the database schema and consequently the database population since we figured out that, for example, by creating a new realtion between classes, our implementation could be easier.
*  **EAP:** Some work that was supposed to be done in this artifact was done later due to the lack of time and difficulty of the whole team in installing Laravel. 

### **8. Implementation Details**

### **8.1. Libraries Used**

We used the following libraries and frameworks:
* **Bootstrap:** open source toolkit for developing with HTML, CSS and JS.
* **Laravel:** PHP Framework for Web Artisans.

### **8.2 User Stories**

The most important user stories implemented, in order of implementation, are the following:

| US Identifier | Name | Module | Priority | Team Members | State |
|---------------|------|--------|----------|--------------|-------|
| US01       | See all items  | M02 | high |  Emanuel   | 100%|
| US02       | See the Desired Item|  M02 |high     | Emanuel | 100% |
| US03       | Add Items to the Shopping cart | M03 | high| Muriel | 100% |
| US04       | See the Items in the Shopping cart| M03 |high | Muriel| 100% |
| US21       | Checkout cart | M03  | high     | Muriel  | 70% |
| US11       | Sign-in |  M01   | high     | Iohan | 100% |
| US12       | Sign-up | M01 | high     | Iohan             | 100% |
| US22       | Add credit card information | M01 | high | D. Filipe | 50% |
| US23       | Add address information | M01   | high     | D. Filipe | 50% |
| US24       | Ask a question | M04 | high     | Emanuel | 100%
| US31       | Review an item | M04 | high    | Emanuel |100%|
| US41       | Create products  | M02 | high     | Iohan | 100% |
| US51       | Create admin accounts | M01 | high | D. Filipe | 100%|
| US05       | See the Review Section  | M04 | medium   | Muriel | 100% | 
| US06       | See the Q&A Section  | M04 |  medium   | D. Filipe  | 100% |
| US26       | Log Out | M01 | medium   |Emanuel | 100% |
| US42       | Answer questions | M04 | medium   | Muriel | 100%|
| US43       | Edit products  | M02 | medium |Iohan| 100%|                  | | |
| US44       | Delete product  | M02 | medium | Emanuel | 100%|
| US13       | Sign-up using external API | M01 | low/optional | - | 0% |
| US14       | Sign-in using external API | M01 | low/optional   | _ | 0% |
| US25 | Add items to favorite list | M02 | low/optional   |  _ | 0% |
| US27       | Edit profile | M01 | low/optional    | Muriel | 60% |
| US28       | Edit created content  | M04 | low/optional  | _ | 0% |
| US52       | Delete admin accounts | M01 | low/optional    | Emanuel | 100%|
| US53       | Edit admin accounts | M01   | low/optional    | Iohan | 100%|
| US55       | Block user account   | M01 | low/optional  | D. Filipe | 100%|


---

## **A10: Presentation**

> This artefact (A10 - Product Presentation) must be submitted as a PDF on Moodle.

### **1. Product presentation**

Our project consists of an online shop where authenticated users can buy electronics like computers. In our website, there's the possibility to see parts of it as an unauthenticated user. Although, the experience is better to authenticated users, so they can register, login, edit details about them like address and credit card information and logout. 
Once the user is logged in, he can see the products and its characteristics, ask questions about them, review them and add them to their shopping cart or remove them from there. 
As an administrator, there's the possibility to answer questions made by users about the products, add, eliminate or edit products, eliminate users or make them administrator (they can also make an administrator a user). Most of that can be done in the backoffice menu.


> URL to the product: http://lbaw2173.lbaw-prod.fe.up.pt

### **2. Video presentation**

> Screenshot of the video plus the link to the lbaw20gg.mp4 file

> Upload the lbaw20gg.mp4 file to the video uploads' Google folderThe video must not exceed 2 minutes.

### **4. Overall Group Self-Evaluation**

All group members have worked in all the components.

The individual contribution of each member to the LBAW project, and considering all artefacts, is expressed in the following list:

- Diogo Filipe, B
- Emanuel Trigo, B
- Iohan Sardinha, B
- Muriel Pinho, B

---

## **Revision history**

Changes made to the first submission:

No Major changes were done to the first submission.

Some of the User stories had their priority changed while we were developing the website.

---

GROUP2173, 03/06/2021

- Diogo Filipe, up201806280@fe.up.pt (Editor)
- Emanuel Trigo, up201605389@fe.up.pt
- Iohan Sardinha, up201801011@fe.up.pt
- Muriel Pinho, up201700132@fe.up.pt (Editor)