Lesson Overview
A mobile application may have a feature that allows a user to create his own account in order to be able to use the application. When the registration process is achieved, the user can login into the mobile app using the credentials chosen during the registration process. We need to define a place for users to insert their credentials. This lesson shows you how to model a basic "Registration" feature using WebRatio Mobile Platform.
The Back-End Configuration
In order to model the "Registration" pattern we need a back-end publishing the "Registration" and "Login" user services. Let's start from our "CRMback-end" dataservice project where we will enable all the services we need in order to allow the user registration and login.
Open the "Domain Model" view, right-click on "User Services" item in the Outline View, and choose "Configure Services...". In the opening dialog enable the "Register" and the "Login" services and press the "OK" button.
Remember that, in order to work correctly, the back-end Domain Model must be mapped to an existing database and properly synchronized with it. Refer to the dedicated lesson to learn more about the Database synchronization procedure. Let's synchronize the Domain Model, then save the changes, then Generate and Run the DataService Project.
How to Connect with the Back-End
Once we have a back-end project exposing all the services we need to perform registration and login, let's refer to the "CRM" mobile project in order to model the mobile app performing the "Registration" pattern. First of all, let's bind the "CRM" mobile project to the "CRMback-end"dataservice project in order to let them communicate through the published services.
In order to let the mobile app work properly, we need to set the "Back-end Base URL" and make it refer to the "CRMback-end" generated application. Enter the "CRMback-end" URL next to the "Back-end Base URL property". Right-click on the "App User" class, select the "Synchronize Domain Model..." option. In the opening dialog choose the "CRMback-end" DataService Project and press the "Next" button. Press the "Import All Elements" button, then press the "Finish" button.
As you can see the "App User" class now contains the "remoteOid" attribute. This means that it is now mapped to the corresponding "User" class belonging to the back-end. Once the Domain Model is properly mapped, we can start modeling the IFML model for the "Registration" pattern. Move to the App View in order to start.
The "Registration" feature
Once the Domain Model is properly mapped, we can start modeling the IFML model for the "Registration" pattern.
How to Model the "Registration" Screen
Let's start moving to the App View. As you can notice, the "CRM" mobile project already contains the IFML model needed to perform the offline login. We need to add a screen containing the registration form and the action definition actually performing the registration. Click "View Container", choose "Screen" and place it in the App View. Then type a name for the screen, such as "Registration".
The "Registration" screen will contain the form where the user enters his data and credentials necessary to the account creation. Let's start adding the "Registration" form component to the screen. Click "View Component", choose "Form Component", and place it in the screen. Write a name for the form component.
Let's add now the fields for the "Registration". Right-click on the form component and select the "Edit Form ..." option. Press the "Add Field" button and type a name for the new field. Repeat the same procedure to add the other fields "Password" and "Email". Remember to set the type property to "password" for the "Password" field. In this way the password type hides the characters while the user in entering text into the field, exactly how password fields usually work. Finally press the "OK" button.
Let's add a Validation Rule on the "Email" field, in order to check if the entered string is a valid email address. Right-click on the "Email" field and choose "Add" and then the "Validation Rule ..." option. In the opening dialog select the "EMail" validation rule and press the "OK" button. Type a name for the validation rule, the validation rule mark is now visible on the form component. The EMail validation rule verifies if an the string entered by the user is a valid email address.
Since we want the user fill in all the fields available in the "Registration" Form, let's add a Mandatory Validation Rule for each field we have in the form component. Right-click on the "Email" field, choose "Add" and then the "Validation Rule ..." option. This time select the "Mandatory" validation rule and press the "OK" button. Type a name for the Validation Rule. The Mandatory validation rules verifies that the field is not empty. Let's repeat the same procedure in order to add a Mandatory Validation Rule for the other fields in the "Registration" form component.
In order to let the user reach the "Registration" screen starting from the "Login" screen, let's use a Select Event with a "Navigation Flow". Select the "Navigation Flow" item from the toolbar section related to "Flows" and click first on the "Login" form component in the "Login" screen and then on the "Registration" form component. Type a meaningful name for the event such as "Sign Up".
Let's add the "Registration" action to map on the "Registration" action definition we will define later. Select the "Action" item from the toolbar and place it in the work area. In order to let the user trigger the Action, let's use a Select Event with a "Navigation Flow". Click "Flows" and choose "Navigation Flow", then click first on the "Registration" form component and then on the "Registration" Action. Type a meaningful name for the event such as "Register".
How to Model the "Registration" behavior
Let's open the Action Definitions View in order to model the operations defining the "Registration" behavior. An "Action" is a container of operations and those operations should be defined in a dedicated section of the model. Let's open the Action Definitions View in order to model the operations defining the "Registration" behavior. Move to the Action Definitions View. First of all, let's create a new "Action Definition". Press the "Add Action Definition" button and type a name for the Action Definition. Double-click on the Action Definition to open it. The "Action Definition" has a default structure with an entry point and two exit points.
To create the user's account let's use the "Register" operation. Select the "Register" operation from the toolbar section related to "operations" and place it in the Action Definition work area. Write a name for the Register Operation. The "Register" uses the user's credentials passed as input to create a new account for the current user. It requires as input both username and password.
The "Register" operation can work properly only if the "App User" class is mapped on the corresponding class in the back-end project.
To state that the "Register" operation must be the first operation to be executed, let's use a "Success Flow". Select the "Success Flow" from the toolbar section relates to "Flows" and click first on the Input Port and then on the "Register" operation.
To specify the inputs required by the Action Definition you have to add parameters to the "Input Port" which represents the entry point. Let's use the Input Port Wizard for this purpose. Right-click on the Input Port, choose the "Input Port Wizard..." option. Select the "email", "Username" and "Password" attributes among the available ones provided by the "Register" operation and press the "OK" button. The "Input Port Wizard" allows you to quickly configure the Input Port Parameter. Starting from the input parameters of the components directly linked by the input port component this wizard create the corresponding input parameter and automatically perform the binding.
Once the account is created, let's use the "Login" operation in order to verify the user's credentials. Select the "Login" operation from the toolbar section related to "Operations" and place it in the Action Definition work area. Write a name for the Login Operation. The "Login" operation verifies the user's credentials to grant access to the reserved section of the mobile application. It requires as input both username and password.
To state that the "Login" operation must be executed after the "Register" operation, let's use a "Success Flow". Select the "Success Flow" from the toolbar seciton related to "Flows" and click first on the "Register" operation and then on the "Login" operation.
Let's set the parameter binding in order to provide the user credentials to the "Login" operation. Double-click on the Success Flow to make the binding. In the opening dialog uncheck the "Enable Default Binding" property. Since the parameter provided by the "Login" operation and the ones provided by the "Register" operation have the same name, you can use the "Guess Binding". Press the "Guess Binding" button and then press the "OK" button.
When the execution of the "Login" operation ends successfully, the Action Definition must exit through the "Success Port". Let's use a "Success Flow" for this purpose. Select the "Success Flow" item from the Toolbar and click first on the "Login" operation and then on the "Success Port".
When the execution of the "Login" operation fails, the Action Definition must exit through the "Error Port". Let's use a "Error Flow" for this purpose. Select the "Error Flow" from the toolbar section related to "Flows" and click first on the "Create App User" operation and then on the "Error Port".
Once we modeled the operation chain defining the "Registration" feature, let's go back to the IFML model in order to actually use the Action Definition. Move back to the "App View".
Let's associate the "Registration" action definition to the action. Select the action we previously placed in the IFML model and press the "Select" button. Select the "Register" action definition and press the "OK" button. Double-click on the "Register" navigation flow, uncheck the "Enable Default Binding" property, then press the "Guess Binding" button and the "OK" button.
If the action execution ends successfully, then the user is redirected to the "Home" screen. Let's use a "Navigation Flow" for this purpose. Select the "Navigation Flow" from the toolbar section related to "Flows" and click first on the "Success Port" and then on the "Home" screen.
If the action execution fails, then the user is redirected again to the "Login" screen. Let's use a "Navigation Flow" for this purpose. Choose "Navigation Flow" from the toolbar section related to "Flows" and click first on the "Error Port" and then on the "Login" screen.
Now press the "Save" button and then press the "Generate and Run" button. We can finally test our "Registration" pattern.
How to Emulate the "Registration" feature
When the generation process is completed, a new browser window will be opened. When the generation process is completed, a new browser window will be opened.
When the generation process is completed, a new browser window will be opened. Press the "OPEN EMULATOR" button, in the opening screen press the "Sign Up" button. Enter the required credential and press the "Register" button. Once the registration and the login are successfully performed the Home Screen will be visible.