Addis Ababa Institute of Technology

School of Information Technology and Engineering

Department of Software Engineering

Compose Builder

All in One Document

Team Members
- Abel Mekonnen
- Bruk Tedla
- Hailemariam Arega
- Nazrawi Demeke
- Tamirat Dereje

Advisor: Mr. Betsegaw Lemma

Date - June, 2024

Table of Contents
Definitions, Acronyms, and Abbreviations......................................................................................................... 1
Abstract............................................................................................................................................................... 2
1. Introduction..................................................................................................................................................... 3
1.1 Background............................................................................................................................................. 3
1.1.1 Motivation...................................................................................................................................... 3
1.1.2 Customer........................................................................................................................................ 3
1.1.3 Deliverables.................................................................................................................................... 3
1.1.4 Cost.................................................................................................................................................3
1.1.5 Duration..........................................................................................................................................3
1.1.6 Organizations Involved...................................................................................................................3
1.1.7 Dependencies..................................................................................................................................4
1.1.8 Contributing Projects......................................................................................................................4
1.2 Existing Systems..................................................................................................................................... 4
1.2.1 XML-based UI Framework............................................................................................................ 4
1.2.2 Jetpack Compose............................................................................................................................4
1.2.3 Relay...............................................................................................................................................4
1.3 Statement of the Problem........................................................................................................................ 5
1.4 Objective of the Project........................................................................................................................... 5
1.4.1 General Objective........................................................................................................................... 5
1.4.1 Specific Objective...........................................................................................................................6
1.5 Proposed System..................................................................................................................................... 6
1.5.1 Drag-and-Drop Interface................................................................................................................ 6
1.5.2 Code Generation.............................................................................................................................6
1.5.3 Component Library........................................................................................................................ 7
1.5.4 Real-time Preview.......................................................................................................................... 7
1.5.5 Error-Free Code..............................................................................................................................7
1.5.6 Usability Enhancements................................................................................................................. 7
1.6 Feasibility Study......................................................................................................................................7
1.6.1 Economic Feasibility...................................................................................................................... 7
1.7 Scope....................................................................................................................................................... 8
1.7.1 Major Features/Components/Functionalities..................................................................................8
1.7.2 Exclusions...................................................................................................................................... 8
1.7.3 Deliverables.................................................................................................................................... 9
1.7.4 Technical Scope............................................................................................................................10
1.8 Innovation & Creativity.........................................................................................................................10
1.8.1 Innovative Approach.................................................................................................................... 11
 Compose Builder 2024

1.8.2 Creativity in UI Code Generation.................................................................................................11

1.8.3 Scope for Future Creativity:......................................................................................................... 11
1.9 Market and Startup Opportunities......................................................................................................... 11
1.9.1 Target Market............................................................................................................................... 11
1.9.2 Market Size and Growth Potential................................................................................................12
1.9.3 Key Trends and Drivers................................................................................................................ 12
1.9.4 Competitive Analysis................................................................................................................... 12
1.9.5 Value Proposition......................................................................................................................... 13
1.10 Methodology....................................................................................................................................... 13
1.10.1 Development Approach..............................................................................................................13
1.10.2 Project Phases.............................................................................................................................13
1.10.3 Roles and Responsibilities..........................................................................................................14
1.10.4 Tools and Technologies.............................................................................................................. 14
1.11 Resource Acquisition.......................................................................................................................... 15
1.11.1 Data Requirements and Acquisition Plan...................................................................................15
1.11.2 Hardware Requirements and Acquisition/Access Plan.............................................................. 15
1.11.3 Risk, Risk Management, and Contingency Plans.......................................................................16
1.12 Project Management Plan....................................................................................................................18
1.12.1 Time Management Plan..............................................................................................................18
1.12.2 Quality Management Plan.......................................................................................................... 18
1.12.3 Project Management Plan to Enable Quality:............................................................................ 19
1.12.4 Planned Testing Considerations................................................................................................. 19
1.13 Communication Management Plan............................................................................................... 20
2. Requirement Analysis................................................................................................................................... 21
2.1. Introduction.......................................................................................................................................... 21
2.1.1 Purpose......................................................................................................................................... 21
2.1.2 Scope............................................................................................................................................ 21
2.1.3 Overview...................................................................................................................................... 23
2.2. General Description..............................................................................................................................25
2.2.1 Product Perspective...................................................................................................................... 25
2.2.2 Product Functions.........................................................................................................................26
2.2.3 User Characteristics......................................................................................................................27
2.2.4 General Constraints...................................................................................................................... 29
2.2.5 Assumptions and Dependencies...................................................................................................31
2.3. Specific Requirements.......................................................................................................................... 33
2.3.2 External Interface Requirements.................................................................................................. 33
 Compose Builder 2024

2.3.2 Functional Requirements..............................................................................................................35

2.3.3 Use Cases..................................................................................................................................... 43
2. Drag and Drop................................................................................................................................... 46
Use Case Diagram................................................................................................................................. 51
2.3.4 Non-Functional Requirements..................................................................................................... 53
2.3.5 Inverse Requirements................................................................................................................... 55
2.3.6 Design Constraints....................................................................................................................... 55
2.3.7 Logical Database Requirements...................................................................................................55
2.3.8 Other Requirements......................................................................................................................56
2.4. Change Management Process...............................................................................................................56
2.4.2 Change Request Submission........................................................................................................ 56
2.4.3 Change Request Evaluation..........................................................................................................56
2.4.4 Change Implementation............................................................................................................... 56
2.4.5 Change Documentation................................................................................................................ 56
2.4.6 Change Review and Closure.........................................................................................................57
3. System Design...............................................................................................................................................59
3.1 Introduction........................................................................................................................................... 59
3.1.1 Purpose......................................................................................................................................... 59
3.1.2 General Overview.........................................................................................................................59
3.1.3 Development Methods & Contingencies......................................................................................60
3.2 System Architecture.............................................................................................................................. 61
3.2.1 Subsystem decomposition............................................................................................................ 61
3.2.2 Hardware/software mapping........................................................................................................ 64
3.3. Object Model.......................................................................................................................................64
3.3.1 Class Diagram.............................................................................................................................. 64
3.3.2 Sequence Diagram........................................................................................................................66
3.4. Detailed Design.................................................................................................................................... 75
3.4.1 User.............................................................................................................................................. 75
3.4.2 Project...........................................................................................................................................76
3.4.3 Screen........................................................................................................................................... 77
3.4.4 WidgetInstance............................................................................................................................. 78
3.4.5 Widget.......................................................................................................................................... 79
3.4.6 Component................................................................................................................................... 80
Appendix........................................................................................................................................................... 82
Reference.......................................................................................................................................................... 83
 Compose Builder 2024

Definitions, Acronyms, and Abbreviations

XML - Extensible markup language

IDE - Integrated Development Environment

UI - User Interface

Android Studio - Official Integrated Development Environment (IDE) for Android app development

Jetpack Compose - Android's recommended modern toolkit for building native UI

View-based UI - An XML-based framework that was the standard for developing Android UI until Jetpack
Compose was introduced

POC - Proof of Concept

JSON - JavaScript Object Notation

HTML - Hypertext Markup Language

CSS - Cascading Style Sheets

GitHub - Version Control and Collaboration Platform

CPU - Central Processing Unit

GPU - Graphics Processing Unit

RAM - Random Access Memory

CI/CD - Continuous Integration/Continuous Deployment

UAT - User Acceptance Testing

1
 Compose Builder 2024

Abstract

The "Compose Builder" project addresses the challenge posed by the transition from the traditional
XML-based UI framework to Jetpack Compose in Android development. Google's recommendation for
adopting Jetpack Compose promises a more efficient and streamlined development process. However, the
absence of a drag-and-drop framework for Compose creates a learning curve, particularly for developers
accustomed to the ease of XML-based design and novices that are getting started with android development.
To bridge this gap, our proposed solution is to develop a tool that facilitates UI design through a user-friendly
drag-and-drop interface, generating error-free Jetpack Compose UI code in Kotlin. The tool aims to replicate
the familiar drag-and-drop system of the view-based UI, enhancing the adaptability of developers and
accelerating overall development.

2
 Compose Builder 2024

1. Introduction

1.1 Background

1.1.1 Motivation
The motivation for this project is to streamline the UI development process in Jetpack Compose by offering a
more intuitive method through a drag-and-drop interface. It seeks to fill a gap in the product portfolio by
addressing the challenges associated with transitioning from traditional UI frameworks.

1.1.2 Customer
The primary customers for this project are Android developers and UI designers who are looking for a more
intuitive way to create UIs in Jetpack Compose.

1.1.3 Deliverables
The project will deliver a new tool that allows users to interact with and customize various UI components
through a drag-and-drop interface. This tool will translate designs into error-free Jetpack Compose UI code
in Kotlin, enhancing the efficiency of the development process. It represents a new product designed to
complement Jetpack Compose.

1.1.4 Cost
Regarding cost, the project leverages existing hardware and software resources, with a detailed cost analysis
to be conducted during ongoing assessments.

1.1.5 Duration
The estimated duration for the project is anticipated to be around 7 months; however, this is a rough estimate.
The timeline encompasses the various phases of development, testing, and refinement required to meet the
specified goal. The timeline may be subject to adjustments based on different unforeseen factors.

1.1.6 Organizations Involved

While the project is largely independent, potential collaboration with other projects within the Android
development ecosystem may influence its outcomes or be influenced by them.

3
 Compose Builder 2024

1.1.7 Dependencies
For example, the integration of the tool with Android Studio IDE could depend on the progress and
compatibility of related projects. Ongoing collaboration and communication with relevant projects will
ensure a cohesive and harmonized development environment.

1.1.8 Contributing Projects

While not explicitly mentioned, other projects within the Android development ecosystem may contribute to
the results of the "Compose Builder" project.

1.2 Existing Systems

1.2.1 XML-based UI Framework

Historically, Android development relied on XML for creating user interfaces, utilizing a drag-and-drop
system in Android Studio. This method offers simplicity but is becoming obsolete with the shift towards
Jetpack Compose.

1.2.2 Jetpack Compose

