Project Report 408

Ceng 408 Project Report

Kloti Mobile Shopping Application Powered by Augmented Reality

Prepared By

• Laçin Boz - 201811014

• Oğuzhan Tarhan - 201711062

• Cemre Özmen - 201711053

Advisor

Dr.Murat Saran

Date

January 5, 2022

                                                  LIST OF FIGURES

• Figure 1: Product Functions-Register
• Figure 2: Product Functions-Login
• Figure 3: Product Functions-Shopping Cart
• Figure 4: Product Functions-Edit Profile
• Figure 5: Product Functions-Catalog
• Figure 6: Product Functions-Employee Login
• Figure 7: Product Functions-Order Accept
• Figure 8: Product Functions-Google Maps
• Figure 9: Product Functions-Employee Edit Profile
• Figure 10: Product Functions-Activity Status
• Figure 11: Product Functions-Previous Orders
• Figure 12: Customer Use Case
• Figure 13: Employee Use Case
• Figure 14: Class Diagram
• Figure 15: Sign Up Activity Diagram
• Figure 16: Login Activity Diagram
• Figure 17: Profile Management Activity Diagram
• Figure 18: Product Selection Activity Diagram
• Figure 19: Give An Order Activity Diagram
• Figure 20: Show Status Activity Diagram
• Figure 21: Approval View Activity Diagram
• Figure 22: Profile Management Activity Diagram
• Figure 23: Splash Screen UI
• Figure 24: Home UI
• Figure 25: Unknown User Hamburger Menu UI
• Figure 26: Registered User Hamburger Menu UI
• Figure 27: Login UI
• Figure 28: Register UI
• Figure 29: Catalog For Clothe Type UI
• Figure 30: Catalog For Model UI
• Figure 31: Examination UI
• Figure 32: Shopping Cart UI
• Figure 33: Payment UI
• Figure 34: AR UI
• Figure 35: Costumer Edit Profile UI
• Figure 36: Employee Home UI
• Figure 37: Previous Orders UI
• Figure 38: Employee Edit Profile UI
• Figure 39: Customer Sequence Diagram
• Figure 40: Employee Sequence Diagram
• Figure 41: Employee Sequence Diagram (continued)
• Figure 42: ER Diagram
• Figure 43: No-SQL Diagram

1. INTRODUCTION

1.1 Problem Statement

Time is very important for people in today's world. Many people do not even have time to leave the house to go shopping. In addition, after the pandemic, the rate of people going out has decreased. Many e-commerce sites have been established to solve this problem. These e-commerce sites mostly offered the products of partner companies that they kept in their own warehouses or working under the brand. This event reduced the incomes of the small shopkeepers who had shops outside. Detailed explanations are made in the literature research section.Studies and similar applications on this subject have been reviewed.

1.2 Solution Statement

Kloti Mobile Shopping Application allows people to shop without leaving their homes. Kloti application reduces the shipping time to almost zero compared to other shopping applications. Motor couriers will serve to realize this. After the order is placed, these couriers go and pick up the desired product from the desired store and deliver it to the customer within the same day. In addition to these, no store will be operating under us, so that shopping can be done easily from all stores.

1.3 Contribution

The feature that distinguishes Kloti from other shopping applications is that it supports AR, that is, augmented reality. Today, most mobile applications or internet commerce sites usually only post the photo of the product. When the product comes to the user, he sees that the size and color are not as in the photo and returns it. During this period, he not only waits for his money to be returned, but also receives the product he wants in a later time. There are many applications that use AR, but most of them are developed for experimenting with furniture. Our contributions will be like this. Details of similar projects are explained in the Literature Review section.

2. LITERATURE REVIEW

2.1 Introduction :

Today, mobile applications have been developed to meet many needs of people. With Kloti, we aim to enable users to shop more efficiently. This application can show users how the product they want to buy will look on them with the help of augmented reality technology. For this, all users have to do is click on the product they want to buy, and then hold their phone towards them from the camera window that opens, so that they can see the product as if they are really on them , users will be able to make a clear decision as to whether the product suits them or not, so that users will not waste time with returns afterward. In addition, thanks to the location information of the users in the application, the product can reach their hands during the day since the delivery will be made from the store closest to the users' homes.On the other hand , users will not have to wait for the product to reach their hands to try it with the help of augmented reality , so that their shopping will be more efficient . In this project, we will use the Flutter language because Flutter is one of the most up-to-date languages ​​to develop mobile applications today and allows the application to work on both Android and IOS operating systems.

2.2 Major Ideas :

While researching studies developed with Flutter that focus on online shopping, our general impression is that there are many resources about Flutter, but few resources for applications that work with augmented reality. That's why we had a bit of a hard time searching for sources. In general, in the articles we read, we realized that there are too few applications that use flutter and augmented reality at the same time, so we wanted to deal with flutter and augmented reality separately. We have numbered the 3 main findings section below according to their subjects.

• Flutter

When we examined the articles and documents on flutter, the reason why flutter was preferred was that the developed application allows it to work simultaneously on both platforms (ios/android) without using any other coding language. Flutter has several unique features that it offers us. Flutter is an open source SDK, it allows us to develop applications fast, has a single codebase, contains many intuitive widgets and allows us to compile programs quickly[1]. Apart from these features, other reasons for using flutter is that Flutter is outstanding as it uses device OEM widgets instead of using webviews. [2] Contrary to popular belief, Flutter does not use JavaScript. We generally do the calculations using the Dart language (see 3.2). Flutter helps developers to theme their own apps. Thus, even if the developer has no knowledge of design, he can easily create a visualization for his program using the widgets provided by Flutter. Flutter draws the entire user interface by itself using the Skia graphics engine, which is also used in Chromium-based web browsers.[3]

