Method and device for building online IDE for developing smart contracts

Building a smart contract online IDE through the Theia framework solves the problems of cumbersome development and lack of functions in the existing technology, realizes a simple and efficient smart contract development experience, and supports functions such as code jumps and file searches.

CN112650494BActive Publication Date: 2025-01-07HANGZHOU QULIAN TECHNOLOGY CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202011614623.X
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2020-12-30
Publication Date
2025-01-07
Estimated Expiration
2040-12-30

AI Technical Summary

Technical Problem

The existing smart contract development solutions are cumbersome and inconvenient for beginners. Desktop IDEs need to install multiple plug-ins and configure environment variables, while online IDEs such as Remix IDEs lack code reference jumps and file search functions, resulting in unfriendly development of complex contracts. .

Method used

The preset expansion module of Theia framework builds the front-end interactive interface of the online IDE, and uses menus and command expansion modules to set up submenu to realize code compilation, deployment and debugging functions, and realizes a development experience similar to the desktop IDE through front-end module communication.

Benefits of technology

It simplifies the smart contract development process, provides a development experience similar to the desktop IDE, reduces the steps of language plug-in installation and environment configuration, supports code jump and file search functions, and improves development efficiency and convenience.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN112650494B_ABST
    Figure CN112650494B_ABST
Patent Text Reader

Abstract

The present application relates to a method and device for building an online IDE for developing smart contracts, the method comprising: setting the front-end interactive interface of the online IDE through the first preset extension module of the Theia framework. The present application uses the extension module in the Theia framework to build the front-end interactive interface of the online IDE, and the setting process is simple and convenient. Moreover, since the bottom layer of the Theia framework reuses a lot of development tool code modules and interfaces, etc., functions such as code jump and file search are functions supported by the Theia framework itself, so the embodiment of the present application can provide a development experience similar to the desktop IDE. Since various language plug-ins and environment variables are configured before using the Theia framework to build an online IDE, when developing smart contracts using the online IDE built based on the Theia framework, there is no need to install various language plug-ins and configure environment variables, which can bring a good development experience to developers.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the field of blockchain technology, and in particular to the construction and device, equipment, and storage medium of an online IDE for developing smart contracts. Background Art

[0002] There are currently two smart contract development solutions:

[0003] The first is to write and debug smart contract code in the desktop IDE (Integrated Development Environment, which is an application that provides a program development environment). However, before that, developers are required to download IDE tools. For example, to develop a Solidity contract, developers need to install the Solidity language plug-in, and to develop a Go contract, developers need to install the Go language plug-in. In addition, developers also need to configure environment variables for different development languages. Completing this series of processes often requires a lot of effort and time from developers. Therefore, this development solution is cumbersome and brings a very bad development experience to developers, especially novices.

[0004] The second is to write and debug smart contract code on an online IDE. Currently, the most popular one is RemixIDE launched by Ethereum. Remix IDE integrates Solidity language support and various tools for compilation, deployment and debugging, which developers can use out of the box. However, it currently only supports Solidity language, and it does not support functions such as reference jump and file search in the code. In other words, it does not have the development functions commonly used by desktop IDEs, and is not very friendly to the development of complex smart contracts. Summary of the invention

[0005] In order to solve the above technical problems or at least partially solve the above technical problems, the present application provides a method and device, equipment, and storage medium for building a smart contract development system.

[0006] In a first aspect, the present application provides a method for building an online IDE for developing smart contracts, including: setting the front-end interactive interface of the online IDE through a first preset extension module of the Theia framework.

[0007] In the second aspect, the present application provides a device for building an online IDE for developing smart contracts, including: an interface setting module, used to set the front-end interactive interface of the online IDE through a first preset extension module of the Theia framework.

[0008] In a third aspect, the present application provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above method when executing the computer program.

[0009] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program implements the steps of the above method when executed by a processor.

