E-Commerce SceneView Sample app

[Blizl]

E-Commerce SceneView Sample app

This app contains two main screens that an ecommerce app generally would have, a product description screen that contains metadata about a product and a second virtual try on screen for users to try out the product in 3D.

This sample app follows most of the modern architecture guidelines as of 2023. (Dependency Injection isn't used to try to keep things a little simpler) https://developer.android.com/topic/architecture

Architecture:

UI Events are user taps, clicks, actions, which modify state stored in the ViewModel.
UI Actions are one time events for navigations, toasts, etc.
ViewModel is used to hold state and ui actions which are StateFlows.
Data layer - contains your data models and repositories
Domain Layer - seperation between presentation layer and data layer (usually interface implementations, but in some cases can include classes)
Presentation Layer - Android specific classes, UI, etc,

Two main screens:

• ProductDescriptionScreen.kt
• VirtualTryOnScreen.kt (contains SceneView usage in Jetpack Compose)

Credits: All products are not my own images and are credited to LongChamp.

3D Model was a free asset downloaded from https://free3d.com/3d-model/womens-bag-373622.html

Demo:

telegram-cloud-document-1-5093660917602714233.mp4

[Blizl]

@ThomasGorisse Can you take a look at this when you have time? Thanks!

[grassydragon]

Hi @Blizl!
I've taken a quick look at your pull request and it looks great! I'm not an expert when it comes to Compose so the final decision is still on Thomas.

Anyway, here are my thoughts:

• There are some things like sample tests that can be removed.
• Is it a "view in your space" sample rather than a "virtual try on" sample?
• The sample is more advanced than the current samples since it not only showcases AR or 3D features of the framework but also the Android development guidelines. I think we should indicate this somehow.

[Blizl]

@grassydragon Thanks for the review! I've renamed the feature from Virtual Try On to View in Your Space. I've also removed some files that were not needed. I've also added a readme as below:

E-commerce Jetpack Compose SceneView Sample App

Overview

Welcome to the "E-commerce Jetpack Compose SceneView Sample App." This advanced sample app demonstrates how to create a modern e-commerce product description screen with additional features like adding products to the cart and viewing them in your space using SceneView for 3D model placement. The app follows modern Android architecture principles using Clean Architecture.

Key Components

Clean Architecture

This app follows Clean Architecture principles, separating the codebase into three layers:

1. Data Layer: Responsible for interacting with data sources such as databases, APIs, or local storage. It provides data to the domain layer and includes repository implementations.

2. Domain Layer: Contains the business logic and use cases of the app. It is independent of the data and presentation layers and defines the core functionality of the app.

3. Presentation Layer: Handles the UI logic and rendering using Jetpack Compose. It communicates with the domain layer via ViewModels to display data and respond to user interactions.

UI Events

UI events in this app represent user interactions or actions triggered within the Composable functions. These events are sent to the ViewModel for processing. For example, when the user taps the "Add to Cart" button or "View in your space" button, UI events are dispatched to the ViewModel to handle the corresponding actions.

ViewModel

The ViewModel is a crucial part of this app's architecture. It acts as an intermediary between the Presentation and Domain layers. ViewModels receive UI events, process them, and update the ViewState accordingly. They also trigger UiActions to navigate to different screens or display notifications.

ViewState

ViewState represents the current state of the UI. It includes data that should be displayed on the screen, such as product details, images, and other relevant information. The Presentation layer observes the ViewState and updates the UI accordingly. When the ViewState changes, Jetpack Compose recomposes the UI to reflect the new state.

Screens

Product Description Screen

The main feature of this app is the product description screen. It displays detailed information about a product and provides the following functionalities:

• Product Images Carousel
• "View in your space" button to launch the camera for virtual try-on
• Product title, color, and description
• Price and "Add to Cart" button

View In Your Space Screen

The "View In Your Space" screen is a pivotal feature of this app, offering users the ability to place 3D models in their real-world environment using augmented reality. This screen showcases the app's cutting-edge capabilities with ARCore and SceneView.

This screen provides a rich AR experience and includes the following features:

• Augmented reality rendering of 3D models in real-world settings.
• Interactive gestures for placing and rotating 3D models.
• UI feedback based on the AR experience, such as readiness to place the model and hints for user actions.
• Integration with ARCore to track surfaces and enable accurate model placement.

The "View In Your Space" screen exemplifies how modern Android development can seamlessly incorporate augmented reality to enhance user engagement and interaction. It leverages the power of AR technology to create immersive and dynamic experiences within the app.

Feel free to explore and customize this screen to suit your specific AR application needs.

Dependencies

This app uses Jetpack Compose for UI rendering and follows the principles of clean architecture for maintainability and scalability. It also leverages SceneView for 3D model placement in the virtual try-on feature.

Get Started

To run the app, follow these steps:

1. Clone the repository.
2. Build and run the app on your Android device or emulator.

[grassydragon]

Hi @Blizl!
Thank you! I'll take a look at the code again.

[ravirajdarisi]

@Blizl I am working on the similar app just like the way you have showcased in the video, could you please share the source code of the sample, that will be a great reference for me, Thank you in advance.