KR102560619B1 - Electronic device providing no-code tool service and method thereof - Google Patents

Abstract

An electronic device and method for providing a no-code tool service for generating a web page are disclosed. The method generates a page to which an address is assigned on the web, displays a cursor moving according to a user input within the page, generates an input window corresponding to the first position upon receiving a first user input selecting a first position within the page, receives a command input for generating at least one of a modal window, a notification window, and a component through the input window, and if the command input corresponds to the component, the component is created to create the first position. In response to a second user input for selecting a second position inside the component, a drop-down menu for generating at least one user interface object selected from text, buttons, images, and input windows is displayed, and in response to a third user input for selecting one user interface object from the drop-down menu, the selected user interface object is displayed at the second position, and the setting values of the page, modal window, notification window, and component are displayed on one side of the screen. At this time, the setting values of the page, modal window, notification window, and components are implemented with the Svelte framework written in Typescript.

Description

Electronic device and method for providing no-code tool service {ELECTRONIC DEVICE PROVIDING NO-CODE TOOL SERVICE AND METHOD THEREOF}

The present invention relates to an electronic device and method for providing a no-code tool service for creating a web page.

With the advent of the Fourth Industrial Revolution, digital transformation is accelerating in all areas of society. Digital transformation means leveraging software to create custom platforms. Since business models are diverse, the reality is that the needs for the platform are also diverse and numerous, but it is difficult for small and medium-sized enterprises (SMEs) to secure coding and programming experts. Therefore, many efforts are being made to train developers in the government and private sectors, but there are limitations. Therefore, a no-code, low-code platform that allows even those who are not familiar with programming to implement a service or application they need by using a template within the platform is growing in the development market. A no-code platform means a method of developing web pages or web applications without coding, and a low-code platform means providing minimal and simplified coding so that developers can code similarly.

However, the existing Nocode tool platform has limitations in applying various business models by focusing on specific functions, or it is still difficult for the general public to access due to the high complexity of the interface. Also, the low-code platform is mainly used as a tool for developers to help develop complex programs. Accordingly, there is a need for a method and system for providing a no-code tool service that can be applied to various business models in a more visual and efficient manner.

(Patent Document 1) KR 102482641

The present invention is to solve the above problems, and an object of the present invention is to provide a no-code tool service that can easily provide a web page by providing an intuitive user interface.

In addition, an object of the present invention is to provide a no-code tool service capable of providing a web page with a minimized runtime load.

However, the technical problem to be achieved by the present embodiment is not limited to the technical problems described above, and other technical problems may further exist.

To achieve the above object, a method of operating an electronic device according to an embodiment of the present invention includes generating a page to which an address is assigned on a web; displaying a cursor moving according to a user input within the page; generating an input window corresponding to the first location when a first user input for selecting a first location within the page is received; Receiving a command input for generating at least one of a modal window, a notification window, and a component through the input window; If the command input corresponds to the component, creating and displaying the component at the first location, and in response to a second user input selecting a second location within the component, displaying a drop-down menu for generating at least one user interface object selected from text, buttons, images, and input windows; displaying the selected user interface object at the second location in response to a third user input for selecting one user interface object from the drop-down menu; and displaying the setting values of the page, the modal window, the notification window, and the components on one side of the screen. At this time, the setting values of the page, the modal window, the notification window, and the components are implemented with the Svelte framework written in Typescript.

Other specific details of the invention are included in the detailed description and drawings.

Various embodiments of the present invention may provide a user experience capable of creating a web page through a visual user interface rather than programming.

In addition, various embodiments of the present invention can provide a web page with a minimized runtime load by using the Svelte framework written in Typescript.

In addition, various embodiments of the present invention can provide a stable web page driving environment by providing a Typescript-based front end and back end.

The effects of the present invention are not limited to the effects mentioned above, and other effects not mentioned will be clearly understood by those skilled in the art from the description below.

