KR20150099171A - A device for providing an application developing environment - Google Patents

Abstract

A method for providing an application development environment according to the embodiment of the present invention includes the steps of: displaying a first screen to show a connection relation between a plurality of pages comprising an application; displaying a second screen to show a connection relation between a plurality of components defined with an intermediate language with regard to any one page among the pages; displaying a third screen to graphically show a connection relation for data binding and a database by connecting an icon corresponding to one or more databases with a drag and connection method; verifying a structural connection error between a first component and a second component which are connected by an arrow if the first component including event information and the second component including action information are connected by the arrow on the second screen; displaying error information on the screen if an error is detected by the verification result; generating a first code composed of an intermediate language corresponding to a connection between the first component and the second component if the error is not detected; displaying a selection screen for selecting a target browser or a target platform on which the application is installed; identifying the resolution information of a terminal on which the target platform or the target browser selected through the selection screen is driven; determining the layout of the components based on the resolution information and arrangement information corresponding to the arrangement state of at least one component displayed on the second screen; and converting the first code into a second code according to the determined layout.

Description

[0001] The present invention relates to an apparatus for providing an application development environment,

The present invention relates to a method of providing an application development environment, and more particularly, to a method of providing an application development environment capable of improving development efficiency of an application developer.

2. Description of the Related Art In recent years, various types of terminal devices such as smart phones and tablet PCs have emerged, and interest in applications that can be used in such terminal devices is being amplified.

Particularly, in recent years, when a developer develops an application and uploads the application to a predetermined application store, a method in which users access the application store using a terminal device, and then purchase and download an application desired by the user is widely used. Accordingly, application development is actively performed in various fields.

In order to develop such diverse and active applications, experts who are dealing with C language, Java (JAVA), OBDC, SQL etc. are generally doing direct code writing and development.

1 is a diagram showing a general application development environment.

As shown in FIG. 1, in general application development, widgets such as Activity, Dialog, Frame, and the like are declared for step-by-step matching by each event or window message, and an event procedure And the like.

However, such a development approach is only accessible to experienced developers and requires expertise in the languages described above. In addition, the developer must implement a large amount of code directly through the event procedure, so that it is difficult to perform application development with a lot of knowledge and considerable effort.

Further, when there is a change in the service scenario based on the developed code, the developer has to change many codes again.

In addition, there is a difference in the degree of expertise and personal code style among developers, so it is difficult to ensure interoperability between modules when collective collaboration or developer replacement, and code can be complicated according to understanding of modularity, Lt; / RTI >

On the other hand, even if a developer develops an application having the same function, there is a problem that development must be performed using different application development tools depending on the platform of the OS to which the application is applied. In addition, .

It is an object of the present invention to provide a method of providing an application development environment capable of improving development efficiency of a developer.

It is another object of the present invention to provide a method of providing an application development environment that provides a user interface that facilitates scenario management and application development without complicated and specialized knowledge.

It is still another object of the present invention to provide an application development environment providing method capable of adaptively applying conversion and adaptation to various devices while maintaining compatibility between modules, thereby preventing duplication of development.

In order to achieve the above object, an apparatus for providing an application development environment according to an embodiment of the present invention includes identification information, version information, developer information, authentication information, image information, database connection information, server connection information, A connection between a plurality of page images constituting an application and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, Displaying a first screen including a page tab region for adding a page on a page-to-page connection region and a page-to-page connection region indicating a relationship and setting a connection relationship between pages, Within each page A second screen showing a connection relationship between a plurality of components responsible for a screen or a function is displayed and an icon corresponding to one or more databases is connected in a drag and connect manner to graphically associate an association for a database and data binding A display unit for displaying a third screen representing the first screen;

When one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application are inputted on the application project setting screen, And controls the first component including the event information and the second component including the action information to be connected to each other in the second screen, and controls the first component and the second component to be structured And a control unit for verifying the connection error and displaying the error information on the screen when an error is found.

According to an embodiment of the present invention, when providing an application development environment, a first screen showing a connection relationship between a plurality of pages is displayed, and a second screen showing a connection relationship between the components is displayed on any one of the pages.

In particular, the first component including the event information and the second component including the action information can be connected to intuitively display the connection relationship between the components.

Meanwhile, since the connection relation can be changed according to the transformation of the image object indicating the connection relation between the components, even the general developer who does not have the expert knowledge can easily perform the connection relationship between the components and the scenario implementation.

In addition, by using an intermediate language according to the embodiment of the present invention for developing such an application, the same application can be easily converted and applied to different OS platforms. Therefore, it is possible to develop applications that can be used in various OSs through a single application development, thereby greatly reducing the time and effort required for development.

In addition, various user interfaces and operations for facilitating application development can be provided, and the convenience of use of the developer can be increased.

1 shows a general application development screen.
FIG. 2 is a diagram schematically showing an example of a whole development system including an application development environment providing apparatus according to an embodiment of the present invention.
3 shows a detailed configuration of an application development environment providing apparatus according to an embodiment of the present invention.
4 to 7 are diagrams for explaining a method of providing an application development environment according to an embodiment of the present invention.
8 is a diagram showing a relationship between a second screen and an actual code according to the embodiment of the present invention.
FIG. 9 is a view for explaining an action list of the second screen 120 according to an embodiment of the present invention.
10 illustrates a method of displaying a component block and a connection relationship in an application development environment providing apparatus 100 according to another embodiment of the present invention.
11 is a diagram for explaining a method of adding a component of an application development environment providing apparatus 100 according to an embodiment of the present invention.
FIG. 12 shows a data binding method of an apparatus 100 for providing an application development environment according to an embodiment of the present invention.
FIG. 13 shows a relational database management system (RDBMS) setting method of an application development environment provision apparatus 100 according to an embodiment of the present invention.
14 shows an open API type data setting method of the application development environment provision apparatus 100 according to an embodiment of the present invention.
FIG. 15 shows a detailed restful / SOAP setting method of the application development environment provision apparatus 100 according to an embodiment of the present invention.
16 to 25 are diagrams for explaining a method of providing an application development environment according to another embodiment of the present invention.
26 shows a screen in which an application converted by the application development environment providing apparatus 100 into a second language that can be driven by the target terminal 300 and output by the target terminal 300 is executed.
27 and 28 illustrate a method of arranging the components of the second screen provided in the application development environment providing apparatus 100 according to another embodiment of the present invention.
29 shows a layout method of an application development environment providing apparatus 100 according to another embodiment of the present invention.
Figures 29-31 illustrate embodiments of block layout.
33 is a block diagram illustrating a platform of a terminal 300 capable of executing an application and FIG. 34 is a block diagram illustrating an architecture of an application development environment providing apparatus 100 according to an embodiment of the present invention. FIG. Fig.
35 shows a component structural view according to an embodiment of the present invention.
FIGS. 36 to 53 are views for explaining a process of creating an application using screens provided according to an application development environment providing method according to an embodiment of the present invention.