• Dart

Dart is a code language that forms the basis of Flutter. When developing applications with Flutter, we use Widgets created using dart. This language was created by Google. The reason why Google developed this language was to replace JavaScript and make it successful.[2] Dart language is based on C language. Although it is similar to the C language, it has an important difference. Dart language allows users to use null safety. So values cannot be null unless you say they can. With robust null security, Dart can protect you from null exceptions at runtime through static code analysis. [6]

• Augmented Reality

AR is the process of blending real-world images with artificial objects or computer-generated information. It is defined as an extension of the user environment.[10] In the documents we examined, it is generally stated that the purpose of AR is to visualize an object or an abstract thing, to adapt it to the real world and to increase its intelligibility. We've come to the conclusion that AR is mostly used by marketers today. We can say that the reason why marketers use AR more is that it can show the products to the customer with a better visual. When customers use AR, most of their focus is on the product. AR enables companies to extend their elaborate in-store experiences to smartphones (Cehovin and Ruban, 2017; Swilley, 2016) by providing a more direct and engaging experience. A drop in returns is expected when a consumer offers an AR-based trial opportunity before making a purchase decision. [9] Finally, I can say that augmented reality allows users or customers to see products on their mobile phones instead of in stores, without wasting any time.

2.3 Functional Articles :

We selected the articles that will support the main idea of our literature and enable us to learn more detailed information about the subject.When we reviewed the articles in general , there were few resources for mobile applications where Flutter and augmented reality were used together . For this reason , we have entered the details of our research by selecting the articles on 2 different topics and combining them . First, we selected the articles describing the mobile applications developed with Flutter. After learning the main ideas of our research, we selected the articles describing the mobile applications created with augmented reality, which is the main subject of our research.Although the reason we chose these articles was to learn the necessary information to do our project, it was not the only reason. The main reasons for choosing these articles were to observe the experiences of people who develop mobile applications and make their applications available to customers, and to use their experiences in a way that will be useful to our project.

In the article “Application Development Using Flutter”, the origin story of Flutter and the advantages of using it are mentioned. Since Android and iOS are different platforms, the skills required to develop applications on these platforms are also different. For example, Android requires learning Java or Kotlin, while iOS requires learning Object-C or Swift. For this reason, companies such as Facebook and Google have developed two different SDKs, React Native and Flutter, that will work on both platforms.With the information we gained from this article, we decided to create our project with Flutter.The most important of these are the hot reload feature of Flutter, which allows the changed code to be loaded quickly, and the cross-platform feature of the application by making the application with Flutter.

In the article “Augmented Reality Based Smart Supermarket System with Indoor Navigation using Beacon Technology (Easy Shopping Android Mobile App)” , describes a mobile application that allows ordering grocery products remotely. According to the mobile application described in this article, the user can search for their products manually and after confirming the shopping list resulting from the products they have added, this list is sent to the courier who will make the delivery. As a result of reading this article, we decided to use Google Place API for the courier to find out the location of the customer, and to use the Google Map API for the courier to reach the customer's location and also for the customer to track the delivery.

In the article “Implementation Of An Application Using Augmented Reality Environment”, detailed information is given about the working logic of AR, its components and how it calculates the position of objects mathematically.AR adds computer-generated three-dimensional objects to the existing environment.AR consists of 3 parts with minimum requirements. These parts are the camera, screen and calculation unit.[8] In the calculation unit, the image of the current environment is taken, the position of the formed 3D object is calculated and adapted to the real world. With this article, we have learned in detail about the logic of AR and how we can use it.

In the article named “Augmented reality marketing: How mobile AR-apps can improve brands through inspiration”, the difference of VR and AR and the effect of AR on marketing are mentioned. While VR sends the user to a completely virtual world, AR increases the perception of reality in the existing world. With this article, we examined the issues that we should consider when presenting our project to the marketing world.

The article titled "Service innovation: Using augmented reality in the IKEA Place app" by Selcen Ozturkcan describes the mobile application called "IKEA Place", created by IKEA using augmented reality. Inspired by this application, which eliminates the problems of not fitting the product or not liking the fabric when purchasing a product from IKEA for the customer's home, we decided to make an application where the customer can try on the clothes they want to buy. In this way, customers would be able to do their shopping without leaving their home or trying on the clothes they want to buy.

2.4 Conclusion :

In line with the increasing online shopping demands of people with the pandemic process, we decided to develop an application that allows users to shop for the clothes they want to buy without leaving their home, without thinking about what the clothes will look like on them, and without wasting time trying on these clothes. As a result of the articles we reviewed, we realized that there are few mobile applications that use Flutter and augmented reality at the same time, and we can turn this into an advantage, so we decided to combine these two different topics in one mobile clothing application.

3. SOFTWARE REQUIREMENTS SPECIFICATION (SRS)

3.1 INTRODUCTION

The purpose of this document is to describe the shopping application called Kloti. This application aims that customers who will use the application can easily access the clothes (products) they want by minimizing the time they will spend for shopping in the place or time they want, and try these products with their cameras. This document describes the requirements of the project in detail. With SRS, how users and employees interact with the application is explained visually.

3.1.2 Scope of Project

