Project Report PDF Link

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. CONCLUSION

In Ceng 407 course, we created LR, SRS and SDD documents for our project. We did a literature review for our project in the LR document. In the SRS documentation, we have mentioned the actions that users can do in the application and the systematic factors required 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. We are planning to realize our project in the CENG 408 course.

6. 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].