The following merely illustrates the principles of the invention. Thus, those skilled in the art will be able to devise various apparatuses which, although not explicitly described or shown herein, embody the principles of the invention and are included in the concept and scope of the invention. Furthermore, all of the conditional terms and embodiments listed herein are, in principle, intended only for the purpose of enabling understanding of the concepts of the present invention, and are not intended to be limiting in any way to the specifically listed embodiments and conditions .

It is also to be understood that the detailed description, as well as the principles, aspects and embodiments of the invention, as well as specific embodiments thereof, are intended to cover structural and functional equivalents thereof. It is also to be understood that such equivalents include all elements contemplated to perform the same function irrespective of the currently known equivalents as well as the equivalents to be developed in the future, i.e., the structure.

Thus, for example, it should be understood that the block diagrams herein represent conceptual views of exemplary circuits embodying the principles of the invention. Similarly, all flowcharts, state transition diagrams, pseudo code, and the like are representative of various processes that may be substantially represented on a computer-readable medium and executed by a computer or processor, whether or not the computer or processor is explicitly shown .

The functions of the various elements shown in the figures, including the functional blocks depicted in the processor or similar concept, may be provided by use of dedicated hardware as well as hardware capable of executing software in connection with appropriate software. When provided by a processor, the functions may be provided by a single dedicated processor, a single shared processor, or a plurality of individual processors, some of which may be shared.

Also, the explicit use of terms such as processor, control, or similar concepts should not be interpreted exclusively as hardware capable of running software, and may be used without limitation as a digital signal processor (DSP) (ROM), random access memory (RAM), and non-volatile memory. Other hardware may also be included.

In the claims hereof, the elements represented as means for performing the functions described in the detailed description include all types of software including, for example, a combination of circuit elements performing the function or firmware / microcode etc. , And is coupled with appropriate circuitry to execute the software to perform the function. It is to be understood that the invention defined by the appended claims is not to be construed as encompassing any means capable of providing such functionality, as the functions provided by the various listed means are combined and combined with the manner in which the claims require .

BRIEF DESCRIPTION OF THE DRAWINGS The above and other objects, features and advantages of the present invention will become more apparent from the following detailed description of the present invention when taken in conjunction with the accompanying drawings, in which: There will be. In the following description, well-known functions or constructions are not described in detail since they would obscure the invention in unnecessary detail.

Hereinafter, a preferred embodiment of the present invention will be described in detail with reference to the accompanying drawings.

2 is a diagram schematically showing an example of an application development system including an application development environment provision apparatus 100 according to an embodiment of the present invention.

2, an application development system according to an embodiment of the present invention includes an application development environment provision apparatus 100, a server 200, a terminal 300, and a market network 400.

The application development environment provision apparatus 100 intuitively manages a connection relationship between a plurality of pages constituting an application and a connection relation between a plurality of components with respect to any one of the plurality of pages according to an embodiment of the present invention Can be provided.

To this end, the application development environment providing apparatus 100 displays a first screen showing a connection relationship between a plurality of pages constituting an application, and connects a connection among a plurality of components to any one of the plurality of pages And a controller for controlling a connection between a first component including event information and a second component including action information on the second screen.

