= Апликативен дизајн =

== Кориснички сценарија

=== Најава на корисник ===

На централна позиција во горниот дел од прозорецот на апликацијата се наоѓа опцијата за Најава. Корисниците може да одберат да се најават во системот и да продолжат со користење на апликацијата. Важно да се напомене е дека најважните сценарија на апликацијата функционираат за сите видови на корисници (најавени или ненајавени). Доколку корисникот одлучи да се најави, за него ќе биде овозможен пристап до дополнителни сценарија излистани во секцијата Дополнителни Сценарија.

//

Базата на апликацијата не ги чува корисничките сметки со нивните лозинки за регистираните корисници. Оваа функционалност е овозможенa со помош на менаџерот за корисници и автентикација Okta Developer.

Пример екрани:

//
[[Image(login.png)]]

//
[[Image(login_2.png)]]


== Најважни сценарија ==

=== Листа на продукти според категорија ===
Кога корисник ќе избере категорија на продукт (без разлика дали е најавен или ненајавен корисник) од менито со категории му се прикажува листа на продукти од соодветната категорија.
//

Query: 

//

{{{
#!python

    SELECT * FROM product AS p
    WHERE p.category_id = "id"
}}}
//

Пример екрани:
//

[[Image(list_of_products.png)]]

//

[[Image(list_of_products_logged_in_user.png)]]


=== Пребарување на продукти според клучен збор ===
//

Во горниот дел од прозорецот е овозможена Search функционалност со која корисникот може да пребарува продукти според клучен збор или целото име на продуктот кој го бара.
//

Query: 

//

{{{
#!python

    SELECT * FROM product AS p
    WHERE p.name LIKE CONCAT('%', :name, '%')
}}}
//

Пример екрани:
//

[[Image(search_1.png)]]
//

[[Image(search_2.png)]]

=== Детални информации за продукт ===

Со клик на името или сликата на продуктот апликацијата го навигира корисникот до страница со детални информации за избраниот продукт: името на продуктот, описот на продуктот, сликата на продуктот, цената. Доколку корисникот се одлучи да го нарача продуктот може да го додаде во својата купувачка кошничка. 
//

Query: 

//

{{{
#!python

    SELECT * FROM product AS p
    WHERE p.id = id
}}}
//

Пример екрани:
//

[[Image(product_details.png)]]
//

[[Image(product_details_2.png)]]

Со избор на "Add to cart" корисникот го додава посакуваниот продукт во динамички креирана купувачка кошничка. Купувачката кошничка во горниот десен агол од екранот се ажурира доколку корисникот додаде уште производи во неа. Доколку корисникот сака да провери кои продукти ги сместил во кошничката со клик на симболот за кошничка во горниот десен агол аплкацијата го навигира корисникот кон страница со детали за кошничката.
//

Корисникот може да ja зголеми или да ја намали количината на парчиња за одреден продукт или пак доколку се предомисли да го отстрани од кошничката. Ако корисникот ја менува количината на продуктите во кошничката, симболот за кошничка во горниот десен агол се ажурира. Соодветно, се ажурира и секцијата во којашто има информации за Total Quantity и Total Price. 
//

Откако корисникот прави инспекција дали во кошничката ги има посакуваните производи и коректната количина од нив, може да продолжи кон следниот чекор во правење на нарачката со клик на копчето Purchase.


//

Пример екрани:
//

[[Image(add_to_cart.png)]]
//

[[Image(add_to_cart_quantity.png)]]
//

[[Image(add_to_cart_checkout.png)]]

//

Доколку купувачката кошничка е празна, соодветно на екранот пишува дека е празна.

[[Image(shopping_cart_empty.png)]]

=== Правење на нарачка ===

Откако корисникот одлучил кои производи сака да ги нарача, го дели еден чекор до правење на нарачката. За таа цел корисникот задолжително мора да ги внесе своите лични податоци како име, презиме и електронска сметка; адреса за испорака со улица, град, држава и поштенски код, адресата поврзана со методот на плаќање, како и податоците за платежната картичка. Освен тоа што полињата за правење на нарачка се задолжителни, корисникот мора да ги внесе во правилниот формат, пример мора да биде запазен форматот за валидна електронска сметка. 

//
Пример екрани:
//

[[Image(order_1.png)]]
//

[[Image(order_2.png)]]
//

[[Image(order_3.png)]]
//

[[Image(order_4.png)]]

//
[[Image(checkout_1.png)]]

//


Queries: 
//

{{{
#!python

      INSERT INTO customer (first_name, last_name, email) VALUES ('Bisera', 'Peshevska', 'pesevskab1997@gmail.com');
      
}}}
//

//

{{{
#!python


      INSERT INTO address (street, city, country, zip_code) VALUES ('Floris Burgwal', 'Rotterdam', 'Netherlands', '7233');

      INSERT INTO address (street, city, country, zip_code) VALUES ('Egejska Makedonija', 'Kumanovo', 'Macedonia', '1300');
      
}}}

//

{{{
#!python

      INSERT INTO orders (order_tracking_number, total_price, total_quantity, date_created, last_updated, customer_id, billing_address_id, shipping_address_id) VALUES ('e769b2d6-8d7a-4574-8c39-45f0ced7a374', 82.4, 3, 2021-08-02 22:26:17, 2021-08-02 22:26:17, 7, 1, 2);

      
}}}
//

{{{
#!python

      INSERT INTO order_item (image_url, quantity, unit_price, product_id) VALUES ('assets/images/products/vitamins/VITAMINS-1002.png', 2, 29.9, 3);

      INSERT INTO order_item (image_url, quantity, unit_price, product_id) VALUES ('assets/images/products/vitamins/VITAMINS-1010.png', 1, 22.6, 11);

      
}}}
//
//


Во долниот дел на прозорецот корисникот може уште еднаш да ги прегледа деталите за нарачката и доколку е се во ред, со клик на копчето Purchase ја пласира нарачката во системот 

Пример екрани:
//

[[Image(checkout_2.png)]]
//

[[Image(checkout_3.png)]]
//

== Дополнителни сценарија ==

=== Историја на нарачки ===

Доколку корисникот пласира нарачка во системот додека е најавен со корисничка сметка и истата ја внесе во полето email додека ја прави нарачката, тогаш корисникот може да одбере да види историја на своите нарачки направени со таа email адреса со клик на Orders, така што за секоја нарачка во системот направена додека е логиран може да ја види нејзината единствена шифра, вкупна цена и датум кога е креирана.

// 

Query: 

//

{{{
#!python

      SELECT * FROM orders
      LEFT JOIN customer
      ON orders.customerId = customer.id
      WHERE customer.email = "email"
}}}
//


Пример екран:

//

[[Image(order_history.png)]]

=== Специјален екран за најавени корисници ===

За најавени корисници апликацијата овозможува пристап до секцијата Members каде во иднина може да се креира содржина наменета специјално за најавени корисници. 
//

Пример екран:

//
[[Image(member.png)]]