Today, people usually want to spend their remaining time at home after returning from work or to spend time for activities. The number one reason for this is that people's time is valuable today. That's why most people are too lazy to even leave their homes to shop. In order to solve this problem, shopping applications and websites have been created. Even though these applications allow people to easily fulfill their shopping needs from wherever they are, there are still three points where they fall short.

1. Product Reaching Period to the Customer

When we buy a product from any shopping application, it is delivered to the customer after at least 2 days. This delivery time is usually seen in products purchased from another city or products purchased from abroad. In addition to the elapsed time, since the products arrive by cargo and there are dozens of products in these cargo vehicles, damages can be observed in the cargoes.

2. Product Return Process

After the products reach the customer, if the customer wants to return the product, if the return request is approved within 10-15 working days, the money is deposited in their accounts and this time is quite high today. In addition to these, you have to go to the cargo branch and deliver your cargo, which is a waste of time for the customer.

3. Product Trial Process

Since the customer cannot see how the clothes will stand on himself, the products are usually returned without trying when they reach the customer.

There are a few important points that we will use in our application to solve these problems. First of all, Kloti will take the orders to the customers from any clothing store in their province. Since motor couriers will carry out this process, the traffic problem will be solved in this way and the desired order will be delivered to the customer on the same day. In addition, the product will be purchased as much as the load capacity of the motorcycle and the cargo will be ensured to reach the customer in a safe manner. As for the return process of the product, if the customer wants to return the product, he can contact customer service and return it to the courier who will come to the customer's address the next day. Kloti will receive all purchases in cash only, with payment at the door from the customer. In this way, if the customer wants to return the product, he will not wait for the money to be deposited in his bank account and the courier who comes for the return will be able to give the customer his money in cash at that moment. As for the "Product Trial Process", which is another problem, customers will be able to try on the clothes they want in real time with the AR software included in Kloti before purchasing the product.

3.1.3 Glossary

3.2 OVERALL DESCRIPTION

In this section, the components needed by the application and the basics of the application are explained in detail.

3.2.1 Product Perspective

Kloti, the mobile shopping application, aims to enable its users to buy the clothes they want from their mobile phones easily and by trying the product with AR software. Our product will serve 2 different types of users. The first of these is the customer (the person who will buy the product) and the second is the courier (the person who will deliver the product to the customer). There will be two different interfaces for these two cases.

3.2.2 Memory Constraints

Since not much data will be kept in the mobile application, a ram of 100 MB will be needed. Also, the application will need at least 200 MB of free space.

3.2.3 Operations

Users are divided into two as customer and employee, and different functions are allowed for each user type. The operations that customers can see/perform at first will then be explained in detail, respectively, followed by the operations that employees can see/perform.

Customers will be able to see the options to register, login, shopping cart, edit profile and catalog.

Register: In this section, the customer must register in our firebase database, which is used by the application and provided by Google. In this way, they will be able to create their own profiles.

Login: After the customer registers to the application, they must enter the e-mail addresses and passwords they used while registering on the "login" screen in order to log into their accounts. In this way, they will be able to start shopping through the application.

Shopping Cart: In this section, the customer will be able to see the product he bought from the catalog. If desired, the product can be removed from the cart.

Edit Profile: If the customer wants to change the information he entered while registering, he will be able to change it through this section.

Catalog: It is the part where the customer can see the clothes. In this section, the customer will be able to examine the clothes he likes in detail.

Employees will be able to log in, order accept/reject, google maps, edit profile, activity status and previous orders.

Login: Employees will be able to log in to work in our application with their email addresses and passwords they have received from our company.

Order Accept/Reject: Employees can accept or reject any order they want.

Google Maps: Employees will be able to see their own location and the location of their customers from the map section.

Edit Profile: Employees will be able to edit their information.

Activity Status: Employees will be able to notify the application when they are available to take orders and when they are not.

Previous Orders: Employees will be able to see the orders they have fulfilled before.

3.2.4 Product Functions

Register: Allows users to register to the application.

Login: Allows users to log into their account in the app.

Shopping Cart: Users can add the selected clothes to the shopping cart before making the payment.

Edit Profile: Allows customers to edit their profile.

Catalog: The menu where customers can see the clothes.

Login: Allows employees to log into the application.

Order Accept / Reject: Employees can accept or reject their orders

Google Maps: Employees can see where the order came from and their own location.

Edit Profile: Employees can edit their profiles.

Activity Status: Employees can make themselves online during working hours.

Previous Orders: Allows employees to see the orders they have delivered.

3.2.5 User Characteristics

3.2.5.1 Customers

Customers are expected to have an intermediate level of knowledge of today's mobile applications.

3.2.5.2 Employees

Employees are expected to have the ability to read google maps and have a high level of mobile application knowledge.

All user types should have an intermediate level of Turkish in order to use the application.

3.3 REQUIREMENTS SPECIFICATION

3.3.1 External Interface Requirements

3.3.1.1 User Interfaces

Our application will have 2 different interfaces for customers and employees. All interfaces will be easy and understandable to use.In both interfaces, the user will be able to access the desired action from the hamburger menu.Both interfaces will have login,logout and profile management screens.Employees will have a map in their interface and employees will be able to see which order zone they are in.In addition, when the order comes to the employee, the employee will be able to see where the order will go from that map.Also the language of our application will be Turkish.

3.3.1.2 Hardware Interfaces

Our application will work on IOS and Android as a mobile operating system.

3.3.1.3 Software Interfaces

Since we will use Flutter in our application, it will be cross-platform.We will use Firebase developed by Google for data storage.We will use GPS for location services in our application.