Google's recommended declarative UI framework for Android. While powerful, it lacks a drag-and-drop
interface, making it challenging for developers accustomed to the ease of the XML-based system.

As of current information on the internet, there is no alternative way to develop Jetpack Compose UI using
drag-and-drop, so our application could be a first. Android Studio’s efforts culminate at a live-preview
interface which refreshes as you write the code but the interface is read only. We aim to build a similar
interface but one that can take user input to modify the code as well.

1.2.3 Relay
Google’s Figma plugin for converting Figma designs to Jetpack Compose code. This is a new tool being
developed and is meant to streamline the development process, however our product is different from this
platform. For starters, we will allow users to include UI level state - this means that developers can specify
what state variables in the Viewmodel will be observed by the respective UI components. We will then use
this information to generate the Viewmodel and allow the developer to start working from there.

4
 Compose Builder 2024

One other point is that for Relay to be an effective tool, the developer either needs good Figma skills or a
dedicated UI designer. Our platform includes native components that Android developers are already familiar
with that they can easily go in and use.

1.3 Statement of the Problem

The transition from the traditional XML-based UI framework to Jetpack Compose introduces a significant
hurdle for developers. The absence of a drag-and-drop framework in Compose complicates UI design,
elongating the learning curve, slowing down development process and hindering a seamless migration.

The significance lies in the potential slowdown of Android development processes. Developers accustomed to
the simplicity of drag-and-drop UI design may face resistance in adopting Compose, impacting project
timelines and efficiency.

The current gap exists in the lack of a user-friendly design interface for Jetpack Compose. Developers are
accustomed to visual UI design methods, and the absence of this in Compose creates a mismatch in
established practices.

Stakeholders include Android developers, UI designers, and organizations invested in efficient Android app
development. The solution is relevant to developers seeking a smoother transition to Jetpack Compose and
organizations aiming for enhanced development productivity.

Failure to address the gap may result in prolonged adaptation periods for developers, leading to delays in
project timelines. It could also discourage the adoption of Jetpack Compose, limiting the benefits offered by
this recommended framework.

The proposed solution is the development of the "Compose Builder" tool, featuring a drag-and-drop interface
for Jetpack Compose. This tool will streamline UI design, generate error-free Kotlin code, and ease the
learning curve for developers. Key benefits include a more intuitive UI design process, faster development
cycles, and increased adoption of Jetpack Compose within the Android development community.

1.4 Objective of the Project

1.4.1 General Objective

Design and implement a tool with a primary focus on developing a Kotlin code generator for Jetpack
Compose UI. The objective is to provide Android developers with a user-friendly drag-and-drop interface,
streamlining the UI design process and generating compilable Kotlin code. The project aims to achieve a
significant reduction in UI design time compared to traditional methods, measured through developer

5
 Compose Builder 2024

feedback and the rate of successful compilation of the generated code. This targeted approach emphasizes the
relevance of the solution to the specific needs of developers, making it both measurable and achievable.

1.4.1 Specific Objective

1.4.1.1 Proof of Concept Development

Build a proof of concept (POC) for the "Compose Builder" tool, emphasizing a limited set of UI components
to demonstrate the core functionality of the drag-and-drop interface for Jetpack Compose UI design.

1.4.1.2 Prototype Development

Following the successful POC, proceed to develop a functional prototype of the "Compose Builder" tool,
expanding on the initial limited set of components to showcase broader capabilities.

1.4.1.3 Code Generation Accuracy

Achieve a higher success rate in generating compilable Kotlin code from the drag-and-drop interface,
ensuring the tool's efficacy in translating visual designs into functional Compose UI elements.

1.4.1.4 User Feedback Iteration

Implement an iterative feedback loop, collecting input from early adopters and developers, and incorporating
enhancements to the tool's usability and features based on their suggestions.

1.4.1.5 Documentation and Tutorials

Create comprehensive documentation and tutorials for the "Compose Builder" tool, providing clear
instructions for users and ensuring the accessibility of the tool's functionalities.

1.5 Proposed System

1.5.1 Drag-and-Drop Interface

Intuitive drag-and-drop functionality allows developers to visually design and customize Jetpack Compose
UIs effortlessly.

1.5.2 Code Generation

Accurate and efficient generation of compilable Kotlin code from the drag-and-drop interface, ensuring a
seamless transition from visual design to functional code.

6
 Compose Builder 2024

1.5.3 Component Library

A rich library of UI components that users can easily drag and drop, providing a diverse set of options for
building Compose UIs.

1.5.4 Real-time Preview

Instantaneous real-time preview of the designed UI, allowing developers to visualize changes and make
adjustments on-the-fly.

1.5.5 Error-Free Code

The system guarantees error-free Kotlin code generation, eliminating common issues and enhancing the
reliability of the produced code.

1.5.6 Usability Enhancements

User-friendly features such as undo/redo functionality, copy-paste elements, and keyboard shortcuts to
enhance the overall usability of the tool.

1.6 Feasibility Study

1.6.1 Economic Feasibility

Developmental cost

Compose Builder's development is strategically designed to be cost-effective. The absence of salaried

positions significantly minimizes developmental costs, allowing the project to capitalize on the skills and
resources already possessed by our team. Utilizing existing workstations and software tools, the team can
progress efficiently without the need for substantial financial investment in additional hardware or specialized
software.

The project's emphasis on simplicity and practicality aligns with our existing knowledge and capabilities,
eliminating the necessity for costly external training or onboarding. By leveraging readily available
programming environments, such as Kotlin and Android Studio, the development process remains
cost-efficient while maintaining a focus on the essential features required for a successful drag-and-drop
interface in Jetpack Compose.

7
 Compose Builder 2024

Operational Cost

Operational costs for Compose Builder are expected to be nominal. As the tool integrates seamlessly into the
existing Android development environment, there are no significant additional operational expenses
anticipated. The team will manage essential operational aspects, including continuous integration and testing,
within the scope of their existing resources.

1.7 Scope

1.7.1 Major Features/Components/Functionalities

Drag-and-Drop Interface

● Develop a user-friendly drag-and-drop interface for designing UI elements.

● Ensure intuitive placement and manipulation of UI components.

Code Generation

● Implement a robust code generation mechanism to produce error-free Jetpack Compose UI code in
Kotlin.

● Validate the generated code against common best practices and Compose guidelines.

Reliability

● Prioritize the reliability of code generation to minimize errors and bugs in the generated Jetpack
Compose UI code.

● Implement thorough testing procedures to validate the correctness of the generated code.

Documentation

● Provide comprehensive documentation for developers on how to use the tool effectively.

1.7.2 Exclusions

Advanced Code Customization:

● The tool will focus on generating standard Jetpack Compose UI code and may not support highly
customized or advanced code configurations.

8
 Compose Builder 2024

Non-UI Code Generation:

● The scope is limited to the generation of Jetpack Compose UI code and does not extend to generating
non-UI-related code.

Extensibility Beyond Kotlin and Compose:

● The tool will be limited to generating Kotlin code for Jetpack Compose and will not support other UI
frameworks like Flutter or React.

Advanced Features (Secondary Goals):

● Features such as extensibility and integration with Android Studio IDE are considered secondary
goals and may not be included in the initial release.

1.7.3 Deliverables

Drag-and-Drop Tool

● Deliver a web app drag-and-drop tool for designing Jetpack Compose UI elements.

Code Generator Module

● Provide a module for code generation that can be integrated into Android projects.

Documentation Package

● Deliver comprehensive documentation, including user guides and tutorials for the drag-and-drop tool
and code generation module.

Test Reports

● Provide documentation on the testing procedures conducted, along with reports on the reliability and
correctness of the generated code.

By defining these aspects of the project scope, exclusions, and deliverables, we aim to create a clear
understanding of the project's objectives and limitations.

9
 Compose Builder 2024

1.7.4 Technical Scope

Jetpack Compose Fundamentals

● A deep understanding of Jetpack Compose is essential for generating accurate and efficient UI code.
Topics will cover Compose components, state management, and composables to ensure the generated
code aligns with best practices and efficiently represents the desired UI.

Kotlin Programming Language

● As the project involves generating Jetpack Compose UI code in Kotlin, a comprehensive

understanding of the Kotlin programming language is necessary. Topics will include language
features, syntax, and best practices to ensure the generated code is clean, readable, and adheres to
Kotlin conventions.

React.js Fundamentals

● Since the frontend will be developed using React.js, a solid understanding of React.js fundamentals
is crucial. Topics will include component-based architecture, state management, and the Virtual DOM
to ensure a responsive and efficient user interface

State Management in React

● Effective state management is vital for handling user interactions and maintaining the application's
state. Topics will include exploring state management solutions in React, such as React Hooks or
state containers, to ensure consistency and reliability in managing UI design elements.

Responsive and Accessible UI Design

● Ensuring the frontend is responsive and accessible is crucial for providing a positive user experience.
Topics will include responsive design principles, accessibility standards, and testing methodologies to
guarantee the tool is usable across various devices and for users with different abilities.

1.8 Innovation & Creativity

To address the challenge posed by the transition from the traditional XML-based UI framework to Jetpack
Compose in Android development, Compose Builder is designed to introduce a drag-and-drop interface for
creating Compose UI code. This innovation stems from the recognition that the absence of a familiar
10
 Compose Builder 2024

drag-and-drop framework in Compose significantly impedes the migration process for developers
accustomed to the XML paradigm. In fact, as of the date on this document, there is no drag-and-drop
available for Jetpack Compose that we know of. Our proposal aims to enhance the efficiency and ease of
Compose adoption by leveraging a creative solution that combines the intuitiveness of drag-and-drop design
with the power of the Compose framework.

1.8.1 Innovative Approach

The innovative aspect of Compose Builder lies in its ability to seamlessly bridge the gap between the
user-friendly, visual design offered by drag-and-drop interfaces and the powerful, declarative nature of
Jetpack Compose. By offering a tool that allows users to interact with and customize various UI components
through an intuitive drag-and-drop system, we envision simplifying the Compose learning curve for both
seasoned developers and newcomers alike. This approach not only aligns with Google's directive to transition
to Compose but also propels Android app development into a more accessible and efficient era.

