...
Overview
On the first part of this lesson, we will explain how to start on Wayfast platform by creating a new Container (Solution) where the users can gather the different Projects and associate Databases to start any application in Wayfast account. This container will give you the ability to organize and save your work. In few words, you can build your platform -develop, run and manage Web and mobile applications- establishing the structure in simple steps.
How to create Solutions?
| Info |
|---|
Definition: Solutions are the main containers for any project that needs to be developed in Wayfast. It’s a key point to build your application and organize the work |
Once the user has access to Wayfast, you can go to “My Solutions” section and clicks on “+ Solution” button.
...
A popup is displayed to create the container. First of all, user needs to complete the Name and Target fields before clicks “Accept” to continue. This container will organize the new applications created and you can easily view all your solutions in the Dashboard.
...
A Portfolio icon will provide the # of Projects allocate on each Solution created. Since this is a new container, the container is showing zero values. User can navigate through the “Solution Name” to access into the Solution details form.
...
How to create Projects?
| Info |
|---|
Definition: TBD |
Now that we have the main structure created, user can click on “Project” button and build the first element to initiate an Application.
...
A popup is displayed to select the main settings for your new application. It’s important to analyze which type of project fits better to your application objectives. There are 3 options available
Workflow
Application
Source Code
Also the users need to select which Login Type is needed, Wayfast offers “SSO”, “User and Pass” and “Anonymous” options.
Type of Project Definition: Workflow / Application / Source Code
Login Type Definition: SSO / User and Pass / Anonymous
This is an important milestone on new project because it will define the whole structure for your applications. Once it’s created, user can’t edit the definitions previously selected[s1] .
...
Immediately after user clicks on “Accept” button, the “Select Skin” Today we are going to explain how we can easily create a fully functional application using Wayfast in five steps. First, we are going to do the basic setup for any application to work and then we are going to create a simple screen displaying a “Hello World!” message.
Step 1 - Create a Solution
Once we log into Wayfast you will see “My Solutions” area where we can see all your applications. Just click on the “New Solution” button.
...
A "Create a solution” popup will be displayed. Now we just need to complete the “Name” and “Description” fields. Then click on “Submit” button to continue.
...
Now we can see the new solution listed in “My Solutions” area
...
Step 2 - Create a Project
After creating a solution we can click on its name to see the content. Here we can see the list of projects and click on “New Project” button to build our first Application.
...
Now a popup is displayed to set the main settings for this project. First we need to set the project type. For now we are going to focus on “Application” type, the rest are going to be explained in “What is a project?” chapter.
Workflow
Application
Source Code
The next important setting is “Login Type”. Wayfast offers three different Login mechanisms: “SSO” (Single sign on), “User and Pass” and “Anonymous” options. In this example we are going to use “User and Pass”.
Now we can click on “Submit” button to confirm our options and start building this project.
...
“Please select a skin” popup will offer different templates to apply in your application’s interface.
...
Dashboard will provide the main information regarding the status of your “Requirements”, Size of your code and database and finally the “Runs” information.
...
How to associate our Database now that the Project is created?
Now that we have the Portfolio container (Solution) generated and the Project set it up, we can start working on the Application by defining the Requirements. But first, we need to associate our Database (DB) to the Project. Otherwise this Requirements won’t have any relationship with the Application to build.
Turn into Dashboard, user clicks on “Project Size” section and selects “Database” icon on top header menu
...
On Submenu, selects “Instances” and then clicks “Associating Instances” to setup the new DEV Environment for the Application DB.
...
Wayfast automatically shows the different instances (Environments) that can be associated to our DB in next step. This selection should be repeated each time that you want to link instances.
...
On Submenu, click again “Database” section. User can create a new Database by choosing the Instance previously selected. This option will be prompted automatically on the Instance dropdown.
Also user can choose by adding a previously created DB using the “Attach DB” button.
...
Now we have the DB associated to the Project and user can continue defining the Requirements.
How to create Requirements?
Definition: TBD
User can create this entity by clicking on “Requirements” icon at the top header. Automatically user will see the “New” button to start a New Requirement. This action is very important because it will the first object to interact with our newly DB.
...
A popup is displayed and User can choose on “Select the Type” dropdown the option “Requirement” to establish the association.
...
User needs to complete the Request on Text Editor with the corresponding information to describe what is the purpose related to the Requirement. Also Wayfast brings the following options to be more accurate on the creation:
...
Field
...
Description
...
Assignment Type
...
TBD
...
Meetings
...
TBD
...
Sprint
...
User can define the iterations to build the Project, normally a requirement is associated to a specific sprint to complete a set amount of work.
...
Size
...
A requirement can be sized depending on the effort by Hours. User can choose between the following options:
XS (1hs)
S (2hs)
M (4hs)
L (8hs)
XL (10h)
XXL (23hs)
...
Developer
...
By default, it should populate the user who creates the Requirement.
...
Criticality
...
Users can set this option depending on the criteria defined by the team. A critical requirement is one that the system must achieve or the system cannot function at all.
...
Upload
...
TBD
NOTE: None of this options are mandatory, however, they are recommended to generate a proper alignments for the each Requirement into the Project.
...
After creation, the Requirement will be grouped as “Pending Tasks” at the vertical Navigation bar. User can check the checkbox beside the Requirement to turn this on and moved them into “Active Tasks”. Also the user can see the Requirement generated into the Dashboard with
...
We can select a look and feel from Wayfast library.
...
Once we selected Project’s skin, we will see our new project in our Solution Dashboard. This view includes statistics like “Requirements” by status, Project’s objects and testing executions.
...
Step 3 - Create a Requirement
Now we have a project we can go to the next step: Creating a Requirement
Definition: Requirements are Wayfast’s approach for understanding what needs to be done before jumping into the solution. You can think of it like a Problem Statement that helps organizing your work and enables teamwork.
We can access the Requirements module by clicking on the “Requirements” icon at the top of the screen and then clicking on the “New Requirement” button.
...
In the “New requirement” screen we can choose different requirement templates. For now let’s select “Simple” type that allows a free description.
...
After clicking on the “Submit” button, the Requirement will be grouped in the “Pending” lane of the Requirement’s board.
...
Our requirements will also be visible in the collapsible task list bar at the left side of the screen.
We can expand it clicking in the arrows
...
Requirements can be set to active by selecting them on the task list bar and clicking the “Activate” button.
Step 4 - Create a Page
| Info |
|---|
Definition: Pages are the main unit to build User Interfaces within in Wayfast. Even if we are building Web Applications or Mobile applications the life of our end users inside our app is going to happen between pages. You can think of a page as an applications application screen. Pages are made of controls, datasets and actions. |
...
The visual structure of a Wayfast page is called layout. It gives Wayfast the ability to place controls in the screen. Layouts are meant to be reused so you can create your own or pick one from the thousands of built-in layouts that come with Wayfast. |
First we need to define which Layout are going to be our default to create pages.
...
Clicks use for our Hello World page.
So we click on “General Options” icon at the top header. Then clicks on “Layout” subsection to verify if there’s anyone defined into the Project. We can choose by “Associate Layout” if we select a predefined component. Selected layout will give us a default distribution of Controls under each page that we are going to create. Also Wayfast has the ability to create “New Layouts” defined by the users.
For example, we can use a “Simple” layout for normal pages and “Popup” for prompted windows in our Project.
...
menu and to “Layout” submenu.
...
Click on “Add Layout” button and select the “HelloWorld” layout.
...
| Info |
|---|
NOTE: User can select multiple Layouts, this selection will be the options available every time that create new pages. |
Turn to Now let’s click on the “Project Pages” icon on the top header to finally create a new page from the scratch.
...
Click “New Page” and popup will be prompted on screen. There are 2 tabs: “General” tab to define the page name, type and the option to make this page as Home page by checking the “Is initial page” checkbox; “Layout” tab that will bring the options previously selected in General Options >Layouts to define which kind of distribution will contain the new page.
...
Once the user clicks “Accept” button, the page is loaded on Dashboard.
...
How to add Controls?
| Info |
|---|
Definition: TBD |
Now that we defined the Page under the Requirement, Wayfast give us the chance to establish a set of Controls under the page generated.
Navigate through the page by clicking on Page Details (link on page name) and expand the “Controls” subsection. Dropdown at the left side will display all the controls that Wayfast contains by default.
NOTE: Wayfast also brings the possibility to import controls. We will check this feature in another lesson.
...
After selecting any of the controls available (e.g. Label), the “New” button will be displayed beside the dropdown. If the user clicks on “New”, a popup will be displayed to select the multiple settings for this control.
...
There are different tabs inside the Control popup, “General” tab will define the control name and the type of control. On “Layout” tab, we can set the location for the control inside the Page using the “Placeholder” dropdown field. Also it’s mandatory to fix an order inside the container page.
...
After clicking on “Accept” button, we can observe the new control associated to our page. At the top right corner, if the user clicks on “Preview” button, Wayfast will open a new tab that shows the preliminary view of the page with the newly control created.
...
To complement different controls under the page, we can set a “Checkbox” control before the “Label” previously created in order to make this text visible or not.
NOTE: You can find more details about Controls on the specific documentation for this functionality.
Recap
In the first part, we learnt about how to create a Solution and how they can contain Projects. We defined the structure by associating the Project with a Database. In the second part, we created Requirements that can be linked to multiple pages, and finally we navigated briefly through the Controls that we can insert and manage according to our application needs. This first approach to Wayfast definitely helped us to get a more familiar with the tool, now we can go through in depth all the features and functionality of the system.icon on the top menu and then click on the “New Page” button.
...
In the “New page” screen we can define the bare minimum behavior of our screen.
...
Now we can see the newly created page in the “Pages” screen
...
Step 5 - Add Controls
| Info |
|---|
Definition: User interface controls are the smallest units that compose Wayfast user experience. It can be buttons, labels, maps, charts or many other amazing elements that can be added to your app to thrill your users |
Let’s click on the page we just created to see the page editor and expand the “Controls” toggle button.
In the “Control type” dropdown choose “Label” and click on the “Add control” button.
...
Selecting the “Label” option in the “Control type” dropdown and clicking on the “Add control” button will display a popup to configure the control.
...
In the “Layout” tab we need to select an available “Placeholder” and set the “Order” to place the control in the screen.
...
| Info |
|---|
Definition: A place holder is just the name you can give to a region of your Layout. |
After setting the place holder just click on the “Submit” button to save Control’s settings.
...
Run the App
Now we are ready to see our shinny application up and running. At the top right corner we can click on the “Preview” button to execute the page we just created.
Now we can see our app working and saying Hello to World for the first time!
...
Recap
In this very first lesson, we learnt the basics of Wayfast including how to create a requirement and a Solution, add a Project and configure it, create a Page, add controls to it and execute it. Hopefully this helped to familiarize with the platform and opens world of opportunities to build amazing apps in minutes.
In the subsequent chapters we are going to be reviewing all Wayfast features and explaining them in detail including step by step guides.
Happy coding!