[0010] In the method provided in this embodiment, the front-end interactive interface of the online IDE is set by the first preset extension module of the Theia framework. This application uses the extension module in the Theia framework to build the front-end interactive interface of the online IDE, and the setting process is simple and convenient. Moreover, since the bottom layer of the Theia framework reuses a lot of development tool code modules and interfaces, etc., functions such as code jump and file search are functions supported by the Theia framework itself, so the embodiment of the present application can provide a development experience similar to the desktop IDE. Before using the Theia framework to build an online IDE, various language plug-ins (such as Go plug-ins, Solidity plug-ins, Java plug-ins) and environment variables are configured, so when using the online IDE built based on the Theia framework to develop smart contracts, it is not necessary to install various language plug-ins and configure environment variables, so the development process of smart contracts is relatively simple, which can bring a good development experience to developers. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0012] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0013] Figure 1 A flowchart of a method for building an online IDE for developing smart contracts provided in an embodiment of the present application;

[0014] Figure 2 A structural block diagram of a device for building an online IDE for developing smart contracts provided in an embodiment of the present application. DETAILED DESCRIPTION

[0015] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0016] Figure 1 A method for building an online IDE for developing smart contracts provided in an embodiment of the present application is as follows: Figure 1 As shown, the method comprises the following steps:

[0017] S100. Setting the front-end interactive interface of the online IDE through a first preset extension module of the Theia framework.

[0018] Understandably, a smart contract is a computer protocol designed to communicate, verify or execute contracts in an information-based manner. Smart contracts allow for trusted transactions without a third party, which are traceable and irreversible. The purpose of smart contracts is to provide a security method that is superior to traditional contracts and reduce other transaction costs associated with contracts.

[0019] It is understandable that online IDE is an online integrated development environment. As long as there is an Internet connection, users can open a browser, log in to the online IDE through the browser, and write code anytime and anywhere.

[0020] Understandably, Theia framework is an extensible platform based on modern web technologies for developing mature, multi-language cloud computing and desktop products. Theia framework has many extensions, and each extension includes many extension modules, each of which is provided to Theia framework in the form of NPM packages, which is the package manager under the running environment Node.js.

[0021] It is understandable that, as an open source framework, Theia framework can form an online IDE application by deploying and setting its extension modules. The main framework of this application is the front-end module and the back-end module. The front-end module is mainly responsible for the browser part, and the back-end module is mainly responsible for the server part. The setting of the front-end interactive interface and the communication method between the front-end and back-end modules are all important components of building an online IDE. In step S100, the configuration of the various contents constituting the front-end interactive interface is realized through the first preset extension module of the Theia framework, that is, the front-end interactive interface of the online IDE can be obtained.

[0022] It is understandable that when developing smart contracts using the front-end interactive interface, it is necessary to use the various submenus on the front-end interactive interface. These submenus are some of the commonly used functions when developing smart contracts, such as compilation, deployment, calling, debugging, etc. Therefore, it is necessary to set the submenus on the front-end interactive interface.

[0023] In specific implementation, the first preset extension module used in submenu setting may include a menu extension module and a command extension module, wherein the menu extension module is an extension module of the menu extension type, in which the registration information of multiple submenus required for developing smart contracts (for example, the name, location, order, etc. of the submenus) may be defined or set, and after the registration information is set in the menu extension module, it may be used to implement the display of each submenu. The command extension module is an extension module of the command extension type, in which the execution command of the submenu may be defined or set, and after the execution command of the submenu is set in the command extension module, after the submenu is triggered, the submenu may execute the corresponding command and complete the corresponding interactive action. For example, clicking a button corresponding to a submenu will pop up a corresponding window, etc. In other words, step S100 may specifically include:

[0024] S101. Writing business codes for displaying multiple preset submenus in the menu bar required for developing smart contracts in the menu extension module, and writing business codes corresponding to execution commands of the preset submenus in the command extension module;

[0025] It is understandable that there are multiple submenus under the menu bar, and one submenu can implement one or more corresponding functions, such as compile, deploy, call, and debug.