1.8.2 Creativity in UI Code Generation

The heart of our innovation lies in the creative process of translating user interactions within the
drag-and-drop interface into error-free, production-ready Compose UI code. The tool's ability to interpret the
visual layout and preferences of the user and convert them into Kotlin code reflects a creative solution to the
challenges posed by the absence of a traditional visual design framework in Compose. This creative
integration of drag-and-drop convenience with the robust capabilities of Compose is poised to redefine the
development experience for Android app creators.

1.8.3 Scope for Future Creativity:

While the primary focus is on creating a reliable tool for generating error-free Compose code, we
acknowledge the potential for future creativity in terms of extensibility and integration with Android Studio
IDE. These secondary goals offer avenues for further innovation, opening doors to a more feature-rich and
seamlessly integrated development environment. The proposed limitations to Kotlin and Compose are a
strategic decision to maintain focus and streamline development efforts, ensuring a robust and targeted
solution without unnecessary complexities.

1.9 Market and Startup Opportunities

1.9.1 Target Market

The target market for the Compose Builder tool includes Android developers and UI designers who are
transitioning or planning to transition to Jetpack Compose for Android development.
11
 Compose Builder 2024

1.9.2 Market Size and Growth Potential

The Android development market is vast, with millions of developers worldwide. The growth potential lies in
the increasing adoption of Jetpack Compose as the recommended UI framework by Google.

1.9.3 Key Trends and Drivers

The shift towards declarative UI frameworks, such as Jetpack Compose, is a key trend in Android
development.

The demand for tools that ease the transition from traditional XML-based UI frameworks to Jetpack
Compose is driven by the need for increased development efficiency.

1.9.4 Competitive Analysis

As of the current landscape, there may not be direct competitors with a similar focus on a drag-and-drop
interface for Jetpack Compose.

Strengths of Compose Builder:

● Targeted Approach: Compose Builder focuses specifically on Jetpack Compose, providing a niche
solution for developers in the Android ecosystem.

● Familiar UI Design: The drag-and-drop interface mirrors the familiarity of XML-based UI design,
making it easier for developers to transition.

● Open Source Model: The open-source nature of Compose Builder fosters collaboration,
community-driven improvements, and widespread adoption.

Potential Challenges

● Learning Curve: Developers may initially face a learning curve in transitioning to Jetpack Compose,
even with the drag-and-drop interface.

● Dependency on Jetpack Compose: The success of Compose Builder is closely tied to the adoption
and sustained development of Jetpack Compose by the Android community.

12
 Compose Builder 2024

1.9.5 Value Proposition

● Focused on Jetpack Compose: Compose Builder is tailored specifically for Android developers
embracing Jetpack Compose, offering a seamless transition without the need to learn an additional
framework.

● Familiar Drag and Drop Interface: The tool provides a user-friendly drag and drop interface,
mirroring the familiarity of XML-based UI design, reducing the learning curve for developers.

● Error-Free Code Generation: Emphasis on generating reliable, bug-free Jetpack Compose code,
ensuring the efficiency and quality of the development process.

1.10 Methodology

1.10.1 Development Approach

The development approach for the "Compose Builder" project will adhere to the Waterfall methodology. The
decision to adopt a Waterfall approach is based on the project's specific requirements and constraints. Given
the clearly defined and stable nature of the project's goals, along with the importance of a systematic and
predictable development process, the Waterfall model is well-suited.

1.10.2 Project Phases

1. Requirements Gathering:

a. Engage in comprehensive discussions with Android developers to understand their challenges

in transitioning from XML-based UI to Jetpack Compose.

b. Analyze Google's Jetpack Compose documentation thoroughly to extract key features and best
practices.

c. Analyze Google’s Jetpack Compose live preview mechanism.

2. Design:

a. Develop a detailed design plan for the drag-and-drop interface based on the gathered
requirements.

b. Create a comprehensive architecture for the tool, emphasizing scalability, modularity, and
strict adherence to Jetpack Compose standards.

3. Implementation:
13
 Compose Builder 2024

a. Execute the design plan by implementing the drag-and-drop interface using suitable front-end
technologies.

b. Develop the back-end logic for code generation in Kotlin, focusing on accuracy and adherence
to Jetpack Compose guidelines.

4. Testing:

a. Conduct unit testing for individual components to ensure their functionality.

b. Implement system testing to validate the tool's overall performance and its compatibility with
various UI design scenarios.

5. Deployment:

a. Release the tool once it has successfully passed all testing phases and meets the predefined
criteria.

b. Provide comprehensive documentation to guide users in the effective utilization of the tool.

6. Maintenance:

a. Establish a structured maintenance plan to address any post-deployment issues or updates.

b. Conduct periodic reviews to assess the tool's performance and address evolving user needs.

1.10.3 Roles and Responsibilities

● Project Manager:

○ Oversees the entire project, ensuring it progresses through each phase in a linear and
systematic manner.

● Front-end Developers:

○ Implements the front-end components according to the finalized design.

● Back-end Developers:

○ Develops the back-end logic for code generation in adherence to the established architecture.

1.10.4 Tools and Technologies

● Front-end Development:

14
 Compose Builder 2024

○ HTML5, CSS3, JavaScript (React.js).

● Back-end Development:

○ Python for the back-end logic and code generator.

● Code Generation:

○ Kotlin, following Jetpack Compose guidelines.

○ JSON based intermediate description of widget tree.

● Version Control:

○ Git for version control and tracking changes.

● Project Management:

○ Github Projects for issue tracking and project management.

● Communication:

○ Weekly stands-ups.

○ Async communication for 1:1 and urgent communications.

● Documentation:

○ Github Wiki for internal documentation and user guides.

The Waterfall methodology will provide a structured and controlled development process, allowing for
thorough planning and documentation, which is crucial for the success of the "Compose Builder" project.

1.11 Resource Acquisition

1.11.1 Data Requirements and Acquisition Plan

Since the Compose builder project doesn’t need any AI and we don’t need any data set.

1.11.2 Hardware Requirements and Acquisition/Access Plan

Our primary resource considerations revolve around ensuring a robust hardware infrastructure to support
efficient development and testing.

15
 Compose Builder 2024

Hardware Requirements:
● High-Performance Workstations: Equipped with modern processors, sufficient RAM, and dedicated
GPUs to handle the computational demands of UI design, code generation, and real-time preview.

● Storage Capacity: Adequate storage to handle project files, assets, and code repositories efficiently.
We are planning to use third party cloud storages to accommodate the storage needs.

1.11.3 Risk, Risk Management, and Contingency Plans

We might face different problems during development like technical, schedule, and some external risks.

Identification of Risks and Risk Assessment:

1. Technical Risks:

● Risk: Unforeseen compatibility issues between the "Compose Builder" tool and evolving
versions of Jetpack Compose.

● Impact: High, as it may result in delayed updates or a tool that is not in sync with the latest
Compose features.

● Likelihood: Medium, given the dynamic nature of software frameworks

2. Schedule Risks:

● Risk: Unforeseen complexities during the development phases leading to schedule overruns.

● Impact: Medium to High, as it may affect project milestones and deadlines.

● Likelihood: Medium, given the innovative nature of the project.

3. External Risks:

● Risk: Dependency on external libraries or tools that may not align with the project's schedule
or compatibility requirements.

● Impact: Medium, as delays in external dependencies can affect the overall project timeline.

● Likelihood: Medium, depending on the responsiveness of third-party providers.

Risk Mitigation Strategies:

1. Technical Risks:

16
 Compose Builder 2024

● Mitigation: Establish a proactive communication channel with the Jetpack Compose

development community. Regularly monitor updates and adapt the "Compose Builder" tool
accordingly to maintain compatibility.

2. Schedule Risks:

● Mitigation: Break down the project into smaller, manageable phases with clearly defined
milestones. Regularly reassess progress and adjust schedules as needed.

3. External Risks:

● Mitigation: Diversify dependencies where possible and stay informed about the development
roadmap of external libraries. Have contingency plans for alternative tools or libraries if
needed.

Contingency Plans:
1. Technical Risks:

● Contingency: Develop a rollback plan to revert to the previous stable version of the tool if
compatibility issues become insurmountable. This ensures continuity while addressing
technical challenges.

2. Schedule Risks:

● Contingency: Allocate buffer times in the project schedule to account for unexpected delays.
In case of schedule overruns, prioritize critical features and functionalities to ensure a phased
release if necessary.

3. External Risks:

● Contingency: Develop fallback mechanisms to switch to alternative libraries or tools

seamlessly. Regularly reassess dependencies and be prepared to pivot to alternative solutions
if the primary choices encounter unforeseen challenges.

17
 Compose Builder 2024

1.12 Project Management Plan

1.12.1 Time Management Plan

Nov Dec Jan Feb Mar Apr May Jun

Project Ideation and Proposal

Requirement Gathering

Design

Development and Testing

Deployment

1.12.2 Quality Management Plan

Potential Risks Related to Software Quality:

a. Code Generation Accuracy:

Risk: The tool may generate incorrect or suboptimal Jetpack Compose code, leading to functional issues in
the Android application.

Mitigation: Implement extensive unit testing for code generation, conduct code reviews, and provide a
mechanism for user feedback to iteratively improve code accuracy.

b. User Interface Usability:

Risk: The drag-and-drop interface may not be intuitive, causing usability issues for developers transitioning
from XML-based design.

Mitigation: Engage in usability testing with target users, gather feedback iteratively, and refine the user
interface based on the results.

18
 Compose Builder 2024

1.12.3 Project Management Plan to Enable Quality:

a. Code Reviews:

Implement a robust peer code review process to ensure code quality, identify potential issues early, and
promote knowledge sharing among the development team.

b. Automated Testing:

Develop and maintain a comprehensive suite of automated tests for both frontend and backend components
to catch regressions and ensure the reliability of the tool.

c. Continuous Integration/Continuous Deployment (CI/CD):

Utilize CI/CD pipelines to automate the build, test, and deployment processes, ensuring consistent and
reliable releases.

d. User Feedback Mechanism:

Integrate a user feedback mechanism within the tool to collect input from developers, allowing for
continuous improvement based on real-world usage.

1.12.4 Planned Testing Considerations

a. Unit Testing:

Implement unit testing for critical components, including code generation algorithms, to ensure the
correctness of individual units of code.

b. Integration Testing:

Conduct integration testing to verify the seamless interaction between the frontend and backend components,
identifying and resolving any communication issues.

c. User Acceptance Testing (UAT):

Engage users in UAT to assess the overall usability, performance, and reliability of the tool in a real-world
environment, incorporating feedback into the development process.

19
 Compose Builder 2024

d. Performance Testing:

Perform performance testing to evaluate the responsiveness of the frontend, especially during drag-and-drop
interactions, ensuring a smooth user experience.

1.13 Communication Management Plan

Type of Method / Tool Frequency/S Information Participants /

Communication chedule Responsibles
Internal Communication:
Project Google Meet Weekly Project status, problems, Project Team
Meetings/Stand-ups risks, changed requirements
Milestone Meetings Google Meet Before Project status (progess) Project Mgr
milestones Sub-project Mgr
Final Project Google Meet Once Wrap-up Project Team
Meeting Experiences Project Advisor
External Communication and Reporting:
Project Report In-person Monthly Project status Project Team
meeting/Google - progress Project Advisor
meet - forecast
- risks

20
 Compose Builder 2024

2. Requirement Analysis

2.1. Introduction
The transition from traditional XML-based User Interface (UI) frameworks to modern solutions
like Jetpack Compose presents a significant challenge for Android developers. While Jetpack
Compose promises increased efficiency and a streamlined development process, the complexity
of migrating existing UI code poses obstacles for developers accustomed to XML-based layouts.
Recognizing the need for a more intuitive approach to UI design, we have pivoted our project
scope to address this challenge by developing a drag-and-drop web application for building
Jetpack Compose UIs.

2.1.1 Purpose
This Software Requirements Specification (SRS) document serves to outline the requirements for
the development of our drag-and-drop web application. The purpose of the application is to
provide developers with a user-friendly interface for designing Jetpack Compose UI layouts
through intuitive drag-and-drop interactions. By simplifying the UI design process, our
application aims to facilitate the adoption of Jetpack Compose and enhance the efficiency of
Android app development.

2.1.2 Scope

2.1.2.1 Software Product

The software product under consideration is a drag-and-drop web application for building
Jetpack Compose UIs. The application will be accessible through web browsers and will not
require installation or configuration on users' devices.

2.1.2.2 Description of Software Product Functionality

The drag-and-drop web application will enable users to design UI layouts by dragging UI
components onto a canvas and arranging them according to their preferences. Real-time previews
of the UI layout will be provided, allowing users to visualize the appearance of their designs.
Upon completion, the application will generate Jetpack Compose code corresponding to the
user's design, which can be seamlessly integrated into Android projects.

21
 Compose Builder 2024

2.1.2.2.1 What the Software Product Will Do

The drag-and-drop web application for building Jetpack Compose UIs will offer the following
functionalities:

● Intuitive UI Design: Users will be able to design UI layouts by dragging UI components

(such as buttons, text fields, images, etc.) onto a virtual canvas and arranging them using
simple drag-and-drop interactions.

● Real-Time Previews: The application will provide real-time previews of the UI layout as
users design, allowing them to visualize the appearance and structure of their designs
instantly.

● Jetpack Compose Code Generation: Upon completion of the UI design, the application
will automatically generate Jetpack Compose code corresponding to the user's layout.
This generated code can be readily incorporated into Android projects, saving developers
time and effort in manual coding.

2.1.2.2.2 What the Software Product Will Not Do

The drag-and-drop web application will not include the following functionalities:

● Direct Code Editing: Users will not have the ability to directly edit the generated Jetpack
Compose code within the application. The application focuses solely on providing a
visual interface for UI design through drag-and-drop interactions.

● Advanced UI Customizations: While the application will facilitate basic UI layout design
through drag-and-drop, it will not support advanced UI customizations or complex layout
configurations. Users requiring advanced customization may need to manually edit the
generated Jetpack Compose code.

● Integration with External Tools: The application will not directly integrate with external
development tools or libraries. Its primary function is to simplify the UI design process
within the context of Jetpack Compose development.

2.1.2.3 Application of the Software Product

2.1.2.3.1 Relevant Benefits, Objectives, and Goals

The drag-and-drop web application for building Jetpack Compose UIs offers several benefits,
objectives, and goals, including:

22
 Compose Builder 2024

● Enhanced Developer Productivity: By providing an intuitive interface for UI design, the

application aims to enhance developer productivity by reducing the time and effort
required for creating Jetpack Compose UI layouts.

● Simplified UI Design Process: The application's drag-and-drop functionality simplifies

the UI design process, making it accessible to developers with varying levels of expertise
in UI design and development.

● Promotion of Jetpack Compose Adoption: By offering a user-friendly tool for designing

Jetpack Compose UIs, the application seeks to promote the adoption of Jetpack Compose
within the Android development community, facilitating the transition from traditional
XML-based UI frameworks.

● Improved Developer Experience: The application aims to improve the overall developer
experience by providing a visual, interactive interface for UI design, thus making the
process more engaging and intuitive.

● Facilitation of Rapid Prototyping: The ability to quickly design and visualize UI layouts
using the application enables developers to prototype and iterate on their designs more
rapidly, accelerating the app development lifecycle.

2.1.3 Overview
The overview section of the Software Requirements Specification (SRS) provides a concise
summary of the document's contents and structure, tailored specifically to the drag-and-drop web
application for building Jetpack Compose UIs.

2.1.3.1 Contents of the SRS

● The SRS for the drag-and-drop web application includes the following key sections:

● Introduction: Offers an introduction to the SRS, highlighting the purpose, scope, and
conventions of the document as they relate to the development of the drag-and-drop web
application for building Jetpack Compose UIs.

● Specific Requirements:

○ External Interface Requirements: Outlines the interfaces relevant to the web

application, including user interfaces and communication interfaces.

23
 Compose Builder 2024

○ Functional Requirements: Describes the specific functionalities of the application,

such as drag-and-drop interactions, real-time previews, and Jetpack Compose
code generation.

○ Use Cases: Provides detailed scenarios and interactions to illustrate the behavior
of the software in various user-driven situations.

○ Non-Functional Requirements: Specifies performance, reliability, security, and

other non-functional requirements.

○ Inverse Requirements: Outlines aspects the software will not address, such as
direct code editing or integration with external tools.

○ Design Constraints: Identifies constraints imposed by compatibility with web

browsers and Jetpack Compose framework standards.

○ Logical Database Requirements: Acknowledges database requirements, if

applicable, within the project scope.

○ Other Requirements: Covers any additional requirements related to training,

deployment, or packaging of the application.

● Change Management Process: Outlines the process for managing changes to the software
requirements throughout the project lifecycle, ensuring transparency and accountability.

● References: Lists all documents and sources referenced in the SRS, providing necessary
context and background information for stakeholders.

● Appendices: May include supplementary materials, such as conceptual diagrams,

mockups, or meeting minutes, to support the content provided in the SRS.

2.1.3.2 Organization of the SRS

The SRS is organized in a structured manner to facilitate easy navigation and comprehension of
the document. It follows a logical progression from general to specific information, as follows:

● Introduction: Provides an initial overview of the SRS and its objectives.

● Specific Requirements: Details the specific functionalities, interfaces, and constraints of

the drag-and-drop web application.

24
 Compose Builder 2024

● Change Management Process: Describes the procedures for managing changes to the
software requirements.

● References: Lists all documents and sources referenced in the SRS.

● Appendices: Contains supplementary materials to support the content provided in the

SRS.

2.2. General Description

2.2.1 Product Perspective

2.2.1.1 Overview

The drag-and-drop web application for generating Jetpack Compose UI code is envisioned as a
pivotal tool within the realm of Android app development. It addresses the transition from
traditional XML-based UI design to the modern paradigm offered by Jetpack Compose,
streamlining the process and enhancing efficiency for developers.

2.2.1.2 Relationship with Web Environment

This application stands independently within web browsers, offering developers a versatile and
accessible platform for creating Jetpack Compose UI layouts. Its web-based nature allows for
seamless integration into various development environments, catering to developers across
different operating systems and devices.

2.2.1.3 Interactions with Existing Tools

The drag-and-drop web application harmonizes with existing development workflows, providing
developers with a visual interface to design Jetpack Compose UIs. It seamlessly integrates with
Android Studio and other development tools, facilitating a smooth transition from design to
implementation.

2.2.1.4 Relation to Other Web Tools

While the application focuses on UI design, it coexists with other web-based development tools
commonly used in Android app development. This includes version control systems,
collaborative platforms, and online repositories, enriching the development experience with a
comprehensive set of resources.

25
 Compose Builder 2024

2.2.1.5 Alignment with Industry Trends

The application aligns with industry trends by leveraging modern web technologies to simplify
UI design processes. Its compatibility with Jetpack Compose reflects the industry's transition
towards declarative UI frameworks, empowering developers to create elegant and efficient
Android UIs.

2.2.1.6 Constraints and Considerations

Despite its web-based nature, the application must adhere to web standards and browser
compatibility to ensure consistent performance across platforms. It must also comply with
Jetpack Compose framework standards to maintain compatibility and seamless integration with
Android projects.

2.2.1.7 Evolutionary Aspects

As web technologies and Android development practices evolve, the drag-and-drop web
application anticipates updates to accommodate emerging trends. Continuous improvements in
design, functionality, and compatibility will ensure its relevance and effectiveness in the dynamic
Android development landscape.

2.2.2 Product Functions

The drag-and-drop web application for generating Jetpack Compose UI code offers the following
essential functions:

2.2.2.1 Build UI with a Drag and Drop Interface

Users can build User Interface (UI) in the web application utilizing its drag and drop interface..

2.2.2.2 Generate Jetpack Compose Code

The application contains a code generator module, which takes the JSON representation of the
UI as its input and generates the appropriate Jetpack Compose code. This function is the root of
the system and allows users to effortlessly trigger the generation with a single action, enhancing
efficiency and productivity in UI development.

