Write it up front
The author as a senior front-end, usually like to research some new technologies and new products, but not recently fascinated with artificial intelligence, it is said that the recent speculation is quite hot, so I want to give front-end ER to develop some tools to improve work efficiency as a welfare, the following content is the author’s original, do not like spray.
Project development pain points
As a front-end, we often encounter some repetitive work, non-standard code and low development efficiency, which is also the pain point of development. How to improve the development efficiency can be said to be a problem that has been troubling developers.
I have also asked some colleagues around, they will also encounter similar problems, especially table fields can not be reused, each time they have to write a lot of repeated code, and then used to modify, this is the pain point of development.
Through the analysis of the existing requirements, the key of these problems is that the front-end automation method of directly converting the prototype diagram into code cannot be realized. Finally, the following solutions are proposed:
1. Conduct AI analysis on UCD prototype files
2. Extract key information (such as fields or content)
3. Processing and template generation of existing content
4. The system automatically outputs the required codes and applies them to the project
Technology stack selection
How to achieve artificial intelligence: to achieve artificial intelligence is relatively lofty, in fact, there are now many big factories such as Ali, Baidu to provide mature solutions, if I learn from the basic estimate of 1-2 years is almost ready to start, but I am lazy, direct use of the principle is good. Here I choose Baidu AI open platform, provide the ability is quite complete, what face recognition, image recognition and so on, you can register an account can be called, but some need to charge, we do according to our ability, here is mainly used in image recognition and text recognition.
Choice of framework: personal recommendation to use D2admin, open source free, powerful, very suitable for rapid background development, interested can go to see, portal: gitee.com/fairyever/d…
Secondly, we need to use some plug-ins that can be edited online. Because we need to edit and generate code templates online, ordinary text boxes are not supported, so we need to use some rich text plug-ins, such as vue-quill-editor
Back-end interface: Since it is a personal project, I use pure NodeJS to achieve the development of back-end interface. Here, I use ThinkJS to achieve the development of back-end interface. I feel lighter than Ali Egg, and easy to use.
How to implement and develop
Here is the main development ideas, if pure code analysis is too tedious, here is a brief explanation:
1, register a Baidu AI platform account, apply for the corresponding interface, can achieve normal call
2. Upload pictures through the interface, and the system will return fields to analyze and process the output fields
3. Preprocess the existing content, replace the content with the existing template, and realize the generation of code
4. Develop back-end interfaces, mainly including user registration, template management and other common functional interfaces, mainly using ThinkJS interface development, database mysql.
5. System background construction, including users, permissions, pages, etc., will not be described here.
6. Test and debug, and finally complete the overall project development and upload it to the publishing server.
Zhitong – elegant front end automation system
After nearly a week of hard work, I finally completed the front-end automation system, which I called Zhitong (the reason is not to say, you can guess). It can quickly realize the automatic generation of front-end code, greatly saving the development time and improving the development efficiency. The operation mode is very simple:
1. Take screenshots of the UCD prototype diagram list
2. CTRL + V to the left table
3. Code is automatically generated on the right side
4. If the results are not accurate, the intervention results can be manually modified to improve the accuracy
Since the project is mainly developed based on VUE, no other versions are available at present. Now it is open for testing, and everyone can experience online. The address of testing experience is http://118.178.58.212/
conclusion
At present, the concept of front-end automation is still in its infancy, and there are few products available. Most of them are for internal use, which can be opened up for everyone to learn and refer to. Welcome to provide valuable suggestions, if you have any questions, you can send my email for feedback and exchange: [email protected]