[0026] It is understandable that since the simple basic information such as the name, position, and order of each submenu can be defined in the menu extension module, the relevant registration information of each submenu is written in the menu extension module. After the writing is complete, it can be used to realize the display of each submenu, that is, each submenu can be seen on the front-end interactive interface, but at this time each submenu cannot have its due functions.

[0027] It is understandable that, since the execution command of each submenu can be set in the command extension module, the so-called execution command can include instructions for actions that the submenu needs to perform in order to complete its functions.

[0028] For example, see the following code snippet:

[0029]

[0030]

[0031] In the above code segment, we first define the deployment of this submenu, such as the basic information of the submenu, such as the title, label, icon class, etc., and then write the form code for deploying this submenu. The form code is used to pop up the form page corresponding to the submenu when the user clicks the corresponding submenu in the menu bar, so that the user can further configure the submenu in the form page.

[0032] S102, triggering a corresponding button of a preset submenu in the menu bar, popping up a form page corresponding to the preset submenu, wherein the form page is a configuration page of the preset submenu;

[0033] It is understandable that a form page is a React component, and React is a JavaScript library for building user interfaces. The specific information of the submenu can be configured in the form page.

[0034] S103. When the configuration information corresponding to the preset submenu is received through the form page, the business code corresponding to the configuration information is injected into the context of the Theia framework.

[0035] It is understandable that, since the configuration information entered in the form page is not a business code, it is necessary to convert the configuration information into a business code and inject it into the context of the Theia framework. When a submenu is needed, the business code corresponding to the configuration information can be called from the Theia framework. The content written in the menu extension module and the command extension module is the business code itself. The menu extension module and the command extension module are bound to the container module in the Theia framework, so the business code in the menu extension module and the command extension module can also be called when using the submenu, thereby realizing the corresponding function of the submenu.

[0036] In specific implementation, S103 may specifically include: when the configuration information corresponding to the preset submenu is received through the form page, the business code corresponding to the configuration information is written in a preset programming language, and the business code corresponding to the configuration information is injected into the context of the Theia framework using a preset decorator.

[0037] The preset programming language can be selected as needed, for example, Typescript language. The preset decorator can be selected as needed, for example, injectable decorator. Specifically, the business code developed in Typescript language can be injected into the context of the Theia framework by using the injectable decorator through Inversify.js. Inversify.js is a powerful lightweight IoC container framework. Inversify implements the IoC container through the dependency injection mode.

[0038] In specific implementation, the method provided in the embodiment of the present application may also include the following steps:

[0039] S200. Set the path of the business code file of the back-end module in the description file of the second preset extension module of the Theia framework; the path is used for loading the business code in the business code file according to the path when the website server corresponding to the back-end module is started, so as to realize the operation of the back-end module; the website server provides the Node.js operating environment for the back-end module.

[0040] It is understandable that although the business codes of the front-end module and the back-end module are deployed together and are both in the Theia framework, their execution environments are different. The front-end module is the part that users see, and its execution environment is in the browser, while the execution environment of the back-end module is on the server and runs on the Node.js environment. When users access the online IDE through the URL, a web server, i.e. a website server, is required. The website server can provide the Node.js operating environment for the back-end module. Specifically, Express can be used as the HTTP server. Express is the Node.js Web application development framework, and Node.js is JavaScript running on the server.

[0041] In specific implementation, not only can the path of the business code file of the back-end module be set in the description file of the second preset extension module, but the path of the business code file of the front-end module can also be set in the description file of the second preset extension module. In this way, when the browser is started, the business code in the business code file of the front-end module can also be called according to the specific path to realize the operation of the front-end module.

[0042] It is understandable that each extension contains a description file - package.json file, which can contain several key fields, as shown in the following code snippet:

[0043]