26
 Compose Builder 2024

2.2.3 User Characteristics

2.2.3.1 Overview

The drag-and-drop web application for generating Jetpack Compose UI code is designed to
accommodate a wide range of users involved in Android app development. Understanding the
diverse characteristics of these users is paramount to tailoring the application to their needs and
ensuring an exceptional user experience.

2.2.3.2 Android App Developers

Experience Level:

● Novice Developers: Individuals with limited experience in Android app development can
utilize the application to simplify the transition from developing XML-based UI using
drag-and-drop to Jetpack Compose.

● Experienced Developers: Seasoned developers familiar with Android development seek

efficiency and productivity enhancements in the UI development process and can leverage
the application to streamline their workflow.

Technical Proficiency:

● Familiarity with Material Components: Users are expected to possess a basic

understanding of Material UI components, the industry standard for components in
Android UI layouts.

● Knowledge of Jetpack Compose: While not mandatory, users with prior knowledge of
Jetpack Compose may utilize the application more effectively to design intricate UIs.

2.2.3.3 Interaction with the Application

Frequency of Use:

● Regular Users: Developers engaged in frequent Android app development tasks may
utilize the application regularly to create application screen UI in Jetpack Compose using
a drag and drop interface.

● Occasional Users: Users with intermittent UI development needs may employ the
application as required, seeking an efficient and user-friendly solution for their occasional
tasks.

27
 Compose Builder 2024

Workflow Integration:

● Integration into Development Workflow: The application seamlessly integrates into the
development workflow within the web environment, becoming an integral part of users'
design process.

● Initiation of Generation Process: Users initiate the generation process when creating a
new screen, utilizing the web platform to ensure a smooth transition from design to
implementation.

2.2.3.4 Expectations and Preferences

Efficiency and Speed:

● Quick Turnaround: Users expect a swift and efficient development process, minimizing
the time between coming up with the design and reviewing the generated Jetpack
Compose UI code.

● Real-time Feedback: Users prefer real-time feedback on errors during generation,

enabling immediate issue resolution and enhancing productivity.

User Interface Preferences:

● Intuitive Interface: Users appreciate an intuitive user interface within the web application,
featuring straightforward navigation and clear instructions for seamless creation of
Jetpack Compose UI code.

2.2.3.5 Adaptability to Change

Adaptability to New Technologies:

● Users within the dynamic Android development landscape are adaptable to emerging
technologies, such as the declarative UI paradigm introduced by Jetpack Compose.

● They expect the application to evolve alongside advancements in web technologies and
Jetpack Compose, ensuring continued relevance and effectiveness in the ever-evolving
Android development ecosystem.

28
 Compose Builder 2024

2.2.4 General Constraints

2.2.4.1 Overview

The development of the drag-and-drop web application for generating Jetpack Compose UI code
is subject to various constraints that shape its design and functionality. These constraints
encompass regulatory, technical, and operational considerations, guiding the decisions made
throughout the software development lifecycle.

2.2.4.2 Regulatory Policies

Compliance with Web Standards:

● The application must adhere to web standards and best practices to ensure compatibility
across different browsers and devices.

Security and Privacy Standards:

● The development process must align with industry-standard security and privacy
measures to safeguard user data and maintain the integrity of the generation process.

2.2.4.3 Hardware Limitations

Web Browser Compatibility:

● The application's design and functionality should be compatible with commonly used
web browsers to ensure accessibility for users across different platforms.

Optimization for Performance:

● Consideration must be given to hardware limitations, such as memory and processing

power, to optimize the application's performance and ensure smooth operation.

2.2.4.4 Interface to Other Applications

Integration with Web Development Tools:

● The application's interface should seamlessly integrate with other web development tools
and frameworks commonly used in Android app development, enhancing its utility and
versatility.

29
 Compose Builder 2024

2.2.4.5 Parallel Operation

Concurrency Support:

● The application should support parallel operation with other web-based development
tools, allowing developers to concurrently perform various tasks related to app
development without interference.

2.2.4.6 Audit Functions

Logging and Monitoring:

● The application must incorporate audit functions, including logging and monitoring
capabilities, to track activities and assist in debugging or issue resolution.

2.2.4.7 Control Functions

User Interaction Control:

● Adequate controls for user interactions should be provided within the application,
allowing developers to manage and monitor the generation process effectively.

2.2.4.8 Reliability Requirements

Stability and Consistency:

● The application must meet reliability requirements, ensuring stable and consistent
performance across different web browsers and development environments.

2.2.4.9 Safety and Security Considerations

Data Handling Security:

● Security considerations involve ensuring the secure handling of data during the
generation process, preventing data loss or unauthorized access.

● The application should not put the code or the project at risk of data loss or corruption,
and no code should be persisted in any way to ensure the safety of proprietary data.

30
 Compose Builder 2024

2.2.5 Assumptions and Dependencies

2.2.5.1 Assumptions

2.2.5.1.1 Operating Environment

Assumption:

● It is assumed that the target users have a basic understanding of web development
principles and practices.

Rationale:

● This assumption is based on the expectation that users interacting with the drag-and-drop
web application for generating Jetpack Compose UI code are developers or individuals
involved in web development tasks.

2.2.5.1.2 Web Browser Compatibility

Assumption:

● It is assumed that users have access to modern web browsers with JavaScript enabled.

Rationale:

● The functionality of the web application relies on client-side scripting using JavaScript.
Users are expected to have access to compatible web browsers to ensure optimal
performance and functionality.

2.2.5.1.3 Familiarity with Jetpack Compose

Assumption:

● Users are assumed to be familiar with or willing to learn Jetpack Compose, the modern
Android UI toolkit.

Rationale:

● While the application facilitates the generation of Jetpack Compose UI code from
drag-and-drop interactions, a basic understanding of Jetpack Compose concepts is
beneficial for users to effectively utilize the generated code.

31
 Compose Builder 2024

2.2.5.1.4 Stability of Web Development Environment

Assumption:

● The stability and reliability of users' web development environment are assumed.

Rationale:

● The performance of the web application relies on a stable and well-functioning web
development environment, including web browsers and internet connectivity.

2.2.5.2 Dependencies

2.2.5.2.1 Web Browser Compatibility

Dependency:

● The functionality of the web application is dependent on compatibility with modern web
browsers.

Impact of Change:

● Changes or updates to web browser standards or features may require corresponding

adjustments to the application to maintain compatibility and functionality.

2.2.5.2.2 JavaScript Frameworks and Libraries

Dependency:

● The application may rely on JavaScript frameworks or libraries for enhanced

functionality.

Impact of Change:

● Changes or updates to JavaScript frameworks or libraries may require corresponding

updates to the application to ensure compatibility and optimal performance.

2.2.5.2.3 Internet Connectivity

Dependency:

● The application requires internet connectivity to access resources and perform certain
functions, such as fetching updates or external data.

32
 Compose Builder 2024

Impact of Change:

● Changes in internet connectivity or network infrastructure may affect the application's

ability to function properly, necessitating appropriate error handling and fallback
mechanisms.

2.2.5.2.4 User Interface Frameworks and Components

Dependency:

● The application's user interface components may rely on front-end frameworks or

components for styling and interaction.

Impact of Change:

● Changes or updates to user interface frameworks or components may require

corresponding adjustments to the application's interface design and functionality to
maintain consistency and usability.

2.3. Specific Requirements

2.3.2 External Interface Requirements

2.3.2.1 User Interfaces

The User Interfaces for the Compose Builder web application will be designed to provide a
seamless experience for developers crafting Jetpack Compose code. Accessible via modern web
browsers, the interface boasts an intuitive drag-and-drop functionality at its core, enabling users
to effortlessly construct complex UI layouts. Within the interface, users are greeted with a library
of native Android UI components, like buttons and text fields. This extensive library, coupled
with a user-friendly search feature, ensures easy access to desired components.

As users design their UI layout on the canvas, a real-time preview dynamically updates to reflect
changes, offering instant visual feedback. Alongside the canvas, a dedicated panel displays the
corresponding Jetpack Compose code generated from the user's design, allowing for a
comprehensive understanding of the code structure. Users can interact with individual
components on the canvas to customize properties such as size, color, and behavior, facilitated by
contextual menus or property inspectors.

33
 Compose Builder 2024

Upon completion of the design process, users trigger the conversion to Jetpack Compose code
with a single action, prominently displayed within the interface. Throughout the design and
conversion phases, the application provides clear feedback and error handling mechanisms,
including interactive tooltips, contextual messages, and visual indicators. These features ensure
smooth navigation and address any encountered issues effectively, enhancing the overall user
experience.

2.3.2.2 Hardware Interfaces

The system has no hardware interface requirements. As long as the user has a computer that can
run a web browser, the program will work.

2.3.2.3 Software Interfaces

Required Software Products:

2.3.2.3.1. Modern web browser

Name: Modern Web Browser

Mnemonic: MWB

Specification Number: 2.0.1

Version Number: N/A (Versioning managed internally)

Source: Customer Requirement

Users are required to have access to a modern web browser compatible with the Compose
Builder Web Application. This allows for seamless operation across various operating systems
and devices, ensuring broad accessibility for developers without any additional software
dependencies.

Given the web-based nature of the solution, no specific version requirements are imposed on the
software products. Users are simply expected to access the Compose Builder Web Application
via their preferred web browser to utilize the conversion tool effectively. This streamlined
approach enhances usability and eliminates any barriers to entry associated with software
installations.

34
 Compose Builder 2024

2.3.1.4 Communications Interfaces

The code generator will be a backend service that accepts UI represented as a JSON and converts
it into Jetpack Compose code. The frontend will be responsible for generating the JSON
representation based on the status of the drag-and-drop interface. When the user attempts to
generate the code, the frontend will use a REST API to send a request to the service containing
the JSON as a request payload. The backend service will then generate the code and respond
with the appropriate Jetpack Compose files.

2.3.2 Functional Requirements

2.3.2.1 Conversion of UI from a drag-and-drop interface to Jetpack compose components

