- Mobile App
- It's a screen design interface, a place where you design your screens, add properties and actions that enables the screens to communicate with your Backend, which eventually processes actions and fetches data from the database.
- Configure.IT provides you with the pre-defined templates to ease your configuration. You can assign the groups of information like tabs, controls, screens, etc for the data collection framework to give a flexible structure to the templates.
- A panel where the user can configure his Database, Admin Panel and API.
- Application Program Interface is an interface where you define functionalities of how the Mobile screens and the database should interact by setting inputs and outputs. The API describes and prescribes the expected behavior of that component/control/object.
- 3rd Party APIs
- A 3rd Party API facilitates integration and grants you the requested permissions. Popular examples of 3rd Party APIs are Google Maps, Facebook, Twitter, etc.
- SQL Query
- Queries allow the user to describe desired data, leaving the database management system (DBMS) responsible for optimizing, and performing the physical operations necessary to produce those results, as chosen. SQL Query Editor allows the users to execute these queries.
- Admin Panel
- An interface from where you can manage (add/delete/edit/view) all the data used in your application in a more friendly and synchronized manner.
- PreviewIT application is an exclusive tool developed to look at the output of your app configurations in "real time" on your iPhone, iPad and Android. The app shows native output (and not as a web/HTML app) with real data – fetching the data via API. The application offers seamless preview experience – with great productivity features to reduce time for real time review. The app requires a Configure.IT account or Preview User credentials to be able to preview app development projects.
2 Know the Configure.IT Difference
- Not just “yet another” code-generator
- A full-stack development platform
- Generate fully customized solutions
- Huge savings in time
- Extensive reusability and standardization
- Drag-n-Drop interface
- Add your own code (if required)
- Zero Lock-in. Download full source code.
- Real-time Preview
- Infrastructure free solution
3 Create Account / Sign Up with Configure.IT
Now, as you’re all set to explore the world of application with Configure.IT, let's get started!
sign in Try for free
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.
3.1 Sign In into Configure.IT
If you already have an account, you can directly login to Configure.IT - http://www.configure.it/
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.
4 Create New Project
Home page or the Dashboard page presents you Learning Videos, Release Notes and important links as Getting Started, Community, Help Center and Gears App.
Click on “Create Project with Walkthrough” and this will direct you to the ‘Projects’ page. All you need to do is, follow the instructions, stepwise.
4.1 Enter Project Name
- 1 Click on "Add Datasource"
- 2 Write the name of your project (app)
- 3 Hit enter
4.2 Select Template or Start With Blank
There are two ways to start, you can either start with blank project or choose template, we'll start with template instead of designing our own screens. It is the fastest and easiest way to understand the basics of developing a mobile application.
On this page, you can select Platform, Device and Orientation.
Select the template - M-Go and click on ‘Use this Template’.
That’s all ! Your new project is being created by Configure.IT. This activity will take couple of seconds till your project space is being setup. Once your project is set up successfully, you’ll see a confirmation page. This page has links to all the necessary sections to start the configuration.
These links will also be available on project detail screen later on.
- A browser based GUI tool to compose App UI and navigation flow for both iOS and Android.
- A free mobile app to allow you to preview the app on real device as you build it using App Console.
- Design relational database based on MySQL, PostgreSQL or MSSQL by setting up database tables, triggers and views.
- API Builder helps you create business logic for your application with the help of flowchart.
- Build Data Panel, more popularly known as Admin Panel for content management for your app.
OK, here’s where the real action begins.
We will start with App UI, using App Console to create a new screen in the project we just created.
Click on “Start to configure” button for ‘App Console’
section to proceed.
5 App Console
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.
5.1 Add New Screen
You can add new screen from the option
Enter the Screen name
Select Screen Template
Select the first screen template "Gallery1” 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 !
Click on "Add screen"
This will create a new screen and will be loaded automatically in the panel.
The given image displays how the newly added screen would look like.
The configured screen can be modified via adding controls, setting properties and actions, etc
6 Data Source Configuration
6.1 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 the 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 above screen). Follow the steps in the upcoming slides to add the datasource for displaying the list of movies on the just configured screen “MoviesList1”.
6.2 Add Datasource
Click on "Add Datasource"
This will add new datasource in the current screen "MoviesList1".
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.
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.
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 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.
7 API Call
Once the datasource has been added, you need to define an action called "API Call" on the current
screen, for the output / input parameters to be used across the screen. For the API Call, you need to do
the following settings :
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.
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.
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".
For setting the action "API Call" on the pop-up that appears for the Load event of Grid View.
Select the action API Call from the drop-down list.
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.
8 Splash Screen
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:
Click on Object Tree
You will find Object Tree icon in the top-left corner of the screen.
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.
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.
Select the action "Redirect: from the drop-down list.
Select the screen "MoviesList1" from the drop-down menu.
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, 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. To review your application on this tool, it's not at all mandatory to finish the application and submit. You simply need to install the PreviewIT application from the App Store / Play Store. Hence, accordingly you will have to use the PreviewIT App on Apple / Android 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.
9.1Download 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.
9.2How to Use PreviewIT app
Once you Sign in using your Configure.IT credentials, select the project you want to preview. If you're opening the project for the first time, the app will download latest configurations and show you preview.
From next time onwards, you'll be asked whether you want to preview the last version of the application you downloaded OR you want to fetch the last updated configurations. If you select the later option, REFRESH the same screen of the device by just swiping TWO fingers across to instantly see the changes in effect.
10 Connect With US
We endeavor to maintain a lasting relationship with You.
You can connect with us directly via Live Chat where our Support Team will assist you.
You can raise a ticket via - Support Ticket:
Be Social with us