DOCSEARCHbyAlgolia
Submit Docs

DhiWise Documentation

website·Indexed 35 days ago

https://qualitydocs.dhiwise.com/

A developer-centric platform that converts app designs into code. DhiWise provides app builders for React, iOS, Flutter, and Laravel, along with a Node.js backend builder for generating CRUD APIs, managing models, and role access. It includes a Smart Editor for UI customization and guidelines for optimizing Figma designs for code generation.

Tokens
46.4K
Snippets
108
Records
423
Agent score
50%

What's inside DhiWise

  1. Overview of the Screens feature in DhiWise iOS

    The Screens feature is a core part of the DhiWise iOS app builder. It allows developers to customize SwiftUI View components, map screen actions, set up lifecycle methods, and generate complete design code. It serves as the primary hub for API integration, navigation setup, and lifecycle management.

  2. Overview of React admin panel configuration features

    The React admin panel provides several core setup modules to build the administrative interface:

    • Layout Setup: Configure the visual theme and view components.
    • Model Setup: Access Node.js models to configure attributes, model relations, and CRUD operations for the admin tables.
    • Dashboard Setup: Create a dashboard with visual analytics based on your data.
    • API Documentation: Access a list of all APIs used in the selected Node.js application, including a Postman collection file.

  3. Overview of the Pages module in DhiWise

    The Pages module is the core of the React web app where developers customize UI components (e.g., changing text to a button), map navigation actions between pages, and configure authentication (such as Google authentication). Files fetched from Figma are displayed here; note that it may take a few minutes for Figma details to populate when creating a new app.

  4. Overview of the DhiWise React App Build Process

    DhiWise is a design-to-code platform that auto-identifies UI components from designs and generates React code. The general workflow for building a React app involves:

    1. Creating an application (via design import, templates, or screen library).
    2. Adding APIs and environment variables (manually or via Postman collection).
    3. Modifying components and properties within the DhiWise editor.
    4. Building the app to export the source code.

  5. Overview of the DhiWise iOS app build process

    DhiWise converts app designs into iOS code by auto-identifying UI elements and components. The general workflow for building an iOS app involves:

    1. Creating an application (via design import, template, or screen library).
    2. Adding APIs and environment variables.
    3. Modifying views and properties within the DhiWise editor.
    4. Managing app life cycle actions.
    5. Building the app to generate the source code.

  6. Overview of Smart Editor capabilities

    Smart Editor is a UI customization tool that allows developers to edit and modify application interfaces with real-time design previews and error detection. It is designed to reduce the need to switch back to Figma by providing the following capabilities:

    • Real-time design rendering: Changes are reflected instantly on the attached viewport size without requiring a project rebuild.
    • Live errors: Automatically detects design issues, showing errors and warnings before the app is built.
    • Component Management: Allows users to change view components, modify or add component properties, and group, ungroup, or delete components directly within the editor.
    • Navigation & Preview: Provides a way to switch between Figma screen designs and the Editor preview, as well as quick navigation between application screens during development.
    • Developer Experience: Includes keyboard shortcuts for most available actions to speed up the workflow.

  7. Overview of DhiWise platform

    DhiWise is a programming platform that converts designs (from Figma, Adobe XD, or Sketch) into developer-friendly, modular, and reusable code for React and Flutter applications. It automates the application development lifecycle to accelerate the transition from design to production-ready code.

  8. Overview of DhiWise Platform

    DhiWise is a programming platform that converts designs from Figma, Adobe XD, or Sketch into developer-friendly, modular, and reusable code for React and Flutter applications. It automates the application development lifecycle, providing a browser-based environment or a Figma plugin to generate code without compromising code quality.

  10. Review and download generated Node.js source code

    After building the app, navigate to the 'Code' screen to review the generated files. The left panel displays the folder structure based on your selected code architecture.

    It is recommended to check the README.md file for:

    • Version support details
    • Project execution instructions
    • Directory structure and details

    Common directories include: app.js, config, constants, controller, entity, helper, jobs, logs, middleware, models, postman, public, routes, services, utils, validation, and views. Note that some directories (like entity and helper) may be omitted depending on the architecture (e.g., MVC).

  11. Review and understand the generated project structure

    The application's folder structure is automatically generated based on the selected code architecture, design, and configurations. To understand the project, refer to the generated README.md file, which contains critical information including:

    • Instructions on how to run the project
    • Details on the folder structure
    • Table of contents
    • Documentation for the App drawer component
    • Documentation for the Edit drawer component