[0044] In the above code snippet, the first keyword "theia-extension" marks the NPM package as an extension. When the Theia framework starts, it will traverse all NPM packages and mark all NPM packages as an extension. The second keyword "theiaExtensions" is to enumerate all modules in this extension. Each module is the entry point of the extension. Among them, the field "frontend" represents the entry point of the front-end module, and the storage path of the business code file of the front-end module can be set in this field. "backend" represents the entry point of the back-end module, and the storage path of the business code file of the back-end module can be set in this field.

[0045] It is understandable that the first preset extension module and the second preset extension module are both modules in one extension, and the description file of the second preset extension module is the description file of the extension to which the second preset extension module belongs.

[0046] It is understandable that by defining the path of the business code file of the front-end module and / or back-end module in the description file, the corresponding business code can be called when the browser and / or server is started, thereby realizing the operation of the front-end module and / or back-end module.

[0047] In specific implementation, the method provided in the embodiment of the present application may also include the following steps:

[0048] S300, establishing a communication mechanism between the front-end module and the back-end module.

[0049] It is understandable that since the front-end module runs on the browser and the back-end module runs on the server, data communication is required between the browser and the server when developing a smart contract. The communication mechanism in step S300 is used to achieve communication between the two.

[0050] In specific implementation, the above step S300 may specifically include the following steps:

[0051] S301, setting an externally exposed backend service interface on the backend module, setting the business code of the backend service interface, and injecting the business code of the backend service interface into the context of the Theia framework;

[0052] It is understandable that the externally exposed interface refers to the interface that others can reference and call. In this step, a backend service interface is defined, and the corresponding interface file contains various methods, such as smart contract compilation method, smart contract deployment method, smart contract calling method, etc. See the following code segment, which is used to define the backend service interface:

[0053]

[0054] The above code first defines the backend service interface, and then declares the corresponding compilation method, etc., thereby realizing the setting of a backend service interface.

[0055] It is understandable that setting the business code of the backend service interface is to implement an instance of the backend service interface. Referring to the following code segment, an instance of the backend service interface ContractBackendService can be implemented:

[0056]

[0057]

[0058] After setting up the instance of the backend service interface, you can inject the business code into the Theia framework context. Specifically, you can use a preset decorator to inject the business code of the backend service interface into the context of the Theia framework and bind it to the dependency injection container of the Theia framework. For example, use the injectable decorator through Inversify.js to inject the business code into the context of the Theia framework.

[0059] S302. Set a front-end service interface with the same definition name as the back-end service interface on the front-end module, and inject the business code of the back-end service interface into the context of the Theia framework; wherein the front-end service interface and the back-end service interface are used to realize the communication between the front-end module and the back-end module through a preset communication protocol when developing a smart contract.

[0060] It is understandable that a front-end service interface with the same name as the back-end service interface is set on the front-end module here in order to use the instance of the back-end service interface more directly and conveniently without having to set up the instance again, that is, directly inject the business code of the back-end service interface as the business code of the front-end service interface into the context of the Theia framework.

[0061] See the following code snippet:

[0062]

[0063] The above code segment introduces how the front-end module calls the business code of the back-end service interface after registering the back-end service interface and the corresponding business code. Specifically, it first establishes a websocket communication connection and returns an instance of the back-end service interface.

[0064] In the specific implementation, the business code of the backend service interface is injected into the context of the Theia framework in this step, which may specifically include: injecting the business code of the backend service interface into the context of the Theia framework using a preset decorator, and binding it to the dependency injection container of the Theia framework. For example, the business code is injected into the context of the Theia framework using the injectable decorator through Inversify.js.

[0065] It is understandable that when developing a smart contract, the front-end service interface of the front-end module and the back-end service interface of the back-end module communicate with each other, so as to realize the communication between the front-end module and the back-end module, that is, the communication between the browser and the server.

[0066] The preset communication protocol may adopt the JSON-RPC protocol, which is a stateless and lightweight remote procedure call (RPC) transmission protocol, and its transmission content is mainly through JSON. In this way, the front-end and back-end modules can communicate through JSON-RPC on the websocket.