2.3.2.1.2 Inputs

The system takes the following inputs:

Input UI as a drag-and-drop interface:

Users should be able to choose from a variety of native components to drag and drop into a
screen, creating simple and complex UIs.

State Configuration:

Users should have the option to link different UI components they’ve chosen to different UI state
variables and types.

2.3.2.1.3 Processing

The conversion process involves the following steps:

- Generating JSON representation from the drag-and-drop interface.

- Generating a component tree from the JSON representation

- Generating Jetpack Compose code from the component tree

2.3.2.1.4 Outputs

Upon successful processing, the system generates the following outputs:

35
 Compose Builder 2024

Converted Kotlin-based Jetpack Compose Code:

The primary output is the Kotlin code representing the UI in Jetpack Compose, preserving the
original layout, styling, and functionality.

Documentation:

Comprehensive documentation outlining installation, configuration, and usage instructions for

developers.

2.3.2.1.5 Error Handling

The system includes robust error handling mechanisms:

Informative Error Messages:

In case of conversion challenges or failures, the system provides clear and informative error
messages to help developers identify and resolve issues.

Logging and Reporting:

Integration with logging mechanisms to record and report errors, facilitating debugging and
troubleshooting.

Graceful Failure Handling:

The system gracefully handles scenarios where conversion cannot be completed successfully,
ensuring minimal disruption to the developer workflow.

2.3.2.2 User Interface Preservation

2.3.2.2.1 Introduction

The User Interface Preservation ensures that the converted Jetpack Compose code maintains the
original UI design and layout from the drag-and-drop UI, adhering to the user's expectations.

2.3.2.2.2 Inputs

Input from a drag-and-drop interface.

36
 Compose Builder 2024

2.3.2.2.3 Processing

The processing steps include:

- Generating JSON representation from the drag-and-drop interface.

- Generating a component tree from the JSON representation

- Generating Jetpack Compose code from the component tree

2.3.2.2.4 Outputs

Kotlin-based Jetpack Compose code files that closely resemble the original UI.

Notifications or reports on UI design variations and applied preservation settings.

2.3.2.2.5 Error Handling

Detecting discrepancies between the original UI and the preserved Jetpack Compose UI.

Providing suggestions for adjusting preservation settings to achieve the desired UI outcome.

These structured requirements provide a clear framework for the development of the "Compose
Builder" project, specifying each module's purpose, inputs, processing steps, outputs, and error
handling mechanisms.

2.3.2.3 Code Quality and Readability

2.3.2.3.1 Introduction

The Code Quality and Readability is dedicated to ensuring that the Jetpack Compose code
generated by the system adheres to industry best practices and coding standards, promoting
high-quality and readable code within the Android development environment.

2.3.2.3.2 Inputs

This module takes as input the Kotlin-based Jetpack Compose code files produced by the
Conversion Module.

2.3.2.3.3 Processing

The processing steps involve:

37
 Compose Builder 2024

Analyzing the structure and syntax of the generated Jetpack Compose code.

Identifying code elements that deviate from established best practices and coding standards.

Implementing automated mechanisms to optimize and clean up the code, eliminating redundant
or unnecessary elements.

Applying coding conventions, such as proper indentation, naming conventions, and code
organization.

2.3.2.3.4 Outputs

The module produces:

Revised Kotlin-based Jetpack Compose code files that align with best practices and coding
standards.

Reports or logs detailing the optimizations and clean-up performed on the code.

Notifications highlighting areas where the code has been enhanced for improved readability.

2.3.2.3.5 Error Handling

Error handling mechanisms are implemented to address:

Detection of code elements that violate coding standards or best practices.

Logging and reporting of issues found during the optimization and clean-up process.

Suggestions for developers to manually review and adjust code segments that may require
manual intervention for improved readability.

2.2.3.2.4 Save Progress

2.3.2.4.1 Introduction:

The system shall provide users with the capability to save their progress within the software
development environment. This feature enables users to retain their work and continue from
where they left off during subsequent sessions.

38
 Compose Builder 2024

2.3.2.4.2 Inputs:

Users shall initiate the save progress action through a designated interface element, such as a
"Save" button or menu option.

Upon triggering the save action, users may input optional metadata such as a title or description
to label their saved progress.

2.3.2.4.3 Processing:

When the save progress action is initiated, the system shall capture the current state of the user's
workspace, including project files, code edits, task assignments, and other relevant data.

The system shall process the captured data and serialize it into a format suitable for storage, such
as JSON.

If metadata is provided by the user, the system shall incorporate this information into the saved
progress data for future reference.

2.3.2.4.4 Outputs:

Upon successful processing, the system shall generate a confirmation message indicating that the
user's progress has been saved.

The system shall provide users with the ability to access their saved progress at a later time
through a dedicated interface, such as a "Load Progress" option in the application menu.

2.3.2.4.5 Error Handling:

If an error occurs during the save progress process, such as a failure to serialize the data or an
unexpected system error, the system shall display an error message informing the user of the
issue.

The system shall provide options for users to retry the save action or cancel the operation if an
error occurs.

In case of data corruption or loss during the save process, the system shall implement
mechanisms to recover and restore the user's previous progress from backups or auto-save
features.

39
 Compose Builder 2024

2.3.2.5 Create Account

2.3.2.5.1 Introduction:

The system shall enable users to create new accounts, allowing them to register and gain access
to the software development environment. This functionality facilitates user onboarding and
account creation within the system.

2.3.2.5.2 Inputs:

Users shall input their desired username during the signup process.

Users shall provide a valid email address for account verification and communication purposes.

A password shall be entered by users to secure their accounts.

Optional additional details may be provided by users, such as full name, organization, or profile
information.

2.3.2.5.3 Processing:

Upon submission of the signup form, the system shall validate the provided registration
information for completeness and adherence to formatting requirements.

The system shall check for the uniqueness of the chosen username and email address to prevent
duplication.

If the provided information passes validation checks, the system shall create a new user account
and generate a unique identifier for the user.

An email verification process may be initiated by the system to confirm the user's identity and
activate the account.

2.3.2.5.4 Outputs:

Upon successful registration, the system shall display a confirmation message indicating that the
user's account has been created successfully.

If email verification is required, the system shall prompt the user to check their email inbox for a
verification link or code to activate their account.

In case of errors or validation issues during signup, the system shall provide informative error
messages guiding the user to correct the input fields and resubmit the form.

40
 Compose Builder 2024

2.3.2.5.5 Error Handling:

If the signup form contains errors or missing required fields, the system shall display validation
messages highlighting the issues and guiding the user to correct them.

In case of registration errors such as duplicate usernames or email addresses, the system shall
notify the user and prompt them to choose alternative credentials.

The system shall handle errors related to email verification failures or expired verification links
by providing instructions for account recovery or assistance.

2.3.2.6 Log In

2.3.2.6.1 Introduction:

The system shall provide users with the capability to log in securely, granting access to the
software development environment upon successful authentication. This functionality ensures
user authentication and access control within the system.

2.3.2.6.2 Inputs:

Users shall input their registered username or email address during the login process.

A password shall be entered by users to authenticate their identity and gain access to their
accounts.

2.3.2.6.3 Processing:

Upon submission of the login form, the system shall verify the provided credentials by
comparing them against stored user account records in the database.

The system shall perform authentication checks to validate the user's identity and determine their
access permissions within the system.

If the provided credentials match an existing user account, the system shall authenticate the user
and grant access to the software development environment.

41
 Compose Builder 2024

2.3.2.6.4 Outputs:

Upon successful authentication, the system shall display the main dashboard or landing page,
providing access to system functionalities and project resources.

In case of unsuccessful login attempts due to incorrect credentials or other authentication errors,
the system shall display appropriate error messages to alert the user and prompt them to retry or
recover their account.

3.2.6.5 Error Handling:

If authentication fails due to incorrect credentials, the system shall display error messages
indicating the issue and prompting the user to verify their username/email and password.

The system shall handle errors related to account lockouts, expired passwords, or other
authentication issues by providing guidance on account recovery procedures or contacting
support for assistance.

2.3.2.7 Define States

2.3.2.7.1 Introduction:

The system shall allow users to specify state variables within the software development
environment. State variables enable users to define and manage dynamic data elements that
reflect the current state of their projects, tasks, or application components.

2.3.2.7.2 Inputs:

Users shall input the names and data types of state variables they wish to define.

Users may provide optional initial values for state variables during specification.

Additional metadata or descriptions may be included by users to document the purpose or usage
of each state variable.

2.3.2.7.3 Processing:

Upon submission of the state variable specification, the system shall validate the provided input
for syntactic correctness and adherence to defined data type constraints.

The system shall create metadata records for each specified state variable, storing relevant
information such as names, data types, initial values, and user-provided descriptions.

42
 Compose Builder 2024

State variable definitions shall be processed and stored persistently within the system, enabling
users to reference and manipulate them during the development process.

2.3.2.7.4 Outputs:

Upon successful specification, the system shall confirm the creation of state variables and
provide users with a summary of the defined variables.

Users shall be able to access and manage their defined state variables through a dedicated
interface within the software development environment.

2.3.2.7.5 Error Handling:

If the state variable specification contains errors or invalid input, the system shall display
informative error messages guiding users to correct the issues.

In case of conflicts or duplications with existing state variable names, the system shall notify
users and prompt them to choose alternative names to ensure uniqueness.

The system shall handle errors related to data type mismatches or unsupported variable
definitions by providing guidance on compatible data types and restrictions.

2.3.3 Use Cases

1. Authentication Use Cases

1.1 Use Case #1

ID UC 01

Name Signup

Goal A user creates profile

Primary Actors Unregistered users

Precondition The user doesn’t have an account

43
 Compose Builder 2024

Success End User creates an account/ profile

Failure End User doesn’t create an account

Trigger The user chooses sign up button

Main Success Scenario 1. The user chooses the signup button.

2. The System redirects the user to sign up page

3. The system requires the user to input first name, last name,
email, and password.

4. User fills out the form and chooses the signup option.

5. The system will validate the inputs.

6. The system will redirect the user to the home page.

