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
Thus, there is the first use-case that should be implemented:
applicationinstance should be initialized when the application starts.
The initialization of the Firebase
application instance is encapsulated in the
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 item in the
Functions section on the left panel. It should be inside
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.