Build Native Apps in the Browser with Configure.IT

This article was sponsored by Configure.IT. Thank you for supporting the sponsors who make SitePoint possible.

Creating a modern and feature-rich mobile app has never been a simple task, but is now more complex than ever. There are a plethora of platforms, programming languages and strategies to consider, and knowing where to start and what path to follow involves understanding and appreciating a lot of interconnected components.

The Mobile Platform

This is one of the easier decisions to make as no contenders have made any significant dent into the duopoly market share of iOS and Android. However, there are certain apps that are more successful on each respective platform, and you need to consider how you will market and generate revenue from your efforts, as the best approaches to this can vary for each ecosystem.

Depending which platform you decide on, and this may be both, the next decision is a big one.

Application Programming language

If you want to develop natively for Android, then you will need to learn Java. Java is a common language with a twenty year history and a large community, but Android adds its own concepts, APIs and tooling into the mix. Whilst you will find a lot of documentation and learning resources, Java is not the easiest language to get started with and can take a long time to master.

With iOS you now have the choice of two programming languages, Objective-C and Swift. Objective-C takes influence from C and C++, which are both as well established as Java, but is also not an easy language to learn, and Apple is slowly phasing it out of use. Swift is its replacement, and whilst it’s simpler and more streamlined, it’s regularly changing and you will still need to use Objective-C for more complex tasks for a few years to come.

If you want to try and reduce the amount of unique code that you need to write there are a wide variety of hybrid and cross-platform options that allow you to develop for multiple platforms in one programming language (including C#, and JavaScript). All involve compromise and vary in performance, feature sets and synchronicity with the core platforms they support.

Application Backend

If your app idea needs to store user data, synchronize between multiple platforms, or read and write data to/from other sources, you will need a database and something to handle interactions with it.

This is an even broader topic. There are dozens of databases and backend programming languages, SaaS (software as a service) offerings, architectural techniques and strategies.

Did I also mention that you will have to handle meeting the demand on these services if your app becomes popular? There have been many cases of popular services crashing due to a rapid increase in popularity, upsetting potential customers. What about analytics, handling errors, testing, and rolling out updates to your app? Again, even more options to weigh up and research.

When Facebook shut down Parse – which once led the mobile Backend-as-a-Service space – earlier this year, thousands of apps were forced to migrate from a SaaS-based backend to a hosted backend. The vendor lock-in killed the whole point of using a scalable and flexible backend system.

If you have the resources, you can hire all the experts you need to handle each language, component and task effectively, but this isn’t always practical for smaller companies. Or you could handle everything between a small (or one person) team — you’ve got a spare 6 months to learn everything you need to learn, haven’t you?

The Platform for Native App Developers

Witnessing the popularity and growing amount of solutions that attempted to make mobile development easier, but ultimately fell short, Configure.IT looked to make something different and unique. Its founders set out to create a mobile app development platform that not only gives you everything you need, but also generates truly native code — no cross-compilation, WebViews or compromises needed.

It takes a different approach to building apps, recognizing the typical process a developer would follow, and attempting to simplify the process for anyone with a modicum of technical knowledge to use.

They key proposition of the platform is the tight integration of key parts of any mobile application into one platform – backend, API layer, mobile app UI – all based on the most widely used technologies for producing customized apps.

For the purposes of this article, we’ll take a look at one of the demo projects (an events app) as a base. The project is split into two sections: the backend, and the front-end.

The Backend

The backend section of your app is divided into sub-components that let you create and manage the database, API, admin panel (CMS) and your entire server-side business logic.

Database

More than an abstract list of tables and fields, you have access to full MySQL and SQLite databases, including views, triggers and procedures. You can manage these with table views, or with raw SQL, and you can import and export them from or to other tools.
You have a choice to select from three server-side database options – MySQL, MSSQL and PostgreSQL.

API

Sitting on top of the database is an API management tool for exposing the data to your app. You can create these API methods with a visual drag-and-drop flow tool, allowing you to connect API calls to other triggers and actions as well as raw data. Once you have created the method, it’s easy to test and get an idea of the results you will be working with.

You can add your own custom code in PHP within the flowchart, which allows you to virtually integrate any custom business logic. Additionally, the 3rd party API connector is a powerful feature that helps you connect with any API outside the platform using various methods (REST, XML, JSON and so on). There’s also a visual debugger, which instantly shows errors while you make APIs with the flowchart, eliminating any possibility of syntactical errors.

Data Panel

The Data Panel section allows you to build a customized admin panel, forms, and lists based on different modules that you may want to define. It is the most versatile part of the platform, with the ability to produce very detailed information dashboards, so that you can manage the dynamic information within your app.

The App

Encouraging you to develop your front-end app as thin and light as possible, the GUI app designer lets you create app screens and connect them directly to API data sources. You can then add integrations with third-party services, notifications, screen widgets and layouts, all of which can connect and interact directly with your data.

There’s a widget library of standard operating system components as you would expect and plenty of customized controls that they’ve built which are generally not bundled in vendor-shipped SDKs. You can drag these onto the canvas and inspect them in the page structure.

There are several options for you to access all the hardware features of the device, and customize the app-side logic accordingly – by building cases and conditions right within this interface.

To see how your app will look on different platforms and devices, you can use the toggle buttons on the top menu and the app designer will generate the layouts you need to fit different devices and dimensions.

It’s easy to replicate what you build for one platform on another, with almost zero effort. Once you build an app for iOS, it can be replicated for Android in almost no time.

See Your Output on Real Devices with PreviewIT

The PreviewIT app is a free app available for iOS and Android that allows you to preview the app on your smartphone or tablet. There’s no provisioning, compilation or any SDK required to be able to preview apps.

As soon as you make changes to your app configuration in the browser, you can see them on the device using PreviewIT. There are also features that help members of your team provide feedback, such as note-taking and recording screencasts.

The app can be downloaded for free from the App Store and Google Play.

Show Me the Code!

We have all tried tools like Configure.IT before, and whilst they are flexible and allow you to create fully-featured apps, they are often for limited industries and use cases. You can rarely take what you can create in the platform further for tweaks and customizations — you are locked into what the platform offers.

Configure.IT offers you the ability to download the code for every component of your project, the backend, APIs, iOS (an XCode Project based on Swift 2.0) and Android apps (an Android Studio Project based on Java).

Below is an example of the example project downloaded and running in Android Studio.

And for iOS in XCode…

From here, you can add any other native features you wish or bring the apps into any custom configuration and build processes you have.

Configure All You Need?

Developers have often been skeptical of visual application builder tools, considering them too simple for anything beyond portfolio or marketing apps. Configure.IT have aimed to create something different from their competitors, aimed at developers who want to create quality apps quickly, but not compromise on complexity or performance. It’s a perfect fit for in-house developers at enterprise companies, or smaller developers creating bespoke apps for clients.

If you’re new to native development and have a killer idea you want to get to market, or an experienced developer looking to achieve more quicker, then take a look. You might be pleasantly surprised. Plus, as a Sitepoint reader, you have an opportunity to take advantage of a special discount on their subscription and have the ability to download the native source code of your app for a 50% discount. Click here to claim the offer.