Getting Started

Now, as you are all set to explore the world of application with Configure.IT, let's get started!

Visit http://www.configure.it/

Here, you can Sign In or create your account via Sign Up.

To create your account, click on "SIGN UP FOR FREE" and you will be directed to the given form.

If you already have an account, you can directly login to Configure.IT - http://m.configure.it

OR

Click on "SIGN IN" button and it will redirect you to the page where you enter the credentials like your USERNAME and PASSWORD and sign in.

NOTE : You can also Sign in using your Google+ OR LinkedIn account.

While creating new project, we'll start with template instead of designing our own screens. It's proven to be the fastest and easiest way to understand the basics of developing a mobile application.

Click on "Create My First Project" button (this button will be available to you on the Dashboard page if you are a first time user as shown in the given image) and you will be redirected to the Create New Project page as shown in the next slide.

Follow the below mentioned steps:

1. Enter the Project Name.

2. Select the template - M-Go.
[Here you will find some pre-designed templates for different kind of applications. The most common screens would be-Splash Screen, Listing Screen etc. ]

3. Click on "Create Project"
This will direct you to the next screen.

Thats it ! Your new project is being cloned by Configure.IT where you shall find the below listed parts of the project ready for you:

• Mobile Application Screens
• Database and required tables
• Ready to use Admin Panel

This activity will take a couple of minutes as the Project properties, Data tables, Admin Panel etc are being cloned.

After the essentials have been cloned, you will be directed to the shown screen where you enter information about your project.

Modify the project details and proceed.

1. Project Name
You can edit the Project Name [if required].

2. Project Category
Select the Project Category. The categorized list is displayed for your convenience and future reference so that you can easily bifurcate projects under different heads.

3. Go to Configuration
Click on "Go to Configuration" to navigate to the Mobile App Console where you can configure your screens.

Configure a smart UI to facilitate real time mobile apps design and development. The workspace shown in the given screen is called the Mobile App Console. Here, the actual screens of your project will be displayed. The drag and drop interface makes it easier to configure the screen.

You can always add/modify the screens by adding /updating controls, changing their properties, etc as per your requirement.

1. Add New Screen :

You can add new screen from the option as shown in the given screen.

You will be directed to the screen as shown in the next slide.

1. Enter the Screen name
as "MoviesList1"

2. Select Screen Template
Select the first screen template "MoviesList" from the Grid option. All these are pre-defined screen templates, select as per your requirement and thus you don't create and configure the entire screen from scratch. Saving of time & efforts !

3. Click on "Add screen"
The new screen will be appended in your project.

The image given shows how the newly added screen will look like. The screen once ready can be modified - adding controls, setting properties and actions on the screen controls, as per your requirements.

Understanding Data Sources

Once your screen designing is done, you need real data to be displayed onto the screen, in your case the list of movies. This "real data" is stored in the backend i.e., database. The data that is stored in the database needs to be fetched and displayed on the screen. This entire process is carried out by setting up a connection called datasource between your database residing on the server and the related mobile application screen.

Any data-driven mobile application is based on datasource, where the entire logic of your application resides. You can manage and configure your datasources from the Backend. A typical datasource may/may not have input parameters and mandatorily has a set of output parameters that are used to set the logic of the application flow.

The Data Source Configuration Wizard creates and edits data source in your screen. This option is available to you on the right panel of the Mobile App Console (You can refer to the screen alongside). Follow the steps in the upcoming slides to add the datasource for displaying the list of movies on the just configured screen "MoviesList1".

1. Click on "Add Datasource"
This will add new datasource in the current screen "MoviesList1".

2. Select Datasource
After clicking on "Add Datasource", you will receive a pop-up from where you can choose the API that needs to be added to the current screen. You can select the API from the drop-down menu of Select Datasource, as shown in the given screenshot. [The list of APIs in the dropdown are managed from the Backend, from where you configure your APIs using the API Configuration Interface]
Here, select movies_list.