Here, the application may mean application data to be executed by the application development environment providing apparatus 100 or the terminal 300. [ The application data may be generated by the application development environment providing apparatus 100 and directly transmitted to the terminal 300. [

In addition, the generated application data may be uploaded to the market network 400, and the uploaded application data may be transmitted to the purchase authenticated terminal 300.

And, the application may include a plurality of pages, and each page may include a plurality of components.

The application page may refer to an electronic document or graphical user interface as an object interpreted and executed by the terminal 300. [ In addition, a plurality of components included in each page may form a connection relationship with components included in other pages structurally.

Such a connection relationship may be formed when event information included in a specific component is linked to action information of another component.

More specifically, when an application is executed and an event of a specific component is generated based on the event information, an action for the other component may be performed based on action information of another component connected to the event.

Accordingly, when the application is executed, the terminal 300 can perform various operations according to a connection relationship among a plurality of pages and a connection relation between the respective components. Then, the developer can use this to provide various application services. In particular, according to the embodiment of the present invention, it is possible to reduce time and effort for development by providing an intuitive and simple interface for establishing a connection relationship between pages and components, There is an effect that it becomes easy.

Meanwhile, the application development environment providing apparatus 100 can configure an application project, which is generated through an application development environment, as an intermediate language, and adapt an application project or application code configured in an intermediate language to an adaptive . ≪ / RTI > Then, the application development environment provision apparatus 100 can output an executable application in the target terminal.

In particular, the application development environment provision apparatus 100 can generate an application configured as a component-based intermediate language in order to solve the problems of the conventional formal development pattern and low code reusability. As a result, application developers can perform scenario planning, server development, and client development concurrently.

The application development environment provision apparatus 100 can provide an integrated platform for application development, provide an interface to add UX component and server component development and template development, and can easily create a component You can provide an open platform that you can easily add. Therefore, according to the embodiment of the present invention, it is possible to provide an application development environment as a user-centered product rather than a developer center.

Meanwhile, the server 200 can be connected to the application development environment providing apparatus 100, and can provide necessary data, authentication information, and the like in the application development environment providing apparatus 100.

In addition, the server 200 may check the version information of the application development environment provision apparatus 100 and may provide an update. The server 200 may include a database or a WAS (Web Application Server) required by the application development environment providing apparatus 100.

In particular, the server 200 may include a component database that can be used in the application development environment providing apparatus 100. The server 200 may transmit the component to the application development environment providing apparatus 100 in which the purchase of the specific component is authenticated. The server 200 may include a web container for analyzing the components.

Each terminal 300 may be a terminal capable of executing an application generated in the application development environment providing apparatus 100, and may be a smart phone, a tablet PC, or the like.

In particular, the platform or OS of each terminal 300 may be different from each other. Accordingly, the application development environment provision apparatus 100 according to the embodiment of the present invention can identify a target terminal, and convert an application configured in an intermediate language into a code corresponding to a target terminal. Then, the target terminal can receive and execute the converted application. Through this, developers can greatly reduce the time and effort required to convert the same application to another platform, and can easily perform conversion and development without expert knowledge of other operating systems.

3 shows a detailed configuration of an application development environment providing apparatus according to an embodiment of the present invention.

The detailed configuration of the application development environment providing device includes an application project setting for inputting one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, An inter-page connection area indicating a connection relationship between a plurality of page images constituting an application and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, A first screen including a form tab region for adding a page on an inter-connection region and establishing a connection relationship between the pages, and displaying a first screen on each of the plurality of pages, Multiple composers responsible for A second screen including a first component including event information and a second component including action information is displayed by arrows and displayed on the screen, and the second screen is added to one of the plurality of pages - a display unit (191) for displaying a list of predefined components, each of which includes a plurality of component items, each component item corresponding to each component code having a predefined function or screen; If at least one of the identification information, the version information, the developer information, the authentication information, the image information, the database connection information, the server connection information, the module connection information, and the source information of the development target application is inputted on the setting screen, In the second screen, And a second component including action information are connected to each other, and when any one of the component items is selected and moved to a page screen in a drag and drop manner, When the first component including the event information and the second component including the action information are connected by an arrow in the second screen, the first component and the second component, And a generator 193 for automatically generating a code corresponding to the connection between the components.

As an example of a detailed component of the application development environment providing apparatus, an input unit 192 for generating an application project through inputting an application project creation screen, inputting application identification information (Application ID), and inputting authentication information, a profile and an application image, And displays the resolution of the terminal on which the selected target platform is driven based on the resolution information and the layout information corresponding to the layout state of at least one component displayed on the second screen, And a communication unit 195 for performing data communication between the conversion unit 194 server for converting the first code into the second code according to the determined layout and the application development environment provision apparatus. The data for data communication includes the first or second components generated.

On the other hand, the application development environment providing apparatus includes a form slicing unit 197 for solving the problem of lowering the application speed and memory speed, which has been a problem in the conventional technology at startup.

In the above, the form slicing unit is designed to allow a web browser component of an application to manage a large number of pages in an HTML-based application by parsing a large amount of HTML and JavaScript, cascading style sheets (CSS) In order to solve the problem of a sudden drop in the loading speed, it is necessary to provide an application development environment providing detailed information such as initial screen, login screen, main screen, However, the other screens are separated into separate HTML files and stored as files.

In general, a screen area is expressed using a tag element such as an HTML "article" or a "div", and a header area and various contents are expressed using child elements on each screen. When the screen is separated, the separated screens are dynamically inserted into the screen in response to a button or other user event at the time of the start of the screen to improve the loading speed.

In addition, by deleting the sliced HTML file by using a point at which the corresponding screen is no longer needed according to a situation in which the screen is continuously changed, unnecessary resources can be arranged and the performance of the memory can be improved.

FIG. 54 shows a typical conventional technology page. FIG. 55 shows a screen in which only a normal screen is defined as a sliced form area. FIG. 56 shows a screen in which elements of a sliced form are separately defined as a "slice.html" Represents a directory screen that is stored as a file separated by separate HTML.

Hereinafter, a method of providing an application development environment according to an embodiment of the present invention will be described with reference to FIGS.

4 is a flowchart illustrating an application development environment providing method according to an embodiment of the present invention.

Referring to FIG. 4, the application development environment providing apparatus 100 first creates an application project (S101).

The application development environment provision apparatus 100 can generate an application project for development of an application. The application project may include various information constituting the application to be developed. The application project may include identification information of the application to be developed, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information. And the like.

To this end, the application development environment provision apparatus 100 may provide an application project creation screen.

FIG. 5 shows an application project creation screen provided by the application development environment provision apparatus 100. FIG.

As shown in FIG. 5, the developer can create an application project through an input to the application project creation screen. The application project creation screen may include an application ID input unit, authentication information and profile input unit, and an application image input unit, as shown in FIG. This minimizes the input information that the developer has to input and minimizes the required image.

In particular, when an application project is created and a development target platform is set, the application development environment providing apparatus 100 can perform automatic resizing and automatic version management of an application page accordingly.

Then, the application development environment providing apparatus 100 displays a first screen showing a connection relationship among a plurality of pages (S103).

The application development environment providing apparatus 100 can display page information of an application being developed by the generated application project through the first screen. The first screen may indicate the connection relationship between the respective pages.

On the other hand, the screen can be divided into frames for a relatively large tablet-specific smart device, such as a smart phone, and basic settings can be configured to configure the application.

58 shows a screen for dividing a frame for a tablet-dedicated device displayed by the application development environment provision apparatus 100. Fig.

It provides a development environment to support inter-frame movement components for tablet-specific smart devices, action components between frames, and data movement components between frames.

6 shows a first screen 110 displayed by the application development environment providing apparatus 100. As shown in FIG.

As shown in FIG. 6, the first screen 110 may represent a connection relationship to a plurality of pages included in an application under development in an application project. Each page may represent each electronic document that may be displayed when an application is running on the terminal 300. [ The electronic document displayed on the terminal 300 by the application operation can be switched according to the connection relationship between the respective pages. Such a conversion or movement can be performed by the event generation of the component described above and the action action accordingly.

For example, as shown in FIG. 6, an application may include a Home page, a Card page, a Find page, a Donut page, an SNS page, and a View page. The first screen 110 may include a plurality of arrow images 111 indicating connection relationships between the respective pages. Each arrow image 111 may represent a movement or a conversion relationship between the respective pages.

In particular, the application developer may modify the inter-page connection relationships as desired by modifying or deleting each arrow image 111 displayed on the first screen 110. [ For example, a developer could link new arrows to link between pages. Also, you can delete existing arrows to break between pages.

If there is a change or deletion of the arrow image, the application development environment providing apparatus 100 can reflect the change or deletion of the image of the arrow in the application code configured in the intermediate language. Therefore, application developers can easily grasp and modify the connection relationship between each page without expert knowledge of code modification.

Meanwhile, the application development environment providing apparatus 100 may display a form tab 112 for setting a connection relationship between pages or adding a page to the first screen 110. The form tabs 112 may include predefined icons, for example, for establishing connection relationships and adding pages.

In addition, when the icons are moved to the first screen 110, the application development environment providing apparatus 100 may set a connection relationship or add a predefined page corresponding to the corresponding icon Can be performed.

4 will be described again.

Then, the application development environment providing apparatus 100 displays a second screen showing a connection relationship between the components on one page (S105). Then, the application development environment providing apparatus 100 connects the first component including the event information and the second component including the action information (S107).

As described above, a page may include a plurality of components. Each component may refer to a unit object that is responsible for each screen or function within a page. In addition, the components may include event information or action information for performing such a screen or function.

The event information may include events generated by a predetermined user input to the terminal 300 or an operation of the terminal 300. For example, events may include onClose, onInit, onScrollMouse, onClick, onError, onSuccess, or onEnd events.

Each of the events may correspond to action information included in another component. The action information may include information on an operation of an application that is performed according to an event generated in the terminal 300. [ For example, the behavior of an application that is performed according to an event can include running, hiding, showing, toggling, paging, clear, goHome, goBack, bind or next commands of a particular component.

As described above, event information or action information included in each component may correspond to each other, and the connection relation therebetween may be displayed on the second screen.

7 shows a second screen 120 according to an embodiment of the present invention.

As shown in FIG. 7, the second screen 120 may represent each component and may represent a connection relationship between event information and action information included in each component.

In particular, each component in the second screen 120 may be displayed in a respective block form. The action information included in each component may be displayed in the form of a text box on one side of the block, and the event information may be displayed in the form of a text box on the other side of the block.

Then, the connection relation between each box can be indicated by an arrow image. Each arrow image can be started from a specific event of a specific component, and can be directed to a specific action of another component. In this case, the arrow image may indicate that the action of the component to be executed next when a specific event occurs.

As described above in the first screen 110, the application developer can change or delete the image of each arrow on the second screen 120, and each component may be added or deleted by a drag-and-drop method. Accordingly, the connection relationship between the event and the action of each component can be changed, and the application development environment providing apparatus 100 can display the component displayed on the second screen 120 and the application Can be generated or deleted.

For example, the button1 component block 121 may include an onClick event box 123, and the onClick event box 123 may include a goBack action box 124 included in the link1 component block 122 by an arrow image Can be connected. In this case, the application development environment providing apparatus 100 may generate a code in an intermediate language so that the goBack action of the link1 component is performed when an onClink event for the button1 component is generated, and insert the code into the application code under development. Therefore, the developer can establish the connection relationship between the components by only manipulating the user interface without understanding the code.

8 is a diagram showing a relationship between a second screen and an actual code according to the embodiment of the present invention.

8, according to an exemplary embodiment of the present invention, an application developer generates a component messagebox1 to be executed next when an onClick event of a Button1 component is generated in the second screen 120, and an action show, You can specify by connecting. In this case, the application development environment providing apparatus 100 can automatically generate a code similar to the box portion of the lower half code in Fig. 8 and insert it into the application code. Therefore, the developer can set the connection between the event and the action of the desired component by manipulating the user interface without writing the connection relation between the event and the action by writing the JAVA code.

9 is a view for explaining an action list of the second screen 120 according to an embodiment of the present invention.

Referring to FIG. 9, the application development environment providing apparatus 100 may display a one-to-one relationship between an event and an action in an arrow image on the second screen 120. However, There are limitations to doing so.

Accordingly, according to an embodiment of the present invention, the second screen 120 may further include an action list component block 125 to solve this problem. The action list component block 125 may refer to an intermediate component inserted between components to perform a plurality of actions corresponding to one event.

For example, the developer may create an action list component block 125 and associate an arrow image so that the execute action of the action list component block 125 is executed in response to one event (onClink) ~ event9) can be generated. Then, the developer can designate the components and actions to be executed by each of the plurality of events (event1 to event9) using the arrow image again. In FIG. 9, the hide action of the panel1 component is performed in response to the event 1, and the show action of the message box 1 is set to be performed in response to the evnet2.

The application development environment providing apparatus 100 may generate a code configured in an intermediate language so that the connection relationship established in the second screen 120 may be executed in the application as shown in the lower part of FIG.

Accordingly, when the application is executed in the terminal 300, when the user clicks Button1 by the connection relationship set in the second screen 120, the operation of hiding panel1 and showing messagebox1 is performed.

FIG. 10 shows a method of displaying a component block and a connection relationship in an application development environment providing apparatus 100 according to another embodiment of the present invention.

Referring to FIG. 10, the application development environment providing apparatus 100 may display a component block screen 140 showing the component blocks included in the page together with the page screen 130.

The page screen 130 may represent a page image implemented by each of the components.

In addition, the component block screen 140 can display a connection relationship between components, events, and actions in a tree structure. Each component can be represented by a depth, and the lower depth of each component can contain actions that the component contains. Accordingly, the developer can easily select a desired component and an action.

The attribute information of the selected component or action may be displayed at the top of the component block screen 140. The attribute information may include identification information of each component or action, data connection information, and event information associated with each action.

The component block screen 140 and the page screen 130 may correspond to the second screen 120 described above. Accordingly, the application development environment providing apparatus 100 can select and display the same application from the second screen 120, the component block screen 140, and the page screen 130. [ To this end, the application development environment providing apparatus 100 may provide a setup menu for the connection relationship display method of the component.

The connection establishment method between events and actions may be a method of selecting an event and an action included in each component, unlike the event processing method through double click and procedure creation in the existing development environment. Accordingly, when the developer presses a specific button, the connection between the event and the action can be completed only by selecting a component object to be executed and an action included in the object.

On the other hand, FIG. 59 shows a screen for setting on a component to which a connection relationship between components is branched when an event and an action occur according to a condition in a second screen configuration by adding a branch (if) component.

The comparison branch of the component can be compared with the value of the constant and the database and can be branched. If the value is a constant value, the user can input the value directly to branch between the components. It can also be configured to take advantage of predefined constants and system environment variables.

11 is a diagram for explaining a method of adding a component of an application development environment providing apparatus 100 according to an embodiment of the present invention.

Referring to FIG. 11, the application development environment providing apparatus 100 may display a predefined component list 150 that can be added to the page screen 151. The component list 150 may include a plurality of component items. Each component item may correspond to each component code having a predefined function or screen.

Then, the developer can select any one of these component items and move them to the page screen 151 in a drag-and-drop manner. Correspondingly, the application development environment providing apparatus 100 can facilitate adding a component by inserting a code corresponding to the moved component item into the application code. This allows developers to add components to a page with a simple drag and drop without having to write code for the component during application development.

In addition, the predefined components may be received and updated from the server 200. The application development environment providing apparatus 100 can communicate with the server 200 to receive new components and update the component list. The developer can add new components to the application page by dragging and dropping from the updated component list.

FIG. 12 shows a data binding method of an apparatus 100 for providing an application development environment according to an embodiment of the present invention.

As shown in Fig. 12, a component may include a data component (dbtable1, data_store). A data component can be connected to a DB on the Web via SQL or RESTful / SOAP, and can represent an object that can receive and display data from a connected DB. The application development environment providing apparatus 100 can provide a binding for DB connection to the data component so that the developer can perform data binding between the application and the DB without knowledge of SQL or RESTful / SOAP .

FIG. 13 shows a relational database management system (RDBMS) setting method of an application development environment provision apparatus 100 according to an embodiment of the present invention.

As shown in FIG. 12, an application may be connected to an RDBMS. Accordingly, the application development environment provision apparatus 100 can display a setting screen for the RDBMS. To this end, the application development environment provision apparatus 100 includes database type information, host information, catalog information, user ID information, password information, test button, proxy URL information, proxy connection test button, and SecretKeySpec Information setting interface.

14 shows an open API type data setting method of the application development environment provision apparatus 100 according to an embodiment of the present invention.

As shown in Fig. 14, the component can be associated with open API type data. For example, the Twitter1 component shown in FIG. 14 can be connected to an open API of a Twitter, which is a kind of SNS. For this setting, the application development environment providing apparatus 100 may further display an interface for setting a Twitter ID.

FIG. 15 shows a detailed restful / SOAP setting method of the application development environment provision apparatus 100 according to an embodiment of the present invention.

As shown in FIG. 15, the application development environment providing apparatus 100 can provide a Restful / SOAP setting screen for a professional Restful / SOAP setting. In the case of a user having a specialized knowledge through such an application development environment providing apparatus 100, it is possible to perform detailed class module setting and connection setting with the server.

60 is a main screen of the data binding editor of the application development environment providing apparatus 100 according to an embodiment of the present invention.

The data binding editor of the application development environment providing apparatus 100 is a conventional development method in which a developer directly accesses data such as a file, XML, or database in order to bind data, writes code that can process data, The data accessing or processing of the database is performed through the process of writing the representation code, and the data binding such as the database access can be performed by a simple user action.

In addition, a drag-and-connect method for graphically displaying the relationship between various components provided by an application development environment providing device and a data store component and dragging and dropping an icon to express the data in a component easily and maintainably .

The data binding editor screen of FIG. 61 shows that the dbtable1 component is a data store component

And provides table / view information setting using existing database management system (DBMS) information. The database field information represents the field information that can be bound to the database in the data binding editor.

Each field is divided by color and provides input and output fields of data. It provides components such as "Label" and "ThumbListView", and receives the data and displays it on the screen. Can be defined.

These input / output fields are connected to each other to provide a way to easily develop data without developer's special code implementation.

FIG. 62 shows a result screen through the data binding of FIG.

FIG. 63 shows a form stored as an XML file for a result screen through the data binding of FIG.

On the other hand, in the case of an application between the client server and the conventional technology, there are many problems with the input / output specification with the server developer, and a lot of effort and time are spent in verifying the data consistency.

The application development environment providing apparatus 100 includes a data binding editor to provide a method for performing server data simulation for verification.

Figure 64 shows an embodiment of a server data simulator. The server data simulator retrieves the list of currently available server components and reads the specification information of the corresponding component, so that the server simulator obtains database information about the input and output. The simulator requests data on the server side based on the input information obtained, displays it on the screen through the output information, and outputs error information when an error occurs in the simulation.

65 shows a screen for outputting error information upon occurrence of error information in the server data simulator.

In one aspect, the application development environment providing apparatus 100 of the present invention confirms a connection relationship among components, sets a connection relationship between a plurality of components that are set to be incompatible with an application structure, sets a first screen and a second screen, A method of verifying and notifying an error of a wrong user is provided.

In other words, the inheritance structure of the component. In the inheritance structure like the above, the application programs set to be incompatible with the inheritance structure between the components are automatically checked and verified by the application development environment providing device, and a method of notifying or automatically correcting the processing is provided.

When the user brings in a component which is structurally incompatible with the inheritance structure on the first screen or the second screen by using an event and action or the like, the application development environment checks the room for the error and informs the user Or automatic correction processing.

For example, in the case of the "Collection" component of the list type, the component inherits the "Visual" component. However, unlike the "Container" component, it is set as the top component of the list component having only the "CollectionItem" Collection "component checks the condition that each exclusive CollectionItem should have a component, and if it violates it, checks the room of error and provides a development environment to notify the user.

FIG. 66 shows a screen when CollectionItem is normally added.

FIG. 67 shows a screen in which a warning message is displayed when an attempt is made to insert a wrong CollectionItem or when a CollectionItem is to be inserted into a component that is not a Collection component.

Hereinafter, a method of providing an application development environment according to another embodiment of the present invention will be described with reference to FIGS.

16 shows a method of providing an application development environment according to another embodiment of the present invention.

Referring to FIG. 16, an application development environment providing apparatus 100 according to another embodiment of the present invention displays at least one component defined as an intermediate language on a screen (S201), and displays an event or an action And generates a first code composed of the intermediate language (S203).

The application development environment providing apparatus 100 according to the embodiment of the present invention can display at least one component defined as an intermediate language on the screen. The intermediate language may include an XML-based language for applying the application to the target terminal. Further, the intermediate language can be generated based on the inter-component connection relationship screen as described above. As described above, the development environment providing apparatus 100 according to the embodiment of the present invention can prevent the redundant development for applying the same application to another platform by utilizing an intermediate language.

17 is a diagram illustrating a comparison between an intermediate language and general JAVA codes according to an embodiment of the present invention.

As shown in FIG. 17, it can be seen that the code of the intermediate language can be written short and concise, unlike the general JAVA code, as the number of codes increases and becomes more complicated. In addition, such intermediate language code can be automatically created by the connection-based application development environment between the components provided in the application development environment providing apparatus 100, thereby reducing the developer's labor. In addition, significant benefits can be obtained in service scenario changes and maintenance during development.

Figure 18 shows the XML format of a component defined as an intermediate language.

As shown in FIG. 18, the component may be implemented with XML code defined as an intermediate language. In particular, intermediate languages must be platform neutral and require code generation optimized for each platform at the end.

Accordingly, according to the embodiment of the present invention, as shown in FIG. 18, XML elements can be defined in the intermediate language, and the application development environment providing apparatus 100 can optimize The generated code can be generated.

FIGS. 19 to 24 are diagrams for explaining a component type of an XML code according to an embodiment of the present invention and a configuration of a first screen or a second screen according to the XML code type.

FIG. 19 shows an XML code of a basic type component provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. As shown in FIG. 19, a basic type of component may represent a blank margin.

20 shows a header component and a footer component provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. As shown in FIG. 20, the header component and the footer component may correspond to a top bar displayed at the top of the page or a bottom bar displayed at the bottom, respectively.

Meanwhile, FIG. 21 shows a label, a text box, and a button component provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. As shown in FIG. 21, each label, text box, and button components may correspond to a specific location of an application page and an XML code, respectively.

22 shows container-type components provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. 22, when a component includes another component, the component may be a container-like component. For example, a Panel1 component can include a textbox1 component and a button1 component, so that the Panel1 component can be a container-like component.

Meanwhile, FIG. 23 shows the list-type components provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. Referring to FIG. 23, for example, a list type component may indicate listing a plurality of component items. As shown in FIG. 23, the application development environment provision apparatus 100 may generate XML code corresponding to the list type component for list listing.

24 shows non-visual components provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. Referring to FIG. 24, for example, in the case of a component that is present but not displayed on a page, the component may be a nonvisual component.

On the other hand, the component may have the structure as shown in FIG.

Referring to Figure 25, for example, a component may include a visual component, a container component, a collection component, and a nonvisual component.

A visual component may refer to a general user interface component (button, label, text box, etc.), and a container component may refer to a user interface component (form, header, footer, panel) that contains a visual component. A collection component may refer to a user interface component (list view, cover flow, navigation bar) representing a list, and a nonvisual component may include a component (timer, Link, message box, db table).

Each of these components can be configured as an intermediate language corresponding to the XML format. The first code configured as the intermediate language is converted into a second code corresponding to the target platform according to the event or action specified in the component (S205).

Thus, a component configured in an intermediate language can have the form of XML. For example, each component can represent a node unit of XML. And each component can be declared via the qname and id attributes. The prefix of qname can be a namespace, and name can have a component name. The id attribute may have a unique value in one page, and may start with an alphabetic character, but may have a combination of alphabetic characters and digits.

On the other hand, the top node of the intermediate language can represent a page. Thus, the prefix of qname can be declared in the xmlns: attribute of the page element.

In addition, a page constituting one screen may exist in one file unit, and an id element of each page may have a unique value in all pages.

Actions and events of such components may be included as child elements of each declared component element. For example, a container component can include a visual component as a child element. In addition, the collection component can include an item component that can be included in the collection component in the form of an item element. And, all components may include at least one of an event and an action.

26 shows a screen in which an application converted by the application development environment providing apparatus 100 into a second language that can be driven by the target terminal 300 and output by the target terminal 300 is executed.

The application development environment providing apparatus 100 according to the embodiment of the present invention can convert the code written in the intermediate language into a second language suitable for the target device. For example, the application development environment providing apparatus 100 according to the embodiment of the present invention can directly convert from an intermediate language to a second code using an iOS series, an Android series, a Tezen OS, or the like. Therefore, the development efficiency can be maximized.

In addition, the application development environment providing apparatus 100 according to the embodiment of the present invention can provide a simulation screen according to the target platform along with the application development environment. Thus, the developer can determine in advance whether or not the selected device is driven.

27 and 28 illustrate a method of arranging the components of the second screen provided in the application development environment providing apparatus 100 according to another embodiment of the present invention.

The application development environment providing apparatus 100 according to another embodiment of the present invention displays an instance name of the component object, an object name, and an object name of the component object in the upper area of the component object, Icons can be placed. Thus, the classification of the components can be facilitated. This is shown in Fig.

Here, a box-shaped action can be disposed on one side of the component object, and box-shaped events can be disposed on the other side. Also, the connection relationship between each event and the action can be displayed in the direction of the arrow image. This allows the developer to understand the flow of natural applications running from one side to the other.

Meanwhile, the application development environment providing apparatus 100 according to another embodiment of the present invention needs to sort and display each component in order to effectively display the display of components and the connection relation between each event and action.

As shown in FIG. 28, the application development environment providing apparatus 100 arranges the top-level form pages in the top-left first order, arranges the buttons and menu items in the second order, Links (arrow images) corresponding to menu items are arranged in three positions, and items that are not frequently used for events such as a header and a footer can be arranged in the lowest order.

With this arrangement, it is possible to facilitate the arrangement flow of each component from left to right as shown in FIG. 28, and it is possible to reduce the labor of the developer to rearrange the components one by one.

29 shows a layout method of an application development environment providing apparatus 100 according to another embodiment of the present invention.

Conventional hybrid application development tools do not support various resolutions. In particular, existing WYSWYG supported application development tools are designed to deploy UI components using only X and Y coordinates in order to apply layout coordinates through drag-and-drop of developer. However, there has been a problem in that a separate screen corresponding to the resolution of the terminal needs to be developed when the resolution of the terminal changes slightly or changes to the landscape mode.

29, the apparatus 100 for providing an application development environment according to an embodiment of the present invention can use a block layout method in which any terminal can be expressed at any resolution by using block units.

In the case of arranging the screen using each UI component, the block layout method may refer to a method of arranging up, down, left, and right based on the container component, instead of using coordinate information of X and Y. In this case, even if the resolution is changed, each component always maintains the up, down, left, and right positions so that the same layout can be expressed for each target terminal.

In the case where the continuous components are arranged, for example, in the case of arranging the buttons 1, 2, and 3, even if only the size of each button is defined, the screen may be rotated or the same layout may be displayed on devices having different resolutions have.

Figures 29-31 illustrate embodiments of such a block layout.

For example, as shown in FIG. 29, a header may be arranged at the top of each component, a panel 1 at the middle end, and a footer at the bottom. Forms, headers, footers, and panels can act as container components, and each container can be placed up and down.

30 is a diagram for explaining a method of generating an application without providing X, Y coordinate information for a text box component and a button component, according to an application development environment providing apparatus 100 according to an embodiment of the present invention.

Referring to FIG. 30, an apparatus 100 for providing an application development environment according to an exemplary embodiment of the present invention may set the width and height of a text box component and a button component without X, Y coordinate information. In this case, when displayed on the actual screen, the text box is arranged first and the button is placed on the right side, so that applications produced by the application development environment can be converted into resolution suitable for each terminal without changing the X and Y coordinates.

31 shows a method of arranging components of an application development environment providing apparatus 100 according to an embodiment of the present invention.

As shown in FIG. 31, the application development environment providing apparatus 100 according to the embodiment of the present invention may place a navigation component in a lower footer area on a page. In this case, the application development environment providing apparatus 100 may change the size of the child components according to the resolution of the target terminal 300, for a container-type navigation component. Then, the resized Child components may be displayed to fill the screen.

33 is a block diagram illustrating a platform of a terminal 300 capable of executing an application and FIG. 34 is a block diagram illustrating a platform of an application development environment providing apparatus 100 according to an embodiment of the present invention. Fig.

The application development environment providing apparatus 100 according to the embodiment of the present invention can support various deploment schemes according to the developer's preference and purpose, and various system frameworks can be loaded therefor. According to the embodiment of the present invention, in the case of iOS, three types of support for xarchive, ipa, and Xcode project and automation can be supported up to certificate signing. Android can support two types of apk and ADT project, automation of certificate generation and signing, support for WAR packaging through server, and server upload via ftp.

Meanwhile, the application development environment providing apparatus 100 according to the embodiment of the present invention is designed to be developed in the same manner as the Webkit engine and OSX, Linux, and Windows in order to implement a true source of Once Source and Multi Platform . On the other hand, the application development environment providing apparatus 100 can differentiate from eclipse and provide the application development environment so that the developer does not need separate setting and separate developer installation items such as WAS. In addition, there is no need for any separate installation and configuration with the built-in JVM and Webkit.

35 shows a component structural view according to an embodiment of the present invention.

Referring to FIG. 35, a component may include a virtual component, and may include a visual component and a nonvisual component at a lower level. The visual component may include at least one of a label, a button, a text box, a text view, a combo box, a text area, an image view, a chart, a Google map, a media or an embedded component, Component.

The container component may include at least one of an application, a form, a header, a footer, a panel, a layout panel, a vertical panel, an Accordion, a frame splitter, A thumbnail list view, a navigation bar list view, a list view, a multi-list view, and a calendar list view component.

Non-visual components may include at least one of loading bar, timer, date time, DBinsert / Update / Delete, link, web link, message box, action list, variable, login and doc viewer component, And may include a data store component. The data store component may include at least one of a DB table, a web app module, an Rss, an Assets, a file list, a form data store, an app data store, a GPS, a compass and a battery component.

Hereinafter, a process of creating an application using screens provided according to an application development environment providing method according to an embodiment of the present invention will be described with reference to FIGS. 36 to 53. FIG.

36 shows a project creation screen for providing an application development environment according to an embodiment of the present invention. In Fig. 36, the developer can select a project to be produced by clicking New in the File menu.

Thereafter, when a developer wants to select a new project as shown in FIG. 37, a screen for providing a plurality of templates may be displayed. In particular, functions and tablets can be provided in addition to templates, and if the developer chooses Default, they can provide an interface that allows them to initiate the desired project without any template. When a developer selects a specific template among a plurality of templates, a new project can be created based on a template in which a basic configuration is set in advance.

38 shows a license validation screen for project creation. The server 200 or the application development environment providing apparatus 100 can confirm whether there is a license for creating a project based on a user, a password, and a host URL input. Then, the application development environment provision apparatus 100 may restrict the migration to the next step only when it is confirmed that the purchase is authenticated or used as the ASP service.

39 shows a project information setting screen. The project information setting screen can set the project name, application name, ID, and project version for application development.

40 shows an application development environment including a first screen according to an embodiment of the present invention. In particular, the first screen may correspond to the sitemap editor window of Fig. In FIG. 40, it is shown that a basic home page generated in advance by the RSS template selected in advance is generated and activated.

41 shows that a new page is added to the first screen. As described above, the application development environment providing apparatus 100 according to the embodiment of the present invention can add pages using drag and drop. For example, as shown in FIG. 41, a Form page can be added by dragging and dropping a Form page icon included in the right palette of the sitemap editor window to the first screen.

42 shows the change of the ID of the page to the RSSpage by changing the attribute value of the Form page. The developer can change the attribute value of each page through the input interface displayed in the property window.

43 shows a connection between the home page and the RSS page. As shown in FIG. 43, the developer can click the link, click the Home page icon, which is the connection start page, and then click the RSSpage page icon, which is the connection target page, to perform the inter-page connection. When the connection is performed, the connection relationship between the respective pages may be displayed on the first screen by the arrow image described above.

44 shows a screen for adding a component to a Home page. For example, the application development environment providing apparatus 100 may display a component addition screen according to a select click on the editor of FIG. 43 and a double-click of the home page accordingly. As shown in FIG. 44, the types of components that can be added may include at least one of Basic, Time, ListView, Layout, Database, DataStore, Forms, Extension, Platform, Tablet, Charts, Rules and Unofficials.

On the other hand, FIG. 45 shows that the RSS_CNN button component is created in the Home page. For example, a Button component of a Basic type component can be added to the Home page by dragging and dropping, and an ID value in the property window is changed to an RSS_CNN value, whereby an RSS_CNN button component as shown in FIG. 45 can be generated. You can also change the RSS_CNN button component to an appropriate size by performing a size value change on the Style tab of the attribute.

46 shows a second screen showing the connection relationship among the components included in the Home page, and shows that the RSS_CNN button component is linked to the link_RSSpage component. Switching to the second screen can be done by selecting the Workflow tab at the bottom. You can also link the onClick event of the RSS_CNN button with the move action of the link_RSSpage by dragging and dropping the icons in the right flow window. Accordingly, the connection relationship between components can be displayed as an arrow image, and when the RSS_CNN button on the Home page is clicked through the link connection, it can be set to be moved to the RSSpage page.

47 shows a component addition screen of the RSS page. As shown in FIG. 47, when the ThumbListView is dragged and dropped onto the RSS page to move to the RSS page, a preset thumbnail list view component can be displayed on the page page of the RSS page.

48 shows a connection relationship between components of the RSSPage page.

As shown in FIG. 48, an onInit event that occurs when the RSS page is initialized can be connected to a Bind action that fetches the RSS data. This can be done immediately by clicking on the flow as described above and linking the onInit event of the RSS page form component with the bind of the rss1 component.

49 shows a screen for data binding to the RSS component of the RSS page.

As shown in FIG. 49, the application development environment providing apparatus 100 may display a screen showing RSS data values on a page. Also, the application development environment providing apparatus 100 can determine which position of the ThumbListView component the RSS data values correspond to, and assign the values automatically formed in the rss1 to the corresponding list value of the ThumbListView.

50 shows an export screen for converting the completed application into various platforms. As described above, the completed application can be configured as an intermediate language and can be converted into a second language according to the target OS. Thus, the export screen can provide a selection screen that allows selection of such second language. For example, the export selection may be an Android project, an Xcode project, a Windows phone, or a title.

68 is a diagram illustrating a method of converting a WebKit CSS (Cascade Style Sheet) to HTML2 format according to an existing target OS and transforming it to fit each browser Screen. Recently, new platforms such as Android, iOS as well as Windows8 IE, Tizen, Ubuntu, Mozilla, and Opera have been intensely introduced. As a result, the problem of CSS compatibility of the HTML application written before is solved and different web browser platforms are not compatible with each other (Webkit) CSS in order to solve the problem that CSS is used to suit each developer's web platform. So, if you enter only the existing Webkit CSS, to provide.

51 shows a package creation screen when the Android project is selected. In this case, the application development environment provision apparatus 100 can display a selection menu that can generate the Android market application apk itself or create a project itself for Android development. If you create the project itself, you can also modify the application in other tools for Android app development.

FIG. 52 shows a simulator operation screen for confirming whether the application actually operates, and FIG. 53 shows a screen of a smart device which is converted and outputted by the final application and transmitted to the smart device and operated.

As shown in FIG. 53, in the smart device, when the RSS_CNN button created above is clicked on the home page, it is moved to the Form1 page (RSSpage), and the RSS data is received from the DB on the data- The application that can be displayed in the view component will work.

As described above, in the application development environment providing apparatus 100 according to the embodiment of the present invention, easy application development for various platforms can be performed by simply clicking and dragging and dropping without expert knowledge on various code languages .

The method for providing an application development environment according to the present invention may be stored in a computer-readable recording medium. The computer-readable recording medium may be a ROM, a RAM, a CD- ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like, and may also be implemented in the form of a carrier wave (for example, transmission over the Internet).

The computer readable recording medium may be distributed over a networked computer system so that computer readable code can be stored and executed in a distributed manner. And, functional programs, codes and code segments for implementing the above method can be easily inferred by programmers of the technical field to which the present invention belongs.

While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed exemplary embodiments, but, on the contrary, It will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the present invention as defined by the following claims.

Claims (12)

An application project setting screen for inputting at least one of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application, An inter-page connection area indicating a connection relationship between a plurality of page images and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, and a page on the inter-page connection area And displaying a first screen including a form tab area for establishing a connection relationship among pages, and displaying a first screen including a form tab area for establishing a connection relationship between the plurality of pages, The second screen showing the connection relationship A display unit displaying a third screen graphically representing an association relationship between the database and the data binding by linking icons corresponding to the at least one database in a drag and connect manner;
When one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application are inputted on the application project setting screen, And controls the first component including the event information and the second component including the action information to be connected to each other in the second screen, and controls the first component and the second component to be structured And a control unit for verifying the connection error and displaying the error information on the screen when an error is found. The method according to claim 1,
Wherein the control unit controls the display unit to display a connection relationship between the event information and the action information. The method according to claim 1,
Wherein the event information includes a plurality of event items, and at least one of the plurality of event items is connected to the second component. The method according to claim 1,
Wherein the action information includes a plurality of action items,
Wherein at least one of the plurality of event items is connected to any one of the plurality of action items. The method according to claim 1,
Wherein the first screen displays the connection relationship between the plurality of pages as an image object having a directionality. 6. The method of claim 5,
Wherein the connection relationship between the plurality of pages is changed as the image object is modified or deleted. The display device according to claim 1,
Further displaying detailed information of a specific page among the plurality of pages,
Wherein the detailed information includes identification information about the components included in the specific page and attribute information about the selected component in the specific page. 8. The method of claim 7,
Wherein the attribute information includes at least one of basic information, data connection information, style information, and event information for the selected component. The method according to claim 1,
Wherein the second screen displays the connection relationship between the plurality of components as a directional image object and changes the connection relationship between the plurality of components as the image object is transformed or deleted, . The display device according to claim 1,
And displays a structure screen representing a relationship between the second component and the action information. The display device according to claim 11,
An application development environment providing device that outputs frames for tablets only when developing a dedicated application for a tablet. The apparatus of claim 1,
An application development environment providing device for executing data consistency verification for confirming a server side input / output specification when the application is a client / server application.

Images