[0067] The method for building an online IDE for developing smart contracts provided by the embodiment of the present application is to set the front-end interactive interface of the online IDE through the first preset extension module of the Theia framework. The present application uses the extension module in the Theia framework to build the front-end interactive interface of the online IDE, and the setting process is simple and convenient. Moreover, since the bottom layer of the Theia framework reuses a lot of development tool code modules and interfaces, etc., functions such as code jump and file search are functions supported by the Theia framework itself, so the embodiment of the present application can provide a development experience similar to the desktop IDE. Because before using the Theia framework to build an online IDE, various language plug-ins (such as Go plug-ins, Solidity plug-ins, Java plug-ins) and environment variables are configured, so when using the online IDE built based on the Theia framework to develop smart contracts, it is not necessary to install various language plug-ins and configure environment variables, so the development process of smart contracts is relatively simple, which can bring a good development experience to developers.

[0068] The online IDE construction device for developing smart contracts provided in the embodiments of the present application is as follows: Figure 2 As shown, the device includes: an interface setting module 100, which is used to set the front-end interactive interface of the online IDE through a first preset extension module of the Theia framework.

[0069] In a specific implementation, the first preset extension module includes a menu extension module and a command extension module; the interface setting module includes:

[0070] A code writing unit, used to write business codes for displaying a plurality of preset submenus in the menu bar required for developing smart contracts in the menu extension module, and to write business codes corresponding to execution commands of the preset submenus in the command extension module;

[0071] A form configuration unit, used to trigger a corresponding button of a preset submenu in the menu bar, and pop up a form page corresponding to the preset submenu, wherein the form page is a configuration page of the preset submenu;

[0072] The code injection unit is used to inject the business code corresponding to the configuration information into the context of the Theia framework when the configuration information corresponding to the preset submenu is received through the form page.

[0073] In specific implementation, the code injection unit is specifically used to: when the configuration information corresponding to the preset submenu is received through the form page, the business code corresponding to the configuration information is written in a preset programming language, and the business code corresponding to the configuration information is injected into the context of the Theia framework using a preset decorator.

[0074] In a specific implementation, the device provided in the embodiment of the present application further includes:

[0075] A path definition module is used to set the path of the business code file of the backend module in the description file of the second preset extension module of the Theia framework; the path is used when the website server corresponding to the backend module is started, and the website server loads the business code in the business code file according to the path to realize the operation of the backend module; the website server provides a Node.js operating environment for the backend module.

[0076] In a specific implementation, the device provided in the embodiment of the present application further includes:

[0077] The communication configuration module is used to establish the communication mechanism between the front-end module and the back-end module.

[0078] In specific implementation, the communication configuration module is specifically used to: set an externally exposed backend service interface on the backend module, set the business code of the backend service interface, and inject the business code of the backend service interface into the context of the Theia framework; set a frontend service interface with the same definition name as the backend service interface on the front-end module, and inject the business code of the backend service interface into the context of the Theia framework; wherein the front-end service interface and the back-end service interface are used to realize communication between the front-end module and the back-end module through a preset communication protocol when developing smart contracts.

[0079] In the specific implementation, the communication configuration module injects the business code of the backend service interface into the backend context of the Theia framework, including: using a preset decorator to inject the business code of the backend service interface into the context of the Theia framework, and binding it to the dependency injection container of the Theia framework.

[0080] An embodiment of the present application also provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the steps of the above method when executing the computer program.

[0081] An embodiment of the present application also provides a computer-readable storage medium having a computer program stored thereon, and the computer program implements the steps of the above method when executed by a processor.

[0082] It is understandable that the apparatus, computer device, computer-readable storage medium provided in the embodiments of the present application, the explanations, examples, beneficial effects, etc. of the relevant contents may refer to the corresponding parts in the above-mentioned method and will not be repeated here.

[0083] It is understood that any reference to memory, storage, database or other media used in the embodiments provided herein may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0084] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0085] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0086] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for enabling a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0087] The embodiments of the present invention are described above in conjunction with the accompanying drawings, but the present invention is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the enlightenment of the present invention, ordinary technicians in this field can also make many forms without departing from the scope of protection of the purpose of the present invention and the claims, which all fall within the protection of the present invention.

