Scribd
Upload
66 views13 pages

Soal LKS2022

The document describes requirements for developing a mobile application for SMK-IT Mart. It includes details on login/registration, displaying products from API data, allowing users to order products, and creating a website using the same API data. Key application functions are logging in, viewing products, ordering products, and integrating with backend APIs to retrieve and send data. The mobile app and website will need to be developed following provided user interface designs and using the API endpoints listed in the given Postman collection.

Uploaded by

King D
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
66 views13 pages

Soal LKS2022

The document describes requirements for developing a mobile application for SMK-IT Mart. It includes details on login/registration, displaying products from API data, allowing users to order products, and creating a website using the same API data. Key application functions are logging in, viewing products, ordering products, and integrating with backend APIs to retrieve and send data. The mobile app and website will need to be developed following provided user interface designs and using the API endpoints listed in the given Postman collection.

Uploaded by

King D
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

SOAL

BIDANG LOMBA

IT-SOFTWARE APPLICATION FOR BUSINESS


SMK-IT Mart Desktop Application

SMK-IT Mark is a proposed self-service desktop application to help customer in order


and buy process. The application has four main key features such as: Manage Profile,
Shopping and Transaction History . As a well-known C# developer, you are hired to develop
this application.
Analyst team also has two additional notes for you. First, all delete process is a soft-
delete one. It means for delete process, instead of deleting the record, you only need to fill
in deleted_at field. Second, every time a record is updated, make sure to record the time in
last_updated_at field.
The designer also prepared the user interface design for you to use. Please try to stick
into the given design. Some changes are allowed under the condition that you maintain all
input output process. Some image files also given for you to be used in the application.
Below, you will find detail of the application workflows and functions.

1. Login Form
This form will be used by the customer to log in to the application. Customers need to
fill in combination of their phone number or email and PIN number. Make sure their
credentials exist in the database. Please provide all necessary validation.

SMK-IT MART
Login

Figure 1. Login Form


2. Main Form
✔ After successful login, customer will be redirected to this form.
✔ Show customer profile picture and name. If the customer does not have a profile
picture set, show default_profile_picture image instead.
✔ Show live datetime information.
✔ There will be four main menus available as shown in Figure 2. Use images provided
for each corresponding menu.
✔ Cart Image Button will redirect customer to Cart Form.
✔ Logout Button will log out customer from the application.

Figure 2. Main Form


3. Profile Form
✔ This form shows current customer profile.
✔ Customer can click Edit Button once to enable changing the corresponding data.
Provide proper validation and error message for each field if any. Clicking Edit
Button once again will save the changes (if any) to the database.
✔ PIN must be six digit numeric.
✔ Customer can use Back Button to return to Main Form.
✔ Uploading a new image will immediately change the profile picture.

Figure 3. Profile Form


4. Shop Form
✔ This form shows products sold by SMK-IT Mark.
✔ Customer can use search bar to search product name that contains the keyword
they typed in.
✔ Customer can also fill in price range filter to narrow their search result by price.
✔ There is a breadcrumb feature that display subsequent category of the product.
Clicking the sub-category will display all product belong to that sub-category.
✔ Display the product data (image, name, price, stock). If the product does not have
image, use not_available image instead.
✔ There is an Add to Cart Button beside of each product. Clicking this button will show
Add to Cart Form.

Figure 4. Shop Form


5. Add to Cart Form
✔ This form will be shown if customer:
o Click Add to Cart Button in one of the product from Shop Form.
o Click Edit Button in one of the product in the Cart Form.
✔ Shows detail of the product (name, image, price, and description)
✔ Customer can use (+) and (-) Button to increase or decrease the number of product
to buy. Make sure to validate that the product is available for purchase.
✔ When Button Submit is clicked, update the cart data.

Figure 5. Add to Cart Form


6. Cart Form
✔ This form shows all product data (image, name, price, and quantity) added by
customer from Shop Form. If the product does not have image, use not_available
image instead. There is also Edit Button and Delete Button for each item in the cart.
✔ When Edit Button is clicked, Add to Cart Form will be shown.
✔ When Delete Button is clicked, a confirmation dialog will be shown. If the customer
confirms yes, then the product will be removed from the cart.
✔ Payment Type data must be taken from database.
✔ If Pay Using Available Point is chosen, then all available point will be used to deduct
amount to pay after the tax addition. Else, disable available point field.
✔ If customer chose to not use the point for payment, he/she will earn 20% of sub-
total value as points earned rounded to nearest integer.
✔ If the customer clicks Submit Button, Payment Notification Form will be shown.
✔ Customer can use Back Button to return to Main Page.
Figure 6. Cart Form

7. Payment Notification Form


✔ This form is shown when customer click Submit Button in Cart Form.
✔ Payment Type is based on the chosen one in Cart Form.
✔ Payment Code is a string of 12 randomly generated alphanumeric characters.
✔ After customer click Ok Button, cart data will be removed, and the application will
be redirected to Main Form.
Figure 7. Payment Notification Form
8. Transaction History
✔ This form shows history transaction data (date, total payment, point gained or
deducted, and payment code) ever made by the customer.
✔ Selecting one specific transaction will shows all product data (image, price, quantity)
purchased on those transaction. If the product does not have image, use
not_available image instead.
✔ Customer can use Back Button to return to Main Page.

Figure 8. Transaction History Form


Web and Mobile Application
A. Test Project Overview In this Test Project, you are required to develop a mobile
application for SMK-IT Mart.

B. Application Function / Tasks / Activities :

1. Android User opens the application and submit login, if the user does not have a
user yet, user should register first. In this step application should post/get
information to API provider of user authentication. interface for user in mobile and
web will follow user interface model as mentioned in Desktop Application module

2. After login the application has been successful and will show product of SMK-IT
Mart.

3. The application will read the API response (JSON format) and show the
information. Collection of API could get from following link :
https://www.getpostman.com/collections/b67a2ed31bd83346388c
How to add or import the collection from the link

1. After login in postman click workspace to create a new workspace

2. Input workspace name as following figure

3. after workspace has been created, click collection and click import

4. in import tab, click link, then copy the link as given in technical document and paste in the field
and click continue
5. after finish all API collection will appear

4. User can order product in SMKIT-Mart

5. Make website using framework laravel / codeigniter / etc, using API collection as
source data

-- Good Luck and Do Your Best! --

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy