Wen: 仈, Su Chuan

Scorpion platform is developed by the front-end team of CBU technology Department for low-code construction of wireless foreground scenarios. It integrates front-end plug-in and application engineering configuration, creation, development, debugging and release as a low-code construction platform with full-link integration.

Scorpion platform has access to Sketch plug-in and layout code generation API capabilities provided by ImgCook, which automatically generates low-code Schema fragments of UI parts suitable for business components based on design draft for subsequent development and release of the platform.

At present, the accumulative daily production and promotion of marketing business components 1300+, research and development efficiency 40%+.

usage

  • CBU Scorpion platform with design draft generated code interface number of calls: 4935 (to 2021.4.20)
  • Time: 2020.06 – present
  • Use objects: front-end development
  • Bonus for this scenario: 40%+

Usage scenarios

​

In Scorpion platform-Tianshu site, the display marketing card scenario automatically generates low-code schema fragments of UI part suitable for business components according to the design draft, and then completes the online development of business components efficiently through the data and logic binding of the designer.

The scenario where the code is generated using imgCook D2C is a show-style front marketing business component with a back link to build a platform for page assembly.

The ground effect

At present, the accumulated production of daily and marketing business components 1300+.


Technical solution

Imgcook Skecth exported JSON description protocol, and then converted into a low code general schema description structure, rendering canvas by low code platform, business developers through the conversion of good designer canvas style structure adjustment, data source binding, logical event binding, and finally multi-terminal transcoding component registration. Put into each building platform for use.


Research and development steps


Step 1: Create a component

Create a new component under scorpion’s Tianshu site


Step 2: Parse the exported data using the imgCook Sketch plug-in

Export raw data from the imgCook Sketch plug-in


Step 3: Paste the exported data into Scorpion Designer

Paste into scorpion Designer’s Sketch Data input box panel


Step 4: Generate component code to publish

Conduct UI fine-tuning, logical arrangement and event binding for rendered modules, and publish component transcoding to the building platform after completion.


Access imgCook capability

1. Imgcook Sketch plugin capabilities

Imgcook Sketch plugin is available for free.


Imgcook layout generation capability

Scorpion is a low-code visualization platform that transforms Skecth exported data into low-code specification Schema fragments with the help of imgCook’s layout generation API capabilities, which the designer then further processes.


Access to the team

CBU Experience technology team

  • Front end: 仈 thousand, Zhenping, Ducheng

A link to the

  • CBU

    • Scorpion Platform (Internal Platform)

  • imgcook

    • Imgcook website
    • Use documentation for the Sketch plugin


    Tao department front – F-X-team opened a weibo! (Visible after microblog recording)
    In addition to the article there is more team content to unlock 🔓