3.3.1.4 Communication Interfaces

Users must be connected to the internet to use the application.

3.3.2 Functional Requirements

3.3.2.1 Customer Use Case

Use Case:

• Sign Up
• Login
• Profile Management
• Choose a catalog
• Give an order
• Logout

Diagram:

Figure 12:Customer Use Case

Brief Description:

Customer diagram shows the actions that the customer can perform while using the mobile application.Even if the customer does not log in to the application,can see and examine the catalogs and the products in the catalogues.The customer can execute the following functions:Sign Up,Login,Profile Management,Choose a catalog,Give an Order,Logout.

Initial Step by Step Description:

1. Customers can register to the application by entering their personal information (name, surname, address, e-mail, phone number) and creating a password.

2. Customers must use their email and password to log in to the application. After entering the information, they must successfully pass the Captcha Verification.

2.1 If Captcha Verification is unsuccessful, a warning message will appear on the screen. 2.2 If the password or email are invalid, the customer should re-login.

3. After successfully logging into the app ,customers can change their phone number, password and address or view their profile from their profile page.

4. Customers can choose products from the catalog.

4.1 If the customer is not logged in to the application,the customer can select a product from the catalog, but must log in to add it to the shopping cart.

5. Customers can try the product they want to buy with AR, then add the product to the shopping cart.

5.1 If the customer does not want to try the product,can add it directly to the shopping cart.

6. Customers can edit the shopping cart and add multiple products.

6.1If the customer does not like the product, can remove it from the shopping cart.

7. If the customer likes the product, the customer chooses the address to which the order will be sent and confirms the order with a cash payment method.

7.1 If the customer cancels the order, it returns to the shopping cart.

8. The customer can log out of the account at any time.

3.3.2.2 Employee Use Case

Use Case:

• Login
• Profile Management
• Approval Order
• View Order
• Show Status
• Logout

Diagram:

Figure 13:Employee Use Case

Brief Description:

The Employee diagram explains the operations Employee can perform Login,Profile Management,Approval Order,View Order,Show Status and Logout.

Initial Step by Step Description:

1. Employees login system with their username and given password then employees click login button for login system. 1.1 If employees enter the wrong information system, send the message “ try again”. 1.2 If Employees can login successfully ,the system confronts the main menu to the Employee.

2. Employees can change their information: phone number,username,password. 2.1 Employees select profil management in the main menu and they select edit information and they can change. 2.2 They save new information with the click save button in the profile management page.

3. Employees can approve orders when clicking the approval button in the main menu. 3.1 If Employees approve an order they see a detailed order. 3.2 If Employees do not approve ,employees continue to search order.

4. Employees can view orders when clicking the approval button in the main menu. 4.1 Employees can see who is ordered,what is it ordered,and thecustomer ‘s address phone number.

5. Employees can view the status of the order, enter information such as whether it was delivered or on the way to the system. 5.1 If employees deliver the product, employees click the work done button and then write which date delivers the product to the customer in the order page. 5.2 If the employees do not deliver the product, they write the status of the order on the order page, such as preparing or on the way.

6. Employees can logout in the system. 6.1 If employees click the logout button in the main menu employees logout system.

3.3.3 Performance Requirements

There are no version restrictions for iOS users. For Android users, a mobile phone or tablet with at least Android 11.0 is required.

3.3.4 Security Requirements

We aim to take care to protect the personal information of all users registered in our application. Only the developers of the application will have access to the home addresses, phone numbers and e-mail addresses of the users. In addition, our application does not accept easy-to-guess passwords to keep users' accounts safe.

3.3.5 Design Constraints

This application is designed so that customers can try the products they want to buy while shopping online.It is also aimed to be a source of income for people who want to earn money by being a courier. An internet connection is required to use the application.

3.3.6 Software System Attributes

3.3.6.1 Portability

This application can be used on mobile phones and tablets with both Android and IOS operating systems, so users must download the application from Google Play Store and App Store to use the application.

3.3.6.2 Performance

It is planned that the user will be able to use the application for a long time.

3.3.6.3 Adaptability

It is important that the application is updated every season because clothing brands offer their new products for sale at the beginning of the season.

3.3.6.4 Reliability

Customers will be able to return the clothes they purchased within 15 days when they encounter a problem.

3.3.6.5 Security

Captcha Verification will be used while users are logging in, thus verifying that the user trying to login is human.

3.3.4.6 Maintainability

Taking into account the demands of the users, the application can be updated and new features can be added to the application.

4. SOFTWARE DESIGN DESCRIPTION DOCUMENT (SDD)

4.1 INTRODUCTION

This document describes how the project will appear visually in the user interface and the detailed architecture of the project.

4.1.1 Purpose

The purpose of this document is to provide detailed information about the architecture and visual design of the mobile shopping application we call "Kloti".With this mobile application project, people will be able to shop for clothes on their mobile phones whenever and wherever they want, and even try on clothes using their cameras. Thus, they will profit from both time and shopping fatigue.

4.1.2 Scope

All the features of this application, which allows people to try on the clothes they want to buy while shopping online, are detailed in the rest of the document.These features are explained more clearly using the Activity Diagram, Sequence Diagram, ER Diagram, No-SQL Data Model Diagram, Class Diagram and the visuals of the user interface.

4.1.3 Definitions and Acronyms, Abbreviations

4.1.4 Overview