1 shows a no-code tool system that provides a no-code tool service for creating a web page according to an embodiment of the present invention.
2 is a diagram illustrating an operating method of an electronic device providing a no-code tool service according to an embodiment of the present invention.
3 shows a screen on which an electronic device provides a no-code tool service according to an embodiment of the present invention.
4 illustrates an input window generated corresponding to a first position according to an embodiment of the present invention.
5 shows a component created according to one embodiment of the present invention.
6 illustrates a screen for inputting data through a modal window created according to an embodiment of the present invention and a setting button of the modal window.
7 illustrates a screen for inputting data through a setting button of a notification window created according to an embodiment of the present invention.
8 shows page setting values written in TypeScript according to an embodiment of the present invention.
9 shows a component created according to one embodiment of the present invention.
FIG. 10 shows component setting values written in TypeScript corresponding to the components of FIG. 9 .
11 is a configuration diagram of an electronic device according to an embodiment of the present invention.

Hereinafter, the present invention will be described in detail with reference to the accompanying drawings. In describing the present invention, if it is determined that a detailed description of related known technologies may unnecessarily obscure the subject matter of the present invention, the detailed description will be omitted. In addition, numbers (eg, first, second, etc.) used in the description process of this specification are only identifiers for distinguishing one component from another component.

It should be understood that when an element is referred to as being "connected" or "connected" to another element, it may be directly connected or connected to the other element, but other elements may exist in the middle. On the other hand, when an element is referred to as “directly connected” or “directly connected” to another element, it should be understood that no other element exists in the middle.

Terms used in this application are only used to describe specific embodiments, and are not intended to limit the present invention. Singular expressions include plural expressions unless the context clearly dictates otherwise. In this application, the terms "comprise" or "have" are intended to designate that the features, numbers, steps, operations, components, parts, or combinations thereof described in the specification exist, but it should be understood that the presence or addition of one or more other features or numbers, steps, operations, components, parts, or combinations thereof is not excluded in advance.

Unless otherwise defined, all terms (including technical and scientific terms) used in this specification may be used with meanings commonly understood by those skilled in the art to which the present invention belongs. In addition, terms defined in commonly used dictionaries are not interpreted ideally or excessively unless explicitly specifically defined.

In this specification, an electronic device means a hardware device including a wireless communication function including at least one processor, and may be understood as encompassing a software configuration operating in a corresponding hardware device according to an embodiment. For example, an electronic device may be understood as including all desktops, laptops, smartphones, mobile phones, hand-held devices, tablet PCs, and user clients and applications running on each device, but is not limited thereto.

Also, in this specification, a device may be used interchangeably with a “device” or a “device”, and “device”, “device”, and “apparatus” may be described as the same expression.

Although each step described in this specification is described as being performed by a terminal, the subject of each step is not limited thereto, and at least a part of each step may be performed in different devices according to embodiments.

Hereinafter, with reference to the accompanying drawings, preferred embodiments of the present invention will be described in more detail. Hereinafter, the same reference numerals are used for the same components in the drawings, and redundant descriptions of the same components are omitted.

1 shows a no-code tool system 1 that provides a no-code tool service for creating a web page according to an embodiment of the present invention.

System 1 according to an embodiment of the present invention is configured to include an electronic device 10 and a server device 20.

The user of the electronic device 10 may execute the no-code tool service through a pre-installed application or web application. The no-code tool service according to an embodiment of the present invention may include a frontend that provides a user interface for creating a web page on the electronic device 10 and a database pre-installed on the server device 20, and a backend that provides server management and the like. At this time, the electronic device 10 and the server device 20 may communicate with each other through a network. Here, the network may include wired and wireless networks implemented with various technologies.

System 1 according to an embodiment of the present invention allows users to intuitively create web pages and/or web applications using a visual user interface without using a programming language through a no-code tool service, so that non-developers can easily create desired web pages and/or web applications. Hereinafter, it will be described in detail with reference to FIGS. 2 to 11 .

