2.3 Use case specification 2.3.1 Login For User Use Case ID 1 Use Case Name Login Created By Cao Nguyên Long Created Date 30/1/2025 Primary Actor User Secondary Actor N/A Description
INTRODUCTION
Thesis Structure
● Chapter 1: Problem Statement and Solution Approach
● Chapter 2: System Analysis and Design
● Chapter 3: Integration and implementation results
● Chapter 4: Conclusion and Future Directions
XML [1] (eXtensible Markup Language) is a core technology used in Android development for designing and structuring user interfaces
XML offers a declarative method for defining layouts, components, and their attributes, making it a popular choice among developers Its simplicity and readability enhance usability, while its seamless integration with Android's runtime allows for a clear separation between UI design and application logic.
Key Features of XML in UI Design
XML allows developers to hierarchically define the user interface structure, facilitating layout visualization By using components such as Button, TextView, and ImageView, these elements can be organized within various layout containers like LinearLayout and ConstraintLayout.
The UI is defined in XML, while business logic is written in Java or Kotlin This separation enhances maintainability, scalability, and collaborative development
XML layouts can be reused across different screens or components Developers can use the tag to embed layouts or create reusable styles and themes
Attributes such as width, height, padding, and margin can be configured directly in XML Developers can also define custom styles and themes to ensure a consistent design
Material Design, introduced by Google in 2014 and codenamed Quantum Paper, is a design language that enhances the user experience through grid-based layouts, responsive animations, and transitions Building on the "cards" concept from Google Now, it incorporates elements like padding and depth effects, including lighting and shadows, to create a more intuitive interface.
Material Design, Google's design language introduced in 2014, is deeply integrated into
Android Studio, the official Integrated Development Environment (IDE) for Android development, equips developers with essential tools and resources to seamlessly incorporate Material Design principles into their applications This integration is facilitated by features and components specifically designed for Material Design, enhancing the overall user experience.
Kotlin [3] is an open source project available at no charge under the Apache 2.0 license
The code for the project is developed openly on GitHub primarily by the team employed at JetBrains, with contributions from Google and others
Our choice of Kotlin reaffirms our commitment to an open developer ecosystem as we evolve and grow the Android platform, and we are excited to see the language evolve
Android Studio offers excellent support for Kotlin, including built-in tools for converting Java code to Kotlin Additionally, the Show Kotlin Bytecode feature allows users to view the corresponding Java code, enhancing the learning experience for Kotlin developers.
Firebase [4] acquired by Google in 2014, has evolved into a comprehensive suite of backend cloud computing services and application development platforms designed to simplify and accelerate app development
Firebase is particularly well-suited for building robust, scalable applications across multiple platforms, including Android, iOS, JavaScript, and Node.js
Firebase offers a wide range of services that support different aspects of app development, including:
Enables seamless data synchronization across multiple devices in real time
Provides secure authentication methods, including Google, Facebook, email/password, and more
Allows developers to run backend code in response to events triggered by Firebase features and HTTPS requests
Offers fast and secure web hosting for web apps, static content, and dynamic sites
Provides detailed insights into user behavior, app performance, and marketing effectiveness
Includes Cloud Storage, Firebase ML, Crashlytics, and Remote Config, enhancing app functionality and user experience
Android Studio is Google's official integrated development environment (IDE) for Android app development, offering a comprehensive suite of tools such as a code editor, visual layout designer, built-in emulator, and advanced debugging features Its Gradle-based build automation allows developers to effectively manage project dependencies and optimize app compilation.
Android Studio provides a user-friendly drag-and-drop UI editor, along with ConstraintLayout and Jetpack Compose support, enabling developers to design responsive layouts tailored for diverse screen sizes Additionally, its integrated emulator allows for testing on various device configurations without the need for physical hardware, streamlining the development process.
Furthermore, Android Studio seamlessly integrates with Firebase and Google Play
Services offer essential features such as real-time databases, push notifications, authentication, and in-app purchases Additionally, developers can boost their productivity by utilizing AI-powered code completion, refactoring tools, and version control support through platforms like GitHub, GitLab, and Bitbucket.
Android Studio offers powerful profiling tools for performance optimization, enabling developers to assess CPU, memory, and network usage to ensure applications operate efficiently across all Android devices It natively supports Kotlin and Java while also being compatible with C++ and Dart through Flutter.
Studio remains the primary choice for Android app development, from simple applications to complex, feature-rich software solutions
The Valorant API [6] provided by Riot Games, serves as a critical support tool for the
The Valorant Store App utilizes an API to seamlessly retrieve and integrate real-time game data, guaranteeing users access to the latest and most accurate information.
The API serves as a crucial link between the application and the game's backend, facilitating smooth data transfer By leveraging this API, the app enhances user engagement by delivering a rich and interactive experience through real-time data on different game components.
The API offers comprehensive details on all available skins, featuring their names, tiers, descriptions, availability, prices, and rarity It also provides information on special and limited-edition skins, keeping users updated on the latest cosmetic options.
The API provides detailed insights into in-game bundles, including their contents (skins, items, and other assets), promotional timelines (start and end dates), applicable discount rates, and exclusive offers This information empowers users to make informed purchasing decisions during promotional events.
The API offers an extensive collection of game assets, including high-resolution images, animated GIFs, videos, and trailers for skins and bundles These resources enable users to visually explore skins and items prior to making a purchase, significantly improving the user interface with premium visual content.
The API offers users insights into upcoming skins, bundles, and special events, ensuring they stay informed about future content releases This valuable information aids in planning for upcoming purchases and in-game activities.
SYSTEM ANALYSIS AND DESIGN
Use case specification
Use Case ID 1 Use Case Name Login
Created By Cao Nguyên Long Created Date 30/1/2025
Primary Actor User Secondary Actor N/A
Description Login to the app to use its features
Pre-conditions Require user to open app before attempt to login
Post-conditions The user successfully logins
4 The system navigate user to the main page of the app
Exceptions The system displays an error message when:
Table 1: Login use case for user
Use Case ID 2 Use Case Name Admin Login
Created By Cao Nguyên Long Created Date 30/1/2025
Primary Actor User Secondary Actor N/A
Description Admin logs into the Firebase console to manage items and users
Pre-conditions Admin has access to Firebase credentials and permissions
Post-conditions Admin successfully manages items and users in Firebase
1 Admin opens the Firebase Main page
2 Click on Login to Firebase using google account
4 The system navigate user to the Firebase Console
Exceptions The system displays an error message when:
Table 2: Login use case for admin
Use Case ID 3 Use Case Name Register
Created By Cao Nguyên Long Created Date 30/1/2025
Primary Actor User Secondary Actor N/A
Description The user creates a new account to login to the app
Pre-conditions • The user must not have an existing account
• The app must be connected to the authentication service
Post-conditions • A new account is created and stored in the authentication system
• The user is redirected to the main app page after successful registration
1 The user opens the login page
2 The user clicks "New to the game? Sign here."
3 The system navigates the user to the Register Page
4 The user enters a username and password
6 The system validates the input and creates a new account
7 The system navigates the user to the login page to login
Alternative Flow If the user decides not to register, they can click Back to return to the login page
Exceptions The system displays an error message when:
1 Username or password is blank
3 Password does not meet requirements (if applicable)
4 Network issues prevent account creation
Table 4: View skins use case
Use Case ID 4 Use Case Name View skins
Created By Cao Nguyên Long Created Date 30/1/2025
Primary Actor User Secondary Actor N/A
Description The use case allows user to view skin details
Pre-conditions • User is logged into the app
Post-conditions • User is redirected to the main page that display skins
• User can view skins details Normal Flow
2 The system navigates the user to mai npage
3 The user navigates around the page to check skins
4 The user click on one of the available skins/bundles
5 The system navigates the user to Skin details page
Alternative Flow If the user decides not to register, they can click Back to return to the login page
Exceptions The system displays an error message when:
2 Errors from the data added to Firebase
Use Case ID 5 Use Case Name Add skins to cart
Created By Cao Nguyên Long Created Date 30/1/2025
Primary Actor User Secondary Actor N/A
Description The use case allows user to add skins to cart
Pre-conditions • User is logged into the system and viewing the skins available for purchase
Post-conditions • Skins are successfully added to the user's shopping cart
1 User Click on one of the available skins/bundles
2 System Navigate to skins detail page
3 User Select the desired skin(s)/bundle to add to the cart
4 Has the option to continue shopping or proceed to checkout
5 If proceeding to checkout, system redirects to the checkout page
6 Review items in the cart, adjust quantities, and proceed to complete the purchase
Alternative Flow If the user decides not to register, they can click Back to return to the login page
Exceptions The system displays an error message when:
2 Errors from the data added to Firebase
Table 5: Add skins to cart Use Case
Use Case ID 6 Use Case Name View inventory
Created By Cao Nguyên Long Created Date 30/1/2025
Primary Actor User Secondary Actor N/A
Description The use case allows user to view the skins they’ve purchased
Pre-conditions • User has previously purchased items
Post-conditions • User can see the items they’ve bought in the inventory
1 User Login to the app
2 System navigate to the main page
3 User click on Inventory icon
4 Navigate to Inventory and display user’s purchased skins
Alternative Flow If the user decides not to register, they can click Back to return to the login page
Exceptions The system displays an error message when:
2 Errors from the data added to Firebase
3 App can’t retrieve user’s inventory
Table 6: View Inventory Use Case
Table 7: View user profile Use case
Use Case ID 7 Use Case Name View User profile
Created By Cao Nguyên Long Created Date 30/1/2025
Primary Actor User Secondary Actor N/A
Description The use case allows user to update their profile
Pre-conditions • User is logged in
Post-conditions • User can edit,change password or log out of the account
1 User Login to the app
2 System navigate to the main page
3 User click on User profile icon
4 Navigate to User Profile and displays options such as Edit profile , Change password or Log out for the user
Alternative Flow If the user decides not to register, they can click Back to return to the login page
Exceptions The system displays an error message when:
2 Errors from the data added to Firebase
3 App can’t load user profile page
Use Case ID 8 Use Case Name Manage User accounts Created By Cao Nguyên Long Created Date 30/1/2025
Primary Actor Admin Secondary Actor N/A
Description This use case allows the user to log in to Firebase using their
Google account and manage user there
Pre-conditions • User has a Google account and login to FireBase
Post-conditions • User is authenticated with Firebase using their
2 System navigate to the Firebase main page
4 System displays the Authentication page with tools to manage users
Alternative Flow If the user decides not to register, they can click Back to return to the login page
Exceptions The system displays an error message when:
Table 9: Manage skins use case
Use Case ID 9 Use Case Name Manage skins
Created By Cao Nguyên Long Created Date 30/1/2025
Primary Actor Admin Secondary Actor N/A
Description Provides the admin with tools to manage skins in the Firestore database
Pre-conditions • User is authenticated with Firebase using their Google account
Post-conditions • Admin can view, add, update, or delete skins in
2 System navigate to the Firebase main page
4 System displays the Firestore Database page with collections and documents
Alternative Flow If the user decides not to register, they can click Back to return to the login page
Exceptions The system displays an error message when:
Figure 11: Activity Diagram for the Register Function
This activity diagram represents the user registration process Here's a step-by-step explanation of each part:
The process begins at the start point, marked by a black circle at the top, indicating the initiation of the registration process
The user selects the "Register" function to begin the process, which leads to the next step, known as Input Information
To begin the registration process, users are required to input their email, password, and other essential information Once these details are submitted, the system checks the database to verify whether the provided email is already in use.
The system checks whether the email is already registered by querying the database This leads to a decision node, where the system determines the next course of action
If the email is already registered in the system, the process moves to the "Send Error Message" step, alerting the user that the email cannot be used for registration.
If the email is valid, the system advances to the "Send Notification Successfully" step, where it dispatches a success notification to inform the user that their registration has been completed successfully.
After receiving the success notification, users are redirected to the Login Page, where they can enter their newly registered credentials This step signifies the conclusion of the registration process, marked by a black circle with an outlined bottom, indicating that the process has been successfully completed.
Figure 12: Activity Diagram for Login Function
This activity diagram outlines the user login process
The login process begins at the start, marked by a black circle at the top, indicating the initiation of the process
To access their account, the user clicks on the "Login" option, which directs them to a screen for entering their username and password After submitting their credentials, the system verifies the provided information for accuracy.
The system verifies the validity of the credentials by querying the database, which leads to a decision node that determines the next steps based on the results of this verification.
When invalid credentials are detected, indicating a mismatch with any existing account, the system proceeds to the "Send Error Message" phase, where it notifies the user of the failed login attempt due to incorrect credentials.
If the credentials are valid, the system moves to the "Send Notification Successfully" step, confirming the user's successful login by dispatching a success notification.
Once the success notification is sent, the user is redirected to the Menu Page, where they can access the main functionalities of the application
Finally, the process concludes at the endpoint, represented by a black circle with an outline at the bottom, marking the completion of the login process
Figure 13: Activity Diagram for Select skin function
This activity diagram outlines the Select skin function
The process starts at the designated black circle, signaling the beginning of the action Users then choose a skin from the available selections, picking the option that aligns best with their personal preferences.
After selecting a skin, users can customize it by choosing their preferred color or variant, allowing for a personalized touch that meets their individual tastes and preferences.
Once the user has chosen and customized their skin, it is added to the shopping cart, and the system promptly updates the cart to reflect the newly selected skin, preparing it for purchase.
After successfully adding an item to the cart, users receive a notification confirming the action, ensuring them that the skin is now in their cart and ready for checkout.
The process culminates at the endpoint, indicated by a black circle with an outline at the bottom, which signifies the successful completion of selecting a skin and adding it to the cart.
Figure 14: Activity Diagram for Purchase skin function
This activity diagram outlines the process of generating a QR code for payment based on the user's cart
The process begins at the start point, marked by a black circle at the top, indicating the beginning of the order procedure
To place an order, the user selects the option from their cart, prompting the system to calculate the total payment, which encompasses all items, applicable taxes, discounts, and additional fees.
Once the total is determined, the system displays the required amount for the user to review
Following this, the system generates and displays a dynamic QR code that enables the user to make the payment
This QR code provides a secure way for the user to complete the transaction, either by scanning it with a mobile device or using a compatible payment method
The process is complete when the QR code appears, indicated by a black circle with an outline at the bottom, meaning no additional actions are needed at this stage.
Figure 15: Activity Diagram for Check Payment Status Function
This activity diagram outlines the process of verifying and updating the payment status after the user transfers the payment
The process begins when the user initiates a payment transfer for their order After the payment is made, the SePay system sends a request to verify the payment through an API
INTEGRATION AND IMPLEMENTATION RESULTS
3.1) Integrating Firebase to Valorant Store project
Firebase, a Backend-as-a-Service (BaaS) platform developed by Google, offers a comprehensive suite of tools, including real-time databases, authentication, cloud storage, and Firestore, to streamline backend management for mobile and web applications.
This project leverages Firebase for:
● Authentication: Secure user login and registration
● Firestore: Fetching and storing bundles and skins dynamically
3.1.2) Steps to Connect Firebase to Android Studio
Step 1: Setting Up Firebase Project
1 Go to the Firebase Console and create a new project
2 Register my app with Firebase by adding this app's package name
3 Download the google-services.json file after registration
Figure 19: Download the google-services.json
This figure shows downloading the google-services.json file from the Firebase console, a crucial step for integrating Firebase with the Android app
This file enables secure communication with Firebase services
The screenshot depicts the Firebase console's "SDK setup and configuration" section for the com.example.valorantshop app, displaying the App ID, package name, and SHA certificate fingerprints
To utilize Firebase services in your Android project, download the provided file and add it to the app module This file contains the essential credentials, including an ID for authorization Follow the SDK instructions to successfully integrate Firebase into your application.
Figure 20: Add Firebase to your android app
Adding the Firebase Configuration File (google-services.json)
To connect the Android application to the Firebase project, the google-services.json configuration file must be downloaded and correctly placed within the project structure
This file contains essential information that allows the app to communicate with Firebase services The image illustrates step 2 of this integration process
First, as shown in the dialog, the "Download google-services.json" button should be clicked This downloads the configuration file, typically to your browser's default download location
Next, within Android Studio, it's crucial to switch to the Project view
This view displays the project's file structure as it exists on disk, rather than the logical structure shown in the Android view
The Project view is essential for correctly placing the configuration file
The downloaded google-services.json file must then be moved into the module (app- level) root directory
This directory, usually named app, is where the application's source code, resources, and build configuration reside
The provided screenshot highlights the correct location within the Project view
To ensure the Google Services Gradle plugin can effectively locate and process the google-services.json file during the build process, it is essential to place this file in the designated app-level directory.
The google-services.json is automatically added to the app, which provides information and the required id to connect to the Firebase
To enable your application to interact with the designated Firebase project, download the Firebase configuration file and place it in the appropriate directory within your Android Studio project.
This establishes the fundamental link between the app and Firebase's backend services
Figure 21: Add google-services.json to your project-view
To make the google-services.json configuration values accessible to the Firebase SDKs at runtime, the Google Services Gradle plugin is required
This plugin processes the configuration file during the build process To include it, add the following plugin declaration to your project's build configuration
Figure 22: Add plugin your project
To integrate Firebase into your Android project, you must include the Google Services Gradle plugin in the project-level build.gradle.kts file using Kotlin DSL.
The image shows the necessary code snippet: inside the plugins block, add the line id("com.google.gms.google-services") version "4.4.2" apply false
The plugin is designated as a dependency but is not implemented at the project level; instead, it is integrated later in the module-level (app-level) build.gradle.kts file.
40 add the specific Firebase SDK dependencies required for your application (like Authentication and Firestore)
Figure 23: Add your desired Firebase products
After added to the (app-level) Gradle file: plugins { id("com.android.application") id("org.jetbrains.kotlin.android") id("com.google.gms.google-services")
To utilize pre-built methods offered by Firebase, it is essential to add specific dependencies in your project Include the following implementations: "com.google.firebase:firebase-auth-ktx" for authentication, "com.google.firebase:firebase-firestore" for database management, "com.google.firebase:firebase-storage" for file storage, and "com.google.firebase:firebase-database-ktx" for real-time database functionality Additionally, integrate "com.google.firebase:firebase-appcheck-playintegrity:18.0.0" for enhanced security and use the Firebase BoM by adding "platform('com.google.firebase:firebase-bom:33.6.0')" to manage versioning efficiently.
After updating the build.gradle files, sync this project to download the required dependencies and ensure Firebase services are configured
Role of google-services.json
Key Elements in google-services.json
"storage_bucket": "valorantshop2024.firebasestorage.app"
Project_id: Identifies the Firebase project
"client_id":"230929960055- e3fnj6415d74olr90u9ls7iga525otgh.apps.googleusercontent.com"
"current_key": "AIzaSyBcPpbjQZYL91zC5-excqVx5ujV75wKSHg"
Client_id: OAuth 2.0 client ID for Google Sign-In (if used) api_key: API key used to authenticate requests between this app and Firebase services
3.1.3) How the API Key Helps
The API key in google-services.json is used to authenticate this app with Firebase services It ensures that only authorized apps can access the Firebase resources
Whenever you use Firebase methods (e.g., auth.signInWithEmailAndPassword or db.collection("Bundles").get()), Firebase checks the API key to validate the request
Figure 24: How Android app interacts with Firebase through API
The diagram depicts the relationship between an Android application and Firebase services, highlighting that the Android app utilizes the google-services.json file to initialize the Firebase SDK This SDK is responsible for managing all Firebase operations, including authentication through the API key and executing tasks via the Firebase API.
Firebase servers authenticate the API key to connect the application with the appropriate Firebase project and manage ongoing requests The process involves initial setup from the app to the SDK, with the SDK overseeing authentication and operations, while Firebase servers handle validation and processing.
3.1.5) How FireBase API is used in Project
Firebase offers a comprehensive set of APIs and SDKs that simplify the development of Android applications, enabling features such as user authentication, data storage, and analytics This project effectively utilizes Firebase to enhance its functionality and streamline the app development process.
Firebase Authentication allows you to easily authenticate users using various methods like email/password, Google Sign-In, Facebook login, etc
When a user logs in using their email and password, Firebase processes the authentication request and generates an authentication token, granting access to additional services such as Firestore.
Methods like signInWithEmailAndPassword(), createUserWithEmailAndPassword() are used for this purpose
3.1.6) Usage in this project: private fun signInWithEmail(email: String, password: String) { auth.signInWithEmailAndPassword(email, password)
addOnCompleteListener(this) { task -> if (task.isSuccessful) {
Toast.makeText(this, "Authentication success.",
Toast.LENGTH_SHORT).show() startActivity(Intent(this, MainPageActivity::class.java)) finish()
Toast.makeText(this, "Authentication failed.",
FirebaseAuth is used to authenticate users when they log in to the app
In LoginPage.kt, signInWithEmailAndPassword() is called to log the user in and validate their credentials from Firestore
Upon successful login, users can continue using the app without having to re-enter their credentials
Firestore is a NoSQL database provided by Firebase that allows you to store and retrieve data in a document and collection format
How it works: Firestore stores data in collections and documents, which are similar to JSON objects You can query data using APIs like get(), set(), and update()
In this project, the function `fetchSkinsFromFirestore` retrieves data from the Firestore database by querying the "Col01" collection Upon successful retrieval, it clears the existing item list and iterates through each document in the result For each document, it extracts the name and video URL, creating an `Item` object with these details, along with price, image URL, and tier, before adding the item to the item list.
Firestore is utilized to retrieve the list of bundles and skins from the database, with the get() method being called in MainPageActivity.kt and BundlePage.kt to load this data effectively.
3.2) Integrating Glide to Valorant Store project
3.2.1) Glide Configuration in the Project
Glide is a powerful library widely used for image loading and display in Android applications To integrate Glide, first configure the dependencies in the build.gradle.kts file of the app module by adding `implementation("com.github.bumptech.glide:glide:4.15.1")` and `annotationProcessor("com.github.bumptech.glide:compiler:4.15.1")` The `implementation` line includes the Glide library, enabling core features such as image loading from URLs, caching, and performance optimization Meanwhile, the `annotationProcessor` line sets up the compiler to automatically generate necessary helper classes like GlideApp, which are crucial for implementing Glide customizations effectively.
3.2.2) Glide Integration in the Source Code
Glide is utilized in various Java/Kotlin classes to load and display images Below are some notable use cases:
Image Loading in RecyclerView Adapters
Adapters in RecyclerView often need to load images for each item Glide handles this task simply and efficiently Below is an example from CartAdapter.kt:
Glide.with(holder.itemView.context)
load(imageUrl) // Path to the image
into(holder.imageView) // View where the image will be displayed
To ensure effective lifecycle management of image-loading operations, Glide is initialized within the context of the itemView using Glide.with(context) The load(imageUrl) method is then utilized to load images from either a specified URL or a local resource.
into(imageView): Binds the loaded image to a specific ImageView
3.2.3) Usage in Activities and Fragments
In activities or fragments like Bundle_page.kt and skin_detail.kt, Glide is used to load images into the user interface:
placeholder(R.drawable.placeholder) // Temporary image shown while loading
error(R.drawable.error) // Fallback image if loading fails into(bundleImageView)
3.2.4) Files and Components Utilizing Glide
Glide is used in multiple files and components of the project:
File How Glide is Used
CartAdapter.kt Loads images for items in the shopping cart bundle_adapter.kt Displays images for product bundles in a list
InventoryAdapter.kt Loads images for inventory items
Items_adapter.kt Displays images for shop items
Bundle_page.kt Loads detailed images of a bundle when selected by the user skin_detail.kt Displays images and details of product skins (e.g., weapons in the game Valorant)
Table 10: Glide implementation in code
Glide uses caching to reduce network usage and image load times by preloading images It also automatically handles lifecycle issues to minimize errors during state changes, like screen transitions
Features like placeholder() and error() manage slow or failed image loads The custom MyAppGlideModule extends functionality without major code changes
Glide reduces the need for manual image loading (e.g., using HttpURLConnection), simplifying the code and making the project more maintainable
The Valorant Shop Login page provides authentication for the application Its design is clean and consistent with the Valorant brand, featuring a dark red background, white text, and red accents
The page includes a "Valorant shop" title, a prominent Valorant logo, "Email" and
"Password" input fields (with likely password masking), and a "LOGIN" button
"Forget Password?" link, Facebook and Google social login options, and a "New to the game? Sign up here" registration link are also provided
The page supports email/password login, social login, and account creation, it ensures clear, user-friendly, with multiple options
Figure 26: Login Page Data flow diagram
Example code: private fun signInWithEmail(email: String, password: String) { auth.signInWithEmailAndPassword(email, password)
addOnCompleteListener(this) { task -> if (task.isSuccessful) {
Toast.makeText(this,"Authentication success.",
Toast.LENGTH_SHORT).show() startActivity(Intent(this, MainPageActivity::class.java)) finish()
Toast.makeText(this,"Authenticationf ailed.",
The auth.signInWithEmailAndPassword(email, password) method is part of