• Chapter 1 is an introduction to the software design description document about "Kloti".
• Chapter 2 is explain the approaches, constraints, class and activity diagram.
• Chapter 3 is explain the architectural structure.
• Chapter 4 is the description of system interfaces.
• Chapter 5 is the visuals and explanations of the user interface.
• Chapter 6 contains a sequence diagram that explains how objects interact with each other.
• Chapter 7 contains ER and No-SQL diagram explaining database design.

4.2 Design Approach

4.2.1 Class Diagram

                  Figure 14 : Class Diagram

Since Customer and Employee have some common features, they are inherited from User class and have their own functions. In the order class, the date of the delivery of the order, the id number of the order, the condition of the order and the address to which the order will be delivered are kept. Since the customer is the orderer, it is related to the order class, and since the employee is the deliverer of the order, it is related to the order class. Also, since the order includes products, the order class includes the products class. In the shopping card class, the id number of the card is kept. In the cash payment class, the id number of the payment is kept, and in the shopping cart item class, the value of the itemid and cost are kept. These classes are linked to the order class, since the customer chooses the payment transaction type at the time of placing the order and the customer will see the total amount to be paid at the time of ordering. The products class holds the color, type, name, price, and information about the product, and the catalog class holds the type of the catalog, the category, and the brand class holds the id and name of the brand. Since there are products and brands in the catalog, catalog class includes products and brands.

4.2.2 Activity Diagrams

4.2.2.1 Customer Activity Diagram

4.2.2.1.1 Sign Up

                  Figure 15 : Sign Up Activity Diagram

Users enter the required information into the system and register on the screen that appears in front of them.

4.2.2.1.2 Login

                  Figure 16 : Login Activity Diagram

In order for users to log in to the application, they must enter their email and password information on the account they are registered with.If they successfully pass the reCaptcha application, which proves that they are not robots after typing the information, and if their information is correct, they will be logged into the system.

4.2.2.1.3 Profile Management

                  Figure 17 : Profile Management Activity Diagram

Customers can view and edit their profile after logging into the app.Customers can change the information they want to change (password, address, phone number) from the edit profile section of the page that appears.

4.2.2.1.4 Product Selection

                  Figure 18 : Product Selection Activity Diagram

After logging into the application, the customer selects the catalog and the product belonging to that catalogue. The product to be purchased can be tried using the phone camera with AR or the order can be placed directly without trying it. Also, the order can be canceled at any time.

4.2.2.1.5 Give An Order

                  Figure 19 : Give An Order Activity Diagram

After logging into the application, the user can add the product to the shopping cart, then edit this cart or select an address directly without editing.If the user chooses an address, their order can be confirmed or canceled after choosing to pay cash. Also, the user can return and edit the shopping cart after confirming the order.

4.2.2.2 Employee Activity Diagram

4.2.2.2.1 Show Status

                  Figure 20 : Show Status Activity Diagram

If the employee has delivered the product to the customer, employee logs in to the application, clicks the statu of order button from the main menu, selects the order he delivered from the screen that appears, then selects the day and time he delivered and saves this information.

4.2.2.2.2 Approval & View

                  Figure 21 : Approval View  Activity Diagram

After the employee logs into the application, she sees the orders that need to be delivered and clicks the confirm button next to the order to confirm the order she wants to deliver, then she sees the details of the order.

4.2.2.2.3 Profile Management

                  Figure 22 :  Profile Management Activity Diagram

After logging into the application, users can click the edit profile button from the main menu and change the information they want to change from the page that opens.

4.2.3 Used Drawing Tools

"app.diagrams.net"[1] is used for Customer Activity & Sequence Diagram and database design diagrams. "Adobe XD"[2] is used for user interface designs. "Visual Paradigm"[3] is used for Employee Activity & Sequence Diagram.

4.3 Architecture

4.3.1 Software Architecture

Kloti Mobile Application software will be designed according to the figure above.This application can be accessed from both Android and IOS devices.Firebase will be used for database in the application.Customer, employee and customer's previous orders will be kept in the database.

4.3.2 Hardware Architecture

Any device with an IOS or Android operating system is sufficient.

4.4 SYSTEM INTERFACES

4.4.1 External System Interfaces

No external interfaces.

4.5 User Interface Design

4.5.1 Navigation

Since this application will be developed for use on Android and Apple devices, the application must be downloaded from the Play Store or App Store. The costumer and employee interfaces of the application will be discussed in more detail in section 5.2.

4.5.2 Screen Definitions

4.5.2.1 Page descriptions

4.5.2.1.1 Splash Screen

                  Figure 23 : Splash Screen UI 

4.5.2.1.2 Costumer Home Page & Company Catalog Page

                  Figure 24 : Home UI 

4.5.2.1.3 Hamburger Menu For Unknown User

                  Figure 25 : Unknown User Hamburger Menu UI 

4.5.2.1.4 Hamburger Menu For Registered User

                  Figure 26 : Registered User Hamburger Menu UI 

4.5.2.1.5 Login Page

                  Figure 27 : Login UI 

4.5.2.1.6 Costumer Register Page

                  Figure 28 : Register UI 

4.5.2.1.7 Catalog For Clothe Type Page

                  Figure 29 : Catalog For Clothe Type UI 

4.5.2.1.8 Catalog For Models Page

                  Figure 30 : Catalog For Model UI 

4.5.2.1.9 Clothe Examination Page & Try Button

                  Figure 31 : Examination UI 

4.5.2.1.10 Costumer Shopping Cart Page

                  Figure 32 : Shopping Cart UI 

4.5.2.1.11 Catalog For Models Page

                  Figure 33 : Payment UI

