TL:DR

The article is about the capabilities and architecture of InitVerse’s low-code platform for Web3 development, where drag-and-drop functionality enables easy creation of decentralized applications, covering the following points:

• The MVVM (Model-View-ViewModel) low-code framework.

• An overview of the frontend functional modules offered by InitVerse, including: Regular components & Specialized Web3 components

• Data sources for fetching data from centralized APIs or blockchains and dynamic front-end data display.

• A Plugin Market for unlocking additional plugins and customization options.

Web2 development has been revolutionized by low-code platforms, allowing for rapid application creation without extensive coding. While low-code platforms like Microsoft Power Apps and Salesforce Lightning Platform have revolutionized Web2 development, creating Web3 applications has remained a complex task requiring deep knowledge of blockchain technology and smart contracts.

InitVerse fills this gap by providing a low-code platform specifically designed for Web3 development. By offering intuitive drag-and-drop interface, and a rich set of pre-built Web3 components and seamless integration with smart contracts, InitVerse empowers developers to build decentralized applications with ease.

Low Code Platform framework

At the core of InitVerse Low Code platform is Model-View-ViewModel (MVVM) architecture, a design pattern that promotes code reusability and maintainability. This architectural approach separates the application’s data logic (Model), user interface (View), and the intermediary between the two (ViewModel).

• Model: Encapsulates the application’s data structure and business rules. It serves as a repository of information and does not directly interact with the user interface.

• View: Responsible for the visual representation of data and user interactions. It displays information from the ViewModel and communicates user inputs to the ViewModel.

• ViewModel: Acts as a bridge between the Model and the View, handling business logic, data transformations, and UI updates. It ensures data consistency and facilitates testing.

For instance, in a DeFi application, the Model might contain data about token balances, transaction history, and exchange rates. The View would display this information in a user-friendly format, allowing users to interact with the application. The ViewModel would process user actions, such as placing a trade, update the Model accordingly, and then trigger UI updates to reflect the changes.

By adopting the MVVM architecture, InitVerse enables developers to work independently on different aspects of an application, accelerating development and improving code quality. This separation of concerns also enhances the application’s testability and maintainability.

Functional Modules of InitVerse Low-Code Platform

InitVerse’s component library is hyper-focused on Web3, surpassing other low-code platforms in native component offerings. Beyond core components for page structure and content, InitVerse excels with specialized Web3 elements like wallet connectors, NFT display modules, swap and other DeFi interfaces, and more. To further enhance customization, the platform provides data sources, custom variables, and styling options, empowering developers to create truly unique dApps.

Now, let’s take a look at these modules in more detail:

Components

Components are the fundamental building blocks of the front-end pages. By simply dragging and dropping components, you can create page content. After dragging and combining these components, the code is automatically generated, enabling quick development.

On the InitVerse platform, besides the usual layout container components, basic components, and page plugins, there are also Web3 plugins.

• Regular Compoent : Layout container components configure the page structure, including pop-ups, rows, columns, dynamic panels, hide/show panels, and loop panels. Basic components include text, buttons, images, videos, shapes, lines, input boxes, icons, button groups, and links, forming the essential elements of a page. Standard plugins combine basic components with dynamic effects, such as carousels, forms, charts, grouped menus, password fields, radio buttons, date ranges, cascades, and timelines. Additionally, users can purchase and use other plugins from the plugin market. With these components, the look and feel of the dApp can be easily created without coding.

• Web3 Component: Our Web3 components offer direct interaction with smart contracts. This allows developers to build advanced, interactive Web3 applications seamlessly.

Examples include:

• Wallet component: Connect users to web wallets.

• Token distribution component: Dynamically display token distribution statuses.

• Treasury component: Show balance of fund pools.

• Airdrop component: Allow users to enter addresses to claim airdrop rewards.

• Governance component: Combine governance tokens and voting algorithms to facilitate proposal voting.

• Swap component Configurable Swap transaction component and interfaces.

• K-line component: Display K-line charts for tokens.

• NFT component: Configurable NFT trading interfaces.

• Synthesis component: Integrate NFT synthesis, splitting, and exchange functionalities in the UI

These components provide developers with a versatile toolkit to efficiently create and deploy Web3 applications.

Data Sources

Data sources in the low-code platform are used to fetch data. They support reading data from centralized data interfaces via APIs or from blockchains via RPC interfaces. For example, a centralized data interface might call the OpenWeatherMap API to get current temperature and weather conditions. Blockchain data could involve reading transaction records from Ethereum smart contracts, such as transaction history and status.

When creating a new data source, developers need to fill in the data source ID, request URL, and request parameters, and choose the request method (GET or POST). The platform also supports secondary data processing. These data sources enable developers to flexibly obtain and handle various types of data to enrich the front-end display.

• Custom Variables and Content Settings

Custom variables are used for dynamic front-end data display and changes, such as showing or hiding dynamic panels and branching operations. For instance, a variable might control a welcome message on the page, displaying “Welcome back” when the user is logged in and “Please log in” when they are not ; Content settings are used to configure the basic fixed or dynamic content of components. Depending on the selected component or plugin, the content configuration will vary. For example, a chart component might have a preset chart title as static data and real-time sales data from an API as dynamic data. These settings allow developers to flexibly adjust the front-end display content as needed, enhancing the user experience.

• Interaction Settings

Interaction settings define the interactive elements on a page. Besides traditional Web2 operations, such as opening a new browser window or scrolling to a part of the page when a button is clicked, InitVerse SaaS platform also offers special Web3 interactive elements. For example, end-users can connect a cryptocurrency wallet and perform token transfers. When end-users switch wallets, the page will automatically update to show the new wallet address and balance. This enables developers to build highly interactive dApps esaily.

• Style Settings

Style settings are used to configure the appearance of components or plugins, including layout, text, background, positioning, and effects. For instance, you can set a component’s width, height, font size, color, background image, and transparency to make the page more visually appealing and consistent with your brand.

Plugin Market and Configuration

Besides default plugin mentioned above, we have a Plugin Market where user can unlock plugin. Plug providers may offer multiple themes or appearances for their plugins, which users can choose from, possibly at different prices. After unlocking the corresponding plugin and themes in the plugin market, users need to select the desired plugin theme when using it on the front end.Users can further fine-tune the plugin’s behavior by configuring its internal components, ensuring optimal integration within the overall application design.

InitVerse’s low-code platform is designed to streamline Web3 development, offering a comprehensive set of tools and features that enable developers to efficiently build sophisticated dApps. With its MVVM architecture and a wide array of plugins tailored for Web3 functionalities, the platform provides the flexibility and power needed to create advanced, interactive, and visually appealing applications. This article highlights how InitVerse simplifies the integration of frontend and data, making Web3 dApp development easier through modular components and intuitive drag-and-drop operations.

In future articles, we’ll delve deeper into topics like token asset design, smart contract design, and more. Stay tuned!

About InitVerse

InitVerse is an automated Web3 SaaS platform tailored for emerging businesses, facilitating rapid DApp development and deployment with just a few clicks. With the support of INIChain and INICloud, InitVerse can dynamically adjust computing resources according to needs, enabling efficient task processing while providing higher security, availability, and scalability.

Stay tuned for more updates from InitVerse as it continues to lead the way in Web3 innovation.

X | Discord | Telegram | Airdrop site | Medium | Youtube | GitBook