2 is a diagram illustrating an operating method of an electronic device providing a no-code tool service according to an embodiment of the present invention.

Referring to FIG. 2 , the electronic device 10 creates a page to which an address is assigned on the web (S21). Here, the page is a basic screen provided on the web, and may be interlocked with other pages or other web applications. The electronic device 10 may allow the created page to be provided on the web by allocating a web address to the created page. Meanwhile, the electronic device 10 may restrict access to the web address assigned to the page until a user input indicating that page creation is complete (eg, a 'release' button input in FIG. 3 ) is received. 3 shows a screen on which the electronic device 10 provides a no-code tool service according to an embodiment of the present invention. Referring to FIG. 3 , the electronic device 10 may create a page 31 to which an address on the web is assigned. At this time, whether the corresponding page 31 has a child page or a parent page can be provided through the setting window 32 on the left side of the screen.

Referring back to FIG. 2 , the electronic device 10 displays a cursor moving according to a user input within a page (S22). For example, the electronic device 10 may display a cursor according to a user input of moving a mouse or a joystick, or may display a cursor according to a user input of hovering over a screen. However, it is not limited thereto. Meanwhile, the cursor may have a '/' shape 33 as shown in FIG. 3, but is not limited thereto.

Next, the electronic device 10 generates an input window corresponding to the first position as the first user input for selecting the first position within the page is received (S23). Here, the first user input for selecting the first location may include a touch, a click, and the like, but is not limited thereto.

4 illustrates an input window generated corresponding to a first position according to an embodiment of the present invention. Referring to FIG. 4 , the electronic device 10 may display an input window 41 at a first location 33 where a user input is received.

The electronic device 10 receives a command input for generating at least one of a modal window, a notification window, and a component through an input window (S24). The command input may be a preset string, and as non-limiting examples, may be 'component', 'component', 'cp new', 'cp win', 'modal', 'modal', 'mw new', 'alarm', 'notify', 'notify', 'aw new', and the like. The electronic device 10 may provide a usable command list below the input window as an opaque pop-up window.

If the command input corresponds to the component, the electronic device 10 creates the component and displays it in the first position, and displays a drop-down menu for generating at least one user interface object among text, button, image, and input window in response to a second user input for selecting a second position inside the component (S25). The electronic device 10 may display a drop-down menu by further including a card, a tab bar, and the like in addition to the user interface objects. Meanwhile, the size of the generated component may be determined as a predetermined initial value, but may be changed according to a user input of dragging an edge of the component.

5 shows a component created according to one embodiment of the present invention. When a command input corresponding to a component such as 'component', 'component', 'cp new', 'cp win', etc. is received in the input window, the electronic device 10 may create a component 51 having a predetermined size at the first position (31 in FIG. 3 ). In addition, the electronic device 10 may display the drop-down menu 53 in response to a user input for selecting the second location 52 inside the component 51 . Meanwhile, according to embodiments, the electronic device 10 may receive a command input corresponding to each user interface object at the second location 52 . In this case, a user interface corresponding to the command input may be created and the drop-down menu 53 may be removed.

Referring back to FIG. 2 , the electronic device 10 displays the selected user interface object at the second location in response to a third user input for selecting one user interface object from the drop-down menu (S26). For example, the electronic device 10 may display a text input window for text input when a text object is selected, and may display a button input window for creating buttons when a button object is selected. In this case, the button input window may further provide a user interface through which a user may input and/or select an action object to be operated in connection with each button. Also, when an image is selected, the electronic device 10 may display a user interface for uploading and/or capturing an image.

Additionally, if the command input corresponds to the modal window, the electronic device 10 may create a modal window and display it at the first position. The electronic device 10 may receive a fourth user input for inputting at least one of color, data, and action of the modal window through a modal setting button activated on an upper side of the modal window. 6 illustrates a screen for inputting data through a modal window created according to an embodiment of the present invention and a setting button of the modal window.