4.5.2.1.12 Costumer AR Camera

                  Figure 34 : AR UI

4.5.2.1.13 Costumer Edit Profile Page

                  Figure 35 : Costumer Edit Profile UI

4.5.2.1.14 Employee Home Page

                  Figure 36 : Employee Home UI

4.5.2.1.15 Employee Previous Orders Page

                  Figure 37 : Previous Orders UI

4.5.2.1.16 Employee Edit Profile Page

                  Figure 38 : Employee Edit Profile UI

4.6 Process Design

4.6.1 Sequence Diagrams

4.6.1.1 Customer Sequence Diagram

                  Figure 39 : Customer Sequence Diagram

4.6.1.2 Employee Sequence Diagram

                  Figure 40 : Employee Sequence Diagram

                  Figure 41 : Employee Sequence Diagram (continued)

4.7.Database Design

4.7.1 ER Diagram

                  Figure 42 : ER Diagram

4.7.2 No-SQL Diagram

                  Figure 43 : No-SQL Diagram

5 Test Plan & Results

This test plan has been created to organize the test processes to be applied for the Kloti Online Shopping System application. This document is intended to be a reference for team members on features to be tested or not tested, details of test cases, workflow and methods planned to be tested.

5.1 Version Control

5.2 Overview

In this document, we aim to check how well the AR feature of the mobile application pages fulfills the features we specified in the SRS and SDD sections. Each of the pages in the Kloti Online Shopping Application will be subjected to a test.

5.3 Scope

This document contains test cases for two types of users. It includes test scenarios for customers to login, register, log out, checkout, add to cart, edit cart, select product, try selected product with AR, edit profile and view profile pages. For employees, it includes test scenarios for viewing the map, viewing past orders, viewing current orders, logging into the system, exiting the system and editing the order status. Each page and its functions will be examined in detail. This document explains the test requirements, test scenarios, how tests will be passed or failed, and test scenarios. The purpose of the document is to explain what to test and how to perform test cases.

5.4 Terminology

5.2. FEATURES TO BE TESTED

The user interface of Kloti Online Shopping application contains 16 pages where users (registered customer and employee) can communicate with the application. We classify the pages as Sign In(SI), Sign Up(SU), Sign Out(SO), Add To Cart(ATC), Edit Cart(EC), Augmented Reality(AR), Edit Profile (EP), Google Maps Navigation(GMN), Past Orders (PO), Order Status(OS). Brief descriptions of all the major features to be tested are listed in below.

5.2.1 Main Page (MP)

The first page users will see when entering the app. It has a different interface for two types of users. Customer main page slider, buttons with products, a hamburger menu located on the left side of the appbar, buttons for sign in and sign up in the hamburger menu. If the user is logged in, there will be edit profile and sign out in the hamburger menu.

5.2.2 Sıgn Up (SU)

Customers enter an email, password and personal phone number. Then the user presses the Sign Up button, after this process their profiles are created successfully.

5.2.3 Sıgn In (SI)

Users (employee and customer) enter their email and password. After clicking the Sign In button, customers are directed to the main menu prepared for users, and employees are directed to the main page created for employees.

5.2.4 Add To Cart (ATC)

Customers click the Add To Cart button on the product page, then the product is successfully added to the cart.

5.2.5 Edit Cart (EC)

By clicking the My Cart button, customers view their carts and either remove the product in the cart or increase the amount of products.

5.2.6 Augmented Reality (AR)

Customer clicks the camera icon on the product page. Afterwards, the product they want to try is successfully seen on their cameras.

5.2.7 Edit Profile (EP)

Users click on the My Profile button from the hamburger menu. Then they are successfully redirected to my profile page and edit their profile.

5.2.8 Past Orders (PO)

Employees click on my previous orders button on the down bar. Then they are directed to my previous orders page.

5.3. FEATURES NOT TO BE TESTED

The hardware of the mobile device will not be tested. In the test scenario, features such as problems with the camera, whether the device is AR compatible, whether the internet connection is working properly will not be tested.

5.4. ITEM PASS/FAIL CRITERIA

The criteria for deciding under which conditions the test case succeeds and under which conditions it fails.

5.4.1 EXIT CRITERIA

The conditions under which the product test was successful are described below.

• 90% of Test Scenarios run successfully.
• 85% of test cases passed successfully.

5.5. TEST DESIGN SPECIFICATIONS

5.5.1 Customer Operations(CO)

5.5.1.1 Subfeatures to be tested for customer

5.5.1.1.1 Sign Up Button (CO.SU_BTN)

The customer goes to the sign up page by clicking the "Sign Up" button in the hamburger menu.

5.5.1.1.2 Sign Up Page (CO.SUP)

The customer writes the required information and clicks the "Sign Up" button.

5.5.1.1.3 Login Button (CO.LG_BTN)

The customer goes to the login page by clicking the "Login" button in the hamburger menu.

5.5.1.1.4 Login Page (CO.LP)

The customer writes the required information and clicks the "Login" button.

5.5.1.1.5 Edit Profile Page (CO.EPP)

Customers can edit their profile.

5.5.1.1.6 Choose Catalog Page (CO.CCP)

The customer selects the catalog by clicking the pictures in the main menu.

5.5.1.1.7 Choose Product Page (CO.CPP)

The customer selects the product by clicking the images on the product page.

5.5.1.1.8 Product Review Page (CO.PRP)

The customer sees the product information and, if desired, tries on it by clicking the camera icon.

