This document gives a basic introduction and therefore is intended for beginners to learn & get acquainted with Configure.IT
Generate the app within a very short time irrespective of the skill set you possess. Let's get started...!!
- Mobile App Console : 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.
- Templates : 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.
- Backend : A panel where the user can configure his Database, Admin Panel and API.
- 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 Editor : Queries allow the user to describe desired data, leaving the database management system (DBMS) responsible for planning, optimizing, and performing the physical operations necessary to produce that result as it chooses. SQL Query Editor allows the users to interact such 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 : 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.
- A complete revolutionary development platform that enables configuring mobile applications.
- Configure.IT covers the entire cycle of mobile app development adhering to standardization with automation.
- This solution caters to the needs of a developer, an enterprise and a novice user as well.
- Configuring not only helps you save your efforts, but also your time and resources.
- Designed to give the flexibility to explore, configure and reuse via mapping International quality standards with Zero dependency.
- Delivers Standard code with easy "Drag & Drop", that too with NO Bugs and short turnaround time.
- Easy to manage change request with power of native tools in online browser.
- No Lock-in, 100% Source Code Ownership.
- Real-Time preview of apps with exclusive tool – PreviewIT.
- Use Configure.IT, a complete browser based online platform and take your experience to the next level.
- Configure and generate the finest app ever…!!
Now, as you are all set to explore the world of application with Configure.IT, let's get started!
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
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
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.
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".
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.
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.
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 :
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.
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.
Get logged in using your Configure.IT login credentials and 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 the 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.
When you're done previewing, double tap anywhere on empty area of the screen and you will be out of the preview mode. You can also use the feature "Floating Menu", via which you can move across the PreviewIT App using the different options available.