Application Preview
During the conversation, AI Builder will intelligently generate the basic structure of the application based on your description. The detail editing stage allows you to further refine and adjust the specific details of the application, thereby optimizing the user interface and interaction experience. The features provided by the preview area menu include:
| Feature | Description |
|---|---|
| Real-time Preview | View the application effect in real-time during the editing process, achieving WYSIWYG. |
| Detail Editing | In the preview, select a component to go to detail editing. |
| Device Simulation | Preview the responsive effect of the application on different devices (mobile phone, tablet, desktop) |
| Application Sharing | Share the currently generated application via a link. |
| Development Console | Open the console of the previewed application for debugging and development. |
| Version Management | Preview or rollback to previous versions |
Real-time Preview
After the rollback operation is completed or the React page is generated, you can view the real-time effect of the application in the preview area. If the preview area displays a blank screen, check whether the current session has successfully generated the React page.
If the current session has not generated a React page, you can guide the generation by conversing with the AI.
Tip: If the AI fails to generate a React page, please check whether your requirement description is clear and contains necessary information. The preview area is logged in as the super administrator by default. To test the user login feature, first have the AI perform the logout operation. You can customize the login information in the login configuration.
Device Simulation Preview
You can simulate how the application appears on different devices, including mobile phones, tablets, and desktops. On the preview page, simply click the corresponding device icon to switch between different device views, helping you ensure the application displays properly across various screen sizes.
Application Sharing
Note: Shared applications retain their original data access permissions. If user management is not properly configured, data security risks may exist.
You can conveniently share the currently generated application via a link or QR code, allowing others to quickly experience your creation.
Development Console
Development console is an important tool for debugging and developing applications, helping you quickly locate and resolve issues.
Features
- Real-time Log Viewing: View console output and error messages during application runtime
- Network Request Monitoring: Monitor the status of API calls and data requests
- Performance Analysis: Analyze page load times and resource usage
- Error Tracking: Quickly locate JavaScript errors and exceptions
Usage
- On the preview page, click the 'Console' button
- The console panel will open at the bottom or side.
- Select the corresponding tab to view different types of information
- Use the filter feature to quickly locate specific logs or errors.
Version Management
The version management feature enables you to easily manage different versions of applications, data models, and cloud functions, ensuring the security and traceability of the development process.
Key Features
- Version History: View all historical versions and change records of the application.
- Version Comparison: Compare differences between different versions
- Quick Rollback: One-click rollback to any historical version
- Version Tagging: Add tags and descriptions to important versions
Procedures
- On the preview page, click the Version Management button
- Browse the version history list to view the creation time and change description of each version.
- Select the target version to preview the content of the current version.
- After confirmation, click the "Rollback" button to restore to this version.
The rollback operation will lose the content of versions after the rollback version. Please confirm the necessity of the operation before rollback.