5.5.1.1.9 Product Trial Button (CO.PT_BTN)

The customer presses the camera icon.The phone's camera turns on and the customer tries on the outfit.

5.5.1.1.10 Add To Shopping Cart Button (CO.ATC_BTN)

The customer adds the product to the cart by pressing the cart icon.

5.5.1.1.11 Edit The Shopping Cart Page (CO.ETCP)

The customer edits the shopping cart.

5.5.1.1.12 Confirm Cart Button (CO.CC_BTN)

The customer clicks the "Confirm Cart" button and goes to the payment page.

5.5.1.1.13 Payment Page (CO.PP)

The customer chooses the payment method and confirms the contracts.

5.5.1.1.14 Confirm And Finish Button (CO.CAF_BTN)

Customer clicks "Confirm And Finish" button.

5.5.1.2 Test Cases For Customer

5.5.1.2.1 Sign Up Button (CO.SU_BTN)

5.5.1.2.2 Sign Up Page (CO.SUP)

5.5.1.2.3 Login Button (CO.LG_BTN)

5.5.1.2.4 Login Page (CO.LP)

5.5.1.2.5 Edit Profile Page (CO.EPP)

5.5.1.2.6 Choose Catalog Page (CO.CCP)

5.5.1.2.7 Choose Product Page (CO.CPP)

5.5.1.2.8 Product Review Page (CO.PRP)

5.5.1.2.9 Product Trial Button (CO.PT_BTN)

5.5.1.2.10 Add To Shopping Cart Button (CO.ATC_BTN)

5.5.1.2.11 Edit The Shopping Cart Page (CO.ETCP)

5.5.1.2.12 Confirm Cart Button (CO.CC_BTN)

5.5.1.2.13 Payment Page (CO.PP)

5.5.1.2.14 Confirm And Finish Button (CO.CAF_BTN)

5.5.2 Employee Operations(EO)

5.5.2.1 Subfeatures to be tested for employee

5.5.2.1.1 Login Button (EO.LG_BTN)

Employee goes to the login page by clicking the "Login" button in the hamburger menu.

5.5.2.1.2 Login Page (EO.LP)

Employee writes the required information and clicks the "Login" button.

5.5.2.1.3 Edit Profile Page (EO.EPP)

Employees can edit their profile.

5.5.2.1.4 Accept Order Button (EO.AO_BTN)

The employee accepts the order by clicking the "Accept Order" button.

5.5.2.1.5 Reject Order Button (EO.RO_BTN)

The employee rejects the order by clicking the "Reject Order" button.

5.5.2.1.6 Previous Orders Button (EO.VPO_BTN)

The employee can view their past orders by clicking the my "Previous Orders" button.

5.5.2.1.7 Edit Order Status Button (EO.EOS_BTN)

The employee can update the order status by clicking the "Edit Order Status" button.

5.5.2.1.8 View Google Maps (EO.VGM_BTN)

Employee can view the order address by clicking on the map.

5.5.2.2 Test Cases For Employee

5.5.2.2.1 Login Button (EO.LG_BTN)

5.5.2.2.2 Login Page (EO.LP)

5.5.2.2.3 Edit Profile Page (EO.EPP)

5.5.2.2.4 Accept Order Button (EO.AO_BTN)

5.5.2.2.5 Reject Order Button (EO.RO_BTN)

5.5.2.2.6 Previous Orders Button (EO.VPO_BTN)

5.5.2.2.7 Edit Order Status Button (EO.EOS_BTN)

5.5.2.2.8 View Google Maps (EO.VGM_BTN)

5.7. TEST DETAİLED TEST CASES

5.7.1 CO.LG.01

5.7.2 CO.LG.02

5.7.3 CO.SU.01

5.7.4 CO.SU.02

5.7.5 CO.SU.03

5.7.6 CO.SU.04

5.7.7 CO.SU.05

5.7.8 CO.EPP_BTN.01

5.7.9 CO.ATC_BTN.01

5.7.10 CO.ETCP_BTN.01

5.7.11 CO.PP_BTN.01

5.7.12 CO.CCP_BTN.01

5.7.13 CO.CCP_BTN.01

5.7.14 CO.AR_BTN.01

5.7.15 EO.LG.01

5.7.16 EO.LG.02

5.7.17 EO.LG.03

5.7.18 EO.EPP_BTN.01

5.7.19 EO.AO_BTN.01

5.7.20 EO.RO_BTN.02

5.7.21 EO.VPO_BTN.01

5.7.22 EO.EOS_BTN.01

5.7.23 EO.VGM_BTN.01

5.8 Test Plan Results

5.8.1 Individual Test Results

5.8.1.1 Tables Of Individual Test Results For Customer

5.8.1.2 Tables Of Individual Test Results For Employee

5.8.2 Summary Of Test Results

All of the test cases have been executed and evaluated.

5.8.3 Exit Criteria

Exit Criteria is provided.

6) User Manuel

6.1)First Page

After installing the application from the play store or app store, the user will first encounter this page by clicking the application icon on their phone. On this page, if the user has a Kloti account that he has created before, he can log in by pressing the login button. If the user wants to log in to the kloti application with his google account, he can press the log in with gmail button. By pressing the forgot password button, the password is sent to the registered e-mail address of the user. If the user does not have an account, they will be directed to the sing up page from the Create Now option. The user must press the guest user button to shop without registration.

6.2)Sign Up Page

The user is directed to this page after clicking the register button on the first page. After filling in the required information from the user, the user presses the register button and now has an account.

6.3)Home Page for Customer