In addition, if the command input corresponds to the notification window, the electronic device 10 may receive a fifth user input for inputting at least one of color, data, action, and close button settings of the notification window through a notification setting button activated on one side of the page. 7 illustrates a screen for inputting data through a setting button of a notification window created according to an embodiment of the present invention.

Meanwhile, the electronic device 10 may update the setting values of the component, modal window, and notification window in response to a user input for moving the component, modal window, and notification window within the page. In this case, the component, the modal window, and the notification window may be moved and positioned in response to a user input.

Referring back to FIG. 2 , the electronic device 10 displays a command input, a page generated in response to user inputs, a modal window, a notification window, and component setting values on one side of the screen (S27). Here, setting values may include names, colors, positions, sizes, hierarchies, user interface object information, data, actions, and the like of pages, modal windows, notification windows, and components. As shown in FIGS. 3 to 7 , the electronic device 10 may display the setting value on the left side of the screen 32, but is not limited thereto, and the electronic device 10 may display the setting value in a pop-up window. The electronic device 10 may change settings of the page, modal window, notification window, and components not only within the page but also through the setting value. For example, the electronic device 10 may create a new modal window, notification window, and component by using the '+' button 34 .

Meanwhile, the generated page, modal window, notification window, and setting values of components are implemented with the Svelte framework written in Typescript. Typescript is a JavaScript-based language that does not require a separate transpiler and can use a JavaScript engine, which is excellent in terms of extensibility. In addition, Svelte is a framework (or compiler) that is advantageous for runtime operation by minimizing build capacity by removing virtual document object models and libraries. The electronic device 10 can provide users with efficient webpage creation and operation by minimizing runtime load through the Svelte framework written in TypeScript.

The electronic device 10 may add setting values of a page, a modal window, a notification window, and components to a predetermined TypeScript structure in response to a user input. In this case, the structure may be determined differently for each page, modal window, notification window, and component.

8 shows page settings written in TypeScript according to an embodiment of the present invention, FIG. 9 shows components created according to an embodiment of the present invention, and FIG. 10 shows component settings written in TypeScript corresponding to the components of FIG. 9 .

First, referring to FIG. 8 , the electronic device 10 may add a setting value of a page to a predetermined TypeScript structure. For example, the electronic device 10 may include a unique value of a page (id), a unique value of a web application created by a user (applicationId), a title (title), a web address (path), a parameter list (params), a retained component (blocks), an action that occurs when a page is loaded (loadActions), a value returned after an action (loadedDataSchema), and retained banners (banners). The electronic device 10 may add a value corresponding to a user input to a structure in addition to a page-specific value (id), a web application-specific value (applicationId), and a web address (path) that are automatically retained as a page is created.

Referring to FIGS. 9 and 10 , the electronic device 10 may add setting values of components to a predetermined TypeScript structure. At this time, the structure in which the setting value of the component is added is different from the structure of the page. For example, the electronic device 10 may include a unique value (id) of a component, a component type (typeSlug), a property (props), a retained user interface object (childBlocks), an action transmission value (value), a label (label), an action generated when a component is clicked (clickActions), and the like. Since the text user interface object 91 and the image user interface object 92 are created in FIG. 9 , referring to FIG. 10 , the electronic device 10 may add a first retained user interface object 101 and a second retained user interface object 102 corresponding to the text user interface object 91. At this time, since the structure of each added user interface object is similar to that of a component, a detailed description thereof will be omitted.

On the other hand, the front end implemented with the Svelte framework can communicate with the backend implemented with the NestJS framework written using TypeScript and TypeORM (Type Object Relational Mapping) in the server device 20. Here, TypeORM can be used to create SQL queries for database access by analyzing objects written in TypeScript, and Nest JavaScript is advantageous for developing server-side applications by incorporating many libraries and guaranteeing finality through plug-ins. The server device 20 may store the setting value received from the front end in a database corresponding to the user of the electronic device 10, and may extract and provide data requested by the front end from the database.

