HomeBitalpha AI Official WebsiteMarketVideosCommunity
    Getting Started
    Why Webcodesk?
    System Requirements
    Install Webcodesk
    Beginner Tutorial
    Bootstrap project
    Install components
    Review components
    Create main page
    Create sign-in page
    Create sign-up page
    Create initialization flow
    Create main flow
    Create sign-in flow
    Integration with Firebase
    Create sign-up flow
    Build application
    Open source code in IDE
    Open in IntelliJ IDEA
    Source code structure
    How it works?
    Writing source code
    Create React component
    Develop component in isolation
    Create functions
last edited 2019-04-11

Create initialization flow

First of all, let's understand what is a flow in Webcodesk.

The flow is a diagram that shows how components, functions, and pages are connected in the application.

You can create many different flows in the application. It's like you write down many scenarios when describing use-cases or user stories.

You can think about each flow as the visual presentation of a use-case that should be implemented.

For example, we have to create the authentication process utilizing Firebase SDK and API. But, according to the Firebase SDK reference, before using any method from the SDK in a Web application, we have to initialize Firebase application instance.

Thus, there is the first use-case that should be implemented:

  • The Firebase application instance should be initialized when the application starts.

The initialization of the Firebase application instance is encapsulated in the initApplication function from authenticationFunctions list of the functions, we installed from the market. So, we should call this function when our application is starting.

Webcodesk provides a nice Flow editor that gives you a convenient way to create the visual presentation of the use-case scenario.

There is already a start flow in Flows section, created during the project generation. Double click on the start flow item to open flow editor in the new tab.

As you can see, there is a grey rectangle with the Application title on the diagram. This is the first element of the diagram that plays a role of the start in a flow described by this diagram.

Each element in the diagram has entry points with labels. These points correspond to the input or output properties of the element. Inputs are on the left side, and outputs are on the right side of the rectangle.

Application element has the only one onApplicationStart output that triggers when the application loaded in the browser.

That's what we need for our first use-case. But we should add another element to the diagram which indicates the initApplication function.

Find initApplication item in the Functions section on the left panel. It should be inside authenticationFunctions group.

Click on the icon button to open any group item in the tree.

Drag and drop initApplication somewhere into the flow editor empty space. The result should be as on the diagram below.

The last what we should do is to connect these elements. Move the mouse over the onApplicationStart output point and then drag point (press the button and move mouse) to the callFunction input point of the initiApplication function element.

Hint: you can zoom in and zoom out the diagram view on the screen by mouse scrolling.

Hint: you can move the diagram by mouse - press the button elsewhere on the diagram and move the cursor holding the mouse button.

Once you connect elements, you’ll see that elements have a connection between their entry points, and elements are rearranged to have a nice diagram view.

That's it what we should do to implement Firebase application initialization in our application.

Now we can create another flow.

last edited 2019-04-11

Create initialization flow

First of all, let's understand what is a flow in Webcodesk.

The flow is a diagram that shows how components, functions, and pages are connected in the application.

You can create many different flows in the application. It's like you write down many scenarios when describing use-cases or user stories.

You can think about each flow as the visual presentation of a use-case that should be implemented.

For example, we have to create the authentication process utilizing Firebase SDK and API. But, according to the Firebase SDK reference, before using any method from the SDK in a Web application, we have to initialize Firebase application instance.

Thus, there is the first use-case that should be implemented:

  • The Firebase application instance should be initialized when the application starts.

The initialization of the Firebase application instance is encapsulated in the initApplication function from authenticationFunctions list of the functions, we installed from the market. So, we should call this function when our application is starting.

Webcodesk provides a nice Flow editor that gives you a convenient way to create the visual presentation of the use-case scenario.

There is already a start flow in Flows section, created during the project generation. Double click on the start flow item to open flow editor in the new tab.

As you can see, there is a grey rectangle with the Application title on the diagram. This is the first element of the diagram that plays a role of the start in a flow described by this diagram.

Each element in the diagram has entry points with labels. These points correspond to the input or output properties of the element. Inputs are on the left side, and outputs are on the right side of the rectangle.

Application element has the only one onApplicationStart output that triggers when the application loaded in the browser.

That's what we need for our first use-case. But we should add another element to the diagram which indicates the initApplication function.

Find initApplication item in the Functions section on the left panel. It should be inside authenticationFunctions group.

Click on the icon button to open any group item in the tree.

Drag and drop initApplication somewhere into the flow editor empty space. The result should be as on the diagram below.

The last what we should do is to connect these elements. Move the mouse over the onApplicationStart output point and then drag point (press the button and move mouse) to the callFunction input point of the initiApplication function element.

Hint: you can zoom in and zoom out the diagram view on the screen by mouse scrolling.

Hint: you can move the diagram by mouse - press the button elsewhere on the diagram and move the cursor holding the mouse button.

Once you connect elements, you’ll see that elements have a connection between their entry points, and elements are rearranged to have a nice diagram view.

That's it what we should do to implement Firebase application initialization in our application.

Now we can create another flow.