DEV Community

Cover image for HarmonyOS development: CodeGenie universal card generation
程序员一鸣
程序员一鸣

Posted on

HarmonyOS development: CodeGenie universal card generation

Foreword

this article is based on Api13, DevEco Studio 5.0.5 Release

CodeGenie is a self-contained AI tool in DevEcoStudio. In previous articles, I also wrote two articles, mainly focusing on code generation, knowledge question and answer, and the intelligent analysis of compiling and reporting errors made an overview, but forgot to introduce another very powerful function of it, that is, universal card generation.

How cards are created manually

before understanding the automatic generation of AI, let's review how we created a card manually. Is it possible to select static or dynamic by right-clicking a new card in an existing application project.

Image description

Then select a module:

Image description

then configure the service card information:

Image description

then generate a service card, manually generated is also very simple, but we need to draw the view according to UI, while the universal card in CodeGenie is not. It will generate our style according to our instructions, and only need simple changes in the later period, which is relatively convenient.

Generate Universal Card

open CodeGenie, select the Service Widget model in the drop-down box of the dialogue area, and then enter our card requirements in the input box. You can make multiple interactive prompts to continuously improve the generated requirements.

Image description

For example, my simple instruction is as follows. In the actual call, the instruction should be as detailed as possible so that the generated result will be closer to the desired effect. It will be confirmed twice and enter YES.

Image description

It will usually help us generate 3 cards, of course, it contains preview renderings. We can choose one of them to be more suitable for use, or we can continue to let AI help us adjust UI.

The resulting effect is as follows:

of course, what is generated does not necessarily meet our needs 100%. What we need to do is to continuously let AI adjust itself until about the same time, we can apply it to our Project and click the Save to Project button.

Confirm the relevant information of the card:

Image description

it will automatically generate card-related files into our project, including UI code, resources, related configuration, etc. Everything is automated configuration.

Image description

After running, the card we automatically generated is completed, and the effect is as follows:

related Summary

above we have only outlined one kind of code saving, that is, the automatic saving card project, which will save all the codes, resources and configurations. Of course, it also has manual saving methods, that is, the three options on the right:

Image description

click on the first code, the current card code will be displayed under the card, we can view and copy the use.

On the second button, we can see the configuration information of the card, and we can also view and copy it.

The third button is a separate file saved.

On the whole, if you want convenience, you should just save the project directly.

This article label: Hongmeng Development Tools/CodeGenie

Top comments (0)