Getting Started
    Why Webcodesk?
    System Requirements
    Install Webcodesk
    Beginner Tutorial
    Bootstrap project
    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-23

Create main flow

In the previous step, we've understood what flow is, but the flow we built was without any UI component. Now we should include the components in the flow because we need some action in our pages.

Before we create another flow - let’s learn what is a component's instance.

Currently, components are decoupled from each other. However, we've created three pages where we placed a few of them. We can review our pages on the Live Preview, but pages are not alive so far.

As you might already notice, when you compose page with React components, you can highlight and select each component on a page by mouse. There is also a convenient way to see the entire structure of the page.

Open the main page in the editor by double click, and click on the Structure button on the top toolbar.

When you place a component on the page, Webcodesk adds the component's instance to the page structure and assigns a default name to it. However, you can change the instance name to make another copy of the component which acts as an independent counterpart.

Think of the component's instance as an object initialized in the memory. There may be multiple instances of the React component with different names.

Once you understand what component's instance is, there is one more important feature - only instances may take part in the flow.

But before we start creating a flow, let's review the use-case we want to implement in the new flow.

As we already said, the main page will be a protected page and only authenticated users can see it. So, we can write the following scenarios:

  • User opens the browser with main page address (the main page is recognized as a home page in application)

  • The main page mounts all nested components including the UserProfile component.

  • The UserProfile component fires onMount event and calls checkUserProfile function to get the user profile data

    • If there is no data (user is not authenticated) the user is forwarded to the sign_in page
    • If there is user profile data (user is authenticated) the UserProfile component displays data.

Pretty straightforward, isn't it?

Now let's create a new flow, and name it as open_main_page.

Try to give descriptive names to the flows. You will have many flows in the application and their names should help you to understand what use-cases are implemented inside.

The star point of this flow will be the UserProfile component's instance in the main page. UserProfile onMount event should call checkUserProfile function.

Expand the main page item in the Pages section and find there a userProfile item (the default instance name). Drag and drop userProfile item right on the Application element in the flow editor. That's how we can change the starting point in the flow.

Find the checkUserProfile function in the tree and drag it on the empty space in the flow editor. Then connect the onMount output in the userProfile element with the callFunction input point of the checkUserProfile element.

We see that the checkUserProfile function has two output points.

  • The authenticated output fires when the user is authenticated and we can get the data through this output.
  • The notAuthenticated output fires when the user is not authenticated and we should forward the user to the sign_in page.

Let's implement the second scenario - forward the user to the sign_in page. Drag and drop the sign_in page item from the tree to the empty space in the flow editor, and connect the notAuthenticated point to the forward input point in the sign_in element.

In the second scenario, when there is the user profile data because the user was authenticated before, we can get data from the authenticated output point and pass it into the userProfile instance.

Drag and drop the userProfile instance from the tree into the flow editor, and connect its data input with the authenticated output point.

Now try to open the Live Preview and you will see that you are forwarded to the sign_in page when try to open / or /main addresses.

The sign-in flow we will implement in the next step

last edited 2019-04-23

Create main flow

In the previous step, we've understood what flow is, but the flow we built was without any UI component. Now we should include the components in the flow because we need some action in our pages.

Before we create another flow - let’s learn what is a component's instance.

Currently, components are decoupled from each other. However, we've created three pages where we placed a few of them. We can review our pages on the Live Preview, but pages are not alive so far.

As you might already notice, when you compose page with React components, you can highlight and select each component on a page by mouse. There is also a convenient way to see the entire structure of the page.

Open the main page in the editor by double click, and click on the Structure button on the top toolbar.

When you place a component on the page, Webcodesk adds the component's instance to the page structure and assigns a default name to it. However, you can change the instance name to make another copy of the component which acts as an independent counterpart.

Think of the component's instance as an object initialized in the memory. There may be multiple instances of the React component with different names.

Once you understand what component's instance is, there is one more important feature - only instances may take part in the flow.

But before we start creating a flow, let's review the use-case we want to implement in the new flow.

As we already said, the main page will be a protected page and only authenticated users can see it. So, we can write the following scenarios:

  • User opens the browser with main page address (the main page is recognized as a home page in application)

  • The main page mounts all nested components including the UserProfile component.

  • The UserProfile component fires onMount event and calls checkUserProfile function to get the user profile data

    • If there is no data (user is not authenticated) the user is forwarded to the sign_in page
    • If there is user profile data (user is authenticated) the UserProfile component displays data.

Pretty straightforward, isn't it?

Now let's create a new flow, and name it as open_main_page.

Try to give descriptive names to the flows. You will have many flows in the application and their names should help you to understand what use-cases are implemented inside.

The star point of this flow will be the UserProfile component's instance in the main page. UserProfile onMount event should call checkUserProfile function.

Expand the main page item in the Pages section and find there a userProfile item (the default instance name). Drag and drop userProfile item right on the Application element in the flow editor. That's how we can change the starting point in the flow.

Find the checkUserProfile function in the tree and drag it on the empty space in the flow editor. Then connect the onMount output in the userProfile element with the callFunction input point of the checkUserProfile element.

We see that the checkUserProfile function has two output points.

  • The authenticated output fires when the user is authenticated and we can get the data through this output.
  • The notAuthenticated output fires when the user is not authenticated and we should forward the user to the sign_in page.

Let's implement the second scenario - forward the user to the sign_in page. Drag and drop the sign_in page item from the tree to the empty space in the flow editor, and connect the notAuthenticated point to the forward input point in the sign_in element.

In the second scenario, when there is the user profile data because the user was authenticated before, we can get data from the authenticated output point and pass it into the userProfile instance.

Drag and drop the userProfile instance from the tree into the flow editor, and connect its data input with the authenticated output point.

Now try to open the Live Preview and you will see that you are forwarded to the sign_in page when try to open / or /main addresses.

The sign-in flow we will implement in the next step