There are brands on the main page of the application, the user can see which brands exist from here, and they can go to the pages of those brands by clicking on the brands they can also be informed about discounts. Users can access their baskets with the basket icon next to the home page icon in the application. They can also access the notifications they receive with the notifications icon.To log out of the application, users can click the log out button on the top right.

6.4)HamburgerMenu for UnknownUser

In order to access this section, users must click on the icon with the three lines in the upper left corner of the application. After this, users who are not members of the application will have the option to register and login on the screen. Users who want to become a member click on the register option and fill in the information on the registration page correctly and register they may be.

6.5)HamburgerMenu for RegisteredUser

To access this section, users need to click on the three-lines icon in the upper left corner of the application. After that, click on the login for login page and a login page will appear before the user, after entering their information from here, they must click on the icon with the three lines in the upper left of the home page to access the profile editing page.

6.6)Catelog Page

In order to enter the catalog pages of the brands, the user must click on the icons of the brands from their home page. After this process, they will see the categories of products belonging to those brands, users should click on the icon of the product type they want to buy. For example, if she wants shoes, she should click on the shoe icon. After this process, they will see products belonging to those brands and the user can examine the models and prices of the products here.

6.7)Product Page

The user can get information about the product on this page, such as the quality of the fabric of the product. Also, the user can access different colors of the product from here, by clicking on the color icon in the color option, and by clicking on the plus and minus icons at the bottom left, they can determine how many they will buy. By clicking the camera button, it directs you to the AR page, and by clicking the like button, the product is added as favorites. By clicking the add to cart button, the user adds the selected product to his cart. To access this page, it is sufficient for the user to click on the picture of the product from the category page.

6.8)Shopping Card Page

On this page, the user can access the products he has added to his cart and see the total amount he will pay from here, by clicking the confirm cart button to purchase the products. After this process, the user is directed to the payment page.

6.9)Payment Page

The user must enter the address information on this page, then click on the cash option, and finally click on the confirm and finish button to complete the transaction.

6.10)Edit Profile Page

In order for the user to access this page, click on edit profile from the hamburger menu, and then their own information will appear. The user should click on the edit button below for the information they want to edit, then after changing the information, they click the save button to complete the process.

6.11)Home Page for Employee

After opening the running application, the main page appears, on the main page there are current orders and previous orders with navigation. If the employee wants to confirm the order, she must click on the accept button under the box with information about the order, if she wants to reject it, she must click on the reject button. To see your previous orders, click on the box that says my previous orders.

6.12)Previous Order Page

After the employee clicks on the box that says My orders before the home page, this page appears. On this page, employees can access information about the orders they have delivered.

7. Work Plan

8. CONCLUSION

In the Ceng 408 course, we created LR, SRS SDD Tests Plan & Results, User Manual documents for our project. We did a literature review for our project in the LR document. In the SRS documentation, we talked about the actions that users can take in the application and the systematic factors necessary to use the application. In SDD documentation, we designed interfaces for users, explained how users can access and use the functions in the application from their screens, and designed various diagrams for these functions. In the Test and Result documentation, we examined the working status of our application, and in the user manual documentation, we explained in detail how to use the application.

9. REFERENCES

[1] https://medium.com/flutter-community/what-makes-flutter-such-a-powerful-popular-sdk-85cb550935b8#:~:text=The%20one%20feature%20of%20Flutter,multiple%20codes%20for%20different%20platforms.

[2] Aakanksha Tashildar, Nisha Shah, Rushabh Gala, Trishul Giri, Pranali Chavhan. APPLICATION DEVELOPMENT USING FLUTTER. 4SPPU, Department of Computer Engineering, Vishwakarma Institute of Information Technology, Pune, Maharashtra, India, 2020.

[3] Kuinam J. Kim , Hye-Young Kim. Information Science and Applications. ICISA, 2019 .

[4] P.K.V Jayananda ,D.H.D. Seneviratne , Dodampege L.N, Lakshani A.M.B , Pradeep Abeygunawardhana. Augmented Reality Based Smart Supermarket System with Indoor Navigation using Beacon Technology (Easy Shopping Android Mobile App).Department of Information Technology,Sri Lanka Institute of Information Technology , 2018.

[5] Philipp A. Rauschnabel, Reto Felix , Chris Hinsch. Augmented reality marketing: How mobile AR-apps can improve brands through inspiration, 2019.

[6] https://dart.dev/overview

[7] Vedat Can Ak. Implementation Of An Application Using Augmented Reality Environment.Master’s thesis,Yaşar University,2018.

[8] Sanni Siltanen.Theory and applications of marker-based augmented reality,Espoo,2012.

[9] Selcen Ozturkcan.Service innovation: Using augmented reality in the IKEA Place app.Journal of Information Technology Teaching Cases,2020.

[10] Gazi Erkan Bostancı. User Tracking Methods for Augmented Reality Applications in Cultural Heritage. School of Computer Science and Electronic Engineering University of Essex, 2013.

[11] "Draw.io" [Online]. Available: https://app.diagrams.net/. [Accessed: 31 December 2021].

[12] "Adobe XD" [Online]. Available: https://www.adobe.com/tr/products/xd.html [Accessed: 31 December 2021].

[13] "Visual Paradigm" [Online]. Available: https://online.visual-paradigm.com/drive/#diagramlist:proj=0&dashboard [Accessed: 31 December 2021]. [14] Group4_SDD, JANUARY 1, 2022 [15] Group4_SRS, JANUARY 5, 2022