Claims

1. A method for building an online IDE for developing smart contracts, characterized in that: include: The front-end interactive interface of the online IDE is set through a first preset extension module of the Theia framework, wherein the first preset extension module includes a menu extension module and a command extension module; The front-end interactive interface of the online IDE is set through the first preset extension module of the Theia framework, including: writing business codes for displaying multiple preset submenus in the menu bar required for developing smart contracts in the menu extension module, and writing business codes corresponding to the execution commands of the preset submenus in the command extension module; triggering the corresponding button of the preset submenu in the menu bar, popping up the form page corresponding to the preset submenu, and the form page is the configuration page of the preset submenu; when the configuration information corresponding to the preset submenu is received through the form page, the business code corresponding to the configuration information is injected into the context of the Theia framework; The path of the business code file of the backend module is set in the description file of the second preset extension module of the Theia framework; the path is used for the website server corresponding to the backend module to load the business code in the business code file according to the path when the website server is started, so as to realize the operation of the backend module; the website server provides the Node.js operating environment for the backend module; Building a communication mechanism between the front-end module and the back-end module, including: setting an externally exposed back-end service interface on the back-end module, setting the business code of the back-end service interface, and injecting the business code of the back-end service interface into the context of the Theia framework; setting a front-end service interface with the same definition name as the back-end service interface on the front-end module, and injecting the business code of the back-end service interface into the context of the Theia framework; wherein the front-end service interface and the back-end service interface are used to realize the communication between the front-end interactive interface and the back-end module through a preset communication protocol when developing smart contracts.

2. The method according to claim 1, characterized in that When the configuration information corresponding to the preset submenu is received through the form page, the business code corresponding to the configuration information is injected into the context of the Theia framework, including: When the configuration information corresponding to the preset submenu is received through the form page, the business code corresponding to the configuration information is written in a preset programming language, and the business code corresponding to the configuration information is injected into the context of the Theia framework using a preset decorator.

3. The method according to claim 1, characterized in that The injecting of the business code of the backend service interface into the backend context of the Theia framework includes: The business code of the backend service interface is injected into the context of the Theia framework using a preset decorator and bound to the dependency injection container of the Theia framework.

4. A device for building an online IDE for developing smart contracts, characterized in that: include: An interface setting module, used to set the front-end interactive interface of the online IDE through a first preset extension module of the Theia framework, wherein the first preset extension module includes a menu extension module and a command extension module; The front-end interactive interface of the online IDE is set through the first preset extension module of the Theia framework, including: writing business codes for displaying multiple preset submenus in the menu bar required for developing smart contracts in the menu extension module, and writing business codes corresponding to the execution commands of the preset submenus in the command extension module; triggering the corresponding button of the preset submenu in the menu bar, popping up the form page corresponding to the preset submenu, and the form page is the configuration page of the preset submenu; when the configuration information corresponding to the preset submenu is received through the form page, the business code corresponding to the configuration information is injected into the context of the Theia framework; The path of the business code file of the backend module is set in the description file of the second preset extension module of the Theia framework; the path is used for the website server corresponding to the backend module to load the business code in the business code file according to the path when the website server is started, so as to realize the operation of the backend module; the website server provides the Node.js operating environment for the backend module; Building a communication mechanism between the front-end module and the back-end module, including: setting an externally exposed back-end service interface on the back-end module, setting the business code of the back-end service interface, and injecting the business code of the back-end service interface into the context of the Theia framework; setting a front-end service interface with the same definition name as the back-end service interface on the front-end module, and injecting the business code of the back-end service interface into the context of the Theia framework; wherein the front-end service interface and the back-end service interface are used to realize the communication between the front-end interactive interface and the back-end module through a preset communication protocol when developing smart contracts.

5. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 3 are implemented.

6. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 3 are implemented.