The system 1 according to an embodiment of the present invention implements a front end and a back end using Type Script to perform dynamic rendering, thereby providing high stability to a generated web page. In addition, system 1 according to an embodiment of the present invention may further use SvelteKit as a framework in addition to the aforementioned Svelte in the front end, and may further use postgresQL in the back end, but is not limited thereto.

Meanwhile, each step in the above description may be further divided into additional steps or combined into fewer steps according to an embodiment of the present invention. Also, some steps may be omitted if necessary, and the order of steps may be changed.

11 is a configuration diagram of an electronic device 10 according to an embodiment of the present invention. The electronic device 10 of FIG. 11 is related to the embodiments described above with reference to FIGS. 1 to 10 . Therefore, even if the contents are omitted below, the contents previously described in FIGS. 1 to 10 may be applied to the configuration of FIG. 11 .

The processor 111 may include one or more cores (not shown) and a graphic processing unit (not shown) and/or a connection path (eg, a bus) for transmitting and receiving signals to and from other components.

Processor 111 according to one embodiment performs the method described with respect to FIGS. 1-10 by executing one or more instructions stored in memory 112 . For example, the processor 111 creates a page to which an address is assigned on the web, displays a cursor moving according to a user input within the page, generates an input window corresponding to the first position as a first user input for selecting a first position within the page is received, and receives a command input for generating at least one of a modal window, a notification window, and a component through the input window. In addition, if the command input corresponds to the component, the processor 111 creates and displays the component at a first location, displays a drop-down menu for generating at least one user interface object of text, buttons, images, and an input window in response to a second user input selecting a second location within the component, displays the selected user interface object at the second location in response to a third user input for selecting one user interface object from the drop-down menu, and displays the selected user interface object on one side of the screen. Displays the created modal window, notification window, and component settings. At this time, the setting values of the page, modal window, notification window, and components are implemented with the Svelte framework written in Typescript.

In addition, if the command input corresponds to the modal window, the processor 111 may create a modal window, display it at the first position, and receive a fourth user input for inputting at least one of the color, data, and action of the modal window through a modal setting button activated on one side of the top of the modal window.

In addition, if the command input corresponds to the notification window, the processor 111 may receive a fifth user input inputting at least one of color, data, action, and close button settings of the notification window through a notification setting button activated on one side of the page.

Also, the processor 111 may update setting values of the component, the modal window, and the notification window in response to a user input for moving the component, the modal window, and the notification window within the page.

On the other hand, the frontend implemented with the Svelte framework communicates with the backend implemented with the NestJS framework written using TypeScript and TypeORM (Type Object Relational Mappling) in the server device 20. The server device 20 may store setting values in a database corresponding to the user of the electronic device 10.

In addition, the processor 111 may add setting values of the page, the modal window, the notification window, and the components to a predetermined TypeScript structure. At this time, the TypeScript structure may be determined differently for each page, modal window, notification window, and component.

Also, the processor 111 may display a '/' shape in response to a user input of hovering the screen.

Meanwhile, the processor 111 may further include a RAM (Random Access Memory, not shown) and a ROM (ROM: Read-Only Memory, not shown) that temporarily and/or permanently store signals (or data) processed inside the processor 111. In addition, the processor 111 may be implemented in the form of a system on chip (SoC) including at least one of a graphics processing unit, RAM, and ROM.

The memory 112 may store programs (one or more instructions) for processing and control of the processor 111 . Programs stored in the memory 1020 may be divided into a plurality of modules according to functions.

The communication unit 113 includes at least one component necessary for transmitting and receiving data to and from the server device 20 or other devices. For example, the communication unit 113 may be implemented by including an internet protocol (IP) communication circuit, a mobile communication circuit, a satellite communication circuit, and the like.

