Comment on page
Create the HelloWorld application
This section will take you from scratch to manually develop a simple application "HelloWorld".
In addition to creating a new blank application method from scratch, AppCube also supports the use of application templates to quickly create applications. For detailed operation steps and template usage instructions, please refer to What is an application template .
The function of this application is simple: mainly to develop a simple page, enter a new entry in the input box on the page. Click the "Add" button to save the added term in the object model and display it in a table, as shown in Figure 1.
By experiencing how to create the first application, you will learn: steps to create an application in AppCube and related operation precautions.
Figure 1 HelloWorld application effect
- 1.You have registered a HUAWEI CLOUD account and completed real-name authentication.
- 2.The AppCube service has been activated.
For details on how to register and apply for a trial AppCube, please refer to " Registering Tenants ".
Before using AppCube , you need to understand the general development process of creating an application in AppCube:
- 1.In the development environment, create the app .For related operations, see Creating an Application .
- 2.In the development environment, develop the application .Including the development model, the development logic layer and the development of the front-end UI layer. After development, you can also set up the app.For related operations, see the relevant chapters ( Development Model , Service Orchestration , Standard Pages , and Application Settings ) in the User Guide .
- 3.In the development environment, compile and publish the application .For related operations, see Publishing an Application .
- 4.In a sandbox or runtime environment, deploy and run the application .Test the application in the sandbox environment and deploy and run the application in the running environment. For related operations, see Installing an Application .
This example will take you to create the first application on AppCube according to the above development process. The specific operations are as follows.
- 1.Log in to HUAWEI CLOUD using your HUAWEI CLOUD ID, and click Console on the right side of the top navigation bar to enter the HUAWEI CLOUD console.
- 2.Above the left navigation bar, clickand select the region item where the service instance is located.
- 3.Clickand search "Apply Rubik's Cube" in the Find box. Click the found result to enter the AppCube service console.
- 4.In the AppCube service console, click Legacy Portal.
- 5.On the "Project" tab on the home page of the AppCube development environment, click the "Light Application" card.
Figure 2 Creating a light application
6. On the Light App page, click Create Blank Light App.
Figure 3 Create a blank light application
7. (Optional) Define the namespace. If you are not prompted to create a namespace, just skip this step.
When you create an application for the first time, you need to define a private namespace to distinguish your applications and application elements from other tenants. The namespace is unique, cannot be repeated, and cannot be modified. The system will add a namespace prefix to the names of objects, scripts, service orchestrations, and pages that you create subsequently.
For example, the namespace defined in this application is "CNAME", and all subsequent objects, scripts, pages, etc. will start with "CNAME__", please set it according to the actual situation.
Once the namespace is set and cannot be modified, please define it carefully; it is recommended that you use the abbreviation of the company or team as the namespace.
8. In the pop-up window, enter the app "Label" as "My First App" and "Name" as "HelloWorld", then click "Create".
After the app is created, it will automatically enter the app.
- If you set the namespace in the previous step , you need to select the "Application" tab first, and then enter the application "Label" and "Name" in the pop-up window.
- On the application development page, if it prompts "Your tenant has not configured the default mail server address, the function of sending mail in service orchestration/BPM/script will be unavailable", please ignore it. This example does not involve it.
Figure 4 Create an application
Table 1 Basic application information
parameter name | Parameter Description | Values that need to be filled in this example |
|---|---|---|
Label | The text used for display in the application can be modified after creation in order to distinguish the description information of different applications. The application name displayed under the label "My Application". After the application is created, the application label can be modified in the application settings. | My first app. |
name | The unique identifier of the application in the system, the system will automatically add the namespace __ before the name, and does not support modification after creation. Setting requirements: must start with a letter, without continuous underscores, spaces and special characters. | HelloWorld
illustrate: After the app is created, the app name is automatically prefixed with the namespace CNAME__ HelloWorld. |
add icon | An icon can be set for this light app. | No setup is required. |
Classification | The category the app belongs to. After the classification is set, both the project list and the library list can be filtered according to the classification of the application or BO. | No setup is required. |
describe | Description of the light application. | No setup is required. |
runtime version | This parameter is only displayed when "Advanced Settings" is expanded. The developed asset package depends on the selected runtime version. If the offline running version is inconsistent, incompatibility may occur. | Keep the default. |
After the light application is created, it will automatically jump to the application development interface. As shown in Figure 5, there are 4 default directories in the light application. The default directory is the application file directory structure recommended by AppCube. The subsequent development of pages, objects, and background logic is recommended to be created according to the following correspondences to facilitate application directory management.
- Model: data object
- Logic: service orchestration, scripting, etc.
- Page: front-end page
- Internal dependencies: Internal dependencies, such as BO, native services
You can also click the "+" on the right side of the created application according to your own development habits, add a new application directory, and customize the placement of application resources.
Figure 5 Light application default directory
- On the application development interface, click Home at the top of the page to return to the home page of the development environment.
- If you want to enter the application again, please click the application name under "Home > Project > My Application", such as "My First Application", to enter the application development interface.
[Thinking] What is an object?
Objects are one of the core functions of AppCube. Objects are equivalent to a table in a traditional database and are used to persist business data. There are built-in standard objects in AppCube, as well as custom objects created by tenant developers.
A custom object created by a tenant developer, after it is created, there will be various modes of operation: the front-end page can use the page model to bind this object, and use the table component to directly display the object data; the more commonly used in AppCube It is to use scripts, custom JS code, service orchestration, etc. to add, delete, modify, and check the information in the object.
According to the function designed by the HelloWorld application, first you need to create an object helloObject that stores the entry, which is used to save the entry name, entry description, and creation date information. The fields used in the object helloObject are shown in Table 2 .
Table 2 Custom object helloObject field details
field label | Field Name | type of data | Is it unique | Is it required | Recommended length |
|---|---|---|---|---|---|
entry name | name (preset standard field)
illustrate: For details about which standard fields are preset in custom objects, please check the standard fields preset by the system in Understanding Custom Objects . | Name | Yes | Yes | - |
creation time | createdDate (preset standard fields, do not need to be modified ) | date/time | - | Yes | - |
entry description | detail | text | No | Yes | 255 |
The detailed steps for creating objects and fields are as follows.
- 1.In the "HelloWorld" application, in the directory where you plan to store the object, create the object:a. Place the cursor on the "Model" directory, click, and select "Object".
illustrate:
In this example, the default "Model" directory is used to store objects, so you need to create objects in the "Model" directory. After the object is added, the system will place the object in the "Model" directory by default. You can also choose another directory to create it according to your personal preference.
Figure 6 Creating Objects
2. The "label" of the input object is "helloObject". After clicking the input box of "Name", the system will automatically generate the name "helloObject", and then click "Add".
Figure 7 Add objects
After the object is created, it will automatically enter the object details page.
illustrate:
[Tips] If you enter the value of "label", the first character is an English letter, click the input box of "name", the system will automatically generate the "name" corresponding to the "label", you can also modify this automatic generation as needed The name".
Table 3 Information about creating objects
parameter name | Parameter Description | Values that need to be filled in this example |
|---|---|---|
create new object | How to add objects. | Keep the default and check "Create New Object". |
Label | The name of the object display , in order to distinguish the description information of different objects. After the object is created, the "Label" can be modified in the " Basic Information " of the object. | helloObject |
name | The unique identifier of the object within the system.
| helloObject
illustrate: After the object is created, the system automatically adds suffixes and suffixes to the object name, and the actually created object name is: CNAME__helloObject__CST. |
3. View and modify the standard fields of an object.
a. See Standard Fields for standard fields that are preset in custom objects.
After the custom object is created, the system will automatically create some standard fields for you to use. You can click the Standard Fields tab on the Custom Object details page to view the standard fields of the custom object. The standard fields are shown in Figure 8, in which the "name" and "createdDate" fields will be used in subsequent development.
Figure 8 Standard fields
b. Modify the standard field "name".
Click on the right side of the "name" field , as shown in Figure
8 , to enter the field editing page. On the edit page of the "name" field, change the "Label" to "Entry name", and check " Unique " and " Required ", and then click "Save", as shown in Figure 9.
Figure 9 Modify the "name" field
illustrate:
[Thinking] Why should the "name" field be modified? Can other standard fields be modified? Because the default attribute of "name" does not fully meet the requirements of the HelloWorld application for "entry name", such as "label", "unique or not" these field attributes, so it needs to be customized and modified. After modification, "name" is used as storage" entry name" field.
Among the standard fields, only the "name" field currently supports modification, and the "createdDate" field is used directly and cannot be modified.
4. Create a custom field "entry description" as a field in the application to store entry description information.
a. On the Custom Fields tab, click New to enter the Create Field page, set the field type to Text, and click Next.
Figure 10 New custom field
illustrate:
Custom fields can be created manually or imported in batches. For details, see How to Create Custom Fields in Batches Using Object Field Templates .
b. Enter the details of the new field: set the field "label" to "entry description", "name" to "detail", field length "255", and check "required", "case sensitive", "can Search", and then click Next.
Figure 11 Define "Device Encoding" details
illustrate:
The field "name" is "detail". The system will automatically add the suffix "CNAME__detail__CST" to the actual created field. The "CNAME__" prefix is determined by the tenant namespace, and the "__CST" suffix represents a custom field.
c. Set field-level access permissions: Check the "Read" and "Edit" check boxes to configure permissions to edit and read this field for all preset profiles, and click "Next".
illustrate:
In AppCube, some permission sets are preset, and field-level security control in custom objects is provided. These permission configurations are preset by administrators. For more detailed introduction of permission sets and settings, please refer to Understanding Permission Configuration .
d. Add fields to the object's page layout: Check "Add this field to this page layout" and click "Save".
In AppCube, if a custom field is set to be added to the page layout when it is created, operations such as adding, deleting, modifying, and querying the field can be performed in the page table of the object's page layout.
illustrate:
[Tips] To customize the page layout of an object, you can directly manipulate the object, add, delete, modify, search and other operations. It is more convenient to use it directly as a front-end page. For more details on the page layout of an object, see Editing the page layout of an object .
illustrate:
[Thinking] What is service orchestration?
The service orchestration function is one of the core functions of AppCube, that is, on the visualized and templated service orchestration page, by dragging and dropping primitives, configuring primitives, and then dragging related parameters, a specific business logic can be implemented. development method.
Service choreography is similar to a program with process, condition processing, and judgment logic in programming; this program has input parameters and output parameters, and can independently become a method for external calls; at the same time, within service choreography, other methods can also be called. .
In this example, the purpose of creating the service orchestration is to operate a custom object that stores the entry, so as to write the input parameter information obtained in the service orchestration into the entry with the fields of "entry name" and "entry description" respectively. object helloObject . If you haven't created one yet, please refer to the chapter on creating a custom object for storing entries to create one.
- 1.Create a service orchestration in the directory "Logic" where the service orchestration is planned to be stored.With the cursor on the "Logic" directory, click the "+" on the right. In the pop-up menu, select Service Orchestration.
Figure 12 Creating a Service Orchestration
2. In the dialog box, enter the "Name" of the service orchestration as "helloFlow", click the "Label" input box, the system will automatically generate the name "helloFlow", and then click "Add".
Figure 13 Adding Service Orchestration
Table 4 Basic information of service orchestration
parameter name | Parameter Description | Values that need to be filled in this example |
|---|---|---|
Create a new service choreography | Create a new service orchestration process. | Keep the default and check "Create a new service orchestration". |
Use existing service orchestration | Created based on an existing service orchestration. It is convenient for users to quickly inherit the configuration of existing service orchestration and improve efficiency. | Not set. |
Label | The name used by Service Orchestration for presentation, which can be modified after creation. | helloFlow |
name | The unique identifier of the service orchestration in the system, which cannot be modified after creation. The system automatically prepends the name with the namespace __ . When other functions call the service choreography, the "name" of the service choreography is called, not the label. | helloFlow
illustrate: The actual created service rank is: CNAME __ helloFlow
|
type | Type of service orchestration.
| Keep the default type: Autolaunched Flow |
3. Define a variable as the input value for the subsequent acquisition of the front-end page, and it is also the field of the operation entry object helloObject
Click 
to expand "Global Context", and then click "+" next to "Variable" to change "variable0" to "name"; click "+" again to create a variable "detail". The "name" and "detail" created here correspond to the "entry name" and "entry description" fields in the entry object helloObject , respectively.
illustrate:
"Global context" is the area of the variable list used in the definition of service orchestration. In service orchestration, parameters such as variables, variable sets, constants, and structures can be defined. For specific variable creation methods and variable descriptions, please refer to Configuring Service Orchestration Variables and Input and Output Parameters .
Figure 14 New variables
4. Add and configure the Record Creation element in Service Composer.
illustrate:
The "record creation" primitive is to associate an existing object ( entry object helloObject ) in the current application (HelloWorld), and then set the corresponding operation field (name, CNAME__detail__CST) to realize the function of adding records to this object. AppCube presets a variety of logical primitives. For detailed primitive classification and function introduction, please refer to primitive introduction .
a. In the element list on the left, click "Basic", drag the "Record Creation" element to the canvas, and change the "Label" and "Name" to "Create Record".
Figure 15 Drag and drop to create records
b. Click 
to configure the Record Creation element.
First click the "Object" drop-down box and select the entry object "CNAME__helloObject__CST". After the object is set, the fields that can be assigned under the object (name, CNAME__detail__CST) are automatically displayed under "Assignment"; then click "Global Context", and then drag the variables "name" and "detail" from the global context to the corresponding fields. Source input box. After the association, after the variable gets the value from the front end, it will be passed to the field in the object.
Figure 16 Drag and drop the object field that needs to be modified
5. Define input parameters , and save the service orchestration.
The input parameters and output parameters here refer to the input parameters and output parameters of the entire service arrangement. The specific parameters need to be dragged from the "Global Context" list.
a. On the canvas, place the mouse on the starting point element 
, drag the mouse from "+", and add a connection line between the starting point element and the "Create Record" element.
b. Click on the blank space of the canvas and click on the right side 
to set the input parameters of the service orchestration.
Figure 17 Input parameters "name" and "detail" of drag and drop service orchestration
c. 
Click the save icon at the top of the service orchestration interface to save the service orchestration.
The system will pop up a window showing the compilation result.
6. Test whether service orchestration can be performed normally.
a. 
Click the execute icon above the Service Composer editor .
b. Enter the test data in the "Flow Run" interface and click "Run".
{
"name": "helloWorld",
"detail": "helloWorld is my first app"
}
If the execution is successful, all the information in the device object will be returned on the interface, for example:
{
"interviewId": "002N000000edyfrHJiLV",
"outputs": {}
}
7. Enable service orchestration
: The test is successful, click the enable icon above the service orchestration editor to publish the service orchestration.
Notice:
If the service orchestration is created, it is in the editing state by default and cannot be called by the page if it is not enabled.
Figure 18 Highlighted state after service orchestration is enabled
illustrate:
[Thinking] AppCube has three types of front-end pages, standard pages, advanced pages, and large-screen pages. So in what scenarios do you use standard pages?
Standard pages are often used in scenarios where business data is added, deleted, modified, and searched, and the page style requirements are relatively simple. The advantage of standard pages is that you only need to drag, pull, and drag page components, configure component properties, bind page models, and add a small amount of event code to quickly assemble a complete page .
The business functions of the HelloWorld application are mainly presented through standard pages . By using the "standard page" capability, "objects" and "service orchestration" are associated, bound, and invoked with components and event codes in the page, so that the front-end input data information can be transferred to the object, and finally rendered through the page out effect.
The entry object helloObject and service orchestration helloFlow used in the page need to be created in advance.
If you haven't created it yet, please refer to the Entry Object and Service Orchestration chapter and create it according to the relevant steps.
- 1.Create standard pages in the directory where you plan to store standard pages.Place the cursor on the "Page" directory and click the "+" on the right. In the pop-up menu, select "Standard Page" to pop up the Create Standard Page dialog box.
- 2.In the Create Standard Page dialog box, enter the Page Name, Label, and click Add.
Figure 19 Add standard page
Table 5 Basic information of service orchestration
parameter name | Parameter Description | Values that need to be filled in this example |
|---|---|---|
Label | The name used by Service Orchestration for presentation, which can be modified after creation. | helloPage |
name | The unique identifier of the service orchestration in the system, and cannot be modified after creation. The system automatically prepends the name with the namespace __ . When other functions call the service choreography, the "name" of the service choreography is called, not the label. | helloPage
illustrate: The actual created service editor ranking is: CNAME__helloPage |
After the page is created, directly enter the page design view, the new page is locked by the current user by default, and operations such as editing and saving can be performed.
When editing an existing standard page, in order to prevent multiple people from tampering with it during editing, please click 
to lock it before editing.
3.Create page mockups.
illustrate:
The standard page of AppCube is driven by the data model. All the logic of the page is based on the data model. The front-end components and the object and service orchestration associations need to create a page model.
a. Create the page object model "userInfo", associate the custom object "CNAME__helloObject__CST", and bind the page table later.
- 1.Click Model View at the bottom of the page, and in Model View, click New Model.
Figure 20 New model
2. Set "Model Name" to "userInfo", select "Object" for "Source", and click "Next".
3. Set "Select Object" to "CNAME__helloObject__CST", and in "Select Field", select "name", "id", "CNAME__detail__CST", "createdDate", click "Next", and then click "OK".
4. Click the 
save icon at the top of the page.
b. Create the page service model "helloFlow", associate the service orchestration "CNAME__helloFlow", the input value of the service orchestration, and then bind the input box in the form on the page.
- In Model View, click New Model.
- Set "Model Name" to "helloFlow", select "Service" for "Source", and click "Next".
- Set "Select Service Type" to "Service Orchestration", and in the pop-up window, set "Select Item" to "My First App", enter "CNAME__helloFlow" in "Search", and select "CNAME__helloFlow" in the search result , and then click OK. If Service Composer is not searched, check whether Service Composer is enabled.
- Click Next, and then click OK.
- Click thesave icon at the top of the page.
4. Click "Design View" at the bottom of the page to switch to the page design view, and click "Basic Components" at the top left to expand the list of components, so that you can easily drag and drop components to the page.
Figure 21 Expand the component list
illustrate:
Standard pages include design view, model view, event view, style code and more component code, third-party libraries, etc. For detailed introduction and usage, please refer to the standard page .
5. Drag and drop components to assemble the page.
a. Drag a "Title" component to "Page Content" and set the "Title" component properties.
illustrate:
In "Design View", drag and drop a page component to the page, select the component, and click the "Properties" tab on the right to set the binding data, style and other properties of the component.
- 1.Modify "Title Content" to "HelloWorld".
- 2.In the "style" property, set the title "font" to white, size "25px", centered; and set the title background to blue "#4A90E2".
Figure 22 Setting the style of the title component
illustrate:
Before configuring a component, in the component list area, place the cursor on the component, and a question mark icon with help information will be displayed in the upper right corner of the component. Click the question mark icon to enter the component introduction page. On the component introduction page, you can understand and learn the usage scenarios and parameter configuration methods of these preset front-end components. The component descriptions are described in detail, as shown in Figure 2.
Figure 23 View component help information
b. Drag a "Form" component under the "Title" component, then at the bottom of the data binding popup, click "Cancel" to create an empty form.
Since you don't need to define a data source yet, you need to click Cancel to create an empty form component.
Figure 24 Drag and drop form
c. From "Advanced" at the bottom of the component list on the left, drag a "Grid Container" to "Form". The grid container defaults to 1 column and 2 columns, select "Column", then under "Row Layout" in the properties, click under PC, 
and set the column to 3 columns.
Figure 25 Drag the grid container and set it to 3 columns
Figure 26 After setting, it is displayed as 3 columns
illustrate:
A grid container is a flexible container-like page layout that can divide pages horizontally and vertically.
d. Drag an "input box" to the first column and the second column respectively, and drag a "button" component to the third column.
Figure 27 Drag the input box and button
e. Select the "input box" in column 1, set "label" to "entry name", and "placeholder" to "please enter entry".
f. Select the "input box" in the second column, set "label" to "entry description", and "placeholder" to "please enter entry description".
g. Select "Button", set "Display Name" to "Add", "Type" to "Primary Button", then select the "Column" where the button is located, and set the top margin of "Layout" in "Style" to "20px".
Figure 28 Modify button properties
h. Drag a "Table" under "Form" (outside the form), and select "Table" under "Table Container", and at the bottom of the property on the right, turn off the "Multiple Selection" option.
Figure 29 Drag and drop the table
i. Click the Save button at the top of the page 
.
6. Bind components to page models, and associate front-end pages with objects and service orchestration.
a. Select the "Entry name" input box, and click next to "Data Binding" on the right 
to enter the selected model pop-up window.
b. In the Select Model pop-up window, check the "name" of "inputParam" under "helloFlow", and click "OK".
Figure 30 Selected model field
c. In the same way, bind the model field for "entry description": select the "entry description" input box, click under "Data Binding" on the right 
, enter the selected model pop-up window, and check "inputParam" under "helloFlow" "detail", click "OK".
After binding, the values entered in the "entry name" and "entry description" input boxes on the page will be used as the input parameters "name" and "detail" values of service orchestration. When the page calls service orchestration, the front-end page can be The entered value is written to the entry object helloObject .
d. Select "Table" under "Table Container", click "Data Binding" on the right 
, and then select "userInfo" in the pop-up window for selecting a model, and click "OK".
Figure 31 Selected object model helloObject
After the table is bound to the page object model, the system automatically displays the object fields as the column names of the table. If there is an entry record in the custom object associated with the object model (here, the entry object helloObject ), it will be automatically queried and displayed in the page table. The column order can be adjusted in the table properties "Table Columns".
Figure 32 After binding the page model
illustrate:
[Tips] After the table component is bound to the page model, the fields in the page model can be automatically added as table columns, and the fields of the model can also be used as table column query conditions. Table Block" settings.
7. Add button event.
- Select the "Add" button, and in the property area on the right, click the "Event" tab.
- Click the "+" after "Click" to enter the "Add Event" pop-up window.
- In Custom Action, enter the following event code and click Create at the bottom.
$model.ref('helloFlow').run().then(() => {
// Get the component by Name
var _table = context.$component.get('table_0');
_table.doQuery();
}).catch(e => {
// failure message
context.$message.error('Add entry failed:' + e.resMsg, 5);
});
Figure 33 Add custom action code
illustrate:
The button event mainly calls the service orchestration through the page service object (helloFlow) to complete the new data function.
- Click the Save button at the top of the page.
8. Click the 
preview icon at the top of the page to enter the preview page.
9. In the input box of the preview page, enter "helloworld" for the entry name and entry description, and click "Add" to view the newly added entry records in the table.
During page development, click 
to enter the preview page of the development environment, which is slightly different from the actual effect. This section will introduce how to preview the application effect in the preview environment of the application. The preview effect here is basically the same as the actual running environment. Under App Configuration, you can also change the style and color of the app frame .
- 1.Enter the "HelloWorld" app.
- 2.Mount the page on the navigation bar as the application menu. If the page is not mounted on the navigation bar, when previewing the application, it is impossible to find the relevant pages and objects of the application.
- Click Configure in the lower part of the navigation on the left side of the app.
Figure 34 Configuration - 3.
- On the Navigation Bar tab, click the + on the right side of the Menu Tree, and select Add Tab.
Figure 35 Navigation bar add tab
illustrate:
When there are many pages on the navigation bar, you can add a table of contents. Adding a table of contents makes it easier to distinguish page types and facilitate navigation. After the directory is added, it will be displayed directly in the application navigation, and a tab can be added under the directory. In addition, in the application configuration, you can also set the application options list, system parameters and other information, you can view it in the setting application chapter.
3. In the "Add Tab" pop-up window, set the following information, and then click "Save".
Table 6 Tab Information
parameter name | Parameter Description | Values that need to be filled in this example |
|---|---|---|
page type | The type of page currently being added:
| Standard page tab |
Display area | The display area of the navigation tab can be divided into the following two types:
| Home menu |
open way | There are two ways to open the navigation tab:
| current window |
Label | The name displayed in the app's navigation. | HelloWorld |
name | The name used to uniquely identify the tab. | helloPage |
icon | Display icon for the navigation tab. | There is no need to set it here. If there is, you can select an icon to upload directly. |
page | pages to add | helloPage ( CNAME__ helloPage ). |
describe | The description information of the current page is used to know the main content of the current page. | Not set. |
Figure 36 My application
4. Delete the Home tab.
5. Under the navigation on the left side of the application, click 
to enter the application preview page.
Figure 37 View Application
6. Click "HelloWorld" on the right, enter the entry name and entry description on the right page, and click "Add" to view the newly added entry records in the table.
Figure 38 New entry
7. (Optional) If the entry fails to be created successfully, press F12 on the keyboard to debug the page debugging window, re-enter the entry to debug the page.
After the application development is completed, the application needs to be compiled, packaged, and published. It can be published to the running environment of the current tenant, or shared with other tenants and installed in the development environment or running environment of other tenants.
AppCube supports a variety of publishing methods. In this example, the application is published to "My Warehouse" for publishing, and then it will be deployed to the running environment through "My Warehouse".
- Application package build typeAppCube supports compiling two kinds of application packages: asset package and source package.
- Source package: All components in this type of package are unprotected and restricted. After installation in other environments, the components in the package can be edited, that is, they can be redeveloped on the original basis. If other users install it in the development environment, it will be displayed under the "Project" tab on the home page of the development environment.
illustrate:
When the compilation type is "source package", there is only one way of publishing to "My Warehouse".
- Asset Package: This type supports setting whether the components in the package are protected. No compilation settings are made during packaging. The default packages are asset packages, and the components in the package are in read-only protected mode. When the package is installed in other environments, it can only be run and previewed. Components in the package cannot be edited. If another user installs the asset package in another development environment, the application will be displayed under the "Library" tab on the home page of the development environment.
- release method
Figure 39 shows the publishing method of the AppCube application (asset package) . This example uses the method of publishing the application to "My Warehouse", and then deploys it to the running environment through "My Warehouse".
Figure 39 Application release method
- 1.Log in to the AppCube development environment, and on the home page, click "HelloWorld" under "My Apps" to enter the app.
- 2.Click on the left side of the APP development pageand select "Compile" to compile.
illustrate:
Before compiling, you can also click to make some custom compilation settings. For detailed settings, please refer to Compilation Settings .
3. After the compilation is complete, click the lower left corner 
and select "My Repository" to publish the application installation package to my repository.
4. Fill in the version information and click Publish.
Figure 40 Fill in the version information
After the release is successful, the page displays "The package has been successfully uploaded to my repository.".
illustrate:
[Thinking] Can the package be downloaded after the application is released, and where is it? Can other tenants see it?
On the app's "Package Management" page, you can view the published app package, or click to download. Between different tenants, the applications in "My Warehouse" are invisible.
Figure 41 View the application package published to "My Warehouse"
illustrate:
The free version does not provide a running environment. Please refer to Purchasing Commercial Tenants . After purchasing the professional or exclusive version directly, package and release the application, and install the application in the running environment.
In the development environment, after publishing the application to "My Warehouse", AppCube will publish the application package to the running environment of the current tenant synchronously, so that it can be deployed and run in the running environment.
- 1.Use the current tenant developer account to access and log in to the AppCube runtime environment .
illustrate:
You can also directly click the user name on the right in the development environment to switch the running environment, as shown in the following figure.
Figure 42 Switch to the running environment
2. On the home page of the operating environment, click "My Warehouse" to enter the My Warehouse.
Figure 43 My warehouse
3. In the "My Repository" on the right, find the "My First App" published earlier, click "Install", and click "OK" in the pop-up window.
Figure 44 Installing the application in my repository
4. Set up the app.
a. On the management page, choose Application Management > Application Navigation. On the right, find the published My First Application, click 
it, and enter the application layout page.
Figure 45 Setting the page layout
b. Under "Layout", after selecting the second layout, click "Save", and then click "Preview" to enter the application.
Figure 46 Setting the layout type and previewing the application
5. Verify the app.
On the application page, enter "helloWorld" for the entry name , "helloWorld is my first application" for the entry description , and click "Add" to view the newly added entry records in the table.
Figure 47 New entry
If you have verified successfully, congratulations! You have finished developing your first app on AppCube!
You can also check out the other examples in the quickstart to continue your app development journey with AppCube!
After deploying the app in the runtime environment, you need to create a business user for the app and configure the business user's permission to use the app.
- 1.Enter the operating environment business configuration center.
- Use your HUAWEI CLOUD account to log in to the HUAWEI CLOUD website , and click Console on the right side of the top navigation bar to enter the HUAWEI CLOUD console.
- Above the left navigation bar, clickand select the region item where the service instance is located. Click
and search "Apply Rubik's Cube" in the Find box. Click the found result to enter the AppCube service console.
- Click "Enter Home" to enter the "Application Development" page.
- Referring to Figure 48 , enter the service configuration center of the operating environment.
Figure 48 Enter the operating environment business configuration center
2. Create a new role.
- Select "Organization User" at the top of the "Business Configuration Center" page.
- In the left navigation bar, select Role Permissions.
- Click the "+" after "All Roles" to set the added role name, such as "helloWorld", and configure the application as visible and default.
-
3. Create a business user such as "testHelloWorld".
- On the Service Configuration Center page, select Organization User.
- In the navigation bar on the left, select User Management, and click Create User on the right.
- Fill in the user information on the "New User" page, where the user name is "testHelloWorld".
- In the "Roles" area, check g from the left . Click "+" after "All roles" to set the name of the added role... The created role "helloWorld" and then click ">" to give the user the corresponding permissions .
Figure 49 Configuring business users
- Click Save.
4. Configure business user permissions in the runtime management center.
- In the navigation bar on the left side of the runtime management center, choose User Management > Permission Configuration.
- Click the permission "helloWorld" used by the business user to enter the permission details page.
- On the "Basic Information" tab, click the edit icon, select the "Execute Service Orchestration" permission under "Permission Management > Workload Permission", and click.
The "Execute Service Orchestration" permission is for general development. After opening it, open the specific service orchestration "helloFlow" execution permission later to execute the service orchestration "helloFlow". - Select the App Settings tab to set app and menu visibility.
- On the " Custom Object Permissions " tab, click the edit icon to the right of " Custom Object Permissions ", enter " CNAME__ helloObject__CST" in the search box, check the "Edit" permission, and click "Sure". " CNAME__ " please refer to the actual namespace prefix.
- Select the "Modify All", "Create", "API Read" and "API Write" permissions of the object in turn, and then clickto save the settings.
- Select the "Interface" tab, click the edit icon on the right, and check the "Executable" permission of " CNAME __helloFlow".
5. Business users log into the app and use the app.
- Business users enter the subdomain name of the running environment in the browser, enter the user name and password, and log in to the running page of the application Portal.Before business users log in to the application, they need to know the subdomain name of the running environment. Developer users can view subdomains in "System Management > Subdomains" of the operating environment management center and share them with business users.
Figure 50 Login application
- The business user needs to reset the password when logging in for the first time. After reset, use the new password to log in to the application Portal running page again.
- After recording, find the application, enter the entry name and entry description, add an entry, and experience the application.