3. Auto-generation of Output Parameters
After you choose the API from the drop-down menu, its related input parameters (if present), output parameters and default API Test URL is generated automatically.

Go to the Output Params tab of the popup to view all the output parameters related to the API selected.

4. Map Output Parameters
The output parameters thus generated need to be mapped with the specific objects of the current screen for the data to be reflected properly on the screen. Select and configure the respective objects from the drop-down menu for output parameters.

Here, select and map the output parameters with Form Object [Form object is selected, the reason being the output parameters need to be mapped with specific controls of the current screen for the data to be displayed]

Clicking on "Form Object", an Object Tree opens up which displays the list of all the controls used in the current screen in a hierarchical structure. Select the control from the list, in our case (as per the screen design) the name of the movie needs to be displayed on the control "LABEL1". Select "LABEL1" and click on SAVE.

Similarly, remaining output parameters can be mapped here.

Map the given output parameters. Refer to the screen alongside for the output parameters to be mapped.

Thereafter, click on "Save" button and this will save the datasource settings.

1. Click on Object Tree
You will find the Object Tree icon on the top left corner of the screen. An Object Tree shows the hierarchical structure of all the controls used in the selected screen.

2. Select the control "GRID_VIEW1" from the Object Tree.
This automatically opens the Property-Action window for the selected control. Click on "Actions" tab to configure from the list of actions available for the Grid View control.

3. Select the action "Load".
Here, since the data needs to be displayed on the Grid View of the screen, we need to call the API on the Load event of Grid View. As soon as you click on "Load", a pop-up will appear where you will have to set the action "API Call".

Refer to the image in next slide for setting the action "API Call" on the pop-up that appears for the Load event of Grid View.

1. Action Defined
Select the action API Call from the drop-down list.

2. Select Datasource
On selecting the action, its related Action Parameters display. In this case, you need to select the datasource that you need to call i.e., MOVIES_LIST. The droplist for Select Datasource will be populated with only those datasources that have been added to the specific screen. So, make sure to add the datasource to your screen before you set this action for any event on the screen.

3. Click on "Save"

A Splash Screen is the first screen of the application with the name, version and logo of the application. It usually appears while the application is launching.

For Splash Screen setting, we need to visit Object Tree. Object Tree is a tree like map to show hierarchy of the controls created orderly for a specific screen. Object Tree is generated for every screen of the application.

For demo purpose, lets change time to redirect user onto the next screen following below listed steps:

1. Click on Object Tree
You will find Object Tree icon  in the top-left corner of the screen.

2. Select Main View
Main View is highlighted in the below screen.Click on    in property window opened in pop-up, where you will find "Time completed" action. Make sure that "Main View" is selected so that the action is set for the entire screen.

3. Select Action "Time Completed"
On selection, a pop-up will appear. Here, you need to select Redirect from the drop-down menu under the head Action Defined.

1. Action Defined
Select the action "Redirect: from the drop-down list.

2. Select Screen
Select the screen "MoviesList1" from the drop-down menu.

3. Click on "Save" button
This action will automatically redirect user to the next screen [MoviesList1 screen], after the specified time is completed.

Now as you have configured the iOS mobile application, so lets run/preview it using our exclusive preview tool - PreviewIT App. This unique application enables you to see and experience how the end user would view the mobile app developed by you. To review your application on this tool, its not compulsory to finish the application and submit. You simply need to install the PreviewIT application from the App Store (Since you have developed an iOS application, you need to use the PreviewIT App on Apple device to preview your application). Here, login with your Configure.IT credentials and select the application that you would like to preview real-time. You can share it with your client too during the mobile app development process. Suggested changes from the clients can immediately be taken care of, which would simultaneously reflect on the previewer app screen. It is a REAL app in REAL time – for easy collaboration between teams and client.

Download PreviewIT app
Download the PreviewIT App (iOS and Android) from the links below.
Once the app is downloaded, open the app and you will be given a walk-through of the complete application as how to use the same.