In addition to the above configurations, the electronic device 10 may further include a display unit 114 that displays data processed in each function and receives user input (e.g., mouse input, joystick input, touch, etc.), a microphone (not shown) that receives the user's voice, and the like. However, it will be easily understood by those skilled in the art that the electronic device 10 of the present invention may be implemented by including more components.

Steps of a method or algorithm described in connection with an embodiment of the present invention may be implemented directly in hardware, implemented in a software module executed by hardware, or implemented by a combination thereof. A software module may reside in random access memory (RAM), read only memory (ROM), erasable programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), flash memory, a hard disk, a removable disk, a CD-ROM, or any other form of computer-readable recording medium well known in the art.

Components of the present invention may be implemented as a program (or application) to be executed in combination with a computer, which is hardware, and stored in a medium. Components of the present invention may be implemented as software programming or software elements, and similarly, an embodiment may be implemented in a programming or scripting language such as C, C++, Java, assembler, etc., including various algorithms implemented as data structures, processes, routines, or combinations of other programming constructs. Functional aspects may be implemented in an algorithm running on one or more processors.

The above description is merely an example of the technical idea of the present invention, and various modifications and variations can be made to those skilled in the art without departing from the essential characteristics of the present invention. In addition, the embodiments disclosed in the present invention are not intended to limit the technical idea of the present invention, but to explain, and the scope of the technical idea of the present invention is not limited by these embodiments. Therefore, the scope of the present invention should be construed according to the claims below, and all technical ideas within the equivalent range should be construed as being included in the scope of the present invention.

1: No-code tool service system
10: electronic device
20: server device

Claims (9)

In the operating method of an electronic device providing a No-Code Tool service for generating a web page,
generating a page to which an address is assigned on the web;
displaying a cursor moving according to a user input within the page;
generating an input window corresponding to the first location when a first user input for selecting a first location within the page is received;
Receiving a command input for generating at least one of a modal window, a notification window, and a component through the input window;
If the command input corresponds to the component, creating and displaying the component at the first location, and in response to a second user input selecting a second location within the component, displaying a drop-down menu for generating at least one user interface object selected from text, buttons, images, and input windows;
displaying the selected user interface object at the second location in response to a third user input for selecting one user interface object from the drop-down menu; and
Displaying the setting values of the page, the modal window, the notification window, and the component on one side of the screen,
The setting values of the page, the modal window, the notification window, and the component are added to a predetermined Typescript structure,
The page setting value includes a unique value of the generated web application, a title, a web address, a parameter list, a retained component, an action that occurs when the page is loaded, and a value returned according to the action,
The setting value of the component includes a unique value of the component, a component type, a property, a retained user interface object, an action transfer value, and a label value,
The predetermined TypeScript structure is implemented with the Svelte framework written in TypeScript,
The frontend implemented with the Svelte framework communicates with a backend implemented with the NestJS framework written using TypeScript and TypeORM (Type Object Relational Mapping) on the server device. According to claim 1,
Receiving the command input,
if the command input corresponds to the modal window, generating a modal window and displaying the modal window at the first location; and
and receiving a fourth user input for inputting at least one of color, data, and action of the modal window through a modal setting button activated on an upper side of the modal window. According to claim 2,
Receiving the command input
If the command input corresponds to the notification window, receiving a fifth user input for inputting at least one of color, data, action, and close button settings of the notification window through a notification setting button activated on one side of the page. The method of claim 3, wherein the method,
The method further comprising updating setting values of the component, the modal window, and the notification window in response to a user input for moving the component, the modal window, and the notification window within the page. delete delete According to claim 1,
In the step of displaying the cursor,
The method of displaying a '/' shape in response to a user input hovering over the screen. communications department;
display unit;
a memory that stores one or more instructions; and
a processor to execute the one or more instructions stored in the memory;
By executing the one or more instructions, the processor:
An electronic device performing the method of claim 1 . A computer program stored in a computer-readable recording medium to be combined with a computer, which is hardware, to perform the method of claim 1.