Extension (Error 1. Invalid inputs- The system will request the user to use the
Scenario) correct format for the invalid input.

Variation (Alternative None

Scenario)

1.2 Use case #2

ID UC 02

Name Login

Goal A user logs in to an account

Primary Actors Registered users

Precondition The user already has an account

44
 Compose Builder 2024

Success End User logs into account

Failure End User doesn’t log into account

Trigger The user chooses Login button

Main Success 1. The user chooses the login button.

Scenario
2. The System redirects the user to login page

3. The system requires the user to input an email and password or

to log in using a Google or Facebook account.

4. User chooses a way to authenticate.

5. The system checks if the user is authenticated.

6. The system will redirect the user to the home page.

Extension (Error 1. Invalid credentials.

Scenario)
2. The system will request the user to use the correct credentials.

Variation (Alternative None

Scenario)

1.3 Use Case #3

ID UC 03

Name Log Out

Goal A user logs out

45
 Compose Builder 2024

Primary Actors Logged in users

Precondition The user must log in first.

Success End User logs out

Failure End User doesn’t log out

Trigger The user chooses log out button

Main Success Scenario 1. The user chooses the logout button.

2. The System erases the authentication information of the

user

3. The system will redirect the user to the home page.

Extension (Error Scenario) None.

Variation (Alternative None

Scenario)

2. Drag and Drop

2.1 Use case #4

ID UC 04

Name Create Page

Goal Allow User to drag and drop preconfigured components to

create a UI page

Primary Actors Logged in users

46
 Compose Builder 2024

Precondition The user must log in first.

Success End UI code is generated successfully

Failure End User Cancels Operation.

Trigger User initiates the “create page” action by dragging and

dropping a file.

Main Success Scenario 1. User selects components from the library.

2. User drags and drops components onto the canvas.

3. User arranges components on the canvas.

4. User generates UI code

Extension (Error Scenario) 1. User fails to select any component from the library.

2. User fails to drop the component onto the canvas.

3. User fails to arrange components.

Variation (Alternative None

Scenario)

2.2 Use case #5

ID UC 05

Name Add State

Goal Allow User to add state to the created UI page.

Primary Actors Logged in users

47
 Compose Builder 2024

Precondition The UI page is created or the code is generated from the input
component

Success End State is successfully added to the UI page

Failure End User Cancels adding state

Trigger User decided to add state

Main Success Scenario 1. User selects a component on the canvas.

2. User adds state to the selected component.

Extension (Error Scenario) 1. User fails to select any component on the canvas.

2. User fails to add a state to the selected component.

Variation (Alternative None

Scenario)

2.1 Use case #6

ID UC 06

Name Generate UI code

Goal Enable users to generate UI code from the created UI page with
or without state.

Primary Actors Logged in users

Precondition UI page is created

Success End UI code is successfully generated.

48
 Compose Builder 2024

Failure End User Cancels code generation.

Trigger User requests code generation.

Main Success Scenario 1. User selects the “generate code” option.

2. User selects whether to include a state or not.

3. UI code is generated.

Extension (Error Scenario) 1. User fails to select the “generate code” option.

2. User fails to make a selection regarding including state.

3. Code generation fails.

Variation (Alternative None

Scenario)

2.4 Use case #7

ID UC 07

Name Search Components

Goal Allow users to search for components by keyword.

Primary Actors Logged in users

Precondition User is logged in and on the component library page.

Success End Matching components are displayed to the user.

Failure End No matching components are displayed to the user.

49
 Compose Builder 2024

Trigger User initiates a search by entering a keyword.

Main Success Scenario 1. User enters a keyword in the search bar.

2. System retrieves components matching the keyword.

3. System displays the matching components to the user.

Extension (Error Scenario) 1. User enters an empty search query.

2. No matching components are found.

Variation (Alternative None

Scenario)

50
 Compose Builder 2024

Use Case Diagram

51
Compose Builder 2024

52
 Compose Builder 2024

2.3.4 Non-Functional Requirements

2.3.4.1 Performance

● Response Time: Compose Builder should respond within acceptable time frames during
UI creation and modification processes, ensuring a smooth and responsive user
experience with auto saving user’s progress in a defined time interval.

● Resource Utilization: Optimize resource usage to prevent excessive memory

consumption or CPU utilization that may hinder the performance of the web application.

● Scalability: The Compose Builder web app should scale effectively, accommodating
larger projects without compromising performance by creating more instances of the
server based on the load.

2.3.4.2 Reliability

● Fault Tolerance: Compose Builder should handle errors gracefully, minimizing

disruptions and providing clear error messages for effective troubleshooting.

● Stability: Ensure the stability of Compose Builder across various web browsers and
versions, preventing crashes or unexpected behavior.

● Error Handling: Implement robust error-handling mechanisms to recover from errors

without data loss or corruption with appropriate data backup.

2.3.4.3 Availability

● Support and Maintenance: Provide timely support and maintenance services for
Compose Builder to address issues and updates, ensuring continuous functionality.

2.3.4.4 Security

● Data Privacy

○ User Data: Ensure the privacy and confidentiality of user data stored within the
Compose Builder application.

○ Data Encryption: Implement strong encryption mechanisms for data

transmission and storage to protect sensitive information.

53
 Compose Builder 2024

● Authentication

○ User Authentication: Implement secure user authentication mechanisms to verify

the identity of users accessing Compose Builder.

○ Password Policy: Enforce a strong password policy to enhance the security of

user accounts.

● Secure Communication

○ HTTPS: Ensure that the web application is accessible via HTTPS to encrypt data
in transit.

2.3.4.5 Maintainability

● Modular Design: Compose Builder should have a modular design for easy functionality
and scaling updates.

● Documentation: Provide comprehensive documentation for future developers using

Compose Builder and contributors to Compose Builder.

● Coding Standards: Adhere to coding standards for clarity.

● Version Control: Implement effective version control for traceability.

● Testing and Debugging: Facilitate efficient testing and debugging using unit tests and
e2e tests in the CI/CD pipeline.

2.3.4.6 Portability

● The Compose Builder web application must ensure high portability across various web
browsers and operating systems. Specific requirements include:

○ Compatibility with major web browsers (e.g., Chrome, Firefox, Safari).

○ Responsive design for various screen sizes.

54
 Compose Builder 2024

2.3.5 Inverse Requirements

● Exclusive UI Format Support: Compose Builder exclusively supports Jetpack Compose

UI format and doesn't cater to other UI frameworks and formats.

● State Management Support: Compose Builder is concerned only with UI level state and
doesn't support the creation and maintenance of view models and other state management
layers.

2.3.6 Design Constraints

● Web Browser Compatibility: The Compose Builder design must adhere to the
specifications and guidelines provided by major web browsers to ensure seamless
integration and compatibility.

● Jetpack Compose Framework: Design constraints imposed by the Jetpack Compose

framework must be followed to ensure adherence to its standards and best practices.

2.3.7 Logical Database Requirements

A Postgres database will be utilized for this application to store user data. The database will be
designed with the following requirements in mind:

Data Formats: Data within the Postgres database will be stored in structured formats, primarily
using relational data models to ensure consistency and ease of querying.

Storage Capabilities: The database must be capable of accommodating the anticipated volume
of data generated by user activities and project management tasks. Scalability is a key
consideration, with provisions for increasing storage capacity as data volumes grow over time.

Data Retention: We have defined data retention policies specifying the duration for which
different types of data should be retained within the database. These policies align with industry
best practices and regulatory requirements.

Data Integrity: To maintain data integrity, the database will enforce constraints such as unique
keys, foreign key relationships, and data validation rules. Error handling mechanisms will be in
place to prevent data corruption or inconsistencies.

55
 Compose Builder 2024

2.3.8 Other Requirements

Training-related Requirements

● User Training: Provide comprehensive documentation or tutorials for users unfamiliar

with Jetpack Compose or Compose Builder's UI creation and modification processes to
facilitate a smooth transition.

Packaging Requirements

● Distribution: Package Compose Builder for web deployment according to modern web
application deployment standards.

● Documentation: Include comprehensive online documentation for installation and usage

guidelines.

2.4. Change Management Process

2.4.2 Change Request Submission

All change requests must be submitted through a designated channel, providing detailed
descriptions of the proposed changes and their impact.

2.4.3 Change Request Evaluation

We will assess the change requests for feasibility, impact analysis, and alignment with project
goals.

2.4.4 Change Implementation

Approved changes will undergo testing and validation before integration into the existing code
base. Changes will be implemented following a phased approach, ensuring minimal disruption to
ongoing development.

2.4.5 Change Documentation

Comprehensive documentation of accepted modifications, encompassing their reasoning and
implementation specifics, can be maintained through release notes for future reference.

56
 Compose Builder 2024

2.4.6 Change Review and Closure

After implementation, a review will be conducted to ensure the changes meet the specified
requirements and do not introduce adverse effects. Closure involves updating project
documentation and ensuring all stakeholders are informed about the implemented change.

57
 Compose Builder 2024

3. System Design

3.1 Introduction

3.1.1 Purpose
The System Design document for the drag-and-drop web app for generating Jetpack Compose
code serves the fundamental purpose of translating business requirements and processes into a
technical blueprint for application development. It aims to provide a structured approach to
designing the system architecture and defining the key components and functionalities of the
application. By outlining the architectural framework and design principles, this document sets
the foundation for the implementation phase, ensuring that the development team has a clear
understanding of the project's objectives and requirements. Ultimately, the goal is to deliver a
robust and efficient solution that meets the needs of users and stakeholders while adhering to
industry best practices and standards.

3.1.2 General Overview

The drag-and-drop web app for generating Jetpack Compose is designed to provide developers
with a user-friendly interface for creating UI layouts using Jetpack Compose, a modern toolkit
for building native Android applications.

System Context and Design Approach:

The system operates within the context of Android app development, aiming to simplify the
process of designing UIs by enabling users to visually construct layouts through drag-and-drop
interactions. The basic design approach involves integrating frontend and backend subsystems to
facilitate the conversion of drag-and-drop UI designs into Jetpack Compose code.

System Architecture:

The system architecture comprises two main subsystems: the frontend web application and the
backend service. The frontend application hosts the drag-and-drop interface, allowing users to
create UI layouts intuitively. The backend service is responsible for parsing the user's input,
generating the corresponding Jetpack Compose code, and delivering it back to the frontend for
display.

59
 Compose Builder 2024

Design Goals:

● Provide a seamless and intuitive user experience for designing UI layouts using Jetpack
Compose.

● Enable developers to visually construct complex UIs through drag-and-drop interactions.

● Generate clean and efficient Jetpack Compose code based on the user's design inputs.

● Ensure compatibility with the latest versions of Jetpack Compose and Android Studio.

● Facilitate collaboration and sharing of UI designs among team members.

● Maintain scalability and flexibility to accommodate future enhancements and updates.

3.1.3 Development Methods & Contingencies

3.1.3.1 Development Methods

The project will adopt modern development practices to ensure efficiency and flexibility. Figma
will serve as the primary tool for UI/UX design, providing a collaborative environment and
versatile features conducive to designing digital products.

For the frontend development, Next.js will be employed. Next.js offers server-side rendering
capabilities, streamlined development workflows, and excellent performance optimization,
making it an ideal choice for building dynamic web applications.

On the backend, Django, a high-level Python web framework, will be utilized. Django offers
robust features for rapid development, including built-in authentication, ORM, and security
measures, facilitating the creation of scalable and secure backend systems.

PostgreSQL will serve as the database management system for the project. With its support for
complex queries, transactions, and data integrity, PostgreSQL ensures reliable data storage and
retrieval for the application.

3.1.3.2 Contingencies

The project acknowledges potential contingencies that may arise during development,
particularly in response to changes in requirements or resource constraints. Given that the

60
 Compose Builder 2024

application generates Kotlin code for user-selected component designs, the following
contingencies are considered:

● New Requirements or Changes: The discovery of new requirements or alterations to

existing ones is anticipated. To address this, the development process remains flexible,
accommodating changes through iterative development cycles and close collaboration
with stakeholders.

● Resource Constraints: Constraints on resources, including time, budget, and personnel,

may impact project progress. Mitigation strategies include optimizing development
workflows, prioritizing tasks based on resource availability, and seeking additional
resources when necessary.

● Backend Design Changes: Changes to the backend design, such as database schema
modifications or integration requirements, may occur. The team will conduct thorough
reviews of proposed changes and implement them following a structured change
management plan to minimize disruptions to development.

● Kotlin Code Generation: As the application generates Kotlin code based on user-selected
component designs, potential issues in code generation algorithms or compatibility with
Kotlin syntax may arise. Rigorous testing and validation procedures will be implemented
to ensure the accuracy and reliability of the generated code.

By proactively addressing these contingencies and employing agile development methodologies,

the project aims to deliver a robust and adaptable solution that meets user requirements and
quality standards.

3.2 System Architecture

3.2.1 Subsystem decomposition

3.2.1.1 JSON Generator Subsystem

This subsystem lives in the frontend web application and is responsible for generating the JSON
representation from the drag-and-drop UI. This component is activated when the user clicks
‘Generate Compose Code’ and takes no explicit inputs, implicitly observing the drag-and-drop
interface state as its only dependency. Its output is the JSON representation which will be sent to
the backend service for code generation.

61
 Compose Builder 2024

3.2.2.2 JSON Parser Subsystem

This subsystem lives in the backend service and is responsible for parsing the JSON payload
from the incoming request into an in-memory component tree. This component is also
responsible for validating the JSON payload and handling any related errors. The output from
this component is a component tree.

3.2.2.3 Compose Code Generator Subsystem

This subsystem lives in the backend service and is the core component of the system. It takes in a
component tree and is responsible for converting it into valid Jetpack Compose code. This is also
the place where the UI state from the payload is processed and applied to the output. The final
output from this subsystem is Compose UI files (with the Kotlin .kt extension).

62
 Compose Builder 2024

3.2.2.4 Authenticator Subsystem

This subsystem is responsible for authenticating users. It is responsible for login, sign up and
delete account features. It requires access to a user storage through a predefined interface.

3.2.2.5 User Interface Subsystem

This subsystem is responsible for providing the user interface on the web application. It has two
main features, the drag-and-drop interface and the state editor. This subsystem requires access to
a user storage from which it can fetch previous stored work for a specific logged-in user. This is
through a predefined interface, and in reality the user storage will be in the backend service,
accessed through a REST API. The output of this subsystem is fed directly into a JSON
generator subsystem.

63
 Compose Builder 2024

3.2.2 Hardware/software mapping

3.3. Object Model

3.3.1 Class Diagram

64
Compose Builder 2024

65
 Compose Builder 2024

3.3.2 Sequence Diagram

3.3.2.1 Signup

66
 Compose Builder 2024

3.3.2.2 Sign In

67
 Compose Builder 2024

3.3.2.3 Create Project

68
 Compose Builder 2024

3.3.2.4 Create Screen

69
 Compose Builder 2024

3.3.2.5 Create Component

70
 Compose Builder 2024

3.3.2.5 Add Widget

71
 Compose Builder 2024

3.3.2.6 Update Widget

72
 Compose Builder 2024

3.3.2.7 Save to Remote

73
 Compose Builder 2024

3.3.2.8 Restore from Remote

3.3.2.9 Export compose code

74
 Compose Builder 2024

3.4. Detailed Design

3.4.1 User

Table 4.1.1: User Class

Component
+FullName:String
+EmailAddress: String
-PasswordHash: String
+Login(): Boolean
+Logout():Void
-Delete():Boolean
+CreateProject():Boolean

75
 Compose Builder 2024

Table 4.1.2: Attribute description for User class

Attribute Type Visibility Invariant

FullName: String Public Name <> NULL

EmailAddress String Public EmailAddress<> NULL and must be a valid email address
format.
PasswordHash String Private PasswordHash<> NUll

Table 4.1.3: Operation description for User class

Operation Visibility Return type Argument Pre-Condition Post Condition

Login Public Boolean Email, User provides User will Login

valid credentials successfully
password

Logout Public void - User is logged User is logged out

in

Delete Public Boolean email User is logged User account is deleted

address in and provides
valid email
address

CreateProject Public Boolean projectna User is logged Project is created

me in and provides successfully
a project

3.4.2 Project

Table 4.2.1: Project class

Component
+Name:String

76
 Compose Builder 2024

+CreateScreen():Boolean
-Delete():Boolean

Table 4.2.2: Attribute description for Project class

Attribute Type Visibility Invariant

Name: String Public Name <> NULL

Table 4.2.3: Operation description for Project class

Operation Visibility Return Argument Pre-Condition Post Condition

type

Delete Private Boolean - Project exists and user Project is deleted from
is owner of the project the system successfully.

CreateScreen Public Boolean ScreenName Project exists and user Screen is created within
provides a screen the project.
name

3.4.3 Screen

Table 4.3.1: Screen class

Component
+Name:String

+GenerateComposeCode():String
+Delete():Boolean
+ToJson():String
+DrawPreview()

77
 Compose Builder 2024

Table 4.3.2: Attribute description for Screen class

Attribute Type Visibility Invariant

Name String Public Name <> NULL

Table 4.3.3: Operation description for Screen class

Operation Visibi Return Argument Pre-Conditi Post Condition

lity type on

GenerateComposeCode Public String - Screen Compose code is

Exists generated successfully

ToJson Public String - Screen Screen data is converted

exists to JSON successfully.

Delete Public Boolean email address Screen Screen is deleted

exists in the successfully
project

DrawPreview Public void . The screen The corresponding

must be preview should be drawn
non-null

3.4.4 WidgetInstance

Table 4.4.1: WidgetInstance class

WidgetInstance
+AttributesValues:String
+Widget:Widget

78
 Compose Builder 2024

Table 4.4.2: Attribute description for WidgetInstance class

Attribute Type Visibility Invariant

AttributesValues String Public AttributesValues <> NULL

Widget Widget Public Widget <> NULL

3.4.5 Widget

Table 4.5.1: Widget class

Widget
+Name:String
+ClassName :Integer
+Attributes:String
+GenerateComposeCode()
+DrawPreview()
+ToJson()

Table 4.5.2: Attribute description for Widget class

Attribute Type Visibility Invariant

Name: String Public Name <> NULL

ClassName String Public PhoneNumber <> NULL

Attributes String Public Address <> NULL

Table 4.5.3: Operation description for Widget class

Operation Visibility Return Argument Pre-Condition Post Condition

type
GenerateComposeCode Public String . The widget must be The
non-null corresponding
Compose code
should exist

79
 Compose Builder 2024

DrawPreview Public void . The widget must be The

non-null corresponding
preview should be
drawn
ToJson Public String - The widget must be The
non-null corresponding
JSON should be
drawn

3.4.6 Component

Table 4.6.1: Component class

Component
+Name:String

+GenerateComposeCode()
+DrawPreview()
+ToJson()

Table 4.6.2: Attribute description for Component class

Attribute Type Visibility Invariant

Name: String Public Name <> NULL

Table 4.6.3: Operation description for Component class

Operation Visibility Return Argument Pre-Condition Post Condition

type
GenerateComposeCode Public String . The widget must be The
non-null corresponding
Compose code
should exist
DrawPreview Public void . The widget must be The
non-null corresponding
preview should be
drawn

80
 Compose Builder 2024

ToJson Public String - The widget must be The

non-null corresponding
JSON should be
drawn

81
 Appendix

● Jetpack Compose: Google's declarative UI framework for building native Android applications.

● XML-based UI Framework: The traditional approach to Android UI development using XML files
to define layouts.

● UI Components: Visual elements such as buttons, text fields, and images that make up the user
interface.

● Drag-and-Drop Interface: An interactive method allowing users to move, manipulate, and arrange
UI components using a pointing device.

● Code Generation: The process of automatically producing code, in this context, Kotlin code for
Jetpack Compose UI based on user interactions in the drag-and-drop interface.

● Kotlin: The programming language used for Android development, particularly in the context of
Jetpack Compose.
 Compose Builder 2024

Reference

Android View-Based UI

Jetpack Compose

83